JQuery :: Show / Hide And Fade In Animations - Creating Loop
May 13, 2009
I have several elements that I can perform show hide and fadeIn animations on but I want the action to continue on an endless loop. Is this possible? If it is, are there any cpu usage issues when using a loop?
<script type="text/javascript">
$(document).ready(function(){
$(".upright").hide(300);
$(".cntrlg").show(300);
$(".cntrlg").hide(300);
$(".cntrmed").show(500);
$(".cntrmed").hide(300);
$(".cntrlg, .lowleftmed").show(100);
$(".cntrlg, .lowleftmed").hide(100);
$(".lowrightmed").show(300);
$(".lowrightmed").hide(300);
$(".cntrmed").show(300);
$(".cntrmed").hide(300);
$(".upright").show(2000);
$("#dai1").fadeIn(3000);
$("#dai2").fadeIn(3000);
$("#dai3").fadeIn(3000);
$("#june1").fadeIn(3000);
$("#june2").fadeIn(3000);
$("#june3").fadeIn(3000);
});
</script>
I have a table, with a repeat region when there is more than one record to show, and a javascript function, that when you click on the Project ID, it shows the Job ID information in a row underneath.
Code: <script type="text/javascript"> function toggle(id) { var e = document.getElementById(id);
[Code].....
The problem is that when I click on the Project ID (Show/Hide link) of one of the 'looped' resutls, it always shows/hides the first Project ID's Job ID information
The functions hide/show tables within a page, and update a button by the table title accordingly. The number of tables on the page is dynamic (php generated based on an SQL query), so the Expand/Collapse all buttons are generated last, and pass the table count to the functions in variable x. I have confirmed that the number passed in x is correct for the number of tables, and that all of the tables' IDs are correct in the generated HTML. The problem is that no matter what is passed in x (currently over 300), the loop ends at 27.
function expand_all(x){ var i=1 for(i = 1; i <= x; i++){ document.getElementById('tbl' + i).style.display = "block"; document.getElementById('lnk' + i).value = "[ - ]"; }}// end expand_all function shrink_all(x){ var i=1 for(i = 1; i <= x; i++){ document.getElementById('tbl' + i).style.display = "none"; document.getElementById('lnk' + i).value = "[ + ]"; }}// end shrink_all
To confirm the values, I changed document.getElementById('lnk' + i).value = "[ - ]"; to document.getElementById('lnk' + i).value = "[ - ] " + i + " of " + x; In both functions, I got incrementing values for i from 1 to 27. X consistently was 343.
Does anyone know why this isn't working? The toggle function works perfectly fine with PHP loops, but when I insert the table td tr tags, it does not hide the loop when the page first loads...It just shows the results in the div which it shouldn't be doing.
Here's what my code looks like...
JS
Code: <script type="text/javascript"> function toggle(element) { if (document.getElementById(element).style.display == "none") {
I am trying to hide/show table when hide/show button is pressed
Problem: The code works fine when I remove 'slow' from line 10. But with 'slow' in line 10 content of toggleButton doesnt change from Hide to Show when pressed.
here's another newbie to jQuery. I just watched some tutorials and did a search over here but could not find what I'm looking for. Here's what I want to do. I have a div (#layer1) with some content in it which I want to hide for something like 3000ms and then fade in in about 1400ms. All by itself so not triggered by button actions or anything.
Now I understand that jQuery does not have a real delay command so I have to fake something with maybe the $fadeTo("3000,0") followed by the fadeIn command? Is that the correct way to do it?
I am trying to make a basic fade animation for my website [URL] using JavaScript. This is my first website, and I know how to animate via After Effects, and how to export SWF files for the website. I want to use code that is a bit lighter and can load on more browsers; like iPad etc... The effect I want to use is on my site [URL] Here is my source code: Basically I just want to fade between two jpgs on a continuous loop.
i have a slideshow at [URL] which utilizes the following code. how can i get rid of the fade effect and just have one image transition to the next cleanly with no fade animation?
/* * jQuery Cycle Plugin for light-weight slideshows * Examples and documentation at: http://malsup.com/jquery/cycle/ * Copyright (c) 2007 M. Alsup
I've got a <ul> w/ 6 <li> items and CSS to make them 104x228 side blocks, which hold 2 images, one on top of the other. The 6 rows of images look like this:
X X X X X X X X X X
This is what I want: The top row of images to be opacity:0 (or hidden), and then when you mouseover the bottom images, the top images come to 100 opacity. When you mouseout, the opacity is back to 0.Here's the HTML and CSS:
The idea here is to have a function in javascript that would take the value from one input box (lets call it txbA) and use it as the limit for a while loop or for-next loop and create a series of input boxes each with a unique name so that its value (when entered or changed)could later be used in other calculations.
When I try something like:
function MakeMany() { var y=parseInt(txbA.value); for(var x=0;x<y;x++)
[Code]....
You can call this from a button and get the text boxes, but how do I get them to have unique names such as MMtb1, MMtb2, MMtb3 etc. ??
i was assigned this task(see attached), but for some reason I'm having trouble getting it to work, i don't know if my problem is in the algorithm or if I'm using the wrong structures to solve the problem.
I am trying to create a function that creates an array comprised of filenames based on a given range. I.E if 2-8 is selected and a foldername of UMCP/ and a common name of college is also given, the function should return and array such as [UMCP/college2.jpg,UMCP/college3.jpg.....UMCP/college8.jpg]. Here is what I've got but the alert that should tell me the filename of the first image says it is undefined, how can i fix this?
function getArrayPhotosNames (total,count,first,last) { /*window.alert("get Array Photo Names");*/ var folderName = document.getElementById("photofold").value; var Alias = document.getElementById("commonName").value;
On my form i have multiple select which all have an id value total1, total2, total3 etc so i am trying to detect how many there are and then use this to caculate a total.
Is there a javascript reference to basically go to a form and produce a loop which will show me how many select drop down boxes there on a form.
Or would i have t use something like
for (var i=0; i < frm.elements.length; ++i) { form.elements.length form_field = frm.elements[i]
and then have a nested if to detect if it is select value or has an matching value ..
I am trying to create a simple HTML table with the squares of numbers and for some reason the loop is not triggering.
Code:
<table border="1"> <tr><td><h2>Table of Squares</h2></td></tr> <tr><td> Number
[Code]....
When I run the page all that comes up is the start of the table that is written before the script executes. Also is there any way I could use a debugger to catch this on my own? I tried the firefox debugger but it didn't catch anything when I ran it through, maybe I was just doing it wrong.
I have been struggling with a loop of mine. The loop should create a grid, of 204,000 squares(div's). And the total would create a grid field of 340 pixels by 600 pixels. All div's are sized 1 pixel.The idea is to create a grid, that shows temperature data in a gradient style, like a weather heat map. The data is collected from temperature sensors which are connected to a database.The only problem is that because it's such a massive amount of calculations to be calculated by javaScript, the whole thing freezes. Here is a sample of my code:
Code:
function makeGrid() { for (var i = 0; i < 8160; i++) {
[code]....
Another problem is, the grid should be reloaded every 5 seconds or less.Because that's the interval used by the temp sensors, and for the usage that's planned for the project, its really important that the data is constantly up to date. using another web based language are welcome, as long as they are combinable with PHP or AJAX. Or maybe there is a ready to use library that I dont know of. Couldn't find anything for jQuery.
I'm working on a page, where I want to use jQuery to build a "Portfolio" div that contains pics and info about some of my work. I found a bunch of cool tutorials about making a slide show, but they all have a sliding animation. With my page, the sliding animation would look awkward. I'm fine if it just replaces the current div with the next one. I'm just planning on using a previous and next button (Within the same div) to cycle through these.
I would like to pass data to dialog box where the page in background is faded out.A good example is when I click 'LOG IN' on DANIWEB, I get a dialog box with username and password fields and the rest of the screen is in gray.
I'm trying to create a slide show using the script here:[URL]Here's my page.[URL] The problem is in IE (I'm testing this in IE7) there is a small black rectangle that displays in the fade. (I've tested this in Opera, Safari and Chrome. It works in all. I also tested it using an IE tester [URL]. Only 8 and 6 versions work correctly.) I can see on the dynamic drive page the slide show works correctly.I've tried changing the "background='black'" in the .js in a variety of places to transparent and tried to put an image, a transparent .png, in place of the background. No success with either one.
I always want "smenu3" to show with "smenu4" and "smenu5" collapsed... When the user clicks the link, it calls a javascript function to show "smenu4" like so...
I have some divs laid on top of each other. By clicking somewehre specific I want to hide all the divs but except for one - which is related to the point i clicked - to show up.Here is my code so far:The function will be called by something like this:
All these divs are in the same from the right_nav-class.I guess the problem lies within line 6, where I want to select the div that should show up and is given as the argument of the function.The commented lines are things I already tried, but didn't work either, especially $(this).style seems to be invalid.It does hide all divs as i want, but the one i want to show again doesn't show up. It just stays hidden...
I got this example code which show rows when click on it, the problem is it shows all but I want if I click on one row it shows that one and hide others.
i searched the forum, but did not find a working solution for my problem. IE6/7 are not hiding the divs in the $(document).ready function. Tried also:
$("#closed").css('display', 'none'); document.getElementById('closed').style.display = 'none'; It is working when i add the ID "closed" to the <li>-Element instead of the <div>-Container. All other browsers are working fine.
the box. Anybody know what's wrong?i have the following code:
<!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">
