I was wondering if it's possible to change a html page on a mouse drag event. I'm trying to allow a user to click and drag a white box to the left to change the page. The link to the project is here:
URL: http://davidpottrell.co.uk/library/phone/solent.html
As you can see, I'm trying to replicate how a mobile phone works. I've got the transitions close to correct. I'm now trying to create this mouse drag event.
If it is possible, does anyone know a resources or a tutorial as to how to accomplish the end result?
How about HTML5's History API? It allows to to change the current address without reloading the page.
So one way to do that might be to let AJAX fetch the contents of the next page, place it in the current page, then maybe a page slide transition or something, and then use History API to change the address.
Here's an article from Nettuts+ about it: http://net.tutsplus.com/tutorials/html-css-techniques/a-first-look-at-the-history-api/
Related
I am trying to create an effect in an HTML page whereby a link with href='#section1' when clicked, changes the URL in the address bar of the browser AND scrolls to the element #section1 smoothly.
The problem is that, as far as I have been able to test, I could accomplish only one thing. Either I could scroll to #section1 smoothly using the scrollIntoView() method or I could change the address bar of the browser (which happens automatically when a link with href='#section1' is clicked.
Is there any way to accomplish both of these things?
Another thing I have tested is explained as follows:
I prevented the default action of clicking the anchor having href='#section1' using e.preventDefault() method of the click event and then called scrollIntoView() on the element. Then I manually changed the URL on the address bar using location.hash, but doing this last thing nonetheless caused the snappy scroll jump (before the browser could smoothly scroll the element into view) which I don't want.
Is there any solution to this? Or that I have to go with only one thing out of the two?
It's possible to show some message on the page when you set mouse cursor on the browser back button? I don't want to use window.onbeforeunload, because it's irritating. I use ajax and I want to inform users that if they want to go back to the previous page on my web portal they should use a different button.
Is it possible to do it?
Thanks for your help
It is not possible to handle the mouse moving on the browser buttons, these are not part of the DOM that your scripts can handle.
There is an answer available here, which proposes a way of preventing users going back through the browser's back button.
I have searched some things about click on coordinates with javascript and
i have found that this line of code helps you click on x,y coordinates
document.elementFromPoint(x, y).click();
So when i put the width and height of an html element or a button it clicks it good and it redirects me to the page that i want.
But when i have an iframe html object (like a google ad) it doesnt work.
I cant understand why though because i think "click()" is like simulating a normal mouse click... or am I wrong with this?
I have read that iframe has a protection that you cant go inside the html elements but all i'm trying to figure out is how to simulate a normal click on the iframe.
Thanks a lot for your time.
This is obviously prohibited due to security issues.
If it was possible to programmatically trigger a click event within an iframe, you could trigger certain actions on behalf of the user visiting your page. You could for example open your own twitter account in an iframe -- the visitor of your page logged in -- and let the user follow you with a click on the follow button. You can certainly think of more critical examples...
Basically, you could take over all accounts the user is logged in with a cookie. You can open any web page in an iframe and act on behalf of the logged in user by simulating click or keyboard events.
I'm developing a multi-browser extension using the Crossrider framework.
Is there a solution to show an html horizontal menu on the top of each page ?
The menu will embed a JS script which uses some external libraries.
Indeed, I can prepend my html content to the "body" tag but each time the user clicks on a link on the webpage, the whole page is reloaded which makes the horizontal bar disapear and then reappear on the next page when the loading is completed.
I thought of putting the website content into an iframe but some websites (ex: amazon) send a header with the "X-Frame-Options" set to "DENY" or "SAMEORIGIN". This is something which Crossrider cannot modify (at least I didn't find how to do that).
Is there an other way to show a PERMANENT menu on top of each page ?
EDIT :
My toolbar won't contain any link but it will record the mouse position. My problem is that each time the user will click on a website link (ex : to see a product on the amazon website), the toolbar will be reloaded and so the mouse position won't be recorded until the next page has finished its loading.
Page reload is normal behavior when clicking on a link on Amazon sites and hence the toolbar redrawing when the page loads is normal and correct.
Based on the information provided and assuming I have understood what you are trying to acheive, it appears that you are going about this the wrong way. I would first think about why do you need a toolbar at all? For example, if you are only recording the mouse position when a link in the page is clicked, I think it makes more sense to register to mouse click events of the links you are interested in.
I suggest you rethink your approach and take in to consideration the issues you have to handle, such as the page reload and handling the click event before the page reloads.
[Disclosure: I am a Crossrider employee]
I have a little problem with simulating a click with javascript.
I'm aware of the .click() method but the click must be on a prezi loaded (flash) so don't really have a html element to use.
What I have instead are the exactly coordinates of the place I want to simulate click on. Is there any way I can do that?
The click must activate a flash element. (A play button)
Note: There is a similar question around that have an answer witch require swf control. I don't have that so that method is not applicable.
One other quick question... what happens if I simulate a click on an element that has display: none. It click on the elements "under" it? (as a normal click would do; and yes I know this sounds funny but I don't know how to explain it otherwise). If yes I was thinking of making a position absolute div, put it on top of flash and use .click(). The problem is that i have a feeling that the click won't be applied on flash.
This is somehow a combination of javascript simulate mouse click on specific position and mouse click somewhere else on page (not on a specific div).
Make a transparent gif and position it absolute in your page wherever you need, then simulate a click on it.
I use this technique on some flash ads because I don't want to open links using JavaScript (since some users can be prompted with a question if they wan't or not to open a new page on click).