Multiple Links /Java/DOM/Cookie? - javascript

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!

Related

Create an anchor without having it displayed in the url

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

Redirect on page reload jQuery

I need create probably an uncommon thing, so I haven't found any guide, and thats why I would like to ask here:
I am creating an interface for a site, which is being created by ajax loading its parts.
My web interface can accept an URL parameter as an input. If there is the parameter, my site changes its behavior (loads the page + content by value of that parameter and show it at specified place).
But, at some point, I have to get rid of the parameter.
Especially, if someone reloads the page, I want to show the cleanly loaded web page, not the content - but the parameter is still there whie pressing F5
So, my code - which is not working, looks simply like that:
//EDIT: Thanks to #charlietfl. I have here an unload event, which figures in ways like "I want to go to another page by url adress bar"
Same problem, jsut need to change it just and only to RELOAD page event.
//we are here: http://example.com/?docId=1
$(window).bind('beforeunload',function(){
//window.location.replace("http://example.com");
window.location.href = "http://example.com";
});
Know two things:
1) $(window).bind works well, with simple alert in it.
2) window.location.replace("http://example.com"); works well too, if fired at some other event, like key press (for my testing)
What I am trying to achieve, is to "skip" the reload by redirecting.
Aaaand one more thing. I know about HTML5 syntax changing the url without reloading the page (change->reload->done), but I can't use it, because of compatibility needed with older browsers.
Well, plase, any tips? Thanks in advance :)

Using javascript to read URL and apply if statement?

I have a javascript portfolio filter on a page that sorts logos by category, it assigns a category anchor link to the URL.
I'd like to use this anchor link URL to trigger an insertion of text. I can trigger the insertion of text via onclick with no problem using:
document.getElementById("insert-text").innerHTML
This works fine, but when you click on category logo & go to new page, I want to be able to hit "back" and still see the same results. The text insert disappears.
I was thinking something along these lines:
Get URL (with anchor)
if URL = certain category anchor
insert text
if URL = other category
insert other text
etc...
I think my logic is correct, but not sure of the syntax? Any suggestions would be greatly appreciated!
What you are asking to do is to save the state of a page so that when you go back to the page your browser returns to where you left off. This is what browsers use cookies for. Cookies are a set of key/value pairs that your browser stores and you can retrieve the values on. You could put a boolean in the cookie that signals whether your function has been triggered, on page load you can read the cookie and if it is set to true retrigger your function.
W3schools.com has a nice writeup on cookies to get you started.
This jsfiddle shows how you can expire the cookie logically.
document.cookie = 'ExpirationCookieTest=1; expires='+exp.toUTCString();

Howto: Check if on Page, if not Redirect and then Scroll

I am trying to get one last thing working:
I have a blog link in the main navigation and when you click it, it scrolls down to the blog. But when I'm on any other page, this logic obviously doesn't work. It should first consequently first go to the root page and then scroll. I've got the opposite thing working here, but haven't quite gotten this task done yet.
Any help?
I am using scrollTo successfully like this:
$(".scroll_to_top").click(function() {$.scrollTo($("body").position().top, 300)});
The blog part however is not yet reacting:
if(window.location.hash === 'blog') {
$.scrollTo($("#blog").position().top, 300);
}
What am I doing wrong?
You could use a basic hash (#) at the end of the URL to automatically scroll the the element with the id specified in the hash (i.e. http://example.com#blog). That would be the simplest solution, with no need for Javascript.
If, however, the element you want to scroll to doesn't have an id that you can use (and you can't modify the HTML so that it does), or you want to animate the scroll rather than just jumping the the element in question, you could still use a hash in the URL and do something like the following:
//URL is http://example.com#blog
if(window.location.hash === 'blog'){
//scroll
}
Finally, if you really hate the idea of putting a hash in the URL for some reason, you could intercept the click on the <a>, create a cookie, redirect to the desired page, and then have that page check for the existence of the cookie.

How do I stop the browser from scrolling to the top when an "#section" link is clicked

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.

Categories