SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    W3C Validation issue : how to fix

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi u4722839. Welcome to the forums.

    I know that I cannot use digit as my id but the code makes me to use that id...
    Heh heh ... Just change the code.

    Change the ID in the JS file to anything, such as #one, and then change the HTML too.

    Edit:


    O, I looked at the code a bit more closely and see what you mean. Maybe try something like:

    $(".slider #s1").show("fade", 500);
    $(".slider #s1").delay(5500).hide("slide", {direction: 'left'}, 500);

    ...

    $(".slider #s"+count).show("slide", {direction: 'right'}, 500);
    $(".slider #s"+count).delay(5500).hide("slide", {direction: 'left'}, 500);

    ...

    <img id="s1" src="images/slide0.png" border="0" alt="error" />
    <img id="s2" src="images/slide1.png" border="0" alt="error" />

    Mind you, not validating doesn't mean it won't work ... although it's better not to break rules.

  3. #3
    SitePoint Member
    Join Date
    May 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply! I am quite new to JavaScript. Have a nice day

    Quote Originally Posted by ralph.m View Post
    Hi u4722839. Welcome to the forums.



    Heh heh ... Just change the code.

    Change the ID in the JS file to anything, such as #one, and then change the HTML too.

    Edit:


    O, I looked at the code a bit more closely and see what you mean. Maybe try something like:

    $(".slider #s1").show("fade", 500);
    $(".slider #s1").delay(5500).hide("slide", {direction: 'left'}, 500);

    ...

    $(".slider #s"+count).show("slide", {direction: 'right'}, 500);
    $(".slider #s"+count).delay(5500).hide("slide", {direction: 'left'}, 500);

    ...

    <img id="s1" src="images/slide0.png" border="0" alt="error" />
    <img id="s2" src="images/slide1.png" border="0" alt="error" />

    Mind you, not validating doesn't mean it won't work ... although it's better not to break rules.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Did it work? I'm no expert with JS, so I may be blowing hot air there.


Bookmarks

Posting Permissions

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