I am trying to make it so when I click the 'next' button it will increment the variable videoCounter and then reload the iframe so it plays the next video in the array.
Currently it just seems to reload the whole page and do nothing?
<script>
var videoCounter = 0;
var videoArray = new Array();
videoArray[0] = "//www.youtube.com/embed/nEBHkEeH42Y";
videoArray[1] = "//www.youtube.com/embed/1GlticqrECU",
videoArray[2] = "//www.youtube.com/embed/BMOUsI8JIaI";
function Increment() {
videoCounter++;
ReloadIFrame();
}
function ReloadIFrame() {
SetCurrentVideo();
document.getElementById('iframe').contentDocument.location.reload(true);
}
function SetCurrentVideo() {
document.getElementById("iframe").src = videoArray[videoCounter];
}
</script>
<iframe id="iframe" width="520" height="280" src="SetCurrentVideo();"
frameborder="0" allowfullscreen></iframe>
<ul class="pager">
<li class="previous disabled" id="videoOlder">← Older
</li>
<li id="videoTitle">Title here</li>
<li class="next" id="videoNewer" onclick="Increment();"> Newer →
</li>
</ul>
Currently, the page reloads because clicking on the a tag causes the browser to send the user to the destination of the link - because you haven't put a URL in the href of this link, the destination is the current page.
Each time the page loads, the value of videoCounter is reinitialised to 0; it appears to reload and do nothing because it's always loading the first video again.
To prevent the default behaviour of an anchor (a tag) you need to return false; from the handler:
function Increment() {
videoCounter++;
ReloadIFrame();
return false;
}
Update; you also have a syntax error on the second line (a comma instead of a semi-colon), which may be preventing the rest of your code from being defined.
Here's a full working example for you:
http://jsfiddle.net/UqXVf/1/
Related
So I have something like this in my html:
<a id="one" href="/index.html"> HOME </a>
<a id="two" href="/something.html"> SOMETHING </a>
<a id="three" href="/again.html"> AGAIN </a>
and if for example user is on page linked "..../index.html" and tries to click on "HOME" link button, it does nothing or fake redirects or its disabled to be clickable, same goes for other href buttons if the user is already on the page the buttons are redirecting to, and user tries to click on them, I have been looking everywhere but all solutions for this problem requires you to use JQuery, and I would like to not use libraries as much as possible, any solutions?
For simplicity, add a class to all menu links in which you want this behavior
<a class="locationLink" id="one" href="/index.html"> HOME </a>
<a class="locationLink" id="two" href="/something.html"> SOMETHING </a>
<a class="locationLink" id="three" href="/again.html"> AGAIN </a>
And check this:
var links = document.getElementsByClassName("locationLink");
for (var i = 0; i < links.length; i++) {
var link = links[i];
if (link.classList.contains('locationLink') && location.href == link.href) {
link.addEventListener("click", function (event) {
event.preventDefault();
});
break;
}
}
Basically, you get all links and check only your locationLinks. If the current url is equals to the href, you add an event listener that blocks the navigation. Maybe you need some debugging in the "location.href == link.href" because relative/absolute urls (you can refer to https://stackoverflow.com/a/44547904/18452174) but it's working.
If your menu can change dynamically, you can try this other approach:
document.addEventListener("click", function (event) {
var link = event.target;
if (link.classList.contains('locationLink') && location.href == link.href) {
link.addEventListener("click", function (event) {
event.preventDefault();
});
}
}, false);
You do the same but check the condition in each document click instead only one time in document load.
I used to be able to get this to work where I press the link of the song, and it will jump to the time of the embedded Vimeo video in my site(Wordpress). The codes are as below:
HTML
<div class="wpb_video_widget wpb_content_element vc_clearfix vc_video-aspect-ratio-169 vc_video-el-width-100 vc_video-align-center">
<iframe id="player_1" src="https://player.vimeo.com/video/xxxxxxx?dnt=1&app_id=122963?api=1&player_id=player_1" width="1080" height="720" frameborder="0" allow="autoplay; fullscreen" allowfullscreen=""></iframe>
</div>
<div class="links">
<a class="link_1" href="javascript:void(0);" target="_self">Track 1 “Song Name”</a><br/>
<a class="link_2" href="javascript:void(0);" target="_self">Track 2 "Name of song"</a><br/>
JS Script
<script type="text/javascript">
// Set lesson times (in seconds)
var link_1_track = 000;
var link_2_track = 323;
// Function to hide all status messages
hidePlayNoticeAll = function() {
jQuery(".link_1_status").html("");
jQuery(".link_2_status").html("");
// Load Vimeo API for the embedded video
var iframe_player = jQuery('#player_1')[0];
var player_1 = $f(iframe_player);
// Function to control what happens when each lesson link is clicked
function setupLinks() {
jQuery(".link_1").click(function () {
player_1.api('play'); //Play the video
player_1.api('seekTo', link_1_track); //Seek to the number of seconds in the variable link_1_track
hidePlayNoticeAll(); // Hide all status messages before displaying (to prevent them from sticking)
jQuery(".link_1_status").html(playNotice); //Display status message (playNotice) within span with class link_1_status
});
jQuery(".link_2").click(function () {
player_1.api('play');
player_1.api('seekTo', link_2_track);
hidePlayNoticeAll();
jQuery(".link_2_status").html(playNotice);
});
}
setupLinks();
</script>
Is there anything wrong with the code? Or do I need an API from vimeo or jquery? I cant remember what I did to make it work before. Thank you in advance.
I have found the API that I needed to get this working. So I will be closing my own question haha.
The script made it worked like a charm, in case anyone wants to use the code, this is the script below. Cheers.
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
I am trying to build a sidebar navigation, which uses AJAX to load content inside a div.
So far it is working great, it is just that i noticed, that everytime i click onto the buttons to navigate to a different site on my page, the site content seems to be loaded on top of the current content.
I have got this hypothesis, because on every site load my site sends one request to a server, to get data from there.
Now if i already visited the site on my page, that sends this request, navigate to a different site on my page and navigate back to the first site, this site sends two requests to the server.
If i am repeating those steps, it just adds up and the request gets sent 3,4,5..times
This is the Code of my navigation bar:
<div id="sidedrawer" class="mui--no-user-select">
<div class="mui-divider"></div>
<ul>
<li onClick="remote();" href="./#remote">
<strong>Remote</strong>
</li>
<li onClick="groups();" href="./#groups">
<strong>Groups</strong>
</li>
<li onClick="devices();" href="./#devices">
<strong>Devices</strong>
</li>
<li onClick="users();" href="./#users">
<strong>Users</strong>
</li>
<li onClick="programs();" href="./#programs">
<strong>Programs</strong>
</li>
<li onClick="settings();" href="./#settings">
<strong>Settings</strong>
</li>
</ul>
</div>
The functions remote()/groups()/devices() look about the same:
function remote() {
showSubPage("Remote", "./remote.php");
}
showSubpage() looks like this:
function showSubPage(title, page){
changeTabName(title);
$.ajax({
url: page,
type: "GET",
cache: false,
success:function(data){
var $main = $('#main');
$main.html('');
$main.html(data);
}
});
}
Main is just a normal div:
<div id="main"></div>
Does anyone have an idea why my page does not get called just once everytime i click the links?
Edit:
When i am looking into the source code of my page, the content is only listed once.
Edit2: I figured that the problem does not come from the ajax itself.
This is the PHP-code that i am using to generate my page.
function addGroup($groupId, $groupname, $devicearr)
{
echo('<div class="group">
<h3>'.$groupname);
echo('<div class="verticalcenter"><div class="toggle-button toggle-button-selected " id="groupButton'.$groupId.'"><button></button></div></div>');
echo(' </h3>
<div>
<table class="devicetable">
');
foreach ($devicearr as &$device) {
echo('<tr>
<td>'.$device['name'].'</td>');
if($device['status'] == 1){
echo('<td class="togglecolumn"><div class="verticalcenter" ><div class="toggle-button toggle-button-selected group'.$groupId.' device'.$device['id'].'" id="group'.$groupId.'device'.$device['id'].'" ><button></button></div></div></td></tr>');
} else {
echo('<td class="togglecolumn"><div class="verticalcenter"><div class="toggle-button group'.$groupId.' device'.$device['id'].'" id="group'.$groupId.'device'.$device['id'].'"><button></button></div></div></td></tr>');
}
echo ('<script>
$(document).on("click","#group'.$groupId.'device'.$device['id'].'", function() {
if($("#group'.$groupId.'device'.$device['id'].'").hasClass("toggle-button-selected")){
$(".device'.$device['id'].'").removeClass("toggle-button-selected");
var frame = document.createElement("iframe");
frame.src = "http://localhost/callMethod";
frame.style.left = "-9999px";
frame.style.display = "none";
frame.onload = function() {
this.parentNode.removeChild(this);
};
document.body.appendChild(frame);
}
else{
$(".device'.$device['id'].'").addClass("toggle-button-selected");
var frame = document.createElement("iframe");
frame.src = "http://localhost/callMethod";
frame.style.left = "-9999px";
frame.style.display = "none";
frame.onload = function() {
this.parentNode.removeChild(this);
};
document.body.appendChild(frame);
}
});
</script>');
}
echo('
</table>
</div>
</div>');
}
My code creates a button for each "device" that is in the "devicearr". But when my page got called twice and i click the button once, it registers two click events.
Instead of:
$(document).on("click","#group'.$groupId.'device'.$device['id'].'", function() {
});
I used:
$("#group'.$groupId.'device'.$device['id'].'").click( function() {
});
so that the Click-Event does not stay alive after reloading the ajax content.
Additionally (not necessarily needed), i also unbind the click-event, before i register the click-event with:
$("#group'.$groupId.'device'.$device['id'].'").off("click");
Thanks to Barmar for the hint.
I found 'one click triggers 2' but it doesn't seem to be what I am wanting - perhaps only because the one click is changing 2 slides not tabs. I want one click to switch tabs on 2 tab sets. My tabs are called tab1,2,and 3 and legendtab1,2, and 3.
I am only testing from the legendtabx set and have <div class="tabbable">
<script language="javascript" type="text/javascript">
document.getElementById('legendtab1').onclick , document.getElementById('tab1').onclick = function() {
<a href="#legendtab1" data-toggle="tab")Standard</a>;
<a href="#tab1" data-toggle="tab")Standard</a>;
document.getElementById('legendtab2').onclick, document.getElementById('tab2').onclick = function() {
<a href="#legendtab2" data-toggle="tab")Sprint</a>;
<a href="#tab2" data-toggle="tab")Sprint</a>
document.getElementById('legendtab3').onclick, document.getElementById('tab3').onclick= function() {
<a href="#tab3" data-toggle="tab")Ski</a>
<a href="#legendtab3" data-toggle="tab")Ski</a>;
}
</script>
This results in, in each case, triggers the tabx tabs but not the legendtabx. strangely even though in the case of tab3 the hrefs are in the reverse order, As you can likely tell, I am not a strong js programmer but I think it is js that should be able to do the job.
A little bit about why this need. It is a Joomla site and on the main content are 3 tabs with information about each of 3 types of events. In the module we show the symbols associated with each of the 3 types of events. So, when a visitor looks at the ski info on one area, I want the other area to display the related info about skiing.
You forgot to end your function's with ending }'s. You were also not assigning your onclick function correctly for the 'legendtab' onclicks. This may work better for you.
<script language="javascript" type="text/javascript">
var switchTab1 = function() {
<a href="#legendtab1" data-toggle="tab")Standard</a>;
<a href="#tab1" data-toggle="tab")Standard</a>;
}
var switchTab2 = function() {
<a href="#legendtab2" data-toggle="tab")Sprint</a>;
<a href="#tab2" data-toggle="tab")Sprint</a>
}
var switchTab3 = function() {
<a href="#tab3" data-toggle="tab")Ski</a>
<a href="#legendtab3" data-toggle="tab")Ski</a>;
}
document.getElementById('legendtab1').onclick = switchTab1;
document.getElementById('tab1').onclick = switchTab1;
document.getElementById('legendtab2').onclick = switchTab2;
document.getElementById('tab2').onclick = switchTab2;
document.getElementById('legendtab3').onclick = switchTab3;
document.getElementById('tab3').onclick = switchTab3;
</script>
So, I have some links in my page (< a > type), marked with different ID-s. They have those attributes:
id - the unique id of each link
href - the URL, that will open in new tab /!important -> The link needs to be opened in new tab!/
target="_blank" - for the link to open in new tab
So, the links look like:
<a id="a1" href="thelink" target="_Blank">Link1</a>
<a id="a2" href="thelink" target="_Blank">Link2</a>
<a id="a3" href="thelink" target="_Blank">Link3</a>
etc..
I want when one link is clicked, the URL to open in a new tab, and the link in the original page to be disabled, but not that way:
<a id="a3" href="#" target="_Blank">Link1</a
I tried using onclick to remove the "href" attribute and onclick to empty the "href" attribute but the link doesnt open, as the onclick fires first and removes the "href" element, before the link opens in new tab and the effect is not the one that i want.
Got some Ideas guys?
You can do it like this
<a id="a3" href="http://stackoverflow.com" onclick="a(this);">Link3</a>
<a id="a4" href="http://google.com" onclick="a(this);">Link4</a>
<a id="a5" href="http://wikipedia.org" onclick="a(this);">Link5</a>
<script>
function a(t) {
var href = t.getAttribute("href");
if(href==null || href=="") return;
window.open(href,'_blank');
t.removeAttribute("href");
}
</script>
How about
window.onload=function() {
document.getElementById("a1").onclick=function() {
setTimout(function() {document.getElementById("a1").disabled=true;},10)
}
}
You can do it through events using a class name as an indicator
http://jsfiddle.net/pyQV2/
In this example I added every link a class, just to indicate the function to target it. Then, on page load I attach an onclick event to each link.
var links = document.getElementsByClassName('notclicked');
for (var i=0; i<links.length; i++) {
links[i].onclick = function(e) {
if (e.target.className == 'notclicked')
e.target.className = 'clicked';
else {
if (e.preventDefault)
e.preventDefault();
else /* for IE */
e.returnValue = false;
}
}
}
If it has the old class, just change it for future clicks. If it has the new class, just stop the event.