I have a website that has a search box and some options. On the mobile page, this search box and options are visible first, which is really good on the start page. But when user searches something, the result is shown in a page having again the search box and options on top.
I would like to write a piece of code, that automatically jumps to content start. Simply, I have created an anchor using: <a name="contentstart"> just before the content. When the user opens this page, it should automatically jump to contentstart without having to press any link/button. How can I achieve that.
simply give an id to your a tag,
and use following javascript function :
function jump(id){
var top = document.getElementById(id).offsetTop; //Getting Y of target element
window.scrollTo(0, top); //Go there.
}
and in onload of body tag, call the function by passing the id of the anchor tag
You can simple use id and hash in url.
// some html
<div id="contentstart"></div>
// content
After that if you sufix your url with #contentstart you jump right to constentstart div.
http://webpage.com/something#contentstart
Related
I am currently working on this responsive gallery content and it is working the way I wanted it to. However, I needed to have one of the contents have a content change upon clicking a certain selection This is the working code of the content change. I added it on the main responsive gallery content after checking that it works ok on a separate file.
Is it due to my placing of the content changing script? I tried placing it inside the main script below but it didn't work. I tried creating its own script tag and placed it at the end but same result. Right now, I tried adding it inside the head tag and it still won't work. Can somebody please help me T^T
Kindly click the atkinsons menu since that is where I inserted the content change
Here is the script tag i'm referring to who is responsible for selecting the appropriate pages to change the content.
<!--Content Change Script-->
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr("data-id"); // Using a custom attribute.
$("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
$(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
});
});
</script>
PROBLEM Under the Atkinsons page, the content is not changing whenever i click the selection. under the first link, the outcome should look like this The title and Page should change whenever I click on the selection.
THE CHANGES I already applied the code advise from the 1st answer below. it is now changing the title upon clicking the selection, but not all section is clickable. I applied the same changes in both codepen and localhost but it produces different clickable links that doesn't work. The random letter not working depends on the size of the window. Also the paragraph is not showing
Your script is not working because your <a> is not in page when you are trying to bind events to them.
You need to do delegate which is something like this.
<script type="text/javascript">
$(document).ready(function() {
$(document).on("click", "a", function() {
var id = $(this).attr("data-id"); // Using a custom attribute.
$("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
$(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
});
});
</script>
This will bind event to document, which is in page from start.
More on jQuery api here.
I am having trouble making this work.
I want to use javascript to change to a sub url and then go to a specific section id as well.
This is what I'm using:
Javascript:
'click .acq-click'(event) {
location.href = '/products#acquisition';
}
HTML:
<section id="acquisition">
some html
</section>
However, when I click the button, it takes me to the sub url with this hash, but it won't move to that section id. It loads at the top of the page.
What can I do to make this work?
What you need is an anchor and a link to it:
Place this somewhere where you want to go to:
<a name="anchor"></a>
Then you can link to this position like this:
Go to Anchor
I have two Divs with skip hrefs upon clicking the first href skip it should automatically scroll down to the next div.
I have tried like this
<div class="skip">skip</div>
function move_down() {
window.scrollBy(0, 50);
}
What's wrong with using an anchor link, or in HTML5 terms, a fragment. No JS required (although JS could insert the correct link/fragment if that's needed dynamically).
See
HTML Anchors with 'name' or 'id'?
Is there a standard way for making all the links in a site, with the form href=#something, become 'go-to' links? (does this kind of links have a name?)
Let me describe these links further: When you click them, #something is added to the url. And if you go directly to that url from your browser, it takes you to that page, and then it scrolls down to that link.
Take this link as example: http://en.wikipedia.org/wiki/Universe#cite_note-Craig-45
Edit: As you can see, the div gets highlighted. How to make that happen automatically?
You're referring to anchor tags. Here's an example of a JavaScript-less internal link:
Go to my div!
<div id="myDiv">
This is content
</div>
If you want to send someone to myDiv using JavaScript, then you could do it this way:
<span onclick="window.location.hash = '#myDiv'">Go to my div!</span>
<div id="myDiv">
This is content
</div>
Here's a jsFiddle that demonstrates both the HTML and JavaScript methods.
You can also use a similar method to allow the use to navigate to page and then scroll them to the appropriate element on the page. Simply add the hash (#) plus the ID of the element to the URL. For example:
Go to my page and then div!
Or, with JavaScript
Go to my page and then div!
Use the id attribute of the a tag. Place the following at the location you would like to link to:
<a id="example"></a>
You can then link to that using:
Go to example
If you want to link to a specific anchor on a different page, simply use the # character after the URL:
Go to different page example
Here's an example.
The thing after the # is called an anchor, and is defined using the a-tag: <a id="something">.
If you just have #something as a link, like <a href="#something">, it will resolve relatively to the current page. So if your page is at http://myurl/mypage.html then it will open http://myurl/mypage.html#something.
I'm building a simple glossary widget as part of a larger project for a client. The content of the glossary is enclosed within a scrollable div (overflow:auto). Each letter has an anchor tag associated with it (#a, #b, #c, etc). Above the scrollable div is a div which contains every letter of the alphabet. Clicking on one of these letters takes the user down to that letter's definitions in the scrollable div. This works, but an unintended side effect is that the entire window jumps down to the anchor, which is confusing and annoying to the user.
Here is the widget, stripped down a bit and with a bunch of <br />'s to let you see what I mean.
http://www.nitrohandsome.com/clients/topics/glossary-widget/
I had tried a few different javascript ideas I cobbled together from some Googling, but nothing was working, so i just got rid of everything but the actual go to anchor code (I'm a pretty big JS newbie). So right now, clicking on any of the letters executes this javascript function, with the anchor tag passed to it:
function jumpToAnchor(myAnchor) {
window.location = String(window.location).replace(/\#.*$/, "") + myAnchor;
}
How can I pull this off so the overall window doesn't jump each time a link is clicked?
Thanks in advance!
If you're using jQuery, you can try the scrollTo plugin. Also, to edit just the hash portion or the URL, you can just do
function jumpToAnchor(myAnchor) {
window.location.hash = myAnchor;
}
Try to use IFrame instead of Div or create a specific function using ScrollBy.