Develop Reference

Diagram: Div hover then Displays Image

ANSWERED: Updated Fiddle
I have a Diagram (a .png image) that is placed in a 350x350px square positioned in the centre of the window.
I then have 5 div boxes in a fixed position all around the window.
What I am trying to achieve is: the original Diagram will be visible, until the mouse hovers over a div box of written content to which will replace the original Diagram with a new Diagram in the exact same position as the original Diagram in the 350x350px square.
EDITED: What I am trying to achieve is: the original Diagram will be visible, until the mouse hovers over a div box of written content to which will replace the original Diagram with a new Diagram in the exact same position as the original Diagram in the 350x350px square.
Then once the mouse has left that Div box of written content the original Diagram is shown.
Would I just need to create an if statement reverting the display proptery back to none?
I have created this FIDDLE for a basic skeleton.
I thought I was on the right track using the jquery below, but I can not seem to get it to work?
Any input would be greatly appreciated.
JS
$(document).ready(function(){
var $diagram1 = $('.p1'),
$diagram2 = $('.p2'),
$diagram3 = $('.p3'),
$diagram4 = $('.p4'),
$diagram5 = $('.p5');
$('.content-1').hover(function(){
$diagram1.css(['display':'block']);
});
$('.content-2').hover(function(){
$diagram2.css(['display':'block']);
});
$('.content-3').hover(function(){
$diagram3.css(['display':'block']);
});
$('.content-4').hover(function(){
$diagram4.css(['display':'block']);
});
$('.content-5').hover(function(){
$diagram5.css(['display':'block']);
});
});

JS
$(document).ready(function(){
var $diagram1 = $('.p1'),
$diagram2 = $('.p2'),
$diagram3 = $('.p3'),
$diagram4 = $('.p4'),
$diagram5 = $('.p5'),
$image=$('.image_container img');
$('.content-1').mouseover(function(){
$diagram1.css('display','block');
}).mouseout(function() {
$diagram1.css('display','none');
});
$('.content-2').mouseover(function(){
$diagram2.css('display','block');
}).mouseout(function() {
$diagram2.css('display','none');
});
$('.content-3').mouseover(function(){
$diagram3.css('display','block');
}).mouseout(function() {
$diagram3.css('display','none');
});
$('.content-4').mouseover(function(){
$diagram4.css('display','block');
}).mouseout(function() {
$diagram4.css('display','none');
});
$('.content-5').mouseover(function(){
$diagram5.css('display','block');
}).mouseout(function() {
$diagram5.css('display','none');
});
});
The .css() api syntax was wrong it should be .css('display','block'); and not .css(['display':'block']);
You could use mouseover and mouseenter to have easy way of fullfilling your task instead of hover
JSFiddle-DEMO

you need to make other images invisible when you are hovering over a certain div. image 1, 2, 3, 4, 5. all are overlapping each other. if you take your mouse over image 2 then you need to make image 1,3,4,5 invisible. you can add the visibility: hidden in the jquery you made.
$('.content-1').hover(function(){
$diagram5.css(['display':'block']);
//get visibility code here
});
Hope this answers your question

First you have to change the css syntax then you have to hide all the other images before showing the correct one.
$(document).ready(function(){
var $diagram1 = $('.p1'),
$diagram2 = $('.p2'),
$diagram3 = $('.p3'),
$diagram4 = $('.p4'),
$diagram5 = $('.p5');
$('.content-1').hover(function(){
hide();
$diagram1.css('display','block');
});
$('.content-2').hover(function(){
hide();
$diagram2.css('display','block');
});
$('.content-3').hover(function(){
hide();
$diagram3.css('display','block');
});
$('.content-4').hover(function(){
hide();
$diagram4.css('display','block');
});
$('.content-5').hover(function(){
hide();
$diagram5.css('display','block');
});
function hide()
{
$(".p1,.p2,.p3,.p4,.p5").css("display","none");
}
});
DEMO

on
$diagram5.css(['display':'block']);
maybe it should be like this
$diagram5.css('display','block');
answered fiddle: http://jsfiddle.net/aswzen/4o6mn3pm/6/
and then to make it reversible you have to put the original state display on each block again, like a lamp switches. But if you do this using the display property, probably you're doing it wrong.
Full working filddle as you wish: http://jsfiddle.net/aswzen/4o6mn3pm/11/
but not recommended

The Change display to block using jquery has some problem.
Simply change
$diagram1.css(['display':'block']);
to
$diagram1.css("display", "block");
/**Working fiddle**/
Working fiddle here

To Set a CSS Property
$("p").css("background-color", "yellow");
To Set Multiple CSS Properties
To set multiple CSS properties, use the following syntax:
css({"propertyname":"value","propertyname":"value",...});
Detail
replace [] to {} like
$('.content-5').hover(function(){
$diagram5.css({'display':'block'});
});

Loading second div behind first div. then hiding first div

Current Implementation:
two divs at same place, div1 display:block, div2 display:none
on tab click, Jquery hides one in 2000ms and shows other div.
Problem:
I dont want user to feel like 2nd div loaded after tab clicked.
I want user to feel that second div was there when first div disapeared.
Current Code:
div1.hide('fade', 2000, function() {
div2.show();
});
I need something like:
div2.show(); //behind div1
div1.hide('fade', 2000);
but this shows both divs on screen for 2 seconds which I dont want to.
Please help.

You need to code something like this
$(document).ready(function(e) {
$(".tab2").on("click",function(){
$(".div2").stop(true,true).slideUp(function(){
$(".div1").stop(true,true).slideDown();
});
})
$(".tab1").on("click",function(){
$(".div1").stop(true,true).slideUp(function(){
$(".div2").stop(true,true).slideDown();
});
})
});
Put your class or id name on which you want to click instead of .tab
Here is demo of full tab pane: fiddle

You can use stop() to block the queueing of animations, like so:
$('#click').click(function() {
$("#div1").stop().fadeTo(2000, 0);
$("#div2").stop().fadeTo(2000, 1);
});
Here's a jsFiddle

What you are looking for sounds like 2 div's behind each other, using z-index. You just put them in the same place, give the one in the back a lower z-index and then fadeOut the top one. This way the second one will actually be there already and you don't need the show() or fadeIn(). Example here

Here's a little bit sexier way than loading the second div later. stack the divs, then fade out the top one and hide it with the animation callback when it's done. (or, use fadeOut as BenMann suggests for the same result.)
Example fiddle
<div id='container'>
<div id='divFront'>some content on top, click for other content</div>
<div id='divBack'><br />some other content underneath</div>
</div>
$('#divFront').click(function(){
$('#divFront').animate({"opacity":"0"}, 2000, "swing", function(){
$('#divFront').hide();
});
});

thank you for your support sir, I have aceived it by using the comments of everyone. Have a look bro http://jsfiddle.net/bhailogee/CA7Bu/3 thanks
$(document).ready(function(e) {
$(".tab1").on("click",function(){
prepare($(".div2"),$(".div1"));
$(".div1").hide('slide', 2000,function(){
clean($(".div2"),$(".div1"));
$(".div2").show();
});
})
$(".tab2").on("click",function(){
prepare($(".div1"),$(".div2"));
$(".div2").hide('slide', 2000,function(){
clean($(".div1"),$(".div2"));
$(".div1").show();
});
})
function prepare(showdiv,hidediv){
showdiv.css('position','absolute');
hidediv.css('position','absolute');
showdiv.css('z-index','1');
hidediv.css('z-index','2');
showdiv.css('display','block');
hidediv.css('display','block');
}
function clean(showdiv,hidediv){
showdiv.css('z-index', '');
hidediv.css('z-index', '');
}
});

JS: Applying focus effect on an element when scrolled to

Here is the fiddle: http://jsfiddle.net/fz5Yk/5/
All I want to achieve is to highlight (e.g adding a background color) the heading (in <strong> </strong> tag) of the section-3 when I scroll to section-3.
I'd like to know if there's a way for me to trigger certain events when I'm at a certain section. There must be a thing for this because when you scroll the page manually, you'll notice that, in the navigation menu, link to the section gets selected automatically, as if it was clicked.
Anything helpful will be much appreciated as I've been working on this since yesterday and hav yet to solve it.

There isn't any way to achieve this using CSS, so I edited the jquery.nav.min.js. (added only 4 lines) It works great now. http://jsfiddle.net/fz5Yk/10/
adjustNav=function(a,b,d){
var sec = a.find("."+d+">a").attr("href");
$(sec+">strong").css('background','none'); //Find and remove previous highlight of strong
a.find("."+d).removeClass(d);b.addClass(d); //ORIGINAL
sec = b.find("a").attr("href");
$(sec+">strong").css('background','aqua'); //Find and highlight the strong
};
EDIT: Animation added by request:
http://jsfiddle.net/fz5Yk/11/
add animateSomething function on top:
function animateSomething(sec) {
if(sec == "#section-2")
$("#testBlock").animate({
width:"50%",
opacity:0.5
}, 1500);
}
add animateSomething(sec); at the end of adjustNav function.
Voila!
EDIT FINAL: Animate AFTER scroll ends http://jsfiddle.net/fz5Yk/12/

In your click action have something like this:
$("#container .section strong").css('background-color', 'transparent');
$("#container .section strong:contains('" + $(this).text() + "')").css('background-color', 'yellow');

Not sure if that's what you want exactly, but you could use this to add a class to the every strong which is currently in view:
$(document).scroll(function(){
var t = $(this).scrollTop();
var b = t + $(this).height();
$('.section>strong').removeClass('highlight').filter(function(){
var ot = $(this).position().top;
return ot > t && ot < b;
}).addClass('highlight');
});
http://jsfiddle.net/fz5Yk/7/
But it is a bit pointless in my opinion because when it's not in view why do you want to remove the highlight? It won't be visible anyway!?
If you really only want the functionality for section 3 you could change $('.section>strong') to $('#section-3>strong')

jQuery blinking mouseOver issue

I have a image that has a caption displayed on it. The caption floats over the image and is displayed at the bottom.
I have a jQuery event that when you rollover the image, it displays the caption. Like so:
function showCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeIn('200');
}
And when you roll out:
function hideCaption(id) {
var theID = "#caption_" + id;
$(theID).fadeOut('200');
}
However, when you rollover the caption, it thinks that you have rolled out of the image and fades out. Is there anyway to fix this?
Here's a link: Example
Thanks, Coulton

I took a look at your JS but I couldn't find what triggers the display of the caption - you should be binding the event to the parent div of the image, that way it won't fade out. If it is currently bound to just the image, that's your problem. P.S - it always helps to include a code example.

Here is a fiddle that shows an example of how you could do it. It simply calls stop on the caption element when the mouse enters that element:
$("#caption").mouseover(function() {
$(this).stop();
});
The stop function cancels any animation that is running on the selected element (in this case, the caption element).

Make element fade away then display:none;

I have an element that fades in, its the size of the page and goes over top of the whole page. when you click the close button it should fade out. I have this all working but my issue is when I close it, its opacity is set to 0, but you can still click what was in the element. (I have a couple a tags in it)
So.. your clicking it even though its invisible. How do I make it not appear AT ALL in the code, instead of just going invisible?
What I have:
$('#menu_thumbnails').toggle(function() {
$('div#thumbnails').show();
$('div#thumbnails').stop().fadeTo(500, 1);
}, function() {
$('div#thumbnails').stop().fadeTo(500, 0, hideThumbs());
function hideThumbs() {
$('div#thumbnails').hide();
}
} );
I also tried
$('div#thumbnails').css('display','none');
instead of the .hide() but that did not do anything.
Any help would be great! Thanks

Have you tried it like this:
$('#menu_thumbnails').toggle(function() {
$('div#thumbnails').show();
$('div#thumbnails').stop().fadeTo(500, 1);
}, function() {
$('div#thumbnails').stop().fadeTo(500, 0,
function(){$(this).hide()});
} );

I'm not a jquery expert but I think the problem is that you are using .toggle().
toggle() reacts to the state of your selector's display attribute so if it is visible it will hide and show if it is hidden.
So it will never be "unclickable" with toggle.