I have a javascript function that I need to give her an 'ID' of div from onClick img tag
Is there any one that can help me I don't know what to do:
Html:
<img onclick="imgClicked"></img>
<div id="foo">...</div>
Javascript:
<script type = "text/javascript">
window.imgClicked = function(){
var div = document.getElementById("foo");
...//do anything you want...
}
</script>
You can find the div , on which the image is clicked by using event.target.nodeName
Setup an click event handler for Image, then u can use above to find out the div of the image clicked.hope it helps..
Related
I am new to coding so I am looking for the simplest way to take and image and show or hide it based either on one button or via radio button controls. Currently the image is on as an but i can use the any recommend method. If at all possible from a different page on my site.
For a button, you could use
<html>
<body>
<script type="text/javascript">
function addimage() {
var img = document.createElement("img");
img.src = "IMAGE_URL_HERE";
img.height = IMAGE_HEIGHT;
img.width = IMAGE_WIDTH;
//optionally set a css class on the image
var class_name = "foo";
img.setAttribute("class", class_name);
document.body.appendChild(img);
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
I am new in jquery I desperately need some help in running this code.I am trying to create a fade in-fade out image banner with 4 images within div tag, with the help of a function fadingbanner() which calls itself recursively and is initiated by a settimeout function.But for some reason its not working.Please help....
<HTML>
<HEAD>
<script type= "text/javascript" src="C:\Documents and Settings\A\Desktop\jquery-1.9.1.js"></script>
<SCRIPT>
<div>
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp1.jpg" id = "i1">
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp2.jpg" id = "i2">
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp3.jpg" id = "i3">
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp4.jpg" id = "i4">
</div>
function fadingbanner()
{
$(document).ready(function(){
$("#i1").fadeOut(2000,function(){
$("#i2").fadeIn(2000,function(){
$("#i2").fadeOut(2000,function(){
$("#i3").fadeIn(2000,function(){
$("#i3").fadeout(2000,function(){
$("#i4").fadeIn(2000,function(){
$("#i4").fadeout(2000,function(){
fadingbanner();
});
});
});
});
});
});
});
}
</SCRIPT>
</HEAD>
<BODY>
<IMG NAME = "bannerimage" src = "C:\Documents and Settings\A\Desktop\web_files\temp1.jpg" height = "200" width = "600" onload = "settimeout("fadingbanner()",1000)">
</BODY>
</HTML>
Take out the function and it should work ok. It is only defining a function and never running it. If it did run it, all it would do is schedule the code to run when the document finishes loading.
You also want to hide all but the first picture at the start.
So it should be like:
$(document).ready(function(){
$("#i2, #i3, #i4").hide();
$("#i1").fadeOut(2000,function(){
... all that other stuff
});
});
Here is a fiddle showing it: http://jsfiddle.net/ePBkX/1/
I borrowed the pictures there from the fiddle attached to this, which you might want to read: jQuery fade out then fade in
I have a issue with html2canvas showing the screenshot in a canvas div.
Actually the picture will be show in
<div id="content"> </div>
But i like to show the code in my canvas
<div id="content">
<canvas id="myimage"> HERE I LIKE TO SHOW THE IMAGE</canvas>
</div>
In the inline javascript i can change the div container-id, but i dont know how to change the code to get the image in the canvas element.
<script type="text/javascript">var date=new Date();var message,timeoutTimer,timer;var proxyUrl="http://urlcanvas.appspot.com";function addRow(a,c,d){var b=$("<tr />").appendTo($(a));b.append($("<td />").css("font-weight","bold").text(c)).append($("<td />").text(d))}function throwMessage(b,a){window.clearTimeout(timeoutTimer);timeoutTimer=window.setTimeout(function(){message.fadeOut(function(){message.remove()})},a||2000);$(message).remove();message=$("<div />").html(b).css({margin:0,padding:10,background:"#000",opacity:0.7,position:"fixed",top:10,right:10,fontFamily:"Tahoma",color:"#fff",fontSize:12,borderRadius:12,width:"auto",height:"auto",textAlign:"center",textDecoration:"none"}).hide().fadeIn().appendTo("body")}$(function(){$("#recommended a").click(function(c){c.preventDefault();$("#url").val(this.href);$("button").click()});var a,b;$('input[type="button"]').click(function(){$(a.contentWindow).unbind("load");$(a).contents().find("body").html2canvas({canvasHeight:b.body.scrollHeight,canvasWidth:b.body.scrollWidth,logging:true})});$("#getscreenshot").click(function(d){d.preventDefault();$(this).prop("disabled",true);var c=$("#url").val();$("#contentx").append($("<img />").attr("src","loading.gif").css("margin-top",40));var f=document.createElement("a");f.href=c;$.ajax({data:{xhr2:false,url:f.href},url:proxyUrl,dataType:"jsonp",success:function(e){a=document.createElement("iframe");$(a).css({visibility:"hidden"}).width($(window).width()).height($(window).height());$("#contentx").append(a);b=a.contentWindow.document;b.open();$(a.contentWindow).load(function(){var g=$(a).contents().find("body"),h={onrendered:function(j){$("#contentx").empty().append(j);$("#getscreenshot").prop("disabled",false);$("base").attr("href","")},allowTaint:true,taintTest:false,flashcanvas:"src/flashcanvas.min.js"},i=html2canvas(g,h)});$("base").attr("href",f.protocol+"//"+f.hostname+"/"+f.pathname);e=e.replace("<head>","<head><base href='"+f.protocol+"//"+f.hostname+"/"+f.pathname+"' />");if($("#disablejs").prop("checked")){e=e.replace(/\<script/gi,"<!--<script");e=e.replace(/\<\/script\>/gi,"<\/script>-->")}b.write(e);b.close()}})})});</script>
Here is a good reference create screenshot of webpage using html2canvas (unable to initialize properly) Hope it will help.
If i understood well you need to append the canvas like this:
html2canvas(document.getElementById("content"), {
onrendered: function(canvas) {
document.getElementById("content").appendChild(canvas);
}
});
I am new to Magento, in the checkout page. I have a text field and onblur of the text field will open a fancy box popup.
so in the checkout.phtml I placed a div to show their content in the pop up and set CSS attribute display as none.
In on blur I called a JS function and load the poup, for that I write the JS function - jQuery(".zipformcont").fancybox().trigger('click');
zipformcont is class name of div.
The issue is pop up is loading with an error - "The requested content cannot be loaded.
Please try again later."
Please help me to fix this. thanks.
Instead of using .trigger(); why not call fancybox like this:
jQuery.fancybox();
Fancybox triggers depending on the selector its connected to. Not the div its going to open.
jQuery(function(){
jQuery('#zipcode').blur(function(){
jQuery.fancybox({
"content":$('#formcontainer'),
"hideOnContentClick": true,
"hideOnOverlayClick": true
});
});
});
This should do it and get rid of the onblur attribute
I tried another option and it is working fine now.
Option
1) Created a div with CSS attribute - display as none
<div style="display:none"><a id="azcodelink" href="#zipcode_form">test</a></div>
2) In the textfield, Onblur called a JS function
<input type="text" name="namefld" id="namefld" value="" onblur="openpopup()" />
3) In the JS function, I trigered the click function of "azcodelink"
function openpopup() {
$("#azcodelink").trigger('click');
}
4) The id - zipcode_form - has the pop up content
<form id="zipcode_form">
...
</form>
Thats all..
Thanks for all your support.
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none',
iframe : {
preload: false
}
});
});
</script>
<script type="text/javascript" src="http://dev.smartparcelbox.com/skin/frontend/rwd/default/js/jquery.fancybox.pack.js"></script
I'm trying to load content from another page div into another page div.
What i've got:
JQUERY:
$('#news_date-1').load('test.php .news_date-1');
TEST.PHP
<div class="news_date-1">20-11-2009</div>
Destination.html
<div id="news_date-1"></div>
The result i get =
<div id="news_date-1"><div class="news_date-1">20-11-2009</div></div>
The result i want =
<div id="news_date-1">20-11-2009</div>
Can anybody help out?
You can try calling unwrap() on it in the callback.
$('#news_date-1').load('test.php .news_date-1', function () {
$(this) //will refer to #news_date-1
.find('.news_date-1') //find the inserted div inside
.contents() //find all its contents
.unwrap(); //unwrap the contents, thus removing the unneeded div
});
This is not the most beautiful solution, because .load() already inserts it into the DOM, and then you tamper with the DOM again, which should be minimized.
Another way I see is using $.get() instead:
$.get('test.php', function(receivedHtml) {
//getting only the parts we need
var neededHtml = $(receivedHtml).find('.news_date-1').html();
//adding it to DOM
$('#news_date-1').append(neededHtml);
});
Try this:
$.get('test.php', function(data) {
$('#news_date-1').append($(data).find('.news_date-1'));
});