Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 392
  • Last Modified:

adding id to url to go to specific place on page

Need help adding id to end of url that can go to a specific slide in the attached demo. For instance, I need to add #2 to the end of this url as such www.slides-test.aspx#2   The #2 should go to the second slide of the attached demo.  I've done this before on html pages where if I placed  id="2" to a <div> tag let's say for body content, if you then make a shortcut url to www.page.html#2 it will go to that exact place on the page.  Just trying to figure out how to do that here.  To take this file attached and add #2 to the end of the URL to go to a specific slide - slide 2 in this case.  Can anyone help?

Thank you.           Slides.zip
0
webgirl29
Asked:
webgirl29
  • 12
  • 11
  • 4
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
You should not be using a number as the first character in 'id's, it's against the rules.  Try using letters or at least start it with a letter.  http://www.w3schools.com/tags/att_standard_id.asp  Also, it says that HTML is case insensitive but it fails to mention that javascript is not, it is case sensitive.
0
 
Michel PlungjanIT ExpertCommented:
0
 
Michel PlungjanIT ExpertCommented:
In this case it is not a problem

Change

var current=1;

to

var hash = location.hash;
var current = hash?parseInt(hash.substring(1),10):1;
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
webgirl29Author Commented:
Can you please tell me where do you see the code var current=1 ?  Which file and on what line?  I'm not seeing it.  Where do I make this change?
0
 
Michel PlungjanIT ExpertCommented:
Line 59 in script.js
0
 
Dave BaldwinFixer of ProblemsCommented:
Like I told jason:

While the w3fools have a few good points, their info is getting more and more out of date and wrong itself.  In addition, they didn't read some of their own references correctly.  And a fair amount of it is opinion and whining.  W3Schools, even with their errors, has much more useful info than W3Fools and probably a higher percentage of correctness.  But since perfection is difficult to achieve, it is always a good idea to have alternate sources that you can check when something doesn't work.
0
 
Michel PlungjanIT ExpertCommented:
My biggest gripe with w3schools is their seeming lack of correcting their wrong stuff. Also I use MDN and MSDN exclusively for the "horse's mouth" answer
0
 
Dave BaldwinFixer of ProblemsCommented:
But as W3Fools show, W3Schools has slowly been updating their pages.   The W3Fools site does not appear to have been updated since January.  And though it is not perfect, W3Schools has far more useful info than the Fools do and they are more accurate percentage wise than the Fools are.

You can go to http://www.w3.org/ for the 'official' word but it can be hard to read.  The Microsoft sites are good for the rules and syntax but they are almost devoid of examples.  The best site for reference is PHP.net but that's only for PHP.  Examples and comments everywhere.  I also like http://www.quirksmode.org/ for the browser compatibility tables covering CSS differences.
0
 
webgirl29Author Commented:
I understand about the debate and will read through the links you both provided, but following through with the suggestion to alter the script.js file, I'm not sure if I understand.

Line 59 - 61 now look like this:

var hash = location.hash;
var current = hash?parseInt(hash.substring(1),10):1;
      function autoAdvance()

Then what should I do?  I went into "slides-test.aspx" and at the second slide I added id="slide-two" like this within the <div> tag.  
<div id="slide-two" class="slide" style="color:#000000; font-size:36px" >SLIDE TWO</div>  

What I'm doing wrong, as when I go to the browser url and add that to the end, it does not work.  ...slides-test.aspx.htm#slide-two
0
 
webgirl29Author Commented:
Actually the url should be   ...slides-test.aspx#slide-two   Correct?
0
 
Michel PlungjanIT ExpertCommented:
No #2
I'll look 2morrow
0
 
webgirl29Author Commented:
Ok sure.  Let me know tomorrow if you can.  Thank you.  Actually, if it is possible to make that a word rather than a number, I think that would be better.  This way I can use whatever word I'd like that would be appropriate for the site, which would of course also make send to the user if viewed in the browser bar and good for SEO as well.  Thanks!
0
 
Michel PlungjanIT ExpertCommented:
Then the core script needs changing
0
 
webgirl29Author Commented:
Hmm.  Show me your way tomorrow with using a number.  And then also, please fill me in if you know how we can change the script to use a term instead if we were to re-code.  How much of the script needs to change, if you can help me with that, etc.  

Let's first try Option 1 with the number like I said though.

If you're able to guide me on the second solution, I'd be so grateful.  Thank you!
0
 
Dave BaldwinFixer of ProblemsCommented:
If you don't like the W3Schools, then take it from the source: http://www.w3.org/TR/html4/types.html#type-name

"ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")."

0
 
webgirl29Author Commented:
Sounds good, but I just don't know how to incorporate that into my current files here.  With this slideshow, it's difficult for me.  Need assistance please.
0
 
Michel PlungjanIT ExpertCommented:
I'll look soon. Just got up. 6am here
0
 
Michel PlungjanIT ExpertCommented:
Here

$(document).ready(function(){
  var slideIds = [];
  var slideIdx = [];
	/* This code is executed after the DOM has been completely loaded */
	
	var totWidth=0;
	var positions = new Array();
	
	$('#slides .slide').each(function(i){
    slideIds[i]=$(this).attr("id");		
    slideIdx[slideIds[i]]=i; 
    		
		/* Traverse through all the slides and store their accumulative widths in totWidth */
		
		positions[i]= totWidth;
		totWidth += $(this).width();
		
		/* The positions array contains each slide's commulutative offset from the left part of the container */
		
		if(!$(this).width())
		{
			alert("Please, fill in width & height for all your images!");
			return false;
		}
		
	});
	
	$('#slides').width(totWidth);

	/* Change the container div's width to the exact width of all the slides combined */

	$('#menu ul li a').click(function(e,keepScroll){

			/* On a thumbnail click */

			$('li.menuItem').removeClass('act').addClass('inact');
			$(this).parent().addClass('act');
			
			var pos = $(this).parent().prevAll('.menuItem').length;
			
			$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
			/* Start the sliding animation */
			
			e.preventDefault();
			/* Prevent the default action of the link */
			
			
			// Stopping the auto-advance if an icon has been clicked:
			if(!keepScroll) clearInterval(itvl);
	});

	// The number of seconds that the slider will auto-advance in:
	
	var changeEvery = 5;
  var itvl; 

	var hash=location.hash;
	var idx = hash?slideIdx[hash.substring(1)]:null; // this may not be correct if jQuery sees the first current as 1 
	var current=(idx!=null)?idx:1; // set idx to 1


//	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */

  $('#menu ul li a').eq(current%$('#menu ul li a').length).addClass('act').siblings().addClass('inact');
  if (hash) $('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[false]);	
	
	/*****
	 *
	 *	Enabling auto-advance.
	 *
	 ****/

	else itvl = setInterval(function(){autoAdvance()},changeEvery*1000); // only start if nothing passed

	 
	function autoAdvance()
	{
		if(current==-1) return false;
		
		$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);	// [true] will be passed as the keepScroll parameter of the click function on line 28
		current++;
	}


	/* End of customizations */
});

Open in new window



<div id="test-container">

<div id="test-inset">

<div id="gallery">
	
<div style="width: 4700px; margin-left: -2820px;" id="slides">
<!--SLIDE START --> 
   <div id="slide1" class="slide" style="color:#000000; font-size:36px" >SLIDE ONE</div>
<!--SLIDE END -->

<!--SLIDE START --> 
   <div id="slide2" class="slide" style="color:#000000; font-size:36px" >SLIDE TWO</div>
<!--SLIDE END -->

<!--SLIDE START --> 
   <div id="slide3" class="slide" style="color:#000000; font-size:36px" >SLIDE THREE</div>
<!--SLIDE END -->

<!--SLIDE START --> 
   <div id="slide4" class="slide" style="color:#000000; font-size:36px" >SLIDE FOUR</div>
<!--SLIDE END -->

<!--SLIDE START --> 
   <div id="slide5" class="slide" style="color:#000000; font-size:36px" >SLIDE FIVE</div>
<!--SLIDE END -->


</div>


    
    <div id="menu">
    
    <ul>

        <li class="menuItem inact"><a href="#slide1">ONE</a></li>
        <li class="menuItem inact"><a href="#slide2">TWO</a></li>
        <li class="menuItem inact"><a href="#slide3">THREE</a></li>
        <li class="menuItem inact"><a href="#slide4">FOUR</a></li>
        <li class="menuItem inact"><a href="#slide5">FIVE</a></li>
    </ul>
    
 </div>
    
  </div>
</div>

</div>

Open in new window

0
 
webgirl29Author Commented:
Thank you!  This seems to be working great now.  So I actually didn't realize that for this test example the  .aspx file was really in the html format, but I suppose when I drop the .htm from the url and go back to using only .aspx like  /slides-test.aspx#slide4  that this code will still work, correct?   Do you see any issue with that?
0
 
webgirl29Author Commented:
I would have to test on a server, which I didn't get a chance to test out just yet, but saving this file as a .aspx file will still allow me to keep the new code as is, correct?
0
 
Michel PlungjanIT ExpertCommented:
Probably. I do not work with asp but the code is self-detecting the IDs you give the divs, so it can be anything as long as each ID is unique. Currently my code onLy supports one parameter after the hash, so if you want to pass more stuff, I would need to cahnge it. Querystring parms are ok, so blabla.aspx?parm1=a&parm2=b#slide3 will work
0
 
webgirl29Author Commented:
Ok, thank you so much for your help.  I will not have a chance to get this implemented Live for the next few days possibly, so I don't want to close out this request until I see it working in my real web page.  As soon as I do, I will let you know and "accept" the solution. :)

Thanks!
0
 
webgirl29Author Commented:
Finally had time to get this up on our staging server here to test.  Though it works fine in IE, I'm seeing a little issue with Firefox.  It does not always land completely on the slide.  Sometime it lands half way between two slides, etc, but when you hit the REFRESH button it fixes itself.  But I don't want the user to have to hit refresh.  I want them to land on this slide using the link provided with the slide tag specified and have it display properly.  Is there a fix for FF?
0
 
Michel PlungjanIT ExpertCommented:
Do you have your examples online?
I am off to bed
0
 
webgirl29Author Commented:
It's a staging server with a VPN login and unfortunately you would not have access.  Hmm, trying to work it out. Not sure if I zipped it up for you if you would see the same results as I'm not sure if it has something to do with other code on the site already - interferring, or the way our CMS structure works.  I know usually IE is the issue, but this time it's FF.  Give me a few days and I will get back to you.  Thank you!
0
 
Michel PlungjanIT ExpertCommented:
Have a look in the FX console. Perhaps there are errors
0
 
Michel PlungjanIT ExpertCommented:
And btw does the code validate at w3org ?
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 12
  • 11
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now