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();
}
});
Related
I've following script to show & hide subdiv on subsequent clicks but somehow it doesn't hide subdiv on second click.
Here's the code:
<script>
$.ajax({
$('#floatcategory').append("<div class='floatbutton'
id='float_"+categories[k][0]+"'>" +categories[k][1]+"</div>");
$('#floatcategory').append("<div id='"+categories[k][0]+"_"+products[l][0]+"'>"
+products[l][1]+"</div>");
});
$('.floatbutton').live('click',function() {
var floatidl=$(this).attr('id');
var floatid=floatidl.substr(6);
if ($('#'+floatidl'').hasClass("clicked-once")){
$('[id^="'+floatid+'_"]').hide();
$('#'+floatidl'').removeClass("clicked-once");
}
else {
$('[id^="'+floatid+'_"]').show();
$('#'+floatidl'').addClass("clicked-once");
}
});
</script>
I'm using jQuery version 1.6. It doesn't hide the div. Can anyone help?
Use .live() (for older jquery versions - < v1.7):
$('.floatbutton').live('click',function() {
var floatidl=$(this).attr('id');
var floatid=floatidl.substr(6);
if ($('#'+floatid).hasClass("clicked-once")){
$('[id^='+floatid+']').hide();
$('#'+floatid).removeClass("clicked-once");
}
else {
$('[id^='+floatid+']').show();
$('#'+floatid).addClass("clicked-once");
}
});
or
$(document).delegate('.floatbutton','click',function() {
var floatidl=$(this).attr('id');
var floatid=floatidl.substr(6);
if ($('#'+floatid).hasClass("clicked-once")){
$('[id^='+floatid+']').hide();
$('#'+floatid).removeClass("clicked-once");
}
else {
$('[id^='+floatid+']').show();
$('#'+floatid).addClass("clicked-once");
}
});
Use .on() (for new jquery versions - >= 1.7):
$(document).on('click','.floatbutton',function() {
var floatidl=$(this).attr('id');
var floatid=floatidl.substr(6);
if ($('#'+floatid).hasClass("clicked-once")){
$('[id^='+floatid+']').hide();
$('#'+floatid).removeClass("clicked-once");
}
else {
$('[id^='+floatid+']').show();
$('#'+floatid).addClass("clicked-once");
}
});
Hope this helps you :)
when you use
$('.floatbutton').live('click',function() {
it will only work for divs which are not added dynamically
You should use something like this to handle dynamically added objects:
$(document).ready(function () {
$(document).on("click",".floatbutton",function(){
http://jsfiddle.net/aras7/mVHa7/6/
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
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');
}
});
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.
How do I check using javascript if the page I'm on contains a particular div... e.g turtles
if(document.getElementById("divid")!=null){
alert('Div exists')
}
if you have that div's id, you can do it that way:
var myDiv = document.getElementById( 'turtles' );
if ( myDiv ) {
//It exists
}
overwise, if it's a class, you'd better use a framework (jQuery here):
if ( $('.turtles').length > 0 ) {
//it exists
}
Like this:
<script type="text/javascript">
function CheckExists() {
var oDiv = document.getElementById("turtles");
if (oDiv) {
alert("exists");
}
else {
alert("does not exist");
}
}
</script>
The function must be located in bottom of page or called after page finished loading.
I'd just like to point out that document.contains is another way to do this.
document.contains is particularly useful if you have a web application whose components are rendered virtually before insertion into the DOM.