Search Results

Search found 30511 results on 1221 pages for 'javascript events'.

Page 476/1221 | < Previous Page | 472 473 474 475 476 477 478 479 480 481 482 483  | Next Page >

  • Jquery accordion, next and previous wizard, how to get previous and next sections?

    - by Wbdvlpr
    Hi I have a Jquery accordion which works fine. Sections get expanded/collapsed when clicked on respective headers. But I want to add the functionality so that when I click on "next" button it opens up the next section and clicking "Previous" button takes me back to previous section. This has been done on this page http://jquery.bassistance.de/accordion/demo/?p=1.1.2 (last example) but not sure how do I implement the same in my case. Any suggestions please. Thanks UPDATE: How do I get previous or next section of the accordion? <script type="text/javascript"> $("#accordion").accordion({ header: "h3.header" , autoHeight: false , collapsible: true }); </script> <div id="accordion"> <h3 class="header">Section 1</h3> <div> content 1 .. content 1 .. content 1 .. content 1 .. <input class="next" type="button" value="next"/> </div> <h3 class="header">Section 2</h3> <div> content 2 .. content 2 .. content 2 .. content 2 .. <input class="previous" type="button" value="previous"/> <input class="next" type="button" value="next"/> </div> <h3 class="header">Section 3</h3> <div> content 3 .. content 3 .. content 3 .. content 3 .. <input class="previous" type="button" value="previous"/> </div> </div>

    Read the article

  • jquery position changing with .css() behaving strange

    - by 11684
    I tried to make a moving img, and it works partially. If I press the right, up or down button, it moves right, up or down. But, if I press the left button, it jumps very fast very far to the right, and then back to the left and doesn't stop moving (I believe. I said it was fast). JSFiddle; Javascript: $(document).ready(function() { var up = down = left = right = false; var top = 100, left = 500; $("body").on("keydown", function(e) { if(e.keyCode == 39) {e.preventDefault(); if (right == false) right = setInterval(moveRight, 80);} else if(e.keyCode == 37) {e.preventDefault(); if (left == false) left = setInterval(moveLeft, 80);} else if(e.keyCode == 38) {e.preventDefault(); if (up == false) up = setInterval(moveUp, 80);} else if(e.keyCode == 40) {e.preventDefault(); if (down == false) down = setInterval(moveDown, 80);} }); $("body").on("keyup", function(e) { if(e.keyCode == 39) {clearInterval(right); right = false;} else if(e.keyCode == 37) {clearInterval(left); left = false;} else if(e.keyCode == 38) {clearInterval(up); up = false;} else if(e.keyCode == 40) {clearInterval(down); down = false;} }); function moveUp() { top -= 2; $("#player").css("top", top + "px"); } function moveDown() { top += 2; $("#player").css("top", top + "px"); } function moveLeft() { left -= 2; $("#player").css("left", left + "px"); } function moveRight() { left += 2; $("#player").css("left", left + "px"); } }); This is probably not the best way to do this, I'm open for better suggestions. Thanks for reading!

    Read the article

  • Difficulty with jQuery and input keydown event

    - by Rosarch
    I am making a simple JavaScript enhanced list. I want it to be a list of inputs, each with an 'Add' and 'Remove' button. If the user clicks 'Add', a new li will be added. If the user clicks 'Remove', that li will be removed. It works fine, except for hitting "enter" in an <input>. Currently, it always causes the Remove.click event handler to fire, unless there's only one item in the list. I'm not sure why. How can I suppress this? Here is the complete jQuery. My attempt to fix the "enter" issue is commented out, and it doesn't work. I suspect that I could be designing this code better; if you see an improvement I'd love to hear it. function make_smart_list(list) { var ADD_CLASS = 'foo-widget-Add'; var REMOVE_CLASS = 'foo-widget-Remove'; var jq_list = $(list); jq_list.parents('form').submit(function() { return false; }); function refresh_handlers() { jq_list.find(sprintf('.%s, .%s', REMOVE_CLASS, ADD_CLASS)).unbind('click'); // jq_list.find('input').unbind('submit'); // // jq_list.find('input').submit(function() { // var jq_this = $(this); // var next_button = jq_this.nextAll('button'); // if (next_button.hasClass(ADD_CLASS)) { // next_button.nextAll('button').click(); // return; // } // // if (next_button.hasClass(REMOVE_CLASS)) { // return false; // } // // }); jq_list.find("." + REMOVE_CLASS).click(function() { var jq_this = $(this); jq_this.parent().remove(); refresh_handlers(); return false; }); jq_list.find("." + ADD_CLASS).click(function() { var jq_this = $(this); if (jq_this.prevAll('input').val() == '') { return; } jq_this.parent().clone().appendTo(jq_this.parent().parent()); jq_this.parent().next().find('input').val('').focus(); jq_this.removeClass(ADD_CLASS).addClass(REMOVE_CLASS); jq_this.text('Remove'); refresh_handlers(); return false; }); } refresh_handlers(); } (sprintf is another script I have.)

    Read the article

  • Jquery load() loading more than I want...

    - by Probocop
    Hi, I am trying to load just the contents of a <div> into another <div> on the same page using a jquery function. But when the function triggers, it loads the entire <HTML> document into the specified <div>. Any idea why it would be doing this? My code is as follows: Jquery: function button1() { $('#sidebar-content').fadeOut(function() { $(this).load('#button1').fadeIn(); }); } function button2() { $('#sidebar-content').fadeOut(function() { $(this).load('#button2').fadeIn(); }); } HTML: <div id="content-holder"> <div id="main-content" class="float-holder"> <div id="inner"> <h1>BRAND TRUTH</h1> <div id="flashcontent"> <div id="button1"> <div id="content"> <h1>Brand Truth</h1> <p>What this basically means is our way of working, the process involved by both ourselves and our client.</p> <p>When the truth wheel process is followed, the end result is so much stronger.</p> </div> </div> <div id="button2"> <div id="content"> <h1>Button 2 Content</h1> <p>Some other content</p> <p>Some other content x2</p> </div> </div> </div> <script type="text/javascript"> // <![CDATA[ var so = new SWFObject("working.swf", "working", "400", "400", "9", "#FFFFFF"); so.write("flashcontent"); // ]]> </script> </div> <div id="sidebar"> <div id="sidebar-content"> Replace Content Here! </div> </div> </div><!-- end #main-content --> </div><!-- end #content-holder -->

    Read the article

  • How can I scale movement physics functions to frames per second (in a game engine)?

    - by Richard
    I am working on a game in Javascript (HTML5 Canvas). I implemented a simple algorithm that allows an object to follow another object with basic physics mixed in (a force vector to drive the object in the right direction, and the velocity stacks momentum, but is slowed by a constant drag force). At the moment, I set it up as a rectangle following the mouse (x, y) coordinates. Here's the code: // rectangle x, y position var x = 400; // starting x position var y = 250; // starting y position var FPS = 60; // frames per second of the screen // physics variables: var velX = 0; // initial velocity at 0 (not moving) var velY = 0; // not moving var drag = 0.92; // drag force reduces velocity by 8% per frame var force = 0.35; // overall force applied to move the rectangle var angle = 0; // angle in which to move // called every frame (at 60 frames per second): function update(){ // calculate distance between mouse and rectangle var dx = mouseX - x; var dy = mouseY - y; // calculate angle between mouse and rectangle var angle = Math.atan(dy/dx); if(dx < 0) angle += Math.PI; else if(dy < 0) angle += 2*Math.PI; // calculate the force (on or off, depending on user input) var curForce; if(keys[32]) // SPACE bar curForce = force; // if pressed, use 0.35 as force else curForce = 0; // otherwise, force is 0 // increment velocty by the force, and scaled by drag for x and y velX += curForce * Math.cos(angle); velX *= drag; velY += curForce * Math.sin(angle); velY *= drag; // update x and y by their velocities x += velX; y += velY; And that works fine at 60 frames per second. Now, the tricky part: my question is, if I change this to a different framerate (say, 30 FPS), how can I modify the force and drag values to keep the movement constant? That is, right now my rectangle (whose position is dictated by the x and y variables) moves at a maximum speed of about 4 pixels per second, and accelerates to its max speed in about 1 second. BUT, if I change the framerate, it moves slower (e.g. 30 FPS accelerates to only 2 pixels per frame). So, how can I create an equation that takes FPS (frames per second) as input, and spits out correct "drag" and "force" values that will behave the same way in real time? I know it's a heavy question, but perhaps somebody with game design experience, or knowledge of programming physics can help. Thank you for your efforts. jsFiddle: http://jsfiddle.net/BadDB

    Read the article

  • Why is C# winforms application not working without VS.NET installed?

    - by Shane
    Hi folks, I have a winforms c# app that has an embedded webbrowser control inside it generated through VS.NET 2008. We sink events by inheriting our events class from HTMLDocumentEvents2. public class IEHTMLDocumentEvents : mshtml.HTMLDocumentEvents2 { public bool onclick(mshtml.IHTMLEventObj pEvtObj) { // Clicking on an input (checkbox, radio, button, image) if (pEvtObj.srcElement.tagName == "INPUT") { // The following will result in a null pointer without VS.NET installed HTMLInputElementClass input = pEvtObj.srcElement as HTMLInputElementClass; } } } The code above works fine when clicking on elements in the webbrowser control on our dev machines with VS.NET installed. However it fails to cast the pEvtObj.srcElement when VS.NET is not installed. This immediately starts working when we install the most basic VS.NET with C# that you can. To note: The rest of the c# app works fine, and you can browser the web through the control fine as well, just that the events like the above 'onclick' can't be handled properly. I thought it would be a DLL version loaded issue but doing a diff of the files loaded indicates only minor differences. 1c1 < Process: C# App without VS.NET installed --- > Process: C# App with VS.NET 2008 installed 18d17 < C:\WINDOWS\assembly\NativeImages_v2.0.50727_32\CustomMarshalers\e148983beeb0f30918b0564849a16456\CustomMarshalers.ni.dll CustomMarshalers.ni.dll Microsoft .NET Framework Custom Marshalers Microsoft Corporation 2.0.50727.3053 36d34 < C:\Documents and Settings\XpHome\Local Settings\History\History.IE5\index.dat index.dat 37a36 > C:\Documents and Settings\XpHome\Local Settings\History\History.IE5\index.dat index.dat 44,45c43,44 < C:\Program Files\<hidden>\<hidden>\Microsoft.mshtml.dll Microsoft.mshtml.dll 7.0.3300.1 < C:\WINDOWS\assembly\NativeImages_v2.0.50727_32\Microsoft.VisualBas#\5b3d048d8c003d743ea5e72caf07773a\Microsoft.VisualBasic.ni.dll Microsoft.VisualBasic.ni.dll Visual Basic Runtime Library Microsoft Corporation 8.0.50727.3053 --- > C:\WINDOWS\assembly\GAC\Microsoft.mshtml\7.0.3300.0__b03f5f7f11d50a3a\Microsoft.mshtml.dll Microsoft.mshtml.dll 7.0.3300.1 > C:\WINDOWS\assembly\GAC_MSIL\Microsoft.VisualBasic\8.0.0.0__b03f5f7f11d50a3a\Microsoft.VisualBasic.dll Microsoft.VisualBasic.dll Visual Basic Runtime Library Microsoft Corporation 8.0.50727.3053 50,52c49,51 < c:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\mscorjit.dll mscorjit.dll Microsoft .NET Runtime Just-In-Time Compiler Microsoft Corporation 2.0.50727.3053 < C:\WINDOWS\assembly\NativeImages_v2.0.50727_32\mscorlib\9adb89fa22fd5b4ce433b5aca7fb1b07\mscorlib.ni.dll mscorlib.ni.dll Microsoft Common Language Runtime Class Library Microsoft Corporation 2.0.50727.3053 < c:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\mscorwks.dll mscorwks.dll Microsoft .NET Runtime Common Language Runtime - WorkStation Microsoft Corporation 2.0.50727.3053 --- > c:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\mscorjit.dll mscorjit.dll Microsoft .NET Runtime Just-In-Time Compiler Microsoft Corporation 2.0.50727.3082 > C:\WINDOWS\assembly\NativeImages_v2.0.50727_32\mscorlib\7124a40b9998f7b63c86bd1a2125ce26\mscorlib.ni.dll mscorlib.ni.dll Microsoft Common Language Runtime Class Library Microsoft Corporation 2.0.50727.3603 > c:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\mscorwks.dll mscorwks.dll Microsoft .NET Runtime Common Language Runtime - WorkStation Microsoft Corporation 2.0.50727.3603 94,98c93,97 < C:\WINDOWS\assembly\NativeImages_v2.0.50727_32\System.Configuration\cb4cb21d14767292e079366a5d3d76cd\System.Configuration.ni.dll System.Configuration.ni.dll System.Configuration.dll Microsoft Corporation 2.0.50727.3053 < C:\WINDOWS\assembly\NativeImages_v2.0.50727_32\System.Drawing\6978f2e90f13bc720d57fa6895c911e2\System.Drawing.ni.dll System.Drawing.ni.dll .NET Framework Microsoft Corporation 2.0.50727.3053 < C:\WINDOWS\assembly\NativeImages_v2.0.50727_32\System\aa7926460a336408c8041330ad90929d\System.ni.dll System.ni.dll .NET Framework Microsoft Corporation 2.0.50727.3053 < C:\WINDOWS\assembly\NativeImages_v2.0.50727_32\System.Windows.Forms\9a254c455892c02355ab0ab0f0727c5b\System.Windows.Forms.ni.dll System.Windows.Forms.ni.dll .NET Framework Microsoft Corporation 2.0.50727.3053 < C:\WINDOWS\assembly\NativeImages_v2.0.50727_32\System.Xml\36f3953f24d4f0b767bf172331ad6f3e\System.Xml.ni.dll System.Xml.ni.dll .NET Framework Microsoft Corporation 2.0.50727.3053 --- > C:\WINDOWS\assembly\GAC_MSIL\System.Configuration\2.0.0.0__b03f5f7f11d50a3a\System.Configuration.dll System.Configuration.dll System.Configuration.dll Microsoft Corporation 2.0.50727.3053 > C:\WINDOWS\assembly\NativeImages_v2.0.50727_32\System.Drawing\abb2ac7e08bee026f857d8fa36f9fe6f\System.Drawing.ni.dll System.Drawing.ni.dll .NET Framework Microsoft Corporation 2.0.50727.3053 > C:\WINDOWS\assembly\NativeImages_v2.0.50727_32\System\3de5bd01124463d7862bd173af90bc83\System.ni.dll System.ni.dll .NET Framework Microsoft Corporation 2.0.50727.3053 > C:\WINDOWS\assembly\NativeImages_v2.0.50727_32\System.Windows.Forms\d2ea8d76f015817db1607075812b555f\System.Windows.Forms.ni.dll System.Windows.Forms.ni.dll .NET Framework Microsoft Corporation 2.0.50727.3053 > C:\WINDOWS\assembly\NativeImages_v2.0.50727_32\System.Xml\5913d3f81e77194ec833991b1047a532\System.Xml.ni.dll System.Xml.ni.dll .NET Framework Microsoft Corporation 2.0.50727.3082

    Read the article

  • Using WeakReference to resolve issue with .NET unregistered event handlers causing memory leaks.

    - by Eric
    The problem: Registered event handlers create a reference from the event to the event handler's instance. If that instance fails to unregister the event handler (via Dispose, presumably), then the instance memory will not be freed by the garbage collector. Example: class Foo { public event Action AnEvent; public void DoEvent() { if (AnEvent != null) AnEvent(); } } class Bar { public Bar(Foo l) { l.AnEvent += l_AnEvent; } void l_AnEvent() { } } If I instantiate a Foo, and pass this to a new Bar constructor, then let go of the Bar object, it will not be freed by the garbage collector because of the AnEvent registration. I consider this a memory leak, and seems just like my old C++ days. I can, of course, make Bar IDisposable, unregister the event in the Dispose() method, and make sure to call Dispose() on instances of it, but why should I have to do this? I first question why events are implemented with strong references? Why not use weak references? An event is used to abstractly notify an object of changes in another object. It seems to me that if the event handler's instance is no longer in use (i.e., there are no non-event references to the object), then any events that it is registered with should automatically be unregistered. What am I missing? I have looked at WeakEventManager. Wow, what a pain. Not only is it very difficult to use, but its documentation is inadequate (see http://msdn.microsoft.com/en-us/library/system.windows.weakeventmanager.aspx -- noticing the "Notes to Inheritors" section that has 6 vaguely described bullets). I have seen other discussions in various places, but nothing I felt I could use. I propose a simpler solution based on WeakReference, as described here. My question is: Does this not meet the requirements with significantly less complexity? To use the solution, the above code is modified as follows: class Foo { public WeakReferenceEvent AnEvent = new WeakReferenceEvent(); internal void DoEvent() { AnEvent.Invoke(); } } class Bar { public Bar(Foo l) { l.AnEvent += l_AnEvent; } void l_AnEvent() { } } Notice two things: 1. The Foo class is modified in two ways: The event is replaced with an instance of WeakReferenceEvent, shown below; and the invocation of the event is changed. 2. The Bar class is UNCHANGED. No need to subclass WeakEventManager, implement IWeakEventListener, etc. OK, so on to the implementation of WeakReferenceEvent. This is shown here. Note that it uses the generic WeakReference that I borrowed from here: http://damieng.com/blog/2006/08/01/implementingweakreferencet I had to add Equals() and GetHashCode() to his class, which I include below for reference. class WeakReferenceEvent { public static WeakReferenceEvent operator +(WeakReferenceEvent wre, Action handler) { wre._delegates.Add(new WeakReference<Action>(handler)); return wre; } public static WeakReferenceEvent operator -(WeakReferenceEvent wre, Action handler) { foreach (var del in wre._delegates) if (del.Target == handler) { wre._delegates.Remove(del); return wre; } return wre; } HashSet<WeakReference<Action>> _delegates = new HashSet<WeakReference<Action>>(); internal void Invoke() { HashSet<WeakReference<Action>> toRemove = null; foreach (var del in _delegates) { if (del.IsAlive) del.Target(); else { if (toRemove == null) toRemove = new HashSet<WeakReference<Action>>(); toRemove.Add(del); } } if (toRemove != null) foreach (var del in toRemove) _delegates.Remove(del); } } public class WeakReference<T> : IDisposable { private GCHandle handle; private bool trackResurrection; public WeakReference(T target) : this(target, false) { } public WeakReference(T target, bool trackResurrection) { this.trackResurrection = trackResurrection; this.Target = target; } ~WeakReference() { Dispose(); } public void Dispose() { handle.Free(); GC.SuppressFinalize(this); } public virtual bool IsAlive { get { return (handle.Target != null); } } public virtual bool TrackResurrection { get { return this.trackResurrection; } } public virtual T Target { get { object o = handle.Target; if ((o == null) || (!(o is T))) return default(T); else return (T)o; } set { handle = GCHandle.Alloc(value, this.trackResurrection ? GCHandleType.WeakTrackResurrection : GCHandleType.Weak); } } public override bool Equals(object obj) { var other = obj as WeakReference<T>; return other != null && Target.Equals(other.Target); } public override int GetHashCode() { return Target.GetHashCode(); } } It's functionality is trivial. I override operator + and - to get the += and -= syntactic sugar matching events. These create WeakReferences to the Action delegate. This allows the garbage collector to free the event target object (Bar in this example) when nobody else is holding on to it. In the Invoke() method, simply run through the weak references and call their Target Action. If any dead (i.e., garbage collected) references are found, remove them from the list. Of course, this only works with delegates of type Action. I tried making this generic, but ran into the missing where T : delegate in C#! As an alternative, simply modify class WeakReferenceEvent to be a WeakReferenceEvent, and replace the Action with Action. Fix the compiler errors and you have a class that can be used like so: class Foo { public WeakReferenceEvent<int> AnEvent = new WeakReferenceEvent<int>(); internal void DoEvent() { AnEvent.Invoke(5); } } Hopefully this will help someone else when they run into the mystery .NET event memory leak!

    Read the article

  • How to hide jQuery Sub-Menus(ddsmoothmenu)?

    - by Tim
    I'm new to jQuery and i must admit that i've understood nothing yet, the syntax appears to me as an unknown language although i thought that i had my experiences with javascript. Nevertheless i managed it to implement this menu in my asp.net masterpage's header. Even got it to work that the content-page is loaded with ajax with help from here. But finally i'm failing with the menu to disappear when the new page was loaded asynchronously. I dont know how to hide this accursed jQuery Menu. Following the part of the js-file where the events are registered for hiding/disappearing. I dont know how to get the part that is responsible for it and even i dont know how to implement that part in my Anchor-onclick function where i dont have a reference to the jQuery Object. buildmenu:function($, setting){ var smoothmenu=ddsmoothmenu var $mainmenu=$("#"+setting.mainmenuid+">ul") //reference main menu UL $mainmenu.parent().get(0).className=setting.classname || "ddsmoothmenu" var $headers=$mainmenu.find("ul").parent() $headers.hover( function(e){ $(this).children('a:eq(0)').addClass('selected') }, function(e){ $(this).children('a:eq(0)').removeClass('selected') } ) $headers.each(function(i){ //loop through each LI header var $curobj=$(this).css({zIndex: 100-i}) //reference current LI header var $subul=$(this).find('ul:eq(0)').css({display:'block'}) $subul.data('timers', {}) this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()} this.istopheader=$curobj.parents("ul").length==1? true : false //is top level header? $subul.css({top:this.istopheader && setting.orientation!='v'? this._dimensions.h+"px" : 0}) $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images '<img src="'+ (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1]) +'" class="' + (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0]) + '" style="border:0;" />' ) if (smoothmenu.shadow.enable){ this._shadowoffset={x:(this.istopheader?$subul.offset().left+smoothmenu.shadow.offsetx : this._dimensions.w), y:(this.istopheader? $subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)} //store this shadow's offsets if (this.istopheader) $parentshadow=$(document.body) else{ var $parentLi=$curobj.parents("li:eq(0)") $parentshadow=$parentLi.get(0).$shadow } this.$shadow=$('<div class="ddshadow'+(this.istopheader? ' toplevelshadow' : '')+'"></div>').prependTo($parentshadow).css({left:this._shadowoffset.x+'px', top:this._shadowoffset.y+'px'}) //insert shadow DIV and set it to parent node for the next shadow div } $curobj.hover( function(e){ var $targetul=$subul //reference UL to reveal var header=$curobj.get(0) //reference header LI as DOM object clearTimeout($targetul.data('timers').hidetimer) $targetul.data('timers').showtimer=setTimeout(function(){ header._offsets={left:$curobj.offset().left, top:$curobj.offset().top} var menuleft=header.istopheader && setting.orientation!='v'? 0 : header._dimensions.w menuleft=(header._offsets.left+menuleft+header._dimensions.subulw>$(window).width())? (header.istopheader && setting.orientation!='v'? -header._dimensions.subulw+header._dimensions.w : -header._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent if ($targetul.queue().length<=1){ //if 1 or less queued animations $targetul.css({left:menuleft+"px", width:header._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime) if (smoothmenu.shadow.enable){ var shadowleft=header.istopheader? $targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft var shadowtop=header.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety : header._shadowoffset.y if (!header.istopheader && ddsmoothmenu.detectwebkit){ //in WebKit browsers, restore shadow's opacity to full header.$shadow.css({opacity:1}) } header.$shadow.css({overflow:'', width:header._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:header._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime) } } }, ddsmoothmenu.showhidedelay.showdelay) }, function(e){ var $targetul=$subul var header=$curobj.get(0) clearTimeout($targetul.data('timers').showtimer) $targetul.data('timers').hidetimer=setTimeout(function(){ $targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime) if (smoothmenu.shadow.enable){ if (ddsmoothmenu.detectwebkit){ //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them header.$shadow.children('div:eq(0)').css({opacity:0}) } header.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime) } }, ddsmoothmenu.showhidedelay.hidedelay) } ) //end hover }) //end $headers.each() $mainmenu.find("ul").css({display:'none', visibility:'visible'}) } one link of my menu what i want to hide when the content is redirected to another page(i need "closeMenu-function"): <li><a href="DeliveryControl.aspx" onclick="AjaxContent.getContent(this.href);closeMenu();return false;">Delivery Control</a></li> In short: I want to fade out the submenus the same way they do automatically onblur, so that only the headermenu stays visible but i dont know how. Thanks, Tim EDIT: thanks to Starx' private-lesson in jQuery for beginners i solved it: I forgot the # in $("#smoothmenu1"). After that it was not difficult to find and call the hover-function from the menu's headers to let them fade out smoothly: $("#smoothmenu1").find("ul").hover(); Regards, Tim

    Read the article

  • Watching a variable for changes without polling.

    - by milkfilk
    I'm using a framework called Processing which is basically a Java applet. It has the ability to do key events because Applet can. You can also roll your own callbacks of sorts into the parent. I'm not doing that right now and maybe that's the solution. For now, I'm looking for a more POJO solution. So I wrote some examples to illustrate my question. Please ignore using key events on the command line (console). Certainly this would be a very clean solution but it's not possible on the command line and my actual app isn't a command line app. In fact, a key event would be a good solution for me but I'm trying to understand events and polling beyond just keyboard specific problems. Both these examples flip a boolean. When the boolean flips, I want to fire something once. I could wrap the boolean in an Object so if the Object changes, I could fire an event too. I just don't want to poll with an if() statement unnecessarily. import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; /* * Example of checking a variable for changes. * Uses dumb if() and polls continuously. */ public class NotAvoidingPolling { public static void main(String[] args) { boolean typedA = false; String input = ""; System.out.println("Type 'a' please."); while (true) { InputStreamReader isr = new InputStreamReader(System.in); BufferedReader br = new BufferedReader(isr); try { input = br.readLine(); } catch (IOException ioException) { System.out.println("IO Error."); System.exit(1); } // contrived state change logic if (input.equals("a")) { typedA = true; } else { typedA = false; } // problem: this is polling. if (typedA) System.out.println("Typed 'a'."); } } } Running this outputs: Type 'a' please. a Typed 'a'. On some forums people suggested using an Observer. And although this decouples the event handler from class being observed, I still have an if() on a forever loop. import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.Observable; import java.util.Observer; /* * Example of checking a variable for changes. * This uses an observer to decouple the handler feedback * out of the main() but still is polling. */ public class ObserverStillPolling { boolean typedA = false; public static void main(String[] args) { // this ObserverStillPolling o = new ObserverStillPolling(); final MyEvent myEvent = new MyEvent(o); final MyHandler myHandler = new MyHandler(); myEvent.addObserver(myHandler); // subscribe // watch for event forever Thread thread = new Thread(myEvent); thread.start(); System.out.println("Type 'a' please."); String input = ""; while (true) { InputStreamReader isr = new InputStreamReader(System.in); BufferedReader br = new BufferedReader(isr); try { input = br.readLine(); } catch (IOException ioException) { System.out.println("IO Error."); System.exit(1); } // contrived state change logic // but it's decoupled now because there's no handler here. if (input.equals("a")) { o.typedA = true; } } } } class MyEvent extends Observable implements Runnable { // boolean typedA; ObserverStillPolling o; public MyEvent(ObserverStillPolling o) { this.o = o; } public void run() { // watch the main forever while (true) { // event fire if (this.o.typedA) { setChanged(); // in reality, you'd pass something more useful notifyObservers("You just typed 'a'."); // reset this.o.typedA = false; } } } } class MyHandler implements Observer { public void update(Observable obj, Object arg) { // handle event if (arg instanceof String) { System.out.println("We received:" + (String) arg); } } } Running this outputs: Type 'a' please. a We received:You just typed 'a'. I'd be ok if the if() was a NOOP on the CPU. But it's really comparing every pass. I see real CPU load. This is as bad as polling. I can maybe throttle it back with a sleep or compare the elapsed time since last update but this is not event driven. It's just less polling. So how can I do this smarter? How can I watch a POJO for changes without polling? In C# there seems to be something interesting called properties. I'm not a C# guy so maybe this isn't as magical as I think. private void SendPropertyChanging(string property) { if (this.PropertyChanging != null) { this.PropertyChanging(this, new PropertyChangingEventArgs(property)); } }

    Read the article

  • Is there a better way to avoid an infinite loop using winforms?

    - by Hamish Grubijan
    I am using .Net 3.5 for now. Right now I am using a using trick to disable and enable events around certain sections of code. The user can change either days, hours, minutes or total minutes, and that should not cause an infinite cascade of events (e.g. minutes changing total, total changing minutes, etc.) While the code does what I want, there might be a better / more straight-forward way. Do you know of any? For brawny points: This control will be used by multiple teams - I do not want to make it embarrassing. I suspect that I do not need to reinvent the wheel when defining hours in a day, days in week, etc. Some other standard .Net library out there must have it. Any other remarks regarding code? This using (EventHacker.DisableEvents(this)) business - that must be a common pattern in .Net ... changing the setting temporarily. What is the name of it? I'd like to be able to refer to it in a comment and also read up more on current implementations. In the general case not only a handle to the thing being changed needs to be remembered, but also the previous state (in this case previous state does not matter - events are turned on and off unconditionally). Then there is also a possibility of multi-threaded hacking. One could also utilize generics to make the code arguably cleaner. Figuring all this out can lead to a multi-page blog post. I'd be happy to hear some of the answers. P.S. Does it seem like I suffer from obsessive compulsive disorder? Some people like to get things finished and move on; I like to keep them open ... there is always a better way. // Corresponding Designer class is omitted. using System; using System.Windows.Forms; namespace XYZ // Real name masked { interface IEventHackable { void EnableEvents(); void DisableEvents(); } public partial class PollingIntervalGroupBox : GroupBox, IEventHackable { private const int DAYS_IN_WEEK = 7; private const int MINUTES_IN_HOUR = 60; private const int HOURS_IN_DAY = 24; private const int MINUTES_IN_DAY = MINUTES_IN_HOUR * HOURS_IN_DAY; private const int MAX_TOTAL_DAYS = 100; private static readonly decimal MIN_TOTAL_NUM_MINUTES = 1; // Anything faster than once per minute can bog down our servers. private static readonly decimal MAX_TOTAL_NUM_MINUTES = (MAX_TOTAL_DAYS * MINUTES_IN_DAY) - 1; // 99 days should be plenty. // The value above was chosen so to not cause an overflow exception. // Watch out for it - numericUpDownControls each have a MaximumValue setting. public PollingIntervalGroupBox() { InitializeComponent(); InitializeComponentCustom(); } private void InitializeComponentCustom() { this.m_upDownDays.Maximum = MAX_TOTAL_DAYS - 1; this.m_upDownHours.Maximum = HOURS_IN_DAY - 1; this.m_upDownMinutes.Maximum = MINUTES_IN_HOUR - 1; this.m_upDownTotalMinutes.Maximum = MAX_TOTAL_NUM_MINUTES; this.m_upDownTotalMinutes.Minimum = MIN_TOTAL_NUM_MINUTES; } private void m_upDownTotalMinutes_ValueChanged(object sender, EventArgs e) { setTotalMinutes(this.m_upDownTotalMinutes.Value); } private void m_upDownDays_ValueChanged(object sender, EventArgs e) { updateTotalMinutes(); } private void m_upDownHours_ValueChanged(object sender, EventArgs e) { updateTotalMinutes(); } private void m_upDownMinutes_ValueChanged(object sender, EventArgs e) { updateTotalMinutes(); } private void updateTotalMinutes() { this.setTotalMinutes( MINUTES_IN_DAY * m_upDownDays.Value + MINUTES_IN_HOUR * m_upDownHours.Value + m_upDownMinutes.Value); } public decimal TotalMinutes { get { return m_upDownTotalMinutes.Value; } set { m_upDownTotalMinutes.Value = value; } } public decimal TotalHours { set { setTotalMinutes(value * MINUTES_IN_HOUR); } } public decimal TotalDays { set { setTotalMinutes(value * MINUTES_IN_DAY); } } public decimal TotalWeeks { set { setTotalMinutes(value * DAYS_IN_WEEK * MINUTES_IN_DAY); } } private void setTotalMinutes(decimal nTotalMinutes) { if (nTotalMinutes < MIN_TOTAL_NUM_MINUTES) { setTotalMinutes(MIN_TOTAL_NUM_MINUTES); return; // Must be carefull with recursion. } if (nTotalMinutes > MAX_TOTAL_NUM_MINUTES) { setTotalMinutes(MAX_TOTAL_NUM_MINUTES); return; // Must be carefull with recursion. } using (EventHacker.DisableEvents(this)) { // First set the total minutes this.m_upDownTotalMinutes.Value = nTotalMinutes; // Then set the rest this.m_upDownDays.Value = (int)(nTotalMinutes / MINUTES_IN_DAY); nTotalMinutes = nTotalMinutes % MINUTES_IN_DAY; // variable reuse. this.m_upDownHours.Value = (int)(nTotalMinutes / MINUTES_IN_HOUR); nTotalMinutes = nTotalMinutes % MINUTES_IN_HOUR; this.m_upDownMinutes.Value = nTotalMinutes; } } // Event magic public void EnableEvents() { this.m_upDownTotalMinutes.ValueChanged += this.m_upDownTotalMinutes_ValueChanged; this.m_upDownDays.ValueChanged += this.m_upDownDays_ValueChanged; this.m_upDownHours.ValueChanged += this.m_upDownHours_ValueChanged; this.m_upDownMinutes.ValueChanged += this.m_upDownMinutes_ValueChanged; } public void DisableEvents() { this.m_upDownTotalMinutes.ValueChanged -= this.m_upDownTotalMinutes_ValueChanged; this.m_upDownDays.ValueChanged -= this.m_upDownDays_ValueChanged; this.m_upDownHours.ValueChanged -= this.m_upDownHours_ValueChanged; this.m_upDownMinutes.ValueChanged -= this.m_upDownMinutes_ValueChanged; } // We give as little info as possible to the 'hacker'. private sealed class EventHacker : IDisposable { IEventHackable _hackableHandle; public static IDisposable DisableEvents(IEventHackable hackableHandle) { return new EventHacker(hackableHandle); } public EventHacker(IEventHackable hackableHandle) { this._hackableHandle = hackableHandle; this._hackableHandle.DisableEvents(); } public void Dispose() { this._hackableHandle.EnableEvents(); } } } }

    Read the article

  • Rails HABTM accepts_nested_attributes_for mapping table

    - by Rabbott
    Currently I have a habtm relationship between a datastream (stream), and a chart. I want to be able to use the 'typical' jquery "add new stream" method to add a new entry into a mapping table that holds the chart_id, and stream_id.. But I think that most examples out there are made to handle a one to many relationship.. The functionality provided here by Ryan Bates is what I'm looking for, But I dont want to use checkboxes, I want to use a select (drop down) to add new items to the mapping table. I need THIS and THIS combined chart.rb class Chart < ActiveRecord::Base has_and_belongs_to_many :streams, :readonly => false, :join_table => 'charts_streams' accepts_nested_attributes_for :streams, :reject_if => lambda { |a| a.values.all?(&:blank?) }, :allow_destroy => true stream.rb class Stream < ActiveRecord::Base has_and_belongs_to_many :charts, :readonly => false, :join_table => 'charts_streams' application.js /* * Method used to add new child form partials */ $('form a.add_child').click(function() { var assoc = $(this).attr('data-association'); var content = $('#' + assoc + '_fields_template').html(); var regexp = new RegExp('new_' + assoc, 'g'); var new_id = new Date().getTime(); var newElements = jQuery(content.replace(regexp, new_id)).hide(); $(this).parent().before(newElements).prev().slideFadeToggle(); return false; }); /* * Method used to remove child form partials */ $('form a.remove_child').live('click', function() { if(confirm('Are you sure?')) { var hidden_field = $(this).prev('input[type=hidden]')[0]; if(hidden_field) { hidden_field.value = '1'; } $(this).parents('.fields').slideFadeToggle(); } return false; }); _form.html.erb <div id="streams"> <h4>Streams</h4> <% form.fields_for :streams do |stream_form| %> <%= render :partial => "stream", :locals => {:f => stream_form} %> <% end %> </div> <p><%= add_child_link 'Add a stream', :streams %></p> <%= new_child_fields_template(form, :streams) %> _stream.html.erb <div class="fields"> <p> <%= f.label :stream_id %><br /> <%= select_tag "chart[stream_ids][]", options_for_select(@streams.map {|s| [s.label, s.id]}, f.object.id) %> </p> <p><%= remove_child_link 'Remove stream', f %></p> </div> This may be overkill and what I am looking to do could be much easier.. Basically when I create a chart I want to be able to add as many streams to it as I want, using the javascript for adding a new entry, and removing an old one... Thanks for the help! This is 'working' but gives me a ActiveRecord::ReadOnlyRecord error when it hits the chart.update_attributes method.. am I adding the the :readonly = false in the wrong spot? Or am I just doing it completely wrong?

    Read the article

  • jquery ui autocomplete positioning wrong

    - by mattRo55
    using jquery ui 1.8 trying autocomplete Everything works apart from that the ui-menu isn't positioned under my input element, but rather in the top left corner. Has anyone come across this problem? Here's my html: <div id="search"> <div id="searchFormWrapper"> <form method="post" name="searchForm" id="searchForm" action="/searchresults"> <label for="searchPhrase" id="searchFor"> Search for</label> <input name="searchPhrase" id="searchPhrase" type="text" /> <label for="searchScope" id="searchIn"> in</label> <select name="searchScope" id="searchScope"> <option value="">All Shops</option> ... </select> <input type="image" name="submitSearch" id="submitSearch" src="/images/buttons/search.gif" alt="Search ..." /> </form> <br class="clear" /> </div> </div> and here's my css: #search { width:100%; margin:0; padding:0; text-align:center; height:36px; line-height:36px; background:#666 url(/images/interface/info_bar_bg.gif) repeat-x top left; overflow:hidden; font-size:12px; } #searchFormWrapper { width:520px; height:36px; overflow:hidden; margin:auto; padding:0; } label#searchFor { display:block; float:left; width:80px; padding:0 5px 0 0; margin:0 0 0 0; text-align:right; } label#searchIn { display:block; float:left; width:20px; padding:0 5px 0 0; margin:0 0 0 0; text-align:right; } #searchPhrase { display:block; float:left; width:120px; margin:7px 0 0 0; padding:0; } #searchScope { display:block; float:left; width:120px; margin:7px 0 0 0; padding:0; } #submitSearch { display:block; float:left; margin:7px 0 0 10px; padding:0; } and here's my javascript: $(document).ready(function() { $("#searchPhrase").autocomplete( { source: "/search?json", minLength: 2 }); });

    Read the article

  • To divide the big text into columns.

    - by kalininew
    Problem: There is a big piece of the text: <div class="cont"> <p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, </p> <p> consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et </p> <p> accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, </p> <p> facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p> <p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, </p> <p> consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et </p> <p> accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, </p> <p> facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p> </div> It is necessary: To divide it on two columns. On page it should be divided on two about identical (on height) columns. If it is possible: at change of the sizes of the container of the text, a column should remain identical height. Whether probably to set number "n" - on how many columns to divide the big piece of the text. That is to divide the text into any number of columns. Is available: php, xslt, css, pure javascript (without jQuey). What tool is better for using? As it to make, that the decision was ?ross browser compatible.

    Read the article

  • Problems with multiple setIntervals running simultaneously

    - by Roel V.
    Hello, My first post here. I want to make a horizontal menu with submenu's sliding down on mouseover. I know I could use jQuery but this is to practice my javascript skills. I use the following code: var up = new Array() var down = new Array() var submenustart function titleover(headmenu, inter) { submenu = headmenu.lastChild up[inter] = window.clearInterval(up[inter]) down[inter] = window.setInterval("slidedown(submenu)",1) } function slidedown(submenu) { if(submenu.offsetTop < submenustart) { submenu.style.top = submenu.offsetTop + 1 + "px" } } function titleout(headmenu, inter) { submenu = headmenu.lastChild down[inter] = window.clearInterval(down[inter]) up[inter] = window.setInterval("slideup(submenu)", 1) } function slideup(submenu) { if(submenu.offsetTop > submenustart - submenu.clientHeight + 1) { submenu.style.top = submenu.offsetTop - 1 + "px" } } The variable submenustart gets appointed a value in another function which is not relevant for my question. HTML looks like this: <table class="hoofding" id="hoofding"> <tr> <td onmouseover="titleover(this, 0)" onmouseout="titleout(this, 0)"><a href="#" class="hoofdinglink" id="hoofd1">AAAA</a> <table class="menu"> <tr><td><a href="...">1111</a></td></tr> <tr><td><a href="...">2222</a></td></tr> <tr><td><a href="...">3333</a></td></tr> </table></td> <td onmouseover="titleover(this, 1)" onmouseout="titleout(this, 1)"><a href="#" class="hoofdinglink">BBBB</a> <table class="menu"> <tr><td><a href="...">1111</a></td></tr> <tr><td><a href="...">2222</a></td></tr> <tr><td><a href="...">3333</a></td></tr> <tr><td><a href="...">4444</a></td></tr> <tr><td><a href="...">5555</a></td></tr> </table></td> ... </tr> </table> What happens is the following: If I go over and out (for ex) menu A it works fine. If i go now over menu B the interval applied to A is now applied to B. There are now 2 interval functions applied to B. The one originally for A and a new one triggered by the mouseover on B. If I would go to A all the intervals are now applied to A. I have been searching for hours but and I am completely stuck. Thanks in advance.

    Read the article

  • Placing Varibles into an external Sheet

    - by Leslie Peer
    Trying to Build an Online D&d program which stores the character info into Tables my problem is the game works just fine while your playing but as soon as you exit game all varibles are lost which means you have to restart from scratch the next time you log on... So this is a Two Fold Question What is the Best type of External Sheet to save it on... and two How to access sheet for saving and Loading Below are Varibles <SCRIPT> Name1="Tabor Bloomfield"; Name2="Sam Wrightfield"; Name3="Gavin Hartfild"; Name4="Gail Quickfoot"; Name5="Robert Gragorian"; Name6="Peter Shain"; Class1="MagicUser"; Class2="Fighter"; Class3="Fighter"; Class4="Thief"; Class5="Cleric"; Class6="Fighter"; Level1=23; Level2=1; Level3=1; Level4=2; Level5=2; Level6=1; Hpts1=145; Hpts2=14; Hpts3=13; Hpts4=8; Hpts5=12; Hpts6=15; Armor1="Robe of Protection +5"; Armor2="Splinted Armor"; Armor3="Chain Armor"; Armor4="Leather Armor"; Armor5="Chain Armor"; Armor6="Splinted Armor"; Ac1a=5; Ac2a=3; Ac3a=3; Ac4a=4; Ac5a=2; Ac6a=3; Armor1b="Ring of Protection +5"; Armor2b="Small Shield"; Armor3b="Small Shield"; Armor4b="Wooden Shield"; Armor5b="Large Shield"; Armor6b="Small Shield"; Ac1b=5; Ac2b=1; Ac3b=1; Ac4b=1; Ac5b=1; Ac6b=1; Str1=21; Str2=16; Str3=14; Str4=13; Str5=14; Str6=13; Int1=19; Int2=11; Int3=12; Int4=13; Int5=14; Int6=13; Wis1=18; Wis2=12; Wis3=14; Wis4=13; Wis5=14; Wis6=12; Dex1=19; Dex2=14; Dex3=13; Dex4=15; Dex5=14; Dex6=12; Con1=19; Con2=15; Con3=16; Con4=13; Con5=12; Con6=10; Chr1=21; Chr2=14; Chr3=13; Chr4=12; Chr5=14; Chr6=13; </SCRIPT> File name ="gamestats" Path="trellian Webpage/droves E and F/gamestats have tryed html Page,Javascript,Creating a serperate table page and putting the varibles into cells...But at a lost on how to arrive at a solution

    Read the article

  • Problems with multiple setIntervals running simultaniously

    - by Roel V.
    Hello, My first post here. I want to make a horizontal menu with submenu's sliding down on mouseover. I know I could use jQuery but this is to practice my javascript skills. I use the following code: var up = new Array() var down = new Array() var submenustart function titleover(headmenu, inter) { submenu = headmenu.lastChild up[inter] = window.clearInterval(up[inter]) down[inter] = window.setInterval("slidedown(submenu)",1) } function slidedown(submenu) { if(submenu.offsetTop < submenustart) { submenu.style.top = submenu.offsetTop + 1 + "px" } } function titleout(headmenu, inter) { submenu = headmenu.lastChild down[inter] = window.clearInterval(down[inter]) up[inter] = window.setInterval("slideup(submenu)", 1) } function slideup(submenu) { if(submenu.offsetTop > submenustart - submenu.clientHeight + 1) { submenu.style.top = submenu.offsetTop - 1 + "px" } } The variable submenustart gets appointed a value in another function which is not relevant for my question. HTML looks like this: <table class="hoofding" id="hoofding"> <tr> <td onmouseover="titleover(this, 0)" onmouseout="titleout(this, 0)"><a href="#" class="hoofdinglink" id="hoofd1">AAAA</a> <table class="menu"> <tr><td><a href="...">1111</a></td></tr> <tr><td><a href="...">2222</a></td></tr> <tr><td><a href="...">3333</a></td></tr> </table></td> <td onmouseover="titleover(this, 1)" onmouseout="titleout(this, 1)"><a href="#" class="hoofdinglink">BBBB</a> <table class="menu"> <tr><td><a href="...">1111</a></td></tr> <tr><td><a href="...">2222</a></td></tr> <tr><td><a href="...">3333</a></td></tr> <tr><td><a href="...">4444</a></td></tr> <tr><td><a href="...">5555</a></td></tr> </table></td> ... </tr> </table> What happens is the following: If I go over and out (for ex) menu A it works fine. If i go now over menu B the interval applied to A is now applied to B. There are now 2 interval functions applied to B. The one originally for A and a new one triggered by the mouseover on B. If I would go to A all the intervals are now applied to A. I have been searching for hours but and I am completely stuck. Thanks in advance.

    Read the article

  • Chaining CSS classes in IE6 - Trying to find a jQuery solution?

    - by Mike Baxter
    Right, perhaps I ask the impossible? I consider myself fairly new to Javscript and jQuery, but that being said, I have written some fairly complex code recently so I am definitely getting there... however I am now possed with a rather interesting issue at my current freelance contract. The previous web coder has taken a Grid-960 approach to the HTML and as a result has used chained classes to style many of the elements. The example below is typical of what can be found in the code: <div class='blocks four-col-1 orange highlight'>Some content</div> And in the css there will be different declarations for: (not actual css... but close enough) .blocks {margin-right:10px;} .orange {background-image:url(someimage.jpg);} .highlight {font-weight:bold;} .four-col-1 {width:300px;} and to make matters worse... this is in the CSS: .blocks.orange.highlight {background-colour:#dd00ff;} Anyone not familiar with this particular bug can read more on it here: http://www.ryanbrill.com/archives/multiple-classes-in-ie/ it is very real and very annoying. Without wanting to go into the merrits of not chaining classes (I told them this, but it is no longer feasible to change their approach... 100 hand coded pages into a 150 page website, no CMS... sigh) and without the luxury of being able to change the way these blocks are styled... can anyone advise me on the complexity and benefits between any of my below proposed approaches or possible other options that would adequately solve this problem. Potential Solution 1 Using conditional comments I am considering loading a jquery script only for IE6 that: Reads the class of all divs in a certain section of the page and pushes to an array creates empty boxes off screen with only one of the classes applied at a time Reads the applied CSS values for each box Re-applies these styles to the individual box, somehow bearing in mind the order in which they are called and overwriting conflicting instructions as required Potential Solution 2 read the class of all divs in a certain section of the page and push to an array Scan the document for links to style sheets Ajax grab the stylesheets and traverse looking for matching names to those in class array Apply styles as needed Potential Solution 3 Create an IE6 only stylesheet containing the exact style to be applied as a unique name (ie: class='blocks orange highlight' becomes class='blocks-orange-highlight') Traverse the document in IE6 and convert all spaces in class declarations to hyphens and reapply classes based on new style name Summary: Solution 1 allows the people at this company to apply any styles in the future and the script will adjust as needed. However it does not allow for the chained style to be added, only the individual style... it is also processor intensive and time consuming, but also the most likely to be converted into a plugin that could be used the world over Solution 2 is a potential nightmare to code. But again will allow for an endless number of updates without breaking Solution 3 will require someone at the companty to hardcode the new styles every time they make a change, and if they don't, IE6 will break. Ironically the site, whilst needing to conform to IE6 in a limited manner, does not need to run wihtout javascript (they've made the call... have JS or go away), so consider all jQuery and JS solutions to be 'game on'. Did I mention how much i hate IE6? Anyway... any thoughts or comments would be appreciated. I will continue to develop my own solution and if I discover one that can be turned into a jQuery plugin I will post it here in the comments. Regards, Mike.

    Read the article

  • Both tab & hover triggered popups problem

    - by carpenter
    I am trying to display divs when hovering over thumb-nails and/or both when tabbing onto them. If I stick to my mouse, the popups seem to work OK - if I start with a tab press I can show the popops also (foward only - no shift + tab yet). Any help getting them to play well together? <script type="text/javascript"> // Note: the below is being run from an onmouseover on a asp:HyperLink at the moment function onhovering_and_tabbingon2() { var active_hover = 0; var num_of_thumb; // set the default focus onto the first thumb-nail and make its popup display document.getElementById('link_no' + active_hover).focus(); // set focus on the first thumb $('#pop' + active_hover).toggleClass('popup'); // show its popup as it is hidden // for when hovering over the thumbs $(".box img").hover( // so as to effect only images/thumb-nails within divs of class=box when hovering over them function () { // test for if the image is a thumb-entry and not a popup image - of class=thumbs2 thumb = $(this).attr('class'); if (thumb != "thumbs2") { // I need to add/toggle the class here to a "div" and not to the image being hovered on, a div with text that corrosponds to the hovered on image though // so grab the number of the thumb_entry - to use to id the div. num_of_thumb = $(this).attr('id').replace('thumb_entry_No', ''); // find the div with id 'pop' + num_of_thumb, and toggleClass on it $('#pop' + num_of_thumb).toggleClass('popup'); // shows the hovered on pic's popup // move the focus to the hovered on pic's a tag ?????? document.getElementById('link_no' + num_of_thumb).focus(); // if the previous popup that was showing was in box2.. if (active_hover == 1 || active_hover% 2 == 1) { $('#pop' + active_hover).toggleClass('popup4_line2'); } else { // remove/toggle the previous active popup's visibility $('#pop' + active_hover).toggleClass('popup'); } // set the new active_hover to num_of_thumb active_hover = num_of_thumb; } }, function () { } ); // same thing again - but for my second row/line of entries/thumb-nails... $(".box2 img").hover( // so as to effect only images/thumbs within divs of class=box2 function () { // test if the image is a thumb-entry and not a popup image thumb = $(this).attr('class'); if (thumb != "thumbs2") { // I need to add the class here to a "div" and not to the image being hovered on, a div that corrosponds to the hovered on image though // so grab the number of the thumb_entry being hovered on, so as to id the div. num_of_thumb = $(this).attr('id').replace('thumb_entry_No', ''); // find the div with id='pop' + num_of_thumb, and toggleClass on it $('#pop' + num_of_thumb).toggleClass('popup4_line2'); // move the focus to the hovered on pic's a tag ?? document.getElementById('link_no' + num_of_thumb).focus(); // if the previous popup that was showing was in box.. // or if the active_hover is even (modulus) if (active_hover == 0 || active_hover % 2 == 0) { $('#pop' + active_hover).toggleClass('popup'); } else { // remove the previous active visible popup $('#pop' + active_hover).toggleClass('popup4_line2'); } // set the new active_hover to num_of_thumb active_hover = num_of_thumb; } }, function () { } ); // todo: I would like to try to show the popups when tabbing through the thumb-nails also // but am lost... document.onkeyup = keypress; // ???? function keypress() { // alert("The key pressed was: " + window.event.keyCode); if (window.event.keyCode == "9") { //alert("The tab key was pressed!"); active_hover = active_hover + 1; // for tabbing into box 2 (odd numbers) if (active_hover == 1 || active_hover % 2 == 1) { // toggle visibility of previous popup $('#pop' + (active_hover - 1)).toggleClass('popup'); // toggle visibility of current popup $('#pop' + active_hover).toggleClass('popup4_line2'); // } else { // for tabbing into box from box2 // toggle visibility of previous popup $('#pop' + (active_hover - 1)).toggleClass('popup4_line2'); // toggle visibility of current popup $('#pop' + active_hover).toggleClass('popup'); // } // ?????? // // if (window.event.keyCode == "shift&9") { } } } } </script>

    Read the article

  • dynamically drawing polylines on googlemaps using php/mysql

    - by arc
    Hi. I am new to the googlemaps API. I have written a small app for my mobile phone that periodically updates its location to an SQL databse. I would like to display this information on a googlemap in my browser. Ideally i'd like to then poll the database periodically and if any new co-ords have arrived, add them to the line. Best way of describing it is this; http://tiny.cc/HEIa0 In a quest to get to there, i've started on the documents on google and been modifying them to try and acheive what I want. It doesn't work - and i don't know enough to know why. I would love some advice as to why, and any pointers towards my ultimate goal would be very much welcomed. Google Maps AJAX + MySQL/PHP Example <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(47.614495, -122.341861), 13); GDownloadUrl("phpsqlajax_genxml.php", function(data) { var xml = GXml.parse(data); var line = []; var markers = xml.documentElement.getElementsByTagName("points"); for (var i = 0; i < points.length; i++) { var point = points.item(i); var lat = point.getAttribute("lat"); var lng = point.getAttribute("lng"); var latlng = new GLatLng(lat, lng); line.push(latlng); if (point.firstChild) { var station = point.firstChild.nodeValue; var marker = createMarker(latlng, station); map.addOverlay(marker); } } var polyline = new GPolyline(line, "#ff0000", 3, 1); map.addOverlay(polyline); }); } //]]> My php file is generating the following XML; <?xml version="1.0" encoding="UTF-8" ?> <points> <point lng="-122.340141" lat="47.608940"/> <point lng="-122.344391" lat="47.613590"/> <point lng="-122.356445" lat="47.624561"/> <point lng="-122.337654" lat="47.606365"/> <point lng="-122.345673" lat="47.612823"/> <point lng="-122.340363" lat="47.605961"/> <point lng="-122.345467" lat="47.613976"/> <point lng="-122.326584" lat="47.617214"/> <point lng="-122.342834" lat="47.610126"/> </points> I have successfully worked through this; http://code.google.com/apis/maps/articles/phpsqlajax.html before attempting to customise the code. Any pointers? Where am I go wrong?

    Read the article

  • add remove field in java script

    - by rajanikant
    Hi every body. i want to add and remove some html input in javascript i have done for add function . it work properly. but unable to remove. my code is following fields = 1; function addInput() { if (fields != 10) { document.getElementById('text').innerHTML += "<tr><td width='15%' align='left' valign='top' class='subheading'><input type='text' name='date[]' id='date[]' /></td><td width='15%' align='left' valign='top' class='subheading'><input type='text' name='time[]' id='time[]' /></td><td width='20%' align='left' valign='top' class='subheading'><input type='text' name='module[]' id='module[]' /></td><td width='15%' align='left' valign='top' class='subheading'><input type='text' name='organisation[]' id='organisation[]' /></td><td width='20%' align='left' valign='top' class='subheading' nowrap='nowrap'><input type='text' name='category[]' id='category[]' /></td><td width='20%' align='left' valign='top' class='text' nowrap='nowrap'>Add | Remove </td></tr>"; fields += 1; } else { document.getElementById('text').innerHTML += "<br />Only 10 upload fields allowed."; document.form.add.disabled=true; } } fields1=10 function removeInput() { if (fields1 !=1) { document.getElementById('text').innerHTML += ""; fields -= 1; } } and my php function is function addSession() {?> <table cellpadding="5" cellspacing="0" width="100%"> <tr> <td width="10%" align="left" valign="top" colspan="6" bgcolor="#993333" class="heading">Add Session </span></td> </tr><tr class="bgrow"> <td width="10%" align="left" valign="top" class="subheading">Datum </span></td> <td width="20%" align="left" valign="top" class="subheading">Tijd</td> <td width="35%" align="left" valign="top" class="subheading">Module</td> <td width="15%" align="left" valign="top" class="subheading">Organisatie</td> <td width="20%" align="left" valign="top" class="subheading" nowrap="nowrap">Category</td> <td width="20%" align="left" valign="top" class="subheading" nowrap="nowrap">Action</td> </tr> <tr > <td width="15%" align="left" valign="top" class="subheading"><input type="text" name="date_0" id="date_0" /></td> <td width="15%" align="left" valign="top" class="subheading"><input type="text" name="time_0" id="time_0" /></td> <td width="20%" align="left" valign="top" class="subheading"><input type="text" name="module_0" id="module_0" /></td> <td width="15%" align="left" valign="top" class="subheading"><input type="text" name="organisation_o" id="organisation_o" /></td> <td width="20%" align="left" valign="top" class="subheading" nowrap="nowrap"><input type="text" name="cat_0" id="cat_0" /></td> <td width="20%" align="left" valign="top" class="text" nowrap="nowrap"><span onclick="addInput()" class="link">Add</span> | <span onclick="removeInput()" class="link">Remove </span></td> </tr> <tbody id="text"> </tbody> <?php } ?> can any one give me solution?

    Read the article

  • wave.getState() returns null

    - by RMorrisey
    When trying to call wave.getState() in my Google Wave gadget, I get back null (no state object). How can I initialize the Wave state object? I am working in the Wave Sandbox. My ModulePrefs contains the following: <Require feature="wave" /> <Require feature="rpc"/> I got the "rpc" feature from some google groups post when searching for a fix, but it doesn't seem to be any help. The gadget contains a jQuery plugin, which defines the classes I use (not shown), attaches an event handler to the link that shows up in edit mode, and sets up the callback methods with the google wave gadget initializer: $.fn.extend({ $.gork.InitPass.newButtonClick = function newButtonClick() { var jer = new $.gork.InitPass.Player('Jeremias', 12, 2); var delta = {}; delta[jer.name] = jer.serialize(); wave.getState().submitDelta(delta); }; $.gork.InitPass.modeCallback = function modeCallback() { var state = wave.getState(); var mode = wave.getMode(); $.gork.InitPass.getContainer().ipCombatState(state, (mode == wave.Mode.EDIT)); }; $.gork.InitPass.stateCallback = function stateCallback() { $.gork.InitPass.getContainer().ipCombatState( wave.getState(), (wave.getMode() == wave.Mode.EDIT)); alert('state'); }; $.gork.InitPass.init = function init() { if (wave && wave.isInWaveContainer()) { var mode = wave.getMode(); $('.gork-ip-container').ipCombatState(null, (mode == wave.Mode.EDIT)); wave.setModeCallback($.gork.InitPass.modeCallback); wave.setStateCallback($.gork.InitPass.stateCallback); } }; })(jQuery); gadgets.util.registerOnLoadHandler($.gork.InitPass.init); $(function ready() { $.gork.InitPass.getContainer().find('.gork-ip-edit .addSection a.newButton').click( $.gork.InitPass.newButtonClick); }); So there are two main pieces of functionality here: When the mode changes, ipCombatState(...) is called. This changes the visual appearance of the gadget when the user puts the gadget in Edit mode (CTRL+E), by hiding the view DIV and displaying the edit DIV. The newButtonClick callback (which is attached to the link "a.newButton" in the edit container) is supposed to add Jeremias (Nate's Shadowrun character) to the gadget state, so that he'll be appear as a table row in edit mode. I have verified that the initializer method is called, and the view/edit mode switch works just fine (except the state is null). When I click on the new button link (the link at the bottom in edit mode), and trigger the newButtonClick handler, I get an error because wave.getState() also returns null. How can I initialize the wave state so that I can work with it? The purpose of my gadget will be to keep track of combat initiative order in a Shadowrun tabletop game (4th Ed). You can test it out in Wave and see what I have so far: http://gorkwobble.herobo.com/wave/init-pass.xml The actual javascript code is externalized to: http://gorkwobble.herobo.com/wave/init-pass.js P.S. If any Shadowrun players read this, and want to hear about it when I get the gadget working, leave a comment and I'll wave you.

    Read the article

  • Plotting points so that they do not overlap if they have the same co-ordinates

    - by betamax
    Hi everyone, I have a function that takes longitude and latitude and converts it to x and y to be plotted. The conversion to X and Y is working fine and that is not what I have the problem with. I want to ensure that two points are not plotted in the same place. In one set of results there are about 30 on top of each other (because they have the same latitude and longitude), this number could be a lot larger. At the moment I am trying to achieve this by moving points to the left, right, top or bottom of the point to make a square. Once a square made up of points has been drawn, then moving to the next row on and drawing another square of points around the previous square. The code is Javascript but it is very generic so I guess it's slightly irrelevant. My code is as follows: var prevLong, prevLat, rand = 1, line = 1, spread = 8, i = 0; function plot_points(long, lat){ // CODE HERE TO CONVERT long and lat into x and y // System to not overlap the points if((prevLat == lat) && (prevLong == long)) { if(rand==1) { x += spread*line; } else if(rand==2) { x -= spread*line; } else if(rand==3) { y += spread*line; } else if(rand==4) { y -= spread*line; } else if(rand==5) { x += spread*line; y += spread*line; } else if(rand==6) { x -= spread*line; y -= spread*line; } else if(rand==7) { x += spread*line; y -= spread*line; } else if(rand==8) { x -= spread*line; y += spread*line; // x = double } else if(rand==9) { x += spread*line; y += spread; } else if(rand==10) { x += spread; y += spread*line; } else if(rand==11) { x -= spread*line; y -= spread; } else if(rand==12) { x -= spread; y -= spread*line; } else if(rand==13) { x += spread*line; y -= spread; } else if(rand==14) { x += spread; y -= spread*line; } else if(rand==15) { x += spread*line; y -= spread; } else if(rand==16) { x += spread; y -= spread*line; } else if(rand==17) { x -= spread*line; y += spread; } else if(rand==18) { x -= spread; y += spread*line; } else if(rand==19) { x -= spread*line; y += spread; } else if(rand==20) { x -= spread; y += spread*line; } if(rand == 20) {rand = 1; line++; } else { rand++; } i++ } else { line = 1; i = 0; } prevLat = latitude; prevLong = longitude; return [x,y]; } This is the output: It isn't working correctly and I don't even know if I am approaching the problem in a correct way at all. Has anyone had to do this before? What method would you suggest?

    Read the article

  • Slide div inside another div effect

    - by mariki
    I am trying to create sliding images effect: Online demolink text. The problem is when you click rapidly and randomly on the buttons and not wait for animation to finish causing unpredicted results and even stopping the functionality to work. (and once it stopped in the middle of 2 images...) How Can I make it work without bugs? I know that there are some other tools for that sliding like jquery and other approaches like changing the position attribute and not the scrollLeft attribute. But I want to do it as it is, with scrollLeft, if it possible of course. The Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> body { padding:0px; margin:0px; } #imageContainer { width: 500px; position: relative; } #div { overflow: hidden; white-space: nowrap; } #div img { cursor: pointer; vertical-align: bottom; width: 500px; padding:0px; margin:0px; display:inline; } </style> <script type="text/javascript"> var scrollIntervalID; var currentIndex=0; function Scroll(ind){ var dir = ind ==currentIndex?0:ind<currentIndex?-1:1; var steps = Math.abs(ind-currentIndex); scrollIntervalID = setInterval(function(){ var i=(steps*10)-1; return function(){ if (i <= 0) clearInterval(scrollIntervalID); var elm = document.getElementById("div"); elm.scrollLeft +=dir * 50; i--; document.getElementById("span").innerHTML=elm.scrollLeft; } }(), 15); currentIndex=ind; } </script> </head> <body> <div id="imageContainer"> <div id="div"> <img id="image1" src="Images/pic1.jpg" width="500px"/><img id="image2" src="Images/pic2.jpg" width="500px"/><img id="image3" src="Images/pic3.jpg" width="500px"/><img id="image4" src="Images/pic4.jpg" width="500px"/> </div> </div> <div> <input type="button" value="1" onclick="Scroll(0);"/> <input type="button" value="2" onclick="Scroll(1);"/> <input type="button" value="3" onclick="Scroll(2);"/> <input type="button" value="4" onclick="Scroll(3);"/> </div> <span id="span"></span> </body> </html>

    Read the article

  • How to get dropdown menu to open/close on click rather than hover?

    - by TankDriver
    Hello! I am very new to java and ajax/jquery and have been working on trying to get a script to open and close the drop menu on click rather that hover. The menu in question is found on http://www.gamefriction.com/Coded/ and is the dark menu on the right side under the header. I would like it to open and close like the other menu that is further below it (it is light gray and is in the "Select Division" module). The gray menu is part of a menu and the language menu is not. I have a jquery import as well which can be found in the view source of the above link. My Java: <script type="text/javascript"> /* Language Selector */ $(function() { $("#lang-selector li").hover(function() { $('ul:first',this).css('display', 'block'); }, function() { $('ul:first',this).css('display', 'none'); }); }); $(document).ready(function(){ /* Navigation */ $('.subnav-game').hide(); $('.subnav-game:eq(0)').show(); $('.preorder-type').hide(); $('.preorder-type:eq(3)').show(); }); </script> My CSS: #lang-selector { font-size: 11px; height: 21px; margin: 7px auto 17px auto; width: 186px; } #lang-selector span { color: #999; float: left; margin: 4px 0 0 87px; padding-right: 4px; text-align: right; } #lang-selector ul { float: left; list-style: none; margin: 0; padding: 0; } #lang-selector ul li a { padding: 3px 10px 1px 10px; } #lang-selector ul, #lang-selector a { width: 186px; } #lang-selector ul ul { display: none; position: absolute; } #lang-selector ul ul li { border-top: 1px solid #666; float: left; position: relative; } #lang-selector a { background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat; color: #666; display: block; font-size: 10px; height: 17px; padding: 4px 10px 0 10px; text-align: left; text-decoration: none; width: 166px; } #lang-selector ul ul li a { background: #333; color: #999; } #lang-selector ul ul li a:hover { background: #c4262c; color: #fff; } My HTML: <div id="lang-selector"> <ul> <li> <a href="#">Choose a Language</a> <ul> <li><a href="?iw_lang=en">English</a></li> <li><a href="?iw_lang=de">Deutsch</a></li> <li><a href="?iw_lang=es">Espa&ntilde;ol</a></li> <li><a href="?iw_lang=fr">Fran&ccedil;ais</a></li> <li><a href="?iw_lang=it">Italiano</a></li> </ul> </li> </ul> </div> Thanks!

    Read the article

  • Google Maps API v3: Turning user input coordinates to latlng?

    - by Leventhan
    I'm new with Google Maps. I'm trying to turn coordinates a user inputs to move a marker I have on my map to those coordinates. For instance, if the user inputs 50.75, 74.1 the marker will pan to that coordinate. Unfortunately, I couldn't get it to work. Here's my function: function moveMarker() { var Markerloc = document.getElementById("Markerloc").value; var newLatlng = new google.maps.LatLng(Markerloc); marker.setPosition(newLatLng) } Here's my HTML code: <input type="text" id= "Markerloc" value="Paste your coordinates" /> <input type="button" onclick="moveMarker()" value="Update Marker"> EDIT: I thought that'd fix it, but somehow, it still doesn't work. Here's my code: <script type="text/javascript"> var map; var zoomLevel; function initialize(){ var myLatlng = new google.maps.LatLng(40.65, -74); var myOptions = { zoom: 2, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, } var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); var zoomLevel = map.getZoom(); var marker = new google.maps.Marker({ position: myLatlng, map: map, draggable: true }); // Update current position info. updateMarkerPosition(myLatlng); // Add dragging event listeners. google.maps.event.addListener(marker, 'dragstart', function() { updateMarkerAddress('Dragging...'); }); google.maps.event.addListener (map, 'zoom_changed', function() { updateZoomLevel(map.getZoom()); }); google.maps.event.addListener(marker, 'drag', function() { updateMarkerStatus('Dragging...'); updateMarkerPosition(marker.getPosition()); }); google.maps.event.addListener(marker, 'dragend', function() { updateMarkerStatus('Drag ended'); geocodePosition(marker.getPosition()); }); }; var geocoder = new google.maps.Geocoder(); function geocodePosition(pos) { geocoder.geocode({ latLng: pos }, function(responses) { if (responses && responses.length > 0) { updateMarkerAddress(responses[0].formatted_address); } else { updateMarkerAddress('Cannot determine address at this location.'); } }); } function updateZoomLevel(zoomLevel){ document.getElementById('zoomLevel').innerHTML = zoomLevel; } function updateMarkerStatus(str) { document.getElementById('markerStatus').innerHTML = str; } function updateMarkerPosition(myLatlng) { document.getElementById('info').innerHTML = [ myLatlng.lat(), myLatlng.lng() ].join(', '); } function updateMarkerAddress(str) { document.getElementById('address').innerHTML = str; } function moveMarker() { var lat = parseFloat(document.getElementById('markerLat').value); var lng = parseFloat(document.getElementById('markerLng').value); var newLatLng = new google.maps.LatLng(lat, lng); marker.setPosition(newLatLng) } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map_canvas" style="width: 29%; height: 50%; float: left; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div> <b>Zoom level: </b><div id="zoomLevel"> Scroll mousewheel</div> </div> <input type='text' id='markerLat' value='Target Latitude' /> <input type='text' id='markerLng' value='Target Longitude' /> <input type="button" onclick="moveMarker()" value="Move Marker"> </body> </html>

    Read the article

< Previous Page | 472 473 474 475 476 477 478 479 480 481 482 483  | Next Page >