PDA

View Full Version : Resolved Navigate to another page upon click



theremotedr
05-09-2015, 03:16 PM
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.

Beverleyh
05-09-2015, 03:41 PM
Loads of examples on Google https://www.google.co.uk/search?q=link+to+page+then+scroll+to+anchor&gws_rd=cr,ssl&ei=eChOVYmWJ-fR7Qboi4GIBw

theremotedr
05-09-2015, 03:43 PM
I did also look there but would of like one from this forum.

Beverleyh
05-09-2015, 03:52 PM
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.

theremotedr
05-09-2015, 09:23 PM
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.

molendijk
05-09-2015, 09:25 PM
DynamicDrive does have the script you want, see http://www.dynamicdrive.com/dynamicindex5/bookmarkscroll.htm

theremotedr
05-09-2015, 09:33 PM
Hi,
Thanks but i needed it to click link on one page but open another page then scroll to element.

molendijk
05-09-2015, 11:41 PM
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.

molendijk
05-10-2015, 12:05 AM
dd1.html:

<!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:

<!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>

theremotedr
05-10-2015, 09:21 AM
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/accaudi.html?scrollto=selection

molendijk
05-10-2015, 09:39 AM
The links should not be on the pages that you want to scroll, but on the other pages.

theremotedr
05-10-2015, 10:13 AM
Can you show me what i need to do.
Or example of coe etc

molendijk
05-10-2015, 11:46 AM
There's a lot of code on your pages. Maybe there's a conflict somewhere. Take the examples a gave you in #9 as a starting point and add your own lines from there.

theremotedr
05-10-2015, 02:24 PM
I have been trying to do this without any luck.
Because there is a lot of code i am a little bit on the safe side in deleting / making edits etc.
I have now put the site back as it was a having a think as i need it at least working.

Are you able to take a link etc from my site & you know up a file etc so its working.
I can then take it from there but as it does not do what i require at the moment me then making a mistake will only add to me not knowing where the issue is.

Beverleyh
05-10-2015, 02:33 PM
theremotedr, please follow the advice posted by Arie (molendijk) and refer to his example and the DD demo page for setup examples.

Other posters, please refrain from posting links to your own websites just to say that you've used the script too. If you can help theremotedr directly by troubleshooting *his* page, then by all means offer your code modifications and suggestions for *his* setup, but please do not bump this thread with posts that offer no help to the OP, as they will be deleted.

Thanks everyone

jscheuer1
05-10-2015, 02:36 PM
There is no:


<h2 id="selection">ITEM SELECTION....</h2>

on that page. And I don't think there's the script either.

theremotedr
05-10-2015, 02:45 PM
You are correct as mentioned i put it back as it was as i need it working.
Getting in a mess trying to sort it does not help me.
I thank the people for showing me there sites etc but i need help with my set up as its different to your set up.
Being a newbie i would not know what to do by trying to edit yours to work on mine.

I did follow the script advised and it worked but then trying to add my content was getting hard.

Do you advise me to do this again then advise once done.
Not being rude but i did this earlier and was told to look at our page,this dont help me being not that advanced.
If you can assist trouble shooting and making an edit to mine then that is great but otherwise its like the blind leading the blind.

Please advise.

molendijk
05-10-2015, 03:11 PM
I found it!
In your index.html you have, for instance,
<a href="karaudi.html">Audi</a>.
That should be
<a href="karaudi.html?scrollto=selection">Audi</a>
Same for the other links.
So the ?scrollto=selection part should be in index.html (or in any other page from where to want to go the the page that your want to scroll down at page-entrance).

theremotedr
05-10-2015, 03:19 PM
This message is from post #10

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

As mentioned above i put it back so i could have a working site.
The info i show above was done some hours ago but did not work for me.

If i change it all again is anyobe able to look/comment a fix for me ?

molendijk
05-10-2015, 04:02 PM
I copied the source of your index.html and put <a href="karaudi.html?scrollto=selection">Audi</a> in it:
Then I copied the source of your karaudi.html.
The link works here as it should.

I would advise you to do the same in a folder on your hard disk & see what happens. Make sure the folder also contains the DD-script, BUT NOTHING ELSE. That way you can verify if the issue is due to conflicting js on the internet.

jscheuer1
05-10-2015, 04:31 PM
It's next to impossible to diagnose the problem without the goto element being on the target page(s) and without the bookmarkscroll.js file being associated with the target page(s). Once you have that on at least one of the target pages, have a little patience and let both Arie and I have a chance to have a look before you remove the code and target element.

theremotedr
05-10-2015, 04:44 PM
Ok

I have done this.

Created 2 files.
indexcopy.html & karaudicopy.html

Added the code <a href="karaudi.html?scrollto=selection">Audi</a>

Added the code <h2 id="selection">ITEM SELECTION....</h2>

Added the script into the head section.

NOthing working so far.
I will leave this so you can take a look.

Thanks very much.

jscheuer1
05-10-2015, 05:37 PM
OK, where you have (on karaudicopy.html):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="bookmarkscroll.js">

/***********************************************
* 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>

The bookmarkscroll.js file is a 404 Not Found. It is located in the js folder. So the above should be:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="js/bookmarkscroll.js">

/***********************************************
* 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>

Also, since you are testing this on karaudicopy.html, this (on indexcopy.html):


<li><a href="karaudi.html?scrollto=selection">Audi</a>

should be:


<li><a href="karaudicopy.html?scrollto=selection">Audi</a>

Take care of those two things and then we can see if there's still a problem or not. I think it should work.

theremotedr
05-10-2015, 05:56 PM
Both changes have been made.
Please check

molendijk
05-10-2015, 06:44 PM
In indexcopy.html, you have two times a link to karaudi:

<a href="karaudicopy.html">Audi</a> under Keys & Remotes and

<a href="karaudi.html?scrollto=selection">Audi</a> under Accessories

The latter one links to karaudi.html (not karaudicopy.html!), and you don't have the correct link to the script there.

The first one links to karaudicopy.html, and although you have the correct link to the script there, it doesn't have the ?scrollto=selection part.

To correct things, you must have both under Keys & Remotes and Accessories:


<a href="karaudicopy.html?scrollto=selection">Audi</a>

And remove the script from indexcopy.html. It should only be put on the pages that you want to scroll.

jscheuer1
05-10-2015, 06:47 PM
The script is now accessible and seems to be working on (if I navigate to this, it works):

http://www.theremotedoctor.co.uk/karaudicopy.html?scrollto=selection

However, this (on indexcopy.html):



<li><a href="karaudi.html?scrollto=selection">Audi</a>

hasn't been updated. You did update another Audi link on the indexcopy.html, but not the one with the scrollto component. Update this one under accessories:


<li><a href="#">Accessories</a>
<ul>
<li><a href="karaudi.html?scrollto=selection">Audi</a>
<li><a href="accbmw.html">Bm

Either that, or add the ?scrollto=selection query to this audi copy link on indexcopy.html:


<li><a href="#">Keys & Remotes</a>
<ul>
<li class="current">
<li><a href="karaudicopy.html">Audi</a>
<li><a href="karbmw.html"

molendijk
05-10-2015, 06:51 PM
Well John, it seems we posted the same thing without knowing.

theremotedr
05-10-2015, 07:13 PM
Hi,

Yes you are correct,i made a mistake.

Under Accessories i put <li><a href="karaudi.html?scrollto=selection">Audi</a> when i should have done it under Keys & Remotes.

Please check now and advise if correct.

I can then continue editing the rest of the site.

Thanks both of you for your time.

jscheuer1
05-10-2015, 07:19 PM
Still doesn't have karaudicopy.html?scrollto=selection

It needs that to test properly.

theremotedr
05-10-2015, 07:22 PM
I have now updated this under keys & remotes

jscheuer1
05-10-2015, 07:24 PM
Yes! Working now. I had to refresh indexcopy.html, then it worked. You might also need to refresh karaudicopy.html - I had done that earlier.

molendijk
05-10-2015, 07:33 PM
You haven't deleted bookmarkscroll.js in indexcopy.html yet. Although it seems harmless, it might spoil things in the future. You can't be too careful.

theremotedr
05-10-2015, 07:59 PM
I have now added all items to the site.
The 2 files that were called copy have had the copy deleted.

You mention about deleting bookmarkscroll.js would i just delete it from the section below.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="js/bookmarkscroll.js">

/***********************************************
* 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>

molendijk
05-10-2015, 08:07 PM
Yes, delete
<script type="text/javascript" src="js/bookmarkscroll.js">

/***********************************************
* 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> but only in the pages that you don't want to scroll (index.html, for instance).

theremotedr
05-10-2015, 08:29 PM
I have now deleted it from index.
I have also deleted it from the other files that do not scroll.

Would you mind just flicking through a page or two to see if all ok at your end.

theremotedr
05-10-2015, 08:37 PM
Two questions if i may.

Does it matter that the url now shows,
http://www.theremotedoctor.co.uk/karaudi.html?scrollto=selection as opposed to http://www.theremotedoctor.co.uk/karaudi.html

Scroll to selection works perfect on the iphone and also has the same effect on the pc.
Can the pc be disabled and not scroll so only making the iphone do it ?
I only ask as the top of the page obviously moves up on the pc.
"just a thought"

Thanks very much for your time today.

100% happy with the outcome.

jscheuer1
05-10-2015, 09:16 PM
Question #1, no it does matter but that's what it's supposed to do. Some browsers don't show that (the query string part of the url) though, unless you highlight the address. Most do show it, and that's how this script works.

Question #2, I'm sure there are many ways to work that out. The basic idea is to not scroll the page if the selection element is already in view. To that end, try this version of the script (additions highlighted):


//** Scrolling HTML Bookmarks script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** Available/ usage terms at http://www.dynamicdrive.com/ (April 11th, 09')
//** Updated Nov 10th, 09'- Fixed anchor jumping issue in IE7
//** Customized to not scroll if item and its parent are in view

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.length==1 && $dest.offset().top < $(window).height() - $dest.parent().height() + $(window).scrollTop() && $dest.offset().top >= $(window).scrollTop()){return;}
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()

molendijk
05-10-2015, 09:25 PM
Would you mind just flicking through a page or two to see if all ok at your end.
Everything OK here.


Does it matter that the url now shows,
http://www.theremotedoctor.co.uk/karaudi.html?scrollto=selection as opposed to http://www.theremotedoctor.co.uk/karaudi.html
No, that doesn't matter as long as you want the page to scroll when it loads.


Can the pc be disabled and not scroll so only making the iphone do it ? I only ask as the top of the page obviously moves up on the pc.
It is possible, but rather complicated. Maybe someone has a quick answer. Beverleyh?

jscheuer1
05-10-2015, 09:32 PM
See my previous post. I think that will take care of:


Can the pc be disabled and not scroll so only making the iphone do it ? I only ask as the top of the page obviously moves up on the pc.

theremotedr
05-11-2015, 10:41 AM
Question #1, no it does matter but that's what it's supposed to do. Some browsers don't show that (the query string part of the url) though, unless you highlight the address. Most do show it, and that's how this script works.

Question #2, I'm sure there are many ways to work that out. The basic idea is to not scroll the page if the selection element is already in view. To that end, try this version of the script (additions highlighted):


//** Scrolling HTML Bookmarks script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** Available/ usage terms at http://www.dynamicdrive.com/ (April 11th, 09')
//** Updated Nov 10th, 09'- Fixed anchor jumping issue in IE7
//** Customized to not scroll if item and its parent are in view

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.length==1 && $dest.offset().top < $(window).height() - $dest.parent().height() + $(window).scrollTop() && $dest.offset().top >= $(window).scrollTop()){return;}
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()

I have made the edits as advised and on the pc this has cured the page moving up a touch & is great.
But a small issue,not sure if i am being to picky but trying to keep each page looking/operating the same so it looks uniform across the site.

Here is the issue i have.

On each page there is a Item Selection.
If the page has 3 or more fields below the heading Item Selection then the page scrolls up and the Dr logo,Click to order/Click for info are all in view.
This is what happened before the above code edited,i am happy with this.

If the page has only 2 fields below the heading Item Selection then the page does not scroll up and the Dr logo is seen from his waist up.
You do not see anything else.
Can the code be edited so it scrolls like 3 or more fields as to keep everything uniform ?

If you have iphone/ipad or use emulater you can check it out but below are to screen shot examples.

This is from http://www.theremotedoctor.co.uk/accjaguar.html?scrollto=selection page
http://i670.photobucket.com/albums/vv62/ipbr21054/FORUM%20POSTS/accjaguar.png

This is from http://www.theremotedoctor.co.uk/accaudi.html?scrollto=selection page
http://i670.photobucket.com/albums/vv62/ipbr21054/FORUM%20POSTS/accaudi.png

Many thanks

jscheuer1
05-11-2015, 04:27 PM
This also happens on the laptop PC. That's what I primarily use. It's screen is only 900px tall, so on the Audi page I can see the entire selection menu without scrolling, but still cannot see the order buttons. So do you really want this to be only on mobile, not PC?

I think a method whereby we determine whether or not the order buttons are in view, and then scroll to the selection menu if they are not might be good. But if the screen (browser window really) is too short, you won't be able to see both at the same time no matter where it's scrolled to.

In addition, while looking at the pages I've noticed that you have at least two cases where more than one element on the same page has the same id. This can make things difficult (sometimes impossible) to work out in javascript and is technically illegal - only one element per page can have an id.

The two I've noticed so far are:

btnOrder2


<li><a id="btnOrder2" href="http://form.jotformeu.com/form/50907214204344">Form Request</a><li>

and:


<a id="btnOrder2" href="http://form.jotformeu.com/form/50907214204344" target="_self"><img src="m-images/order-button.jpg" alt="Order Button" max-height="92"
max-width="317"></a>

The other is:

colophon


<!-- footer area -->
<footer>
<div id="colophon" class="wrapper clearfix"> footer stuff
</div>
<div id="colophon" class="wrapper clearfix">

These both happened to be elements that made sense as possibilities to determine if the order buttons were visible. I was wondering why they weren't working as expected until I discovered they were not unique on the page.

You should really fix both of those. and any others you might have, as they will potentially cause future problems. And please, going forward, try to avoid having more than one element on a page with the same id. If you have two or more elements that you want to have the same style, give them both the same class name and style that, not the id, which again, should be unique on a page. If the id is used in javascript, it must be unique to the element. However, you can use class in javascript if more than one thing should be treated the same or in a similar manner. But the coding can be tricky. Are you using any of these in javascript? Some browsers will accept the first one and be OK with that. Others will throw an error. Others will simply be unpredictable.

Once you fix those and any other duplicate id's and I have a look at how the page is setup, I'll work out a solution for this issue. It will be a bit more custom than what I already did though. That was supposed to usable for any situation where you do not want the page to scroll if the target (selection menu in this case) is visible. To accommodate this new approach, we will have to only scroll to the selection if the order buttons are not visible, a more customized thing since there is really no relation between the two. But it can be done. I just want you to be aware that the resulting code will probably only be usable for those specific pages.

theremotedr
05-11-2015, 04:43 PM
Ok
We will forget this as its going to be to much for such a little issue.
I will look into the duplicated issues.

theremotedr
05-12-2015, 05:24 PM
Duplicated element names now sorted.

jscheuer1
05-13-2015, 12:17 AM
Looking good. Let's try this version of bookmarkscroll.js (differences highlighted, two places):


//** Scrolling HTML Bookmarks script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** Available/ usage terms at http://www.dynamicdrive.com/ (April 11th, 09')
//** Updated Nov 10th, 09'- Fixed anchor jumping issue in IE7
//** Customized to not scroll if target item is $('#selection') and it and the order button $('#btnOrder1 img') are both already in view

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.attr('id') === 'selection' && $(window).height() + $(window).scrollTop() > $('#btnOrder1 img').offset().top + $('#btnOrder1 img').height() && $dest.offset().top >= $(window).scrollTop()){return;}
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()

As noted, this should only effect performance if the scrollto item is selection and the both it and the order button are already visible - in which case nothing happens, otherwise it should scroll to selection. I've tested the logic and syntax, so it's likely it will perform fine. Still actual testing is required for confirmation. And the browser cache may need to be cleared as the target pages may need to be refreshed before changes will take effect.

The good thing about this modification is that if you need this script for any other target element (other than 'selection'), it should perform in the normal manner for this script.

The bad thing is that it relies upon the id selection element and the id btnOrder1 element (the latter of which must contain an img tag as it currently does) both being there and being pretty much as they currently now are, otherwise the results for this specific use might not be as desired. Minor variations might be OK. Any major changes will probably throw off the custom behavior.

theremotedr
05-13-2015, 06:16 AM
The above edits have been made and works well.
Now regardless of how many fields are shown below the heading Item Selection the page scrolls into view nicely.

Having said that whilst checking the pages i noticed that a couple pages did not scroll at all.
Did i miss something earlier,i have taken a look but dont see the answer.

The page is Contact Me/Skype & Programming/Honda

Please take a look.

Thanks very much.

jscheuer1
05-13-2015, 01:16 PM
Those are both scrolling for me. Try refreshing them.

theremotedr
05-13-2015, 01:30 PM
Hi,
Still the same.

FYI The tab called slideshow is now called Others.
Drop down list with fields in etc.
Just looked at these and none of them scroll either ?

jscheuer1
05-13-2015, 02:09 PM
There is no bookmarkscroll script on or associated with the slideshow page. The tag is there, but the src attribute is missing:


<script type="text/javascript">

/***********************************************
* 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>

The Skype page does have the bookmarkscroll script on it.

Neither page has an id="btnOrder1" order button.

I already told you that, with this custom version of the script, that if either the selection element or the order button are not there or are not there as on the pages where this does work that there could be problems. What I would try is to give the selection menu a different id and scroll to that instead on those pages.

OR - I may be able to change the script to work for those pages too.

Also at the end of both pages, are you still using any of this:


<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.0.min.js">\x3C/script>')</script>

<script defer src="js/flexslider/jquery.flexslider-min.js"></script>

<!-- fire ups - read this file! -->
<script src="js/tooltip/main.js"></script>
<script src="js/tooltip/jquery.tooltipster.min.js"></script>
<script type="text/javascript">
var url = 'http://form.jotformeu.com/form/50907214204344?partNumber=';

function replaceMainImage(imgSrc, partNumber, myContent) {
$('#content a').get(0).search = 'partNumber=' + partNumber;
$('#mainImage').attr('src', imgSrc)
$('#mainImage').addClass('img-border');
$('html, body').animate({
scrollTop: $("#mainImage").offset().top
}, 1000);
$('.tooltip').tooltipster('destroy');
$('.tooltip').tooltipster({ trigger: 'hover',
autoclose: 'false',
timer: '700',
animation: 'fade',
delay: 200,
//multiple: true,
restoration: 'current',
position: 'top',
contentAsHTML: true,
maxWidth: 300,
content: myContent,
}).hover(function() {
$(this).tooltipster('show');
}, function() {
$(this).tooltipster('hide');
}).on('click', function() {
$(this).tooltipster('show');
});
}
$(document).ready(function() {
$('.tooltip').tooltipster();
$('.sub-menu').hide();
$("li:has(ul)").click(function() {
$("ul", this).slideDown();
});
});
$(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
});
});
</script>

If not, get rid it. If you are still using some of it, get rid of the parts that are not used.

theremotedr
05-13-2015, 02:47 PM
Now sorted and changed the place to scroll to.
Works fine.

I use the code at the bottom of the page.

jscheuer1
05-13-2015, 09:28 PM
Actually, you could have kept using the selection element and the order button on those pages that have them. That would have been good since that will only scroll when the order button is unseen. What you've done now is essentially given up that functionality on the majority of pages that would support it just to still have scrolling in all browser on all pages including the few without the order button. You only needed to make the change on those few pages.

theremotedr
05-14-2015, 06:11 AM
Reverted now.
Headers with Item Selection use scroll to selection
Headers with Contact Details use scroll to secondary-navigation

Thanks