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]

jQuery and Form Submit Breaking

May 10th, 2012

If you intercept the form submit with some jQuery and find that you can’t trigger the submit yourself with your script, you may need to check the name of your submit button. If you have a submit button named submit, jQuery will not be able to submit that form. You may also see the error “Uncaught TypeError: Property ‘submit’ of object # is not a function”.

The fix is simple of course. Change the button name.

Wrong: [code]<input type="submit" name="submit" id="confirm" value="Confirm">[/code]
Right: [code]<input type="submit" name="confirm" id="confirm" value="Confirm">[/code]

Hope that helps someone else.

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]

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