Smashed Blog Development

Tag Archive: jquery

Gravity Forms 1.4.5 – no such method ‘select’ for tabs widget instance

Comments Off

I recently bumped into the problem mentioned here in the latest WordPress update when using Gravity Forms.

The fix outlined is for Gravity Forms 1.6.4.5.4, I’m using version 1.4.5 so the described changes don’t exist.
Below is a fix for the latter.

Locate the file js.php in wp-content/plugins/gravityforms/

Find this line around 1251:

jQuery("#field_settings").appendTo(".field_selected").tabs("select", 0);

and change to:

jQuery("#field_settings").appendTo(".field_selected").tabs("option", "active", 0);

Hope that helps!

jQuery CSS theme switcher

Comments Off

HTML:

<ul class="themeSwitch">
	<li><a href="#light" id="light" class="selected">Light</a></li>
	<li><a href="#dark" id="dark">Dark</a></li>
</ul>

jQuery:

//Theme switcher
$('.themeSwitch a').click(function(e) {
	//Get the ID from link
	id = $(this).attr('id');

	//Load alternate styles
	if (id == 'dark') {
		//Method 1: Swap out existing CSS included in head
		url = '/blog/wp-content/themes/smashedcrab/css/monokai.css';
		$('#syntax-css').attr('href', url);

		//Method 2: Change body class
		$('body').removeClass('light').addClass('dark');
	} else {
		//Must be light
		url = '/blog/wp-content/themes/smashedcrab/css/github.css';
		$('#syntax-css').attr('href', url);
		$('body').removeClass('dark').addClass('light');
	}

	//Remove any selected link
	$('.themeSwitch .selected').removeClass('selected');
	//Add 'selected' class to clicked link
	$(this).addClass('selected');

	//Prevent default link action
	e.preventDefault();
});

Easy Hover menu with jQuery

Comments Off

I’ve seen this or some variant around a few times. Easy one to use these days when you don’t have to cater for IE6. Make sure you grab the latest version of hoverIntent.js as well.

var config = {    
	 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
	 interval: 100,  // number = milliseconds for onMouseOver polling interval    
	 over: doOpen,   // function = onMouseOver callback (REQUIRED)    
	 timeout: 300,   // number = milliseconds delay before onMouseOut    
	 out: doClose    // function = onMouseOut callback (REQUIRED)    
};

function doOpen() {
	$(this).addClass("hover");
	$('ul:first',this).css('visibility', 'visible');
}

function doClose() {
	$(this).removeClass("hover");
	$('ul:first',this).css('visibility', 'hidden');
}
$("#topNav li").hoverIntent(config);

Shouldn’t be hard to figure out the HTML needed!

Mark active page with jQuery and CSS

Comments Off

This one is really handy. Sometimes you may need to change window.location.pathname, depending on how your URL structure works.

Assuming you have a menu set up in a list:

<ul id="nav">
	<li><a href="#">Link_1</a></li>
	<li><a href="#">Link_2</a></li>
	<li><a href="#">Link_3</a></li>
</ul>

Use the jQuery:

var url = window.location.pathname, 
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$('#nava').each(function(){
	if(urlRegExp.test(this.href.replace(/\/$/,''))){
		$(this).parents('li').addClass('active');
	}
});

And then some good old CSS:

#nav li.active a:hover {
	font-weight:700;
}

Enable extra colour properties in jQuery animations

Comments Off

Minified:

(function(d){d.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","color","outlineColor"],function(f,e){d.fx.step[e]=function(g){if(!g.colorInit){g.start=c(g.elem,e);g.end=b(g.end);g.colorInit=true}g.elem.style[e]="rgb("+[Math.max(Math.min(parseInt((g.pos*(g.end[0]-g.start[0]))+g.start[0]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[1]-g.start[1]))+g.start[1]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[2]-g.start[2]))+g.start[2]),255),0)].join(",")+")"}});function b(f){var e;if(f&&f.constructor==Array&&f.length==3){return f}if(e=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)){return[parseInt(e[1]),parseInt(e[2]),parseInt(e[3])]}if(e=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)){return[parseFloat(e[1])*2.55,parseFloat(e[2])*2.55,parseFloat(e[3])*2.55]}if(e=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)){return[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]}if(e=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)){return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)]}if(e=/rgba\(0, 0, 0, 0\)/.exec(f)){return a.transparent}return a[d.trim(f).toLowerCase()]}function c(g,e){var f;do{f=d.curCSS(g,e);if(f!=""&&f!="transparent"||d.nodeName(g,"body")){break}e="backgroundColor"}while(g=g.parentNode);return b(f)}})(jQuery)

:focus support with jQuery

Comments Off

This is an oldie, but a goodie. I don’t find myself using this as much these days, but for when you need some old browser support for the CSS :focus property.

$('input[type="text"]').focus(function() {
    $(this).addClass("focusField");
    if (this.value == this.defaultValue){
        this.value = '';
    }
    if(this.value != this.defaultValue){
        this.select();
    }
});
$('input[type="text"]').blur(function() {
    $(this).removeClass("focusField");
});