Hiding a div through javascript - javascript

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)

Related

Can't focus on editable link with IE

I dispose of the following code :
<!DOCTYPE html>
<body>
<a id="toto" contenteditable="true">Button</a>
</body>
<script>
var elt= document.getElementById('toto');
elt.focus();
</script>
</html>
When the page is loaded, the cursor is already in place and you just have to type what you want. The trouble is that it doesn't work with IE11.
Since this works with other tags like <div>, I assume I just have to make <a> focusable for IE. Any ideas how ?
There are two issues here. First, IE automatically focuses on the body element after the page has loaded. So if your code is exactly as in the question, it will set focus on the a element but this will be overridden a few nanoseconds later, after the load event is triggered. A simple way to avoid this is to make sure the focus is set only after load. Example:
<a id="toto" contenteditable="true">Button</a>
<script>
window.onload = function() {
var elt= document.getElementById('toto');
elt.focus();
}
</script>
But IE also seems to have an issue with setting focus on an a element without an href attribute. Whatever the cause might be, you can circumvent this a) by adding href="javascript:;", but this is awkward and causes link formatting to be applied, or b) by changing the a element to e.g. a span element;

Panel only showing on specific page

I need a working javascript code which shows a certain panel only on one specific page on my website and hides it on the rest. It's a forum-esque setup.
Here's what I got so far.
<script type="text/javascript">
function ShowPanel()
{
if(document.location.href == "http://www.exampleurl.com")
{document.getElementById("panel").style.display = "block";}
else
{document.getElementById("panel").style.display = "none";}
}
</script>
<div id="panel" onload="ShowPanel">
Example text.
</div>
According to the example code I've looked up, all of this seems to be reasonable, but obviously there's an error somewhere. Nothing happens.
Thanks for checking!
The problem is that the onload event cannot be used on a DIV element. onload can only be used on the document body or an external resource (iframe, image, scripts).
Your best bet is to place your JavaScript at the bottom of the page instead.
e.g.
<div id="panel">
Example text.
</div>
<script language="JavaScript">
if(document.location.href == "http://www.exampleurl.com"){
document.getElementById("panel").style.display = "block";
}
else {
document.getElementById("panel").style.display = "none";
}
</script>
Check what the document.location.href really is on the page by typing it into your console (F12, usually). For instance, most browsers will add the trailing slash onto a server name even if there isn't one in the URL. The match has to be exact for your code to work as written.
Another options is to compare document.location.pathname, which will have everything after the server name. If you want to make a case insensitive compare, you can use document.location.pathname.toLowerCase().

Is there a way to stop this javascript bug in IE9

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.

Image visibility one

I have a few images with: visibility:hidden and an onClick event which sets its visibility to visible. Images have an id of Img_(somenumber)
How can I make so that when one image is visible all others should be hidden?
Using jquery you could try the following:
Add a class to the set of images you want to manipulate their visibility. e.g.
Then for each image you could to the following for the onclick event:
<img src="{img_src}" class="myImages" onclick="$('img.myImages').hide(); $(this).show();" />
The above, of course, requires that you change each image tag.
If you cannot do that (large number of images), then try using a function that will be triggered when the document loads and will add a handler for the 'onclick' event of each image. Again this easy easily achieved using jquery or another js library.
There are a ton of ways to do this. I'm pretty sure you will want to think through it more. BUT, For an answer without jQuery. Add this as your onClick handler. Make sure you pass the this keyword.
<img onclick="toggleVisible(this);" src="" />
Include this function in your page somewhere:
function toggleVisible(clickedLI) {
var imgs = document.getElementsByTagName('img');
var i = imgs.length;
while (i--) {
var img = imgs[i];
if (img.id.indexOf('Img_' == 0)) {
img.style.visibility = img.parentNode == clickedLI ? 'visible' : 'hidden';
}
}
}
The first problem you will run into is that there is no way to bring back the hidden images. They are there, taking up space in the document, but they won't respond to the click events (at least not in Chrome.) Consider giving more detail in your question. As andreas said, if you have a lot of images there are more efficient ways.

Javascript problem with iframe that's hidden before loaded

I have a page that contains an iframe that gets loaded using Javascript:
index.html
<iframe id="myFrame" width="800" height="600" style="display: none;"></iframe>
<div id="loader"><!-- some loading indicator --></div>
<script type="text/javascript">
function someFunction() {
var myFrame = document.getElementById('myFrame');
var loader = document.getElementById('loader');
loader.style.display = 'block';
myFrame.src = 'myFrame.html';
myFrame.onload = function() {
myFrame.style.display = 'block';
loader.style.display = 'none';
};
}
</script>
The page that gets loaded in the iframe contains some Javascript logic which calculates the sizes of certain elements for the purposes of adding a JS driven scrollbar (jScrollPane + jQuery Dimensions).
myFrame.html
<div id="scrollingElement" style="overflow: auto;">
<div id="several"></div>
<div id="child"></div>
<div id="elements"></div>
</div>
<script type="text/javascript">
$(document).load(function() {
$('#scrollingElement').jScrollPane();
});
</script>
This works in Chrome (and probably other Webkit browsers), but fails in Firefox and IE because at the time jScrollPane gets called, all the elements are still invisble and jQuery Dimensions is unable to determine any element's dimensions.
Is there a way to make sure my iframe is visible before $(document).ready(...) gets called? Other than using setTimeout to delay jScrollPane, which is something I definitely want to avoid.
Some browsers assume that when "display:none" is applied to replaced elements (like Flash or an iframe) the visual info for that element is no longer needed. So, if the element is later displayed by the CSS, the browser will actually recreate the visual data form scratch.
I imagine that having the iframe default to "display:none;" makes the browser skip the rendering of the HTML so the tags don't have any dimensions. I would set the visibility to "hidden" or position it off the page rather than use "display:none;".
Good luck.
instead of making the iframe invisible by using display:none, you could try to...
... set visibility:hidden
... set position:absolute; top:-600px;
... set opacity:0
or something else that makes jQuery "see" the objects but not the user (and reset the used css-attributes in your myFrame.onload function).
visibility:collapse;
display:hidden;
height:0px;
Will work to get rid of white space too..
The iframe will also load..
Hidden iframes are a huge security issue. Probably best to try to find another way to accomplish what you want, if it is legitimate, because hopefully future browsers will get rid of this feature altogether. http://blog.opendns.com/2012/07/10/opendns-security-team-blackhole-exploit/

Categories

Resources