Develop Reference

jQuery css visibility not working within load method?

I'm trying to get a script so that when this div #events is clicked the content currently in #meet div changes it's visibility to hidden (so that space is preserved) and then using jquery load method, the content in v2.html is loaded into the #meet div. However, right now the #meet div disappears but the new content does not appear. Any ideas why?
HTML:
<div id="meet">
........
<div id="exec"></div>
........
</div>
JS:
$(document).ready(function(){
$("#exec").click(function(){
$("#meet").load("execute.html").fadeIn('slow');
});
$("#events").click(function() {
$('#meet').css('visibility','hidden', function() {
$('#meet').load("ev2.html", function() {
$('#meet').css('visibility', 'visible');
})
})
});
});

.css doesn't take a function as a third parameter. It does take a function as a second parameter with only a propertyName as the first: api.jquery.com/css. Try removing that function call and moving $('#meet').load() to just below the first .css call.
You can chain the .css and .load functions as well.
$(document).ready(function(){
$("#exec").click(function(){
$("#meet").load("execute.html").fadeIn('slow');
});
$("#events").click(function() {
$('#meet').css('visibility','hidden').load("ev2.html", function() {
$('#meet').css('visibility', 'visible');
});
});
});

use CSS class instead in JQuery : addClass("foo") which contains the style you want and removeClass("boo") which contains the style you don't want.
look at this fiddle jsfiddle.net
$("#navigation").on("click", function(){
if($(this).hasClass("foo")){
$(this).removeClass("foo");
$(this).addClass("boo");
$(this).animate({width: 100}, 350);
} else {
$(this).removeClass("boo");
$(this).addClass("foo");
$(this).animate({width: 100}, 350);
}
});

Unslider add .active class to active elements?

I am using JQuery Unslider. How can I make it add an active class to the current slider element?
http://unslider.com/
I am trying to use this, but it is not working:
$('#slider').unslider({
delay: 3000,
keys: false,
fluid: true,
dots: false,
complete: function(){
$(this).addClass('active');
},
});

JsFiddle
var slider = $('.banner').unslider({
complete: function(el) {
if(sliderData)
{
sliderData.items.removeClass('active');
$(sliderData.items[sliderData.current]).addClass('active');
}
}
});
var sliderData = slider.data('unslider');

That didnt work for me.
I did this on line 187 of unslider.js
just make sure you add the class "active" to your fist slide.
good permanent fix.
if (o.fade) {
_.i = index;
ul.find("li:visible").fadeOut(speed);
ul.find("li:visible").removeClass('active');
ul.find("li").eq(index).addClass('active');
ul.find("li").eq(index).fadeIn(speed);
}

How to add <a href links into tooltip and be able to mouseover and click on it? for jQuery UI 1.10

I am using jQuery UI 1.10 Tooltip. Below is my call to tooltip. I cannot find on the documentation on how to do this. I want to add a href links into the tooltip and let user be able to mouseover and click on it. Right now as soon as my mouse hover away from the tip trigger, the tooltip disappear.
$(function () {
$(document).tooltip({
track: false,
show: {
effect: "slideDown",
delay: 20
},
hide: {
effect: "explode",
delay: 5
}
});
})
Documentation:
http://api.jqueryui.com/tooltip/#option-position
Thanks,
Will

jQuery UI tooltips don't support this out the box however You can add the following code which delays the hide function allowing you to move the mouse over the tooltip:
close: function (event, ui) {
ui.tooltip.hover(
function () {
$(this).stop(true).fadeIn(250);
},
function () {
$(this).fadeOut("250", function () {
$(this).remove();
})
}
);
}
This won't work with the custom explode animation you defined for hiding the tooltip though so I've had to remove that and it will just fade out:
/*hide: {
effect: "explode",
delay: 5
},*/
You will then need to add the following code to allow the tooltip to display HTML but please be aware that you are potentially opening your site up to an XSS Vulnerability by doing this:
content: function () {
return $(this).prop('title');
},
See here for a fiddle

Step option is not fired in toggle method

I was trying to create a sliding menu, using toggle() method but needed to call a function (that was interacting with div height) while sliding into view. for this, I've used the step option (as seen in documentation) to call this function has soon has sliding starts to occur. I did many tests, and it seems that this option is not working with toggle().
I've tried to use animate() with the same call and its working perfectly...?
I've made a simple fiddle here ( JSFiddle ) to illustrate the problem.
I've tried it in the last version of IE and Chrome with version 1.11.0 of jQuery
// This is for toggle method
$(document).on("click", "#toggle", function(){
$("#menu").toggle({effect: "slide", direction: "left", width: "show", step: function(){
if ($("#menu").hasClass("open")){ //***** THIS IS NEVER EXECUTED
$("#menu").removeClass("open");
$(this).css("background-color", "red");
} else{
$("#menu").addClass("open");
$("#menu").css("background-color", "green");
}
}
}) ;
});

Your code in the fiddle is not correctly enclosed in parens (step is in another couple of {}); so the option are not passed correctly to the toggle function.
Code:
// This is for toggle method
$(document).on("click", "#toggle", function(){
$("#menu").toggle({effect: "slide", direction: "left", width: "show", step: function(){
if ($("#menu").hasClass("open")){ //***** THIS IS NEVER EXECUTED
$("#menu").removeClass("open");
$(this).css("background-color", "red");
} else{
$("#menu").addClass("open");
$("#menu").css("background-color", "green");
}
}
}) ;
});
Demo: http://jsfiddle.net/IrvinDominin/QzyEU/

Slider doesn't load when hidden div appears / shows

I'm working with Joomla 2.5 and am using this here:
http://www.code7.co.uk/joomla-responsive-slider
My theme is a single-pager. If I click on a navigation item javascript simple fades out one div and fades in the other div. The problem now is that if I toggle the divs, the slider isn't enabled anymore. Only when I reload the page.
The Slider is loaded like this:
<script type="text/javascript" charset="utf-8">
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "slide",
directionNav: false,
controlNav:false,
keyboardNav:false,
direction: "horizontal",
slideshowSpeed:3000,
animationSpeed:600,
randomize: false
});
});
</script>
It is loaded each time below the slider div container. I already tried to remove the code from the modules and only load the slider once. It worked, but not if I toggled the divs.
Question: How can I "reload" the slider, when I toggle the div? I tried with .reload() the window, but then the whole fadein and out animation is worth nothing and I want to keep it!
This is how I change:
function changeSection(section) {
if(activeSection != section) {
$('#'+activeSection).fadeToggle("slow");
$('#'+section).delay(500).fadeToggle("slow");
$('#menu-'+activeSection).removeClass('active');
$('#menu-'+section).addClass('active');
document.title = activeSectionTitle;
history.pushState({}, '', section);
activeSection = section;
}
}

Try (updated)
$(document).ready(function () {
$("div:not(:first)").hide(0);
var toggletwo = function (i) {
$("div:not(:nth-of-type(" + i + "))").fadeOut(125, function () {
$(this).siblings("div").fadeIn(250)
})
};
$("li a").on("click", function (e) {
return ($(e.target).is("a:first") ? toggletwo(1) : toggletwo(2))
});
});
jsfiddle http://jsfiddle.net/guest271314/68k7F/