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].....
I am modifying some code. Unfortunetly, some of it is dependent on "other" code I don't have access to.
In a nutshell.
I have something like...
Code:
<div id="topnoshow" style="visibility: hidden;">some top content</div>
<div id="actiondiv" style="visibility: hidden;">
This div shows when some data is returned by the app. We have some js that grabs etc.. formats it etc.. and finally shows this div (see below).
</div>
<div id="bottomnoshow" style="visibility: hidden;">some bottom content</div>
So, those three divs are hidden, but the middle div is generating data etc... and eventually it will show (or maybe not).. BUT, I only wanna show these divs:
topnoshow
bottomnoshow
WHEN actiondiv is show(). I can't use a periodic executor OR add some code to the file that determines when to show "actiondiv".. but there is an event trigger set (see below).
The CODE I CAN'T MODIFY HAS THIS:
Code: jQuery('#actiondiv').trigger('actionmodule:loaded');
Can I somehow, in my file, do something off of that event? .trigger('actionmodule:loaded')
I awhen it comes to "developing" jQuery but I am trying to do something that is seemingly something simple but I can't for the life of me, figure out the best way to do it.
http:[url].....
Here, you'll see the area below the navigation that has five buttons which are supposed to help scroll between the five associated divs.All I want to do is hide the currently shown div and then slide in the div associated with the button clicked.http:[url].....Here is what the animation is SUPPOSED to look like but the problem is is that the correct one uses Prototype and I am trying to use only one library and jQuery is the most suitable because I use it for other effects in the site and jQuery and Prototype obviously don't mesh well.
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.
I am a beginner to jquery/javascript and I am trying to use ascript I saw online to replace the content of a div. However I wouldlike to have the script start with none of the target content showing.So far it starts correctly however I am not sure how to test/filterfor ALL the divs in #content being hidden which would be the beggingstate of the page.Here is a link to what it is doing now.Here is the code
<script type="text/javascript">
$(function(){
$("#home-button").css({
[code]....
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]....
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 RelatedI 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]....
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 RelatedI posted here a couple days ago and got help from a really nice forum member to get my script working. Now I'm a little embolden by the good experience and am trying to be a little more ambitious. As usual, I ran into a little brick wall on my own and need a shoutout for more help.
Here is what I have so far - a main panel where different image/texts are held in 'panel' div containers within another div container, under which is a nav bar consists of thumbnail images/links. Upon onclick on one of the thumbnail images, the 'panel' div containers are set to display:block or none, effectively 'switching' the panels.
Here is what I am trying to build on top of that - ability to set one of the panel div as 'display:block' at start (right now nothing show until one of the thumbnails is first clicked), and a mechanism to cycle through the different panels via a timer (interruptable via the onclick to show/hide command).
Here is my code so far:
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]...
I have a form that displays various hidden divs if a visitor checks a certain option in my form. For example, if they select Yes in a radio button a few more form fields will appear beneath it. It works fine except when the form is not filled out properly and the form is displayed again (using PHP). When the page reloads it doesn't show the hidden div unless they select No.
how to make it so if they select Yes, it will make the div appear again when the page reloads? Here's the code I'm using: Code:
I have a several hidden AP Divs. I would like them to appear at certain timed intervals.
View 1 Replies View RelatedI am trying to create a basic menu where if you put your mouse over a button you get a bit of descriptive text or an image appearing somewhere else on the page. I have tried to do this with hiding/revealing hidden divs - works fine with IE but no others.
<html>
<head>
<script language="javascript">
var descriptions = new Array();
descriptions[0] = "<p>See whats been added to the web site recently</p>";
descriptions[1] = "<p>Find out more about me</p>";
descriptions[2] = "<p>Check out me links</p>";
function showDescription(descriptionIndex){ .....
when the page is loading all the hidden divs are coming up first and then it gets hidden.
The problem is I can't use display:block in css file..Is there any other way?
On my site I have a news page, where users can read part of the news (trimmed with php) and then they click "Read more" to see the full news item. That item then comes up in a popup (using jQuery of course) and should be displayed. To get this to work I'm usingthisby including it like so:
<script type="text/javascript" src="includes/jquery.colorbox.js"></script>
The jQuery code looks like so:
$('.open').colorbox({width:"50%", inline:true, href:"#news"});
This all works great with that one div. The problem is, my news will be coming from a MySQL-query via PHP in a while-loop and I need this effect applied to every single news item. What I tried is to do this:
while($row = mysql_fetch_assoc($rs)) {
echo '<a class="open" href="#">Read more</a>';
echo '<div id="wrapper" style="display:none">';
[code]....
how do I make this work? How do I make jQuery open only the news item I'm clicking on? I know it could possibly be done with (this) and maybe children() or something like that? But I'm totaly lost at the momeny, I've tried loads of stuff with the pieces mentioned above but can't get it to work and most times I just "break" the jQuery and the popup won't even come up at all.
I have a div with a height of 100 pixels.If the content is too much to fit in div, I want to show a 'Read More' link at the bottom.If you then click 'Read More', the div expands to full height so all the content can be seen and the link text changes to 'Read Less'.If you then click 'Read Less', the div contracts back to 100 pixels.I've found solutions that can handle the above situation, but I want to have multiple divs with the same class that all work independantly of each other.So I'd have the following HTML
[code]
<div class="openclose">
...some content...
[code]....
I'm trying to piece together a little div which slides out and shows various links to sites like Digg, Reddit to share the story with. I've got it kind of working but when there are multiple divs on the page, named the same like in each article of a post on a Wordpress blog. Only the top ones work and the rest don't do anything...I'm trying to get it do something like the image => HereThis is an example I'm trying to get to work but the second "slickbox" div never shows
View 1 Replies View RelatedI'm trying to use nextUntil to select all the .cell divs between the .start-date and .end-date, the code works for the .cell's within it's .cal-container but if wont work over multiple .cal-containers.The code I have is$('.start-date').nextUntil('.end-date').addClass('fill-date');
<div class="cal-container">
<div class="cell" id="1" title="01-01-2011">1</div>
<div class="cell" id="2" title="02-01-2011">2</div>
[code]....
I want to use JavaScript when a button is clicked to show and hide a
SPAN or DIV. This works in both IE and Netscape, but what I'd like to
happen is for there to be no white space where the hidden div is.
I start with two visible divs and in between them are two more hidden
ones...in Firefox this works fine--the two visible ones are right next
to each other, the button fires the script and the other div shows up
in the middle. Another button hides the div and the original two move
back together without space between them.
However on IE the two visible divs are separated by the amount of
whitespace that would be needed if the two hidden divs were actually
visible. They show and hide correctly, but the whitespace remains.
How can I fix this? Code:
I'm trying to add some js automation to a blogging application I've developed for a wysiwig site builder program. This program doesn't allow php or any kind of server scripting, so everything has to be done with js. The basic set up is that a user enters a blog post in the application and the code below appends a comments div (which are already on the page but hidden by css) to the post:
Code:
Instead of using this code for every post instance, I'd like to create a simple loop that will assign an incremental number to the post and comments id's when a new post appears in the page's html, and then append a comments div to the post. I tried a for routine that would add 1 to every post, but couldn't get it to work right.
I want to animate divs on click . But the problem is there are multiple divs and I unable to get the height of each div
my code isfunction show (div) {
var hei = $('.a').height();
$('.show').click(function(){
$('.text').animate({'height' : hei + 'px'})
[Code]...
Getting myself back into jQuery and have an issue which I didn't previously fix, and was wondering if anyone would be able to assist me. I have multiple DIVs (up to 50 on one page) that I wish to individually be able to hide and close an extra DIV once pressing the 'Details' to show, and 'Hide' to hide the extra hidden DIV.
[Code]...
I am trying to get the height of a div that is inside 7 other divs. I noticed the height() method works with the first and second div, but it does not work after that.
Example :
<div id="first">
<--------------------------- $("first").height(); works ![code]....
how to get the height of a div that is inside multiple other divs ?
I'm new to jQuery, and I'm having issues with showing my DIVs correctly. The problem with the script at the moment, is that it currently opens up every single .display div, whereas I only want it to open up the one which corresponds to the.input a.edit which I've clicked.
The script hides them individually, displays the hide button and makes the show button display correctly like I wish, but it's displaying all the the .display div's at the same time which isn't what I want. For reference here is my jQuery script:
[Code]...
I need to be able to fade in 3 divs but not all at the same time, I need one to fade when thats finished, fade in then the next, then the next. Can anyone help me with this? I assume its got something to do with queue's but im not 100%
View 1 Replies View Related