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
    hol
    hol is offline
    New to the CF scene
    Join Date
    May 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    W3C Validation..

    Hi, I know the problem but I don't know how to fix this. This is JQuery image slider and I used digit as my ID attribute but unfortunately, W3C invalid returns because:

    Line 222, Column 18: value of attribute "id" invalid: "1" cannot start a name

    In this case, I know that I cannot use digit as my id but the code makes me to use that id... please give me some advice on this thank you

    Code:
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
      <script type="text/javascript">
    
    	function Slider(){
    	
    		$(".slider #1").show("fade", 500);
    		$(".slider #1").delay(5500).hide("slide", {direction: 'left'}, 500);
    		
    		var sc = $(".slider img").size();
    		var count = 2; 
    		
    		setInterval(function (){
    			$(".slider #"+count).show("slide", {direction: 'right'}, 500);
    			$(".slider #"+count).delay(5500).hide("slide", {direction: 'left'}, 500);
    			
    			if(count == sc){
    				count = 1;
    			}else{
    				count = count + 1;
    			}
    		}, 6500);
    	}
      </script>
    
      <div class="slider">
            <img id="1" src="images/slide0.png" border="0" alt="error" />
            <img id="2" src="images/slide1.png" border="0" alt="error" />
      </div>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    You could change the markup to something like
    Code:
    <img id="img_1" src="images/slide0.png" border="0" alt="error" />
            <img id="img_2" src="images/slide1.png" border="0" alt="error" />
    and then change the script to
    Code:
    function Slider(){
    	
    		$(".slider #img_1").show("fade", 500);
    		$(".slider #img_1").delay(5500).hide("slide", {direction: 'left'}, 500);
    		
    		var sc = $(".slider img").size();
    		var count = 2; 
    		
    		setInterval(function (){
    			$(".slider #img_"+count).show("slide", {direction: 'right'}, 500);
    			$(".slider #img_"+count).delay(5500).hide("slide", {direction: 'left'}, 500);
    			
    			if(count == sc){
    				count = 1;
    			}else{
    				count = count + 1;
    			}
    		}, 6500);
    	}
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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