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")
}

how to show a particular slide in a slider based on the requested URL using jquery

I have a Register button on the page, by clicking on it Jquery takes the control down to last slide using the code below
$(".register").on("click", function (e) {
if (!IsMobile()) {
e.preventDefault();
if (!ScrollAnimating()) {
$('.home-nav ul li').removeClass('active');
$('.home-nav ul li:nth-child(6)').addClass('active');
SnapScroll("6", 3000);
}
}
});
I want to put an anchor tag in a URL like http://www.somesite.com/#Register and if the URL contains this anchor tag #Register I want to execute the same code i.e. jump to the last slide.
I tried putting a hidden anchor just before the sixth slide like below but the jump to the section is not the same and we get by calling SnapScroll("6", 3000);
<a id="Register" style="visibility: hidden"></a>
<section class="sc6 slide">
......
Any ideas?

if(window.location.hash == '#Register'){
//do stuff
}
Is this what you're looking for?

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.

how to call child anchor click on parent div click

I have multiple instances of
<div class="picOuterDiv">
<a href="examplepage.php?var=1" class="iframe" > page one </a>
</div>
<div class="picOuterDiv">
<a href="examplepage.php?var=2" class="iframe" > page two </a>
</div>
Now I am using jQuery colorbox plugin to create Lightbox's. The lightBox opens when i click the anchor element, The anchor element with the class iframe. It works fine till here, using
$(".iframe").colorbox({iframe:true, width:"646", height:"675"});
What I want is to open the colorbox when I click the parent div. I used the following code to trigger anchor element href when div was clicked, but apparently the href alone wasnt enough, the element clicked should have the class "iframe" . So its not working with this code.
$('.picOuterDiv').each(function(){
$(this).on('click', function(){
location.href = $(this).find('a').attr('href');
});
});
So can anybody help me on how I can make this work ? I hope the Problem is clear. Thank you in advance.
UPDATE: http://jsfiddle.net/VhkFN/3/

$('.picOuterDiv').click(function() {
window.location.href=$(this).find('a').attr('href');
});​
There are a couple issues with your fiddle. First "var arr[]" is not correct. Second, the hyperlink doesn't have any onclick property, so triggering a click won't do much. You need to grab its href attribute instead.
Demo: http://jsfiddle.net/VhkFN/4/

This was what worked for me. As i said i was using jquery colorbox.
$(".picOuterDiv").click(function () {
var anchorHref = $(this).find('a').attr('href');
$(this).colorbox ({iframe:true, width:"646", height:"675", href: anchorHref});
});

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.