JQuery :: Hiding/showing Divs - Hide The Currently Shown Div And Then Slide In The Div Associated With The Button Clicked?
Oct 7, 2010
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.
View 3 Replies
ADVERTISEMENT
Jun 20, 2010
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]...
View 7 Replies
View Related
Aug 6, 2010
i have an html page, in it there is input box
<input type=button id="parambtn" onclick="paramProcess(this);" value=v />
now when we click this button it will show a corresponding div objec, which is the parent div called 'frame1'. this div has two radio buttons "static" and "dynamic".
if the user clicks on static radio selection, i want to show a stDiv. here is the problem as this stDiv is not showing up on click event.the function is getting called as i had checked it using an alert.
if the user clicks on dynamic radio selection, i want to show a dynamicDiv, this is also not working.
this is the code.
<div id="frame1" width="20px" height="50px" style=";display:none;background-color:red;" >
<table>
<tr>
[Code]....
i would also like to add one more problem. right now, when we click on button, it shows the frame Div, but this displaces all the other elements in the page, which are inside a table. is there a way to show this div above other elements without any changes in their position.. i tried to change the z index of the frame Div, but nothing changed..
View 1 Replies
View Related
Sep 29, 2001
I have a dynamically generated page that has a rollover div that needs to be displayed for each of a number of links.
Now, this is easy enough to do on a small scale: as part of the loop that dynamically generates the page, I have a separate hidedivlinkID() and showdivlinkID() function, and it works really well except in NS4.x, which I'm not supporting.
However, once the list of links grows to a certain size--and in this case the list has grown to about 150--the page takes on a rather large size. At this point, it's around 250K.
What I'd like to do is have a single pair of functions in the header script:
function showdiv(linkID) { }
function hidediv(linkID) { }
Such that I can call them easily. The problem comes in at the point where I try to pass the linkID out of the function, into the style-changing parts of the function. To wit:
function showdiv(linkID) {
linkID.style.visibility = "visible"
document.getElementById("legend").style.visibility = "hidden"
} // End showdiv
doesn't work. (The "legend" div is separate and unique; it's not overduplicated). Similarly,
function showdiv(linkID) {
document.getElementById(linkID).style.visibility = "visible"
document.getElementById("legend").style.visibility = "hidden"
} // End showdiv
doesn't work. Is there any way to make this work... or am I stuck with a bunch of extra functions on my page?
View 2 Replies
View Related
Feb 18, 2010
{foreach key=num item=account from=$accounts}
<div id="info">
<div class="box round">
<table cellspacing="1" class="data">
<tr onclick="javascript: $('#info').hide('fast'); $('#{$account.id}details').slideDown('slow');" style="cursor:pointer;">
<td>{$account.regdate}</td>
<td>{$account.product}<br /><a href="http://{$account.domain}" target="_blank">{$account.domain}</a></td>
<td>{$account.nextduedate}</td><td>{$currencysymbol}{$account.amount} {$currency}</td>
<td><a>View Details {$account.id}</a></td></tr></table></div></div>
I need the info div to hide when the the table row is clicked:
<tr onclick="javascript: $('#info').hide('fast'); $('#{$account.id}details').slideDown('slow');" style="cursor:pointer;">
This is what I'm using to hide it. But because I have multiple divs called info that I need hidden it is not working currently its only hiding the first div called info.
View 1 Replies
View Related
Aug 18, 2009
I would like to know if there is a way to keep the script as is but also add a function to this script so that if a user clicks on another tab (div) the open tab will close on click? Please see code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>[code].....
View 4 Replies
View Related
Jan 4, 2009
I am trying to use JS to change the display.style property of a div from �block� to �none� in order to hide and show it. I find that my code works in Firefox but not in IE. Furthermore, I find that the code works fine in IE if the div I�m trying to show/hide is not floated, but when it IS floated then I�m able to hide the div but unable to re-show it once it�s been hidden. Finally, I find that when the div I�m trying to show/hide is floated left and is the left-most element on the page, it works fine, but when I have another element floated left before it, then it fails to re-show once it�s hidden. Here is my code. In order to solve this problem I have removed all other code form my website, so this is the only code. The HTML:
[Code]...
View 3 Replies
View Related
Apr 15, 2004
I have a form, what I want to happen is that a user clicks a checkbox and a list appears or is enabled so that the user can then select a option. Also when the checkbox is unchecked again, I want the list to disapear or become unabled and it's value set back to whatever was the default.
After a bit of looking around I thought I has done it, but no luck. Can anyone let me know whats going on here? Code:
View 6 Replies
View Related
Nov 20, 2009
Basically, I need the script to hide two divs if one of the options in a <select> menu is selected.
Here's the code I've got for the Javascript:
function typeoflisting() {
var selectform = document.getElementById('propertytype');
if (selectform.options[selectedIndex].value == "sell") {
[Code]....
View 5 Replies
View Related
Oct 7, 2011
progress for on the home page I am using the red tabs at the top to slide and show a div.Its working fine - probably not the most elegant of coded solutions see below but it works on the page load handler. So of course as the page is loading things are showing ! So we get the div initially showing. I tried to set the visibility initially then it is always hidden and we never see the trayimprovments to this implementation below:
<script type
="text/javascript
">
[code]....
View 1 Replies
View Related
Aug 1, 2009
I need the letter button (the letters of the alphabet) to disappear when clicked, but reappear when hangman game restarts (by clicking start over button). How do I do this?
<html>
<head>
<link rel=stylesheet type=text/css href=layout.css />
[code]....
View 14 Replies
View Related
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 9, 2005
I'm doing a page w/lots of divs that I set to visibile or hidden dynamically using getElementById.. the divs are all forms... sometimes elements in a hidden form show thru on a visible form.. how can I fix this..
View 5 Replies
View Related
May 23, 2011
I need to show/hide certains divs when a link is clicked.These are my divs:
div1
div2
div3
div4
div5
I will have several links. Depending on which link is clicked it will hide/show several divs simultaneously For example, if link1 is clicked it will hide div1, div2 and div3 and show div4 and div5.
View 10 Replies
View Related
Feb 5, 2011
I have a script that will slide a div up from the bottom of the page. The toggle button for this div however is going to be right on top of the sliding div. But, when the button is pressed and the div starts to slide down, the script hides the button. Here's an example... [URL] How can I get the toggle button to slide with it, but not disappear?
View 7 Replies
View Related
Jul 28, 2010
I have 2 divs: <div id="box1></div> and <div id="box2></div> I also have one link to contoll them both. The effect I want to get is: when I click first time on my link box2 hides, when i click second time also box1 hides, when I click third time both divs should show. I manage to do that both divs hiding but later I can't get the show. Im trying sth like this:
$(document).ready(function() {
$('.slick-hide').click(function() {
$('#box2').hide('fast');
$('.slick-hide').click(function() {
$('#box1').hide('fast');
$(".slick-hide").removeClass("slick-hide").addClass("slick-show");
$('.slick-show').click(function() {
[Code]...
View 2 Replies
View Related
Feb 22, 2011
I have this code which when you click the delete button of a particular row, it shows up the div .delete over that particular row, and when clicking on the cancel button on the .delete div, it'll close that the .delete row revealing the .row div again (the .row div doesn't actually hide, I handle the overlay with z-index). However, I want it so that if one .delete div is already shown I want it to close it before revealing a new .delete div, so you can never have 2 .delete divs open at any given time. ere's my code at the moment:
$(".deletebutton").click(function() {
$(this).parents(".row").siblings(".delete").show('fast');
});
$(".cancel").click(function() {
$(this).parents(".delete").hide('fast');
[Code]...
View 3 Replies
View Related
Nov 28, 2011
I have a sideshow to add to a clients site, my plan is to utilise the cycle plugin (correct me if I'm wrong, a little new to all this). The critical aspect is that we have an image which should only be seen once, this being the very first image in the set, this will carry into the cycle/slideshow, but when it loops/repeats i want to skip past this first image.
[Code]...
View 1 Replies
View Related
Dec 27, 2010
How can i hide a button when i click it?
View 10 Replies
View Related
Jun 28, 2011
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')
View 1 Replies
View Related
Oct 19, 2011
I'm making a form with some fields. Once the form is submitted it updates the page with a new div containing the data entered without refreshing. Im using jquery form plugin. What I'd like to achieve is the new div(.record) to .slideDown. I guess I need to somehow specify the exact div by giving it an id or number. I'm not sure and why im here.
At the moment when i submit all of the divs(.record) are hidden with .hide, then they all slide down with .slide. Best i can understand is to hide the last div then slide down. But again.. I don't know how to specify to only slide down the last div added and not the current .record divs on the page.
[Code]...
View 3 Replies
View Related
Jun 26, 2010
Trying to learn the basics... Here is a script for three toggle buttons that each when clicked open their corresponding divs. Fine. Now how does one go about automatically closing an open div when clicking on a new 'toggler' that opens it's div? I see other posts about this very question, but I'm just not grasping the logic.
jQuery(document).ready(function($) {
$("#toggle1").click(function () {
$("#toggle1div").toggle("drop", {direction:"right"}, 500);
});
$("#toggle2").click(function () {
View 3 Replies
View Related
Dec 20, 2009
I have an application, that will pull all articles associated with a user on a page.As some users have posted approx 100 articles, I want to hide all but the first 5, then have a link that will show the next 5 or the remaining article that are hidden (if less than 5)I have the following code:
jQuery.noConflict();
var numShown = 5; // Initial rows shown & index
var numMore = 5; // Increment
[code]....
View 1 Replies
View Related
Aug 31, 2009
and not sure how to title this post so excuse me if i'm not using the right terminology.my setupjavascript
<script src="scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
[code]....
View 1 Replies
View Related
Jul 29, 2009
<script type="text/javascript">
Above is my JS. What I want to do is, click the button and have the vstar image hidden. Then when I click on the button again, the vstar appears, but now the flower is hidden. And clicking the button again, the vstar is hidden and the flower appears again, and so on...
<div>
View 7 Replies
View Related
Sep 16, 2010
$(document).ready(function()
{
$(".postTags_opener").click(function()
{
$(this).next(".postTitle .postTags").fadeIn(1000, function()
[Code]....
The indentation is probably a little wacky, since I just copy/pasted, but that's what I've got right now. When you click on .postTags_opener, it shows the nearest matched .postTags; that is exactly what I want, since .postTags immediately follows a .postTags_opener. The problem arises when I then try to close it: .postTags_closer comes after .postTags starts, so that's probably why next() is bugging out.
View 2 Replies
View Related
