I'm using jQuery to append a youtube video when a button is clicked.
onclick="$('#videogallery').append('<iframe width=725 height=398 src=http://www.youtube.com/embed/8Pi-dHJSkrk frameborder=0 allowfullscreen></iframe>');"
I'm then using jQuery again to remove it when another button is clicked.
onclick="$('iframe').remove();"
It works fine the first time around but If I add the video, remove it, and then try to add it again. It adds and removes itself instantly.
Why is this happening? It seems like the $('iframe').remove(); function is running constantly after the button is clicked.
EDIT
Here is the expanded version of the code.
<div class="product-media" id="product-media1">
<map name="submenu3" onclick="$('iframe').remove();">
<area shape="rect" coords="0, 0, 95, 25" onClick="swap3('product-media1','product-details1');">
<area shape="rect" coords="103, 0, 213, 25" onClick="swap3('product-media1','product-specs1');">
</map>
<img src="images/submenu3.jpg" alt="" border="0" usemap="submenu3" /><br /><br />
<p> </p>
<div id="videogallery">
<a rel="#voverlay" href="#" onclick="$('#videogallery').append('<iframe width=725 height=398 src=http://www.youtube.com/embed/8Pi-dHJSkrk frameborder=0 allowfullscreen></iframe>');">
<span class="thumb" onClick="swapvid"><img src="images/video.jpg" alt="" align="left" /></span><span></span>
</a><br />
Watch Scotch-Brite™ Radial Discs in action
</div>
</div>
This works fine: http://jsfiddle.net/YssHJ/
$('#add').click(function(){
$('#vid').append('<iframe width=725 height=398 src=http://www.youtube.com/embed/8Pi-dHJSkrk frameborder=0 allowfullscreen></iframe>');
});
$('#del').click(function(){
$('iframe').remove();
});
EDIT: fiddle using a map click http://jsfiddle.net/YssHJ/2/
Related
I have an image with a map and located an area like this:
<img src="Stockwerk_Namen_Dosen_Belegung_2012_07_03.ai2.svg" width="1202" height="294" alt="Plan" usemap="#planmap">
<map name="#planmap">
<area shape="rect" coords="9,7,60,70" alt="1.4.08" onclick="myFunction()" target="_blank">
<area shape="rect" coords="8,83,61,148" alt="1.4.07"
onclick="myFunction()" target="_blank">
</map>
.
.
.
<script...>
function myFunction() {
//Here is my Problem
}
`
</script...
How can I put the alt-Text into the Function?
In an event handler function (like onclick), this will refer to the element that the event fired upon (i.e. the <area>). You can use that with getAttribute.
I'm trying to make a page that loads custom content into a div based on a click in an image map.
This is just some of the code, but the problem is that the content in the div with ID piece does not change when I click the link with ID dec.
I have tried normal links and many other techniques, but can't seem to get it working.
Appreciate all help!
<map name="cake_01Map">
<area shape="poly" coords="249,246,250,25,130,46,249,246" href="#" alt="Desember" id="dec">
<area shape="poly" coords="365,47,250,246,252,23" href="#" alt="Januar" id="jan">
<area shape="poly" coords="448,134,252,251,368,49" href="#" alt="Februar" id="feb">
</map>
<div class="container">
<div class="row">
<div class="col c4" id="piece">Content here</div>
<div>
<img src="img/kake_01.png" alt="" width="500" height="500" usemap="#cake_01Map" id="cake_01" />
<img src="img/kake_02.png" width="500" height="500" alt="" usemap="#cake_01Map" id="cake_02" />
</div>
</div>
</div>
<script>
$('#dec').click(function() {
$('#piece').html('Content December');
});
$('#jan').click(function() {
$('#piece').html('Content January');
});
$('#feb').click(function() {
$('#piece').html('Content February');
});
</script>
I have a slider which attaches slides through external page attached through data attributes.
Here is what's happening:-
Main Page
<div id="sitewrapper">
<section class="sliderwrapper">
<div id="slider" data-source="slides-page.html" data-speed="500" data-easing="swing">
<ul>
</ul>
</div>
<div id="loader"><span id="load"></span></div>
<a class="button" id="back"></a>
<a class="button" id="next"></a>
</section>
<!--end sitewrapper-->
</div>
<script>
$(function() { //run when the DOM is ready
$('.internalclick').click(function(e) {
alert("I clicked Area Tag" + $(this).attr('data-direct'));
});
});
</script>
Slides page (slides-page.html)
<li class="hslide" data-id="1"><img src="content/01.png" usemap="#Map">
<map name="Map">
<area shape="rect" coords="331,158,538,297" href="#" class="internalclick" data-direct="I-need-to-direct">
<area shape="rect" coords="546,154,745,305" href="#">
<area shape="rect" coords="331,311,543,445" href="#">
<area shape="rect" coords="550,309,733,443" href="#">
</map>
</li>
<li class="hslide" data-id="2"><img src="content/02.png"></li>
<li class="hslide" data-id="3"><img src="content/03.png"></li>
<li class="hslide" data-id="4"><img src="content/04.png"></li>
Problem
Now above all works fine when I try to add a Click function on two the list elements (slides) in the slides page. Notice the first where I added href="#" class="internalclick" data-direct="I-need-to-direct". Now the problem is to access it.
When I am trying to run a small Click function in the main page, I am unable to run the function. Any idea how I can make a click function that scopes the area tag in the slides page?
Thanks
The problem is internalclick is loaded after you add the event handlers. You need to use event delegation.
$("#sitewrapper").on("click",".internalclick", function(e) {
var direct = $(this).data("direct");
console.log(direct);
});
I have a popup div with more than one span element how to display another span
javascript
$(document).ready(function() {
$(".levert").click(function () {
$("#popUpDiv").show("slow");
});
});
HTML
<div id="popUpDiv" style="display:none">
<img src="logo_klein.png" width="117" height="33" class="logoklein1" ><p
id="headertextbox">is</p></img>
<span class="textbox1"></span>
<span class="textbox2"></span>
<span class="textbox3"></span>
</div>
</div>
Imagemap with links
<img id="logo" src="./logo.png" alt="Phlox" usemap="#links"></img>
<map name="links">
<area shape="circle" coords="291,46,46" href="#" class="levert"></area>
<area shape="circle" coords="55,245,46" href="#" class="is"></area>
</map>
Do this when you want to clear popupDiv and add span with class textbox2
$("#popUpDiv").empty().append('.textbox2').show("slow");
just joined today loved this site already.
My Question is that. i am trying to create 6 Menus for my Web. like Eg { home, about us, service ..... } and i want the images to change whenever the users mouse hovers the menu's. I got the scrip actually from online souce. But it was an example for one image Here are the codes:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}
And for the body
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')"
onmouseout="roll_over('but1', 'icon1.gif')">
<IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>
Now i tried to multiply these five times, ( just repeated the codes and changed the picture name ) - But whenever i hover on the images they do not change.
So my Q - is: How do you make the above code from a one image changer to 6?
Thanks !
Try using an id for each image (id must be unique, so there should be no elements with the same id):
<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')" onmouseout="roll_over('but1', 'icon1.gif')">
<IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50" ID="but1" BORDER="0" />
</A>
And this code:
function roll_over(img_id, img_src) {
document.getElementById(img_id).src = img_src;
}
Ok I figured it out. Should set a unique name for every Image.
Try this code
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<script>
function roll_over(img_name, img_src)
{
document[img_name].src = img_src;
}
</script>
<A HREF="some.html" onmouseover="roll_over('but1', '10.gif')"
onmouseout="roll_over('but1', '10-roll.gif')">
<IMG SRC="10-roll.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>
<A HREF="some.html" onmouseover="roll_over('but2', '1-roll.gif')"
onmouseout="roll_over('but2', '1.gif')">
<IMG SRC="1.gif" WIDTH="100" HEIGHT="50"
NAME="but2" BORDER="0">
</A>
<A HREF="some.html" onmouseover="roll_over('but3', '2-roll.gif')"
onmouseout="roll_over('but3', '2.gif')">
<IMG SRC="2.gif" WIDTH="100" HEIGHT="50"
NAME="but3" BORDER="0">
</A>
hope this works