Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Script not working in IE

    Hey guys!

    I have a problem with my script. I have a jQuery script for a content slider that works just fine in all the browsers, except from IE. Here it is:

    $(document).ready(function(){
    var currentPosition = 0;
    var slideWidth = 865;
    var slides = $('.slide');
    var numberOfSlides = slides.length;

    // Remove scrollbar in JS
    $('#slidesContainer').css('overflow', 'hidden');

    // Wrap all .slides with #slideInner div
    slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
    'float' : 'left',
    'width' : slideWidth
    });

    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', slideWidth * numberOfSlides);

    // Insert controls in the DOM
    $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

    // Hide left arrow control on first load
    manageControls(currentPosition);

    // Create event listeners for .controls clicks
    $('.control')
    .bind('click', function(){
    // Determine new position
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

    // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
    'marginLeft' : slideWidth*(-currentPosition)
    });
    });

    // manageControls: Hides and Shows controls depending on currentPosition
    function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
    }
    });

    The problem appears to be with the left and right control. When I click one of them the content should move either to the left, either to the right. In IE, it doesn't even transform the cursor while hovering. Here is the HTML and CSS for them:

    <img src="images/control_left.jpg" id="leftControl">
    <img src="images/control_right.jpg" id="rightControl">

    .control {
    width:39px;
    height:263px;
    text-indent:-10000px;
    position:absolute;
    cursor: pointer;
    }
    #leftControl {
    top:0;
    left:0;
    float:left;

    }
    #rightControl {
    top:0;
    right:0;
    float: right;
    }
    Thanks a lot for your help!
    Last edited by andi192; 03-11-2013 at 06:38 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    If your cursor isn't changing that suggests it might be a problem with the screen layout/css in IE, meaning that the element isn't clickable.

    Can you give a link to your page?
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •