JavaScript - Js File Disables Toggle From All Effects
this js file disables the toggle from all my effects. any idea how to fix this problem without deleting this?
Code: // SpryDOMEffects.js - version 0.6 - Spry Pre-Release 1.7 // // Copyright (c) 2007. Adobe Systems Incorporated. // All rights reserved. // // Redistribution and use in source and binary forms, with or without // modification, are permitted provided that the following conditions are met: // // * Redistributions of source code must retain the above copyright notice, // this list of conditions and the following disclaimer. // * Redistributions in binary form must reproduce the above copyright notice, // this list of conditions and the following disclaimer in the documentation // and/or other materials provided with the distribution. // * Neither the name of Adobe Systems Incorporated nor the names of its // contributors may be used to endorse or promote products derived from this // software without specific prior written permission. // // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE // POSSIBILITY OF SUCH DAMAGE. (function() { // BeginSpryComponent if (typeof Spry == "undefined" || !Spry.Utils || !Spry.$$) { alert("SpryDOMEffects.js requires SpryDOMUtils.js"); return; } if (!Spry.Effect) Spry.Effect = {}; Spry.Effect.Animator = function(opts) { Spry.Effect.Animator.Notifier.call(this); this.animatorID = Spry.Effect.Animator.nextID++; this.dropFrames = true; this.fps = 60; // frames per-second this.duration = 500; // msecs this.timer = 0; this.startTime = 0; // Used only when dropFrames is true. this.currentFrame = 0; this.easeFunc = Spry.Effect.Animator.defaultEaseFunc; this.stopped = false; Spry.Effect.Animator.copyProps(this, opts); this.interval = 1000 / this.fps; this.numFrames = (this.duration / 1000) * this.fps; if (this.onComplete) { var self = this; this.addObserver({ onAnimationComplete: function(){ self.onComplete(); } }); } }; Spry.Effect.Animator.nextID = 1; Spry.Effect.Animator.copyProps = function(dst, src) { if (src) { for (prop in src) dst[prop] = src[prop]; } return dst; }; Spry.Effect.Animator.getElement = function(element) { if (arguments.length > 1) { for (var i = 0, elements = [], length = arguments.length; i < length; i++) elements.push(Spry.Effect.Animator.getElement(arguments[i])); return elements; } if (typeof element == 'string') element = document.getElementById(element); return element; }; Spry.Effect.Animator.defaultEaseFunc = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); }; Spry.Effect.Animator.Notifier = function() { this.observers = []; this.suppressNotifications = 0; }; Spry.Effect.Animator.Notifier.prototype.addObserver = function(observer) { if (!observer) return; // Make sure the observer isn't already on the list. var len = this.observers.length; for (var i = 0; i < len; i++) { if (this.observers[i] == observer) return; } this.observers[len] = observer; }; Spry.Effect.Animator.Notifier.prototype.removeObserver = function(observer) { if (!observer) return; for (var i = 0; i < this.observers.length; i++) { if (this.observers[i] == observer) { this.observers.splice(i, 1); break; } } }; Spry.Effect.Animator.Notifier.prototype.notifyObservers = function(methodName, data) { if (!methodName) return; if (!this.suppressNotifications) { var len = this.observers.length; for (var i = 0; i < len; i++) { var obs = this.observers[i]; if (obs) { if (typeof obs == "function") obs(methodName, this, data); else if (obs[methodName]) obs[methodName](this, data); } } } }; Spry.Effect.Animator.Notifier.prototype.enableNotifications = function() { if (--this.suppressNotifications < 0) { this.suppressNotifications = 0; Spry.Debug.reportError("Unbalanced enableNotifications() call!\n"); } }; Spry.Effect.Animator.Notifier.prototype.disableNotifications = function() { ++this.suppressNotifications; }; Spry.Effect.Animator.prototype = new Spry.Effect.Animator.Notifier; Spry.Effect.Animator.prototype.constructor = Spry.Effect.Animator; Spry.Effect.Animator.prototype.start = function() { this.stopped = false; this.currentFrame = 0; this.startTime = (new Date()).getTime(); this.notifyObservers("onAnimationStart"); var self = this; this.timer = setTimeout(function(){ self.onStepAnimation(); }, this.interval); }; Spry.Effect.Animator.prototype.stop = function() { if (this.timer) clearTimeout(this.timer); this.timer = 0; this.stopped = true; this.notifyObservers("onAnimationStopped"); }; Spry.Effect.Animator.prototype.onStepAnimation = function() { var obj = {}; if (this.dropFrames) { obj.duration = this.duration; obj.elapsed = ((new Date).getTime()) - this.startTime; if (obj.elapsed > obj.duration) obj.elapsed = obj.duration; } else { obj.duration = this.numFrames; obj.elapsed = ++this.currentFrame; } obj.easingConst = this.easeFunc(obj.elapsed, 0, 1, obj.duration) this.notifyObservers("onPreDraw", obj); this.draw(obj.elapsed, obj.duration, obj.easingConst); this.notifyObservers("onPostDraw", obj); if (!this.stopped) { if (obj.elapsed < obj.duration) { var self = this; this.timer = setTimeout(function(){ self.onStepAnimation(); }, this.interval); } else { this.stop(); this.notifyObservers("onAnimationComplete"); } } }; Spry.Effect.Animator.prototype.draw = function(elapsed, duration, easingConst) { // The default draw method does nothing. It is assumed that // derived classes will provide their own implementation of this // method. debug.log("elapsed: " + elapsed + " -- duration: " + duration + " -- easingConst: " + easingConst); }; /////////////////////////////////////////////////////////////////////////////// Spry.Effect.CSSAnimator = function(elements, styleStr, opts) { this.animationSets = []; Spry.Effect.Animator.call(this, opts); this.add(elements, styleStr); }; Spry.Effect.CSSAnimator.prototype = new Spry.Effect.Animator(); Spry.Effect.CSSAnimator.prototype.constructor = Spry.Effect.CSSAnimator; Spry.Effect.CSSAnimator.prototype.add = function(elements, styleStr) { // The first argument for the CSSAnimator can be // the id of an element, an element node, or an array of // elements and/or ids. elements = Spry.$$(elements); if (elements.length < 1) return; var animSet = { elements: elements, cssProps: []}; this.animationSets.push(animSet); // Convert the styleStr into an object. var toObj = Spry.Utils.styleStringToObject(styleStr); for (var p in toObj) { var obj = new Object; var v = toObj[p]; obj.value = new Number(v.replace(/[^-\d\.]+/g, "")); obj.units = v.replace(/[-\d+\.]/g, ""); toObj[p] = obj; } for (var i = 0; i < elements.length; i++) { var obj = animSet.cssProps[i] = new Object; for (var p in toObj) { var pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs[p]; if (!pFuncs) pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs["default"]; obj[p] = new Object; obj[p].from = new Number(pFuncs.get(elements[i], p).replace(/[^-\d\.]+/g, "")); obj[p].to = toObj[p].value; obj[p].distance = obj[p].to - obj[p].from; obj[p].units = toObj[p].units; } } }; Spry.Effect.CSSAnimator.prototype.start = function() { for (var s = 0; s < this.animationSets.length; s++) { var animSet = this.animationSets[s]; var elements = animSet.elements; var cssProps = animSet.cssProps; for (var i = 0; i < elements.length; i++) { var ele = elements[i]; var eleProps = ele.spryCSSAnimatorProps; if (!eleProps) eleProps = ele.spryCSSAnimatorProps = new Object; var obj = cssProps[i]; for (var p in obj) eleProps[p] = this.animatorID; } } return Spry.Effect.Animator.prototype.start.call(this); }; Spry.Effect.CSSAnimator.prototype.stop = function() { for (var s = 0; s < this.animationSets.length; s++) { var animSet = this.animationSets[s]; var elements = animSet.elements; var cssProps = animSet.cssProps; for (var i = 0; i < elements.length; i++) { var ele = elements[i]; var obj = cssProps[i]; var eleProps = ele.spryCSSAnimatorProps; for (var p in obj) { if (eleProps[p] == this.animatorID) delete eleProps[p]; } } } return Spry.Effect.Animator.prototype.stop.call(this); }; Spry.Effect.CSSAnimator.prototype.draw = function(elapsed, duration, easingConst) { for (var s = 0; s < this.animationSets.length; s++) { var animSet = this.animationSets[s]; var elements = animSet.elements; var cssProps = animSet.cssProps; for (var i = 0; i < elements.length; i++) { var ele = elements[i]; var eleProps = ele.spryCSSAnimatorProps; var obj = cssProps[i]; for (var p in obj) { if (eleProps[p] == this.animatorID) { var pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs[p]; if (!pFuncs) pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs["default"]; if (elapsed > duration) pFuncs.set(ele, p, obj[p].to + obj[p].units); else pFuncs.set(ele, p, obj[p].from + (obj[p].distance * easingConst) + obj[p].units); } } } } }; Spry.Effect.CSSAnimator.stylePropFuncs = {}; Spry.Effect.CSSAnimator.stylePropFuncs["default"] = { get: function(ele, prop) { return ele.style[prop]; }, set: function(ele, prop, val) { ele.style[prop] = val; } }; Spry.Effect.CSSAnimator.stylePropFuncs["opacity"] = { get: function(ele, prop) { var val = 1; if (ele.style.opacity) val = ele.style.opacity; else if (ele.style.filter) { var strVal = ele.style.filter.replace(/.*alpha\(opacity=(\d+)\).*/, "$1"); if (strVal) val = parseInt(strVal) / 100; } return val + ""; }, set: function(ele, prop, val) { ele.style.opacity = "" + val; ele.style.filter = "alpha(opacity=" + (val * 100) + ")"; } }; /////////////////////////////////////////////////////////////////////////////// Spry.$$.Results.defaultEaseFunc = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); }; Spry.$$.Results.animatePropertyTo = function(propName, to, options) { var opts = { interval: 10, duration: 1000, onComplete: null, transition: Spry.$$.Results.defaultEaseFunc }; Spry.Effect.Animator.copyProps(opts, options); var objs = []; for (var i = 0; i < this.length; i++) { var obj = objs[i] = new Object; obj.ele = this[i]; obj.from = obj.ele[propName]; obj.distance = to - obj.from; } var startTime = (new Date).getTime(); var animateFunc = function() { var elapsedTime = ((new Date).getTime()) - startTime; if (elapsedTime > opts.duration) { for (var i = 0; i < objs.length; i++) objs[i].ele[propName] = to; if (opts.onComplete) opts.onComplete(); } else { for (var i = 0; i < objs.length; i++) { var obj = objs[i]; obj.ele[propName] = opts.transition(elapsedTime, obj.from, obj.distance, opts.duration); } setTimeout(animateFunc, opts.interval); } }; setTimeout(animateFunc, opts.interval); return this; }; Spry.$$.Results.animateStyleTo = function(styleStr, options) { var a = new Spry.Effect.CSSAnimator(this, styleStr, options); a.start(); return this; }; })(); // EndSpryComponent Similar TutorialsHi there! Okay, here is my scenario: I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself). The file that is loaded on toggle doesn't have to be PHP, but it would help a lot. Does anybody know of a example of this or something similar to it? I have been looking for some time now, without any luck unfortunately. Highly appreciate any help/answers/feedback! plz i want to know how to make the effects that exists on this link in the upper part : http://www.masrawy.com/new/ 1-) changing color when pressing on the color 2-) changing font (+) to increase it (-) to decrease it (N) to set it to the normal style 3-) decrease and increase the width of the page (from كبر حجم الصفحة or صغر حجم الصفحة ) can anyone help me in doing this task????? please i want to know how to make lightbox effects with the idea of switching between pages using the lightbox please follow this link: http://particletree.com/examples/lightbox/ while pressing on "submit an inquiry " it will show a form... all that i need is to make the same idea but using registration form first page: contains user data ---> on pressing next .. i want to be on same lightbox box effect but using next page that contains his work data... and on third page he will have a message that his registration is done successfully.. so how to switch between pages in lightbox effects??? hi all, i am using this javascript code which i found on a random website to create a tooltip style popup. in my head is: Code: <script type="text/javascript"> function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible" } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden" } </script> <style type="text/javascript"> #twittericon { position: fixed; bottom:148px; left: 6%; width: 33px; height:29px; z-index: 49; } #tweet{ position:fixed; bottom:178px; left: 3%; max-width:310px; color:#333333; font-family:Arial Narrow,Arial,Sans-serif; font-size:12px;; z-index:6000; visibility: hidden; } </style> in my body is: Code: <div id="twittericon" onMouseOver="showmenu('tweet')" onMouseOut="hidemenu('tweet')"> <a href="http://twitter.com/bubblejam" target="_blank"> <img src="http://nang-nang.net/tumblr/blog/twit-bird.gif" width="33" height="29" /></a> </div> <div id="tweet"> (latest tweet generating code) </div> this creates a little bird, which displays latest tweet when rolled-over. you can see a working example of this he http://nang-nang.net/tumblr/blog/try.html my question a (1) can i add something to the javascript to create a delay when onMouseOut so that the tweet doesn't disappear immediately? also (2) could i also add something to the javascript to create a visual effect when onMouseOver or onMouseOut occurs? like a fade in effect? or slide up effect? i've been playing around with scriptaculous effects but i'm not sure how to combine that script with my script above. an answer to (1) at least would be very much appreciated! Hi guys I am using a customized version of this free css dropdown menu script. It is just pure css, no jquery. I wanted to add some delay to the open and close on mouseover, here is what I added: Code: <script type="text/javascript"> $(document).ready(function () { $('ul.dropdown li').hover( function () { //show its submenu $('ul', this).slideDown(150); }, function () { //hide its submenu $('ul', this).slideUp(250); } ); }); </script> When I first mouse over, this does nothing, but if I mouse over the same drop down li a second time, it works. Check it out here. Any ideas on how I can fix this? The 2 sites below are animated scrolling pages which I know how to do, What I am looking for is how do they make the effect like the pages are sliding independent "like an overlaid effect" of each other If anyone can show me how they get that effect or if there are any demo or examples to help me figure it out http://www.sketchtravel.com/ http://www.foofighters.com/us/discography thanks for your help -rob Happy Turkey Day!! I am new to JavaScript and I downloaded a code for image mouse over effects. It works exactly how it's supposed to except when you first load the page, the images are not there. They do not appear and function until you actually roll the mouse over them. Here is the script and the link... any help would be greatly appreciated! Thank you Link Code: <script language="javascript"> //script found on www.a1javascripts.com //all credit to unknown author <!-- hide script from old browsers window.onerror = null; var netscape = 0; var goodIE = 0; browserName = navigator.appName.substring(0,8); browserVer = parseFloat(navigator.appVersion); if (browserName == "Netscape" && browserVer >= 3) { netscape = 1; } if (browserName == "Microsof" && browserVer >= 4) { goodIE = 1; } // end error trapping code if (netscape || goodIE) { pic1 = new Image(150,100); pic1.src = "enso.jpg"; pic2 = new Image(150,100); pic2.src = "shine.jpg"; pic3 = new Image(150,100); pic3.src = "samsara.jpg"; pic4 = new Image(150,100); pic4.src = "samsara.jpg"; a1 = new Image(300,200); a1.src = "personal1.jpg"; a2 = new Image(300,200); a2.src = "personal2.jpg"; b1 = new Image(325,225); b1.src = "spiritual1.jpg"; b2 = new Image(325,225); b2.src = "spiritual2.jpg"; c1 = new Image(325,225); c1.src = "eyeent1.jpg"; c2 = new Image(300,200); c2.src = "eyeent2.jpg"; } function hiLite(imgDocID, imgObjName, imgDocID2, imgObjName2, imgDocID3, imgDocID3) { if (netscape || goodIE) { document.images[imgDocID].src = eval(imgObjName + ".src"); document.images[imgDocID2].src = eval(imgObjName2 + ".src"); document.images[imgDocID3].src = eval(imgObjName3 + ".src"); }} //end hiding --> </script> <img alt="Default Image" name="pic" src="default.gif" height="100" width="150" /><br /> <a onclick="window.focus()" onmouseout="hiLite('pic','pic1','a','a1'); window.status='';return true;" onmouseover="hiLite('pic','pic2','a','a2'); window.status='Button 1';return true;" href="your-page.html"><img alt="Button 1" name="a" src="upbutton1.gif" style="border: 0px solid ; width: 325px; height: 225px;" /></a><br /> <a onclick="window.focus()" onmouseout="hiLite('pic','pic1','b','b1'); window.status='';return true;" onmouseover="hiLite('pic','pic3','b','b2'); window.status='Button 2';return true;" href="your-page.html"><img alt="Button 2" name="b" src="upbutton2.gif" style="border: 0px solid ; width: 325px; height: 225px;" /></a> <a onclick="window.focus()" onmouseout="hiLite('pic','pic1','c','c1'); window.status='';return true;" onmouseover="hiLite('pic','pic4','c','c2'); window.status='Button 3';return true;" href="your-page.html"><img alt="Button 3" name="c" src="upbutton3.gif" style="border: 0px solid ; width: 325px; height: 225px;" /></a> I need help with the script for multiple mouseOver Effects for my Menu Bar. The script I have is: <script type="text/javascript"> function mouseOver() { document.getElementById("b1").src ="home1.jpg"; } function mouseOut() { document.getElementById("b1").src ="home.jpg"; } </script> <A HREF="Index.html" rel="nofollow" target="_blank"><img src="home.jpg" id="b1" width="167" height="60" onmouseover="mouseOver()" onmouseout="mouseOut()"/></A> However, that only does one mouseover effect. Can someone help me with this? I am working on implementing a gallery into my website with categories that collapse/expand the set of images within those categories. i figured out mostly everything i need except i can't get the BUTTONS to behave the way that I want. I'm working with the following images: arrow1: arrow2: arrow3: in general, I want "arrow1" to change to "arrow2" whenever you hover a mouse over it, and back to "arrow1" when the mouse is moves away. (which is simple by itself) the complicated part that I can't figure out, is what happens when you CLICK the button. I want the image to change to "arrow3" when it is clicked (because the content expands), and to STAY at that image until it's clicked again, at which point it should behave as what I started with. The problem is, I can get the arrow to change on click no problem, but once the mouse is moved away, the "onMouseOut" effect changes it back to "arrow1". this is the code I'm working with, hope someone can help Code: <SCRIPT LANGUAGE = "JavaScript"> <!-- first=new Image first.src="http://www.clearnonsense.com/images/arrow1.png" second=new Image second.src="http://www.clearnonsense.com/images/arrow2.png" // --></SCRIPT> </HEAD> <table border="0"> <tr> <td> <a href="javascript:void(0)" OnMouseOut="monitor.src=first.src" OnMouseOver="monitor.src=second.src" onMouseUp="clickdown('pic1')"><img src="http://www.clearnonsense.com/images/arrow1.png" border="0" name="monitor" onclick="showhide('div1',this,'http://www.clearnonsense.com/images/arrow1.png','http://www.clearnonsense.com/images/arrow3.png');"/></a> </td> </tr> <tr> <td valign="top" width="15"> <div id="div1" style="display: none;">imgset1</div> </td> </tr> </table> Hi Coders, I have been trying to achieve a multiple mouseover effect on some of my pictures within my web page. The first effect changes the picture within a table - works fine The second effect should change the text within another table. - does not work. I am receiving the error message: 'document.text' is null or not an object. Here is the code which lies on my image: Code: <td style="height: 101px; width: 20%" valign="top"> <img onMouseover="changeimage(myimages[1],this.href); newchange();" alt="loading" height="86" src="images/marsrover_sml.jpg" width="104" /></td> Here is the newchange() script: Code: <script language="JavaScript1.1"> function newchange() { document.text.innerHTML='<b>hello world</b>' } </script> And I am sure that the table in which the text should appear has its Id and Name defined as "text" Here is it: Code: <td class="style5" Id="text" name="text" style="height: 29px; width: 525px" valign="top"> <strong class="style10">Endavour has launched</strong></td> But could not make it work error free. Thanks for any comments. Friend i concern with some that man told me , JavaScript programming is the best effective for website development. so how it is tell me ?
I want a Login Box to be opened in modal window when user clicks on a link and authentication is done with Ajax. I tried jQuery BlockUI, jQuery UI, ThickBox. But they are large in scope. I also tried writing separate plugin for my need but i don't have clear idea how does it work. So please either suggest a way or give me link to article which is simple to understand and can clear how it work. Hi all, looking for some help. I found this script that does almost everything i need. I have a form that has a small section of two radio buttons when you click on the first one i need a series of text boxes to open wrapped in a div box and that happens great, but when the other one is clicked i need them to go away, the whole div box. also the text boxes also have some hidden fields attached to them will not not pass to the shopping cart if the text boxes are disabled. here is what i have so far. placed in head Code: <SCRIPT LANGUAGE="JavaScript"> function toggle(chkbox, group) { var visSetting = (chkbox.checked) ? "visible" : "hidden" document.getElementById(group).style.visibility = visSetting }</script> part of the form having issues with Code: <span class="style30" style="text-align:center">Send directly to recipant:</span><input name="product3[]" type="radio" onclick="toggle(this, 'shipGroup');" value="{br}{b}SEND CERT DIRECTLY TO RECIPANT---{/b}"/> <br/> <center> <span class="style30">Send to me to give to the recipant:</span> <input name="product3[]" type="radio" value="{br}{b}SEND CERT TO ME TO GIVE TO RECIPANT---{/b}" /> </center> <input type="hidden" name="price3" value=".00" /> <input type="hidden" name="qty3" value="1" /> <input type="hidden" name="noqty3" value="3" /> <div id="shipGroup"><table width="616"> <tr> <td width="125" style="text-align:left"> <span class="style30">First Name</span> <input type="hidden" name="product3[]1" value="{br}FIRST NAME:" /></td> <td width="151"><input type="text" name="product3[]2" value=""/></td> <td width="147" style="text-align:right"><span class="style30" >Last Name</span> <input type="hidden" name="product3[]3" value="{br}LAST NAME:" /></td> <td width="173" style="text-align:left"><input type="text" name="product3[]4" value=""/></td></tr> <tr><td colspan="3" style="text-align:left"><span class="style30">Address</span> <input type="hidden" name="product3[]5" value="{br}ADDRESS:" /> <input type="text" name="product3[]6" value="" size="30"/></td> <td> </td> </tr> <tr><td colspan="2" style="text-align:left"><span class="style30">City</span> <input type="hidden" name="product3[]7" value="{br}CITY:" /><input type="text" name="product3[]8" value=""/></td> <td><span class="style30">State</span> <input type="hidden" name="product3[]9" value="{br}STATE:" /> <input type="text" name="product3[]10" value="" size="10"/></td> <td><span class="style30">Zip code</span> <input type="hidden" name="product3[]11" value="{br}ZIP CODE:" /> <input type="text" name="product3[]12" value="" size="5"/></td></tr></table> </div> please anyone with help will be great Hello. Can anyone please tell me what information in the second java script code needs to be changed to make a toggle expand in place. The toggles currently expand properly, but the second toggle, as well as the others, jump back up to the first toggle when expanded. The first toggle: <script type="text/javascript">// <![CDATA[ function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; } // ]]></script> The second toggle: <script type="text/javascript">// <![CDATA[ function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; } // ]]></script> Here is the referenced page: http://sprintexperts.info/phones/# Thanks in advance! I'm not sure if this is a JS or CSS problem, but I figure I would start here. What is wrong with the "onload" function that makes it so that I can not initialize the class name? I get no errors and the toggleClass(IDS) function appears to work fine with similar logic tests. What I expect to happen is that the <blockquote id=...> class names be initialized to hide if and only if JS is available for the toggleClass function to work. Here is what I am doing... Code: <!DOC HTML> <html> <head> <title> Toggle Class </title> <script type="text/javascript"> //<![CDATA[ function toggleClass(IDS) { var sel = document.getElementById(IDS); // alert(IDS+' : '+sel.className); if (sel.className != 'hide') { sel.className = 'hide'; } else { sel.className = 'show'; } } window.onload = function() { var sel = document.getElementsByTagName('*'); for (var i=0; i<sel[i].length; ++i) { if (sel[i].className == 'show') { sel[i].className = 'hide'; alert(sel[i].id); } } } //]]> </script> <style type="text/css"> .show { display: block; } .hide { display: none; } li { list-style-type: none; } #Schedule { margin:0px; padding:5px; } #Projects { margin:0px; padding:5px; } </style> </head> <body> <a href="#" onclick="toggleClass('Schedule');return false"> Schedule </a> <blockquote id="Schedule" class='show'> <li>Monday:</li> <li>Tuesday:</li> <li>Wednesday:</li> <li>Thursday:</li> <li>Friday:</li> </blockquote> <br> <a href="#" onclick="toggleClass('Projects');return false"> Projects </a> <blockquote id="Projects" class='show'> <li>Current</li> <li>Past</li> <li>Future</li> <li>On-going</li> </blockquote> </body> </html> I am trying to toggle a button (button-top) to move 860px to the right when clicked, while a div panel (textbox1) with text slides down next to it. The panel toggles fine when the buttons (wrap or button-top) are clicked, but the button moves to the right, and then does not move back to its original position when the buttons are clicked the second time. I have tried so many different methods of coding this, but i have problems where the button keeps moving further to the right every time it is clicked. or when it does move back, it does it automatically (not on click) and suddenly disappears. Here is the code that I have ended up with so far. Code: $(function() { $("#textbox1").hide(); $("#wrap").click(function() { $("#button-top").animate({right: "860px"}, 2000); $('#textbox1').animate({height: "toggle"}, 2000); }); }); I had some help last week with a brands a to z list which shows a div containing list of brands starting with the relevant letter onclick. It works pretty well with one flaw. The brand links within the div seem to activate the toggle function. My wish is that the layer is shown when a letter is clicked but then hides on div onMouseOut so that a different letter can be selected. Here is by code; Javascript; Code: function toggle_visibility(o,id) { var obj = document.getElementById(id); obj.style.display=(obj.style.display == 'block')?'none':'block'; if (obj.style.display!='none') { obj.style.left=zxcPos(o)[0]+20+'px'; obj.style.top=zxcPos(o)[1]+20+'px';} } function zxcPos(obj){ var rtn=[0,0]; while(obj){ rtn[0]+=obj.offsetLeft; rtn[1]+=obj.offsetTop; obj=obj.offsetParent; } return rtn; } Here is a sample of my a to z table; Code: <table width="100%" border="0" cellspacing="2" cellpadding="2"> <tr> <td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename20');">U</a></td> <td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename21');">V</a></td> <td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename22');">W</a></td> <td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename23');">X</a></td> </tr> <tr> <td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename24');">Y</a></td> <td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename25');">Z</a></td> </tr></table> And here is an example of the Brand name div ; Code: <div id="uniquename21" onMouseOut="toggle_visibility('null','uniquename21');" style="display:none; position:absolute; border-style: solid; background-color: white; padding: 5px;"> <a href="Manufacturer-view.asp?ManID=43">VPX</a><br> <a href="Manufacturer-view.asp?ManID=44">Vyomax</a> </div> You can view the site on my test page; http://www.dp-development.co.uk/ProteinStop/site/ (Brand menu on the left nav) Thank you for any help you can give I'm sure this is a simple thing to do, but I know next to zero javascript and can't find an example online. What I want to do is to toggle a number on a webpage when a user clicks a link. So ideally there would be a "click to toggle" link, and then a number (lets say 400), when the user clicks that toggle link the number would change to 800 (or whatever my variable is set to), when they click it again it would go back to that original number (in this case 400). Would someone be kind enough to help me with this? Thanks I created an FAQ toggle for my site. I have the toggle working great. The problem is everytime I click one of the toggle links I am brought to the top of the page. Here it is. Any help is appreciated. Hey, while your there if you want to like my site on facebook, I won't complain. Hello. I'm really new to java script and could really use some help. What I'm trying to do is have 3 buttons on the header of my site fromm left to right. When one button is pressed a table or div drops down moving the site <body> and showing the content. Then if the same button is pressed it will close. Also when one of the other buttons are pressed the same drop down will happen and will close the others. Here is what I'm working with. This is one of the links/buttons. <div class="menu"> <ul> <li><a class="drop" href="#">Drop down</a></li> </ul> </div> This is what drops down <div id="dropdown" style="display:none;"> <div class="categories"><br/> <td>Content of drop here (100% with)</td> </div> </div> HEre is the java script $(document).ready(function(){$('a.drop').click(function(){$('#drop').toggle(200);return false;});$('a.refine').click(function(){ So this open and close (drop down drop up) fine but if I want three with the others closing when another is opened how would I do that? |