Tutorial Highlight Related Label when Input in Focus
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
$("label").removeClass("labelfocus");
});
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
$("label").removeClass("labelfocus");
});
$(function(){
$("a").each(function(){
if ($(this).attr("href") == window.location.pathname){
$(this).addClass("selected");
}
});
});
This function will add the class "selected" to any links (even relative) that point to the current page.
The below code will give you the X, Y coordinates of a mouse click within a given box. Removing all the stuff about the offset, you can easily get the X, Y coordinates of the click relative to the browser window.
$(function() {
$("#demo-box").click(function(e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
alert("X: " + relativeX + " Y: " + relativeY);
});
});
Click in the box below
Nicholas Ortenzio wrote this little plugin:
jQuery.extend({
getQueryParameters : function(str) {
return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
}
});
So if the URL is:
http://codepen.io/chriscoyier/pen/uszCr?lunch=sandwich&dinner=stirfry
You can do:
var queryParams = $.getQueryParameters();
And queryParams
will be an object like:
{
"lunch": "sandwich",
"dinner": "stirfry"
}
If you select and image with jQuery and then use .width()
, you'll get the images current width, even if it's been scaled (e.g. max-width: 100%;). You can access the images native width (even if it doesn't have any attributes which declare it) like this:
// Get on screen image
var screenImage = $("#image");
// Create new offscreen image to test
var theImage = new Image();
theImage.src = screenImage.attr("src");
// Get accurate measurements from that.
var imageWidth = theImage.width;
var imageHeight = theImage.height;
$('iframe').attr('src', $('iframe').attr('src'));
This isn't an end-all-be-all solution to fixing all weird IE z-index issues, but it certainly can help in some circumstances. What it does is loop through each of the elements that you declare and apply ever-declining z-index values on them. IE gets this backwards, and this sets it correctly. The reason it's not end-all-be-all is because sometimes it's not DOM-order that you need z-index to be in, and sometimes scoping comes into play as well.
Nonetheless, the view the demo in IE 7 (thanks Dan Nicholls) to see the broken version on top and the fixed version below.
$(function() {
var zIndexNumber = 1000;
// Put your target element(s) in the selector below!
$("div").each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
if(Browser.Engine.trident){
var zIndexNumber = 1000;
// Put your target element(s) in the selector below!
$$('div').each(function(el,i){
el.setStyle('z-index',zIndexNumber);
zIndexNumber -= 10;
});
};