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