Toggle Spinner :: Show And Hide A Div Which Contains A Animated "spinner.gif" File?
Jun 26, 2009
I am trying to show and hide a div which contains a animated "spinner.gif" file. Is there any way to toggle a div from block to none without using an onEventHandler?My toggle script is as follows:
Code:
<script type="text/javascript">
function toggle(x) {
if (document.getElementById(x).style.display == 'none') {[code]........
What I would like to ultimately have happen is be able to put this toggle code into an External JS file which will validate a form I am filling out. The process with go something like...
1. Submit Form
2. Validate form
2a. Load hidden div containing spinner animated gif
2b. Pause validation script for 3 seconds so the animated gif gets a change to display to the user that a process is working
Code:
function Pause() {
timer = setTimeout("endpause()",3000); // 3 secs
return false;
}
2c. Pause ends and the external javascript file continues processing
3. Hand off form values to php and from my php file use the toggle function to finally hide the spinner div after the results have loaded on the page.Is it possible to toggle on and off a div without the event handlers?
View 1 Replies
ADVERTISEMENT
Jun 30, 2006
Since the code is triggered ever onclick event it may be resource hungry on large pages.
I guess desired upgrades to suit it more for general purpose and reuse would be:
1> Replace document.write with a way of altering the CSS class rule property. Hard part on this after reading quirksmode would be in targeting the CSS rule in a cross browser, not to intensive way.
2> Find a better cross browser trigger attachment than the current firing on every click.
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spinner Test</title>
<style type="text/css">
<!--
.spinnerContainer {}
.spinnerLink {cursor: pointer;}
.spinnerContent {display: block;}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
document.onclick=function(evt){
//Credit to Beagle and coding forums http://www.codingforums.com/showthread.php?t=90062
if(!evt){evt=window.event;} // *** IE fix ***
var spinner;// *** element that got clicked ***
// *** Credit to PPK from quirksmode.org for this block ***
if(evt.target){spinner=evt.target;}
else if(evt.srcElement){spinner=evt.srcElement;}
if(spinner.nodeType==3){spinner=spinner.parentNode;} // defeat Safari bug
if(spinner.className=='spinnerLink'){
var contentDiv=spinner.nextSibling;
if(contentDiv.nodeType==3){contentDiv=contentDiv.nextSibling;}
//Action
if(contentDiv.style.display!='block'){contentDiv.style.display='block'}else{contentDiv.style.displa y='none'}
}//from: if(spinner.className=='spinnerLink'){
}//from: document.onclick=function(evt){
document.write('<style type="text/css">.spinnerContent {display: none;}</style>');
</script>
</head><body><br/><br/>
<div class="spinnerContainer">
<span class="spinnerLink">SPIN!</span>
<div class="spinnerContent">Content</div>
</div>
<br/><br/>
<div class="spinnerContainer">
<span class="spinnerLink">SPIN! 1</span>
<div class="spinnerContent">Content 1</div>
</div>
</body></html>
View 1 Replies
View Related
Nov 14, 2011
I have 2 questions about my spinner. first question is that if a number is removed in the spinner by backspace and that there is no number in a spinner, when I click away from the spinner, it shows an empty spinner. What I really want is that if the spinner is empty and I click away, I want the spinner to display 0 instead. How can this be done?
second question is that if I enter in 00045 or 0000009 in a spinner and I click away, I want it to display 45 and 9 and not 00045 and 0000009. How can this be done as well?
[Code]...
View 3 Replies
View Related
Nov 11, 2011
I have create a spinnrer (numeric up and down field) in my form. Below is the code for it:
Code:
<form action="create_session.php" method="post" name="createsession"> <!-- This will post the form to its own page"-->
<table cellpadding="0" cellspacing="0" border="0">
<tr>[code]............
Now what my question is how can I get the spinner to only allow numbers to be inputted in the spinner and not letters. Also how can I get it to only allow 2 digits to be entered in the spinner?. I know it will require an if statement but I don't know how to do it.
View 2 Replies
View Related
Dec 12, 2011
I have a simple asp page that pulls info out of a db, but ita takes a while to load and display.Can I put a spinner say onload and then it stops when my page is finished and displayed??
View 3 Replies
View Related
May 4, 2009
I am developing an web application where i've embed a flash file in a web page. I want that until that flash file is being loaded in that page a spinner should be displayed. So that user may think that the file is being loaded and doesn't leave the page. How can I achive it through Javascript?
View 1 Replies
View Related
Oct 10, 2011
I have a select menu that look like this:
HTML Code:
<select name="zoom">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10' selected>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
</select>
And I need to make it display with a "spinner" so that it has little up/down arrows (as if the height of the select menu was 2, but without showing 2 numbers at a time)... At the same time, however, I need them to not be able to go above 23 or below 1...
View 1 Replies
View Related
Nov 19, 2011
Question 1: I have a spinner function and I have one slight problem with it. If a user types in 00000009 or 00021 in the spinner for example, if the user clicks away from the spinner, it will still display 00000009 or 00021 in the spinner. What I want is that if something like this happens, then what I want is that when the user clicks away, I want the spinner to display it as 9 or 21 rather than 00000009 or 00021. I don't know how to do this though. Does anyone know how to overcome this:
Question 2: If I used backspace to remove a number from a spinner and that is left with a blank spinner, what needs to be done so that if I click away from the spinner, the last number in the spinner re-appears in the spinner?
[Code]...
View 6 Replies
View Related
Mar 26, 2011
I like to try to do some jquery and spinner then load some html code into a div content. I'm not looking deep into the coding part of jquery yet but here's my question. What will be the a href tag look like?
<a href="http://yourlink" onclick="loadpage();">Products</a>
Do you put the url on href or attr? Can I still put the url on href? The reason I ask it's because seo friendly? Will search engine look into other pages by href? But I guess this way will actually load the whole page in the browser and there's no way I can do ajax stuff in this format? I like to do something nice on my links but don't want to hurt the seo part.
View 1 Replies
View Related
Jan 25, 2011
I have been practicing using canvas to make designs. My current code below will load the word the user inputs and makes it bounce around the canvas as well as a text spinner. However, whenever the user inputs a second word, the bounce below stops to start a new one and the text spinner messes up. so when the user inputs another word, that it either reloads a new textspinner or adds another one, as well as just add the word to the canvas without stopped the old one.
[Code]...
View 1 Replies
View Related
Sep 12, 2011
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.
Code:
View 1 Replies
View Related
Jun 28, 2009
I am working on my portfolio site and I've come to a bit of a wall. I have a main navigation which, when clicked animates a div containing my content to be visible. I have this working fine but now I want to have external content loaded into this containing div when different navigation items are clicked, which I also have working, but I cannot get these to work together. First off, if the div is not shown I want the appropriate content to be loaded then the div to animate, and if the div is showing, I want it to hide, swap the content then animate. I am sure its just a case of structuring my code properly but I just cant seem to get it right.
Show the div
$(document).ready //content animate show (
function() {
$('.navigation a').click (
function() {
$('.content').stop().animate ({
marginTop : "0px" },{
easing : "easeOutQuint",
duration : 2000
})});})
Hide the div
$(document).ready //content animate hide (
function() {
$('#hide').click (
function() {
$('.content').stop().animate({
marginTop : "200px" },{
easing : "easeInQuint",
duration : 1500
})});})
And finally swap the content:
$(document).ready(function() {
// Check for hash value in URL
var hash = window.location.hash.substr(1);
var href = $('.navigation a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-4)){
var toLoad = hash+'.php .content';
$('.content').load(toLoad)
}});
$('.navigation a').click(function() {
var toLoad = $(this).attr('href')+' .content';
$('.content').fadeOut('fast',loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
function loadContent() {
$('.content').load(toLoad,'',showNewContent())
} function showNewContent() {
$('.content').fadeIn('fast');
} return false;
});
});
View 2 Replies
View Related
Nov 21, 2011
This should probably be pretty basic and I've been googling around as to the best approach to take and still a bit confused. I have a form that currently submits a form to a new window using jquery (shown below.) The form once submitted could go through a few redirects within the new window (it's calling some facebook stuff.)
All I'd like is when the initial new window pops up is for a spinner to appear in the popup window until the first response is returned. Is there a decent example on how to do best achieve this?
[Code]...
View 2 Replies
View Related
Jan 25, 2010
I'm using a classic toggleLayer function to display content in a div adjacent to one full of links.
The code is
function toggleLayer( work ){
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( work );
else if( document.all ) // this is the way old msie versions work
elem = document.all[work];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[work];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
And the links take on the format of:
<a href="javascript:toggleLayer('work');...........
My problem is, I want the 'work' div to remain blank, which it does, until I click one of the links. But after that initial click, I don't want the script to act as a toggle, just a show/change content.
View 1 Replies
View Related
Mar 3, 2009
Im trying to hide a div ( quick reply box) like IPB using this code it's hidden but the actual link to toggle it isn't a live link for some reason any idea's what im doing wrong would be good.
This is what i am trying to hide
Im not sure how i get this to toggle to show/ re hide the div.
<div id="myClickyDiv" onclick="swapMyToggledDiv();">Toggle</div>
View 3 Replies
View Related
Dec 21, 2007
Ive been trying different show/hide methods for like, a week now. And I cannot get a single one of them to work. Even a little bit
Ive no idea what I'm doing, I'm usually not so bad at figuring stuff out, at this point im going to punch things. haha
can anyone point me to a template that uses a show/hide function. Or a pre-made page using mootools fx.slide? I cant even get the demo there to do anything.
View 2 Replies
View Related
Apr 15, 2011
My script:
Question:How can I insert a cookie to this, so that when I hide it, it will remain hidden after refreshing the page.
View 2 Replies
View Related
Jul 29, 2010
I'm trying to do a quick and dirty jQuery toggle swap, I'm swapping the div ok, but I can't seem to work out how to swap back to the original.
[Code]...
View 1 Replies
View Related
May 24, 2011
Completely new to jQuery but I am trying to implement a few pieces on my new website. At the moment I have three images in a row and I want to be able to click on any one of the images and use jQuery to populate a hidden div below the three images that contains more info and slide it out using the fold animation. I'd also like it if when a second image was clicked it closed the currently open div and opened the new one. I've seen tutorials that open the divs but can't find one that closes them again on opening a new one.
Can anyone point me to a tutorial that does this or suggest how it could be done?
View 2 Replies
View Related
Oct 24, 2010
On the homepage of my site, I would like to have some nav links that toggle between a few divs that are below in the content The divs in the content should display one at a time. For example, if you click nav1, the user would see div1. If nav2 is then clicked, div1 would hide and div2 would display.
I have some code that will do this, but for some reason it is hiding any divs that are within the toggled div. I'm very basic with JS and could use some help here. Here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
function toggleID(IDS) {
var area = document.getElementById('secondContent');
var sel = area.getElementsByTagName('div');
[Code]...
View 1 Replies
View Related
Mar 2, 2007
I've a frameset in my application.
1. A header Frame. (header)
2. A Tree Frame (left)
3. A Main Frame for displaying main contents. (mainFrame)
Well, I just want to toggle the visibility of the Left Tree frmae to provide more space to the Contents page when required.
> There can be a button which will have the label as HIDE when frame is visible.
> And when frame is hidden, the buttons label should be SHOW, clicking on which should show the frame baxck in its place.
View 3 Replies
View Related
Apr 3, 2010
Im trying to toggle a block of info on a forum that gets displayed multiple times. The below works for just one ID but I'll have more then one.
Code:
function toggle() {
var ele = document.getElementById("toggleUserinfo");
var text = document.getElementById("displayUserinfo");
if(ele.style.display == "block") {
[Code]..
View 5 Replies
View Related
Dec 7, 2010
Complete JS first timer here, hope you all can understand my difficulties and stupidities without getting too frustrated. Trying to make a portfolio website as a Christmas gift. Anyway, I'm trying to build a menu that:
1. Expands/Retracts when clicking on other 'headers' in the Menu.
2. Allows for more than one object to be listed in each 'header'.
(Something similar to this [URl]... I've tried to hatch together several online solutions but I really have no idea what I'm doing, as you can see:
[Code]...
View 1 Replies
View Related
Aug 10, 2011
I have spent two days trying to figure this out...No Luck.I am creating a dynamic list I would like to assign a value to a button that if the PY =Blue then show only py=blue and the same for py=Green then show only green.My Code:
<!DOCTYPE html>
<html>
<head>
[code]....
View 1 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
Jun 30, 2011
im trying to create an array with mutiple div ids. send this off to the function and the function switches the classes to show or hide depending on state.
[Code]....
View 3 Replies
View Related
