Glenn's public fiddles
-
wX2qw
No-Library (pure JS), HTML, CSS, JavaScript
-
zL6Tn
No-Library (pure JS), HTML, CSS, JavaScript
-
html text field to have pre appended text which is not modifiable
I would like to have a text field which has pre appended text which is not modifiable. So when user tries to add text it starts after the pre text. Also when the form is submitted it should not pass the pre appended text. Its mainly for display purpose but within the text field. I have attached the image which will clarify my question further. For example I would like to add "$" as pre text in the image below. Any help is greatly appreciated. Note: the $ is dynamic text and so could not be image. enter image description here
-
Hide table row based on contained td attributes
<table border="1"> <tr> <td> <div class="xyz">Division 1</div> </td> </tr> <tr> <td> <div class="abc">Division 2</div> </td> </tr> </table> Please note the <td> contents are added dynamically. I need to hide the second <tr> based on its <td> containing <div> class name. And please suggest in css/javascript method and no jQuery because the html doesnot support jQuery Thanks
-
LocalStorage help, (working todo list)
Im new on saving stuff on the web (cookie, localstorage) with more, And this is my current code var c = 1; function addText(){ var input = document.getElementById('input').value; var node = document.createElement("P"); node.setAttribute('id', 'anchor'+c); var textnode = document.createTextNode(input); node.appendChild(textnode); var removenode = document.createElement("input"); removenode.setAttribute('type', 'button'); removenode.setAttribute('value', 'X'); removenode.setAttribute("onclick", "removeText('anchor"+c+"')"); node.appendChild(removenode); c++; document.getElementById('do').appendChild(node); } function removeText(item){ var child=document.getElementById(item); document.getElementById('do').removeChild(child); } I wonder if someone could help me out with localstorage in this code? would love the help, I have read here http://www.w3schools.com/html/html5_webstorage.asp and other places but I don't really understand how to implent it to my code. thanks
-
CSS :after image not showing up - IE8
EDIT: Can't believe I forgot to specify, this problem is in IE8 I have a form with a bunch of checkboxes set up like the following: HTML: <input type="checkbox" class="checkbox" name="fields" id="Anesthesiology" /><label for="Anesthesiology">Anesthesiology</label> CSS: .checkbox { display: none; } .checkbox + label { position: relative; display: block; padding-left: 25px; margin: 16px 0 0; font: 13px/16px 'Trebuchet MS', Arial, sans-serif; color: #656565; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .checkbox + label:before { content:" "; display: block; position: absolute; left: 0; width: 14px; height: 14px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; border: 1px solid #d1d1d1; } .checkbox.checked + label:after { content:" "; display: block; width: 16px; height: 17px; background-image: url(../images/checkmark.png); position: absolute; top: -3px; left: 2px; } What this is doing is hiding the default checkbox and creating a new checkbox as :before of the label (which is showing up in ie8). When the label is clicked, a class of `.checked` is being appended to the checkbox input tag, which should then make the `:after` checkmark background image appear. I have also tried using a span inside of the label for the same effect, but nothing seems to work. The classes are being appended properly, but the :after checkmark never shows up. Any thoughts?