How to run a script on image? - javascript

This script below slides and rebuilds a div with a Youtube video when I press a button.
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('#slide_up').click(function(){
$('#slidingDiv').slideToggle('', function (){
var obj = $(this);
if(obj.is(':hidden')){
obj.html( obj.html() );
}
});
});
});//]]>
<div style="display: block;" id="slidingDiv">
<iframe src="http://www.youtube.com/embed/r13a2VUTajU" allowfullscreen="" frameborder="0" height="315" width="560"></iframe>
</div>
<input value="Slide and rebuild" id="slide_up" type="button">
I want to use an image instead of a button.
How should I modify a script to run a slide function after I click on img?
Thanks ;)

<input value="Slide and rebuild" id="slide_up" type="image" src="yourimage.jpg">
This should work. Unless I didn't understand the question

You have to use the onclick attribute
<img src="your src" onclick="your javascript function" />

Related

How to I make the image switch back to the original image src after Iv'e pressed the button once

<html>
<body>
<button onclick="document.getElementById('myImage').src='hagthrowingball.gif'">Throw Fire ball</button>
<img id="myImage" src="foresthag.gif" style="width:100px">
</body>
</html>
I need the image src onclick to show the image hagthrowingball.gif, but then go back to foresthag.gif without pressing the button again.
I think this should solve your problem by automaticly setting back old src after some time;
<button onclick="replaceFunc();">Throw Fire ball</button>
<img id="myImage" src="foresthag.gif" style="width:100px">
<script>
function replaceFunc (){
const el = document.getElementById("myImage");
const oldSrc = el.src;
el.src = 'hagthrowingball.gif';
setTimeout(()=>el.src=oldSrc, 1000);
}
</script>
</body>
</html>

How to prevent one iframe from working under another?

I'm using an iframe video system with tabs to separate them, the problem I had was that all iframes loaded when you entered that section. I found this answer among many others that could not solve the problem of simultaneous loading To Load a video embed using "onclick" function to optimize a web page but now the problem I have is that using the solution by jquery to choose option 1 (iframe) loads normally but if I press option 2 both continue loading, ie, option 1 continues loading under the other that was pressed.
The system where I'm applying it is Datalife Engine on a .tpl file, and jquery 1.8.2 that I can change it to a more current one but the result is the same
<script>
$(document).ready(function() {
$("#myButton").on("click", function() {
var $iframe = $("#myIframe");
$iframe.attr("src", "https://www.youtube.com/embed/6wUxpFu9Wvo");
$iframe.show();
});
});
$(document).ready(function() {
$("#myButton1").on("click", function() {
var $iframe = $("#myIframe");
$iframe.attr("src", "https://www.youtube.com/embed/6wUxpFu9Wvo");
$iframe.show();
});
});
</script>
<script language="javascript" type="text/javascript">
$(function(){
$('.close').click(function(){
$('iframe').attr('src', $('iframe').attr('src'));
});
});
</script>
<iframe id="myIframe" width="560" height="315" style="display:none;" src="" frameborder="0" allowfullscreen></iframe>
<button id="myButton" class="close">Load video</button>
<iframe id="myIframe1" width="560" height="315" style="display:none;" src="" frameborder="0" allowfullscreen></iframe>
<button id="myButton1" class="close">Load video</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The final result is that option 1 is still loading below another option, I was trying options to reload iframes but those who bring videos with autoplay continue to load below the new chosen one
You can use the same iFrame and change it's src on click of several buttons.
Following is an example similar to yours with one iFrame and 3 buttons. Each button loads a different video in the same iFrame. I am using youtube video id to differentiate the videos.
$(function() {
$(".myButton").on("click", function() {
var videoId = $(this).data('video-id');
var $iframe = $("#myIframe");
$iframe.attr("src", "https://www.youtube.com/embed/" + videoId);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="myIframe" width="560" height="315" src="" frameborder="0" allowfullscreen style="border: 1px solid black;"></iframe>
<br />
<button id="button1" class="myButton" data-video-id="6wUxpFu9Wvo">Load video 1</button>
<button id="button2" class="myButton" data-video-id="z5jnpb_lp4w">Load video 2</button>
<button id="button3" class="myButton" data-video-id="6wUxpFu9Wv2">Load video 3</button>

Load first page onload and first nav button clicked onload

First hello to all. I am relatively new to jquery and on a learning curve.
My script is this:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js">
</script>
<script>
$(function () {
$('#content').find('#nav a').on('click', function (e) {
e.preventDefault();
var page = $(this).attr('href');
$('#content2').load(page);
});
});
$(function() >{
$('#content').find('#nav a').click(function() {
$('#nav a').removeClass('selected');
$(this).addClass('selected');
});
});
</script
<div id="content">
<embed type="image/svg+xml" src="x.svg" />
<div id="svgfix">
<embed type="image/svg+xml" src="1.svg" />
<embed type="image/svg+xml" src="2.svg" />
<embed type="image/svg+xml" src="3.svg" />
<embed type="image/svg+xml" src="4.svg" />
<embed type="image/svg+xml" src="5.svg" />
<embed type="image/svg+xml" src="6.svg" />
</div>
<div id="nav">
<img type="image/svg+xml" src="1.svg" />
<img type="image/svg+xml" src="2.svg" />
<img type="image/svg+xml" src="3.svg" />
<img type="image/svg+xml" src="4.svg" />
<img type="image/svg+xml" src="5.svg" />
<img type="image/svg+xml" src="6.svg" />
</div>
</div>
<div id="content2"><h1></h1></div>
The script works well. The only problem i have, i want the first page to auto load and the first button to be on selected. I have tried to find a solution here and read trough the topics, but nothing has worked so fare.
The script should load on click trough the nav bar with the 6 pages and it does and each button will be selected. But i would like on first page load, to auto select the first button and autoload the first page.
I hope my question is understandable and thanks for your time and help in advance...
You can do something like this:
Create a function and call when the page is ready and on click event
$(function () {
function getPage(el){
var page = $(el).attr('href');
$('#content2').load(page);
$('#nav a').removeClass('selected');
$(el).addClass('selected');
}
getPage($('#nav a:first-child'));//get the first page
$('#nav a').on('click', function (e) {
e.preventDefault();
getPage($(this));
});
});
Trying to understand your question - maybe something like this?
$( document ).ready( function() {
var firstNav = $('#nav a').first();
var page = firstNav.attr('href');
$('#content2').load(page);
firstNav.addClass('selected');
}
Try triggering click on first link after you create the event listeners
$('#nav a').first().click()
Quick note about your find(). Since ID's must be unique on a page you can skip $('#content').find('#nav a') and just use $('#nav a')

pause/play multiple embedded youtube players

I have 2 thumbnail links, and when they are clicked on they open up videos in a lightbox style. My goal is to get them to play when they open and pause when they are closed (they close when the background area is clicked on).
My HTML code is here:
<body>
<div id="page">
<br /><br /><br /><br /><br />
<a id="1" class="thumbnail"rel="nofollow"><img class="img1" src="Resources/thumb1.jpg"/></a>
<a id="2"class="thumbnail"rel="nofollow"><img class="img1"src="Resources/thumb2.jpg" /></a>
<div class="backdrop"></div>
<div class="Video"id="vid1" >
<iframe allowscriptaccess="always" class="youtube-player" type="text/html" width="560" height="315" src="http://www.youtube.com/embed/7xHXpebWtus?enablejsapi=1" allowfullscreen="" frameborder="0" id="iframe1"> </iframe>
</div>
<div class="Video"id="vid2">
<iframe allowscriptaccess="always" class="youtube-player" type="text/html" width="560" height="315" src="http://www.youtube.com/embed/PnAsZ1Roxj4?enablejsapi=1" allowfullscreen="" frameborder="0" id="iframe2"> </iframe>
</div>
<br /><br /><br /><br />
<h1>More To Come</h1>
</div>
And my Javascript:
$(document).ready(function(){
$('.thumbnail').click(function(){
var $id = $(this).attr('id');
$('.backdrop, #vid'+ $id).animate({'opacity':'.50'}, 300, 'linear');
$('#vid'+ $id).animate({'opacity':'1.00'}, 300, 'linear');
$('.backdrop, #vid'+ $id).css('display', 'block');
});
$('.backdrop').click(function(){
close_box();
});
});
function close_box()
{
$('.backdrop,.Video').animate({'opacity':'0'}, 300, 'linear', function(){
$('.backdrop,.Video').css('display', 'none');
});
};
I should probably mention that I am quite new to these languages!
You can use YouTube Player API for iframe Embeds. Here is the reference to it. Instead of placing iFRAME tag, you create empty DIV with ID and SCRIPT tag with some JavaScript code. The code then generates an iFRAME and places it on the DOM, removing early created DIV and SCRIPT tags. This allows you to manipulate the player in the SCRIPT tag. Here is the working example in jsFiddle.
P.S. Also please pay attention to the "Requirements" section.
You need to use YouTube API.
Here is tutorial

Not defined? Submit iframe from modal box post to iframe

I have
<iframe src="correctdata.php" frameborder="0" width="100%" height="330" id="correctdata"></iframe>
<div class="floatright"><a class="button bigger" onclick="window.frames['correctdata'].document.form['correct'].submit();">Submit</a></div>
And correctdata.php contains a form
<form method="post" action="correctdata.php" name="correct" id="correct"></form>
(There is other stuff, but I'd much rather not post it.
Yet when I press submit I get
window.frames.correctdata is undefined
[Break On This Error] window.frames.correctdata.document.form.correct.submit();
try your with "jQuery(...)contents()"
Html:
<iframe src="correctdata.php" frameborder="0" width="100%" height="330" id="correctdata"></iframe>
<div class="floatright"><a class="button bigger" id="submit-iframe">Submit</a></div>
JS:
$('#submit-iframe').bind('click', function(ev) {
ev.stopPropagation();
var correctForm = $("#correctdata").contents().find("#correct");
if (correctForm.length == 0)
alert('error');
else
correctForm[0].submit();
return false;
});
When the iframe is loaded, provided the content document is from the same origin, you should be able to access the content within it. You can do so by limiting the jQuery context like so:
$('#idInTheIframe', $('iframe')[0].contentDocument);
For a live example, see http://jsfiddle.net/jsumners/hSEmH/.

Categories