I'm getting started with jQuery. I want to write a form where I can add and hide fieldsets.At the end there is a button "add Theme". If I click on it, the next fieldset whose display is none should be shown. And every fieldset except the first one have a button remove. This is my code, but it doesn't work .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>[code]....
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].....
ive just got this script ive got set up and it works fine, but not what i expected.i want it so i have headings and when i click those headings sub headings show up and when i click on that heading again they dissapear however i also want it so that you can have multiple headings open at once .how would i be able to modify this code so that if i have say sub1 open and i click to open sub2 sub1 remains open
var persistmenu="yes" "yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" enter "sitewide" for menu to persist across site, "local" for this page only if (document.getElementById){ DynamicDrive.com change[code].....
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]....
<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>
$(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.
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 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..
If you want to see what I'm talking about at any point, go to [URL] and hit the "web" button in the top-rightish area. Or, you know, check the source code, because you can't see any of that stuff right now.
So, I'm working on a portfolio for myself. And I want to make it for myself, because, well, I don't want to be lame.
My portfolio has three parts: stuff I've designed on the web, stuff I've written, and other stuff. Those are separated by the three buttons in the top right. You hit one, and the old visible item fades out, and the new one fades in. It's pretty.
Now, the "web" section is the problem. Right now, the div associated with it contains 3 div's. Each of those divs contains a p, and is not visible by default. On ready, I do this:
function readyFunction()
{
var pages = [];
submenu();
[Code].....
But when I try it out, nothing shows. It should show the first element, right?
I am aware that by calling toArray(), I am turning jQuery objects into DOM objects. That's not the problem, is it? How would I fix that?
I am new to jQuery and can't get this to work properly. I am loading content form a php page through an AJAX call. Based on the data that is returned I want to fade in a DIV or keep it hidden. Therefore I have a if construction that checks the data that was inserted in a DIV from the PHP page. If the PHP page returned 'No data' the DIV should remain hidden. The loading part works OK, but somehow the hiding or showing of the DIV doesn't work. What am I doing wrong? Is the syntax correct? This is what I have now:
<head>
<script type="text/javascript">
$(document).ready(function() {
[code]....
well, I thought this wasn't a cycle question specifically, but it looks like it is. [URL]
in case it's not ok to just post link to my post about this on "using jQuery" forum:
this is code in cycle plugin to hide "next" nav at last slide, hide "prev" nav at first slide:
$('a#prev')[index == 0 ? 'hide' : 'show']();
$('a#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
but what if instead of just 'hide' and 'show' I want to call a function (because I want to, let's say, just change the font-color of the link instead of hiding it)? so I did:
$('a#next')[index == opts.slideCount - 1 ? 'disableNext' : 'showNext']();
}
function disableNext() {
$('a#next').css('color','EEEEEE');
[Code]....
(and what I actually want to do is change the link to a non-link by doing sthg like $('span....').html(change code to non-link..), etc... )
Is it possible using slideToggle to set a faster speed for hiding than for showing?
View 4 Replies View RelatedI 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.
i am having some problem showing and hiding some divi want to show the div with the id="universitiesDiv" on one point and the div id="highSchoolsDiv" on another depending on the user choice of selected option.
function Show (titleImg){
// the id of the content element from the id of the title element
var contentID = titleImg.id.replace (/title/, "content");
[code]....
i am having some problem showing and hiding some div.i want to show the div with the id="universitiesDiv" on one point and the div id="highSchoolsDiv" on another depending on the user choice of selected option.
View 10 Replies View RelatedI was wondering if anyone wanted to take a shot at re-factoring my code. I am not a javascript guru, and I would like some feedback on what I could do to make it better.The code shows/hides the top div, and when the top div is hidden, the bottom div takes up the space of the top div.
View 3 Replies View RelatedFirstly, please understand that this is a very big web application. There is a "tabbed" interface that allows one to switch from page to page... On each page, there are tables.
Each table has a "minimize/maximize" function that will resize the table and hide/unhide specific columns in the table...
Right now, the tables are constructed as HTML tables. The TD's that are to be hidden are given the class "hidden[tableName]" whatever the table name may be.
When the table is maximized, i execute the following function:
function changeVisibleByClass(element, className, display){
var allPageTags = new Array();
allPageTags=document.getElementsByTagName(element);
for (i=0; i<allPageTags.length; i++) {
if (allPageTags[i].className==className){
allPageTags[i].style.display=display;
}}}
This has gotten to be quite inefficient and slow because it loads all of the visible TDs in the HTML and then checks each one for its classtype, changing the visibility as necessary. This works fine for a small page, but as my tables grow, this is becoming horribly inefficient.
I have a card at the bottom of my page that when a user clicks, will appear to come out from under the page and move back on top of it.
The first bit seems to work ok, but I cant get it go back under the page.
this is what I have.
Code:
$('.card').css({"margin-top":"-150px",}, 1000);
$('.card').click(function(){
$(this).animate({"margin-top":"15px",}, 700, function() {// Animation complete.
$(this).addClass('ontop');
[Code]....
Also I understand I'd need to build in some 'fail safes' like if it is already ontop dont do the animation, etc
I have a question. If you have a HTML list that pops up as a menu under a graphic in a layer when you mouseover the graphics, how do you instruct that layer to vanish again when you mouseout from the menu?
I can do onMouseOver show the layer and onMouseOut hide the layer, but I'm stuck when it comes to applying that to a larger area (ie: multiple clickable items). I can think of ways of doing it, but they're a bit clunky and I'm assuming there's a good or 'proper' way of achieving this.
I need to find a way to show/hide layers with the help of clicking a check box. I want it to be the default layer, then when a check box is clicked, that layer shows up. I need it to be able to display multiple layers (overlapping) that are linked to which check box is checked or unchecked. Code:
View 22 Replies View RelatedI 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?
I'm trying to show and hide layers with css and a javascript function. It works, but the only thing I can't figure out is how to make it display ONLY one of the layers on initial load. Below is the following code that appears in the html doc.
Code:
<script type="text/javascript">
//visible layers
function $_(IDS) { return document.getElementById(IDS); }
function setVisible( IDS ) {
[Code]....
I can't seem to just get the "BIO" layer to display by itself on the initial page load.
In a nutshell, I'd like to have a list of items, each of which fills out a
small table which displays some info about a particular item(the items being
a trouble ticket for a tech support ASP-built web-based app). There may be
zero, one, or many of these per ticket. Since some tickets have many of
these items (call them work items), the page can get awful long. I have this
part working already.
So my proposed solution to make the pages shorter would be to have one line
for each of these little work items. If you click the text in that one line,
it shows what had been a hidden div. If you click it again, it hides it.
See below:
I have 1 html page and 1 flash object on it when i click on that flash object than a image should b appear and flash object will hide when i click on that image than flash object should b appear and image will hide the page should b same no other pages
View 1 Replies View RelatedI finally found code that actually works. I click on the button, and the table disappears. I click on the button again, and it reappears. Like magic! I have two problems still.
(1) When I click on the table, it disappears, but the space that it was in is still empty. When it retracts, I want the rest of the text to retract with it (not disappearing text--i.e. have the text occupy the space where the table was, and move back when the table reappears. note: the text is directly below the table); otherwise, what is the point of a show/hide button? It's meant to save some space.
(2) I want the text of the show/hide button to change to "Show" when the table is not present. Code:
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]...