JQuery: Hover On One Element To Show A Div?
Aug 19, 2009
I want to provide an element over which a user can hover the cursor to display a small div directly below it, out of the flow of the document so that it appears above it. A kind of overlay with some text for a short bio in it, not unlike a JS tooltip but bigger.
I need to keep the div accessible, but hidden, so I know that I will have to position it absolutely off-page and override that with the JS. It's important that the div is not visible on screen if JS is blocked, as it would cover other content. If it can slide out or whatever instead of just appearing, that would be a big plus. I use jQuery, but I'm not totally familiar with it yet. Here's an example of the HTML:
HTML Code:
<div id="header"><p class="">About Me</p></div>
<div class="">
<h4>About Me</h4>
<p>Text for a brief bio</p>
</div>
So what JS do I need to write in order to get this to happen? Or is there by any chance a lightweight plugin that happens to do exactly this?
View 1 Replies
ADVERTISEMENT
Aug 30, 2011
Latelly I've been using jquery scripts made by somebody else, but know I want to start coding them by myself. I've bought a book for it, called 'jQuery Novice to Ninja' but that will take a week to get it.
I'm trying to do something quite simple, but I dont know how to do it, actually.
Something like this:
<a href="http://lulzimg.com/view/c9be81.png" target="_blank"><img src="http://i25.lulzimg.com/c9be81.png" border="0"></a>
When the visitor hovers the 'Action Button' - that can be a div - a hidden div would show up. The thing is that I want the div to disappear when the mouse if off the un-hidden and 'action button' div. If it disappears when the mouse is off the 'action button', it would look kinda useless :)
View 11 Replies
View Related
Mar 29, 2011
I'm having some trouble with the following construction. I have a worldmap image with an image map where you can hover over a few countries. When you hover over a country a pane will slide down and show an image about the country.Now this is all working well except for the following.When you hover over a country and quickly hover over another the pane will slide back up and after the slide it will slide back down. All well except for the problem that the image change will start while the pane is sliding back up and not after it!Here's the code.
$(".TulipMap").hover(
function () {
mapname = "#d" + $(this).attr("ID");
[code]....
View 2 Replies
View Related
Dec 22, 2010
I am attempting to create a sort of popup effect when you hover over a certain div (.box)This is the code I have worked out but nothing seems to work.What I think it is supposed to do is on hover of the div "box" the opaque id will show which has the styling to make the entire page opaque around the div. None of it works however. And yes, this in in wordpress if there are any conflict issues.
jQuery("body").append("<div id='opaque' style='display: none;'></div>");
jQuery('.box').hover(function() {
jQuery(this).show('#opaque');
[code]....
View 5 Replies
View Related
Apr 1, 2010
how can i achieve this in jquery.. when i hover my mouse it will show some link like the RSS, Permalink..just like in the picture..coz i want to add some delete option on my page.
View 3 Replies
View Related
Sep 16, 2009
I have created a script that shows a hidden DIV when the user clicks on a text title. However when you hover on the title, you don't get any mouse feedback because it's not a hyperlink. So I would like to add some sort of hover effect to #title so it that changes to the mouse pointer to hand to simulate a hyperlink.
This is the code I currently have:
<script type="text/javascript">
$(document).ready(function(){
$('#title').click(function () {
$('#show').slideToggle();
[Code]....
Or am I just better off using the CSS display option to change the pointer to a hand? Not sure how browser compatible that is.
View 1 Replies
View Related
Jun 8, 2010
I'm looking for a plugin or some help. Looking to create a calendar which can be paged back and forth through months and years. Additionally I would like to add events to the calendar so when a day has an event it is coloured differently and when user hovers over the event details are shown in a tooltip.
View 2 Replies
View Related
Jun 7, 2011
I have a series of links on a page whereby when the user hovers over the title then an image appears next to the link so it basically shows/hides the image on mouseenter and mouseout. I'm presuming this is a fairly basic jQuery request but I've been hunting around for a while now and can only seem to find more complex examples that I can't seem to disect.
The code in my page is:
So when the user hovers over the "Link" then it will show "myimage.jpg" next to the link.
View 4 Replies
View Related
Sep 11, 2011
I'm doing a show/hide div on hover, and what I have works...only when I hover over the .pics-nav div, it blinks repeatedly.
$(document).ready(function() {
$('#product-images').mouseover(function(){
$('.pics-nav').fadeIn();
}).mouseleave(function(){
[Code].....
how to solve a situation like this? Just a super-duper simple thing, but I'm having lots of problems with it.
View 1 Replies
View Related
Jul 1, 2011
I have lots of pets in a dropdown. what i want to achieve is that when ever i hover on dropdown, it will display the image of particular pet as a popup.
View 1 Replies
View Related
Oct 13, 2011
I have the following markup:
<div class="Field">
<label for="City">City</label>
<input type="text" id="City" name="City" value="">
<ul>
[Code]....
not sure if this is the best way. Can I improve it?
However I am having problems in adding (2).
Basically I think I need:
$(this).closest("div.Field"). Label or span.Label that are not inside LI.addClass("Hover")
View 4 Replies
View Related
Jun 2, 2009
I am trying to place several hover/tool tips using jQuery in a page that contains a flash elemnt to the right. When viewed in a browser the hover/tool tip appears partially below the adjacent flash element.
View 1 Replies
View Related
Jul 30, 2009
I am trying to implement a div containing an advanced search form drop down on hover and I have everything working (only in FF) except for when I try to add any sort of animation or speed to the '.show' or'.hide' effect. When I try to add speed or seemingly any other effect to the div, the select elements of the search form fires the hover
[Code]...
View 1 Replies
View Related
Nov 18, 2010
I have a simple navigation system, and I am using hover, to show/hide details, but if I hover back and forth too fast between the elements, the animation queues up and keeps executing even when I am not hovering over them.
[Code]...
I can use stop() on animate to prevent queuing, but doing it like in the code above, stops the animation from even happening. Please suggest a solution.
View 3 Replies
View Related
Jul 19, 2009
I wanted to show on hover my delete button(X). But it seems its not working. can anyone see my code and tell me what is wrong am doing?
View 14 Replies
View Related
Dec 18, 2010
The website is [URL]. When you bring your mouse on "Home" at the menu on top, the appearing menu is not visible behind the amazon widget there. This works fine in FF but as for IE, there is the problem.
View 5 Replies
View Related
Mar 20, 2009
How do i set the hover attribute of an element?
View 5 Replies
View Related
Aug 24, 2011
I am trying to create an image slider than when hovered over shows a div with text relating to the image...here is the code:
Code JavaScript:
$(document).ready(function(){
//Image slider behaviour
rotateImages(1);
[Code]....
View 3 Replies
View Related
Jul 29, 2009
I didn't found the same problem ine the groupes: I would like to show error msg already in the page Exemple:
<input type="text" name="myTextField">
<span>This textfield cannont be empty</span>
if error the span will become showed. and not show error with the js
View 1 Replies
View Related
Jul 29, 2010
I have several divisions with a hidden division within them, like this:
[Code]...
With that script, if I click on one of the parent divisions ALL of the hidden divisions are shown. That's not what I want. I tried several variations of the script using (this), but I just kept getting errors.
View 3 Replies
View Related
Jun 14, 2010
Consider the following:<div id="item-1">
<a href="#">The Link</a>
<div>The contents shown on hover only</div>
</div>
I'm positioning elements absolutely. I want the child DIV to show when I hover over the link. Here is how I'm accomplishing this:
$("#item-1 a").mouseover(function() {$("#item-1 div").fadeIn('fast');})
$("#item-1 a").mouseout(function() {$("#item-1 div").fadeOut('fast');})
This works wonderfully. But I would like to make this generic so that I need 2 lines of code, not 2 times however many items I have.
View 1 Replies
View Related
May 4, 2009
I know the show() or hide() methods, but what if I just wanted to show say half of an element and hide the other half? is this possible using jquery?
View 1 Replies
View Related
Aug 3, 2009
I'm building a website with JQuery. Now I need to check if an object is shown, with show()
My jqeury to hide all the elements at start:
[Code]...
View 4 Replies
View Related
Aug 2, 2010
show/hide future element in the DOM. I have something like this where it will be triggered by a modal dialog (e.g. a facebox)
<div id="parent" style="display:none">
<a href="#" id="link">click me</a>
<div>
I am hoping on click me I can show/hide the parent. I did
$("a#link").live('click", function() {
$(this).parent().hide();
};
But because parent wasn't available so it seems the hide event wasn't able to bind to the parent.
View 6 Replies
View Related
Jan 10, 2012
How would I start to go about this? I'd like an <h3> to display and slide in whenever the user scrolls to a certain position on the page. For example, once a certain content div is 50% displayed in the viewport, I'd like the animation to fire.
View 2 Replies
View Related
May 25, 2011
i've been breaking my brain about this issue for a bit now, so here is my question.
I have a SELECT with various OPTIONS
<select id="myselect" name="myselect">
<option value='$variable' >1 - variable ammount of this option</option>
<option value='$variable' id="showOption">2 - gets added once at the end of the SELECT</option>
[Code]....
View 4 Replies
View Related
