I'm trying to replicate a Facebook wall-like effect where hovering over a feed item displays a "Delete" button. The button is invisible on page load, but hovering over the item displays that particular item's delete button. This is achieved with jQuery and the CSS display property.
This works all well and good in browsers such as Safari, Chrome and Firefox, but come to Internet Explorer 7 and it's a no-go.
Here's an example:
http://www.woohoobingo.com/wall.html
The above link is a rendered page within the site featuring the wall, with the hover feature working in Safari et al but not Internet Explorer 7 (untested in other versions due to lack of resources).
If any one could shed some light on how to rectify this problem so IE adds the hover class when hovering over the list item and not the text within the list item only, then that would be great.
Hi #Martin it is working but somehow the delete button is not being considered a part of the div or container which is show it on hover. I've written the stuff below and it is working well. You may get any clues from this.
<div id="divA" style="border:1px dotted white;width:500px;clear:both;">
<div id="divLogo" style="height:20px;width:20px;overflow:hidden;float:left;">
<img src="arrow.png" alt="logo" style="height:20px;width:20px;"/>
</div>
<div>Hello World this is the message written on the wall.....</div>
<div id="divDelBtn" style="width:50px;height:25px;top:1px;float:right;">
<span style="background-color:#c0c0c0;color:#ffeeee;display:none;">Delete</span>
</div>
<div id="otherStuff" style="font-size:70%;color:#0f0f33;">
posted by #me on 18/jan/2010 12:34 PM</div>
</div>
<script type="text/javascript">
$(function(){
$("#divA").hover(function(){
$("#divA").css("border-color","red");
$("#divA #divDelBtn span").show();
},
function(){
$("#divA").css("border-color","white");
$("#divA #divDelBtn span").hide();
});
});
</script>
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?
on the following site: http://www.strategix.co.za/ on that page you will see the heading OUR SOLUTIONS with the 8 hover over boxes.
what I'm trying to do is to wrap a href around each box so that not only when you hover over does it display the right side div but you can click on the box which takes you to the relevant page.
so in the code:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
I try say:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
But the minute I save it in wordpress it removes the ahref. I also tried this:
<div class="left2">
<div class="box2"><div>Microsoft Dynamics ERP</div></div>
</div>
But that didnt save either. I just need each seperate whole box to have an href.
Will appreciate some help.
Thanks.
Try
<div class="left2">
<div class="box2" onclick="javascript:window.location.href='link';">Microsoft Dynamics ERP</div>
</div>
Using javascript is one way to apply a link to an entire div.
Getting weird problem on mobile (Chrome and Safari).
I have a modal say with id xyzModal with me. I have a link which opens this modal.On desktop link appears on hover only.
So on the mobile to overcome hover effect what I have done is display the link always and oveeride the hover method
$('#link').hover(function(ev){
ev.preventDefault();
$('#xyzModal').modal()
});
Problem with this is modal comes and disappears immediately in fraction of second.
Strange part is its working fine if I do $('#xyzModal').modal() directly on the console. Moreover to the amazement modal working fine on the long press of the link also. Has anybody come across this behaviour.Its working fine in mobile firefox though.Cannot create a fiddle as fiddle will override my current library setup. Just tell me in which direction I need to search. Getting pretty clueless over here.
Thanks for your help in advance.
The easiest way to do this is to use Bootstrap's good ol' query classes (show/hide elements responsively) to swap between two modals in desktop and mobile and placing two buttons under query classes too.
Something like this:
HTML:
<!--BUTTONS-->
<div class="hidden-xs" id="link1">Open Modal</div>
<div class="visible-xs" id="link2">Open Modal</div>
<!--MODALS-->
<div id="xyzModal1" class="hidden-xs">
<!--modal codes here-->
</div>
<div id="xyzModal2" class="visible-xs">
<!--modal codes here-->
</div>
JS:
$('#link1').hover(function(){
// place modal xyzModal1 code here
});
$("#link2").click(function() {
// place modal xyzModal2 code here
});
I have a webpage containing several Divs which contain individual 'pages'. I have defined the following CSS styles:
#charset "utf-8";
/* CSS Document */
.hideDiv{
display:none;
}
.showDiv{
display: inline;
}
Everything worked fine and for a long while we had no problems either viewing our pages in Safari on our Macs or in IE6 (which our client uses).
We then updated Safari from 4.0.5 and we suddenly had page elements initially appearing incorrectly positioned. The first page is OK but when you click 'Next' an image positioned to the right of the layout appears initially offset considerably to the right mostly outside its containing Div clipping most of the image. However as soon as I resize the window the image jumps into it's correct position. If you click from say page 2 to page 3 and then click back again to page 2, so the image has been cached, it displays correctly.
We painfully downgraded Safari on some Macs and soldiered on with others hoping an update would fix it. Curiously everything works well on my new Mac Pro running Safari 6. The pages always display fine in IE6. My MacBook Pro running Safari 5.1.7 always offsets the images.
I don't believe it is a Browser issue but an area of my code which isn't very robust and some Browsers don't interpret the code as we would want it.
I created fresh html files which are identical to the multi-div page but contain only one 'page'. The layout is solid every time I display it in Safari 5.1.7 so I don't think it is my html/CSS which defines the position of the element. Here is a typical Div containing a single 'page':
<!-- Page 1 -->
<div class="showDiv clear" id="page1">
<div id="bgPic-components">
<!-- Sub-Heading -->
<h1>Sub-Heading</span></h1>
<!-- Page Content Area -->
<div class="contentTextArea fullWidth">
<div style="position:absolute; width:280px; z-index:2;">
<p>Some body text here.</p>
</div>
<table style="position:absolute; right:40px; bottom:40px; z-index:0;">
<tr><td>
<img src="../../medialibrary/3DI/3DI0315.02.01.jpg" style="display:block; position:relative; height:440px;"/>
<p class="padCaption">Annotation</p>
</td></tr>
</table>
<table style="position:absolute; bottom:24px; z-index:0;">
<tr><td>
<img src="../../medialibrary/photographs/P0825.01.01.jpg" alt="" style="display:block; position:relative; height:300px"/>
<p class="padCaption">Annotation</p>
</td></tr>
</table>
</div>
</div>
</div>
I would be very grateful for any suggestions to help me narrow down and find the problem.
Regards
Chris
So I'm designing a website (using WordPress), and I want to use JQuery to hide/show a certain element when another element is moused over. The HTML looks roughly like this
<div class="post" style="clear:both;">
<a href="...">
<img src="..." />
</a>
<div class="autohide">
<h3>
...
</h3>
<p>....</p>
</div>
</div>
...
<div class="spacer" />
and the JQuery looks like this:
jQuery(document).ready(function(){
jQuery(".post .autohide").hide();`
jQuery(".post").hover(function() {
jQuery(this).nextAll(".spacer").first().stop().html(jQuery(this).children(".autohide")
.html()).fadeIn();
},function() {
jQuery(this).nextAll(".spacer").stop().show().fadeOut().html("").hide();
});
});
What's supposed to happen is, when the user mouses over the image, the contents of the associated autohide <div> get transplanted into the next spacer <div> and then faded in; when they mouse out, the autohide <div> fades out and clears.
However, if the pointer is not over the image for the full fade-in time, then the max opacity of the spacer div seems to decrease until a mouse-over creates no effect at all.
I would be much obliged if anyone who knows more JQuery than I could shed some light on this subject; I assume it's a basic problem (I've never used JQuery before this project).
Thanks in advance.
I took the .stop() calls out, and it seems to work fine, but I am still trying to parse everything that is going on.
http://jsfiddle.net/f3EJ3/