Let me explain myself as my question title may be a tad random. My website has a good few images, as such I want to have say a loading bar that as my browser receives and image it moves the bar x pixels to the right. Now the css behind it all isn't to bad. The problem I'm having is with JavaScript how one would determine when the how image has been obtained in the browser? So when all the images have loaded I can simply just show a neat page with out the user seeing all these images slowly download on their screen. Something similar to the following site:
Link
Or even I'm completely wrong here? How is the above link achieving this? Any tutorials would be a great help. As I tried googling "HTML Loading pages" This really is my first time doing this ever.
If you are using jQuery then please use load event on image selector like
$(function(){
$("#image").bind("load", function(E){
alert("Load");
});
});
Or you can also use onload JavaScript event
document.getElementById('image').onload = function(){alert("Load");}
Related
Forgive me if another thread like this exists - I couldn't find the answer to that specific problem.
I'll soon be developing the frontend for a vanilla JS AJAX loaded website, with SPA-like behavior similar to the home slider in this one:
- http://clapat.ro/themes/grenada-wordpress
The methodology I will probably utilize is loading the innerHTML of a container from the targeted sub-template, then pushing the state to the history - pretty standard approach to this, I believe.
Now, the slides containing image background are pretty obvious - all it should take is placing the same image in the target subpage hero section, then animating in on load. The problem might be with the video slides - how to make them continue playing seamlessly during and after the reload? Will such approach force them to start all over from the beginning, as soon as the target page is loaded and placed in the view?
I haven't tried it yet, I thought I'd ask in advance, in order not to get myself stuck up all the way into the incorrect approach :)
Thank You in advance,
Peter
Researching the reference templates for the 100th time, I think I came up with some kind of a solution myself:
if both the homepage and target page had structure like:
<body>
<main-container>
<slider-or-hero-container>
...
</slider...>
<content-container>
...
</content...>
</main-container>
</body>
Then, maybe I could replace the whole "main-container" on normal links, but replace only "content-container" clicking the links within the slider? The slider section would basically just stay, and the script would simply modify its appearance (disabling arrows and slide change, perform the transition animations etc)...
If you had any suggestions at this point, I'll really appreciate that :) Otherwise, I will post an update when I'm done coding it - if it works, it may be helpful for someone in the future :)
I was just creating an shortcut icon (the icon displayed in the head part of a page before the page title) (EDIT: I mean favicon...) for a webside, when I was thinking about animated shortcut icons (acually I don't know if they are called like that...).
Even though my intuition told me that this is probably impossible, since I haven't seen it being done on any web pages so far, I wanna be sure :^)
I have actually thought about a things that might in theory help to find out if, or how it's possible:
Using a gif file
There might be a way to make it work using a gif, but probably not. That's too easy. It would be widely-used...
Changing the icon tag using js for every frame of the icon animation
This would actually be my best guess, but I can't get it to work...
Changing the icon image on the server 10 times per second
Forget about this one.
Find out how the loding icon animation is done
Well, it's probably browser side and hasn't todo anything with html/js, but who knows?!
So, that's everything I could think of concerning shortcut icon animations, hopefully you can make sense of it :)
I cant believe I am asking this - but I spend the last TWO HOURS looking for a simple jquery lightbox to give to my students to learn how to implement...
What I need is something that is very simple:
I have a bunch of images and when I click on them I need a lightbox to open with a (different) image that I can specify...I just cant find anything that does simply that. Of course the lightbox will need to behave like a standard lightbox (X- close button, scale to size of image, have a line of caption or so)
something like:
$('.this-image').click(function(){
awesomelightbox.open('new url');
})
Most of the lightboxes I checked open either the same image that was clicked, or has a gazillion options that my students wont understand.
I tried:
- LightBox
- ColorBox
- FancyBox
- VisualLightbox
- Featherlight
Nothing suits my requirement :(
Does anyone know any simple lightbox that does what I mentioned? I would greatly appreciated any pointers.
Actually, using Fancybox you can do it. I went to their "How To" and they have an example. Look at the last bit of code on the page. If you are only trying to display 2 different images you can use their method. Notice how they have a small.jpg and a big.jpg, so it essence they are using 2 different images. This way they can use one image for thumbnail and a larger one for the actual fancy box. Is this what you are looking for?
EDIT: Or if you would like to use my plugin you are welcome to source it from my site. Here is an example, check sourcecode for usage.
http://tylerteaching.com/coolbox/
I'd recommend using Maginific (http://dimsemenov.com/plugins/magnific-popup/), or Pretty Photo (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/)
I was wondering if there is a code I can enter in a URL to alter a website. The website has images and start a preview when you hover over the image with the cursor. So my question is can you send java script code in the URL to hover over all images to make all images show previews at the same time?
I noticed this code for their mouse over
onmouseover="startThumbChange(7901031, '49992710857901031', 16,
'http://thumb1.cdn1a.image.websitename.com/videos/201212/06/7901031/240x180/');"
onmouseout="endThumbChange('49992710857901031');" />
or is this not possible?
(meaning it will only work if injecting java script with each image specifically?)
im guessing something like this
javascript:document.getElementsByTagName("img") or
javascript:document.srartThumbChange(document.getElementsByTagName("img"))
need help coding, not too familiar with javascript
It's certainly possible!
Using document.getElementsByTagName("img") you can loop over all images. You then need to check whether the mouseover attribute contains startThumbChange and then use JavaScript eval for example to run that function. You can run your complete code by putting it on one line and add javascript: before it, then paste it in your browser bar. Let me know if you need any more help!
Update with example code:
var imgs = document.getElementsByTagName("img");
for(var i=0;i<imgs.length;i++) {
imgs[i].onmouseover();
}
And to paste in your browser:
javascript:var imgs=document.getElementsByTagName("img");for(var i=0;i<imgs.length;i++) {imgs[i].onmouseover();}
JSFiddle: http://jsfiddle.net/h6ZS3/1/
Another update with a fix for the specified website
I'm not sure why, but it seems on some websites the onmouseover can only be read as an attribute while on others only as an event. Perhaps someone else can shine some light on that, but at least this works for your goal :)
javascript:var imgs=document.getElementsByTagName("img");for(var i=0;i<imgs.length;i++) {eval(imgs[i].getAttribute("onmouseover"))}
Quite simply, I have a SWF embedded in an HTML web page and want to move to a specific frame when a trigger is clicked.
But nothing happens when I click the trigger, as though the js just doesnt communicate at all with the swf.
SWF is written in flash cs4 (a3)
The link to the website is http://simplywebdzine.com/test.html.
I have read the text books over and over and researched high and wide on the internet and as far as I see I have done everything correctly but I cannot get this to work.
The swf is very basic, just a green box moving accross a small stage.
The desired gotoframe would make it cross at a lower height (just a dry run for a more complicated swf)
Would really appreciate someones help if you could possibly find out from the source code what is going wrong.
Many thanks
Steve
It looks to me like you have two problems.
You do not have the correct id for your <object> according to your javascript. The object id is "mymovi.swf" while your javascript is targeting "mymovi" as the id.
Even if I change your id using firebug, the function still does not fire off in the flash and I get an error about the function not existing.
Have you added a callback method in flash? something like flash.external.ExternalInterface.addCallback("GotoFrame", gotoFrameHandler) ??