In the following markup, the "tip1"'s visibility is supposed to change from 'hidden' to show when the parent is moused over. Then when "tip1" is clicked, "line1" is supposed to appear. It works fine in Firefox and Chrome but, of course, not in IE.
<div id="product-description" style="position:relative; float:left; width:35%">
<div onmouseover="display(this.firstChild)" onmouseout="getRid(this.firstChild)" style="position:absolute; left:146px; top:29px; z-index:2000">
<div id="tip1" onclick="showTip(this.nextSibling)">
<img "shadow.png" />
</div>
<div id="line1" style="position:absolute; left:15px; top:-5px;" onclick="closeTip(this)">
<img "fb.png" />
</div>
</div>
</div>
And here is the corresponding javascript:
<script>
function display(items){items.style.visibility = "visible";}
function getRid(items){items.style.visibility = "hidden";}
function showTip(tip){tip.style.visibility = "visible";}
function closeTip(tip){tip.style.visibility = "hidden";}
</script>
Your code won't work in any modern browser. firstChild returns the first node in an element. This node can also be a textnode, in your case it's a new line + TAB. Textnodes don't have style to set, hence the code will fail.
Use firstElementChild instead.
The same stands for nextSibling, use nextElementSibling instead.
A live demo at jsFiddle.
This turned out to be an issue of z-indexing on IE. I had an image under the hover s which for whatever reason kept covering up my hover buttons. So I removed that image and created another div with a background-image.
Related
I have html like this...
<div id="parentDiv">
<div class="childLine">
hello1
</div>
<div class="childLine">
hello2
</div>
<div class="childLine">
hello3
</div>
</div>
And I want to use javascript to remove the last appearing instance of childLine (i.e. in this example the div containing hello3).
So I'm doing this...
$(document).ready(function() {
$("#parentDiv .childLine")[$("#parentDiv .childLine").length-1].style = "display:none";
});
Here's the live example: https://codepen.io/d3wannabe/pen/BRRQBv
If you open that in Chrome or Firefox you'll only see the first 2 lines (correctly), whereas if you open in Safari the third div will not be removed. Likewise on the iPhone (even using the Chrome app) the third div remains.
Any ideas why I'm seeing inconsistent results across browsers?
I'm trying to clone a jQuery object, its children, and no references. My understanding is that clone() should accomplish this, but in IE11, the second time I try to append one of the child objects to the blank surrounding div, that child object no longer exists. You can see this by clicking "click me" twice in my snippet, using IE11.
I think my problem may be that the child references were cloned, so the blank div overwrote them, but may be wrong about this. So far, clone() has worked the best for cloning the parent element. I prefer to use jQuery rather than getElementsByClassName. I did not have luck using $.extend(true, {}, $('.allItems'));
I would appreciate any help with this!
window.$allItems = $('.carousel_item').clone();
$('.link').on('click', function(evt) {
evt.preventDefault();
$('.blue').html('').append('<div id="bills"></div>');
$('#bills').append($allItems[0]);
});
.blue {
background-color: #d0e4f2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
clickme
<div class="blue">
<div id="bills">
<div class='carousel_item'>
<img src='http://fillmurray.com/150/200'>
<div>
<span>Tomatoes</span>
</div>
</div>
<div class='carousel_item'>
<img src='http://fillmurray.com/200/200'>
<div>
<span>Film</span>
</div>
</div>
</div>
</div>
Solved this.
To append the carousel item more than once after appending a blank div, I needed to clone the DOM elements each time the function was called. I needed to add one line to the click listener:
$allItems = $allItems.clone();
I have a problem when hiding/showing certain elements in IE8. If an element with display:inline-block has any child (including nested children) with display:block, then any child of that element has problems when hiding/showing. The page does not redraw correctly, and other elements position do not change to reflect the newly hidden/shown elements.
The minimal markup that shows the problem is below. In the example, when you click 'Clickable element', then the three divs directly below are hidden. However, the Footer Div does not change position - a large gap is left. If you do something to force a page redraw, such as selecting all text on the page, then the footer jumps to the correct position.
Something similar happens when showing the elements. Instead of the footer div being pushed to the bottom, it is overlapped by the newly shown elements.
<div style="display:inline-block">
<div>
<!-- Any number of other HTML elements -->
<div style="display:block">
<div class = "clickable" >Clickable element.</div>
<div class = "toggleable">Hideable element 1.</div>
<div class = "toggleable">Hideable element 2.</div>
<div class = "toggleable">Hideable element 3.</div>
</div>
</div>
</div>
<div>Footer Div</div>
<script type="text/javascript">
$('.clickable').click(function(){
$('.toggleable').toggle();
});
</script>
I've been trying to break this down for a fair while now, and I'm almost certain that I've got the minimal problem down (inline-block element followed by block element, and perform a show/hide on a child element). Has anybody encountered this before - or any suggestions on how to work around this?
This should do the trick. As the answer below states, inline-block isn't supported in older browsers and shows some quirky behaviour in certain versions of IE8. I've remembered this fix from something I did a while back, but I'm sorry, I can't give you a full explanation as to why this is happening. Anyhow, add a float to your main div, and clear your footer and, fingers crossed, it should work.
<div style="display:inline-block;float:left">
<div>
<!-- Any number of other HTML elements -->
<div class="div-2" style="display:block">
<div class = "clickable" >Clickable element.</div>
<div class = "toggleable">Hideable element 1.</div>
<div class = "toggleable">Hideable element 2.</div>
<div class = "toggleable">Hideable element 3.</div>
</div>
</div>
</div>
<div style="clear:left">Footer Div</div>
Seems to be working fine in here... But note that IE8 have some problems rendering jquery, and the css property 'inline-block' is not really supported by old browser versions (ie7, doesn't work, ie8, i'm not sure). Try adding the "zoom:1;" fix to the css of your tags that have the inline-block going on. Hope that helps somehow.
I have a very simple div with an image inside:
<div class="stack4">
<img src="images/002m.jpg" width=200>
</div>
And a very simple Jquery function for when you hover over the image:
$(function () {
$('.stack4>img').hover(function(){
prompt('hello');
});
});
This all works fine. However, I'm trying to add additional content to the page, and so put the following HTML directly after the end of the first div:
<div id="menucontainer" class="menuContainer">
<div id="menu" class="menuContent">
<img src="images/003m.jpg" />
<img src="images/004m.jpg" />
</div>
</div>
After I add this, the jquery prompt no longer works. Why would adding anothing div break my existing javascript command like that?
There has to be a script error in the page that is causing a failure. Or there is a very slight chance that your new html in some way introduces an invisible element that covers your stack4 image. If you can provide a link somebody could debug it for you.
It breaks because the selector no longer matches any elements (because the class selector .stack4 does no longer match any element).
<div id="menucontainer" class="menuContainer">
<div id="menu" class="menuContent">
<img src="images/003m.jpg" />
<img src="images/004m.jpg" />
</div>
</div>
$(function () {
$('.stack4>img').hover(function(){
prompt('hello');
});
});
If you look at your javascript, it will:
match any child image of an element with class name stack4
Add a hover listener to each image
Display a prompt on hover.
IF you look at your updated DOM structure, class stack4 no longer exists. To make it work again, you have to replace this selector with your new equivalent, which would be the div with id=menu and class=menuContent.
Now, depending on your needs, you can target either #menu>img or .menuContent>img. If you go with the first one, the javascript fragment will only work for a single menu, with the id of menu. However, if you choose the second approach, any content with the class menuContent will have this functionality. So I'd go with:
$(function () {
$('.menuContent>img').hover(function(){
prompt('hello');
});
});
This jsFiddle example works in Google Chrome, but in Internet Explorer then when the close icon is clicked the browser removes the pop-up element but results in the text 'none' being displayed in the browser window. Please explain how I can resolve this issue.
HTML:
<div id="popup">
<!-- Close popup link -->
X
</div>
Use onclick for the event handler instead of href http://jsfiddle.net/AE2X3/4/
<div id="popup">
<p>This is a pop-up.</p>
</div>
I think what's happening is that the assignment is returning its result, and the browser is then displaying that. If you add void(0) to the end of your JavaScript, it won't be displayed.
Let me add that amit_g's answer is more correct than mine. He correctly points out that this sort of behaviour belongs in the OnClick handler, not in the href attribute.
This works:
<div id="popup">
<p>This is a pop-up.</p>
</div>
Demo