Develop Reference

On click, refocus down to tab not functioning. Any suggestions?

On click, refocus down to tab not functioning. Any suggestions? I'm using jQuery of course.
Essentially, I want to refocus down to this tab and open the tab at the same time while refocusing to it.
My code is: here in jsfiddle
JS:
$(document).ready(function(){
//Animates Scrolling
function scrollToAnchor(aid){
var divTag = $("div[name='"+ aid +"']");
$('html,body').animate({scrollTop: divTag.offset().top},'slow');
}
$("#ReadDescription").click(function() {
scrollToAnchor('longdescreadmore');
});
});
HTML, where I'm trying to focus to:
<div class="tab-pane" id="readmore">
<div name="longdescreadmore" id="longdescreadmore">[[DMI:Property name='LongDescription']][[/DMI:Property]]</div>
</div>
HTML, tab header:
<li class="readmore">Read More</li>
HTML, where the click action is taking place:
<h2 id="ReadDescription" class="ReadDescription">Read More</h2>

Trying to build a gallery, how to fade out currently displayed div and fade in the next one?

I'm currently working on a new personal portfolio site using very basic html/css/jquery code. I'm trying to build my own gallery to display my work (instead of using an already existing one like lightbox) but I've run into an annoying issue: I've tried to make the "forward-button" display the immediate following div but instead it fades in all the following divs. Here's my (condensed) code:
HTML:
<!--navigation buttons for gallery-->
<a id="back-button"><img src="image.png" /></a>
<a id="forward-button"><img src="image.png"/></a>
<!--gallery begins here-->
<div id="gallery">
<div id="first-div" class="work-display">
<img src="images/albumust-display.png" class="work-image" />
<div class="caption" id="wd1c">
<p class="caption-text">caption</p>
</div>
</div>
<div id="second-div" class="work-display">
<img src="images/ce-display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
<div id="third-div" class="work-display">
<img src="images/display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
CSS (all divs inside gallery are hidden by default):
.work-display {
display:none;
position:absolute;
}
What I'm trying to do with Jquery is that everytime someone opens a thumbnail, give the corresponding div that displays the image on full size a "true" state of "active" and then fade in, like this:
$( "#thumb-1" ).click(function(){
$( "#first-div" ).prop("active",true);
$( "#first-div" ).fadeIn();
});
all divs originally have a state of "active" = false:
$( "#gallery" ).children("div").prop("active",false);
then this is what I've tried to do with the "forward-button":
$("#forward-button").click(function () {
$("#gallery").find( $("div").prop("active",true) )
.prop("active",false)
.fadeOut()
.next().fadeIn();
$(".caption").fadeIn();
});
But then what it does is that instead of fading in only the next div, it fades all the divs that come after. what am I doing wrong?
I'm very new to Javascript/Jquery so probably this isn't the smartest way to go about this, if you have a simpler solution, do tell me.

I couldn't test it properly, because I don't have the whole code (and the images either). But this should do the trick:
$(function () {
$("#gallery div").attr("active", false);
$("#thumb-1").click(function () {
$("#first-div").attr("active", true).fadeIn();
});
$("#forward-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.next()
.attr("active", true)
.fadeIn();
});
$("#back-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.prev()
.attr("active", true)
.fadeIn();
});
});
Kind of demo: http://jsfiddle.net/W8VLh/13/

Just in case you have a reason to use 'active' properties instead of classes:
$("#forward-button").click(function () {
$("#gallery").find( "div[active='true']")
.prop("active",false)
.fadeOut()
.next().fadeIn().prop("active",true);
$(".caption").fadeIn();
});

Change jquery slider to slide down then slide up old section

Okay, long story short, what I am trying to do is change the jquery around to have the new section populate slide down on top of the old div, and then slide up the old div, to make only the new content box appear. as of right now, the code works perfectly sliding up the old section, and then sliding down the new content.
Code Sample for The Javascript
$(document).ready(function(){
function doTab() {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
}
// When a link is clicked
$("a.tab").click(doTab);
if (window.location.hash) {
$('a[title="' + window.location.hash.substring(2) + '"]').click();
}
});
Code for the tabs and sections
<ul id="tabs">
<li>type1</li>
<li>type2</li>
</ul>
<!--<div class="dpoint-holder"><div class="dpoint"></div></div>-->
<section id="type1" class="content">
<p>contents1contents1contents1contents1contents1</p>
</section>
<section id="type2" class="content content_2">
<p>contents2contents2contents2contents2</p>
</section>

How to implement mouseleave in jquery

I have a small problem with sliding in jquery. On hover (mouse over), I need my navigation list item to show its content by sliding down and on mouse out it should slide up.
HTML:
<ul class="nav nav-tabs nav-stacked">
<li id = "mousehover">
<a style="background-color:#f78144; color: #000; text-align: center;" href="#">Time Table
</a>
</li>
</ul>
<div id = "hovercontent">
Contents 1
</div>
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#mousehover").mouseenter(function(){
$("#hovercontent").slideDown("slow");
});
$("#hovercontent").mouseleave(function(){
$(this).slideUp("slow");
});
});
</script>
Here the problem is when I hover on the list the div slides down, but only after I hover on the div and get out of the nav the div is sliding up. I need the div to slide up even if I mouse out of the list with out entering the div. How can this be done?

Better to use mouseover and mouseout will do it for you..
$("#hovercontent").bind("mouseout", function() {
$(this).slideUp("slow");
});

Try this and put it in the doc ready this way: http://jsfiddle.net/ptVbs/
$("#mousehover").hover(function() {
$("#hovercontent").slideDown("slow");
}, function() {
if (!$("#hovercontent").hover()) {
$("#hovercontent").slideUp("slow");
}
});
$("#hovercontent").mouseleave(function() {
$(this).slideUp("slow");
});
you can try it out in fiddle.

Check out http://www.quirksmode.org/js/events_mouse.html. In your eventhandlers, check for the relatedTarget as described there. Use console.log in the eventhandlers to track what's happening. Unfortunately, I can't help further without having the CSS for the classes you use... maybe you could provide a testcase in JSBin at http://jsbin.com/ ?

try this
$(document).ready(function(){
$("#mousehover").mouseover(function(){
$("#hovercontent").slideDown("slow");
});
$("#hovercontent ,#mousehover").mouseleave(function(){
$('#hovercontent').slideUp("slow");
});
});

try it with event.type on 'hover'
You attach an 'hover' event Handler on your #mousehover content, and with event.type you see what event type is going on. With the Event 'hover' you get mouseenter and mouseleave
$(document).ready(function(){
​$('#mousehover').on('hover',function(event){
switch(event.type){
case 'mouseenter': $("#hovercontent").slideDown("slow");
break;
case 'mouseleave': $("#hovercontent").slideUp("slow");
break;
}
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
});

I recommend using a class:
HTML:
<ul class="nav nav-tabs nav-stacked">
<li id = "mousehover" class="menu1">
<a style="background-color:#f78144;color:#000;text-align:center;" href="#">Time Table</a>
</li>
</ul>
<div id = "hovercontent" class="menu1">
Contents 1
</div>
JS:
<script>
$(document).ready(function(){
$("#mousehover").mouseenter(function(){
$("#hovercontent").slideDown("slow");
});
$(".menu1").mouseout(function(){
$("#hovercontent").slideUp("slow");
});
});​
</script>

Moving div don´t stops onclick event

I want to make an animation of 2 div´s but I don´t succeed :(.
I want the DIV Tablou to move left and the DIV Frame1, Frame2, etc... to appear but every time I click on my links the Tablou DIV moves left.
So far I succeed with the frames to appear and the DIV Tablou move left.
The question is: how can I make the DIV Tablou move left and stay there and when I click on Close button to move right to his original position??
Many thanks
The HTML:
<div id="tablou" onclick="move_left()">
<div id="logo"></div>
<div id="menu">
<ul>
<li>Main</li>
<li>About Us</li>
</ul>
</div>
<div name="frames" id="frame1"> Frame 1 </div>
<div name="frames" id="frame2"> Frame 2 </div>
The script that I am using:
function show(currentframe) {
$('div[name|="frames"]').each(function(index) {
if ($(this).attr("id") == currentframe) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
function move_left() {
$('#tablou').animate({
'marginLeft' : "-=250px"
});
}

In the function show you have to stop the event from bubbling, bu you can't do that as long as you're attaching event listeners like that. Use something more modern, and since I see you're using jQuery try something like this:
HTML code:
<div id="menu">
<ul>
<li>Main</li>
<li>About Us</li>
</ul>
</div>
Javascript:
$("#main").click(function(e) {
// This prevents that the event bubbles up to #tablou
e.stopPropagation();
// This prevents that clicking on the link adds # to the url
e.preventDefault();
show("frame1");
});
$("#aboutus").click(function(e) {
e.stopPropagation();
e.preventDefault();
show("frame2");
});