I have a issue with some javascript code showing overlays in IE9, it works fine in Chrome, Firefox, even IE8. However when being run in IE9, several weird things happen.
Basically, hovering over the are is meant to make an overlay with some text appear, but in IE9, the first overlay is being cloned or something, so I'm getting a strip with the same styling and position of the first div, but none of the content.
Here's an example of how the HTML looks:
<img usemap="#mymap"/>
<map id="mymap">
<area id="first" onmouseover="ShowOverlay(this);" onmouseout="HideOverlays()";>
<area id="second" onmouseover="ShowOverlay(this);" onmouseout="HideOverlays()";>
</map>
<div id="first-Overlay" class="overlay" onmouseover="OverlayOnHover(this);" onmouseout="OverlayMouseOff(this);">
some text here.
</div>
<div id="second-Overlay" class="overlay" onmouseover="OverlayOnHover(this);" onmouseout="OverlayMouseOff(this);">
more text here.
</div>
And the javascript it's attached to is:
<script type="text/javascript">
var PreviousOverlay;
function ShowOverlay(sender) {
if (PreviousOverlay) {
PreviousOverlay.style.display = 'none';
}
NewOverlay = document.getElementById(sender.id + '-Overlay');
if (NewOverlay) {
NewOverlay.style.display = 'inline';
}
PreviousOverlay = NewOverlay;
return false;
}
function HideOverlays() {
if (PreviousOverlay) {
PreviousOverlay.style.display = 'none';
}
PreviousOverlay = null;
return false;
}
function OverlayOnHover(Overlay) {
Overlay.style.display = 'inline';
}
function OverlayMouseOff(Overlay) {
Overlay.style.display = 'none';
}
</script>
Using the Web Developer tools in IE, I can change the the "first-Overlay" display to inline, and then it will be visible along with the strip that is being returned by getElementById('first-Overlay').
Does anyone know what causes this in IE9? I've really hit a brick wall as far as thinking up workarounds goes.
I tried using jQuery, the bug still happened.
In the end my workaround was to add a dummy div with absolute positioning, etc in front of the first div. This div never gets shown, so the bug doesn't have any visible effect.
Related
I have the following code that creates a few functions: hidePara1(), which toggles between the CSS hidden attribute of a paragraph; and displayFrame(), which does the same with the display attribute of an Iframe. Both the paragraph and the Iframe are set to display:none and visibility:hidden respectively, using CSS.
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");
function hidePara1() {
Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}
function displayFrame() {
Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
And the HTML where the elements exist, and in which I also call the functions via onClick attributes.
Display iFrame
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>
<img id="img1" onClick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>
The problem is bizarre: both onclick events work perfectly, from the second click onwards. In other words, neither works when first clicked. This seems to be quite a common problem, judging by the tons of other similar questions I came across, but I can't figure it out, and one of those questions could help me. Note that it also needs to be vanilla JS - frameworks won't do.
A solution to this would be very appreciated.
Thanks
In the handler, you access Par1.style. The style property of an element refers to the style properties in an inline style="..." HTML attribute. You specified that elsewhere, you had something like the following in CSS:
#para1 {
display: none;
}
This doesn't get picked up in Par1.style.display. Look into getComputedStyle if you want to see what's currently applied. fiddle
Or just do your conditional the other way around:
Par1.style.display = ((Par1.style.display!='block') ? 'block' : 'none')
When you say that these elements are styled using CSS, I assume you mean "styled using some selector, e.g. #para1 { display:none; }".
Par1.style.display however, only looks for the style attribute on your div, which - in the case assumed above - is initially not set. Therefore, the first click will set style="display:none;" on the div, which you should be able to observe using developer tools or firebug.
FIDDLE DEMO
Your code works perfectly on the fiddle.
Display iFrame
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>
<img id="img1" onclick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>
<script>
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");
function hidePara1() {
Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}
function displayFrame() {
Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}
</script>
these:
var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");
shoud be done on load, i.e.:
// Global declaration, thos I don't think this matter as much as....
var Par1 ;
var Frame1 ;
// ...this. Your calls to getElementById() may be executing before
// the page has finished loading. Making the assignment in OnLoad
// guarantees the elements are available an I'm thinking should fix
// the issue with it not working first time through.
function init() {
Par1 = document.getElementById("para1");
Frame1 = document.getElementById("iframe1");
}
html:
<body onload="init();">
Using an image map, I am trying to build a graphic that when you click on a "wing" it makes it look like a button and depresses it.
Image map is built, onclick is working, but nothing happens?
This is the code:
<!DOCTYPE html>
<html>
<head></head>
<body>
<map name="location-map" style="cursor:pointer;">
<area id="spot_1" onClick="set_spot(this.id)" shape="poly" coords="66,78,122,38,194,15,186,106,174,112,160,118" />
</map>
<img src="PH.png" usemap="#location-map" id="spot_1" style="position:absolute;top:0px;left:0px;width:402px;height:302px;" />
<script type="text/javascript">
function set_spot(mouse_over_name) {
document.getElementById(mouse_over_name).style.display="none";
};
</script>
</body>
</html>
It is supposed to hide the image?
I have seen other solutions saying that the position of the JavaScript needs to be after the element. I have tried the script in every location and the out come is always the same. No change. I've also tried changing the width to 0 px and changing the image src to ""! I also had the images inside DIV's and tried hiding the DIV but again, nothing?
If I put an an alert:
alert(document.getElementById(mouse_over_name).style.display) before the change, I get a blank alert box, after I get "none."
What am I missing?
You can see the above code live here:
http://www.beaconfasteners.net/beacon_advantage/graph/test.html
Edit:
I have tried this in all major browsers.
Robby Cornelissen was correct. The reason that your img is not hiding is because the onclick uses the id of the area element and you're setting display: none on that, not the img element. I'm not sure if there is a way to hide the contents of an area element, but you could potentially use this to find and hide the image element that shares the same id as the area that is clicked:
function set_spot(mouse_over_name) {
[].forEach.call(document.querySelectorAll('img'), function(el) {
if (el.id === mouse_over_name) {
el.style.display = 'none';
};
});
};
This will iterate through all of the images on the page, so I can't make any guarantees about the speed of such a solution. You can preview it here:
jsfiddle
I'm having a javascript issue I can't figure out. I've taken a snippet of code that I got
here and am using it in this page.
The idea is that users can click the 'Print List' button and the listing is copied to a div within a hidden iframe and printed. The printed page contains the the iframe source HTML with the list inserted properly. However, in IE7 & 8, the printed page is the full parent page, not the iframe. The behavior in IE9, Chrome and FF is correct.
I tried debugging the script but I couldn't see where it was going wrong.
Here's the code that the Print List click triggers:
function printSection(id) {
if (document.getElementById('print_frame').contentDocument){
theIframe = document.getElementById('print_frame').contentDocument;
}
else {
theIframe = document.frames['print_frame'].document;
}
var thePrinter = theIframe.getElementById('print_section');
var theCopy = document.getElementById(id);
thePrinter.innerHTML = theCopy.innerHTML;
parent.print_frame.printPage();
}
And here's the printPage() function:
function printPage() {
window.parent.print_frame.focus();
window.print();
}
I'd appreciate any help. Please let me know if you need more information. Thanks so much.
A simpler solution might just be to use CSS media types to hide the content of the page and show an otherwise hidden element for print.
CSS
.print{display:none;}
#media print {
.pagecontainer{display:none;}
.print{display:block;}
}
HTML
<body>
<div class="pagecontainer">
Page content here
</div>
<div class="print">Only show this when printing</div>
</body>
My question is I have a div and I want to make it invisible through a javascript function, easy as that, seems like something a lot of people would have done, and I've researched it pretty thoroughly, however it doesn't seem to work. Here is my code (greatly simplified to just show the problem) Forgive the poor HTML formatting, I did that to keep the website from thinking I was trying to post a link.
function HideDiv()
{
var elem = Document.getElementById('divID');
elem.style.display = "none";
elem.style.visibility = "hidden";
}
function buttonFunction()
{
var elem = Document.getElementById('buttonID');
elem.src="a new url";
}
<div id="divID" style="background: url('a url') top center no-repeat " >
<center>
<anchor onclick="buttonFunction" (a hyper reference here)="#">
<img src="a url" vspace ="35" border = "0" id="buttonID">
</anchor>
</center>
</div>
Does having those anchors in the div prevent the hiding functionality? The reason I have both display and visibility on the div is that my understanding is that those functions work differently between firefox and IE, so I included both as a way to make sure that regardless of browser this will work. I have tried using either function individually in FF IE and Chrome to no result, the Div remains visible. Additionally, I'd like the anchors to become invisible as well if at all possible.
Thanks,
Tom
Document should be document.
I'm also not sure if having <anchor> instead of <a> was part of your attempt to "keep the website from thinking I was trying to post a link". (See David's answer below for how the entire <a> should be written.)
It may not be shown here, but I can't see where HideDiv() is called from.
<a onclick="buttonFunction(); return false;" href="#">
<img src="url" vspace ="35" border = "0" id="buttonID" />
</a>
jQuery makes this easy.
$("#divId").hide();
(haven't tried this, but I'm sure it's close to the correct syntax)
I'm quite new to javascript programming and got stuck in this problem: I have a div displaying a map made with flash. This flash features a magnifying glass icon, that when clicked, calls this javascript:
function turnMap()
{
DivSwitcher(map.id);
DivSwitcher(rightcolumn.id);
DivSwitcher(leftcolumn.id);
}
function DivSwitcher(layer)
{
if (document.getElementById(layer).style.display != "none")
document.getElementById(layer).style.display = "none";
else
document.getElementById(layer).style.display = "block";
}
All the called divs do exist, but the div with the map id is set with display: none. On both IE and Chrome, this code works just fine: the divs get hidden or displayed as I want, but on Firefox, it doesn't happen. I tried running with FireBug to see what happens:
map is not defined
If you guys could give me any leads I would appreciate it.
That is because the JavaScript variable map is not defined in the current scope, and that's all I can tell from your code.
My guess is that you are trying to access an element by calling its name, which is not supported. Maybe you can try:
DivSwitcher('map');
DivSwitcher('rightcolumn');
DivSwitcher('leftcolumn');