Develop Reference

Add Link to img after Onclick Toggle with Jquery

I wrote a bit of code (with help from stackoverflow) to toggle two images when clicked. But, I want the second image to be linked to another webpage (eg. The App Store).
How can I add a link to the second image, when the images are always going back and forth when I click them?
jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#slick-toggle').click(function() {
$('img',this).attr('src', function(i, oldSrc) {
return oldSrc == 'img/button.png' ? 'img/applestoredownload.png' : 'img/button.png';
});
$('#slickbox').toggle(400);
return false;
});
});
</script>
Relevant HTML:
<div class="co-download-app">
<div class="wrapper">
<div id="imageContainer">
<a href="#1" id="slick-toggle">
<img src="img/button.png"/>
</a>
</div>
</div>
</div>
Where should I add the link that is only reachable by clicking the second image?

I guess your question is when you click on a link that contains an image, the image source will be changed and for the next time when you click on the link again it will redirect to the links href.
One solution is to change something in your code after first-time clicking on the link to use it later. In this case I gave a class to the link and next time you click on the link it will check to see if it has the class or not. If the follow-href class is present it'll skip the rest and if it isn't image source will be changed.
$(document).ready(function() {
$('#slick-toggle').click(function() {
if (!$(this).hasClass('follow-href')) {
var $img = $(this).find("img");
var src = ($img.attr('src') == 'img/button.png') ? 'img/applestoredownload.png' : 'img/button.png';
$img.attr('src', src);
$(this).addClass('follow-href');
$('#slickbox').toggle(400);
return false;
}
});
});
I changed some of your code, but the result should be the same and I hope you don't mind.

jQuery show/hide toggle DIVs

So, I've successfully got a script working that shows/hides divs by clicking on the month.
If you scroll to the bottom of http://kaye.at/test/ and click 'April' or 'May' you can see it working.
The issue is I don't like how it animates sliding out to the left when it's closing, I'd rather it slide down or back up instead, but can't find where in the javascript to amend this?
Here's the JS:
$(document).ready(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){}else{}
});
});
});
And the HTML:
<div id="wrapper-alt" class="shade8">
<div class="content">
<h1 class="full">APRIL</h1>
</div>
</div>
<div id="collapse1" style="display:none">
<div id="wrapper-alt" class="shade8">
<div class="content">
Content goes here
</div>
</div>
</div>
Apologies if my JS is messy, I'm a complete amateur, just play around with it for fun and learning!
Also, I've just noticed it doesn't work with multiple DIVs, all links only open the 1 div, how do I use it for multiple different DIVs?

slideToggle() jquery's method
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).slideToggle(function(){
if($(this).css('display')=='none'){}else{
}
});
});

I ended up using a different script as I couldn't seem to get it to work correctly!

How can I make this jQuery div scroller work on multiple divs with the same class?

I've been using this jQuery div scroll script (How to make a scrolable div scroll on click and mouseover using jQuery) to good effect, but now my client wants me to use it within a Wordpress blog page where there are multiple areas on the page that need scrolling.
Is it possible to use this script on multiple instances with the same class (Ie; 'scroll')?
This is my script;
$(function() {
var ele = $('.scroll');
var speed = 25, scroll = 5, scrolling;
$('#scroll-up').mouseenter(function() {
// Scroll the element up
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() - scroll );
}, speed);
});
$('#scroll-down').mouseenter(function() {
// Scroll the element down
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() + scroll );
}, speed);
});
$('#scroll-up, #scroll-down').bind({
click: function(e) {
// Prevent the default click action
e.preventDefault();
},
mouseleave: function() {
if (scrolling) {
window.clearInterval(scrolling);
scrolling = false;
}
}
});
});
and this is the markup (Both the Main "feed" wrapper and the individual "single" divs need to be scrollable);
<div class="feed scroll">
<div class="single scroll">
<!-- single blog post content -->
</div>
<div class="single scroll">
<!-- single blog post content -->
</div>
<div class="single scroll">
<!-- single blog post content -->
</div>
</div>
<a id="scroll-up" href="#">Scroll Up</a>
<a id="scroll-down" href="#">Scroll Down</a>
So basically I need to be able to scroll everything individually.

If you want multiple sections, you'll have to use classes, rather than ids for identifying the sections, then you'll have to traverse the DOM from your link to the content to scroll in order to find the right div. Also, you'll have to store the 'scrolling' status individually for each element that you're scrolling.
That's a lot of stuff to explain verbally. Here's an example, modified from the question you referenced: http://jsfiddle.net/Qp8bB/
Note:
$(this).siblings(".content")
This is how we navigate from the link element to the content
element.attr('data-scrolling', 'true');
This is how we store the scrolling status of each element (via a temporary attribute)
Not the cleanest code, but I hope it gets the point across.

Hovering over <a> and displaying images based on value

I am currently displaying pictures when an tag is hover over. I have been able to workout the main problem of displaying the picture. The problem is that it has a glitch when hovering occurs quickly. Is there away to avoid that? Also how can i set a default image to display when page is loaded? JSFIDDLE
HTML
<div id="links">
Cheeseburger »
Tacos »
Salads »
Bread Sticks »
Dessert »
</div>
Jquery
$("div#links > a").hover(
function(){
var ID = $(this).data("content");
$("div#images").children("img#" + ID).fadeIn("slow");
},
function() {
var ID = $(this).data("content");
$("div#images").children("img#" + ID).hide();
}
);​
Glitch

The problem is that it has a glitch when hovering occurs quickly. Is
there away to avoid that?
This is not a glitch. fadeIn is using animation. As you are hovering over the links faster than the animations complete your experiencing that "glitch".
To ensure you are not clashing with the previous running animation you have to stop any current and any queued animation.
Replace
$("div#images").children("img#" + ID).fadeIn("slow");
with
$("div#images").children("img#" + ID).stop(true, true).fadeIn("slow");
DEMO - Clearing the animation queue before starting the next one
how can i set a default image to display when page is loaded?
I added the code to show a default image as well. To prevent any odd visuals when hovering over a menu item the first time when using a default image. The code checks if we are showing a default image and if we are it will further check if the image for the current menu is the default image.
If it is, it won't hide it as it is showing it anyway but if it is not, it will ide the default image before fading in the new one.
Hope this makes sense, see the full code and DEMO below.
// Indicates if default image is shown
var showingDefaultImage = true;
var $images = $("div#images");
var $defaultImage = $images.children("img#tacos");
// Display a default image
$defaultImage.show();
$("div#links > a").hover(
function() {
var ID = $(this).data("content");
var $image = $images.children("img#" + ID);
if (showingDefaultImage) {
showingDefaultImage = false;
if (!$image.is($defaultImage)) {
$defaultImage.hide();
}
}
$image.stop(true, true).fadeIn("slow");
}, function() {
$images.children().hide();
});​
DEMO - Showing a default image
The code in the above DEMO is also a little more optimized by caching the selectors.
would it be possible to leave up the most recent image from the last
hovered tag ?(instead of hiding the image and leaving a blank)
If I understood you correctly you don't want to hide the image when you leave menu with your mouse but instead want to leave the image of the menu you last hovered over visible.
To do that you remove the second function of the hover and as it is no longer needed you can now attach the mouseenter event instead.
var $images = $("div#images");
var $currentImage = $images.children("img#tacos");
$currentImage .show();
$("div#links > a").mouseenter(function() {
var ID = $(this).data("content");
var $image = $images.children("img#" + ID);
if (!$image.is($currentImage)) {
$currentImage.hide();
}
$currentImage = $image;
$image.stop(true, true).fadeIn("slow");
});
DEMO - Fading in images on mouseenter and leaving last image visible
The above code includes caching of selectors for optimisation and the logic to ensure no "flickering" occurs when the new hovered menu item is the same as the last one which was hovered.

See http://jsfiddle.net/7Wp9z/7/
As François Wahl said, use stop to stop the animations. But instead of using data-content and IDs, I think that you could use index:
HTML:
<div id="links">
Cheeseburger »
Tacos »
Salads »
Bread Sticks »
Dessert »
</div>
<div id="images">
<img src="http://media.smashingmagazine.com/wp-content/uploads/images/brand-ux/cb.jpg">
<img src="http://adventuresoflittlemiss.files.wordpress.com/2012/07/tacos.jpg">
<img src="http://www.growingappetite.com/wp-content/uploads/2011/05/chicken-salad1.jpg">
<img src="http://afflictor.com/wp-content/uploads/2010/10/breadsticks1.jpg">
<img src="http://1.bp.blogspot.com/-IaURSrV70LI/T4YzPubl9EI/AAAAAAAAGSg/AEdd-eLuJUk/s1600/Cooking+Weekly.jpg">
</div>
JavaScript:
$("div#links > a").hover(
function(){
$("#images>img")
.hide()
.stop(true,true)
.eq($(this).index()).fadeIn("slow");
},
function() {
$("#images>img").hide();
}
);

Have you tried not specifying which children should hide on the mouse-out portion?
$("div#links > a").hover(
function(){
var ID = $(this).data("content");
$("div#images").children("img#" + ID).fadeIn("slow");
},
function() {
$("div#images").children().hide();
}
);​

The glitch probably occurs because the image isn't loaded yet, you should look up some preloading technique. You will always have to wait for the relevant images to be loaded though before you can show them.
But you could enhance the user experience by either indicating that the images are getting loaded or by simply not activating the hovering effect until the images are loaded.
I'd probably go with the last case since I'm lazy but thats just me.
A simple preloading technique is to declare several id's with different background images and then changing the id dynamically using javascript and thus showing the image.
$("#id-of-element").attr('id','preloaded-bg-div');

jQuery slide/fade functions

I'm trying to modify this snippet:
$(document).ready(function(){
$('.showscript').show();
$("div.content:not(.about)").hide();
$(".subnav a, .mainnav a").click(function(){
//remove possible hilights
$(".subnav a, .mainnav a").removeClass("active");
var href = $(this).attr("href");
//hilight the clicked link
$('a[href="'+href+'"]').addClass("active");
//hide possible shown content
$(".content").hide();
//show my content
$("div.content:has(a[name='" + href.replace("#","") + "'])").show();
});
});
So that when a link in the .subnav or .mainnav is clicked it animates the swap it's doing. I'd like to use jQuery's fadeIn/Out, but I'm not really sure how I could apply it to this? The script is very specific to allow the content to show from either the mainnav and subnav and change active class on both when either is clicked.
You can see what I mean here:
http://banderdash.net/design
But it feels much to choppy.
In addition to quickly fading out the content and quickly fading in the new content, I would like the window to slide down to the content space. I'm just using anchors like this:
<a name="work">
and then calling like this:
<a href="#work">
Which jumps the window down as far as it can, but because the content in the black isn't always enough to make a Y plane that would allow the white space on the top to be moved out of the viewable rang. So I think a slide would work much better. How can I tell it to slide down the value of the href on click?

first of all i wouldnt used named anchors. I could make those ids on divs that are children of content. That way you dont have to do any real selction on complex expresstions just a search on id for the div within content. Secondly this allows you to animate each div indivdually. ehich i think is goign to give you the most control. Lastly you need to return false, from your click handler otherwise its goign to do the normal "jump to" type functionality. My script might look something like this:
Content:
<div class="content">
<div id="about"> ... </div>
<div id="work"> ... </div>
<div id="education"> ... </div>
</div>
Relevant part of your onready:
$(document).ready(function(){
$(.subnav a, .mainnav a).click(function(){
$(".subnav a, .mainnav a").removeClass("active");
var selector = $(this).attr('href');
$('a[href="'+selector+'"]').addClass("active");
if($(selector, '.content').length > 0){
$('> :visible', '.content').slideUp('fast', function(){
$(this).fadeOut('fast', function(){
$(selector, '.content').fadeIn('fast', function(){
$(this).slideDown('fast');
});
});
});
}
return false;
});
});
Note that is only pseudo code so a simpel c&p may or may not work. but it should give you an idea.