Develop Reference

Two javascript functions won't work at the same time

I have one script that shows a tooltip on click and the other script shows a menu after a certain point in the page.
If the menu doesn't load, then I can click on the buttons to show the tooltips just fine. But when the menu does show up, the tooltips script doesn't show anymore.
<script>
$(document).ready(function() {
$('#left-tooltip').click(function() {
$('#lollefttooltip').toggle();
});
});
$(document).ready(function() {
$('#right-tooltip').click(function() {
$('.right-tooltip').toggle();
});
});
</script>
<script>
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 650) {
$("#nav-block:hidden").css('visibility', 'visible');
$("#nav-block:hidden").fadeIn('650');
$("#nav-wrap:hidden").css('visibility', 'visible');
$("#nav-wrap:hidden").fadeIn('650');
$("#header-wrap:hidden").css('visibility', 'visible');
$("#header-wrap:hidden").fadeIn('650');
} else {
$("#nav-block:visible").fadeOut("650");
$("#nav-wrap:visible").fadeOut("650");
$("#header-wrap:visible").fadeOut("650");
}
});
});
</script>
Thanks in advance for the help!
update: Here is all the code I have for this. http://jsfiddle.net/parachutepenny/82J6G/11/
I'm sorry in advance for any beginner errors that I may have all over the place. I'm still learning how to code.

This doesn't answer your question, but there are some great opportunities to optimize here. Aside from best practice, they may also sort out the bugginess. Something like:
$(document).ready(function() { // combine doc.ready
var win = window, // store window as a variable
$bod = $('body');
$('#left-tooltip').click(function() {
$('#lollefttooltip').toggle();
});
$('#right-tooltip').click(function() {
$('.right-tooltip').toggle();
});
$(win).scroll(function() {
if (win.scrollY > 650) { // use scrollY from window variable so you're not retrieving from the DOM
$bod.addClass('navVisible'); // use classes on body to trigger CSS transitions on the children
} else {
$bod.removeClass('navHidden');
}
});
});

Put your multiple click function into single ready function.It may cause readability problem.
Follow this link.
Multiple document.ready() function

Toggle window.location in jQuery/javascript

What I am trying to achieve is that whenever you click an image, it changes the window.location url, toggling it between '#' and '#footer'. Right now, all I have is this:
<script>
function clickarrow(){
var rd=Math.floor(Math.random()*11)
if (rd > 5){
window.location="#footer";
}
else{
window.location="#";
}
}
</script>
As you can see, this makes a 50:50 chance of either change being made. It works as a temparary fix, but sometimes you have to click up to 6 times for it to take effect.
Is there a way of doing this that properly toggles the window.location?
I am using jQuery 1.9.

If you're trying to reliably toggle the hash, rather than using a random chance, try something like this:
function clickarrow(){
var showFooter = true;
return function () {
if (showFooter) {
window.location.hash = "footer";
} else {
window.location.hash = "";
}
showFooter = !showFooter;
}
}
jQuery(function () {
jQuery('#myToggleLink').click(clickarrow());
});
Note: Normally when binding events, a function reference must be passed in. Here, I'm invoking clickarrow() since it returns a function by design. The returned function encapsulates the toggle variable via closure.

you can use data attribute to tell what is next step:
$('#arrow').click(function() {
if ($(this).data('footer'))
{
window.location="#footer";
$(this).data('footer', 'false');
alert('b');
}
else
{
window.location="#";
$(this).data('footer', 'true');
alert('a');
}
});

$.noop() variable in jQuery works for one cycle, but not two

This script is for a text box to fadeIn onClick then fadeOut onClick. It works the first time. But, the second time you do it, the $.noop() variable doesn't work. Here's the link of the site I just started working on. If you click on the "music","bio", or "links" tabs twice you will see what I'm talking about. Here's the jQuery:
$(document).ready(function() {
$('#music-box').hide();
$('#links-top-music').click(function() {
$('#music-box').fadeIn(1000);
$.noop();
$('#links-top-music').click(function() {
$('#music-box').fadeOut(750);
});
});
});

Try this.
$(document).ready(function() {
$('#music-box').hide();
$('#links-top-music').click(function(evt) {
if ($('#music-box:visible').length) {
$('#music-box').fadeOut(750);
}
else {
$('#music-box').fadeIn(1000);
}
evt.preventDefault();
});
});
Demo here: http://jsfiddle.net/naveen/pfT5E/

Based on your updated comment:
$(document).ready(function() {
var buttonStatus = false;
$('#music-box').hide();
$('#links-top-music').click(function() {
if(buttonStatus) {
$('#music-box').fadeOut(750);
} else {
$('#music-box').fadeIn(1000);
}
buttonStatus = !buttonStatus;
});
});
This will toggle between visible and invisible.

Current page in navigation using Javascript and jQuery

I'm trying to set the current page to reflect in a main navigation bar. I've set a div in each page for JS / jQuery to check it's the right page with the following code:
$(document).ready(function() {
if ($('div').is('#example1-page')) {
$("a#nav-example1").addClass('nav-example1-current');
$("#nav-example1 p").css('display','block');
}
else if ($('div').is('#example2-page')) {
$("a#nav-example2").addClass('nav-example2-current');
$("#nav-example2 p").css('display','block');
}
else if ($('div').is('#example3-page')) {
$("a#example3").addClass('nav-example3-current');
$("#nav-example3 p").css('display','block');
}
});
I know there has to be a better way to do this with an array or something where I'm not repeating myself. Something where you can store the links IDs in an array and by clicking on the link with the right ID JS will know to set the current page in the navigation. I'm not sure where to start though.

Arrays of arrays are your friend :). Try this:
$(document).ready(function() {
var pageCounter=3;
var pages=[];
for(var i=1;i<=pageCounter;i++){
var selectors=["#example"+i+"-page",
"a#nav-example"+i,
"nav-example"+i+"-current",
"#nav-example"+i+" p"];
pages.push(selectors);
}
for(var i=0;i<=pageCounter;i++){
if ($('div').is(pages[i][0])) {
$(pages[i][1]).addClass(pages[i][2]);
$(pages[i][3]).css('display','block');
break;
}
}
});
Note: the logic to initialize the pages array does not need to be part of document.ready.

Try this
$(document).ready(function() {
if ($('#example1-page').length) {
$("a#nav-example1").addClass('nav-example1-current');
$("#nav-example1 p").show();
}
else if ($(#example2-page').length) {
$("a#nav-example2").addClass('nav-example2-current');
$("#nav-example2 p").show();
}
else if ($('#example3-page').length) {
$("a#example3").addClass('nav-example3-current');
$("#nav-example3 p").show();
}
});

Same browser version, 2 different javascript handlings

Problem solved: I removed the first function as it wasn't needed anyways, and now it all works in all browsers. Thanks for the posts though!
My issue here is that I have a javascript which on one server runs perfectly with no issues what-so-ever in IE. But on another server gives me 2 errors in IE.
It claims that my offset().top is either Null or not an object.
My fade in and out effect doesn't even become active.
Then I have another HUGE issue, which is that in FireFox NON of it all works.
OPS: This is a webpart, so additional javascripts running on the site might could intervene with the javascript I am trying to execute here. But I'm not sure.
I've tested this webpart in IE 8.0.7600.16385, on both servers.
Script:
<script type="text/javascript"
src="/_layouts/Progressive/Javascripts/jquery-1.4.3.js"></script>
<script type="text/javascript">
(function($) {
$.fn.goTo = function() {
// This is where IE on the second server claims the error to be.
$('html, body').animate({scrollTop: $(this).offset().top + 'px'}, 'fast');
return this;
}
})(jQuery);
function showParagraphs(sender) {
var id = sender.getAttribute('href');
if ($('#<%=paragraph.ClientID%>').hasClass("readable")) {
$('#<%=paragraph.ClientID%>').removeClass("readable");
highlightSelected(id);
}
else {
$('#<%=paragraph.ClientID%>').addClass("readable");
rmvClass(id);
}
};
function highlightSelected(id) {
$(id).goTo();
$(id).addClass("reading");
// This part is what isn't activated on the second server.
$('.reading').fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400);
// .reading only adds a gray background to the DIV.
};
function rmvClass(id) {
$('div').each(function() {
if ($(this).hasClass("reading")) {
$(this).removeClass("reading");
}
});
}
function toTop() {
$('div').each(function() {
$(this).removeClass("reading");
});
$('#<%=paragraph.ClientID%>').addClass("readable");
}
$(document).ready(function() {
$('#<%=q.ClientID%>').find('dd').hide().end().find('dt').click(function() {
$(this).next().slideToggle("fast");
});
$("#<%=q.ClientID%> dt").click(function() {
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
}
else {
$(this).addClass("selected");
}
});
});
</script>
Any thoughts or suggestions?

When
$(id)
returns an empty jQuery object, then ".offset()" will return null. You're calling that "highlightSelected" code with the "href" value from something, so perhaps what you think to be an "id" value that corresponds to something on the page, well it really doesn't. It's hard to know for sure, however, because you did not post any of the relevant HTML, nor did you even show where "showParagraphs()" is called!