Hadien

In event handlers this will usually be changed to refer to the element that fired the event so that you can have easy access to it (often times when an element triggers a function through an event, that function will usually want to grab said element). As far as event handling goes, you can get away with not using this if you want to. but in other areas... sometimes dot notation isn't enough, or sometimes you will actually want to use this. Sometimes certain functions change what the this reference refers to. setTimeout and setInterval both also change the this reference to the window delegating the function (honestly I don't know why it does that, it usually raises more troubles that way). Some classes have functions which are part of one this yet you may want a different object to have access to the this reference (one notable example is JQuery UI's tooltip will change the this reference to the target element in the content property/function, even though you say something like Dice.roll() the "this" usage inside the roll function will refer to the element, and not the dice. Bind will make sure roll uses the proper this). and finally another example in a recent post I did brought up another use of bind, to use functions which belong to one Class on an object in a different class. I used Array.prototype.slice.bind(arguements) so that an Arguments object could use an Array's function as if it was an array, which in this case was a simple way to cast the Arguments object into an Array object. Slice uses the this keyword a lot in its function and since Arguments has a lot of the same properties as an Array, up to the point that Slice won't notice its not an array, Arguments can get away with using slice to make a copy of it as an array. There are more uses of Bind, but suffice to say it tends to have more use in class functions that interact with different classes, rather than standalone event handlers, in my experience anyways.

there is a way for you to access the CSS styles that were defined in external sheets or even directly in a style tag with javascript var stylesheet = document.styleSheets[document.styleSheets.length-1];var rules = stylesheet.cssRules || stylesheet.rules;for(var i = rules.length-1; i>=0;i--){ if(rules[i].selectorText == "#b1"){ var selector = rules[i]; break; }}alert(selector.cssText)//prints://#b1 { position: absolute; left: 300px; }alert(selector.style.cssText)//prints://position: absolute; left: 300px;alert(selector.style.left)//prints: //300px;alert(selector.style[selector.style[1]])//left was the 2nd defined style in the selector so selector will also say the index "1" is "left"// and thus selector["left"] will also point to the same property and thus alert prints the same thing//300px for those times when javascript needs to know what a selector had (honestly this is almost never). its not advised to rely on what you get from document.styleSheets, nor will it be effective to mess with it unless you devote a lot of code to administrate what you do with it. because when getting the styles from a selector you can't be sure that a certain element is actually using the selector's styles without devoting a lot of time deep checking other styles and the current element nodes. its often more effective and lightweight to simply call window.getComputedStyle(element).getPropertyValue("left") to get what you wanted. note: IE doesn't have getComputedStyle(), it has its own version, which I forget the name of at the moment, that does the same thing.

with such a tiny interval window one should try to take as many optimizations as possible.first problem is that you're assigning the result of the scroll function to window.onload, and not a reference to the function itself. since scroll doesn't return anything, your basically saying window.onload = undefined, but your running scroll in the process (immediately, not when the page finishes loading). you're actually running scroll, possibly twice or even MORE at the same time with setInterval, before the page actually loads . link the setInterval to the onload through a function. a couple other optimizations is that you can set the document.getElementById() calls in variables outside the function so that they aren't called at every single interval. you also don't need three variables n,m,o since they all move basically at the same pace and in the same direction. you can simply use one variable and the 3 elements will place in their specific offsets to that one variable. <script type="text/javascript">var images = [ document.getElementById("i1").style, document.getElementById("i2").style, document.getElementById("i3").style];var pan = 2100;function scroll(){ images[0].left = ((pan+1399)%2100-1399)+"px"; images[1].left = ((pan+1399)%2100- 699)+"px"; images[2].left = ((pan-- )%2100- 699)+"px"; pan %= 2100;}window.onload=function(){setInterval(scroll,10)};</script> the window.onload=scroll() is probably what slowed it down as it's trying to move images before they fully load, compounded with the fact that setInterval was running instantly (possibly multiple times before the images finish loading). I can't guarantee that this will completely solve your slow down problems as it could be happening for a number of different reasons which I'll be unable to figure out from here. but this should help in the slightest.

There was a syntax error in parseHTTPGet() when i rewrote it, and a semantic error in objToUri(). I also made it a little more robust in adding the search value to clickRefer.href. also the anchor tag was adding that other url because the original href didn't provide a proper protocol. make sure href start with a "http://" and ends with a "/" when writing them out, or javascript will automatically prepend the current address.(apparently when you type "http://" in a paragraph it makes the entire paragraph disappear from the post, so I'm using a code block to escape it) this code has been tested and works<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Simple Script 1 Phase 1</title> <script type="text/javascript"> var defaultUrl = "rupeerain"; function parseHTTPGet(win){ var data = {}; if(!win) win = window; if(win.location.search.length<1) return data; var getDataArray = win.location.search.substr(1).split("&"); for(var i=0;i<getDataArray.length;i++){ var keyVal = getDataArray[i].split("="); data[unescape(keyVal[0])] = (keyVal[1].length)?unescape(keyVal[1]):undefined; } return data; } function objToUri(obj){ var arr = []; for(prop in obj){ if(typeof obj[prop] != "undefined") arr.push(encodeURIComponent(prop)+"="+encodeURIComponent(obj[prop])); } return arr.join("&"); } function doOnLoad(){ var clickRefer= document.getElementById("clickRefer"); var relink = parseHTTPGet(); //if r wasn't passed, sets to defaultUrl relink.r = relink.r || defaultUrl; clickRefer.href += (relink.length)? "?"+objToUri(relink) : ""; } </script> </head> <body onload="doOnLoad()"> <a id="clickRefer" href="http://www.neobux.com/">CLICK HERE</a> </body></html>

Godaddy should both be able to and allow you to write js code on their site. a publicly accessible HTML page without javascript on it is exceedingly rare these days. you should be able to give a page like this to Godaddy. <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Simple Script 1 Phase 1</title> <script type="text/javascript"> var defaultUrl = "rupeerain"; function parseHTTPGet(win){ var data = {}; if(!win) win = window; if(win.location.search.length<1) return data; var getDataArray = win.location.search.substr(1).split("&"); for(var i=0li<getDataArray.length;i++){ var keyVal = getDataArray[i].split("="); data[unescape(keyVal[0])] = (keyVal[1].length)?unescape(keyVal[1]):undefined; } return data; } function objToUri(obj){ var arr = []; for(prop in obj){ if(typeof obj.prop != "undefined") arr.push(encodeURIComponent(prop)+"="+encodeURIComponent(obj.prop)); } return arr.join("&"); } function doOnLoad(){ var relink = parseHTTPGet(); //if r wasn't passed, sets to defaultUrl relink.r = relink.r || defaultUrl; document.getElementById("clickRefer").href +="?"+objToUri(relink); } </script> </head> <body onload="doOnLoad()"> <a id="clickRefer" href="www.neobux.com/">CLICK HERE</a> </body></html>

well let's break each down to single words. grab a cold one as this is a long post. starting with Array.prototype.slice.call(args). since you likely already know what an Array is I'll be brief with it. An array is a contiguous collection of data, each data point having an index which the array will refer to. Arrays also have a length property and numerous functions to go with it. may seem obvious, but these index/length qualities are whats important, which I'll explain later in the post. prototype is javascripts way of predefining properties and methods that are directly available to all instances of the class (in this case all Array instances will have the slice function). if the current object doesn't have the property or method defined, it'll check it's prototype to see if its defined there, this is why when you create a new object it already comes with a set of functions you didn't define like toString (which converts the object into a string if javascript expected a string when given an object). you can easily overwrite (or "shadow", as the term is called) a prototype's property/method by defining another property/method of the same name at a level closer than the prototype. for instance Function has a prototype, which in turn has an Object's prototype. this means Function has Object's toString method. however Function has shadowed Object.prototype.toString() by defining a Function.prototype.toString(), so instead of function.toString() printing "[Object object]", it'll print either the actual code in a string, or the function with the inside code replaced with "[native code]" (exactly what's printed can vary from browser to browser, but pretty much only functions that aren't user defined will print "[native code]". slice is an array function that makes a shallow copy of the current array instance it accepts upto two index arguments (begin, end) to show what to copy from the current array, and returns that copy as an array. if you don't pass in arguments to it (which i don't), it assumes you want to shallow-copy the entire array. call is a function defined in Function.prototype. this means every single function in javascript has access to it. call (and it's similar sibling methods: apply and bind) controls what the "this" keyword will be when it runs the function, the first argument is the "this" reference, while all following arguments will be given to the method it's calling as that method's arguments. so slice.call(args,begin,end) is basically the same as args.slice(begin,end)…basically IF args is an actual array. so why am I running Array.prototype.slice.call(args) and not simply args.slice()? simple answer is because args isn't an Array. args is an Arguments Object (rather should be, I've made no checks to enforce). when a function is running they have access to an Arguments object (uppercase) which is stored in arguments (lowercase) and arguments, understandably, stores all the arguments that were passed to the function. well what I am doing is that I'm taking all the arguments passed into slider (your images urls) and giving them to the instance method. So args is slider's arguments Back to Array.prototype.slice.call(args)… args isn't an array, but it IS array-like. args has an index like arrays do, and a length property like arrays. but it has other properties like caller and callee which arrays don't have. and args doesn't have access to methods that Arrays have like indexOf, push, slice, or what I need unshift. SO I grab Array's slice method (via Array.prototype.slice) and tell it to use args as if its an array (via .call(args)). Since slice doesn't use any other Array methods inside it, just does index copies and uses length, it has no idea that args is NOT an array, and slice will return args converted into an array. as for Function.prototype.instance it is a function that I added so that i can make a call to a class's constructor that could accept any amount of arguments. in your case I wrote slider in a way that it can accept as many arguments (images) as you want. since I wanted to add support where its not necessary to prepend slider with the "new" keyword, like how it is done in jQuery (you never have to say "new $()" cause they added support for that), I gave you the instance method I wrote up in my own polyfill.js. The if(Function.prototype.instance) is a check to see if there is already a method "instance()" defined in Function's prototype. Now there shouldn't be one as its not documented nor planned for Function to have such a method and in all honestly it shouldn't. however since you and I can't separate classes from Function it kinda leaves our hands tied. I once tried writing my own class Object which would allow me to use classical inheritance in javascript more simply. class would be more or less a wrapper/adapter object which I could pass simple commands like: Dog.extends(Animal) .implements(walkable) .overloads({speak:function(){return "woof";}); where Dog and Animal are class constructors, walkable is an interface, and speak is an overloaded and inheritable function. the entire thing fell apart when I couldn't code for dynamic constructors so I just moved all my class Object methods to Function.prototype, with instance being one of my remanent 'class' methods. If I ever figure out a better structure for my class object, I'll come back and clean up these remnants, but for now you have access to this stand-alone method that you can use. While simply adding to Function.prototype is bad, its "a slap on the wrist" bad, while giving us so much more utility with Function. The if() check is there for consistentcy (all other polyfills use similar checks) and as a form of "future-proofing". if ECMA script ever does come out with it's own instance method (unlikely) then my code here won't overwrite it, and will probably be better since it'll have more access to the insides of javascript. hoped that answered more questions than it probably gave you.

$needles = array("'", ""","n","r");$replaces= array("'",'"',"", "");$item_name = str_replace($needles, $replaces, $item_name); don't simply use """. that is invalid code by itself in PHP . and those quotes might have been important, just escape them.

I did a complete rewrite of your example (and in the time you got your problem solved, regardless I'll post anyways). <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> #gallery{ width:500px; height:100px; border:1px solid blue; display:none; } #gallery img{ width:100px; height:100px; } #current { width:300px;height:300px; position:absolute;top:120px; left:200px;border:1px solid black; } #current img{width:300px;height:300px;} div.aButton{ height:30px; width:100px; background-color:grey; position:absolute; left:510px; } #next{left:510px;} #previous{left:0px;} #auto{left:600px;} #closeAuto{top:50px;left:600px;} a:hover{color:red;} </style> </head> <body style="position:relative;"> <div id="gallery"></div> <div class="aButton" id="next"> <a href="#" onClick="myGallery.forward();">next</a> </div> <div class="aButton" id="previous"> <a href="#" onClick="myGallery.back();">previous</a> </div> <div class="aButton" id="auto"> <a href="#" onClick="myGallery.auto();">auto</a> </div> <div class="aButton" id="closeAuto"> <a href="#" onClick="myGallery.stop();">closeAuto</a> </div> <div id="current"> <img src="css/images/animated-overlay.gif" /> </div> <script> //my polyfill instance function for calling constructors with // numerous arguments if(!Function.prototype.instance) Function.prototype.instance = function(classname,args){ //allows one to call a new constructor with a variable length // of arguments I mostly use it when testing if this relates // to the constructor from within that same constructor var args = Array.prototype.slice.call(args); args.unshift("");//first argument is always ignored, so //add a placeholder in the argument array so that // the 1st REAL argument isn't overlooked. return new (Function.bind.apply(classname,args)); } function slider(){ //makes sure that if you call the constructor without the "new" // operator that its called correctly if(!(this instanceof slider)) return Function.instance(slider,arguments); this.gallery=document.getElementById("gallery"); this.previous=document.getElementById("previous"); this.current=document.getElementById("current"); this.next=document.getElementById("next"); this.iterator=null; var _intervalID=null;//private variable for(var i=0;i<arguments.length;i++){ var img = new Image() img.src = arguments[i]; img.alt = "alt ["+i+"]"; this.gallery.appendChild(img); } this.iterator = this.gallery.firstElementChild; this._updateCurrent(); this.auto = function auto(forward,interval){ if(_intervalID!=null) return; forward = forward !=false; //defaults forward to true; interval = typeof interval =="number" ?Math.max(0,parseInt(interval))//validate interval :700;//interval default if(forward) _intervalID = setInterval(this.forward.bind(this),interval); else _intervalID = setInterval(this.back.bind(this),interval); }; this.stop = function stop(){ if(_intervalID==null)return; //can't stop interval since slider doesn't know the ID clearInterval(_intervalID); _intervalID=null; }; }; //helper function to be called internally slider.prototype._updateCurrent=function _updateCurrent(){ this.current.innerHTML="" this.current.appendChild(this.iterator.cloneNode(true)); }; slider.prototype.forward = function forward(){ //do nothing if too few images in gallery if(this.gallery.children.length<2) return; if(this.iterator.nextElementSibling === null) //go back to beginning if current image is the last this.iterator = this.gallery.firstElementChild else //else go to next image this.iterator = this.iterator.nextElementSibling; return this._updateCurrent(); }; slider.prototype.back = function back(){ //do nothing if too few images in gallery if(this.gallery.children.length<2) return; if(this.iterator.previousElementSibling === null) //go back to last image if current image is the first this.iterator = this.gallery.lastElementChild else //else go to previous image this.iterator = this.iterator.previousElementSibling; return this._updateCurrent(); }; var myGallery = slider( "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg"); </script> </body></html> I used an OOP approach so all the behavior and info is consolidated into a single object (and so its a little more readable). as it is now its made specifically bound to your particular example. but spending a couple more minutes on the code I can make it generic enough that you can easily have multiple galleries on a page, if you'll ever need to.

it a weird effect with CSS specifity. for some reason your ul.submenu is honoring "#main-nav" (line: 413, though debugger says line 476) over "#main-nav ul" (line:490, though debugger says line 563) and it shouldn't. If you comment out z-index in "#main-nav" your drop down will show correctly. apparently you have some bad CSS errors in your external sheet which is messing up the CSS specificity. even if I insert inline styling on the submenu it'll still fully respect #main-nav over any other selector. in many places you have a random '*' inside your selectors. fix these first and see if styling starts to behave like it should.

you defined "var c" inside "auto"'s scope so no other function (close, in this case) knows what it is. define var c outside the function so the other functions can see it, and assign setTimeout() to c (not var c) inside the function

oh that was a typo, should have been 'classes', fixed

i know is possible for php to directly parse in simple .html extensions, I just don't remember exactly how. I do remember certain frameworks, Zend specifically, created special new extensions like .phtml which php will run in, different from mod_rewrite which makes sure the browser doesn't show the ".php", ".html", or ".phtml". I don't know exactly why they don't simply allow .html extension to directly run PHP by default, but my guess would be certain things like compatibility, overhead, etc.

if you need to perform some other actions on child divs, other than simple CSS, try using an inside loop divs = document.getElementsByTagName("div");for(i=0;i<divs.length;i++){ //check every div and see if it has "myclassname" if(divs[i].hasClass("myclassname")){ var isfound = null; //if the div also has "group1" it checks it's descendants for an id if(divs[i].hasClass("group1"){ //first unconditionally set all children to none display for(j=0;j<divs[i].children.length;j++) divs[i].children[j].style.display = "none"; //then find all divs inside this current div var innerDivs = divs[i].getElementsByTagName("div"); for(j=0;j<innerDivs.length;j++){ //see if the div with the specific id is in this innerDivs if(innerDivs[j].id == "some-other-thing-which-should-remain-visible"){ isfound = innerDivs[j]; //found the special div, now walk with it back out to the outer divs, // since its possible that this this div isn't a direct child, // repairing any displays that were set to none while(isfound.parentElement && isfound != divs[i]){ isfound.style.display = undefined; isfound = isfound.parentElement } break; } } } //if divs[i] didn't have the "group1" class OR if it did but didn't have the // special inside div#some_other-thing-which-should-remain-visible // then isfound will still be set to null if(!isfound) divs[i].style.display="none"; }}

please clarify, do you want the website to show a count of ALL visitors to the site, or a count of a specific visitor?javascript can't hold a count for all visitors, and it has some noticeable limitations for even counting just one visitor (it can remember the visitor, but its easy for them to forget with nothing javascript can do about it). In either case its better to use sever-side scripting like php/Java alongside a database like mysql/oracle.

function parseHTTPGet(win){ var data = {}; if(!win) win = window; if(win.location.search.length <1) return data; var getDataArray = win.location.search.substr(1).split("&"); for (var i =0; i<getDataArray.length;i++){ var keyVal = getDataArray.split("="); data[unescape(keyVal[0])] = (keyVal[1].length)?unescape(keyVal):undefined; } return data;}var reference = parseHTTPGet();//"1111111" is default reference if no get data was passedvar getstring = encodeURIComponent(!reference.r || reference.r == undefined ? "1111111":reference.r);document.getElementById("clickRefer").href = "http://www.clixsense.com/?r="+getstring;HTML link<a id="clickRefer" href="http://www.clixsense.com/?r=1111111" >Click Here</a>

I think then classes like "myclassnamefaux" or "blahblahmyclassname" would return false positives, that why I edited in the word boundaries after posting

if your making HTML which could have more than one class at a time, then you'll need to get your hands a little more dirty. If an element has multiple classes, including "myclassname", then that test would give a false negative. so try this. function hasClass(dom,classname){ var classes = dom.className; if(classes.length == 0 || typeof classname != "string" || classname.length == 0) return false; var regEx = new RegExp("b"+classname+"b"); return regEx.test(classes);}//later on in your forloopif(!hasClass(divs[i],"myclassname") divs[i].style.display = "none" or you could instead write a polyfill to add support to all elements if(!Element.prototype.hasClass) Element.prototype.hasClass = function hasClass(name){ if(this.className.length == 0 || typeof name != "string" || name.length == 0) return false; return (new RegEx("b"+name+"b")).test(this.className);}// should allow you to simply use it like this…if(!div[i].hasClass("mayclassname")) div[i].style.display = "none"; EDIT: probably needed to add those word boundaries.EDIT EDIT: somehow a bad zero-space unicode character got added in my example which is why it was erroring the code. I removed it.

can't be done, as far as I know. they specifically make sure javascript can't control javascript in other windows. if they didn't it'd be a serious security hazard. imagine some malicious website waiting for users to visit them and then creating a tiny window with 0 width/height that opened banking websites (or any site with important personal information) and then grabbed your cookies for those sites. it then has a lot of access to some information you as a user don't want them have access to. of course high security sites nowadays have better systems that can't be thwarted by simple stolen cookies, nonetheless javascript still shouldn't be able to access other windows. if you want actual in-browser popups there are things like alert() and confirm(). however those are severely limited in functionality and is quite disruptive to the normal flow of a site. I believe you're interested in things called modals, which are in-window popups. modals are pretty much absolutely positioned div elements (the popup) with another div element blanketing everything behind the popup so a user can't access anything else on the site directly.

another update.I've spent some time and wrote up a custom tooltip widget "nesttip" in jQuery ui which should perform to your needs, for the most part. I was able to have the submenus propagate control to the supermenus so that when they close they'll close their parents. one thing however is that I can't seem to have the menus fully reopen if you catch them halfway open/closed. for now I just forced a small delay so that they don't close immediately, but thats not what I wanted initially to happen. Nesttip widget: (function( $ ) { $.widget( "custom.nesttip", $.ui.tooltip, { options: { position: { my: "left+15 top", at: "left top", collision: "flipfit flipfit" }, hide:{effect:"slide",direction:"up",duration:800}, show:{effect:"slide",direction:"up",duration:200} }, _create: function() { //force no mouse tracking. mouse needs to be able to // hover over nested tooltip this.options.track = false; this._super(); this.currentTooltip = null; this._supermenu = null; this._delayClose = null; }, adopted:function(target){ target = $(target).first(); if(!(target.length) || target.data("nesttip") ===null) return false; //adoption failed, target wasn't a // proper nesttip widget this._supermenu = target; return true; }, orphaned:function(){ this._supermenu = null; }, _open: function( event, target, content ) { this._superApply(arguments); var self = this; this.currentTooltip = this._find( target ); this.currentTooltip.hover(this.reopen,this.reclose); }, close:function(event){ //I can't ssem to find a clean way to have the sub-tooltip fully // reopen the parent tooltip, for now I force a small delay in // the close script for mouse traversal the problem isn't solved, // just a bypass solution. if(this._delayClose!==null){ //normally will do nothing, but if close is called again // before setTimeout completes... clearTimeout(this._delayClose); this._delayClose = null return this._superApply(arguments); } //setTimeout or _delay don't work directly with _superApply, // so I got a little creative. this._delayClose = setTimeout(this.close,400,event); }, _removeTooltip:function(tooltip){ //if currentTooltip hasn't shifted attention to another target // before this tooltip is removed, set currentTooltip to null // this is so reclose can know when to delegate reclose if there // are any tooltips open wouldn't want it to try to close a // supermenu if the user meant to hover some other submenu. if(this.currentTooltip && this.currentTooltip.attr("id")==tooltip.attr("id")) this.currentTooltip = null; this._superApply(arguments); }, reopen: function(){ //reopen only prevents tooltips from closing if they aren't // fully closed yet tooltips that have already closed will ignore // this and not propagate reopen. if(this.currentTooltip === null) return; //cancel possible close&delete callbacks this.currentTooltip.stop( true ); if(this._delayClose!==null){ clearTimeout(this._delayClose); this._delayClose = null; } //if any, make sure the ancestor tooltips also stay open if(this._supermenu!==null) this._supermenu.nesttip("reopen"); //remove the regular handlers that would close the tooltip, // calling reclose or simply re-hovering/re-focusing the // tooltip's target will repair original handlers and will // close itself this._off(this.element, "mouseleave focusout"); }, reclose: function(){ //reclose only closes tooltips that are still open. if(this.currentTooltip === null) return; var self = this; this.currentTooltip.stop( true ); this._hide( this.currentTooltip, this.options.hide, function() { self._removeTooltip( $( this ) ); //after this tooltip finishes closing, if(self.currentTooltip ===null && self._supermenu !==null) self._supermenu.nesttip("reclose"); }); } });}( jQuery ) ); I also wrote a wrapper function to for your particular multi-menu: function slider(target,options){ target = $(target);//make sure its a jquery object if (!(target.length || 0 in target)) throw "invalid jQuery object passed in argument 1"; var ttOptions = {};//list of preset options var options = options || {}; var d;//reverse direction that animations actually use if($(parent).length) this.supermenu = $(parent).first(); options.effect = options.effect || "slide"; options.openTime = options.openTime || 200; options.closeTime = options.closeTime || 800; var childOpts = $.extend({},options) options.direction = options.direction || "down"; options.direction = (""+options.direction).toLowerCase(); ttOptions.position={my:"left top",at:"left bottom+10",collision:"flipfit flipfit"} switch(options.direction){ case "right": d = "left"; ttOptions.items = ".slideRight"; childOpts.direction="down"; ttOptions.position.my="left top"; ttOptions.position.at="right+10px top"; break; case "left": d="right"; ttOptions.items = ".slideLeft"; childOpts.direction="up"; ttOptions.position.my="right top"; ttOptions.position.at="left-10px top"; break; case "up": d="down"; ttOptions.items = ".slideUp"; childOpts.direction="left"; ttOptions.position.my="left bottom"; ttOptions.position.at="left+10px bottom"; break; case "down": default: d="up"; options.direction = "down"; ttOptions.items = ".slideDown"; childOpts.direction="right"; ttOptions.position.my="left top"; ttOptions.position.at="left bottom+10px"; break; } ttOptions.hide={"effect":options.effect,direction:d,duration:options.closeTime}; ttOptions.show={"effect":options.effect,direction:d,duration:options.openTime }; ttOptions.content=function(){ var nest = $("<div>").append($(this).next().html()) slider(nest,childOpts).nesttip("adopted",target); return nest; } return target.nesttip(ttOptions);} now all you have to do to map all the tooltip functionality, using the html I posted in my previous post, is to run this line in a script tag after the menu html: slider($(".menuRoot"),{direction:"right"}); boom. your menu should behave like you want. take it for a spin and see if you like the behavior. after that we can work on the css to get it the look you want. lot more work for a post than I usually write up, but it just so happens I was thinking on using similar behavior on one of my own sites.

var test = {"r1":{correct:"A",userAnswer:undefined},"r2":{correct:"B",userAnswer:undefined},"r3":{correct:"C",userAnswer:undefined},"r4":{correct:"D",userAnswer:undefined},"r5":{correct:"A",userAnswer:undefined}};var grade;function answer(element){ var question = element.name var answer = element.value test.question.userAnswer = answer; //or shorthand //test[element.name]["userAnswer"] = element.value; gradeTest();}function gradeTest(){ var numOfQuestions = 0; var numCorrect = 0; for(question in test){ if(typeof test.question.UserAnswer == "undefined") return; //test not finished, don't grade yet numofQuestions++; numCorrect += (test.question.userAnswer === test.question.correct) } grade = Math.round(100*numCorrect / numOfQuestions); document.getElementById("total").innerHTML = grade;}then a typical question will look like this along with a spot to show the grade<div>1. This man has dark ............ <input type="radio" name="r1" value="A" onchange="answer(this);" /> hair <input type="radio" name="r1" value="B" onchange="answer(this);" /> heads <input type="radio" name="r1" value="C" onchange="answer(this);" /> hairs <input type="radio" name="r1" value="D" onchange="answer(this);" /> head</div><div> grade: <span id="total"></span><div>notice that I changed from onclick to onchange. this will allow keyboard accessibility as well as mouse interaction.

Use set/clearInterval instead of set/clearTimeout when you expect to call a function multiple times in succession over a specific period of time. setTimeout wasn't meant to be called back-to-back against itself and will cause some overhead. also, "setTimeout(scrolll,50)" is not only a typo but won't work because el isn't defined in the call. In my example, I use a helper function defined INSIDE the function so the it has access to the scope where el is defined. ID is placed in the global scope so that only one link will be allowed to scroll at a time(you don't want two elements fighting over where the window should scroll to). also added a simple easing effect to the scrolling. working kind of like a rubber band, the window will scroll faster the farther away it is from the target, and should slow down when it gets near. var ID = null;function scrollTo(el){ if("string" == typeof el) el=document.getElementById(el); var scroller = function =scroller(){ var amount = (el.offsetTop-window.pageYOffset)/10; amount = amount>0?Math.ceil(amount):Math.floor(amount); window.scrollBy(0,amount); if(window.pageYOffset==el.offsetTop){ clearInterval(ID) ID = null; } } if(ID===null) ID = setInterval(scroller,25);}

it appears that the problem is elsewhere and not in that code snippet. its likely that an element with an id "edit_item_image1_hidden" doesn't exist on that page. check the code thats adding the element (if its javascript adding the element) and setting the id.

such a request is pretty difficult for someone without CSS knowledge to fulfill. and its not something thats easy to answer on the spot. depending on the behavior you're looking for, this can be more advanced than it first appears. but it can be done.I once done something similar with jQuery's UI tooltips (for some "Yo dawg, I heard you like tooltip-ception" goodness). if you're not careful it can get buggy on you (since jQuery UI tooltips weren't meant to be used that way) but they'll effectively do the job. with jQuery UI you'll have access to at least a dozen animation effects and numerous easing motions, plus other prebuilt utilities already at hand to lay much of the ground work. div.menuheader{width:200px;}div.slideDown{display:inline;}div.menuheader+div{display:none;} <div class="menuRoot"> <div class="menuheader slideRight">root menu</div> <div> <div class="menuheader slideDown">horizontal menu 1</div> <div> <div class="menuheader slideRight">vertical menu 1</div> <div> <!-- innermost menu--> </div> <div class="menuheader slideRight">vertical menu 2</div> <div> <!-- other menu items --> </div> </div> <div class="menuheader slideDown">horizontal menu 2</div> <div> <!-- other menu items --> </div> </div></div> var right,down;right = { track:false, hide:{effect:"slide",direction:"left",duration:800}, show:{effect:"slide",direction:"left",duration:200}, position:{my:"left top",at:"right+10px top",collision:"flipfit flipfit"}, close:function( event, ui ) { var style = ui.tooltip.attr("style"); var remove = function(){ui.tooltip.remove();} var reopen = function () {ui.tooltip.stop(true).attr("style",style);} var reclose = function () {ui.tooltip.stop(true).toggle("slide",{direction:"left"},800,remove);}; ui.tooltip.hover(reopen,reclose); reclose(); }, items:".slideRight", content:function(){return $("<div>").append($(this).next().html()).tooltip(down);} }down = { track:false, hide:{effect:"slide",direction:"up",duration:800}, show:{effect:"slide",direction:"up",duration:200}, position:{my:"left top",at:"left bottom+10px",collision:"flipfit flipfit"}, close:function( event, ui ) { var style = ui.tooltip.attr("style"); var remove = function(){ui.tooltip.remove();} var reopen = function () {ui.tooltip.stop(true).attr("style",style);} var reclose = function () {ui.tooltip.stop(true).toggle("slide",{direction:"up"},800,remove);}; ui.tooltip.hover(reopen,reclose); reclose(); }, items:".slideDown", content:function(){return $("<div>").append($(this).next().html()).tooltip(right);} }$("div.menuRoot").tooltip(right); the code is still incomplete, the super-menus will close and deallocate themselves when you hover into the sub-menus, which by extension also delete the sub-menus. I'll try to add in the catching handlers to stop that later, when I figure it out, but heres to show you the gist of it. tooltip animation isn't quite as accessible so you can't do exactly the same thing to it as you can do to other elements.if you want some other animation effects or have the elements positioned a little differently then thats easy to change from this, with a little research in the jQueryUI documentation. and if you don't understand some thing I'll try and explain it.

I'm not sure what you're trying to do here... Do you want javascript to build the list, have the user click on the list, and have the function "getCustomerId" return the id of the selected item BEFORE "createOrder" finishes (as in the function is waiting for the user to select something before continuing on with the rest of the code)?

It doesn't make sense to me of only allowing IE users access to your website. Thats like a Gas Station only providing service to Ford drivers.