Before you read the rest this might be considered a broad question.
I'm sorry if it is, but I have no other way to ask it than this.
So, I thought about a loading page animation, which I consider to be complex, but it may not be.
What I want to achive is this:
When the page loads (let's say the index page), what you would see would be the point of view of a person looking at his/her smartphone (or desktop monitor, depending on the media query). So you would basically see what you see right now. If you're on a chair or a sofa you see maybe your legs, your hands, the environment and of course the device. On that device you would see a miniature of your index page, like that person is looking at your website.
Ok, now when the page is loading you would see a zoom on the smartphone/desktop monitor like you are going "into the content" that's displayed on the screen of that person's smartphone/desktop monitor, and when it's completely loaded you see the actual website fully displayed on your device.
In other words, in the animation, that person's device becomes your device. Hope I was clear enough.
POSSIBLE SOLUTIONS I THOUGHT ABOUT
Putting a screenshot of the index page on the animation's device and then using transform: scale(); for the zoom, but how could I get rid of the animation's content once the page is fully loaded, and then have the actual website displayed?
Having the entire <body> element zoomed out using transform: scale(); and positioned on the person's device, and when the page id loaded using transform: scale(); again to zoom in to the full viewport's size.
Note that I listed only CSS solutions, because I just started learning JS.
IMPORTANT: I don't want nobody to write that code for me. I only want to know if there's a solution, and if the solutions I thought about could work. Or, if I should use JS or other stuff I'm not aware about, in order to achive this animation.
POSSIBLE SOLUTIONS I THOUGHT ABOUT
Putting a screenshot of the index page on the animation's device and
then using transform: scale(); for the zoom, but how could I get rid
of the animation's content once the page is fully loaded, and then
have the actual website displayed?
you can get rid of the animation's content once the page is fully loaded with the help of javascript:
window.addEventListener("load", function () {
var AnimationContent= document.querySelector("#ID OF YOUR ANIMATION CONTENT");
AnimationContent.remove();
// or
AnimationContent.style.display = "none";
});
Related
I am developing a web site for selling handy crafts so users expect high quality images for per product. because of SEO related problems, I think about loading image asynchronous and just when user reach to per product thumbnail.I don't know how find out that when each user reach to per prouct thumbnail when scrolling page to load main and hight quality image for it; are there any event in javascript for detect that? or I have to calculate by pixels or some way like that?
What you are looking for is called "lazy loading". Lazy Loading means that the required resources are only loaded once the user actually needs it. In this example, the user only needs the image once the image is actually in the viewport (the elements visible on the screen)
The easiest way for Chromium-based browsers and Firefox is using the "loading" attribute of the img-tag and setting the value to "lazy". Example: img loading=lazy src="link"
This will work for most cases. However, if you want to be in control of the functionality behind it what you are searching for is called a "Intersection Observer". With this you can do alot of stuff related to elements and the viewport. E.g. how far is an element away from the viewport, or how much percent of the element is actually in the viewport.
If you want a really short 15 minute video that explains the Intersection Observer basis I can recommend this YouTube video:
https://www.youtube.com/watch?v=2IbRtjez6ag
I hope that this will be enough to help you with your problem!
I've implemented a scheme allowing visitors on my website to tap small photos to see a larger view. The tap/click causes a new page element to appear and expand to the max dimensions available for the screen, displaying a higher resolution image there. The reason is to avoid loading high bandwidth images unless the visitor is interested. Once the better hi-resolution image is displayed, the visitor can further expand the image with finger pinch gestures, as its typical for phones. The problem is, if the visitor does manually enlarge the photo, they will be left with an annoying oversized page after dismissing the larger image. And no matter what I do, the visitor's manual adjustment of the image affects the whole page.
For a long time there was a reasonable solution to this, which I found years ago somewhere here on stack exchange. I'd set up a function like this...
function resetScreenSize() {
var viewport = document.querySelector('meta[name="viewport"]');
if(viewport===null){
// just for test alert("no viewport meta");
return;
}
var original = viewport.getAttribute('content');
var forceScale = original+",maximum-scale=1.0";
viewport.setAttribute('content', forceScale);
setTimeout(function() {
viewport.setAttribute("content", original);
}, 100);
}
The idea was to un-do whatever manual zooming the visitor did by adding the "maximum-scale" value of 1 to the viewport, wait a moment for system to settle, and then return the viewport to its original settings (without a maximum scale). After testing this approach with a simple button, I just set up my code to call the function automatically when the visitor dismissed the zoomed image.
Well it seems that Apple, in their infinite wisdom, has decided that IOS devices will no longer honor viewport "maximum-scale", as well as several other options, like disallowing user scaling. It seems to be blocked on other browsers too like Chrome on IOS. So as a result my scheme no longer works. If a visitor picks a full size image and then expands it further, I have no way to set the viewport back to normal, without doing something drastic like re-loading the page.
I've tried a few other approaches I've found on stackexchange, most involving attempts to block zooming to begin with. That's not what I want.
So is there another solution I could consider? I know Social media giants like Facebook have a way of letting a visitor click an image to bring up a larger view, and no matter how the visitor enlarges it manually, things go back to normal once the photo is dismissed. But I don't know how that do it.
I ran in a similar problem a while back and fixed it in a similar way.
One important trick here was the wait with a 100ms. Using 0 would get the code executed immediately and not actually apply anything.
Now, if Apple changed the rules on these viewport parameters (probably because it got abused by some), then one solution I can think of is to use an IFRAME. I think that Facebook uses that technique whenever they open a "popup" with an image in it (and comments on the side). That makes it really easy to close that window and get back to the previous view. Also the viewport scaling factor will be changed in the IFRAME and not the window in the back. So you should get exactly what's necessary.
I have a site being developed for the mobile browser platform. Each page is large in width and height, and requires pop-up messages to be displayed. These ideally should be accomplished by using a html pop-up.
Using a basic javascript alert/confirm will cause the browser to display a message at a size which is consistent whatever the zoom level. I.e. it doesn't get smaller when you zoom out.
Is there a way to do this with html/css
I have tried position: fixed and transform: scale().
Fixed works nicely - most of the time - but only ensures that the modal background fills the viewport
Transform: scale requires a fixed scaling value? This could be modified by javascript I suppose?
The html meta viewport tag sets up the default browser viewport level. I want the users to be able to zoom/pan around to their hearts content.
I hope I have described my problem sufficiently, however if more clarification is required let me know.
Apologies if this question has been posted somewhere else.
The only way I can think of doing this at present is to write html into a new window, however it doesn't provide the functionality I was hoping for.
I was wondering how to achieve the native scrollbar effect which TheFWA (thefwa.com) has managed to do pretty well (I am not a fan of Flex scrollbars).
I found this post (http://stackoverflow.com/questions/318675/how-can-i-create-a-flex-application-with-dynamic-height), and implemented the technique, as I am calling a JS function through ExternalInterface every time, when the flash object changes size. This JS function simply resizes the div which holds the flash object, which creates the native bars.
Unfortunately, when I resize quite rapidly (from 800 to 1800 height, for instance) the flash object simply gets warped for several milliseconds (as if it hasn't changed its size, but simply got pulled in all directions). After these milliseconds, things get back to normal, but the whole situation is really visually annoying.
Originally I thought that it's simply a timing issue, but after a bunch of attempts to set a delay, the effect was the same ... just delayed.
How can I resolve that? I know it's technically possible. Just take a look at TheFWA, and see how smoothly flash and the browser are communicating with each other to make the native scroll bars work, without any flickering, or mismeasurement
This is an issue that appeared since Flash Player 10 and is still happening up to FP 11 beta.
When you resize the DIV that contains the SWF, the SWF itself is resized, therefore you "ask" the player to redraw the content. But the thing is that this redraw creates this ugly flicker.
The workaround it to not resize the SWF DIV at all and to resize another empty DIV, so you force the browser to update the scrollbar.
At this point when you use the scrollbar it won't move the SWF DIV (as it is probably often a position absolute full-size flash site) but then you create a simple JS callback to send the scroll values to your application.
It may sound as a much greater effort but it is not much actually, and at the end you will create a more flexible way to manage your application.
You can check that in use here http://www.andrefelipe.com/
And the source code is at my framework https://github.com/andrefelipe/fabricaframework/blob/master/src/fabrica/external/Browser.as
The flash content on that site has fixed size. What they did is to put the swf file in a centered div. Something like this:
...header stuff...
<body>
<div id="flashContent" style="width:960px; margin:0 auto;">
...the flash content goes here...
</div>
</body>
The width of the div container should be the width of your flash movie.
If you want to resize the flash movie then take a look at swffit
That site isn't doing anything special, simply setting the height and width of the application and slapping it on the page - no resize is happening. If you simply employ the same technique (specifying a height for the app) then you will get the same results.
Am I missing something?
My CMS project has a stylish web 2.0 login screen that fades over the screen using javascript. How come that even though I have made 120% sure that images are preloaded (I used the resource monitor in development tools) they still take a second to show up when my login screen appears. It completely destroys the fanciness! Take a look:
http://www.dahwan.info/Melior (link broken)
When you click login, the screen is supposed to fade to dark using a 75% alpha 1px png image. Even though the image is preloaded, it doesn't show up until after the animation is done. However, if you click cancel and log in again, the animation flows smoothly and perfectly.
Can anyone think of a solution to this problem? I'm having it with the rest of my CMS' GUI as well. It's like there was no image preloading what so ever.
Thanks for answers
EDIT: Ah yes, I'm currently developing this CMS for Google Chrome 5.0.375.99, adding multi browser compatibility later. Sorry for leaving that out
I have come up with a workaround to my problem. I have now tested this in three browsers on two different computers with perfect results. In short, in my image preloading function in javascript, i added each of the images into the DOM in an invisible Div tag.
$('#img_preload').append($('<img />').attr('src', img.src));
The images now being added to the Dom at page load, and according to my theory resting in the memory of my low-end computers, they appears instantly when my CMS needs them.
Thanks for your comments :)
A useful information about this problem:
The Codemonkey solution works because, by putting the images in a hidden div, the browser have to keep those images in memory and ready for a possible change of div's visibility. If the user needs to change de visibility of div from hidden to block, it has to be done instantly. This is why just load all images into an array doesn't work properly.
You could also just preload them into an array. Your problem might be caused by what is known as "garbage collection". This is where the browser looks for objects that are consuming memory which no longer have an instance on the screen and are not being referenced by anything else in memory.
If you preload images into your web age, they should be loaded into the cache, though. So, they should still re-appear when referenced again. However, images can also disappear if the cache expiration is not set for a long enough length of time for these types of files.
Your problem could also be browser-specific.... I have found that it is always best to create an "anchor" for pre-loaded content by placing them into an image array and then using the array to call up the images when needed instead of the image URL(URI).
Here is a quick-and-dirty article that covers this topic.
https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html
The UI thread can only manage one task at a time -- it will either execute javascript or update the UI. If there is a lot of javascript parsing/executing before the code that preloads the image, that might be causing the delay.
Another suggestion is to disable clickability on the login link until after the image has been detected on the page.
To do so is fairly straightforward:
function disableBtn(el){
var btn = document.getElementById(el);
var btnId = btn.id;
btn.disabled = true;
}
To re-enable, set btn.disabled = false (after detecting that your image has been added to the DOM).