Labels should have "for" attributes that match the ID of the input they are labeling. This means we can snag that attribute and use it in a selector to trigger a click on the input itself. Assuming of course you have some reason to watch for clicks on inputs.
var labelID;
$('label').click(function() {
labelID = $(this).attr('for');
$('#'+labelID).trigger('click');
});
Sparkbox has this snippet to help figure out how often browser windows really are resized.
(function() {
var resizeTimer;
// Assuming we have jQuery present
$( window ).on( "resize", function() {
// Use resizeTimer to throttle the resize handler
clearTimeout( resizeTimer );
resizeTimer = setTimeout(function() {
/* Send the event to Google Analytics
*
* https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiEventTracking
* _trackEvent(category, action, opt_label, opt_value, opt_noninteraction)
*/
var $window = $( window );
_gaq.push( [ "_trackEvent", "User Actions", "Browser Resize", $window.width() + " x " + $window.height() ] );
}, 1000);
});
})();Note how easy it is to track events in Google Analytics. That can be used for just about anything.
Let's say you have a link to show more options which expands a list of options. It's says "more options". It's easy to toggle those options with .toggle() or .slideToggle(), but the text remains the same. To toggle the text too...
$("#more-less-options-button").click(function() {
var txt = $("#extra-options").is(':visible') ? 'more options' : 'less options';
$("#more-less-options-button").text(txt);
$("#extra-options").slideToggle();
});There is a bunch of other ways, as well.
In this example, a submit button is disabled if none of the checkboxes are checked and enabled if at least one is checked.
<form>
<!-- bunch of checkboxes like: -->
<input type="checkbox" ... >
<input type="checkbox" ... >
<!-- submit button, defaults to disabled -->
<input type="submit" value="submit">
</form>The trick is that you can use .is(":checked") on a jQuery object full of a bunch of elements and it'll return true if any of them are checked and false if none of them are. AND, using .attr() for the disabled attribute with that boolean value will enable/disable that button.
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
$('a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).addClass("external");$.expr[':'].external = function(obj) {
return !obj.href.match(/^mailto\:/) && (obj.hostname != location.hostname);
};
$('a:external').addClass('external');$('a:not([href^="http://your-website.com"]):not([href^="#"]):not([href^="/"])').addClass('external');$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if (!a.test(this.href)) {
// This is an external link
}
});
This idea is from Veer.com and how they handle the dropdowns for things like T-Shirt sizes. Thank you to Dennis Sa.
We'll wrap a regular text input inside an <div>, which also contains an unordered list which will represent the values for the popup menu.
<div class="size">
<input type="text" name="test" value="choose your size" class="field" readonly="readonly" />
<ul class="list">
<li>Male - M</li>
<li>Female - M</li>
<li>Male - S</li>
<li>Female - S</li>
</ul>
</div>The lists will be hidden by default, but still all styled up and ready to go when a click triggers them to be shown.
.size { position:relative }
.size .field {
width:300px; background:#EC6603; color:#fff; padding:5px; border:none; cursor:pointer;
font-family:'lucida sans unicode',sans-serif; font-size:1em;
border:solid 1px #EC6603;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.size .field:hover {
border:solid 1px #fff;
-moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999
}
.size>ul.list { display:none;
position:absolute; left:30px; top:-30px; z-index:999;
width:300px;
margin:0; padding:10px; list-style:none;
background:#fff; color:#333;
-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
-moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999
}
.size>ul.list li {
padding:10px;
border-bottom: solid 1px #ccc;
}
.size>ul.list li:hover {
background:#EC6603; color:#fff;
}
.size>ul.list li:last-child { border:none }We'll throw a quick plugin together, so that this functionality can be called on any div wrapper that contains this same HTML setup.=
(function($){
$.fn.styleddropdown = function(){
return this.each(function(){
var obj = $(this)
obj.find('.field').click(function() { //onclick event, 'list' fadein
obj.find('.list').fadeIn(400);
$(document).keyup(function(event) { //keypress event, fadeout on 'escape'
if(event.keyCode == 27) {
obj.find('.list').fadeOut(400);
}
});
obj.find('.list').hover(function(){ },
function(){
$(this).fadeOut(400);
});
});
obj.find('.list li').click(function() { //onclick event, change field value with selected 'list' item and fadeout 'list'
obj.find('.field')
.val($(this).html())
.css({
'background':'#fff',
'color':'#333'
});
obj.find('.list').fadeOut(400);
});
});
};
})(jQuery);Then we just call the plugin, when the DOM is ready of course.
$(function(){
$('.size').styleddropdown();
});
Performs a smooth page scroll to an anchor on the same page.
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});