JQuery :: Swap Divs On Hover?
Sep 19, 2010
When I mouseover over the list items below, I would like a DIV that I specify (in this case corresponding by number - but I would like the flexibility to define the div name individually if numbers don't exist, or don't match up [I'm using Drupal, and everything is dynamically generated]) to slide out, or just appear, beneath it (the list will be inline). It needs to stay open so people can click the link that appears in the DIV, but when you mouseout from the DIV or the list item, the div needs to disappear.
My HTML looks more like this:
<div
id
=
"navigation"
[Code]....
I'm not familiar with how this code is working, and have been trying to work it out, but I'm not sure I understand the use of "idx" and how the singular "slide" term comes into play.
View 1 Replies
ADVERTISEMENT
Oct 14, 2010
I have been trying to do some tooltips for a website and desperately wanted to learn something new and do that with jQuery.However, every time a mouse hovers over a tooltip, all hidden divs are shown, not just the one that supposed to. Here's my html:
Code HTML4Strict:
<div class="tip">
<a href="#"></a>[code].....
View 2 Replies
View Related
Sep 10, 2011
I am trying to roll out a 24 hour event, where at the top of every hour one div is swapped out for another. The code I'm using is:
onload=function(){
var rightNow = new Date();
var day = rightNow.getDay();
var hour = rightNow.getHours();
[Code].....
But, it only works with two instances of it...for two divs. If I put the code in three or more times, to swap out 3 or more divs, it doesn't work.
I'm thinking I should be able to write everything into one block of code, but can't figure it out. Any suggestions? I'm sorry to bother people with this, I just can't find any info online and I want to test it out ASAP so I know if I have to abandon the effort and try something else. I would just like to avoid having to build it in Flash too.
View 2 Replies
View Related
Jun 11, 2010
I am showing an image possibly 957x30 pixels size on a page. Whenever there is a mouseover or hover on this image, it is swapped with another image (say 957x130 pixels) by expanding its division in slidedown fashion and stays visible for few seconds before swapping back with first image.
View 1 Replies
View Related
Jun 5, 2009
I'm trying to do a basic image swap when a link is mouseovered. The idea is that you hover over a group of links that is associated with that image, and the image lights up. I have different sets of links and images all over the page.markup looks something like this:
<div class="container-left">
<img src="/images/logo1-off.jpg" alt="" width="75" height="75" />
<div class="text">
[code]....
View 1 Replies
View Related
Dec 7, 2011
I'm trying to achieve an effect where background image will change once you hover over a different link, but not sure how to go about that...Here's what I got:
HTML
<ul id = "list">
<li id="home"><a href="#">HOME</li></a>
<li id="about"><a href="#">ABOUT</li>
<li><a href="#">PORTFOLIO</li>
<li><a href="#">WORK</li>
<li><a href="#">CONTACT</li>
<li><a href="#">GET A QUOTE</li>
</ul>
CSS
body {
background-image: url(Images/home.jpg);
} ul li {
list-style-type:none;
font-size:36px;
font-family:Impact, Charcoal, sans-serif;
} a:hover {
background-color:#7EB6FF;
-moz-border-radius: 15px;
border-radius: 5px;
width:40px;
} a:link {
text-decoration:none;
}
And JS should probably go something like this:
$("#about").hover(function() {
$(this).css("background-image", "url('Images/about.jpg')");
});
Though this only leads to image being show only partially (given that its li element only, I suppose).
View 5 Replies
View Related
May 28, 2010
I have a listing of items on the page and each one has a <div> with a description in it. There are two versions of each description, one short and one full length. I like the user to be able to swap between them by clicking the 'more' and 'close' links. The problem with what I wrote is that it applies to all the divs on the page instead of the specific one that was clicked. What can I change to correct it?
The jQuery:
$(document).ready(function() {
$('div.desc > p.desc-full').hide();
$('a.more').click(function() {
$('div.desc > p.desc-trunc').slideUp('fast');
[Code].....
View 1 Replies
View Related
Mar 1, 2010
Currently I'm using this code:
$(document).ready(function(){
//when a link inside our thumbba div is clicked
$('#thumbb a').click(function(event){
//prevent the default behavior(going to the page)
[Code]....
to swap out content from a hidden div (swap-b) into the visible div (swap-a) - this works great, however, I have 12 of these "hidden" divs on the page, and I want each one to behave independently. Currently, when I click the swap button for one div, it activates all the others. I get that this is because all the divs have the same IDs, and that the function is telling all the divs to behave the same, however, I don't see how I'm supposed to apply this function to each div independently. I've tried using a "this" function to make it work, however that just breaks the function.
View 12 Replies
View Related
Jan 24, 2009
I'm using DreamWeaver CS3's image rollover code, but I'm trying to edit the code so that when you click the image, the hover state stays selected.
Then, when you hover anc click another image, the first image reverts back to it's original state. I've scoured the Internet, but can't find anything that works.
Here's the current javascript code:
Code:
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
[Code].....
View 1 Replies
View Related
Dec 19, 2010
URL..when you hover over an image, I've used .hover to fadeIn a DIV called 'zoomicon' for that image, but my problem is that when you hover one image, not only does the zoomicon for that image fade in, but all instances of zoomicon fade in, as well as fade out.how do Iseparateinstances of zoomicon to fade in and fade out for their respective image blocks?[code]
View 3 Replies
View Related
Feb 1, 2010
I have 5 different thumbnail pictures. I also have two divs - "pic" is a larger picture of a thumbnail and the other "details" is description of the person in the picture.I would like the two divs to change depending on which thumbnail the mouse is hovering over.
HTML Code:
<body>
<div id="pic">
<img src="image1_large.jpg" alt="Image 1" class="Image1_large">
</div>
[code]....
View 5 Replies
View Related
Jun 30, 2010
I need a onmouseover / hover effect.I already found several solutions for changing the SAME background color e.g. as the div you move the mouse over.But what I need is...a navigation div... where, when I move my mouse over, DIFFERENT divs (at least two) will change its color (and changes it back to the default color after mouse isn't over it anymore)...And it also should change the image of the navigation button itself as well as some other graphic. (the last two I already have)
View 5 Replies
View Related
May 8, 2010
i have been tryin for a long time to get both of the javascripts(for the thumbnail to main img swap and the navigational arrow swap) to work in synchit needs to be so that after clicking on a thumbnail then on an arrow, the correct image in the correct order appears. as of now they are running separately and one has no influence on the other. forgive me if im not being clear. i keep trying to replace the id that one script is looking for with the same id from the other but this will not work..why?
View 9 Replies
View Related
Mar 23, 2011
This is what I'm trying to do: I want a simple image container to swap the image inside it by clicking the nav buttons on the right like 1, 2, 3.Here's my code:
HTML
Code HTML4Strict:
<div id="item1">
<div class="img-container shadow" style="background-image:url(images/gallery/tcg1.jpg)">[code].....
My jQuery code is not right. I want it to turn off the "hover" class and the "show" class of the others when you click one. I think I need some kind of if..else? how to write it? I have a bg image set on the container div so there's an initial image to view.I also need multiple of these on the same page!
View 1 Replies
View Related
Aug 19, 2009
I'm looking for some javascript to work with wordpress (jQuery preferrably) that will show/hide multiple divs on one click.
I had one working but it was kinda janky because it was causing me to have two divs with the same ID on one page. No good.
Since I updated to wp2.8.3 prior to launch, it's not working. So I've decided to just try and do it right.
Here's a page: [URL]
So, what I want to happen: On page load, the first tab: "general" and it's corresponding div beneath should be showing. And the first image should be showing. The other content divs and images should be hidden. I've given the text content divs a dashed border to show their borders. When a visitor clicks "dine at home" the general div and image hide, the second content div shows, as does the second image (it's currently the identical image, but the client may change later.) Etc.
I'll be using this function on a few other pages as well.
how to adjust this javascript to work on two different IDs at once?
current code:
Code:
<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.imgswap > div');
[Code]....
View 2 Replies
View Related
Mar 28, 2011
I am a complete novice with Javascript, but am trying to work out how I can get a button to swap to another image when clicked, and each image have a different URL attached. I want to use this to toggle the bgcolor of my page using this script:
Code:
<script type="text/javascript">
<!--
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
[Code]...
View 1 Replies
View Related
Jan 22, 2009
I am using javascript to switch between a series of divs, on clicking a navigation tab the divs display property is set to 'block' and all other divs have their display property set to 'none'. That works fine, the problem I have is when I redirect to another page (e.g. a PHP script) on return to the index the divs have reset and only the default div is shown, rather than the div that was showing when the user left the page. The solution, as I see it, is two stages: Write a function to display the relevant div based on the variable passed to it, then work out how to pass this variable around various pages (post/get). I am very inexperienced with javascript and it drives me mad that the script literally does nothing rather than throwing up an error (as in PHP) but this is what I have so far in terms of a function:
[Code]...
View 2 Replies
View Related
Jun 4, 2011
Umm, this is a tricky one to add a descriptive title for!
Basically I have two links on the page that go to the same page when clicked. What I want to do is when I hover over one of those links for the hover to work for both of them and visa versa.
So I have this links
<a class="connected" href="">Connected</a>
<a class="remove" href="">Remove</a>
a.connected { background: url(../images/connected.png) no-repeat 0 top; }
a.connected:hover { background: url(../images/connected.png) no-repeat 0 bottom; }
[Code]....
View 6 Replies
View Related
Jul 21, 2009
I have a page that is a displaying a Movie, or it's really 3 Movies but to get to the 2nd Movie the user has to click a "Next" button. My problem is that I want to delay this button to appear until the movie is more or less done... could be 7 or 16 minutes. What would be the easiest and most propriate way to do this using jQuery... swaping out one DIV for another once after X minutes?
View 4 Replies
View Related
Jun 3, 2010
I have a large div with a Google Map and a much smaller div with Google Streetview. I want the user to be able to click a button and make the large div show the street view and the small div show the map. I'm hoping jQuery can be used to make this 'easy' somehow?
I just don't know how to approach this ..
1) Resize the divs and change z-order?
2) Swap the id of the divs and somehow trigger a refresh?
3) Swap the html using jquery?
View 3 Replies
View Related
Sep 26, 2011
I just need to replace a DIV with another DIV on mouse click.I'm assuming the best way to do this is with replaceWith().[code]
View 6 Replies
View Related
Apr 13, 2011
i am trying to get each imageloaded into div while mouse over but it does not work. jQuery is new for me what is wrong with jQery code i have no idea could you help please. here is the code.
[Code]...
View 2 Replies
View Related
May 26, 2011
[URL].. I want the slider's navigation arrows to change on mouse over.Nothing I've tried has worked. In the JS file, I've tried using:<img src="left.png" onmouseover="this.src='left-hover.png'" onmouseout="this.src='left.png'"/>
View 1 Replies
View Related
Jul 15, 2010
I'm a jQuery novice to say the least so please bear with me here.I need to swap out some images in a timed sequence. I found a tutorial online which kind of does what I need. Here is the code:
function
swapImagesMaps
(){
[code]....
View 2 Replies
View Related
Oct 26, 2010
I would like slideUp to show some text and slideDown to hide the text. Is this possible? If so, how do I do it?
View 2 Replies
View Related
Jan 25, 2010
How to disablea buttonon page load (not an actual submit button -- an image that's hyperlinked) and then enable it and swap out the image once the "next" button is clicked?
View 1 Replies
View Related
