Search Results

Search found 284 results on 12 pages for 'setinterval'.

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Page 3/12 | < Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >

  • Is there a way to check if a var is using setInterval() ?

    - by chadley
    For instance, I am setting an interval like timer = setInterval(fncName, 1000); and if i go and do clearInterval(timer); it does clear the interval but is there a way to check that it cleared the interval? I've tried getting the value of it while it has an interval and when it doesn't but they both just seem to be numbers.

    Read the article

  • Whats faster in Javascript a bunch of small setInterval loops, or one big one?

    - by RobertWHurst
    Just wondering if its worth it to make a monolithic loop function or just add loops were they're needed. The big loop option would just be a loop of callbacks that are added dynamically with an add function. adding a function would look like this setLoop(function(){ alert('hahaha! I\'m a really annoying loop that bugs you every tenth of a second'); }); setLoop would add the function to the monolithic loop. so is the is worth anything in performance or should I just stick to lots of little loops using setInterval?

    Read the article

  • Why does jQuery fadeOut not work inside this setInterval loop?

    - by Clay McClure
    I'm trying to load random items into a div every few seconds, with a nice fadeOut/fadeIn transition between each load. Here's the code: <html> <body> <div id="item"></div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> // Load a random item var item = $('#item'); function load_item() { item.fadeOut(5000, function() { item.load('http://dynamic.xkcd.com/comic/random/ #middleContent img', null, function() { item.fadeIn(5000); }); }); }; // Load initial featured item load_item(); // Schedule repeated loading setInterval(load_item, 15000); </script> </body> </html> This works fine the first time through, but on subsequent calls to load_item, the fadeOut() seems to stop working. It doesn't actually fade the #item div out, but jumps immediately into the callback function, ignoring the 5000 delay. What am I doing wrong?

    Read the article

  • Unreachable, existing variable

    - by Oden
    I'm new at as3, maybe thats the reason why i don't understand, why the setInterval causes an error. <mx:Script> <![CDATA[ import flash.utils.setInterval; import mx.controls.Alert; [Bindable] public var MyInt:int = 500; setInterval(function():void{ ++MyInt; },1000); ]]> </mx:Script> I have a label where the value of MyInt gets visible, the bind works perfect, i've tested it several ways, and i i create a button it grows the number, but if i use the setInterval function i get an error: Access of undefined property myInt. Why? What does cause this? Please explain it, so I can avoid errors like this. Thanks

    Read the article

  • 1120: Why can't it access the variable?

    - by Oden
    I'm new at as3, maybe thats the reason why i don't understand, why the setInterval causes an error. <mx:Script> <![CDATA[ import flash.utils.setInterval; import mx.controls.Alert; [Bindable] public var MyInt:int = 500; setInterval(function():void{ ++MyInt; },1000); ]]> </mx:Script> I have a label where the value of MyInt gets visible, the bind works perfect, i've tested it several ways, and i i create a button it grows the number, but if i use the setInterval function i get an error: Access of undefined property myInt. Why? What does cause this? Please explain it, so I can avoid errors like this. Thanks

    Read the article

  • A jQuery Plug-in to monitor Html Element CSS Changes

    - by Rick Strahl
    Here's a scenario I've run into on a few occasions: I need to be able to monitor certain CSS properties on an HTML element and know when that CSS element changes. The need for this arose out of wanting to build generic components that could 'attach' themselves to other objects and monitor changes on the ‘parent’ object so the dependent object can adjust itself accordingly. What I wanted to create is a jQuery plug-in that allows me to specify a list of CSS properties to monitor and have a function fire in response to any change to any of those CSS properties. The result are the .watch() and .unwatch() jQuery plug-ins. Here’s a simple example page of this plug-in that demonstrates tracking changes to an element being moved with draggable and closable behavior: http://www.west-wind.com/WestWindWebToolkit/samples/Ajax/jQueryPluginSamples/WatcherPlugin.htm Try it with different browsers – IE and FireFox use the DOM event handlers and Chrome, Safari and Opera use setInterval handlers to manage this behavior. It should work in all of them but all but IE and FireFox will show a bit of lag between the changes in the main element and the shadow. The relevant HTML for this example is this fragment of a main <div> (#notebox) and an element that is to mimic a shadow (#shadow). <div class="containercontent"> <div id="notebox" style="width: 200px; height: 150px;position: absolute; z-index: 20; padding: 20px; background-color: lightsteelblue;"> Go ahead drag me around and close me! </div> <div id="shadow" style="background-color: Gray; z-index: 19;position:absolute;display: none;"> </div> </div> The watcher plug in is then applied to the main <div> and shadow in sync with the following plug-in code: <script type="text/javascript"> $(document).ready(function () { var counter = 0; $("#notebox").watch("top,left,height,width,display,opacity", function (data, i) { var el = $(this); var sh = $("#shadow"); var propChanged = data.props[i]; var valChanged = data.vals[i]; counter++; showStatus("Prop: " + propChanged + " value: " + valChanged + " " + counter); var pos = el.position(); var w = el.outerWidth(); var h = el.outerHeight(); sh.css({ width: w, height: h, left: pos.left + 5, top: pos.top + 5, display: el.css("display"), opacity: el.css("opacity") }); }) .draggable() .closable() .css("left", 10); }); </script> When you run this page as you drag the #notebox element the #shadow element will maintain and stay pinned underneath the #notebox element effectively keeping the shadow attached to the main element. Likewise, if you hide or fadeOut() the #notebox element the shadow will also go away – show the #notebox element and the shadow also re-appears because we are assigning the display property from the parent on the shadow. Note we’re attaching the .watch() plug-in to the #notebox element and have it fire whenever top,left,height,width,opacity or display CSS properties are changed. The passed data element contains a props[] and vals[] array that holds the properties monitored and their current values. An index passed as the second parm tells you which property has changed and what its current value is (propChanged/valChanged in the code above). The rest of the watcher handler code then deals with figuring out the main element’s position and recalculating and setting the shadow’s position using the jQuery .css() function. Note that this is just an example to demonstrate the watch() behavior here – this is not the best way to create a shadow. If you’re interested in a more efficient and cleaner way to handle shadows with a plug-in check out the .shadow() plug-in in ww.jquery.js (code search for fn.shadow) which uses native CSS features when available but falls back to a tracked shadow element on browsers that don’t support it, which is how this watch() plug-in came about in the first place :-) How does it work? The plug-in works by letting the user specify a list of properties to monitor as a comma delimited string and a handler function: el.watch("top,left,height,width,display,opacity", function (data, i) {}, 100, id) You can also specify an interval (if no DOM event monitoring isn’t available in the browser) and an ID that identifies the event handler uniquely. The watch plug-in works by hooking up to DOMAttrModified in FireFox, to onPropertyChanged in Internet Explorer, or by using a timer with setInterval to handle the detection of changes for other browsers. Unfortunately WebKit doesn’t support DOMAttrModified consistently at the moment so Safari and Chrome currently have to use the slower setInterval mechanism. In response to a changed property (or a setInterval timer hit) a JavaScript handler is fired which then runs through all the properties monitored and determines if and which one has changed. The DOM events fire on all property/style changes so the intermediate plug-in handler filters only those hits we’re interested in. If one of our monitored properties has changed the specified event handler function is called along with a data object and an index that identifies the property that’s changed in the data.props/data.vals arrays. The jQuery plugin to implement this functionality looks like this: (function($){ $.fn.watch = function (props, func, interval, id) { /// <summary> /// Allows you to monitor changes in a specific /// CSS property of an element by polling the value. /// when the value changes a function is called. /// The function called is called in the context /// of the selected element (ie. this) /// </summary> /// <param name="prop" type="String">CSS Properties to watch sep. by commas</param> /// <param name="func" type="Function"> /// Function called when the value has changed. /// </param> /// <param name="interval" type="Number"> /// Optional interval for browsers that don't support DOMAttrModified or propertychange events. /// Determines the interval used for setInterval calls. /// </param> /// <param name="id" type="String">A unique ID that identifies this watch instance on this element</param> /// <returns type="jQuery" /> if (!interval) interval = 100; if (!id) id = "_watcher"; return this.each(function () { var _t = this; var el$ = $(this); var fnc = function () { __watcher.call(_t, id) }; var data = { id: id, props: props.split(","), vals: [props.split(",").length], func: func, fnc: fnc, origProps: props, interval: interval, intervalId: null }; // store initial props and values $.each(data.props, function (i) { data.vals[i] = el$.css(data.props[i]); }); el$.data(id, data); hookChange(el$, id, data); }); function hookChange(el$, id, data) { el$.each(function () { var el = $(this); if (typeof (el.get(0).onpropertychange) == "object") el.bind("propertychange." + id, data.fnc); else if ($.browser.mozilla) el.bind("DOMAttrModified." + id, data.fnc); else data.intervalId = setInterval(data.fnc, interval); }); } function __watcher(id) { var el$ = $(this); var w = el$.data(id); if (!w) return; var _t = this; if (!w.func) return; // must unbind or else unwanted recursion may occur el$.unwatch(id); var changed = false; var i = 0; for (i; i < w.props.length; i++) { var newVal = el$.css(w.props[i]); if (w.vals[i] != newVal) { w.vals[i] = newVal; changed = true; break; } } if (changed) w.func.call(_t, w, i); // rebind event hookChange(el$, id, w); } } $.fn.unwatch = function (id) { this.each(function () { var el = $(this); var data = el.data(id); try { if (typeof (this.onpropertychange) == "object") el.unbind("propertychange." + id, data.fnc); else if ($.browser.mozilla) el.unbind("DOMAttrModified." + id, data.fnc); else clearInterval(data.intervalId); } // ignore if element was already unbound catch (e) { } }); return this; } })(jQuery); Note that there’s a corresponding .unwatch() plug-in that can be used to stop monitoring properties. The ID parameter is optional both on watch() and unwatch() – a standard name is used if you don’t specify one, but it’s a good idea to use unique names for each element watched to avoid overlap in event ids especially if you’re monitoring many elements. The syntax is: $.fn.watch = function(props, func, interval, id) props A comma delimited list of CSS style properties that are to be watched for changes. If any of the specified properties changes the function specified in the second parameter is fired. func The function fired in response to a changed styles. Receives this as the element changed and an object parameter that represents the watched properties and their respective values. The first parameter is passed in this structure: { id: watcherId, props: [], vals: [], func: thisFunc, fnc: internalHandler, origProps: strPropertyListOnWatcher }; A second parameter is the index of the changed property so data.props[i] or data.vals[i] gets the property and changed value. interval The interval for setInterval() for those browsers that don't support property watching in the DOM. In milliseconds. id An optional id that identifies this watcher. Required only if multiple watchers might be hooked up to the same element. The default is _watcher if not specified. It’s been a Journey I started building this plug-in about two years ago and had to make many modifications to it in response to changes in jQuery and also in browser behaviors. I think the latest round of changes made should make this plug-in fairly future proof going forward (although I hope there will be better cross-browser change event notifications in the future). One of the big problems I ran into had to do with recursive change notifications – it looks like starting with jQuery 1.44 and later, jQuery internally modifies element properties on some calls to some .css()  property retrievals and things like outerHeight/Width(). In IE this would cause nasty lock up issues at times. In response to this I changed the code to unbind the events when the handler function is called and then rebind when it exits. This also makes user code less prone to stack overflow recursion as you can actually change properties on the base element. It also means though that if you change one of the monitors properties in the handler the watch() handler won’t fire in response – you need to resort to a setTimeout() call instead to force the code to run outside of the handler: $("#notebox") el.watch("top,left,height,width,display,opacity", function (data, i) { var el = $(this); … // this makes el changes work setTimeout(function () { el.css("top", 10) },10); }) Since I’ve built this component I’ve had a lot of good uses for it. The .shadow() fallback functionality is one of them. Resources The watch() plug-in is part of ww.jquery.js and the West Wind West Wind Web Toolkit. You’re free to use this code here or the code from the toolkit. West Wind Web Toolkit Latest version of ww.jquery.js (search for fn.watch) watch plug-in documentation © Rick Strahl, West Wind Technologies, 2005-2011Posted in ASP.NET  JavaScript  jQuery  

    Read the article

  • jQuery CSS Property Monitoring Plug-in updated

    - by Rick Strahl
    A few weeks back I had talked about the need to watch properties of an object and be able to take action when certain values changed. The need for this arose out of wanting to build generic components that could 'attach' themselves to other objects. One example is a drop shadow - if I add a shadow behavior to an object I want the shadow to be pinned to that object so when that object moves I also want the shadow to move with it, or when the panel is hidden the shadow should hide with it - automatically without having to explicitly hook up monitoring code to the panel. For example, in my shadow plug-in I can now do something like this (where el is the element that has the shadow attached and sh is the shadow): if (!exists) // if shadow was created el.watch("left,top,width,height,display", function() { if (el.is(":visible")) $(this).shadow(opt); // redraw else sh.hide(); }, 100, "_shadowMove"); The code now monitors several properties and if any of them change the provided function is called. So when the target object is moved or hidden or resized the watcher function is called and the shadow can be redrawn or hidden in the case of visibility going away. So if you run any of the following code: $("#box") .shadow() .draggable({ handle: ".blockheader" }); // drag around the box - shadow should follow // hide the box - shadow should disappear with box setTimeout(function() { $("#box").hide(); }, 4000); // show the box - shadow should come back too setTimeout(function() { $("#box").show(); }, 8000); This can be very handy functionality when you're dealing with objects or operations that you need to track generically and there are no native events for them. For example, with a generic shadow object that attaches itself to any another element there's no way that I know of to track whether the object has been moved or hidden either via some UI operation (like dragging) or via code. While some UI operations like jQuery.ui.draggable would allow events to fire when the mouse is moved nothing of the sort exists if you modify locations in code. Even tracking the object in drag mode this is hardly generic behavior - a generic shadow implementation can't know when dragging is hooked up. So the watcher provides an alternative that basically gives an Observer like pattern that notifies you when something you're interested in changes. In the watcher hookup code (in the shadow() plugin) above  a check is made if the object is visible and if it is the shadow is redrawn. Otherwise the shadow is hidden. The first parameter is a list of CSS properties to be monitored followed by the function that is called. The function called receives this as the element that's been changed and receives two parameters: The array of watched objects with their current values, plus an index to the object that caused the change function to fire. How does it work When I wrote it about this last time I started out with a simple timer that would poll for changes at a fixed interval with setInterval(). A few folks commented that there are is a DOM API - DOMAttrmodified in Mozilla and propertychange in IE that allow notification whenever any property changes which is much more efficient and smooth than the setInterval approach I used previously. On browser that support these events (FireFox and IE basically - WebKit has the DOMAttrModified event but it doesn't appear to work) the shadow effect is instant - no 'drag behind' of the shadow. Running on a browser that doesn't support still uses setInterval() and the shadow movement is slightly delayed which looks sloppy. There are a few additional changes to this code - it also supports monitoring multiple CSS properties now so a single object can monitor a host of CSS properties rather than one object per property which is easier to work with. For display purposes position, bounds and visibility will be common properties that are to be watched. Here's what the new version looks like: $.fn.watch = function (props, func, interval, id) { /// <summary> /// Allows you to monitor changes in a specific /// CSS property of an element by polling the value. /// when the value changes a function is called. /// The function called is called in the context /// of the selected element (ie. this) /// </summary> /// <param name="prop" type="String">CSS Properties to watch sep. by commas</param> /// <param name="func" type="Function"> /// Function called when the value has changed. /// </param> /// <param name="interval" type="Number"> /// Optional interval for browsers that don't support DOMAttrModified or propertychange events. /// Determines the interval used for setInterval calls. /// </param> /// <param name="id" type="String">A unique ID that identifies this watch instance on this element</param> /// <returns type="jQuery" /> if (!interval) interval = 200; if (!id) id = "_watcher"; return this.each(function () { var _t = this; var el$ = $(this); var fnc = function () { __watcher.call(_t, id) }; var itId = null; var data = { id: id, props: props.split(","), func: func, vals: [props.split(",").length], fnc: fnc, origProps: props, interval: interval }; $.each(data.props, function (i) { data.vals[i] = el$.css(data.props[i]); }); el$.data(id, data); hookChange(el$, id, data.fnc); }); function hookChange(el$, id, fnc) { el$.each(function () { var el = $(this); if (typeof (el.get(0).onpropertychange) == "object") el.bind("propertychange." + id, fnc); else if ($.browser.mozilla) el.bind("DOMAttrModified." + id, fnc); else itId = setInterval(fnc, interval); }); } function __watcher(id) { var el$ = $(this); var w = el$.data(id); if (!w) return; var _t = this; if (!w.func) return; // must unbind or else unwanted recursion may occur el$.unwatch(id); var changed = false; var i = 0; for (i; i < w.props.length; i++) { var newVal = el$.css(w.props[i]); if (w.vals[i] != newVal) { w.vals[i] = newVal; changed = true; break; } } if (changed) w.func.call(_t, w, i); // rebind event hookChange(el$, id, w.fnc); } } $.fn.unwatch = function (id) { this.each(function () { var el = $(this); var fnc = el.data(id).fnc; try { if (typeof (this.onpropertychange) == "object") el.unbind("propertychange." + id, fnc); else if ($.browser.mozilla) el.unbind("DOMAttrModified." + id, fnc); else clearInterval(id); } // ignore if element was already unbound catch (e) { } }); return this; } There are basically two jQuery functions - watch and unwatch. jQuery.fn.watch(props,func,interval,id) Starts watching an element for changes in the properties specified. props The CSS properties that are to be watched for changes. If any of the specified properties changes the function specified in the second parameter is fired. func (watchData,index) The function fired in response to a changed property. Receives this as the element changed and object that represents the watched properties and their respective values. The first parameter is passed in this structure:    { id: itId, props: [], func: func, vals: [] }; A second parameter is the index of the changed property so data.props[i] or data.vals[i] gets the property value that has changed. interval The interval for setInterval() for those browsers that don't support property watching in the DOM. In milliseconds. id An optional id that identifies this watcher. Required only if multiple watchers might be hooked up to the same element. The default is _watcher if not specified. jQuery.fn.unwatch(id) Unhooks watching of the element by disconnecting the event handlers. id Optional watcher id that was specified in the call to watch. This value can be omitted to use the default value of _watcher. You can also grab the latest version of the  code for this plug-in as well as the shadow in the full library at: http://www.west-wind.com:8080/svn/jquery/trunk/jQueryControls/Resources/ww.jquery.js watcher has no other dependencies although it lives in this larger library. The shadow plug-in depends on watcher.© Rick Strahl, West Wind Technologies, 2005-2011

    Read the article

  • How to handle the different frame rate on different devices?

    - by Fenwick
    I am not quite sure how frame per second works on a web page. I have a Canvas game that involves in moving an image from point A to B, and measuring the time elapsed. The code can be as simple as: var timeStamp = Date.now(); function update(){ obj.y += obj.speed; text = "Time: "+ (Date.now() - timeStamp) + "ms"; } The function update() is called every frame. The problem is that the time elapsed is different from device to device. It is pretty short on my PC, but get longer on my iPad, and is much longer on my cell phone. I thought it is because the FPS is smaller on mobile devices, so instead of calling update() every frame, I call it every 1ms by using a setInterval. But this does not solve the problem. In my understanding, the function for setInterval is invoked based on the increment in system time, other than frame rate, so it should fix the problem. Am I missing anything here? If the setInterval function is called based on FPS, is there any way to get around with the FPS difference across devices? On a side note, I have sort of a "water simulator" on the same canvas. It involves in redrawing about 60 objects which can be 600x600 pixels for every frame, so it could be a frame rate killer. I am using Phaser.js but not really using much of its functionalities, if that helps.

    Read the article

  • Intro Bar like stack overflow

    - by Dasa
    I have a simple top bar using jquery like the one on stackoverflow, but i want it to only appear on the first time a person visits the website. below is the HTML followed by the "bxSlider.js" file <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="bxSlider.js"></script> <title>topbar</title> <style type="text/css" media="screen"> #message { font-family:Arial,Helvetica,sans-serif; position:fixed; top:0px; left:0px; width:100%; z-index:105; text-align:center; color:white; padding:2px 0px 2px 0px; background-color:#8E1609; } #example1 { text-align: center; width: 80%; } .close-notify { white-space: nowrap; float:right; margin-right:10px; color:#fff; text-decoration:none; padding-left:3px; padding-right:3px } .close-notify a { color: #fff; } h4, p { margin:0px; padding:0px; } </style> </head> <body> <DIV ID='message' style="display: none;"> <DIV ID="example1"> <DIV CLASS="item"> <h4>Head 1</h4> <p>Text 1</p> </div><!-- end item --> <DIV CLASS="item"> <h4>Head 2</h4> <p>Text 2</p> </div><!-- end item --> </div><!-- end example1 --> <a href="#" CLASS="close-notify" onclick="closeNotice()">X</a> </div> <script type="text/javascript"> $(document).ready(function() { $("#message").fadeIn("slow"); $('#example1').bxSlider({ mode: 'slide', speed: 250, wrapper_CLASS: 'example1_container' }); }); function closeNotice() { $("#message").fadeOut("slow"); } </script> </body> </html> /** * * * bxSlider: Content slider / fade / ticker using the jQuery javascript library. * * Author: Steven Wanderski * Email: [email protected] * URL: http://bxslider.com * * **/ jQuery.fn.bxSlider = function(options){ ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // Declare variables and functions ///////////////////////////////////////////////////////////////////////////////////////////////////////////// var defaults = { mode: 'slide', speed: 500, auto: false, auto_direction: 'left', pause: 2500, controls: true, prev_text: 'prev', next_text: 'next', width: $(this).children().width(), prev_img: '', next_img: '', ticker_direction: 'left', wrapper_class: 'container' }; options = $.extend(defaults, options); if(options.mode == 'ticker'){ options.auto = true; } var $this = $(this); var $parent_width = options.width; var current = 0; var is_working = false; var child_count = $this.children().size(); var i = 0; var j = 0; var k = 0; function animate_next(){ is_working = true; $this.animate({'left':'-' + $parent_width * 2 + 'px'}, options.speed, function(){ $this.css({'left':'-' + $parent_width + 'px'}).children(':first').appendTo($this); is_working = false; }); } function animate_prev(){ is_working = true; $this.animate({'left': 0}, options.speed, function(){ $this.css({'left':'-' + $parent_width + 'px'}).children(':last').insertBefore($this.children(':first')); is_working = false; }); } function fade(direction){ if(direction == 'next'){ var last_before_switch = child_count - 1; var start_over = 0; var incr = k + 1; }else if(direction == 'prev'){ var last_before_switch = 0; var start_over = child_count -1; var incr = k - 1; } is_working = true; if(k == last_before_switch){ $this.children().eq(k).fadeTo(options.speed, 0); $this.children().eq(start_over).fadeTo(options.speed, 1, function(){ is_working = false; k = start_over; }); }else{ $this.children().eq(k).fadeTo(options.speed, 0); $this.children().eq(incr).fadeTo(options.speed, 1, function(){ is_working = false; k = incr; }); } } function add_controls(){ ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // Check if user selected images to use for next / prev ///////////////////////////////////////////////////////////////////////////////////////////////////////////// if(options.prev_img != '' || options.next_img != ''){ $this.parent().append('<a class="slider_prev" href=""><img src="' + options.prev_img + '" alt=""/></a><a class="slider_next" href=""><img src="' + options.next_img + '" alt="" /></a>'); }else{ $this.parent().append('<a class="slider_prev" href="">' + options.prev_text + '</a><a class="slider_next" href="">' + options.next_text + '</a>'); } $this.parent().find('.slider_prev').css({'float':'left', 'outline':'0', 'color':'yellow'}); $this.parent().find('.slider_next').css({'float':'right', 'outline':'0', 'color':'yellow'}); ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // Accomodate padding-top for controls when elements are absolutely positioned (only in fade mode) ///////////////////////////////////////////////////////////////////////////////////////////////////////////// if(options.mode == 'fade'){ $this.parent().find('.slider_prev').css({'paddingTop' : $this.children().height()}) $this.parent().find('.slider_next').css({'paddingTop' : $this.children().height()}) } ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // Actions when user clicks next / prev buttons ///////////////////////////////////////////////////////////////////////////////////////////////////////////// $this.parent().find('.slider_next').click(function(){ if(!is_working){ if(options.mode == 'slide'){ animate_next(); if(options.auto){ clearInterval($.t); $.t = setInterval(function(){animate_next();}, options.pause); } }else if(options.mode == 'fade'){ fade('next'); if(options.auto){ clearInterval($.t); $.t = setInterval(function(){fade('next');}, options.pause); } } } return false; }); $this.parent().find('.slider_prev').click(function(){ if(!is_working){ if(options.mode == 'slide'){ animate_prev(); if(options.auto){ clearInterval($.t); $.t = setInterval(function(){animate_prev();}, options.pause); } }else if(options.mode == 'fade'){ fade('prev'); if(options.auto){ clearInterval($.t); $.t = setInterval(function(){fade('prev');}, options.pause); } } } return false; }); } function ticker() { if(options.ticker_direction == 'left'){ $this.animate({'left':'-' + $parent_width * 2 + 'px'}, options.speed, 'linear', function(){ $this.css({'left':'-' + $parent_width + 'px'}).children(':first').appendTo($this); ticker(); }); }else if(options.ticker_direction == 'right'){ $this.animate({'left': 0}, options.speed, 'linear', function(){ $this.css({'left':'-' + $parent_width + 'px'}).children(':last').insertBefore($this.children(':first')); ticker(); }); } } ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // Create content wrapper and set CSS ///////////////////////////////////////////////////////////////////////////////////////////////////////////// $this.wrap('<div class="' + options.wrapper_class + '"></div>'); //console.log($this.parent().css('paddingTop')); if(options.mode == 'slide' || options.mode == 'ticker'){ $this.parent().css({ 'overflow' : 'hidden', 'position' : 'relative', 'margin' : '0 auto', 'width' : options.width + 'px' }); $this.css({ 'width' : '999999px', 'position' : 'relative', 'left' : '-' + $parent_width + 'px' }); $this.children().css({ 'float' : 'left', 'width' : $parent_width }); $this.children(':last').insertBefore($this.children(':first')); }else if(options.mode == 'fade'){ $this.parent().css({ 'overflow' : 'hidden', 'position' : 'relative', 'width' : options.width + 'px' //'height' : $this.children().height() }); if(!options.controls){ $this.parent().css({'height' : $this.children().height()}); } $this.children().css({ 'position' : 'absolute', 'width' : $parent_width, 'listStyle' : 'none', 'opacity' : 0 }); $this.children(':first').css({ 'opacity' : 1 }); } ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // Check if user selected "auto" ///////////////////////////////////////////////////////////////////////////////////////////////////////////// if(!options.auto){ add_controls(); }else{ if(options.mode == 'ticker'){ ticker(); }else{ ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // Set a timed interval ///////////////////////////////////////////////////////////////////////////////////////////////////////////// if(options.mode == 'slide'){ if(options.auto_direction == 'left'){ $.t = setInterval(function(){animate_next();}, options.pause); }else if(options.auto_direction == 'right'){ $.t = setInterval(function(){animate_prev();}, options.pause); } }else if(options.mode == 'fade'){ if(options.auto_direction == 'left'){ $.t = setInterval(function(){fade('next');}, options.pause); }else if(options.auto_direction == 'right'){ $.t = setInterval(function(){fade('prev');}, options.pause); } } if(options.controls){ add_controls(); } } } }

    Read the article

  • Problem re-factoring multiple timer countdown

    - by jowan
    I create my multiple timer countdown from easy or simple script. entire code The problem's happen when i want to add timer countdown again i have to declare variable current_total_second CODE: elapsed_seconds= tampilkan("#time1"); and variable timer who set with setInterval.. timer= setInterval(function() { if (elapsed_seconds != 0){ elapsed_seconds = elapsed_seconds - 1; $('#time1').text(get_elapsed_time_string(elapsed_seconds)) }else{ $('#time1').parent().slideUp('slow', function(){ $(this).find('.post').text("Post has been deleted"); }) $('#time1').parent().slideDown('slow'); clearInterval(timer); } }, 1000); i've already know about re-factoring and try different way but i'm stack to re-factoring this code i want implement flexibelity to it.. when i add more of timer countdown.. script do it automatically or dynamically without i have to add a bunch of code.. and the code become clear and more efficient.. Thanks in Advance

    Read the article

  • Call a javascript function at distinct time intervals

    - by Dkong
    I've created a stock ticker function and need to call it every 2 minutes. I've succeeded in doing this with the javascript setInterval function, but the problem is on the first call it waits 2 minutes before calling the function, whereas I want the first load to be called right away. function CallFunction() { setInterval("GetFeed()", 2000); }

    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

  • Frame Buster Buster ... buster code needed

    - by Jeff Atwood
    Let's say you don't want other sites to "frame" your site in an <iframe>: <iframe src="http://yourwebsite.com"></iframe> So you insert anti-framing, frame busting JavaScript into all your pages: /* break us out of any containing iframes */ if (top != self) { top.location.replace(self.location.href); } Excellent! Now you "bust" or break out of any containing iframe automatically. Except for one small problem. As it turns out, your frame-busting code can be busted, as shown here: <script type="text/javascript"> var prevent_bust = 0 window.onbeforeunload = function() { prevent_bust++ } setInterval(function() { if (prevent_bust > 0) { prevent_bust -= 2 window.top.location = 'http://server-which-responds-with-204.com' } }, 1) </script> This code does the following: increments a counter every time the browser attempts to navigate away from the current page, via the window.onbeforeonload event handler sets up a timer that fires every millisecond via setInterval(), and if it sees the counter incremented, changes the current location to a server of the attacker's control that server serves up a page with HTTP status code 204, which does not cause the browser to nagivate anywhere My question is -- and this is more of a JavaScript puzzle than an actual problem -- how can you defeat the frame-busting buster? I had a few thoughts, but nothing worked in my testing: attempting to clear the onbeforeunload event via onbeforeonload = null had no effect adding an alert() stopped the process let the user know it was happening, but did not interfere with the code in any way; clicking OK lets the busting continue as normal I can't think of any way to clear the setInterval() timer I'm not much of a JavaScript programmer, so here's my challenge to you: hey buster, can you bust the frame-busting buster?

    Read the article

  • Making a concurrent AJAX WCF Web Service request during an Async Postback

    - by nekno
    I want to provide status updates during a long-running task on an ASP.NET WebForms page with AJAX. Is there a way to get the ScriptManager to execute and process a script for a web service request concurrently with an async postback? I have a script on the page that makes a web service request. It runs on page load and periodically using setInterval(). It's running correctly before the async postback is initiated, but it stops running during the async postback, and doesn't run again until after the async postback completes. I have an UpdatePanel with a button to trigger an async postback, which executes the long-running task. I also have an instance of an AJAX WCF Web service that is working correctly to fetch data and present it on the page but, like I said, it doesn't fetch and present the data until after the async postback completes. During the async postback, the long-running task sends updates from the page to the web service. The problem is that I can debug and step through the web service and see that the status updates are correctly set, but the updates aren't retrieved by the client script until the async postback completes. It seems the Script Manager is busy executing the async postback, so it doesn't run my other JavaScript via setInterval() until the postback completes. Is there a way to get the Script Manager, or otherwise, to run the script to fetch data from the WCF web service during the async postback? I've tried various methods of using the PageRequestManager to run the script on the client-side BeginRequest event for the async postback, but it runs the script, then stops processing the code that should be running via setInterval() while the page request executes.

    Read the article

  • Making an AJAX WCF Web Service request during an Async Postback

    - by nekno
    I want to provide status updates during a long-running task on an ASP.NET WebForms page with AJAX. Is there a way to get the ScriptManager to execute and process a script for a web service request during an async postback? I have a script on the page that makes a web service request. It runs on page load and periodically using setInterval(). It's running correctly before the async postback is initiated, but it stops running during the async postback, and doesn't run again until after the async postback completes. I have an UpdatePanel with a button to trigger an async postback, which executes the long-running task. I also have an instance of an AJAX WCF Web service that is working correctly to fetch data and present it on the page but, like I said, it doesn't fetch and present the data until after the async postback completes. During the async postback, the long-running task sends updates from the page to the web service. The problem is that I can debug and step through the web service and see that the status updates are correctly set, but the updates aren't retrieved by the client script until the async postback completes. It seems the Script Manager is busy executing the async postback, so it doesn't run my other JavaScript via setInterval() until the postback completes. Is there a way to get the Script Manager, or otherwise, to run the script to fetch data from the WCF web service during the async postback? I've tried various methods of using the PageRequestManager to run the script on the client-side BeginRequest event for the async postback, but it runs the script, then stops processing the code that should be running via setInterval() while the page request executes.

    Read the article

  • jQuery: Stopping a periodic ajax call?

    - by Legend
    I am writing a small jQuery plugin to update a set of Divs with content obtained using Ajax calls. Initially, let's assume we have 4 divs. I am doing something like this: (function($) { .... .... //main function $.fn.jDIV = { init: function() { ... ... for(var i = 0; i < numDivs; i++) { this.query(i); } this.handlers(); }, query: function(divNum) { //Makes the relevant ajax call }, handlers: function() { for(var i = 0; i < numDivs; i++) { setInterval("$.fn.jDIV.query(" + i + ")", 5000); } } }; })(jQuery); I would like to be able to enable and disable a particular ajax query. I was thinking of adding a "start" and "stop" instead of the "handlers" function and subsequently storing the setInterval handler like this: start: function(divNum) { divs[divNum] = setInterval("$.fn.jDIV.query(" + i + ")", 5000); }, stop: function(divNum) { clearInterval(divs[divNum]); } I did not use jQuery to setup and destroy the event handlers. Is there a better approach (perhaps using more of jQuery) to achieve this?

    Read the article

  • Same function on multiple div classes doesn't work

    - by Sebass van Boxel
    I'm doing something terribly wrong and just can't find the solution for it. Situation: I've got a number of products with a number of quotes per product. Those quote automatically scroll in a div. If the scroll reaches the last quote is scroll back to the first one. What works: The function basically works when it's applied on 1 div, but when applied on multiple div it doesn't scroll back to the first one or keeps scrolling endlessly. This is the function i've written for this: function quoteSlide(divname){ $total = ($(divname+" > div").size()) $width = $total * 160; $(divname).css('width', ($width)); console.log ($totalleft *-1); if ($width - 160 > $totalleft *-1){ $currentleft = $(divname).css('left'); $step = -160; $totalleft = parseInt($currentleft)+$step; }else{ $totalleft = 0; } $(divname).animate(     { left: $totalleft }, // what we are animating     'slow', // how fast we are animating     'swing', // the type of easing     function() { // the callback }); } It's being executed by something like: quoteSlide('#quotecontainer_1'); in combination with a setInterval so it keeps scrolling automatically. This is the jsFiddle where it goes wrong (So applied on more than 1 div) http://jsfiddle.net/FsrbZ/. This is the jsFiddle where everything goes okay. (applied on 1 div) When changing the following: quoteSlide('#quotecontainer_1'); quoteSlide('#quotecontainer_2'); setInterval(function() { quoteSlide('#quotecontainer_1'); quoteSlide('#quotecontainer_2'); }, 3400);? to quoteSlide('#quotecontainer_1'); setInterval(function() { quoteSlide('#quotecontainer_1'); }, 3400);? it does work... but only on 1 quotecontainer.

    Read the article

  • Mock the window.setTimeout in a Jasmine test to avoid waiting

    - by Aligned
    Originally posted on: http://geekswithblogs.net/Aligned/archive/2014/08/21/mock-the-window.settimeout-in-a-jasmine-test-to-avoid-waiting.aspxJasmine has a clock mocking feature, but I was unable to make it work in a function that I’m calling and want to test. The example only shows using clock for a setTimeout in the spec tests and I couldn’t find a good example. Here is my current and slightly limited approach.   If we have a method we want to test: var test = function(){ var self = this; self.timeoutWasCalled = false; self.testWithTimeout = function(){ window.setTimeout(function(){ self.timeoutWasCalled = true; }, 6000); }; }; Here’s my testing code: var realWindowSetTimeout = window.setTimeout; describe('test a method that uses setTimeout', function(){ var testObject; beforeEach(function () { // force setTimeout to be called right away, no matter what time they specify jasmine.getGlobal().setTimeout = function (funcToCall, millis) { funcToCall(); }; testObject = new test(); }); afterEach(function() { jasmine.getGlobal().setTimeout = realWindowSetTimeout; }); it('should call the method right away', function(){ testObject.testWithTimeout(); expect(testObject.timeoutWasCalled).toBeTruthy(); }); }); I got a good pointer from Andreas in this StackOverflow question. This would also work for window.setInterval. Other possible approaches: create a wrapper module of setTimeout and setInterval methods that can be mocked. This can be mocked with RequireJS or passed into the constructor. pass the window.setTimeout function into the method (this could get messy)

    Read the article

  • Nodejs removing event listeners [migrated]

    - by JeffH
    Looking to get some help. I'm new to Nodejs and wondering if it is possible, to remove this custom event emitter. Most of this code comes from the Hand on nodejs by Pedro Teixeira. My function at the bottom is attempting to remove the custom event emitter you setup in the book. var util = require('util'); var EventEmitter = require('events').EventEmitter; // Pseudo-class named ticker that will self emit every 1 second. var Ticker = function() { var self = this; setInterval(function() { self.emit('tick'); }, 1000); }; // Bind the new EventEmitter to the sudo class. util.inherits(Ticker, EventEmitter); // call and instance of the ticker class to get the first // event started. Then let the event emitter run the infinante loop. var ticker = new Ticker(); ticker.on('tick', function() { console.log('Tick'); }); (function tock() { setInterval(function() { console.log('Tock'); EventEmitter.removeListener('Ticker',function() { console.log("Clocks Dead!"); }); }, 5000); })();

    Read the article

  • jQuery timer, ajax, and "nice time"

    - by Mil
    So for this is what I've got: $(document).ready(function () { $("#div p").load("/update/temp.php"); function addOne() { var number = parseInt($("#div p").html()); return number + 1; } setInterval(function () { $("#div p").text(addOne()); }, 1000); setInterval(function () { $("#geupdate p").load("/update/temp.php");} ,10000); }); So this grabs a a UNIX timestamp from temp.php and puts into into #div p, and then adds 1 to it every second, and then every 10 seconds it will check the original file to keep it up to speed. My problem is that I need to format this UNIX timestamp into a format such as "1 day 3 hours 56 minutes and 3 seconds ago", while also doing all the incrementation and ajax calls. I'm not very experienced with jquery/javascript, so I might be missing something basic.

    Read the article

  • Problem re-factoring multiple timer countdown

    - by Joko Wandiro
    I create my multiple timer countdown from easy or simple script. entire code The problem's happen when i want to add timer countdown again i have to declare variable current_total_second CODE: elapsed_seconds= tampilkan("#time1"); and variable timer who set with setInterval.. timer= setInterval(function() { if (elapsed_seconds != 0){ elapsed_seconds = elapsed_seconds - 1; $('#time1').text(get_elapsed_time_string(elapsed_seconds)) }else{ $('#time1').parent().slideUp('slow', function(){ $(this).find('.post').text("Post has been deleted"); }) $('#time1').parent().slideDown('slow'); clearInterval(timer); } }, 1000); i've already know about re-factoring and try different way but i'm stack to re-factoring this code i want implement flexibelity to it.. when i add more of timer countdown.. script do it automatically or dynamically without i have to add a bunch of code.. and the code become clear and more efficient. Thanks in Advance

    Read the article

  • Rotate on hover using Jquery

    - by Ian34
    I can't figure out how to set up a jquery rotate function that would only rotate on hover. Here is the code that I am using: $('div.settingsButton').hover(function() { var angle = 0; setInterval(function() { angle += 4; $(this).rotate(angle); }, 50); }, function() { var angle = 0; setInterval(function() { angle = 0; $(this).rotate(angle); }, 50); }); The rotate is a plugin found here: http://code.google.com/p/jqueryrotate/

    Read the article

  • quickflip + slideshow animation

    - by user288231
    I have been trying to integrate quickflip and a slideshow animation. So everytime when the user hovers over the image, it would pause the animation and "flip to the other side". When the user hovers out, it would then replace its normal state. The problem is here is I do not know how to handle the quickflip code (http://jonraasch.com/blog/quickflip-2-jquery-plugin). I have looked at the sample code and tried to replace it, but at the end the animations would get messed up... Javascript: var interval = setInterval( "slideSwitch()", 3000 ); $('.quickFlip').quickFlip(); $('#slideshow').hover(function () { clearInterval(interval); }, function () { interval = setInterval("slideSwitch()", 3000); });

    Read the article

  • Monitoring Html Element CSS Changes in JavaScript

    - by Rick Strahl
    [ updated Feb 15, 2011: Added event unbinding to avoid unintended recursion ] Here's a scenario I've run into on a few occasions: I need to be able to monitor certain CSS properties on an HTML element and know when that CSS element changes. For example, I have a some HTML element behavior plugins like a drop shadow that attaches to any HTML element, but I then need to be able to automatically keep the shadow in sync with the window if the  element dragged around the window or moved via code. Unfortunately there's no move event for HTML elements so you can't tell when it's location changes. So I've been looking around for some way to keep track of the element and a specific CSS property, but no luck. I suspect there's nothing native to do this so the only way I could think of is to use a timer and poll rather frequently for the property. I ended up with a generic jQuery plugin that looks like this: (function($){ $.fn.watch = function (props, func, interval, id) { /// <summary> /// Allows you to monitor changes in a specific /// CSS property of an element by polling the value. /// when the value changes a function is called. /// The function called is called in the context /// of the selected element (ie. this) /// </summary> /// <param name="prop" type="String">CSS Properties to watch sep. by commas</param> /// <param name="func" type="Function"> /// Function called when the value has changed. /// </param> /// <param name="interval" type="Number"> /// Optional interval for browsers that don't support DOMAttrModified or propertychange events. /// Determines the interval used for setInterval calls. /// </param> /// <param name="id" type="String">A unique ID that identifies this watch instance on this element</param> /// <returns type="jQuery" /> if (!interval) interval = 200; if (!id) id = "_watcher"; return this.each(function () { var _t = this; var el$ = $(this); var fnc = function () { __watcher.call(_t, id) }; var itId = null; var data = { id: id, props: props.split(","), func: func, vals: [props.split(",").length], fnc: fnc, origProps: props, interval: interval }; $.each(data.props, function (i) { data.vals[i] = el$.css(data.props[i]); }); el$.data(id, data); hookChange(el$, id, data.fnc); }); function hookChange(el$, id, fnc) { el$.each(function () { var el = $(this); if (typeof (el.get(0).onpropertychange) == "object") el.bind("propertychange." + id, fnc); else if ($.browser.mozilla) el.bind("DOMAttrModified." + id, fnc); else itId = setInterval(fnc, interval); }); } function __watcher(id) { var el$ = $(this); var w = el$.data(id); if (!w) return; var _t = this; if (!w.func) return; // must unbind or else unwanted recursion may occur el$.unwatch(id); var changed = false; var i = 0; for (i; i < w.props.length; i++) { var newVal = el$.css(w.props[i]); if (w.vals[i] != newVal) { w.vals[i] = newVal; changed = true; break; } } if (changed) w.func.call(_t, w, i); // rebind event hookChange(el$, id, w.fnc); } } $.fn.unwatch = function (id) { this.each(function () { var el = $(this); var fnc = el.data(id).fnc; try { if (typeof (this.onpropertychange) == "object") el.unbind("propertychange." + id, fnc); else if ($.browser.mozilla) el.unbind("DOMAttrModified." + id, fnc); else clearInterval(id); } // ignore if element was already unbound catch (e) { } }); return this; } })(jQuery); With this I can now monitor movement by monitoring say the top CSS property of the element. The following code creates a box and uses the draggable (jquery.ui) plugin and a couple of custom plugins that center and create a shadow. Here's how I can set this up with the watcher: $("#box") .draggable() .centerInClient() .shadow() .watch("top", function() { $(this).shadow(); },70,"_shadow"); ... $("#box") .unwatch("_shadow") .shadow("remove"); This code basically sets up the window to be draggable and initially centered and then a shadow is added. The .watch() call then assigns a CSS property to monitor (top in this case) and a function to call in response. The component now sets up a setInterval call and keeps on pinging this property every time. When the top value changes the supplied function is called. While this works and I can now drag my window around with the shadow following suit it's not perfect by a long shot. The shadow move is delayed and so drags behind the window, but using a higher timer value is not appropriate either as the UI starts getting jumpy if the timer's set with too small of an increment. This sort of monitor can be useful for other things as well where operations are maybe not quite as time critical as a UI operation taking place. Can anybody see a better a better way of capturing movement of an element on the page?© Rick Strahl, West Wind Technologies, 2005-2011Posted in ASP.NET  JavaScript  jQuery  

    Read the article

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

< Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >