We Keep Coding

Why isn't the img src/picture changing after click?

I am trying to perform a transition state from Transition State 1 to Transition State 2
The technology I am using to accomplish this JavaScript because JavaScript can dynamically "change the content of HTML elements" - JavaScript
Here is JFiddle
I saw that to change the src of an image tag in html, you have to execute this line of code (From Change Img Src)
document.getElementById("imageid").src="../template/save.png";
Here is my entire JavaScript code for the changing image portion(from my JFiddle)
(function() {
alert("got here");
function pageLoad() {
document.getElementById("choice1").onclick = getPicture("http://i.imgur.com/e95oMVZ.jpg");
document.getElementById("choice2").onclick = getPicture("http://imgur.com/dOlZ19H");
}
function getPicture(imageUrl) {
document.getElementById("picture").src = imageUrl;
}
window.onload = pageLoad;
})();
I made sure I was follow conventions for JavaScript Arguments, checked over my ids, and coded an alert statement to make sure the JavaScript was being executed.
After all of that, when I click on choice2, the image still doesn't change... Does anyone know what the issue could be?

You need to set onclick to a function. You're calling the function immediately, not when the element is clicked.
function pageLoad() {
document.getElementById("choice1").onclick = function() {
getPicture("http://i.imgur.com/e95oMVZ.jpg");
};
document.getElementById("choice2").onclick = function() {
getPicture("http://imgur.com/dOlZ19H");
};
}

Wrapping a script in a call function

I have a script im currently using, the issue is that i have to add the script directly after every html img tag. So there is the same script in several different places throughout the site. I am wondering if it is possible to wrap this script in a simple function call, and i can just add the function throughout the site instead of the whole script.
EDIT: I should have mentioned. This is a lightbox for a Tumblr theme. photo_{PostID} is valid. photo_{PostID} retrieves the unique photo identifier so the lightbox will display the correct image. The script right now works 100% perfectly fine no doubt about that. I'm looking to turn it all into a simple 1 liner call function to use instead of needing to paste the script after every img tag.
the script is below, thanks.
<script class="inline_embed" type="text/javascript">
var domain = document.domain,
photo_{PostID} = [{
"width": "{PhotoWidth-HighRes}",
"height": "{PhotoHeight-HighRes}",
"low_res": "{PhotoURL-250}",
"high_res": "{PhotoURL-HighRes}"
}];
function event_is_alt_key(e) {
return ((!e && window.event && (window.event.metaKey || window.event.altKey)) || (e && (e.metaKey || e.altKey)));
};
document.getElementById('photo_{PostID}').onclick = function (e) {
if (event_is_alt_key(e)) return true;
window.parent.Tumblr.Lightbox.init(photo_{PostID});
return false;
}
</script>

You tagged this question with [jquery] so I'm going to give an answer using jquery, even though your sample code doesn't use it.
Here's a fiddle:
http://jsfiddle.net/u2f2b5qq/
Given a few images on the page, like this:
<img src="http://placehold.it/250x150">
<img src="http://placehold.it/200x250">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/150x50">
You can do some action on all of them once the page loads, like this:
$(function() {
$('img').each(function() {
$(this).on('click', function() {
alert('You clicked ' + $(this).attr('src'));
// window.parent.Tumblr.Lightbox.init(this);
});
});
});
What I've done is attach a click handler to every image and alert when it's clicked. You would replace that with your lightbox code.
I don't have a full understanding of how tumblr does its magic with interpolating those values, but I assume you could do something like this for each image. It attaches the Photo data to each image element, and then retrieves it later.
<img src="example.jpg" id="photo_{PostID}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-low_res="{PhotoURL-250}" data-high_res="{PhotoURL-HighRes}" />
and then in the jquery kickoff:
$(function() {
$('img').on('click', function() {
var $img = $(this);
alert('You clicked ' + $img.attr('src'));
window.parent.Tumblr.Lightbox.init({
width: $img.data('width'),
height: $img.data('height'),
low_res: $img.data('low_res'),
high_res: $img.data('high_res')
});
});
});
Give that a shot.

Using jquery to control the iframe URL [duplicate]

I have an iframe on a page, coming from a 3rd party (an ad). I'd like to fire a click event when that iframe is clicked in (to record some in-house stats). Something like:
$('#iframe_id').click(function() {
//run function that records clicks
});
..based on HTML of:
<iframe id="iframe_id" src="http://something.com"></iframe>
I can't seem to get any variation of this to work. Thoughts?

There's no 'onclick' event for an iframe, but you can try to catch the click event of the document in the iframe:
document.getElementById("iframe_id").contentWindow.document.body.onclick =
function() {
alert("iframe clicked");
}
EDIT
Though this doesn't solve your cross site problem, FYI jQuery has been updated to play well with iFrames:
$('#iframe_id').on('click', function(event) { });
Update 1/2015
The link to the iframe explanation has been removed as it's no longer available.
Note
The code above will not work if the iframe is from different domain than the host page. You can still try to use hacks mentioned in comments.

I was trying to find a better answer that was more standalone, so I started to think about how JQuery does events and custom events. Since click (from JQuery) is just any event, I thought that all I had to do was trigger the event given that the iframe's content has been clicked on. Thus, this was my solution
$(document).ready(function () {
$("iframe").each(function () {
//Using closures to capture each one
var iframe = $(this);
iframe.on("load", function () { //Make sure it is fully loaded
iframe.contents().click(function (event) {
iframe.trigger("click");
});
});
iframe.click(function () {
//Handle what you need it to do
});
});
});

Try using this : iframeTracker jQuery Plugin, like that :
jQuery(document).ready(function($){
$('.iframe_wrap iframe').iframeTracker({
blurCallback: function(){
// Do something when iframe is clicked (like firing an XHR request)
}
});
});

It works only if the frame contains page from the same domain (does
not violate same-origin policy)
See this:
var iframe = $('#your_iframe').contents();
iframe.find('your_clicable_item').click(function(event){
console.log('work fine');
});

You could simulate a focus/click event by having something like the following.
(adapted from $(window).blur event affecting Iframe)
$(window).blur(function () {
// check focus
if ($('iframe').is(':focus')) {
console.log("iframe focused");
$(document.activeElement).trigger("focus");// Could trigger click event instead
}
else {
console.log("iframe unfocused");
}
});
//Test
$('#iframe_id').on('focus', function(e){
console.log(e);
console.log("hello im focused");
})

None of the suggested answers worked for me. I solved a similar case the following way:
<iframe id="iframe_id" src="http://something.com" allowtrancparency="yes" frameborder="o"></iframe>
The css (of course exact positioning should change according to the app requirements):
#iframe-wrapper, iframe#iframe_id {
width: 162px;
border: none;
height: 21px;
position: absolute;
top: 3px;
left: 398px;
}
#alerts-wrapper {
z-index: 1000;
}
Of course now you can catch any event on the iframe-wrapper.

You can use this code to bind click an element which is in iframe.
jQuery('.class_in_iframe',jQuery('[id="id_of_iframe"]')[0].contentWindow.document.body).on('click',function(){
console.log("triggered !!")
});

This will allow you to target a specfic element in the iframe such as button or text fields or practically anything as on method allows you to put selector as an argument
$(window).load(function(){
$("#ifameid").contents().on('click' , 'form input' , function(){
console.log(this);
});
});

Maybe somewhat old but this could probably be useful for people trying to deal with same-domain-policy.
let isOverIframe = null;
$('iframe').hover(function() {
isOverIframe = true;
}, function() {
isOverIframe = false;
});
$(window).on('blur', function() {
if(!isOverIframe)
return;
// ...
});
Based on https://gist.github.com/jaydson/1780598

You may run into some timing issues depending on when you bind the click event but it will bind the event to the correct window/document. You would probably get better results actually binding to the iframe window though. You could do that like this:
var iframeWin = $('iframe')[0].contentWindow;
iframeWin.name = 'iframe';
$(iframeWin).bind('click', function(event) {
//Do something
alert( this.name + ' is now loaded' );
});

This may be interesting for ppl using Primefaces (which uses CLEditor):
document.getElementById('form:somecontainer:editor')
.getElementsByTagName('iframe')[0].contentWindow
.document.onclick = function(){//do something}
I basically just took the answer from Travelling Tech Guy and changed the selection a bit .. ;)

Solution that work for me :
var editorInstance = CKEDITOR.instances[this.editorId];
editorInstance.on('focus', function(e) {
console.log("tadaaa");
});

You can solve it very easily, just wrap that iframe in wrapper, and track clicks on it.
Like this:
<div id="iframe_id_wrapper">
<iframe id="iframe_id" src="http://something.com"></iframe>
</div>
And disable pointer events on iframe itself.
#iframe_id { pointer-events: none; }
After this changes your code will work like expected.
$('#iframe_id_wrapper').click(function() {
//run function that records clicks
});

Convert contenteditable div's content to plaintext via javascript

I'm trying to make custom lightweight rich text editor with just one feature - adding links. I did some research and desided iframe is the best choice. After some messing around it works with one exception - I need to run some code on keyup event. I read everything I found on the internet and nothing helped, still doesn't work...
iframe.document.designMode = 'On';
iframe.document.open();
iframe.document.write(someHTML);
iframe.document.close();
var keyupHandle = function() { /* some code */ };
var iframeDoc = document.getElementById('iframe').contentWindow.document;
if(iframeDoc.addEventListener) {
iframeDoc.addEventListener('keyup', keyupHandle(), true);
} else {
iframeDoc.attachEvent('onkeyup', keyupHandle());
}

I think I remember needing to wait for the iframe to fully load before adding event handlers to the document. If possible, add something to the iframe's HTML to call out to the parent page when it's loaded:
window.iframeLoaded = function() {
var iframeDoc = document.getElementById('iframe').contentWindow.document;
if(iframeDoc.addEventListener) {
iframeDoc.addEventListener('keyup', keyupHandle(), true);
} else {
iframeDoc.attachEvent('onkeyup', keyupHandle());
}
};
iframe.document.designMode = 'on';
iframe.document.open();
iframe.document.write('<html><body onload="parent.iframeLoaded()">Stuff</body></html>');
iframe.document.close();
Failing that, setting a brief timer using window.setTimeout() will probably work.

Initialize media player only if query string parameter is present

I have a SharePoint page that has a hyperlink which points to a video clip. Clicking on the link will play the video in an overlay window (uses Silverlight). If Silverlight runtime is not present, it displays the "install Silverlight" prompt. When the page is invoked with a IsDlg=1 query string, the hyperlink is hidden (it is in the left navigation bar), and only the main content page is shown. But I still get the "install Silverlight" prompt. I want to get rid of the prompt when IsDlg=1 is present.
Below is the relevant javascript code on the page. I've modified it slightly to initialize the media player only if IsDlg=1 is not present. But it is not working as expected. Any ideas?
// original code
$(function () {
mediaPlayer.createOverlayPlayer();
mediaPlayer.attachToMediaLinks(document.getElementById('videoList'), ['wmv', 'avi', 'mp4']);
});
// modified code
$(function () {
var field = 'IsDlg';
var url = window.location.href;
if (url.indexOf('?' + field + '=') != -1) {
} else {
mediaPlayer.createOverlayPlayer();
mediaPlayer.attachToMediaLinks(document.getElementById('videoList'), ['wmv', 'avi', 'mp4']);
}
});

As long as the HTML which embeds the Silverlight control is present, it will show the "Install Silverlight" dialog. If you don't want the dialog to show, you'll have to change the HTML source. You could add JavaScript code to add the HTML dynamically, so that it only shows when necessary. That answer would depend on how you're currently embedding the Silverlight control.
EDIT: You could try code like this:
$(function () {
if (window.location.search.indexOf('IsDlg=1') === -1) {
$.getScript('/_layouts/mediaplayer.js', function () {
mediaPlayer.createOverlayPlayer();
mediaPlayer.attachToMediaLinks(document.getElementById('videoList'), ['wmv', 'avi', 'mp4']);
});
}
});

Your code should work, so you probably want to debug for other possible issues.
$(document).ready(function () { // add explicit wait until dom ready
console.log(window.location.search); // just to check that the parameter is present
if(window.location.search.indexOf("IsDlg=1") < 0){ // testing the query string part only
mediaPlayer.createOverlayPlayer();
mediaPlayer.attachToMediaLinks(document.getElementById('videoList'), ['wmv', 'avi', 'mp4']);
}
});
Try that and see how you get on.