Develop Reference

Initiate TwentyTwenty.js after a div is shown thru a click

I'm hiding a div until a button is clicked thru this script:
$(document).ready(
function() {
$(".openthis").click(function() {
$("#yalecontent").show("slow");
});
});
but I'm also using TwentyTwenty inside that div and after I clicked the link to show the div, the TwentyTwenty content doesn't have any height so it's not showing up. How can I make it show up? This is my script for twenty twenty:
$(window).load(function() {
$("#container1").twentytwenty();
});
Here's a jsfiddle. Note that I can't make twentytwenty to work in here and I'm not sure why. It's working in my localhost but I just want to show how I made the structure.

First of all don't hide '#yalecontent' div by css.
$(document).ready(function() {
$("#container1").twentytwenty();
// hide here after twentytwenty load in this div.
$("#yalecontent").hide("fast");
$(".openthis").click(function() {
$("#yalecontent").show("slow");
});
});
Try this one it may be solve your problem.

Button change color on toggle using jQuery

I'm looking to change the color of the button or in this case the image of the button each time the button is selected on the toggle of the jQuery. Here's what I have so far for jQuery.
jQuery(document).ready(function () {
jQuery('#occupation').hide();
jQuery('#occupationshow').on('click', function (event) {
jQuery('#occupation').toggle();
});
});
And here's what I have for the button:
<button id="occupationshow">
<img src="../SiteAssets/images/RAC/askcut/Occupation.jpg">
</button>
How can I get it so another image is displayed on the button when the button has been clicked?

The best way to do this is I think the following:
Create a sprite image of the two backgrounds for this button - so, one image file, with the two images side by side.
Set this image as the background-image of the element using CSS
Giving your button#occupationshow a fixed width/height, have the jquery modify the background-position of the image depending on the state of the button - simply put, depending on the current state of the button, the image will move left/right within button#occupationshow and you will only be able to see the relevant part at any one time.
You can as suggested modify the src attribute dynamically, but do bear in mind that with this approach the new image might take a moment to load once the button is clicked; with my approach both images are preloaded (as they are one image) and it's simply moving around, and so is instant.
Sprites are a great way of working, I'd recommend looking into them :-)

You can use the css function of jquery to change the background image of a button on every click.

toggle() by default is for showing/hiding. Use attr() with a callback function
jQuery('#occupationshow').on('click', function (event) {
jQuery(this).find('img').attr('src', function(){
var src = $(this).attr('src') == 'img1' ? 'img2' : 'img1';
return src;
});
});

I guess you only have two images, right?
So what you can do is put two tags, corresponding to both of your images, ont being set as "display: none".
<button id="occupationshow">
<img src="../img1.jpg">
<img src="../img2.jpg" style="display: none;">
</button>
And in jQuery your code will be :
jQuery('#occupationshow').on('click', function (e) {
jQuery('#occupationshow img').toggle();
});
Edit: I re-read the first post again and don't know what made me guess OP only had two images... (the fact he wants to use "toggle", I guess)

Login slider with jQuery issues

I want to make a login slider with jQuery. You will have a div at the top of your page with a plus image. I want the plus image to be changed into a minus image and the div will slide down. Here is my code but there is a problem.
<script src="_js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("form").hide();
$(".open").click(function() {
$("form").slideDown("slow");
$(".open").addClass("close");
$(".close").removeClass("open");
$(".close").click(function() {
$("form").slideUp("slow");
$(".close").addClass("open");
$(".open").removeClass("close");
});
});
});
</script>
It works once but if you want to slide it down for the second theme it doesn't work anymore.. Can somebody help my please?
tnx!

Working JSFiddle
Try something different like the following:
$('.open').click(function () {
$('form').slideToggle('slow', function () {
$('.open').toggleClass('form-is-open');
});
});
jQuery offers some toggle functions which supply the desired behaviour. This way you don't need two click handlers or keep track of classes yourself. The above code simply adds a class ('form-is-open') to the button, when the form is shown and removes it, when it is hidden.

Make toggle link only effect box in the same parent

So I currently have two toggle boxes set up and there will be more soon, I'd like to keep the JS pretty simple and not have a new script for each area, but whenever I attempt to toggle in one place it applies the function to both other the toggle-content boxes I have set up.
In order to see both areas, open the first one and close it before opening the second so a product is added to the Recently Viewed box
http://www.coreytegeler.com/bolivares/shop/pablo-ribbed-winter-skully/
http://www.coreytegeler.com/bolivares/shop/salvador-crewneck-sweater-copy/
Here's what I have in place now:
$(window).load(function(){
$('.toggle-link').click(function(e){
$('.toggle-content').slideToggle();
e.preventDefault();
});
$(".toggle-link div").click(function()
{
$(".toggle-link div").toggle();
});
});
I tried using $(this).find('.toggle-content').slideToggle(); but still no luck.
I know this is a pretty easy fix but just can't figure it out.
Any help would be great!

$(document).ready(function(){
$('.toggle-link').click(function(e){
$(this).closest("ul").children('.toggle-content').slideToggle();
$(this).children('div').toggle();
});
});

jQuery: how to implement this roll-out effect?

I need some help to implement this roll over / out effect.
This is the screenshot: http://dl.dropbox.com/u/72686/roll-over-out.png
I have a menu. When I roll over the item "Products" the popup block appears below it, with a tree with all products.
<div id="menu">
<div id="product"> Roll over here </div>
...
</div>
<div id="popup">
<div> <a> link </a> </div>
<div> <a> link </a> </div>
<div> <a> link </a> </div>
...
</div>
This block has css:
#popup {
position:fixed
display:none
}
Now, it is clear how to implement roll over to show the block:
("#product").mouseover(function() {
$('#popup').css("display","block");
})
However how can I handle the rollout ? I have the following issues:
1) If I add roll-out to the menu item "#product", when I roll-out from it (to move to the popup with product trees), I make this last one to disappear (because I'm leaving the menu item).
2) If I add roll out functionality to the popup, I have issues with his children. i.e. If I move the mouse over a link of the tree, the popup disappear (because I'm leaving the parent #popup).
thanks
ps. I cannot use :hover (it is not supported by jquery version on Drupal CMS).

Firstly I think you will find that mouseenter and mouseleave are better events for this kind of thing. See the jQuery example in IE to understand why, not a huge problem but you may end up wit flickering otherwise.
However that will still not solve your problem. I would suggest use a setTimeout to close the menu, and then if your mouse enters the menu before the time out cancel the time out:
var t;
$("#product").mouseleave(function() {
t = setTimeOut(function(){$('#popup').hide();}, 100);
})
$("#popup").mouseenter(function() {
if(t)
{
clearTimeout(t);
t=null;
}});
This will prevent the popup from closing if you move from the product element to the pop up element. The clear timeout method prevents the timeout function from being executed.

Thorough Tutorial: Drop down menu

I have created similar solution, you can check it out here. See the demo here.

By the way, :hover isn't jQuery - it's CSS.
http://www.w3schools.com/cssref/sel_hover.asp