Develop Reference

How to add a class to dropdown window when content is now visible?

So I recently put together a dropdown window with hidden content and once clicked, it will show the content behind it then add a hash to the anchor of the url so that if the link is copied and sent to someone else. Once the link is opened it will automatically open the dropdown that was selected.
Here is my code...
HTML
<div class="dropdown_wrapper">
Title 1
<div class="hidden dropdown_content">
<p>Hidden Content for window 1</p>
</div>
</div>
<div class="dropdown_wrapper">
Title 2
<div class="hidden dropdown_content">
<p>Hidden Content for window 2</p>
</div>
</div>
jQuery that opens dropdown if it contains a particular hash
$(document).ready(function() {
var urlHash = window.location.hash.replace('#!', '');
if (window.location.hash.indexOf('!') == 1 && $('.dropdown_wrapper').length > 0) {
$('#' + urlHash).next('.dropdown_content').slideDown(300);
}
});
jQuery for the actual onclick functionality to open dropdown
$('.dropdown').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active');
$(this).next('.dropdown_content').slideUp(300);
}else{
$(this).addClass('active');
$(this).next('.dropdown_content').slideDown(300);
}
});
My question is, how do i get the active class that changes the button I have from a plus to a minus as if it was clicked, when someone goes directly to a url with the dropdown open?

You already have the icon swap implemented right?
Wouldn't it be as simple as that then?
$('#' + urlHash).addClass('active')
in your $(document).ready() {}
P.S.: I'm not sure if I have understood your question completely. So just tell me if you meant it differently.

Add the Image swap to the Css when active
.active {
background-image:url("ulrto Plus Image Here") !important
}
and on all the other Select Items change the css to
.DropDownMenuItem {
background-image:url("ulr to Minus Image Here")
}

ScrollTo() function is not working properly with sections

I have a series of sections on an application that I just finished developing. I'm using the scrollTo plugin for jQuery. It's always worked nicely in the past for me.
What the application is suppose to do is the following:
All sections load and the first section immediately expands, everything else remains collapsed (this works)
You can click on another section, and the section that is currently open will collapse, and the one you clicked will expand (this works)
After expansion is completed, the window will scroll to the top of the expanded section (this does not work)
I need help on step three there. My code is below.
I have searched for various topics on the scrollTo() plugin and the the use of ScrollTop. I have tried both, but nothing has changed.
I'm wondering if it has something to do with when the toggle function is called but I"m not sure.
I'm really hoping to find an answer here. If you need further explanation or code, please let me know!
//module expansion and contraction
$('.module-heading').click(function(){
var id = $(this).attr('id');
var data = $(this).data('toggle');
$('.app-section').each(function(){
if($(this).is(':visible')){
$(this).toggle('slow');
}
})
$(data).toggle('slow', function(){
$(id).scrollTo(100);
});
});
Here is sample HTML as well
<div class='row module-heading module-heading-plain' data-toggle='#questionaire'>
<div class='form-group'>
<div class='col-md-12'>
<h4 class='text-info'>
Pre-Application Questionaire
</h4>
</div>
</div>
</div>
<span id='questionaire'>
<!-- form goes here -->
</span>
Here is a link to a fiddle http://jsfiddle.net/5q48n0z1/4/

It seems like you want to scroll the body to the new section. So, we'll need to target the html/body in order to do that (fiddle):
$('.module-heading').click(function(){
var $this = $(this);
$('.app-section:visible').hide("slow");
$($this.data('toggle')).show('slow', function(){
$("html,body").animate({
scrollTop: $this.offset().top
});
});
});
Note: you'll need to have overflow content in order to scroll the body. You might consider adding some padding to the body.

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.

Simple Jquery Gallery Question

I am new to Jquery and and trying to build a simple gallery. I know there is lots of plugins, but I don't want to use any of them. my question is very simple. how can I fade in image when click on thumb. also how can I achieve auto fadeIn and Out. I will really appreciate any response. thanks
here is my code.
//HTML
<div class="LargeImage">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="thumbsImages">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
// JavaScript
$(document).ready(function() {
var LargeImages = $(".LargeImages").children();
var SmallImages = $(".thumbsImages").children();
SmallImages.each(function() {
SmallImages.click(function() {
LargeImages.each(function() {
// I have problem here with logic
});
$(this).addClass("active");
$(this).siblings().removeClass("active");
});
});
});

You don't want to call SmallImages.click(...) within the SmallImages.each(...), you'll end up hooking the click event on each image multiple times. (click hooks the handler up to all matching elements inside the jQuery instance you call it on.)
Here's a basic way to do what you're doing without the extra divs:
HTML:
<div class="LargeImage">
</div>
<div class="thumbsImages">
<img class="thumb"
src='http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG'
data-fullsize='http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=123&d=identicon&r=PG'>
<img class="thumb"
src='http://www.gravatar.com/avatar/92e9e88f33ab596fa1caaf237a4d5fad?s=32&d=identicon&r=PG'
data-fullsize='http://www.gravatar.com/avatar/92e9e88f33ab596fa1caaf237a4d5fad?s=123&d=identicon&r=PG'>
<img class="thumb"
src='http://www.gravatar.com/avatar/c3203aa647aeb214c463c59f1af2c38f?s=32&d=identicon&r=PG'
data-fullsize='http://www.gravatar.com/avatar/c3203aa647aeb214c463c59f1af2c38f?s=128&d=identicon&r=PG'>
</div>
</div>
JavaScript:
jQuery(function($) {
// Look up the large image once and remember it
var largeImage = $(".LargeImage");
// Hook the click event on the thumbnails
$(".thumbsImages img").click(function() {
var fullsize, hasImage;
// Get the full size version from the attribute
fullsize = $(this).attr("data-fullsize");
// Flag up whether there's current an image in the large area
hasImage = largeImage.find('img').length == 0;
// Fade out whatever's there, then fade in the new image;
// the `hasImage` check just makes the fadeOut really fast if
// there's nothing showing.
largeImage.fadeOut(hasImage ? 0 : 250, function() {
largeImage.html("<img src='" + fullsize + "'>").fadeIn(250);
});
});
});​
Live example
Basically, what I'm doing there is storing the URL of the full size version in the img element for the thumbnail as data-fullsize (the data- prefix means that the attribute will validate under HTML5; prior to HTML5 there's no official way to have your own attributes, but browsers allow it even though it's technically invalid). Then, when the user clicks an image, we fade out whatever's showing in the big div, then replace it with the full-size image and fade in.

An idea of what you should do:
$(document).ready(function()
{
$('.thumbsImages').click(function()
{
var index = $('.active').prevAll('div').length; //number of previous siblings
$('.LargeImage').find('div:eq('+index+')').fadeOut(500); //hide the actual showed element
$('.active').removeClass("active"); //remove the active class
$(this).addClass("active"); //add class to the actual clicked item
index = $(this).prevAll('div').length; //number of previous siblings
$('.LargeImage').find('div:eq('+index+')').fadeIn(500); //show the actual selected image
});
});
It's not a really optimized code. But it's simple to understand. ;)
I don't know if it's what you´re needing, but I hope it helps!

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.