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);
});
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 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");
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/
I used jquery.maphilight, html map and area on the layout
This is my layout codepen.
(codepen here)
I want append status icon/image on red color area like this
so....what should I do?
If jquery.maphilight can't do that, Could recommend me other javascript?
<!DOCTYPE html>
<html>
<head></hrad>
<body>
<div>
<img style="width: 800px;height:600px;background-repeat:no-repeat;" src="https://online.visual-paradigm.com/images/features/floor-plan-designer/thumbnails/work-office-floorplan-template-02.png" alt="" usemap="#PClayout">
</div>
<map name="PClayout">
<!-- working -->
<area shape="rect" coords="200,100,300,200" id='PC1' href="#">
<!-- close-->
<area shape="rect" coords="490,100,600,200" id='PC2' href="#">
<!-- Error-->
<area shape="rect" coords="200,250,300,350" id='PC3' href="#">
</map>
</body>
</html>
function layoutalert(el, Color){
var data = $(el).data('maphilight') || {};
data.alwaysOn = true;
data.fillColor = Color;
data.strokeColor = Color;
$(el).data('maphilight', data).trigger('alwaysOn.maphilight');
$(el).data('maphilight', data).trigger('fillColor.maphilight');
$(el).data('maphilight', data).trigger('strokeColor.maphilight');
}
layoutalert("#PC1", '00ff00')
layoutalert("#PC2", 'ff0000')
layoutalert("#PC3", 'ff0000')
$('img[usemap]').maphilight();