So I have this page which has 3-4 anchors and whenever I click the button to jump to the section I want, the url should remain the same (without adding #anchor).
I googled this but I couldn't find anything that works and I'm still learning JS so I don't have the knowledge to do this.
Not sure what you mean, Perhaps you can edit your question to show us what you have already tried. Anchors are how the browser knows where to scroll to, if you want to achieve the same thing but without changing the anchor in the address bar you can try something like this on click:
elmnt.scrollIntoView();
See also: https://www.w3schools.com/jsref/met_element_scrollintoview.asp
Related
I'm not that into Javascript but I think this could be achieved easily.
I've got a link on my page that sets a parameter (with PHP). That parameter is used to get how much posts to show. This works like a charm.
But now I want to scroll to the postition where the user clicked the link after the page reloads with the parameters. So the users doesn't have to scroll through the posts he already saw.
So here are the steps:
User clicks link to load more posts
Site gets reloaded with parameter (e.g. domain.com/?numberofposts=10)
Now the Site should scroll to the position the users was when he clicked the link
I was trying to achieve that with scrollTo etc but I cant get it working. My thaughts were to pass the scrollposition as an other parameter maybe?
Do someone know how to solve this? Thank you :)
By including an anchor tag within a post or page, you can place links in the body of your post which when clicked allow the reader to jump to another location on the page.
The anchor tag will consist of two HTML elements. First, you'll want to create the link.
If you are linking to a spot on the same page, the format of the link will be similar to:
Link Text
For example, if the text is "Read more about raptors!" then your HTML should look like this:
Read more about raptors!
The above anchor link only works when you are jumping to a specified spot on the same webpage. If you want a link to jump a specific location on a different page, you'll need to replace #anchor with the full URL for the page, similar to:
Link Text
The second part of an anchor tag is the actual anchor. The anchor should be placed at the beginning of the line where you want to start reading after you jump similar to:
<a name="anchor"></a>
Following our previous example, the anchor code will be:
<a name="raptors"></a>
Full tutorial here
You need to know where you have to scroll to.
So yes, you do need to store the scrollposition somewhere (or pass it as a parameter).
I'm trying to figure out a way of clicking an Anchor link TEMPLATES
on the top of my page without having the browser scroll to the point of my anchor.
Sounds redundant huh?
Wait.
My anchor link is inside of a overflow: Hidden text box where clicking the Anchor link
at the top of my page should only raise the anchor in the Overflow text box displaying it's
content, like having a new webpage. From a layout perspective the browser must always be at the top of the page where my form is.
Anyone have a clue?
Thanks
UPDATE:::
Oh spoke to soon, looks like the Css and Javascript - Show and Hide method would be more adequate.
Found here: http://webdesign.about.com/od/dhtml/a/aa101507.htm
Thank internet!
It is very easy do so. What you are trying to do is to have a parent div/view which would act as the main div and all the other divs/views will be loaded or unloaded within it dynamically or so as its children. It would better to employ a design pattern such as "MVC", but it can be done via JQuery straight up. If I was to tackle something like this, I would have a "navigation view" and then content views so when a user clicks on the desired navigation link, that particular view will be loaded or scrolled in. (Of course, you need to experiment and line your depths as desired for the content views).
This is how Flash is programmed. This is a very high level explanation, and I hope it gives you somewhat of an idea about getting it going.
For some reason for the life of me I can't figure this out and posting on the forms is my last results.
I'm trying to create something like this http://powerpetsplus.site88.net/guides/clicker.php
You will see on top I'm trying to get a next button that will go to a new page. The url is something like petid1 and clicking next will go to petid2 and so on.
I was able to do this with a help of a friend: http://o.aolcdn.com/hss/storage/fss/39f0fada5bc1a32482ec7becf9f68fc9/test_next.html
but for it to work we have to click the button then the link on top.
What are we doing wrong?
Hint: instead of assigning url to the link, use window.href = "myurl"; This will load your url in the current window (i.e., forward you to this url).
EDIT: sorry, window.href doesn't work for all browsers, use window.location.href instead!
I'm using a poshytip, it is working fine, until I want to display my tip on the element that is under the current page (I mean that page where I have to scroll down to see it, don't really know how to name it properly). Unfortunately, poshytip has some bugs related to that - if I want to display a tip on the element that is currently lower than the current page position, then tip is showing at the bottom of my page. Havent seen any better tip plugin than this, so I decided to fix it on my own.
The question is - is there a way in jQuery/javascript to check if the element (for example the input with ID) is on the current page that user is viewing? By saying current page I mean the top of the page - my element is placed much lower, so user have to scroll down the page to see it, so is there a way to do something like: if user is scrolling down the page, and the element will be finally visible then send alert to the user?
I know this may be kinda complicated, but couldn't find any better words to describe my problem, I'd answer additional questions, if you have one.
If you want to test for an element's visibility in the viewport, you should reference this post here as it's outlined quite clearly.
On another note, I prefer using the jQuery tools suite for my Tooltip plugin of choice. You can see it here
I have the following link:
Section
Now I really want this link to be working so the url will be changed to
mypage.html#section
But than on the other hand, if I just keep the code as it is, the browser would scroll the page back to the top automatically, and I don't want that to happen.
Obviously return false; will not suffice because it will not change the url.
Any ideas?
(Thanks)
You are attempting to click an anchor that ties to a hash. Which is going to attempt to jump to the the appropriate element with that name. If it does not find that name it will just end up at the top. This is normal behavior.
It seems like you want to change that, from which I recommend not using and anchor and adding the #section hash via JavaScript:
Section
That should give you your desired result.