Javascript Element Properties From Object

December 19th, 2013

How to create a HTML tag, using an object of properties.

[code]$(‘#somediv’).append($(‘<a/>’, {href: ‘#’, id: ‘dothing’, text: ‘Do Thing’}));[/code]

Javascript HTML Fun

December 18th, 2013

Here are some useful Javascript snips for working with form data.

How to get the name of the HTML tag for an element:
[code]this.nodeName.toLowerCase()[/code]

This code will see if we have a map set of inputs (somename[]):
[code]// See if we have a map here
var mapFound = 0;
if (thisName.indexOf(‘[]’) != -1) {
mapFound = 1;
thisName = thisName.replace(/[\[\]’]+/g, ”);
}[/code]

How to take a map of inputs and turn them into a Javascript map type var, and toss the empty ones:
[code]var map = $(thisName).map(function(){
if (this.value != ”) {
return this.value;
} else {
return null;
}
}).get();[/code]

Faster Checked State jQuery

May 21st, 2012

http://jsperf.com/prop-vs-ischecked/4
Fastest by 98% is $el[0].checked; (in Chrome on Windows)

[code]// These will return true or false depending on the checked state of the HTML element
$(‘:checkbox[name=someCheckbox]’)[0].checked
$(‘:radio[name=someRadio]’)[0].checked[/code]

The Reddit pi Icon and :hover

October 19th, 2011

Today I had a task come up on my list that I’ve been interested in digging into for a while. After seeing the reddit π icon, and learning that it’s awesome, as well as reference to the movie The Net, I wanted to make use of the idea to hold some info on page generation times and a few other things useful as a dev on a site I’m working on.

So, digging in with Chrome’s developer tools, I looked into figuring out how to do it. At first, I thought it was a Javascript thing, using jQuery and mouseOver events, because that’s how it could have been done. However, that seemed a little heavy for this purpose, since it’d require some Javascript be loaded on each load. So, examining it a bit closer, I dug into the CSS, and discovered a new use of the pseudo property :hover.

Today I learned that you can use :hover on a parent element to change properties on a child element. Of course, it makes perfect sense now to use it like that, but it was one of those Ooohhhh! moments that you get when something obvious smacks you in the face.

Here’s one way to do the reddit π icon:
[code]
<style type="text/css">
#pibottom{float: right; padding-top: 4px;}
#pi{color: #a0a0a0; font: 16pt serif; padding: 2px;}
#picontent{font-size: 11pt; display: none;}
#pibottom:hover #picontent{display:inline;}
</style>

<br clear="all">
<div id="pibottom">
<span id="pi">&pi;</span>&nbsp;<span id="picontent">Load in ‘ . getScriptTiming() . ‘ sec. Ran ‘ . getCountDBQueries() . ‘ queries.</span>
</div>
[/code]

jQuery Pagination Top And Bottom

March 10th, 2011

Thanks goes to VNSMANIAN2006 for the code for a quick top and bottom pagination element with jQuery Pagination. The original note can be found here: http://plugins.jquery.com/node/8360#comment-4157

And here is how I used it:
[code]
$(document).ready(function(){
$.get("ajax.php?getcount=1", {}, function(data){
$("#pagination").pagination(data, {
num_edge_entries: 2, num_display_entries: 6, items_per_page: 20,
next_show_always: false, prev_show_always: false,
callback: function(page_index, jp){
$.get("ajax.php?p="+page_index, {}, function(data){
$("#paginationb").empty();
$("#pagination").clone(true).prependTo("#paginationb");
$("#reportInfo").empty().append(data);
});
return false;
}
});
});
});[/code]

And all I did was add the #paginationb div below the table.

WordPress - Entries (RSS) and Comments (RSS) - © 2011 Ben Dauphinee