I need to change iframe source from <a> url. http://jsfiddle.net/YkKu3/
My HTML:
<a class='gotothis' href='http://puu.sh/666.png'>this Image</a>
<button type="button">Click Me!</button>
<iframe id="frameimg" src="" width="300" height="300">
</iframe>
$('button').click( function(event) {
var clicked = $(this);
$("#frameimg").attr("src", " .gotothis image is here, help '); // Here the problem
});
You are using a double quote " to open the string, but a single quote ' to close it. Either use two double quotes, or two single quotes.
$("#frameimg").attr("src", " .gotothis image is here, help "); // Here the problem
Or if you are referring to the fact that you want to dynamically read the gotothis uri, you should just read out the href attribute from the gotothis element:
$("#frameimg").attr("src", $('.gotothis').attr('href')); // Here there is no problem
You have the order of events mixed up. Correct code that will load the anchor URL into the iframe:
$(window).load(function() {
$('button').click( function(event) {
var clicked = $(this);
window.setTimeout(function() {
$("#frameimg").attr("src", $(".gotothis").attr("href"));
}, 1000);
});
});
Live test case. (With a cute cat :))
Related
I wrote the following script that resets the the Iframe Source, removes a class (.play) and adds an image placeholder when .b-close is clicked. I got it to work but the problem is that I have multiple modals and I would like only like to affect the modal that's clicked. I figured that I should use the '$(this)' DOM element in order to achieve this.
<script>
(function($){
var ivid = $('.pretty-embed iframe').attr('src');
$(document).ready(function() {
$(".b-close").click(function(e){
e.preventDefault();
var vidID = $(this).parent().find('.pretty-embed').attr('data-pe-videoid');
var vidImg = "//img.youtube.com/vi/"+vidID+"/maxresdefault.jpg";
var vidImgUrl = '<img src="'+vidImg+'" width="100%" alt="YouTube Video Preview">';
$('.pretty-embed').removeClass('play').empty();
$('.pretty-embed').html(vidImgUrl);
$('.b-modal').click(); /// Just trying to close modal..... $.modal.close();
});
});
})(jQuery);
</script>
Here's is the the Modal that I will be calling. Keep in mind that there will be multiple modals, so I would only like to affect the modal that's clicked
<div id="element_to_pop_up" display: block;">
<a class="b-close">x</a>
<h3 class="pop-hd">Header</h3>
<p>Test Video</p>
<div class="pretty-embed play" data-pe-allow-fullscreen="false">
<iframe width="330" height="186" style="border:none;" src="//www.youtube.com/embed/nGSfaMxCu-U?autoplay=1&rel=1"></iframe>
</div>
</div>
The problem is in your $('.pretty-embed') selector which selects all the embed elements in all modals If I understood your problem correctly. To fix that take the id of the modal and prepend it to the selectors like below:
(function($){
var ivid = $('.pretty-embed iframe').attr('src');
$(document).ready(function() {
$(".b-close").click(function(e){
e.preventDefault();
var vidID = $(this).parent().find('.pretty-embed').attr('data-pe-videoid');
var vidImg = "//img.youtube.com/vi/"+vidID+"/maxresdefault.jpg";
var vidImgUrl = '<img src="'+vidImg+'" width="100%" alt="YouTube Video Preview">';
var parent_id = $(this).parent().attr(id);
// Prepend the parent id before the .pretty-embed selector
$('#'+parent_id+' .pretty-embed').removeClass('play').empty();
$('#'+parent_id+' .pretty-embed').html(vidImgUrl);
$('#'+parent_id+' .b-modal').click(); /// Just trying to close modal... $.modal.close();
});
});
Also you can use the same way you did it in the previous lines:
$(this).parent().find('.pretty-embed').removeClass('play').empty();
You can get the current modal with
var current_modal = $(this).parent().find('.pretty-embed');
Then remove the class play, and add your image like this:
current_modal.removeClass('play').empty();
current_modal.html(vidImgUrl);
See your complete code in this jsfiddle
I'm trying to create a html anchor that has a unique ID and then when a user clicks the anchor, the ID gets passed to javascript via the onclick html tag and then a javascript script reads the ID and displays the content in a div. We're using jQuery library for this.
what I have so far:
<a id="MyID1" onclick="var ClickVariable=this.id;return false">1</a>
<a id="MyID2" onclick="var ClickVariable=this.id;return false">2</a>
<script>
var ClickVariable;
var ContentBox = [];
ContentBox[ClickVariable] = "Content for MyID1";
$(ClickVariable).click(function() {
$('.dropdown-menu-content').html(ContentBox);
});
</script>
The above does not work however we have an alternative that works but is not efficient.
<a id="MyID1">1</a>
<a id="MyID2">2</a>
$('#MyID1').click(function() {
$('.dropdown-menu-content').html('Text 1');
});
$('#MyID2').click(function() {
$('.dropdown-menu-content').html('Text 2');
});
As you can see the above one would work but is very repetitive for our needs because we have a large list to enter.
Here is a jsfiddle of the working one that is a tedious repetitive task:
http://jsfiddle.net/2z7o5hn3/
You can reuse the same handler like so:
//mapping id to string to display
var data = {
'MyID1': 'Text 1',
'MyID2': 'Text 2'
}
//shared click handler
var displayEl = $('.dropdown-menu-content');
function handler() {
displayEl.html(data[this.id]);
}
//add click handler to each id
$.each(data, function(k,v) {
$('#'+k).click(handler);
});
http://jsfiddle.net/2z7o5hn3/2/
Give all anchor tags a class and access it like this:
HTML:
<a id="ID1" class="clickVariables" href="#">ID1</a>
<a id="ID2" class="clickVariables" href="#">ID2</a>
JS:
$('.clickVariables').on('click', function(e){
e.preventDefault();
$('.dropdown-menu-content').html($(this).attr('id'));
})
do you mean like this? => DEMO
var texts=['Text 1','Text2'];
$('a[id^=MyID]').click(function() {
$('.dropdown-menu-content').html(texts[$(this).text()-1]);
});
I made the code like this which changes an image on the web-site on Youtube video.
<script type="text/javascript">
$(window).load(function(){
$('img.demovideo').click(function(){
video = '<iframe class="demovideo" width="100%" height="551px" src="'+ $(this).attr('data-video') +'"></iframe>';
$(this).replaceWith(video);
});
$('img.demovideo').css('cursor', 'pointer');
});
</script>
How can I change the Youtube video back on image on player state 0?
I made a code like this, but it doesn't work:
<script type="text/javascript">
raketaplayer.onStateChange () {
b = raketaplayer.getPlayerState();
if (b=0) {
image = '<img class="demovideo" src="http://raketa.pro/wp-content/uploads/2013/03/image_header_2.png" data-video="http://www.youtube.com/embed/7hoqO36CVRM?&rel=0&theme=light&showinfo=0&hd=1&autohide=1&color=white&autoplay=1&enablejsapi=1&playerapiid=raketaplayer" style="cursor: pointer;">';
$(iframe.demovideo).replaceWith(image);
});
$('img.demovideo').css('cursor', 'pointer');
});
}
}
</script>
What's wrong with it? Please, help :)
Image code as follows:
<img class="demovideo" src="http://raketa.pro/wp-content/uploads/2013/03/image_header.png" data-video="http://www.youtube.com/embed/7hoqO36CVRM?&rel=0&theme=light&showinfo=0&hd=1&autohide=1&color=white&autoplay=1&enablejsapi=1&playerapiid=raketaplayer">
A couple of issues that you might want to address. First of all, your conditional statement uses a single equal sign instead of a double. More importantly, though, when you execute the onStateChange function, it can take an argument that represents the event, which will report the state change without you having to query for it, like this:
raketaplayer.onStateChange (event) {
if (event.data==0) {
image = '<img class="demovideo" src="http://raketa.pro/wp-content/uploads/2013/03/image_header_2.png" data-video="http://www.youtube.com/embed/7hoqO36CVRM?&rel=0&theme=light&showinfo=0&hd=1&autohide=1&color=white&autoplay=1&enablejsapi=1&playerapiid=raketaplayer" style="cursor: pointer;">';
$(iframe.demovideo).replaceWith(image);
});
$('img.demovideo').css('cursor', 'pointer');
});
}
}
Finally, make sure you've bound your onStateChange function to the state change event of the YT.Player object that you create elsewhere in your code.
I'm currently utilizing JavaScript to allow users to watch multiple videos on a page. There is one big player at the top of the page, and below it are smaller thumbnails of more videos.
In theory, it works fine. However, there is one major problem: ALL videos load at the same time as the page loads.
See this page for reference. I have assigned JavaScript alerts to each individual videos to exemplify the problem (video1, video2, etc.).
Is there a easy fix, without having to rewrite the entire page, to have the videos load when they are clicked on, not when the page loads? Here's what the code looks like so far:
Javascript that calls the video:
function playVideo(cap, file, streamer, alertmsg) {
var so = new SWFObject('player/player-licensed_5_2.swf', 'ply1', '586', '330', '9');
so.addParam('displaywidth', '586');
so.addParam('displayheight', '330');
so.addParam('allowfullscreen', 'true');
so.addParam('allowscriptaccess', 'always');
so.addVariable('skin', 'player/skins/glow.zip');
so.addVariable('controlbar', 'over');
so.addVariable('plugins', 'captions-1');
so.addVariable('captions.file', cap);
so.addVariable('dock', 'true');
so.addVariable('image', 'landing_img/video.jpg');
so.addVariable('file', file);
so.addVariable('streamer', streamer);
so.addVariable('autostart', 'false');
so.write('player1');
window.alert(alertmsg);
}
The thumbnail for the video:
<div class="mini_player1"> <a href="#" class="vidpic" title="">
<!-- thumbnail-->
<img src="images/1_panda.jpg" alt="Video 1" class="vidpic" />
<span class="play-button"><img src="images/yt.png" alt="Play"></span>
</a>
</div>
<div class="content_mini_player1 cmp">
<script>
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
</script>
</div>
The script that 'replaces' the content in bigplayer with the new selected video:
jQuery(function ($) {
$(".mini_player1, .mini_player2, .mini_player3, .mini_player4, .mini_player5, .mini_player6, .mini_player7, .mini_player8, .mini_player9, .mini_player10, .mini_player11, .mini_player12, .mini_player13, .mini_player14, .mini_player15, .mini_player16, .mini_player17, .mini_player18, .mini_player19, .mini_player20").click(function () {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
});
});
Any suggestions? Maybe consolidate playVideo and the jQuery function? Any help would be greatly appreciated.
Firstly, in the thumbnail code, there is a random closing </a> tag. Unless there is code you didn't post, I'd suggest removing it.
Secondly, your jQuery can be simplified much further. Currently, you are using the following selector:
$(".mini_player1, .mini_player2, .mini_player3, .mini_player4, .mini_player5, .mini_player6, .mini_player7, .mini_player8, .mini_player9, .mini_player10, .mini_player11, .mini_player12, .mini_player13, .mini_player14, .mini_player15, .mini_player16, .mini_player17, .mini_player18, .mini_player19, .mini_player20")
Wow! That is...wow.
Assign the players a single class they can all relate to across the board, select by that class and then run the each() method i.e.:
$(".mini-player").each(function() {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
});
Lastly, when you call a function in a script tag like you are doing:
<script>
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
</script>
This WILL run the playVideo() function. Consolidating playVideo() and the jQuery code would be your best bet i.e. (using the same construct above):
$(".mini-player").each(function() {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
//Add event handler
$(this).on('click',function() {
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
});
});
Your inline JavaScript function playVideo is going to be called when the page loads. You will want to remove it from there and do something like this:
<div onclick="playVideo()" class = "mini_player1">
Hey ya'll I have these 3 images thumbnails here...
<div class="wpcart_gallery" style="text-align:center; padding-top:5px;">
<a class="thickbox cboxElement" title="DSC_0118" href="/wp-content/uploads/2012/07/DSC_0118.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/DSC_0118.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="DSC_0118" alt="DSC_0118" src="/wp-content/uploads/2012/07/DSC_0118-50x50.jpg">
</a>
<a class="thickbox cboxElement" title="P7230376" href="/wp-content/uploads/2012/07/P7230376.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/P7230376.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="P7230376" alt="P7230376" src="/wp-content/uploads/2012/07/P7230376-50x50.jpg">
</a>
<a class="thickbox cboxElement" title="P7230378" href="/wp-content/uploads/2012/07/P7230378.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/P7230378.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="P7230378" alt="P7230378" src="/wp-content/uploads/2012/07/P7230378-50x50.jpg">
</a>
</div>
What I am trying to do is come up with a jquery code that would remove the cboxElement from the first image when the page loads and if I click on one of the images to remove cboxElement and place cboxElement to the images that does not have cboxElement class..
Hope this make sense, I have tried all of the answers I was provided and nothing worked :(
This worked for the first part....remove cboxElement from first link
<script type="text/javascript">
jQuery('document').ready(function($){
$(".wpcart_gallery a:first").removeClass("cboxElement");
$('.thickbox').click(function(){
$('.thickbox').each(function(obj){
if(!$(this).hasClass("cboxElement")){
$(this).addClass("cboxElement");
}
})
$(this).removeClass("cboxElement");
})
});
</script>
The click function does not work at all :( this is a wordpress site so I had to put jQuery('document') instead of $('document')
I had the same issue....
jQuery('document').ready(function($){
$(".wpcart_gallery a:first").removeClass("cboxElement");
jQuery(".wpcart_gallery img").click(function($){
jQuery(".wpcart_gallery a").addClass('cboxElement');
jQuery(this).closest('a').removeClass('cboxElement');
});
});
This will work :)
jQuery( function(){
var images = jQuery("#wpcart_gallery").on("click","a", function(e){
e.preventDefault();
images.addClass("cboxElement");
jQuery(this).removeClass("cboxElement");
});
images.eq(0).removeClass("cboxElement");
});
try this one
$(function(){
$("a:first").removeClass("cboxElement");
$('.thickbox').click(function(){
$('.thickbox').each(function(obj){
if(!$(this).hasClass("cboxElement")){
$(this).addClass("cboxElement");
}
})
$(this).removeClass("cboxElement");
})
})
Not tested, but:
$("#wpcart_callery img").click(function(){
// strip the class from all of them
$("#wpcart_gallery img").removeClass("cboxElement");
// add it to the clicked one
$(this).addClass("cboxElement");
});
(function ($) {
$(function () {
$('.cboxElement').click(function () {
$(this).removeClass('cboxElement').siblings().addClass('cboxElement');
});
});
})(jQuery);
I'm assuming that you want to have the first image "selected" on the page by not having the class, then subsequently changing classes to indicate selection by not having .cboxElement
$(function() {
var list = $('.wpcart_gallery .cboxElement').click(function() {
list.not('.cboxElement').addClass('cboxElement');
$(this).removeClass('cboxElement');
});
list.first().click();
});
JsFiddle of the above.
$(document).ready(function(){
$(".wpcart_gallery").filter("a:first").removeClass("cBoxElement");
$(".wpcart_gallery").on("click", "a", function(){
$(".wpcart_gallery a").addClass("cBoxElement");
$(this).removeClass("cBoxElement");
}
Try this.. It should work
Is it because you are simply missing some semicolons? What error are you seeing in the console window?
<script type="text/javascript">
jQuery('document').ready(function($){
$(".wpcart_gallery a:first").removeClass("cboxElement");
$('.thickbox').click(function(){
$('.thickbox').each(function(obj){
if(!$(this).hasClass("cboxElement")){
$(this).addClass("cboxElement");
}
}); //<-- semi-colon added here
$(this).removeClass("cboxElement");
}); //<-- semi-colon added here
});
</script>
Not sure if this is the best way or not, but this works (a more detailed explanation below):
var elements = new Array();
jQuery(document).ready(function() {
$('.cboxElement').each(function() {
var element = $(this);
element.attr('href', '#');
element.click(function() {
for (var i in elements) {
elements[i].addClass('cboxElement');
}
$(this).removeClass('cboxElement');
});
elements.push(element);
});
$('.cboxElement:first').removeClass('cboxElement');
});
You can see a live example here.
Keep a list of all the .cboxElement elements on the page:
var elements = new Array();
Then on page load, we are going to find all of the .cboxElements and do three things:
1. remove their regular <a> tag behavior by setting the href attribute to '#'
2. set click listeners on each of the elements (that adds the cboxElement class to all original elements, and then remove cboxElement from one that was just clicked).
3. populate our list of all the elements
$('.cboxElement').each(function() {
var element = $(this);
// 1. remove <a> tag behavior
element.attr('href', '#');
// 2. set click listener
element.click(function() {
for (var i in elements) {
elements[i].addClass('cboxElement');
}
$(this).removeClass('cboxElement');
});
// 3. keep track of all the .cboxElements
elements.push(element);
});
Then once we're ready, remove cboxElement from the first one.
$('.cboxElement:first').removeClass('cboxElement');