Develop Reference

jQuery - Tabbed Content - Open on Selected Tab?

I've created some tabbed content. Is there any way for me to decide which tab I want open by changing the URL? I'm sure I've seen something similar before but can't find it!
I've created a fiddle here: http://jsfiddle.net/sW966/
The default tab is tab 1. But for example, if the URL was http://jsfiddle.net/sW966/#tab-2 the page would load with tab 2 open?
Thanks for any help, struggling a little :)
$(document).ready(function () {
$(".tab").click(function () {
$(".tab").removeClass("active");
$(this).addClass("active");
$("#tabbed-content .tab-content").hide();
$($(this).attr("href")).show();
});
});

Why not change your JS to:
Note this wont work in jsfiddle due to the way it works.
$(document).ready(function () {
if(window.location.hash){
tabChange($('.tab[href=#'+window.location.hash+']'));
}
function tabChange(tab){
$(".tab").removeClass("active");
tab.addClass("active");
$("#tabbed-content .tab-content").hide();
$(tab.attr("href")).show();
}
$(".tab").click(function () {
tabChange($(this));
});
});

You can try this:
Working fiddle here
Replace attribute "href" to "name"..
$(document).ready(function () {
$(".tab").click(function () {
$(".tab").removeClass("active");
$(this).addClass("active");
$("#tabbed-content .tab-content").hide();
$($(this).attr("name")).show();
});
});
Good Luck....

Jquery thumbnail gallery changing all images

I've tried to create a jQuery effect using fancy box to contain my content and within that is a large image with thumbnails below. What I was trying to make happen was when the thumbnails are clicked then the large image updates (see RACE Twelve image as an example). This works fine but the problem is when I go to another fancy box on my website (SEE RACE ONE box) then that image has been updated to be whatever thumbnail was clicked last.
I thought this might be event bubbling but preventing default hasn't helped.
I'm very new to jQuery and know that this is something stupid that I'm doing.
Any advice would be greatly appreciated? Thank you :)
Live version of page: http://www.goodwood.co.uk/members-meeting/the-races.aspx
jsfiddle for jQuery: http://jsfiddle.net/greenhulk01/JXqzL/
(function ($) {
$(document).ready(function () {
$('.races-thumbnail').live("click", function (e) {
$('.races-main-image').hide();
$('.races-image-wrap').css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
var i = $('<img />').attr('src', this.href).load(function () {
$('.races-main-image').attr('src', i.attr('src'));
$('.races-image-wrap').css('background-image', 'none');
$('.races-main-image').fadeIn();
});
return false;
e.preventDefault();
});
$(".races-image-wrap img").toggle(function () { //fired the first time
$(".races-pop-info").show();
$(this).animate({
width: "259px",
height: "349px"
});
}, function () { // fired the second time
$(".races-pop-info").hide();
$('.races-main-image').animate({
width: "720px",
height: "970px"
});
});
$('#fancybox-overlay, #fancybox-close').live("click", function () {
$(".races-pop-info").show();
$(".races-main-image").animate({
width: "259px",
height: "349px"
});
});
});
})(jQuery);

$('.races-main-image') will select all elements with that class, even the ones which aren't currently visible.
You can select the closest '.races-main-image' to the clicked element as per the code below (when placed inside the click event handler)
$('.races-main-image', $(e.target).closest('.races-fancy-box'))
So your new code should look like:
$('.races-thumbnail').live("click", function (e) {
var racesmainimage = $('.races-main-image', $(e.target).closest('.races-fancy-box'));
var racesimagewrap = $('.races-image-wrap', $(e.target).closest('.races-fancy-box'));
racesmainimage.hide();
racesimagewrap.css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
var i = $('<img />').attr('src', this.href).load(function () {
racesmainimage.attr('src', i.attr('src'));
racesimagewrap.css('background-image', 'none');
racesmainimage.fadeIn();
});
return false;
});
I've also removed your 'e.preventDefault();' return false; includes that, and was preventing e.preventDefault() from being executed in any case.

Unslider on Image Hover

I am using unslider, jquery light slider in my website which is working but can I keep the plugin in my image hover ?
I have tried these but doesnot work:
$(function() {
$('.banner').unslider({
autoplay:false;
});
});
$("#banner").hover(function(){
if($('#banner').autoplay('false')){
autoplay : true;
}, function (){
autoplay: false;
}
});

Your usage is quite strange and I guess you may want to temporarily stop sliding when you hover the banner. After checking out the documentation of unslider, I guess you may have a test on the following snippet:
$(function() {
var slidey = $('.banner').unslider({}),
data = slidey.data('unslider');
// I don't really know the relationship of $('.banner') and $('#banner') in your HTML code.
$('.banner').hover(
function() {
data.stop();
},
function() {
data.start();
}
);
});

Make a DIV reveal upwards onClick

I found a topic for revealing a DIV upwards but as I am no Javascript expert, I am wondering how I can make this work onClick rather than on hover?
Just in case this helps, the link to previous topic is: How to make jQuery animate upwards
Any help is appreciated.

Here is a sample demo
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
$("#reset").click(function(){
location.reload();
});
​
HTML:
<button id=slideToggle>slide</button>
<br/>
<div class="slideTogglebox">
slideToggle()
</div>

$(document).ready(function() {
var isClicked = false; //assuming its closed but its just logic
$('.button').click(function() {
if (isClicked) {
isClicked = true;
$(this).closest('div').animate({
height: "150px",
}, 400, "swing");
}
else
{
isClicked = false;
$(this).closest('div').animate({
height: "50px",
}, 400, "swing");
}
});
});
This is pretty bad way of doing it any way. You should consider trying to use CSS3 instead and then jsut using jQueries toggleClass
.toggleClass('animateUpwards)
Lets the browser use hardware capabilities to animate all the stuff and also its a nice one liner in JavaScript.

Try jQuery slideUp or as posted elsewhere jQuery slideToggle - Alternatively CSS3 Example
or from the questions you posted, perhaps this is what you meant:
http://jsbin.com/ogaje
Clicking the (visible part of) the div
$(document).ready(function() {
$('.featureBox').toggle(function() {
$(this).animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $(this).slideUp()
},
function() {
$(this).animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $(this).slideDown()
});
});
Clicking something else
$(document).ready(function() {
$("#button").toggle(function() {
$("#someDiv").animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideUp()
},
function() {
$("#someDiv").animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideDown()
});
});

jQuery function ignore class

I've got an interesting situation. I'm building a music page using an open source flash music player that degrades to html for mobile users. I've got everything working great except for one issue.. and that is that one of my Javascript functions is interfering, specifically an anchor color fade.
There are many hidden buttons involved in the player, but the play/pause button has a translucent anchor underneath it and code is forcing this to be shown when the buttons are hovered over.
I can't seem to get the syntax correct using the not function.. But I'll settle for anything that works!
Thank you!
HTML
<div class="sc-player">
Javascript
jQuery(function ($) {
$('a').not('div.sc-player').each(function () {
var $el = $(this),
orig = $el.css('color');
$el.hover(function () {
$el.stop().animate({ color: '#00B0D9' }, 400);
},function () {
$el.stop().animate({ color: orig }, 400);
});
});
});

In jQuery (make sure you've got the color animation plugin from jQ UI: http://jqueryui.com/demos/animate/):
jQuery(function ($) {
$('a.a').each(function () {
var $el = $(this),
orig = $el.css('color');
if ($el.parents('.sc-player').length!=0) return;
$el.hover(function () {
$el.stop().animate({ color: '#00B0D9' }, 400);
},function () {
$el.stop().animate({ color: orig }, 400);
});
});
});