Home/ Questions/Q 7596555
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T21:56:40+00:00

I have a slider, which responds to hash tag changes to move to the

  • 0

I have a slider, which responds to hash tag changes to move to the next or previous slide.
It does this by triggering the click event I have bound on my controls.
When I change the hash tag everything works as expected in IE 9 and Firefox.

However in Safari, Chrome and Opera an issue pops up when the only when right control is triggered by the script. If the left control is triggered it works fine. Which has caused me to be confused about the issue as its not consistent on both sides.

The issue it cases is that the whole slide appears as it its moved by two places instead of one, or three instead of two. Basically as if its moved by an extra space each time.
The confusing thing is is that when I check the #slideInner it says that the margin left has moved by the right amount, but it still appears as if its moved an extra space.

Here is an example of the code I used.

HTML 

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div id="rightarrow" class="control">&nbsp;</div>
<div id="wrap">
<div id="slideshow">
<div id="slidesContainer">
<div id="slideInner>
<div id="homes" class="slide"> stuff in here </div>
<div id="blogs" class="slide"> stuff in here </div>
<div id="portfolio" class="slide"> stuff in here </div>
</div>
</div>
</div>
</div>
<div id="leftarrow" class=" control">&nbsp;</div> 
</body>
</html>

CSS for the slider elements

#slideshow #slidesContainer
{
margin:0 auto;
width:936px; 
overflow: hidden;
position:block;
background-color: transparent;

}

#slideshow 
{   
width: 100%;
}

#slideInner
{
position: relative;
}

JS

$(document).ready(function(){

var = slideWidth = '936';
var = currentPosition = 0;
var slides = $('.slide');
var numberOfSlides = slides.length;

$('#slideInner').css('width', slideWidth * numberOfSlides);


$('.control').bind('click', function(){
// Determine new position
  currentPosition = ($(this).attr('id')=='rightarrow')
? currentPosition+1 : currentPosition-1;      

 function
  $('#slideInner').animate({'marginLeft' : slideWidth*(-currentPosition)}, 1500);
});

$(window).load(function() { 
 hashchange();  
});

function hashchange()   
{                               
$(window).hashchange(function(){    

  // If hashchange happens whilst in state One
    if (currentPosition == 0 && location.hash == '#blogs' )
             {
    // click right once to slide two        
            $('#rightarrow').trigger('click');     
        }
else
    if (currentPosition == 0 && location.hash == '#portfolio' )
    {
    // click right twice to page three
    $('#rightarrow').trigger('click');
    $('#rightarrow').trigger('click');
    }

// iif hashchange happens whilst in state two
else 
    if (currentPosition == 1 && location.hash == '#portfolio' )
    {
    //click right once to page three
    $('#rightarrow').trigger('click');  
    }
else                                
    if (currentPosition  == 1 && location.hash == '#homes' )
    {
    // click left once to page one
    $('#leftarrow').trigger('click');   
    }

    //..... and so on with more slides 
  });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, rather than deal with the issue you’re talking about, overall, I’d just rearrange the code so that you’re not triggering events that way. What you’re doing at the moment is really inefficient and will take you ages if you have to add more slides. Something like:

    // create array of all your pages
var slides = ["#homes", "#blogs", "#portfolio"];
$('.control').bind('click', function(){
    // Determine new position
    currentPosition = $(this).attr('id')=='rightarrow' ? currentPosition+1 : currentPosition-1;      
    moveToPage(currentPosition);
});

function moveToPage(){
    $('#slideInner').animate({'marginLeft' : slideWidth*(-currentPosition)}, 1500);
}

$(window).hashchange(function(){    
    currentPosition = $.inArray(location.hash, slides);
    moveToPage();
});

    Might be more efficient.

    • 0