i have code like this in a page called list.php when i click a link the video in the iframe was change into the video i selected but in the address bar its still list.php how can i make the url be list.php/Anohana10? or something like that?
<script>
$(document).ready(function(){
$("ul#videos li a").click(function(e) {
e.preventDefault();
$("#video").attr("src", $(this).attr("href"));
})
});
</script>
<div class="videoWrapper">
<IFRAME id="video" SRC="http://upload4free.co/embed-trdcgvsgf0tj-500x300.html" FRAMEBORDER=0
webkitAllowFullScreen ></IFRAME>
</div>
<ul id="videos">
<li><a id="Anohana10" href="http://upload4free.co/embed-ndi71khpdvbf-580x300.html">Anohana Episode 10</a></li>
<li><a id="Anohana9" href="http://upload4free.co/embed-flm2y2648udr-580x300.html">Anohana Episode 9</a></li>
You could, instead of intercepting the <a>
's default behaviour of redirecting the page, let it anchor the information, like <a id="Anohana10" href="#Anohana10">
, then your page's url would look like: list.php#Anohana10
.
The iframe's link information, you can store on another custom attribute (let's say data-url
), and retrieve it with your jquery function:
<script>
$(document).ready(function(){
$("ul#videos li a").click(function(e) {
$("#video").attr("src", $(this).attr("data-url"));
})
});
</script>
<div class="videoWrapper">
<IFRAME id="video" SRC="http://upload4free.co/embed-trdcgvsgf0tj-500x300.html" FRAMEBORDER=0
webkitAllowFullScreen ></IFRAME>
</div>
<ul id="videos">
<li><a id="Anohana10" href="#Anohana10" data-url="http://upload4free.co/embed-ndi71khpdvbf-580x300.html">Anohana Episode 10</a></li>
<li><a id="Anohana9" href="#Anohana9" data-url="http://upload4free.co/embed-flm2y2648udr-580x300.html">Anohana Episode 9</a></li>
EDIT
To get the anchor from the URL when typing it directly, add this to the ready
jquery method:
$(document).ready(function(){
var identifier = window.location.hash;
if(identifier != "")
$(identifier).click();
$("ul#videos li a").click(function(e) {
...
});
This will get the #id
from the url, and perform the click of the corresponding <a>
tag, loading the video...