I don't know how to explain my question in the title... :D
I made a photo gallery and want to make the images, info, etc to be shown in an overlay. Everything works nice, but I would like the URL to be changed to the image page URL. As example I could name the galleries of Pinterest.
Thx for your help or any ideas how I could go on searching!
I'd suggest looking into the HTML5 History API and pushState() more specifically. I can't write an implementation here, but that's the basic answer to your question – the History API will let you change the URL without reloading the page. The real challenge you'll run into is how to handle history navigation from there (using JS to attach a listener for navigation) and to receive a URL for the gallery as generated by JS and show the right image within it.
Related
I really need a good help I am looking for and nothing.
I am doing a project with music in the browser and / or in an application, that is, I need to work with html / php / js / css, if I do it on a website I easily step into an application, I assume, with react for example, with a load window.
that is, I wanted a framework, or anything else that was possible, to have a menu always active, and when clicking on the menus, change the content of the page in the middle, which continues with the menu without being changed, the music playing and changing up url.
such as spotify, it has a menu at the bottom and side that never changes but the middle content changes and the url too
I'm not finding any way to do this well ... if someone managed to help me, I would be very grateful
Reactrouter might be what u are looking for. It is good library for react apps that need to switch between different views depending on URL. They have good documentation on their website and I recommend that you look them up.
I know almost nothing about html, but I would like to make a static html page with links to many streaming video sites. And when the user clicks the link, he/she is redirected to the site but when the mouse is moved a link would appear at the top of the streaming video site allowing the user to navigate back to the original html page. Can someone point me to a tutorial that explains how to do this?
You would be better off displaying the streaming site inside of an iframe and not navigating away from your page. You can then use styling to display the iframe and the rest of your links however you want.
Would like to see some code for an attempt at this but I highly recommend you look into anchors for HTML and also understand the difference between relative and absolute paths. Guide for it is here
Example of a anchor in action:
//path to the url of google.
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 am making a simple online application.
I have a navigation bar with a few buttons and one "div" into which all the new contents will be loaded dynamically i.e. when I click "About", it will load the page parts into the "div" without reloading the whole page with .load() function. The problem is:
what if I need to give a link to the Documents section of my web site, or the user wants to store this kind of link, the url is not rewritten when browsing my site. when the user stores the default link it will always link him to the default "Home" part.
How can I rewrite the URL and what is the most correct way to do this?
As option you can use location.hash.
E.g. user clicks About
and you're loading the content of your "About" page.
Also the URL in browser's address bar will be changed to something like http://mysite.com/hello.jsp#about.
So now user can copy this URL and visit it.
Then in $(document).ready() you can check the location.hash, find that '#about' anchor in it and then load an appropriate content.
Another option is to use Backbone.js or any other JavaScript MVC framework that you like which will help you to build rich client-side application and will handle such things for you.
According to me, appropriate method is to update the hash of the URL. Something like example.com/#About and etc. People can bookmark these. You have to take care to make a AJAX call when you read a hash tag in the URL and load the respective page.
What I would do is make ajax call on hashchange event instead of click. This event is supported from IE8 to all modern browsers. If you want to support IE7 use the hashchange plugin by Ben Alman.
I have been trying to solve this problem for a while now and have looked on numerous forums to find a solution. Here is my setup. Any help would be greatly appreciated!
I currently have a index page that loads a JavaScript header and footer above and below my "content" section. I also have a list of navigation links inside of the header. My music player is located in the footer. It does not load automatically (for those that are bothered by that), and i don't want it to reload every time someone clicks on one of the navigation links on the side. I don't want to use frames for this; I have read that frames will allow me to only refresh the "content" section of my page, but that when indexing a site, most search engines will not work well with a site that has frames. I also do not want to use a pop-up for my music as most browsers and users have pop-ups blocked.
Basically i am looking for a code or something that will allow for a header and footer (doesn't have to be a JS header and footer) to not refresh when someone clicks on the navigation links located in my header. Thanks again to anyone that has a solution to this problem.
Do it like Facebook - use JavaScript to intercept link navigation, load the content using XMLHttpResponse, and then update the portions of the page that need to change.
This keeps the static integrity of the page for search engines, allows most of the site to still work just fine for users with scripting disabled, and avoids resetting the music for everyone else.
What Shog9 said, but also make sure to change location.hash whenever you change the content and make it so that visiting the website with that hash will redirect you to the correct page.
Here's another example of a band that uses the AJAX method to reload the page content, while keeping the player going...
http://jonandroy.ca/
The URL hashtag gets updates each time you click on something, and if you copy that URL, when you visit it, you'll see the homepage load for a split second, and then it loads the content of the page specified by the hashtag. Not perfect, but an overall good solution to this age-old problem.
You might want to look at how thesixtyone.com works. They have non-interrupted music by using AJAX to rebuild the page when a link is clicked rather than load a new one. This is achieved by having all links be anchors for the current page (i.e. all links are relative and start with a hash character).