How can you detect clicks on javascript which is fired from a <DIV>?
For example I have 3 adSense ads in 3 different <DIV>s on a page, and I want to detect and trigger an operation when an ad is clicked.
It is easy to detect clicks on<DIV> when it is empty, or with any other element; but how to detect clicks on adSense ad (code)?
As far as I'm aware, Adsense ads are loaded in an iframe element so accessing them would be violating the same origin policy. This means you can't detect clicks in an iframe pointing to an external URL, so it can't be done.
are you using any frameworks like jQuery? if so, you could add a click handler to a child of a div:
targetElement = $("#yourDivId").children()[0]
$(targetElement).click(function(){
alert("target element was clicked");
});
If I would really need to achieve something like this, I would cheat a bit with the user.
Instead of trying to get click on iframe, make an overlay div and place it above iframe. Attach click event to it, and when div is clicked, hide it.
It will give the user feeling that he clicked on link, but it did not worked correctly. The second time he clicks it will already worked, cause overlay is hidden.
An example code (just for explanation purpose):
<html>
<style>
.test {
position : absolute;
top : 0;
left : 0;
width : 300;
height : 300;
z-index : 999;
filter : alpha(opacity = 0);
opacity : 0;
background-color:black;
}
</style>
<script>
function start(){
var div = document.getElementById("target");
var source = document.createElement("div");
source.className = "test";
document.body.appendChild(source);
var style = source.style;
var div2 = document.createElement("div");
document.body.appendChild(div2);
source.onclick = function(e){
style.display = "none";
div.onmouseout = function(){
div2.innerHTML = "mouseout";
style.display = "";
div.onmouseout = null;
}
div2.innerHTML = "clicked";
}
}
</script>
<body onload="start()">
<div id="target">
<iframe src="http://mail.ru" style="width:300;height:300"></iframe>
</div>
</div>
</html>
Related
I am making a web chat. I have a div called chatbody. I want the div to scroll to bottom using javascript so that the last message is displayed. However, the code that I am using scrolls it to top instead. Here is the code:
<script type="text/javascript">
function chatbody() {
var myDiv = document.getElementByClassName('chatbody');
myDiv.innerHTML = variableLongText;
myDiv.scrollTop = 0;
}
</script>
Kindly assist to solve my issue.
Try This
var myDiv = document.getElementByClassName('chatbody')[0];
function scrollToBottom(nameOfBlock) {
nameOfBlock.scrollTop = nameOfBlock.scrollHeight
}
U can pass your variable as an argument
please refer to JSFiddle link: https://jsfiddle.net/s11oo2gg/.
We are not allowed to use jQuery and iframe here.
The problem right now if you click on resistor first and hover over different content images then come back out by clicking the X mark, the content image would get stucked where you left off and would not load the the other content images properly. It would show a broken image link.
I like to reload only the <div id="slider1_contain"> everytime I click on <span class="closeButton">(X mark) so the target content images can be loaded accordingly.
I dont not want to have location.reload(); to resolve this when the X is click. I dont want to reload the whole page but only the div.
I saw people were asking the same question and solve it with AJAX. Do I need AJAX for this case? Or is there something we can do in the following javascript?
Thank you in advance!!
<script type="text/javascript">
function showContent(target){
document.getElementById(target).style.display = 'block';
document.getElementById("boxThumb").style.display = 'none';
}
function hideContent(target){
document.getElementById(target).style.display = 'none';
document.getElementById("boxThumb").style.display = 'block'
}
</script>
<script type="text/javascript">
var children = document.querySelectorAll('.toggle > section[id]');
function showDetailContent(target) {
// Simply loop over our children and ensure they are hidden:
for (var i = 0, child; child = children[i]; i++) {
child.style.display = 'none';
}
// Now, show our child we want to show
document.getElementById(target).style.display = 'block';
}
</script>
If you want to reload just the div, you can use innerHTML.
document.getElementById(target).innerHTML = '<img src="image.jpg">';
I'm currently making an iphone webapp and have almost finished it, I just need to fix this one little issue im having
Ive managed to hide one div layer and show another, but what I would like is for the same button to then show the layer I have hid and hide the one that I have shown when clicked again. So basically clicking the button would take it back to the original state
the code I am currently using is
<script type="text/javascript">
function toggle_layout(d)
{
var onediv = document.getElementById(d);
var divs=['Posts','Posts2'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
</script>
It hides a div I have named "Posts" and shows a div I have named "Posts2", but clicking it again does not reverse the effect.
If you wanna take a look at my site its http://a-m-creativecapture.tumblr.com/
Will have to view it on a mobile to see what I am talking about.
Have you tried style.visibility (visible|hidden) instead of style.display?
Assuming that your divs are something like this:
<div id="posts"></div>
<div id="posts2"></div>
You can use the following code:
var posts = document.getElementById('posts'),
posts2 = document.getElementById('posts2');
function toggle() {
if (this == posts) {
posts.style.display = 'none';
posts2.style.display = 'block';
} else {
posts.style.display = 'block';
posts2.style.display = 'none';
}
}
div1.onclick = toggle;
div2.onclick = toggle;
I have an iframe in my site that must reload every second (it's just reloading simple HTML for data analysis). This causes a really annoying white flash each time it reloads.
I have put hours of research into trying to remove this flash. Here's what I have (which doesn't work), which creates a new iframe, adds it to the DOM, and then removes the old one, effectively reloading the page. It still flashes white though:
$( document ).ready(function() {
setInterval(function() {
var container = document.getElementById('bottom-frame-container');
var source = container.getElementsByTagName('iframe')[0];
var newFrame = document.createElement('iframe');
for (i = 0; i < source.attributes.length; i++) {
var attr = source.attributes[i];
newFrame.setAttribute(attr.name, attr.value);
}
newFrame.style.visibility = 'hidden';
newFrame.id = 'bottom-frame';
container.appendChild(newFrame);
newFrame.style.visibility = 'visible';
container.removeChild(container.getElementsByTagName('iframe')[0]);
}, 1000);
});
The iframe code is simply:
<div id="bottom-frame-container">
<iframe id="bottom-frame" width="100%" height="60%" frameborder="0" allowTransparency="true" src="http://10.62.0.15/haproxy?stats">
</div>
I'm completely open to any suggestions or alternative approaches here, I'm getting a bit desperate!
Here's how i would handle this issue : have one 'load' div on top of the iframe to prevent the blinking from being seen.
Then before loading you fadein the warning --> when fadein is finished you trigger load --> when load is finished you fadeout the warning.
fiddle is here :
http://jsfiddle.net/bZgFL/2/
html is :
<iframe
width=500px
height=300px
id = 'myFrame'
style='position:absolute;top:0;'
src = 'http://jsfiddle.net/'
>
</iframe>
<div id = 'myLoad'
style='float:top;top:0;
position:absolute;
background-color:#CCC;
min-width:500px;
min-height:300px;
'>
<div style='position:absolute;top:130px;left:200px;'>
<b> Loading... </b>
</div>
</div>
</div>
code is (using jQuery)
var ifr = document.getElementById('myFrame');
setFrame();
setInterval(setFrame, 3000);
function setFrame() {
$('#myLoad').fadeIn(200, setAdress);
}
function setAdress() {
ifr.onload=function() { $('#myLoad').fadeOut(200) ;}
ifr.src = 'http://jsfiddle.net/';
}
Obviously it needs fine tuning for the look, and if you want the user to be able to click the iframe, you'll have to disable pointer on top div, but it should get you going.
Can you put the two iFrames on the page and hide show them with CSS. This much less of an impact on the page than removing and inserting elements into the DOM.
Then add an onload event to both of them that triggers the current iFrame to hide and reload, while the new on shows? Use RequestAninationFrame to help reduce flicker. Code would look something like this.
var currentIFrame = 1;
$('iframe').on('load',function(){
$(this).show()
$('#iframe'+(currentIFrame=1-currentIFrame)).hide().delay(1000).reload();
})
This way you only do the switch once your sure the content has fully loaded.
I know this is an old question but I'm really not sure why someone didn't post this obvious solution....
Just paste this javascript code into any page that has an iframe.
<script>
// Preventing whiteflash in loading iframes.
(function () {
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] ||
document.getElementsByTagName('script')[0];
div.innerHTML = '<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(div, ref);
window.onload = function() {
div.parentNode.removeChild(div);
}
})();
</script>
It will simply renfer any iframe visibility:hidden until which time the iframe is loaded and then make it visible.
I operate a phpBB forum, on which I have installed this Syntax Highlighter MOD. Today, I started working on a feature that will use two DIVs to make the code box appear in full screen on the page. The DIV on which the user clicks to load the box in full screen will always have the same ID, but the syntax highlighter has a DIV ID which is random each time the page is loaded. I am having an issue with the DIV on which the user clicks always loading the first instance of the code box in full screen, regardless of which version of the DIV the user clicks on.
If you are have a hard time understanding what I am saying, here is an ugly, but usable demo. To make the ugly orange box load in full screen, click on the blue image above it. Each blue image is in its own DIV, both of which have the ID 'first'. The first ugly orange box has the ID 'testDIV' and the second has the ID 'testDIV2'. The code is written in such way that the DIV of each ugly orange box should be determined based on the DIV of the button. While my code works for this, it only works to find the first orange box.
Here is the code that I wrote that forms the demo.
<!-- HTML div Guniea Pigs -->
<div id="first" align="right"><img src="http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png" height="24" width="24" onclick="toggleFullScreen()" id="viewToggleImg" style="cursor:pointer"></div>
<div id="testDIV">DIV 1</div>
<!-- Round 2 -->
<div id="first" align="right"><img src="http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png" height="24" width="24" onclick="toggleFullScreen()" id="viewToggleImg" style="cursor:pointer"></div>
<div id="testDIV2">DIV 2</div>
<!-- div Styling, to help us see our guinea pigs. -->
<style>
body{
background:#000;
}
#testDIV{
background:#F58B00;
max-height:100px;
}
#testDIV2{
background:#F58B00;
max-height:100px;
}
</style>
<!-- JavaScript that will control the way that the page behaves on page toggling. THIS IS WHAT IS MOST IMPORTANT! -->
<script>
function toggleFullScreen(){
var toggleDIV = document.getElementById("first"); // This stores the ID of the toggle DIV.
var testDIV = document.getElementById("first").nextElementSibling; // Since the div ID will fluctuate each time during page load, this will acquire it for us using the previous div in relation to it.
if (document.getElementById("viewToggleImg").src == "http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png")
{
// If we are in here, then we are toggling to full screen.
document.getElementById("viewToggleImg").src='http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Exit_Full_Screen.png';
document.getElementById("viewToggleImg").style.marginRight ='20px';
toggleDIV.style.position = 'fixed';
toggleDIV.style.top = '0px';
toggleDIV.style.bottom = '0px';
toggleDIV.style.left = '0px';
toggleDIV.style.right = '0px';
toggleDIV.style.background = '#FFF';
toggleDIV.style.paddingTop = '10px';
testDIV.style.position = 'fixed';
testDIV.style.top = '44px';
testDIV.style.bottom = '1px';
testDIV.style.left = '1px';
testDIV.style.right = '1px';
testDIV.style.maxHeight = 'none';
}
else
{
// If we are in here, then we are toggling back to original page view.
document.getElementById("viewToggleImg").src='http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png';
document.getElementById("viewToggleImg").style.marginRight = '0px';
toggleDIV.style.position = 'static';
toggleDIV.style.background = 'none';
toggleDIV.style.paddingTop = '0px';
testDIV.style.position = 'static';
testDIV.style.maxHeight = '100px';
}
}
</script>
Could someone please offer some advice on how to resolve this issue?
The easiest way to fix this would be passing a reference to clicked element (viewToggleImg) using the this keyword:
onclick="toggleFullScreen(this)"
Then get the related elements through DOM traversal methods:
function toggleFullScreen(viewToggleImg){
var toggleDIV = viewToggleImg.parentNode;
var testDIV = toggleDIV.nextElementSibling;
And use those variables throughout your function. Updated pen
Though, I'd suggest using jQuery for easily doing such tasks in a non-obtrusive way and shimming compatibility with older browsers (nextElementSibling does not work for IE<9, in case you need/want to support it).
Though, you don't need jQuery for something so small that is already working, so here's the patched version using feature detection for nextElementSibling else the shim outlined in this answer:
function nextElementSibling( el ) {
do { el = el.nextSibling } while ( el && el.nodeType !== 1 );
return el;
}
function toggleFullScreen(viewToggleImg){
var toggleDIV = viewToggleImg.parentNode;
var testDIV = toggleDIV.nextElementSibling || nextElementSibling(toggleDIV);
//...
Pen & fullpage demo (tested in IE8)
Or with jQuery:
var testDIV = $(toggleDIV).next()[0];