Thevenin 0 Newbie Poster

Hi all, I really need some help.

I am trying to make a website with horizontal scroll (working!), then I am using a jQuery Slideshow (called Camera), and I combined this with the horizontal scrolling website(working!).
When I select the page I want from the menu, the website scrolls to right and automatically it loads from database a list of images in the Slideshow.

I have a menu with some button and each button call this "swapContent(cv)" function:

function swapContent(cv) {
            $(".camera").html("Loading...").show();
            var url = "evaluation_menu.php";
            $.post(url, {contentVar: cv}, function(data) {
                    $(".camera").html(data).show();
                    $('.camera').camera({
                            pagination: false
                    });
            });
    }

HTML code:

<a class="next page" title="Title 1" href="#page" onClick="return false" onmousedown="javascript:swapContent('title1');"><div id="title1"></div></a>
<a class="next page" title="Title 2" href="#page" onClick="return false" onmousedown="javascript:swapContent('title2');"><div id="title2"></div></a>

The menu is in the homepage and in the other page (just one page), but every time I click on a button it seems that the "camera" div is replicated inside x1, x2 and so on.

So I thought something like a refresh of the ".camera" div and then load the new content selected from the menu; but using "location.reload()", the reload works correctly, but not load the selected content.

Yesterday I thought to using a tabbed Ajax function, I found on a website some code:

$(function(){
    $("a[rel='tab']").click(function(e){
      e.preventDefault();

      //if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
      //if commented, html5 nonsupported browers will reload the page to the specified link.


      //get the link location that was clicked
      pageurl = $(this).attr('href');

      //to get the ajax content and display in div with id 'content'
      $.ajax({url:pageurl+'?rel=tab',success: function(data){
       $('#wrap-content').html(data);         
      }});

      //to change the browser URL to 'pageurl'
      if(pageurl!=window.location){
       window.history.pushState({path:pageurl},'',pageurl);
      }
      return false;
    });
    });
    // the below code is to override back button to get the ajax content without reload
    $(window).bind('popstate', function() {
    $.ajax({url:location.pathname+'?rel=tab',success: function(data){
      $('#wrap-content'').html(data);
    }});
    });

HTML code:

<a class="next page" title="Title 1" href="#page" onClick="return false" onmousedown="javascript:swapContent('title1');" REL="TAB"><div id="title1"></div></a>

This tabbed things works, pretty well, but don't know if and how to mix it with my code.

Any hint/help is really appreciated.

Please

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.