I have created a jQuery window scroll-bar detector but when I re-size the browser window, in-turn changing the scroll-bar status, either from visible to not visible or vice-versa, the status notifier remains static. How can I keep the status notifier continuously updated on every re-size in a simple way without AJAX calls, via strictly javascript?
For further context, I am basically trying to come up with a solution for semi-infinite-scrolling if the content dosn't exceed the window size. If one of you guys figures this out it will be very benifical for a lot of UI developers trying to incorporate the highly demanded and popular load-on-scroll effect. Thanks in advance. Here is my demo.
$(window).resize(function () {
///????
});
You can use so-called functions to achieve this. In Javascript, functions are actually objects and can be simply stored in variables and passed around as parameters.
Take this example:
//first define your function - maybe give it a better name than I did :)
var detectScrollbar = function () {
if($(window).height() >= $(document).height()){
$('#statusNotifier1').fadeIn("slow");
$('#statusNotifier2').hide();
}
else
{
$('#statusNotifier1').hide();
$('#statusNotifier2').fadeIn("slow");
}
};
//call it initially
detectScrollbar();
//pass it to .resize() so it will be called when the event fires
$(window).resize(detectScrollbar);
You could put this whole thing into your $(document).ready();.
Have fun with the jsFiddle Demo. I hope all those sad UI developers will be dancing around with smiles on their face, celebrating :).
Related
Is there an easy/efficient way to detect if an img element load has started and/or a request has been made to the server?
I swear I remember seeing (the first part of) this before on SO, but can't find it now.
I think I remember that the naturalWidth and naturalHeight properties are present if the image has started loading, but IDK if that is always true.
I am working with lazy loading, and would like to be able to prevent a request if one has not already been made. I more or less need to know as much as possible on this topic.
Specifically, in this particular case, the only place I can put JS is after the body, and we're not sure yet if converting every image to use data-src instead of src from the server is an option, so that may mean having to comb back through the DOM to figure out where everything is at, and try to cancel as much as possible without stopping anything that is already in progress, because that would cause redundancy (even though it may help metrics in a very dirty way).
BTW, we are not using browser-native lazy loading, because I've found that is only useful for a specific use case. It's can't really be relied upon for prioritizing images above the fold, since it loads some lazy elements below the fold before the window.load event fires. Which makes no sense to me (why it can't start doing that after window.load.) And why there are no options on the feature. Also why loading:lazy can't be set in CSS.
Here is an example of how to control image loading:
https://jsfiddle.net/xnp6hLr4/2/
Your best bet is to load images dynamically and keep track of their states (not loaded, loading, loaded)
var isLoaded = false;
$(document).ready(function(){
$('#image').one().bind('load',(function(){alert('loading complete'); isLoaded=true; }));
$('#startButt').click(function(){
if (isLoaded)
{
alert('Image already loaded');
}
else
{
alert('Loading start');
$('#image').attr('src', 'https://cdn.pixabay.com/photo/2022/08/31/11/01/kangaroo-7423042_960_720.jpg');
}
});
});
I have an animated gif in an img tag that I start by rewriting the src attribute. The gif was created, though, to loop and I only want it to play once. Is there a way, with Javascript or jQuery, to stop an animated gif from playing more than once?
I was having the same problem with an animated gif. The solution is rather simple.
Open the Animated gif in Photoshop.
Go to the Window tab and select timeline(if the timeline is not already open).
At the bottom of the timeline panel, you will find an option, which says "Forever".
Change that to "Once".
Go to File> Export> Export for Web and save it as a gif.
That should do it.
can you find out how long the gif takes to loop once?
if so then you can stop the image like this:
pseudocode:
wait until the end of the image (when it is about to loop)
create a canvas element that has a static version of the gif as currently displayed drawn on it
hide gif
display canvas element in a way that makes it look like the gif froze
javascript:
var c = $("canvas")[0];
var w = c.width;
var h = c.height;
var img = $("img")[0];
setTimeout(function () {
c.getContext('2d').drawImage(img, 0, 0, w, h);
$(img).hide();
$(c).show();
},10000);
jsfiddle
edit:
I forgot to add reference to the original answer that I took this from, sorry
Stopping GIF Animation Programmatically
that one doesn't address the time factor you need for only one loop
Also, it has been mentioned that this approach is problamatic in certain cases (It actually didn't work when I try it in firefox right now...). so here are a few alternatives:
mentioned by Mark: edit the gif itself to avoid looping. this is the best option if you can.
but I've run into cases where it was not an option (like automated generation of images by a third party)
instead of rendering the static image with canvas, keep a static image version and switch to stop looping . this probablyhas most of the problems as the canvas thing
Based on this answer, it's kinda expensive, but it works. Let's say a single loop takes 2 seconds. At a setTimeout after 2 seconds kick in a setInterval, that would reset image source every millisecond:
setTimeout(function() {
setInterval(function() {
$('#img1').attr('src',$('#img1').attr('src'))
},1)
}, 2000)
again, probably just a proof of concept, but here's demo: http://jsfiddle.net/MEaWP/2/
Actually it is possible to make a gif to stop after just one iteration or any specific number of iterations, see an example below (if it is not already stopped), or in jsfiddle.
To do that the gif must be created with number of iterations specified. This could be done using Screen to Gif, it allows to open a gif or a bunch of images and edit it frame by frame.
This solution also allows you to reset the animation by imgElem.src = imgElem.src; but this does not work in MS IE/Edge.
Jurijs Kovzels's answer works in some condition but not in all.
This is browser-dependent.
It works well with Firefox. But In Google Chrome and Safari, it does not work if the gif is on the same server. The example he provided works because the gif is on the external server.
To restart gifs stored on the internal server, using Google Chrome and Safari, you need extra steps to make it work.
const img = document.getElementById("gif");
img.style = "display: none;";
img.style = "display: block;";
setTimeout(() => {
img.src = img.src;
}, 0);
This is inspired by this answer.
Not sure if this is the best way to respond to everyone and have it appear after all the previous answers and comments, but it seems to work.
I don't have much control over the gif. People post whatever gif they want as the "thankyou.gif in their account directory and then the ThankYou code runs whatever they've put there when a comment is submitted to a form they've posted. So some may loop, some may not, some may be short, some may be long. The solution I've come to is to tell people to make them 5 seconds, because that's when I'm going to fade them out, and I don't care if they loop or not.
Thanks for all the ideas.
I know I am pretty late here but..here it is...
I don't know if you would go to this length but let me share a trick.
Open the GIF in Macromedia Flash 8(it has deprecated since then), Export the GIF as Animated GIF. You will have to choose the file location. After that you would receive a dialog box with settings. In that, add the number of times you want the animation to happen. Click OK. Problem solved.
I have an application that switched between different graphs in Flex. Each graph is it's own state. In the MXML I have it set so that the source of the image change when the state changes:
<s:Image id="chartImage"
source.all="{ callImages.all }"
source.classA="{ callImages.classB }"
source.classB="{ callImages.classA }"
/>
I have buttons that successfully change the images. However, I have a small bug which occurs because after the line
this.currentState = chartName;
My code expected the graph image source to be changed, however the actual change to the s:Image element doesn't appear to happen until after the function ends and the screen updates, I assume. So when it grabs chartImage.height, it uses the old one from the state I just left.
Is there a way to have it get the new image (and thus it's dimensions) so I can do calculations with those dimensions on the next line? So far, chartImage.height returns the height from before the state change, but it is different after the function executes.
I could run a timmer after a fraction of a second then execute the lines there, and it would work. However, I'd rather tell it to render the screen and then continue my code. Is this possible? It just seems more elegant.
Is there a way to have it get the new image (and thus it's dimensions)
so I can do calculations with those dimensions on the next line?
Each Flex component must go through it's own validation cycle, which is built on top of the Flash Player's rendering mechanism. There are some great posts out on this, if you perform a Google search for the Flash/Flex Elastic Racetrack.
However, you can force a component to run through it's validation methods in a linear manner by calling the validateNow() method.
It is possible--especially if you have a state transition--that the properties on your Image have not changed yet after you set the currentState variable.
You generally can't change the source of an image in Flex and then immediately check ("on the next line") it's height — the exception might be when the source is a raw bitmap, but even then Flex's layout framework will vary depending on different factors so I wouldn't rely on this.
This is the classic problem with Flex: the beauty (and misery) of the framework is that it progressively renders it's changes to maximize the responsiveness of the app. Google "flex component life cycle" for a ton of resources about the details of this process.
There are a couple of ways to deal with this. Usually you'll want to use binding expressions, since they are designed for exactly this reason: asynchronous layout changes. Don't overuse them but they are a solid tool to keep the codebase simple and flexible.
You can bind to the height of a SparkImage via mxml:
<s:Image id="chartImage" />
<s:Label id="debugLabel" text="{ 'Height of chartImage: ' + chartImage.height }" />
but if you need to run logic I'd recommend using the BindingUtils (in the script block):
import mx.binding.utils.BindingUtils;
protected function someOtherFunctionBlock():void
{
BindingUtils.bindSetter( handleHeigtChange, image, "height" );
}
protected function handleHeigtChange( value:Number ):void
{
// Deal with value change
}
I have a button instance named "instructionButton" and I'm trying to trace "Clicked." to the output when it is clicked as a test but I haven' been successful thus far. Is there something I'm missing?
I'm using code in Flash Pro 6
import flash.events.MouseEvent;
var clickedVar:String = "Clicked.";
var runVar:String = "mice running...";
trace(runVar);
function instructionOpen(event:MouseEvent):void
{
trace(clickedVar);
gotoAndPlay(255);
}
instructionsButton.addEventListener (MouseEvent.CLICK, instructionOpen);
And of course if there's a more simple way to approach this, all knowledge will be helpful.
Check instance name is provided or not in the property window for the button (click the button and go to menu 'Window->Properties' to open property window)
What name is mentioned in the property window for the button, should use the same instance name in action script coding. Ensure the spelling from both script(code) and property window instance name.
I don't really see anything wrong with your button code, but here's how i do mine in AS3, it may help :) Creating a simple function within the event listener, I use stopPropgation to prevent my button from clicking anything that may be below it in the flash file. ( say you have two buttons on top of one another, you'll click both instead of one)
instructionsButton.addEventListener(MouseEvent.CLICK, function(e){
e.stopPropagation();
trace("Clicked.");
gotoAndPlay(255);
});
This is one button, if you need say fifteen, let me know as I have a code sample I'll give you that i use to create a limitless amount of buttons and eventlistners using switch/case which has been a huge help to me :)
The only way this will not work is if you are not reaching this frame.
Try add this code on your first frame and tell me if this helping.
Is it possible to extend the addEvent function in mootools to do something and also calls the normal addEvent method? Or if someone has a better way to do what I need I'm all years.
I have different 'click' handlers depending on which page I'm on the site. Also, there might be more than one on each page. I want to have every click on the page execute a piece of code, besides doing whatever that click listener will do. Adding that two lines on each of the handlers, would be a PITA to say the least, so I thought about overriding the addEvent that every time I add a 'click' listener it will create a new function executing the code and then calling the function.
Any idea how I could do it?
Whereas this is not impossible, it's a questionable practice--changing mootools internal apis. Unless you are well versed with mootools and follow dev direction on github and know your change won't break future compatibility, I would recommend against it.
The way I see it, you have two routes:
make a new Element method via implement that does your logic. eg: Element.addMyEvent that does your thing, then calls the normal element.addEvent after. this is preferable and has no real adverse effects (see above)
change the prototype directly. means you don't get to refactor any code and it will just work. this can mean others that get to work with your code will have difficulties following it as well as difficulties tracing/troubleshooting- think, somebody who knows mootools and the standard addEvent behaviour won't even think to check the prototypes if they get problems.
mootools 2.0 coming will likely INVALIDATE method 2 above if mootools moves away from Element.prototype modification in favour of a wrapper (for compatibility with other frameworks). Go back to method 1 :)
I think solution 1 is better and obvious.
as for 2: http://jsfiddle.net/dimitar/aTukP/
(function() {
// setup a proxy via the Element prototype.
var oldProto = Element.prototype.addEvent;
// you really need [Element, Document, Window] but this is fine.
Element.prototype.addEvent = function(type, fn, internal){
console.log("added " + type, this); // add new logic here. 'this' == element.
oldProto.apply(this, arguments);
};
})();
document.id("foo").addEvent("click", function(e) {
e.stop();
console.log("clicked");
console.log(e);
});
it is that simple. keep in mind Element.events also should go to document and window. also, this won't change the Events class mixin, for that you need to refactor Events.addEvent instead.