Another one time event

JavaScript
1

For a one page website I am looking for yet another one time event. I am using the following function to fire multiple events:


$(document).ready(function(){
    $("#menu a").click(function(){
    e.preventDefault();
    var img_name = $(this).attr('class');
    $("#main").load(this.href, function(res){
      $("#content").css({"display" : "none", "right" : '-65%'});
      $('#background').hide('fast');
      $('#background').css('background-image', 'url(page_backgrounds/' + img_name + getResolution() + '.jpg)');
      $('#background').fadeIn('slow', function(){;
        $("#content").css({"display" : "block"}).animate({right: 0}, 600);
      });
    });
  });
});

and for the menu:


    <menu id="menu">
      <li><a href="modules/site/home.cfm" class="home">Home</a></li> 
      <li><a href="modules/site/titles.cfm" class="titles">Titles</a></li> 
      <li><a href="modules/site/advertising.cfm" class="advertising">Advertising</a></li>
    </menu>

But this code should only execute when the content corresponding with the href 's is not active. In other words when the content for home is active and you click on the anchor home again nothing should happen. But when one of the other anchors is clicked the events should execute. Last week I needed a one time event for a accordion menu, with which Pullo helped me using this code

 
$(document).ready(function () {
$(".menu dd").hide();
$(".menu dt").click(function(){
	$(this).addClass('activesub');
  var $menuItem = $(this),
      isAccordion = $menuItem.find(">:first-child").hasClass("accordeon"),
      accordionIsVisible = $menuItem.next().is(":visible")
 
  if(!(isAccordion && accordionIsVisible)){
    $(this).removeClass('activesub');
    $(".menu dd:visible").slideUp("slow");
    $menuItem.next().slideDown("slow");
  }
});
});

I tried to adjust his code as a basis for my needs, but without success so far.

2

I changed the function the following way:


$(document).ready(function(){
    $("#menu").on("click", "a", function(e) {
        e.preventDefault();
        $(this).addClass('active');
        var img_name = $(this).attr('class');
        if (!$(this).hasClass("active")) {
           $("#main").load(this.href, function(res){
               $("#content").css({"display" : "none", "right" : '-65%'});
               $('#background').hide('fast');
               $('#background').css('background-image', 'url(page_backgrounds/' + img_name + getResolution() + '.jpg)');
               $('#background').fadeIn('slow', function(){;
                   $("#content").css({"display" : "block"}).animate({right: 0}, 600);
	       });
	  });
        }
    });
});

Just as in Pullo’s example for the accordion menu I added a class to the anchor that is clicked $(this).addClass(‘active’); and then I used an if function to check which anchor’s does not have the class active. if (!$(this).hasClass(“active”)) { If that is the case execute the rest of the function. But as you probably understand is that not working

3

It was kind of stupid from me to think that this could work since the anchors already had a class attached e.a. home, titles, advertising etc. So changed those classes in id’s and changed the var img_name from var img_name = $(this).attr(‘class’); in var img_name = $(this).attr(‘id’); and tried the last approach again but without the desired result. I have been googling for the last 2 hours but couldn’t find a method where the active link will be deactivated until the next link is clicked

4

Hi donboe,

I’ve read the above posts, but am not too sure what you’re after.
Could you post a link to a page where I can see this in action with a brief description of the problem.

5

Hi Pullo. This is the example page. As you will see when a link is clicked an animation start and dynamic content is loaded. When you click the link again however, the entire cycle start again, and that is what I would like to avoid. So the active link should be disabled until another link is clicked.

Edit. Because of the class selected it looks like the active link is not click able any longer (cursor: default) but it is

Edit2: I found a solution: I used


$('#menu a').unbind('click', false);
$(this).bind('click', false);

Maybe this could be done better but it is working

6

What about this:

$(document).ready(function(){
   $("#menu").on("click", "a", function(e) {
    e.preventDefault();

    if(!$(this).hasClass("selected")){
      $("#menu a").removeClass("selected");
      $(this).addClass("selected");
      var img_name = $(this).attr('id');
      $("#main").load(this.href, function(res){
        $("#content").css({"display" : "none", "right" : '-65%'});
        $('#background').hide('fast');
        $('#background').css('background-image', 'url(page_backgrounds/' + img_name + getResolution() + '.jpg)');
        $('#background').fadeIn('slow', function(){;
          $("#content").css({"display" : "block"}).animate({right: 0}, 600);
        });
      });
    }
  });
});
7

That is doing the trick as well indeed. Thank you so much!!