I have a VML map like this:
(A sample of the structure used)
<div class="map" jQuery1351170963063="74">
<div class="usmap" jQuery1351170963063="75">
<group class="g vg" style="visibility: visible;" jQuery1351170258860="79" height="256px" width="434px" coordsize="21600,21600">
<shape class="vmap" id="Maryland_md" jQuery1351170258860="105"/>
<shape class="vmap" id="Delaware_de" jQuery1351170258860="104"/>
<shape class="vmap" id="Alaska_ak" jQuery1351170258860="94">
</group>
</div>
</div>
On IE7 & IE8, sometimes the mouseenter event is not firing while hovering over the shape nodes.
JS code:
var $canvas = $(".usmap", $this);
var $canvasParent = $canvas.parent();
var mouseenterEvent = "mouseenter";
var mouseleaveEvent = "mouseleave";
$(".g", $canvas).delegate(element, mouseenterEvent + " " + mouseleaveEvent, onMouseEnterVMLShape)
.add($canvas).add($keys).add($canvasParent).mouseleave(onMouseLeaveVMLShape);
Related
I'm not sure why this is not working but in my App.tsx I do
return(
<div id="expander">
<button onClick={handleClick}> This is a button </button>
<div id="button1">
</div>
{ clicked && <Visualize name="someName"/>}
</div>
)
So I clearly define a div with id of button1
Then in visualize I do
var selectDiv=d3.select('#button1')
var svg = selectDiv.select('svg'),
inner = svg.select('g');
var render = new dagreD3.render();
// // Run the renderer. This is what draws the final graph.
render(inner, g);
render()
{
return (
<div>
<svg className={this.props.name}>
<g/>
</svg>
</div>
);
}
The structure of the HTML elements is
I solved it by using append for svg and inner.
The following code works to change multiple related images on the same page when a single button is clicked:
<!-- RR buttons -->
<div class="wrapper-9">
<button onclick="changeImage()" id="2" class="box">2</button>
</div>
<!-- RR images -->
<img id="theFirstImage" src="RR/images/singles/RR-1.png">
<img id="theSecondImage" src="RR/images/rhythm-1.png">
<img id="theThirdImage" src="RR/images/riff-1.png">
<script>
function changeImage()
{
document.getElementById('theFirstImage').src="RR/images/singles/RR-2.png";
document.getElementById('theSecondImage').src="RR/images/rhythm-2.png";
document.getElementById('theThirdImage').src="RR/images/riff-2.png";
}
</script>
How can I adapt this code to accommodate MANY different buttons, not just one? I have 54 buttons in total. My naming convention ensures that the buttons and the images all correlate by number: that is to say, button "2" corresponds to images "RR-2.png", "rhythm-2.png", and "riff-2.png"; button "46" corresponds to "RR-46.png", "rhythm-46.png", and "riff-46.png". The solution must have to do with excerpting the numeral from the id of the given button, and then inserting it in the source call... but I can't figure out how to do it. I've tried this, to no avail:
<!-- RR buttons -->
<div class="wrapper-9">
<button onclick="changeImage()" id="1" class="box">1</button>
<button onclick="changeImage()" id="2" class="box">2</button>
<button onclick="changeImage()" id="3" class="box">3</button>
</div>
<!-- RR images -->
<img id="theFirstImage" src="RR/images/singles/RR-1.png">
<img id="theSecondImage" src="RR/images/rhythm-1.png">
<img id="theThirdImage" src="RR/images/riff-1.png">
<script>
function changeImage()
{
var currentLabel = $(this).closest('.box').find('button').attr("id");
document.getElementById('theFirstImage').src="RR/images/singles/RR-'" + currentLabel + "'.png";
document.getElementById('theSecondImage').src="RR/images/rhythm-'" + currentLabel + "'.png";
document.getElementById('theThirdImage').src="RR/images/riff-'" + currentLabel + "'.png";
}
</script>
Would welcome any insight into what I'm doing wrong!
Ah, solved it! Found the answer here: JavaScript - onClick to get the ID of the clicked button
<!-- RR buttons -->
<div class="wrapper-9">
<button class="box" id="1" onClick="reply_click(this.id)">1</button>
<button class="box" id="2" onClick="reply_click(this.id)">2</button>
<button class="box" id="3" onClick="reply_click(this.id)">3</button>
</div>
<!-- RR images -->
<img id="theFirstImage" src="RR/images/singles/RR-1.png">
<img id="theSecondImage" src="RR/images/rhythm-1.png">
<img id="theThirdImage" src="RR/images/riff-1.png">
<script type="text/javascript">
function reply_click(clicked_id)
{
document.getElementById('theFirstImage').src="RR/images/singles/RR-" + clicked_id + ".png";
document.getElementById('theSecondImage').src="RR/images/rhythm-" + clicked_id + ".png";
document.getElementById('theThirdImage').src="RR/images/riff-" + clicked_id + ".png";
}
</script>
I just followed w3school tutorial for this bootstrap modal image. I have two image cards in my page. So I need to popup that two images. But it's working with one image only.
Link to w3school article
<!-- Trigger the Modal -->
<img id="myImg" src="http://d14dsi4x2zx6ql.cloudfront.net/files/styles/welcome_image/public/VCW_TI_5_BayLoop_Hero_Manley_1280x642_sized.jpg?itok=EaARDZt8" alt="">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
I insert "myImg" id in my other image, but it didn't work. First image popup worked as I expect. What will be missing here?
You can't give two elements the same id
if you want to do the same action for both you can give them class
<img class="myImg" src="http://placehold.it/850x450" alt="image1" width="200">
<img class="myImg" src="http://placehold.it/700x400/f00" alt="image2" width="200">
and js will be:
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementsByClassName('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
//iterate over img to add click event for each one,, jquery will make it much easier
for(var i=0;i< img.length;i++){
img[i].onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
//jquery option
/*$('.myImg').on('click', function(){
modal.style.display = "block";
modalImg.src = $(this).attr('src');
captionText.innerHTML = $(this).attr('alt');
})*/
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
Demo
Id must be unique, See an example here. https://fiddle.jshell.net/wg5p60g7/
I want to change the set of 5 image on page refresh called in html.
the images should called this under the body tag:
<img src="images/side-logos/1.jpg" alt="">
<img src="images/side-logos/2.jpg" alt="">
<img src="images/side-logos/4.jpg" alt="">
<img src="images/side-logos/5.jpg" alt="">
I want to called the set of images under the body tag not in javascript.
I have searched a lot on website but everyone calling the image in javascript not under the body tag.
So Please help me if anyone has the solutions for it.
just replace onclick event with window refresh event
HTML
<div id="box">
<img id="image" />
</div>
<br />
<input type="button" value="Randomize!" onClick="randImg()" />
JS
var images = [
"http://static.ddmcdn.com/gif/lightning-gallery-18.jpg",
"http://static.ddmcdn.com/gif/lightning-gallery-19.jpg",
"http://static.ddmcdn.com/gif/lightning-gallery-20.jpg",
"http://static.ddmcdn.com/gif/lightning-gallery-17.jpg"];
function randImg() {
var size = images.length
var x = Math.floor(size * Math.random())
document.getElementById('image').src = images[x];
}
randImg();
demo
EDIT
new_demo
Unfortunateley, you can only do this with javascript.
To do that, here is some code that is placed in the tags
<script type="text/javascript">
function Randomize() {
var images = new Array("one.jpg","two.jpg","three.jpg","four.jpg");
var imageNum = Math.floor(Math.random() * images.length);
document.getElementById("divid").style.backgroundImage = "url('" + images[imageNum] + "')";
}
window.onload = Randomize;
</script>
The name of the images shoukd be in the images array and the "divid" is where you want the images to appear.
I have implemented a modal popup using an IFrame. I use some javascript to hide the main content (Popup2_Panel1) and display a loading message (Popup2_Panel2) while the IFrame is loading. When the IFrame has finished loading (iframe's onload event) I hide the loading message and unhide the main content (with IFrame). This works in IE/Safari/Chrome/Opera, but in FF the IFrame content is blank after the main content is made visible.
How I can make this work in FireFox? If I leave out the hide/show code then the IFrame is visible in FireFox, but I don't really want to show the content before the iframe has loaded new content, otherwise we see the old content momentarily.
Here is my code:
<script type="text/javascript">
function ShowPopup(srcUrl, titleCaption, width, height) {
var frame = document.getElementById("Popup2_Frame");
// This code causes the IFrame to be blank in FireFox
document.getElementById("Popup2_Panel1").style.display = "none";
document.getElementById("Popup2_Panel2").style.display = "";
frame.width = width + "px";
frame.height = height + "px";
var title = document.getElementById('Popup2_Caption');
if (title) {
title.innerHTML = titleCaption;
}
frame.src = srcUrl;
var mpe = $find('Popup2_MPE');
if (mpe) {
mpe.show();
}
}
function PopupLoaded(frame) {
// This code causes the IFrame to be blank in FireFox
document.getElementById("Popup2_Panel1").style.display = "";
document.getElementById("Popup2_Panel2").style.display = "none";
var mpe = $find('Popup2_MPE');
if (mpe) {
mpe._layout();
}
}
</script>
<asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="ImgButton13" PopupControlID="Popup2_Window" BackgroundCssClass="popupModalBackground" OkControlID="Popup2_OK" CancelControlID="Popup2_Cancel" Drag="True" PopupDragHandleControlID="Popup2_Titlebar" BehaviorID="Popup2_MPE">
</asp:ModalPopupExtender>
<div id="Popup2_Window" class="popupWindow" style="display: none;">
<div id="Popup2_Panel1">
<div id="Popup2_Titlebar" class="popupTitlebar">
<span id="Popup2_Caption">Caption</span>
<img id="Popup2_ImgClose" runat="server" style="float: right; cursor: pointer;" src="~/Masters/_default/img/delete.png" alt="Close" onclick="javascript:document.getElementById('MainContent_Popup2_Cancel').click()" />
</div>
<div class="popupContent">
<iframe id="Popup2_Frame" class="popupFrame" frameborder="0" onload="PopupLoaded(this)"></iframe>
</div>
<div class="tasks">
<Exhibitor:ImgButton ID="Popup2_OK" runat="server" CssClass="icon" Text="OK" ImgSrc="~/Masters/_default/img/action-yes.png" />
<Exhibitor:ImgButton ID="Popup2_Cancel" runat="server" CssClass="icon" Text="Cancel" ImgSrc="~/Masters/_default/img/action-no.png" />
</div>
</div>
<div id="Popup2_Panel2" class="popupLoading">
<center>
Loading...<br />
<br />
<asp:Image ID="Popup2_ImgLoading" runat="server" ImageUrl="~/Masters/_default/img/loading.gif" />
</center>
</div>
</div>
The solution is to use:
frame.style.visibility = "hidden";
...
frame.style.visibility = "visible";
instead of
frame.style.display = "none";
...
frame.style.display = "";
It appears FireFox will not display the IFRAME contents at all after setting display="none" and then trying to set display="", even though it appears to be loading the URL in the background. If we set visibility to hidden the element is hidden but still takes up space so we have to do some additional juggling to give it a zero size while loading.