I've made a nice page with links that scroll the window to a specific section. I really like this feature, but it creates an annoyance if you click the links too many times - the back button is clogged with all of the hashtag changes. I was wondering if it's possible to scroll the page without creating a url for the browser 'back' button to hook on to.
Afaik if you just use $("#id").scrollTo(); it does not cause url changes.
Assuming you are using the scrollTo plugin....
Related
Is there a way to change where "previous" button in browser goes?
The problem is the following:
User enters page
User clicks thumbnail image
Large image appears in popup window (lightbox) and URL CHANGES from http://example.com/ to http://example.com/this-image-link/
I click "Previous" button in browser and URL CHANGES from http://example.com/this-image-link/ to http://example.com/ but POPUP doesn't disappear (and page doesn't refresh).
How would I make it go back to http://example.com/ and close my popup after clicking "Back" in browser?
I suggest you do some reading on manipulating the browser's history. Those links will certainly give you a good intro:
History API
MDN Manipulating the Browser History
This JS Library should also help you, if you want to overcome cross-browser limitations and evade JQuery, as suggested above.
History.js
Try using the jQuery Hashchange plugin. Registers the hash change event for all browsers.
http://benalman.com/projects/jquery-hashchange-plugin/
Is there any way to use an anchor as a bookmark without actually moving the page. The bookmarking is handled through JavaScript.
What I want is to keep the '#bookmark-id' in the url but I don't want the page to automatically scroll to the object.
I've tried
e.preventDefault();
This works in stopping the page scroll but it does not preserve the the anchor in the url.
I've also tried
return false;
This works the same as preventDefault()
Is this behavior even possible?
Is it possible to capture the right click open in new window/tab or mouse wheel open in new window/tab event using jQuery?
UPDATE 1
Here is why I need it. I have codeigniter application which uses pagination class. I use this class to display a grid. The pagination links have been bind with a method that uses AJAX to load the next page in a container div. Now some one can right click and open the next page in new tab/window which I don't want. IMHO, the only way to handle this is to some how trap the (right click or mouse wheel button click) open in new window/tab event.
UPDATE 2
I just realised all my AJAX requests are being served by one CI controller which actually acts as a proxy to other classes/libs. In this controller I can look at the request and if it isn't an AJAX request I can redirect the user to another page.
A workaround solution is to replace all applicable <a> elements with buttons, where (obviously) the buttons would call JavaScript that does the appropriate navigation.
If you're really keen you can apply CSS to make the buttons look like <a> elements, though I don't recommend it because it confuses users who might try to treat them as standard links and right- or middle-click them.
(You could even get it to work for users that don't have JavaScript enabled by, e.g., making each button a submit button in its own little form.)
At the very least you can catch a right-click, using .mousedown() (or, presumably, mouseup()). See this StackOverflow answer about right clicks for more. And by catching it, you should be able to do a standard event.preventDefault() and then do as you like from there. That may be overkill, however, as it could prevent the user from doing other things you want to allow them to do.
I almost fixed a similar issue now for a page which I am working on. My fix was to do some changes in the page if that has been opened in a new window....
Assume that you open a page "B" from page "A" in a new window.
If you want to check the page "B" is opened in a new window from page "A", then follow the below steps..
If (document.referrer == "A" && window.history.length > 1) {
alert("I am page 'B' and opened from page 'A' in a new window");
}
If you don't want people to access link the usual way or fallback when the JS is disabled, then it shouldn't be a link. Just use any element you like (span, div, button, whatever you like) and style it like a link. Then bind the action using JS. Or you can use a link with href="#" or href="javascript: void(0)". That way if users right click it and choose to open in a new window, then they will end up in the same page they were before.
Is it possible without the help of a plugin to make a page scroll to a certain position on the click of a button?
Basically, if the user clicks a button a popup gets displayed in the center of the screen, if the user uses the button at the bottom of the page, the popup is sometimes out of view so I am wanting to couple the showing of the popup and scolling to the top of the popup on the clickup.
Is this possible?
Thanks
Using the CSS
position : fixed
is the best bet for your problem.
In case if you would like to know the way to scroll the page to certain position using jQuery then here it is.
Use jQuery's scrollTop() function in the following way.
jQuery(window).scrollTop(<position>);
Using jQuery to handle scrolling will also resolve any browser incompatibility.
You can get that effect with the scrollIntoView method. But it's probably better to centre your popup on the window rather than the document to avoid the problem in the first place ...
Sometimes lean and mean works nicely. No Plugins, No JQuery:
window.scrollTo()
Watch out for cross browser incompatibilities that might creep in. That's the point of JQuery ;)
I want to implement a similar functionality like Template Monster's menu. I am trying to create a feature list which slides down when the user clicks on the feature. But if the link is at the bottom of the page and the user clicks on that link, the feature list is shown below the view area and the user doesn't know that it is open until he manually scrolls the browser window down.
I want to incorporate a functionality that if the feature list is not in the viewable area, the browser window automatically scrolls down to show the full list (templatemonster.com has done so with their drop down menus).
Can anybody help me?
Thanks,
Gaurav
The website which you reference is using the Prototype JavaScript framework with Scriptaculous for it's visual effects. These libraries make this sort of task much easier as there are built in controls to achieve, more or less, exactly what you want.
If you want something to slide down when a user clicks on it; you should be thinking about the event click and effect slide down Check out the demo in the manual for this.
The second aspect of scrolling can be achieved using these libraries too. Again, checkout the demo in the manual for this too. Essentially, you need to use an anchor tag to mark the point on the page where the feature exists, and then use the scrollto effect to take you to that poision on the page.
Hope this sets you on the right path.