I am out of my own "ideas" going through this.
I have a album viewer. When you click next I want the adressbar to hang with it, e.g if you start on ?photoid=1, and click next (next picture appends and stuff), and then i want it to say ?photoid=2.
Now I cant make it say ?photoid=2 without changing/manipulating, and this you cant do without HTML5.
I have made a script in HTML5 that works fine, but then I need to take care of those who dont have HTML5(only chrome, ff4 etc supports html5)
Made the script from this( https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history )
I thought of adding #photoid=2 so, ?photoid=1#photoid=2 and then check if theres anything in # then use that instead of the $_GET.. But apparently you cannot do that as # is client side handled and never sent to the server.
So what should I then do?
Any suggestions please to make a workaround this? I checked facebook, what they did to IE users, and I could hear that it "clicked" (the annoying click sound from IE) twice.. the first was to get to the next picture, the second click sound changed the adressbar?!(how?).
And then I also thought hey, html5 is only supported in ff4, and I got ff3.6, and they manipulate the adress bar url when you browse through the album photos, exactly like how I wanted (and what I have written for but it only works in Chrome and ff4..?). How could they do that?
The hash is the only way to change out the url bar without automatically refreshing the page you're on. That's why it's an anchor tag (the hash) historically. Everything else tells your browser to go to a different page. If you don't want it to forward, throw in a hash and then read that hash with javascript and do what you want that way. It's easy with jQuery, or you could dig into Asual's swf address js library or jQuery's Hash Tag Change Listener plugin if you want to use your browsers back/forward button to go through your history states.
I'm not quite sure if understood your quite right, but here's what I came up with for a similar problem.
Why don't you just set the url by editing the location.hash just like you said to make it look something like this: www.mydomain.com/photos/#photoid=2.
Now when somebody calls this url the browser will try to load www.mydomain.com/photos/ and will get the necessary markup but not the photo and what you can do now is read the location.hash (which will return photoid=2) and load the picture via AJAX by sending a request to the server with a path like "www.mydomain.com/photos/" + location.hash
Related
I have this slider, I created a panel so you can upload there the images and modify the order of display, but you can upload the image to the server and the changes do not appear unless you clear cache-
the problem is that the webpage requires live updates, for example if the user deletes an image from the gallery I'm making it refresh but the image is still there (but not in the server or database) so its kind of frustating having to delete the cache, I'm even by jquery making a location.refresh(true) but it doesnt work, I have to f5 two or 3 times to make it dissapear/appear (the image)
You can use AJAX for this.
Have a look at this thread, it might help you. Have a nice day :)
Using AJAX / jQuery to refresh an image
You can change the url to trick the browser.
For example instead of having a url like this :
https://mydomain/myimage.png
you can add a parameter so that the browser see a new url.
https://mydomain/myimage.png?v0.0.1
In this example i used a version tag, and you can change it manual on demand (so that you do keep using cache but in your way). When you change that parameter, the browser will see a new url, so it will load the image again.
You can also use a timestamp instead of a version tag.
Edit (some more info)
Adding the time on the url will "force" the browser to get the image every time.
Example
https://mydomain/myimage.png?date=2017-04-28_10-06-00
Also, in the developing state, you can use on your browser ctrl+F5 to clear the page's cache and reload the page.
Cache is something helpful and you should try to use it, so disabling it completely is not a good solution.
Some relative answers including php solutions can be found here :
PHP force refresh image
So I have an iFrame which I am using to load the other pages for my website. To make the website seem like it has no load time and very smooth I have made a main page, with an iFrame in the middle to load the actual pages of the website that contain all the information. I have buttons using JS to change the SRC of the iFrame so that it acts like a normal nav bar.
I am curious to know if it is possible to make the URL on the browser, the same as the URL in the iFrame. Because right now when a user is on the website, they aren't switching to different pages, meaning they can't go back or forward in history because they never left the page in the first place. This can be troubling to most users if they want to link their friends to something, or just go back a bit.
Is there a way to do this in jQuery or JavaScript? Or even better, purely in HTML or CSS?
Thanks in advance.
EDIT: After googling a bit of what charlietfl has said, I am now wondering if it is possible to save a website into states, which I can then give web URLs to? I just skimmed through a few pages without reading them thoroughly so I'm not exactly sure what it was talking about when it mentioned states, but maybe there is something else out there that is capable?
You can try url hash like the gmail uses #inbox . It has the same functionality as you wish. It serves you the browser back and forward actions. You have to add more Javascript to handle those hashes. But i am not sure about its effect on seo (if you are only concerning about it).
For more details please go through these links
Gmail like URL scheme
Browser History Manager
I'm updating a very old web app (webforms) that only works properly in IE 6-9. It was not originally written by me. Also, I'm not an expert at web development, so the solution to this might be very simple.
One issue is extensive use of window.showModalDialog, which is an IE specific call that opens a new browser window that disables the browser window that opened it, like a popup message. This has been replaced with a jquery modal dialog, however there's sometimes an issue with the 'url' that gets passed to it.
Here's a simplified reproduction of the issue. There's a javascript function that takes a url and an id.
function openEdit(url, id) { ...
This function existed in the original version, except it had code to open a modal popup window. I replaced it with the necessary jquery. However, the url value that gets passed in sometimes doesn't have enough information. Also, assume I have no control over the value that gets passed here.
Let's say the main page is at localhost/TestSite/Main.aspx. There are a number of frames within this page which display other pages, like localhost/TestSite/Products/ProductList.aspx - clicking an item on this page might open a window to localhost/TestSite/Products/ProductDetails.aspx. There are hundreds of pages that follow this general format.
Sometimes the url has a value of '/TestSite/Products/ProductDetails.aspx'. The jquery dialog correctly navigates to localhost/TestSite/Products/ProductDetails.aspx
However, other pages just pass in the name of the page, 'ProductDetails.aspx', which jquery tries to find at localhost/TestSite/ProductDetails.aspx. This works on IE using window.showModalDialog and the browser is able to get the expected directory of 'Product' because it's the same directory the open window call was made from. Jquery doesn't seem make this leap.
Now, I have a possible solution using window.location to get the current url, parse it a bit, and generate a valid url. I'm worried about what fringe cases this may create, though, and it also seemed like the improper way to do it.
Is there a way to have jquery open a dialog using the corrent directory, or is there a way to generate a current directory to use that doesn't involve window.location? Or is that my best choice.
How do IHeartRadio and 8Tracks keep the music playing without pause even when you go to a different url without any Pause?
My initial thought was that they would use something like Ajax to load content - but the fact that the browser favicon reloads makes me think it may be something else.
There are questions like this one that ask how is it possible to do so at all - but my question is how do established sites like IHeartRadio.com and 8Tracks.com do this?
If this question is not within StackOverflows scope, please let me know and I will remove it.
They are using ajax obviously.
8Tracks
Screen shot shows a browser loading 8Tracks's About us page. See initiator column (red mark) which is a javascript/xhr which means ajax.
To trigger the default browser is loading event: See:
How to have AJAX trigger the browser's loading indicator
What I have is a MVC framework that I am manipulating the DOM via JavaScript and jQuery. Which to a point is a mute reference to this question. Through the MVC if I go to
domain.com/page/
I land on a default page with recent info, updates, etc. However through the MVC if I go to something like
domain.com/page/ref1/ref2/ref3
We can handle that on the backend to do what we want. When its gone to directly. So the thought here for this question is, can I mimic the behavior cross browser up to at least up to IE 6/7+, Firefox 3.x+, Chrome. And by mimic I mean manipulate the URL/URI like I would the DOM itself. This way when someone comes along and navigates to sections via the methods we manipulate the DOM and find something they want to share all they have to do is go up to the browsers URL bar, and then copy and paste it to a message.
What would be even nicer is a method that can work with the back and forth history buttons on browsers as well. All without having to reload/refresh the page.
have you tried
window.location.replace(URL)
This function doesn't load any pages.If you change your current location like this , when you redirect to somewhere , your last address will be the non-modified address.It doesnt write new URL to the browser history.So it would be like as if you just give the key to what the user wants to share.
Have you considered modifying the anchors in the URL? While on this page:
http://www.google.com/
Changing the URL to this:
http://www.google.com/#foo
... won't trigger a page refresh. So you could use (read/modify) the contents of the URL after the anchor all you want and the page won't get reloaded. Should be able to build on that idea.