Jon Rohan posted an excellent article on the ability to create triangles and other shapes simply by manipulating the borders of div tags, as it turns out it’s not that hard to put a callout effect on any plain rectangular div without using images. The original post is here (http://jonrohan.me/guide/css/creating-triangles-in-css/) . So what about taking this a bit farther and turning it into a fully fledged menu system where the selected element has the callout, and on rollover the callout follows your mouse up and down the menu? Take a look at the sample below, which will be explained in this post.
Try it out here: http://www.learnsomethings.com/testsomethings/rollover_tabs.html
First, there is the css that will give us the tabs, triangles, which when placed almost over one another form the callout, and the content boxes.
body{
font-family:Arial, Helvetica, sans-serif;
}
.chat-bubble:hover{
cursor:pointer;
}
.chat-bubble {
background-color:#EDEDED;
border:1px solid #666666;
font-size:14px;
float:left;
line-height:1.3em;
margin:10px auto;
padding:5px;
position:relative;
text-align:center;
width:120px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
}
.chat-bubble-arrow-border {
border-color: #666666 transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
visibility:hidden;
width:0;
position:absolute;
bottom:-21px;
left:30px;
}
.chat-bubble-arrow {
border-color: #2e6a8e transparent transparent transparent;
border-style: solid;
border-width: 10px;
visibility:hidden;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:30px;
}
#content{
display:block;
width:500px;
float:left;
}
.content_box{
width:100%;
height:300px;
border:1px solid #060;
float:left;
}
Now, inside the
tags of your page you will need to place the
<body onload="javascript:hover('1');">
<div id="tab_panel">
<div class="chat-bubble" name="1" id="1" onmouseover="javascript:hover(this.id)" style="padding-left:10px;">
Tab 1
<div class="chat-bubble-arrow-border" id="1_tri" ></div>
<div class="chat-bubble-arrow" id="1_arr" ></div>
</div>
<div class="chat-bubble" name="2" id="2" onmouseover="javascript:hover(this.id)" style="border-left:none">
Tab 2
<div class="chat-bubble-arrow-border" id="2_tri" ></div>
<div class="chat-bubble-arrow" id="2_arr" ></div>
</div>
<div class="chat-bubble" name="3" id="3" onmouseover="javascript:hover(this.id)" style="border-left:none;">
Tab 3
<div class="chat-bubble-arrow-border" id="3_tri" ></div>
<div class="chat-bubble-arrow" id="3_arr" > </div>
</div>
<div class="chat-bubble" name="4" id="4" onmouseover="javascript:hover(this.id)" style="border-right:1px solid #666666;border-left:none;">
Tab 4
<div class="chat-bubble-arrow-border" id="4_tri" ></div>
<div class="chat-bubble-arrow" id="4_arr" ></div>
</div>
</div>
<br clear="all"/>
<div id="content">
<div id="content_1" name="content_1" class="content_box" style="display: none;background-color: #E5872C">
Page 1
</div>
<div id="content_2" name="content_2" class="content_box" style="display: none; background-color: #3E4E6C">
Page 2
</div>
<div id="content_3" name="content_3" class="content_box" style="display: none; background-color: #92CF00">
Page 3
</div>
<div id="content_4" name="content_4" class="content_box" style="display: none; background-color:#333">
Page 4
</div>
</div>
</body>
Finally, there is a script block that you need to put in the
of your page right under thetag that will control the changing of the tabs, callout triangles, and the main content.
<script>
var last_hover_id = 1;
function hover(id){
var tri_obj= document.getElementById(last_hover_id + '_tri');
tri_obj.style.visibility = "hidden";
var arr_obj= document.getElementById(last_hover_id + '_arr');
arr_obj.style.visibility = "hidden";
document.getElementById(last_hover_id).style.backgroundColor = "#EDEDED";
document.getElementById(last_hover_id).style.color = "#000";
document.getElementById('content_' + last_hover_id).style.display = 'none';
document.getElementById('content_' + id).style.display = 'block';
var tri_obj= document.getElementById( id + '_tri');
tri_obj.style.visibility = "visible";
var arr_obj= document.getElementById( id + '_arr');
arr_obj.style.visibility = "visible";
document.getElementById(id).style.backgroundColor = "#2e6a8e";
document.getElementById(id).style.color = "#FFF";
last_hover_id = id;
}
</script>
You can see that the names of the content blocks as well as the id's of the tab boxes are no coincidence, this only works if the content boxes remain "content_x" and the id of each tab box is a numerical number that matches the content box.
The full source is here: http://www.learnsomethings.com/testsomethings/rollover_tabs.html
Mind the gap ! – After removing an element using Ext.fx.slideOut, fadeout etc.., the now invisible element still takes up space, how can I remove it?
How many times have you watched the invisible man? Anyone who answers more than once is familiar with hollywood cliches, like floating objects that are being carried, or clothes that appear to float through the air. Looks like HTML took a cue from the silver screen as when an element is “hidden” aka invisible it still takes up space (just like in the movies!), but when that element is gone aka display=none, then it just isn’t around. Try to remove one of the items in the middle below to see what I mean:
The example code is below, but contains the omission that produces the gaping hole after the list item is slid out of view:
<body>
<div id="my_list_holder" >
<div id="first_node" style="display:none"></div>
</div>
<script>
for (var i = 0; i < 10; i++){
var new_item = {
'tag': 'li', 'id': i,
children: [
{'tag': 'div', 'id': 'item', 'html':i + ' - List Item'},
{'tag': 'div', 'id': 'remove_item', 'html':'[Remove]', 'onclick':"javascript:removeRequest('" + i + "');" }
]
};
Ext.DomHelper.insertAfter(first_node, new_item);
};
function removeRequest(id){
Ext.Msg.confirm('Sure', 'Do you really want to delete this item?', function(btn, text){
if (btn == 'yes'){
Ext.get(id).slideOut();
} else {
}
});
}
</script>
</body>
To correct this problem add the following properties to the slideOut ext method, remove = true will set the list item’s display attribute to none where the default is visibility = hidden:
Ext.get(id).slideOut('t',{remove : true});
Setting multiple selected values in a html selectbox using javascript
I couldn’t find any really good answers to this question as most of the results when looking for this pertained to reading the multiple values versus setting the multiple values, so I thought I should post this piece of code. Assuming your multiple values are coming out of the database in the form of a comma delimited string [ 7,8,78,55 ] the following code will set the values using javascript.
// This is a great function I found @
// http://stackoverflow.com/questions/143847/best-way-to-find-an-item-in-a-javascript-array
// for determining
// if a value exists in an array.
function include(arr, obj) {
for(var i=0; i<arr.length; i++) {
if (arr[i] == obj) return true; }
}
var selections = some_data_from_db; // this would be the data from the database
var selectedValues = new Array();
var your_sb = document.getElementById('id_of_sb');
//if selections has a length then there is more than one category that was selected.
//there is a difference in how you have to handle multiple vs. sigle values selected.
if(selections.length){
selectedValues = selections.split(',');
for ( i = 0; i < your_sb.options.length - 1; i++){
if ( include(selectedValues, your_sb.options[i].value)){
your_sb .options[i].selected = true;
} else {
your_sb .options[i].selected = false;
}
} // end for loop
} else { // this would be a single value
your_sb .value = some_data_from_db;
}
The year of patient’s rising – will the social network finally bring patients to the forefront of medical care?
In the past whole communities relied on Many of these points are right out of a software development handbook, think about this, the user is always right, why would medicine be no different? What impact will this have on primary care physicians when patients with health care plans and data are able to choose specialists without a referral, effectively bypassing the gatekeeper and saving time and money.
Some tips on testing extjs applications containing data grids (which is all of them right?)
I have had a chance to work with some ext apps that have been in production now for some time and would like to pass on the following cautionary advice to those about to deploy grids. When you set up tests do you test for large data sets? It’s one thing to certify that all of the validation / constraints are indeed working, and that all of the updates and data calls are transferring data between the client and database as they should, however, when conducting tests have you performed a ‘stress’ test that included thousands of rows? Tens of thousands of rows? Don’t write that possibility of as impossible, or so improbable that you would rather launch and worry later, as later will eventually be today, with a small difference, your application will be in production, making changes harder, and mistakes costlier. I have seen charts as well as grids that worked flawlessly at 500 rows, 1000, rows die at 1010 rows, returning the dreaded internet explorer unresponsive script error. I have also seen cases of nested panels causing the same error. Just a word to the wise, when dealing with ext think of the largest number of users, records, etc, and add some to that then test.It’s not the things that you think of that come back and bite you it’s the improbabilities that all of a sudden are better than probable, they are reality that really knock down an otherwise outstanding app.