If you have worked in frontend web development lately, you probably have realised how messy the whole thing is. From languages that compile on top of other languages to the ridiculous amount of frameworks that are published every day. In fact, you are probably already struggling to keep up; but trust me. you are not alone. Let’s take a look at what is going on and how we got here in the first place.
CodeIgniter 2.0 is coming out soon, so lets start studying the changes done to the HTML Table Class in the dev-release.
One of the most requested features was the ability to set tag attributes to individual cells. On CI 2.0 this is completely possible, however, since the documentation is not fully updated yet, I decided to make this short post to explain how it works.
Once the DOM is structured by the browser, each element in our HTML page has an index relative to its parent. Retrieving an element’s index with jQuery is an easy task, and it is so useful that it can save you a couple of lines of code.
You have a select element, and you need to “select” one of its options based on one of its values. What you do is use the “selected-selector” of jQuery to do it in a single line.
Lets say I have the following select element and I need to dynamically select the option with a value of 3, which would be the “Peach”.
<select name="myselect" id="myselect"> <option value="1">Apple</option> <option value="2">Pear</option> <option value="3">Peach</option> <option value="4">Orange</option> </select>
$("#myselect option[value=3]").attr('selected', 'selected');
// Or just...
$("#myselect").val(3);
If you want to get a little bit more technical, make sure you read the official jQuery documentation regarding this subject.
IE7 behaves strangely when we talk about z-index. It doesn’t always respect the z-index values of our elements. However, if you come around this weird stuff, just add a higher z-index to the parent of the element you want to put above everything else. Don’t ask me why this works but it does!
Lets take a look at a small example:
<div style="z-index: 3000">
<div style="position:absolute;z-index:1000;">
this element will appear above everything else
<a href="#">Page</a>
...
</div>
</div>