Develop Reference

Alternative to Toggle

I have a basic show hide toggle. It works on everything but iPhone and it's driving me crazy.
Is there an alternative to the following javascript that does not use the toggle function?
Javascript
$(document).ready(function(){
$(".pic_you_click_on").on('click', function(){
$("#display").toggle();
});
});
HTML
<img class="pic_you_click_on" src="images.png"></img>
<ul id="display" class="div_to_appear">
<li>About</li>
<li>Home </li>
</ul>
CSS
#display {
display:none;
}

Okay so I know what the problem is.
Animate Css. I used it to apply an animation effect to my header that flies in. What I did not know, it that using animations can often mess with your stacking order, particularly fixed elements. See article below.
http://daneden.me/2012/04/22/css-transforms-and-z-index/
I had to strip back the whole site and place each element one by one, checking it each time.
The moment I added the effect, it turned to custard. Apparently this is common knowledge... Not to me! I've removed it and the button now functions.

Bootstrap parallax tooltips and smooth scrolling

I bought a template to use with Bootstrap because I am kind of in a hurry, and I want to edit it a bit so it does what I want to. I created a vertical menu with tooltips, but the tooltips aren't showing. When I use the exact same code in another file it works perfectly, so I think something is blocking it but I don't know why. Does anyone have a clue?

So, apparently the way localScroll works is that you need to specify the scroll properties on the element containing the links which will scroll to the designated location. Thus, you will want your HTML to change to something like this for your dot menu.
HTML:
<ul>
<li id="dotLink1">
<h1>First manned flights</h1>
View
</li>
<li id="dotLink2">
<h1>The frameless parachute</h1>
View
</li>
<li id="dotLink3">
<h1>Over the English Channel</h1>
<a id="dotLink3" href="#Section-2">View</a>
</li>
<li id="dotLink4">
<h1>About</h1>
<a id="dotLink4" href="#foot-sec">View</a>
</li>
</ul>
Then you need to actually call the localScroll function on those container elements to tell them where the links should lead to like so:
JavaScript:
<script>
jQuery(document).ready(function(){
jQuery('#topnav, #dotLink1').localScroll(3000);
jQuery('#startbtn, #dotLink2').localScroll(5000);
jQuery('#dotLink3').localScroll(7000);
jQuery('#dotLink4').localScroll(9000);
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
jQuery('#top-section').parallax("50%", 0.1);
jQuery('#Section-1').parallax("70%", 0.3);
jQuery('#Section-2').parallax("50%", 0.1);
jQuery('#foot-sec').parallax("50%", 0.1);
});
</script>
Finally, you should remove your onload attribute from the body tag and put anything you want to run upon loading of the document inside the jQuery jQuery(document).ready() function. Since you've already got one going at the bottom, we'll put the code in there.
Instead of creating a new function, all you need to do is put the window.location.hash inside there. However, that alone won't make localScroll work. Luckily, localScroll has a function prepared for listening to the hash of the URL. This is jQuery.localScroll.hash(). Thus, you'll want to change the hash first and then call that like so:
JavaScript:
<script>
jQuery(document).ready(function(){
window.location.hash = "Section-2";
jQuery.localScroll.hash();
jQuery('#topnav, #dotLink1').localScroll(3000);
jQuery('#startbtn, #dotLink2').localScroll(5000);
jQuery('#dotLink3').localScroll(7000);
jQuery('#dotLink4').localScroll(9000);
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
jQuery('#top-section').parallax("50%", 0.1);
jQuery('#Section-1').parallax("70%", 0.3);
jQuery('#Section-2').parallax("50%", 0.1);
jQuery('#foot-sec').parallax("50%", 0.1);
});
</script>
Here is a JSBin to show it in action. (Don't 1:1 replace your code with the JSBin code since I had to make all the external JS/CSS/image links absolute links to resources on the web instead of keeping them relative links.)
And last but not least, to get the tooltips working, you want the h1 elements to show when you're hovered over the buttons. One might think to put the :hover on the h1; however, that won't work since its current state is hidden. Thus your mouse can never hover over it. One might then think to put it on the a tag since that's the button; however, you won't be able to use selectors to target the h1 from there since a comes after h1 instead of before. Thus you should activate the h1 when the mouse hovers over its parent element, which in this case is the li.
CSS:
nav#primary li:hover h1 {
display:block;
z-index:9999;
}
New JSBin here.

How to do page / content transitions

I'm quite new to this all so sorry for my lack of terminology.
I was looking at this site and I was wondering how I do the content/page change without reloading the page.
Could someone point me in the right direction? What is that JavaScript? CSS transitions? jQuery? Or could you show me some code? Any help would be amazing; I've been looking around for a while can't find anything like it...

That's a simple slider, just instead of slide images, it slide content (nested divs, img, lists). I checked the code for you and is using this jQuery plugin: SudoSlider plugin
Do not reinvent the wheel by writing your own plugin, you can see few demos here, but this one is very close to the example using auto height. This is how you can use it on your site:
Jquery
<script type="text/javascript" >
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider();
});
</script>
HTML
<div id="slider" >
<ul>
<li><div> .... </div></li>
<li>Lorem ipsum text + image</li>
<li>List, maps, ...</li>
</ul>
</div>

It's JQuery animation. It's a (very slick, but still) typical carousel effect, where you have a slider div that extends beyond the visible screen, and its left margin is animated to create the effect.
It's straightforward to create the basic effect (but of course a lot of work to create something that looks as good as the link):
Set overflow-x: hidden to a container div
Add a slider div inside the container, and slide elements within the slider
Add navigation buttons, and on click animate the slider's left offset (keeping track of the current position)
Here's a really basic example.

I could say that it's possible to use all of the mentioned options :)
Basically you can use something like http://bxslider.com/ to achieve what you want just instead using of img elements inside list items use some content items.

Scrolling to next element in container - almost there

I'm struggling with a jquery problem.
I think I am close to a solution but I keep stumbling at the moment.
So my markup (simplyfied) looks like this:
<div class="col">
Content
<div class="scroll-container">
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
scroll down
</div>
Basically a .col that holds a container and a button.
The Plan:
1) After a click on the button container should scroll down to the next <li>.
2) When the last <li> is reached it scrolls to the first <li> again. So I need a loop.
3) The numbers and size of <li> may change from case to case. So basically the button should just scroll the next <li> to the top of the container.
4) The scrolled <li> needs to have a little margin to the top edge of the container.
Where I am:
I had a similar problem which got brilliantly solved by ronalchn and since the problem is somewhat similar I have created a fiddle based with his code.
Fiddle with the solved problem (To see the code in action)
Fiddle with the this problem (Obviously doesn't work with the same jquery)
I think the code basically only needs a little rearranging to work with the new situation.
I have tried for a couple of hours but it seems like this is still beyond my current level of understanding jquery.
I am very greatfull for any push in the right direction. Thank you.

Here you go: http://jsfiddle.net/UQsv9/7/
CSS changes: added position: relative to your ul
I'm using $.fn.data to store the current child, from there it's just using the difference between the two offsets to calculate the new top.

Drop down menu cut-off after SlideOut

I'm using a drop-down-menu which I modified to use animations such as SlideOut and FadeIn using onmouseover and onmouseout.
The problem comes after hovering through all of the nested lists a few times, which results in the second nested list becoming cut off.
You can replicate the bug by moving from "nav 1" to "nav 2" and back again rapidly.
Link to jsFiddle
Screenshot of cut-off:
http://dl.dropbox.com/u/53879403/screenshot.png
Please and thank you for any advice / criticism.

Please see this fiddle: http://jsfiddle.net/SuRJ9/
The code I've changed:
function slideDown(toSlide) {
currentHover(toSlide);
$($(toSlide).children('ul')[0]).slideDown('medium',
function(){ $(this).css('overflow','visible') });
}
I've added resetting overflow to visible after finishing animation. overflow is set to hidden by jQuery in order to make sliding animation.
Also, please don't use onmouseout="slideUp(this)" and onmouseover="slideDown(this)", this is obtrusive JavaScript and is a bad technique. You should assign these events using jQuery.

$.fadeOut/In() apply certain styles before running the animation. These are remove when the animation completes.
Your fadeOutNav() is calling stop(true) , which if done while fadeOut() or fadeIn() are working, will leave the style's they have applied to the element. In this case overflow:hidden on the parent ul. You can remove the stop and let the effects bubble up, or insert a .css('overflow','') to your chain.