Solved

adding id to url to go to specific place on page

Posted on 2011-09-17
27
383 Views
Last Modified: 2012-05-12
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
Comment
Question by:webgirl29
  • 12
  • 11
  • 4
27 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 36555679
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36556700
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36556711
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
 

Author Comment

by:webgirl29
ID: 36556804
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36556825
Line 59 in script.js
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 36556998
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36557006
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 36557027
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
 

Author Comment

by:webgirl29
ID: 36557156
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
 

Author Comment

by:webgirl29
ID: 36557165
Actually the url should be   ...slides-test.aspx#slide-two   Correct?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36557171
No #2
I'll look 2morrow
0
 

Author Comment

by:webgirl29
ID: 36557189
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36557193
Then the core script needs changing
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:webgirl29
ID: 36557211
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 36557475
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
 

Author Comment

by:webgirl29
ID: 36558141
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36558156
I'll look soon. Just got up. 6am here
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 36558392
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
 

Author Comment

by:webgirl29
ID: 36564627
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
 

Author Comment

by:webgirl29
ID: 36564631
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36564714
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
 

Author Comment

by:webgirl29
ID: 36567975
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
 

Author Comment

by:webgirl29
ID: 36713143
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36713172
Do you have your examples online?
I am off to bed
0
 

Author Comment

by:webgirl29
ID: 36714324
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36714771
Have a look in the FX console. Perhaps there are errors
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36714783
And btw does the code validate at w3org ?
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Read about why website design really matters in today's demanding market.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now