I have an html page with three divs containing text content. I want to scroll to a particular div depending upon the link that the user clicks on the home page.
There are three links on the home page; so what I want is if the user clicks on link 1 he is scrolled to div 1 on the resultant page, if he clicks on link 2 on the home page, then the page is scrolled to div 2 on resultant page and so on.
If you want to scroll the current document to a particular place, the
value of HREF should be the name of the anchor to which to scroll,
preceded by the # sign. If you want to open another document at an
anchor, give the URL for the document, followed by #, followed by the
name of the anchor.
Use a bookmark with the anchor tag:
First
Second
Third
You would just substitute the value after the '#' symbol to the appropriate element IDs.
Reference: http://devedge-temp.mozilla.org/library/manuals/1998/htmlguide/tags7.html
Most if not all new browsers also support the id as an anchor destination
<div id="div1">...</div>
Will respond to ...
as well as the name attribute does
Easiest method is using Fragment Identifier. Whenever you are creating links, attach the id of the element you want to scroll to, on the end of link. For example:
link.html#divToScrollTo
An example usage:
Scroll to div with divToScrollTo as id
After clicking on this link, the browser to first navigate to link.html and then scroll to an element with divToScrollTo Link.
Related
I have some buttons (links) on my webpage which has a link with values in it so it filters the content on the page. The filter part is working fine but I can't get it to focus on the ID.
The current href value is:
website/?type=Appartment&submit2=#
What I want is that it goes directly to the div named houses so it does not keep going to the top.
I tried making the URL like this:
website/#houses?type=Appartment&submit2=#
But the above does not do anything at all.
Summary:
How do I target a div and have the form values in the URL at the same time?
Have you tried website/?type=Appartment&submit2=#houses?
I am doing an application which the user receives a list of items to choose. When the user moves the mouse, a DIV:Hover class works backgrounding the color of the div, and when he clicks at one div to select it, an ONCLICK function marks the clicked div and redirects to a website( _blank ). Perfect, but when you go back to this page, there is two div selected. The div user has clicked and another one. If the user moves the mouse, even if a little, the second div goes backs to normal.
What I want is to go back to the page and only the div clicked is marked.
It only happens on Google Chrome
Jsfiddle ---->
https://jsfiddle.net/u4ssywov/23/
Print Screen -->
http://postimg.org/image/ynr6vjdlh/
Is it possible to solve and not mark a second DIV?
If I do not redirect to a website, it works normally, but I need to redirect. =(
So I have a website that we'll call www.main.com and inside of that I have an iframe with a table and in the cells of that table I want to have a link open in a new window, for example www.next.com.
The problem is that when I add the link to the table cell, it appends the parent to the link so instead of the href being just what I put there (href="www.next.com") the link ends up being "www.main.com/www.next.com" which of course is bogus.
How do I get it to not append the "www.main.com/" and only use what I pass into the href property?
It's not the fact that you're in an iframe, it's that if you want an absolute link you must include the http:// (i.e. href="http://www.next.com")
This problem refers to the main (header) nav menu on THIS PAGE.
When any of the items in the "Services" drop-down submenu is clicked, I want the "Services" page to open (in the existing browser window) AND for a specific anchor tag element on the "Services" page to be in focus. I've achieved this OK. BUT, when the targetted anchor tag is in focus, I want it to also behave just like a manual mouse hover had been performed on its parent div, ie there should be a slide-down of text corresponding to the focussed element.
For a manual demo, go HERE and hover on one of the vertical list items - text will slide down to the right of the list.
HTML for the "Services" submenu link:
<li> collaborative law</li>
HTML for the targetted "a" tag and its parent div (ie "a" tag that should be in focus on "Services" page):
<div id="mylist1"><h3>Collaborative Solutions</h3></div>
Script to drive the hover behaviour of the focussed "a" tag and its parent div:
//fades in desired text after fading out whatever text is already displayed:
$(document).ready(function() {
$('#mylist1').mouseover(function() { //note first list item must be called mylist1 to avoid conflict with other code
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});
//capture click events as well:
/* $('#mylist1').click(function() {
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});*/
//capture focus events on <a> as well:
$('#myTag1').focus(function() {
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});
});
Note the main nav menu has been created using jquery, via a Dreamweaver extension.
What I have so far:
When the "Services" page opens, the correct target is in focus (as shown by the browser address bar). However, this focus is not triggering the expected text slide-down event. When I hit tab, the next list div goes into focus (as expected) & the appropriate text slide down occurs.
Am I hoping for too much? Have I misunderstood the limitations of 'in focus'" Will Mt Hotham have a killer snow season this year ?
Your sage advice is greatly welcomed!
Kirk
I'm not sure your use of "in focus" is quite what I expect... Having a fragment in the url doesn't necessarily give focus to that element, it just moves the display down to it. I assume the reason it works for tabbing is that tabbing does focus on elements and I assume it starts at the element that has been scrolled to.
What I'd suggest is breaking out your display script into a named function (so it can be used from elsewhere) and then on page load you can pull out the fragment from the url (eg #famLaw). Using that fragment you should be able to find the right element on the page and focus it.
It should be noted also that pulling the display text into a separate function has the advantage of consolidating your code - you are basically duplicating the code in the onfocus and onready events so breaking it out makes for easier maintenance and reuse. :)
P.S. I guess yes for Mt Hotham. I'd never heard of it before but I'm going to be optimistic.
For example:
PageA.html
Go to Page 2 Bottom
PageB.html
lots of breaks so that the hyperlink is towards the bottom with lots of vertical scroll.
<br/><br/><br/>...<a name="bottom">bottom of page</a>
When I click the link of PageA, I want it to go to PageB, but end up with the bottom A scrolled into view, but it doesn't. I'm sure it is something very simple.
Add id to your tag next to name.
Page A:
link text
Page B:
<a name="anchor" id="anchor">paragraph</a>
But ive tried your code and my code and they both work which is weird.
PK