Question

can someone please help with the window.location.hash and the .cycle script. I’ve been trying for weeks now and i can not do it, i’m learning javascript part time and i’m no where near capable of completing this without some help.

Here’s the html code i have

<div id="home_slide" class="slide">
  <li class="header"><a href="#" class="goToSlide" data-jim="#about_us_slide">About us</a></li>
  <li class="header"><a href="#" class="goToSlide" data-jim="#contact_us_slide">Contact us</a></li>
  <li id="back"><a href="#" class="prev_demo" data-jim="#home_slide">Home</a></li>
</div>

<div id="about_us_slide" class="slide">
  <li class="header"><a href="#" class="goToSlide" data-jim="#about_us_slide">About us</a></li>
  <li class="header"><a href="#" class="goToSlide" data-jim="#contact_us_slide">Contact us</a></li>
  <li id="back"><a href="#" class="gohome" data-jim="#home_slide">Home</a></li>
</div>

<div id="contact_us_slide" class="slide">
  <li class="header"><a href="#" class="goToSlide" data-jim="#about_us_slide">About us</a></li>
  <li class="header"><a href="#" class="goToSlide" data-jim="#contact_us_slide">Contact us</a></li>
  <li id="back"><a href="#" class="gohome" data-jim="#home_slide">Home</a></li>
</div>

​

Heres the CSS code i have

<style type='text/css'>
#container {
width: 320px;
height: 417px;

}
#nav li {
float: left;
}
#nav li a {
display: block;
border: 1px solid #333;
background: #eee;
}
#slide_containers {
clear: both;
border: 1px solid #333;
background: #eee;
}
.slide {
width: 100%;
}
#about_us_slide {
background: #cea;
width: 320px;
height: 417px;
}
#contact_us_slide {
background: #fea;
width: 320px;
height: 417px;
}

</style>

and finally here is the javascript code i have
//

$('.goToSlide').click(function(e) { 
// Bind click event to all elements with the class goToSlide
e.preventDefault();
var selector = $(this).data('jim'); // Get the data-slide attribute value
//console.log(selector, $(selector), $(selector).index()); // DEBUG
var slideIndex = $(selector).index(); // Get the index of the slide element
$('#slide_containers').cycle(slideIndex); // Cycle to slide by index
});});
//]]>  
</script>

Here’s also a jsfiddle of the code working
http://jsfiddle.net/mYmrx/16/

What i’m trying to do is have my domain name i.e. http://www.domain.com#about_us or even better would be http://www.domain.com/about_us

Please can someone help me, i am going crazy.

Answer 1

You are quite close. You can set window.location.hash to your ‘selector’ variable to get pretty much what you are asking for. You can even do it after the animation completes using promise and done. Here is an example:

$(function() {
    $('#slide_containers').cycle({
        fx: 'scrollLeft',
        speed: 'fast',
        timeout: 0,
        prev: ".prev_demo",
    });

    // Bind click event to all elements with the class goToSlide
    $('.goToSlide').click(function(e) {
        e.preventDefault();
        // Get the data-slide attribute value
        var selector = $(this).data('jim');
        // Get the index of the slide element
        var slideIndex = $(selector).index();
        $('#slide_containers').cycle(slideIndex);
        // wait for animation to complete
        var promise = $('.slide').promise();
        promise.done(function() {
            // set hash
            window.location.hash = selector;
        });
    });

    //Grab hash off URL (default to first tab) and update
    $(window).bind("hashchange", function(e) {
        var anchor = $(location.hash);
        if (anchor.length === 0) {
            $('#slide_containers').cycle(0);
        }
        var slideIndex = $(anchor).index();
        $('#slide_containers').cycle(slideIndex);
    });
});​

​Here is the updated JSFiddle: http://jsfiddle.net/infiniteloops/AHATV/8/

Here you can see the JSFiddle in action (with the updated hash locations): http://jsfiddle.net/infiniteloops/AHATV/8/show/