Page 1 of 6 123 ... LastLast
Results 1 to 10 of 51

Thread: Navigate to another page upon click

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,085
    Thanks
    157
    Thanked 3 Times in 3 Posts

    Default Navigate to another page upon click

    Hi,
    Can you advise such a script that would allow me to click on a link in one page & be taken to another page then smooth scroll to an element.
    Did take a look in the scripts sections but did not see anything.

    Many thanks.
    Last edited by theremotedr; 05-12-2015 at 07:29 PM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    theremotedr (05-17-2015)

  4. #3
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,085
    Thanks
    157
    Thanked 3 Times in 3 Posts

    Default

    I did also look there but would of like one from this forum.

  5. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I couldn't find any examples posted in the forum either. Looks like you'll need to test out a few options from Google and make a selection from there. When you've made you're choice, post back if you need any help and hopefully someone can help you.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  6. #5
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,085
    Thanks
    157
    Thanked 3 Times in 3 Posts

    Default

    Ok,
    So i was not able to find what i wanted.

    I have now added an anchor to each of my pages & can now jump from page to page upon clicking a link to the position "Item Selection"
    This was for iphone purposes to bring the "Item Selection" list into view on the page.

    I am wondering if there is a small piece of code etc that will disable this action for the pc but to still apply it to the iphone.

    Take a look here and you will see that once loaded the page moves up a touch.

    Go here http://www.theremotedoctor.co.uk/index.html
    Then select any of the tabs followed by a car makers name.

    Many thanks.

  7. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

  8. The Following User Says Thank You to molendijk For This Useful Post:

    theremotedr (05-17-2015)

  9. #7
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,085
    Thanks
    157
    Thanked 3 Times in 3 Posts

    Default

    Hi,
    Thanks but i needed it to click link on one page but open another page then scroll to element.

  10. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    Thats's exactly what the script offers you! It's the third demo ('Go to Test Section C on another page'). I tested it. It works like a charm.

  11. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    dd1.html:
    Code:
    <!doctype html>
    <html >
    <head>
    
    <title>&nbsp;</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    </head>
    
    <body>
    
    <a href="dd2.html?scrollto=sectionc">Scroll to Section C dd2.html</a>
    
    </body>
    
    </html>
    dd2.html:
    Code:
    <!doctype html>
    <html >
    <head>
    
    <title>&nbsp;</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <!-- Scrolling HTML bookmarks-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    This notice MUST stay intact for legal use
    Visit Project Page at http://www.dynamicdrive.com for full source code  -->
    <script>
    var bookmarkscroll={
    	setting: {duration:1000, yoffset:0}, //{duration_of_scroll_milliseconds, offset_from_target_element_to_rest}
    	topkeyword: '#top', //keyword used in your anchors and scrollTo() to cause script to scroll page to very top
    
    	scrollTo:function(dest, options, hash){
    		var $=jQuery, options=options || {}
    		var $dest=(typeof dest=="string" && dest.length>0)? (dest==this.topkeyword? 0 : $('#'+dest)) : (dest)? $(dest) : [] //get element based on id, topkeyword, or dom ref
    		if ($dest===0 || $dest.length==1 && (!options.autorun || options.autorun && Math.abs($dest.offset().top+(options.yoffset||this.setting.yoffset)-$(window).scrollTop())>5)){
    			this.$body.animate({scrollTop: ($dest===0)? 0 : $dest.offset().top+(options.yoffset||this.setting.yoffset)}, (options.duration||this.setting.duration), function(){
    				if ($dest!==0 && hash)
    					location.hash=hash
    			})
    		}
    	},
    
    	urlparamselect:function(){
    		var param=window.location.search.match(/scrollto=[\w\-_,]+/i) //search for scrollto=divid
    		return (param)? param[0].split('=')[1] : null
    	},
    	
    	init:function(){
    		jQuery(document).ready(function($){
    			var mainobj=bookmarkscroll
    			mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
    			var urlselectid=mainobj.urlparamselect() //get div of page.htm?scrollto=divid
    			if (urlselectid) //if id defined
    				setTimeout(function(){mainobj.scrollTo(document.getElementById(urlselectid) || $('a[name='+urlselectid+']:eq(0)').get(0), {autorun:true})}, 100)
    			$('a[href^="#"]').each(function(){ //loop through links with "#" prefix
    				var hashvalue=this.getAttribute('href').match(/#\w+$/i) //filter links at least 1 character following "#" prefix
    				hashvalue=(hashvalue)? hashvalue[0].substring(1) : null //strip "#" from hashvalue
    				if (this.hash.length>1){ //if hash value is more than just "#"
    					var $bookmark=$('a[name='+this.hash.substr(1)+']:eq(0)')
    					if ($bookmark.length==1 || this.hash==mainobj.topkeyword){ //if HTML anchor with given ID exists or href==topkeyword
    						if ($bookmark.length==1 && !document.all) //non IE, or IE7+
    							$bookmark.html('.').css({position:'absolute', fontSize:1, visibility:'hidden'})
    						$(this).click(function(e){
    							mainobj.scrollTo((this.hash==mainobj.topkeyword)? mainobj.topkeyword : $bookmark.get(0), {}, this.hash)
    							e.preventDefault()
    						})
    					}
    				}
    			})
    		})
    	}
    }
    
    bookmarkscroll.init()
    </script>
    
    </head>
    
    
    
    <body>
    
    <br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2<br>dd2
    
    <div id="sectionc">section c</div>
    
    </body>
    
    </html>

  12. #10
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,085
    Thanks
    157
    Thanked 3 Times in 3 Posts

    Default

    Morning,
    I think i have set it up as shown but it does not work for me.
    Please can you check what i have done & advise.

    I have added the js file.
    I have added the script to each page header.

    My id code is <h2 id="selection">ITEM SELECTION....</h2>

    Here are the links on each page.

    <li><a href="karaudi.html?scrollto=selection">Audi</a>
    <li><a href="karbmw.html?scrollto=selection">Bmw</a></li>
    <li><a href="karfiat.html?scrollto=selection">Fiat</a></li>
    etc
    etc
    etc

    Here is a page you can look at http://www.theremotedoctor.co.uk/acc...llto=selection

Similar Threads

  1. Navigate (highlight) a specified row in a table
    By jason_kelly in forum JavaScript
    Replies: 1
    Last Post: 01-18-2013, 09:34 PM
  2. Navigate to an iframe anchor on a different page
    By atstern in forum JavaScript
    Replies: 2
    Last Post: 02-02-2009, 06:14 PM
  3. alternative to navigate URL
    By evan in forum Flash
    Replies: 8
    Last Post: 09-11-2008, 02:36 AM
  4. Replies: 1
    Last Post: 06-22-2006, 09:14 AM
  5. Replies: 1
    Last Post: 06-12-2006, 04:15 PM

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
  •