i made a little Page were you can change text/image on click. My Problem is that the image is loaded to fast. It should load after the TV disappeared. Maybe it helps to unterstand my problem. Just click "test 2".
This should be just a comment but I don't have enough reputation to do it. Sorry.
Don't know how you implement your animation and the source code is hard to read. If your problem is that while the first TV moves up and before it disappears, the picture has already become the second one, I think you could just add a callback function triggered by the end of transition. Then in that callback function, switch your picture to another one.
Well looking at your source code of the page, you might want to change this line:
$("img.tv").attr("src", newSRC);
to this:
$("img.tv").delay('1000').attr("src", newSRC);
Check and see if this works.
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 :)
This is the screenshot of my html page. this commented area is my issue.
Your problem starts with a couple of error's :)
Your Javascript crashes because it looks for a function that doesn't exist "$(...).fancybox()". This means that either you didn't include the fancybox library or that the file where you call in the function fancybox is loaded before the fancybox library is loaded in.
Next problem is that the images that are used in your slider (I assume). Do no longer exist. Try clicking them in the console to see if you can access them in the browser.
Last but not least. You tagged your question as "java". Javascript and java are not the same thing. Your problem involves javascript. Might want to change that tag next time so you can get anwsered faster.
I Hope this helped a bit :)
Good luck!
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");}
EDIT: I found the solution. Embarrassingly simple. I removed the following line of code:
e.preventDefault();
Worked like a charm. Obviously, I'm quite the noob with js. I'm off to Code Academy to remedy that. :)
I don't know that my original question was worded very well (I was tired, sorry!) so let me try this another way.
I've been searching for days to solve this, here at SA, other forums, and the mighty Google. So far, no luck.
I have a horizontal menu. I'd like to make each link play a sound AND swap images onClick. I've gotten it to play the sound and swap the images, but the anchor link doesn't send you down the page to the appropriate text section.
Removing the js that controls the image swap (located at the bottom of the html) resolves the anchor link problem. But I need both the sound and image events to occur.
I've only coded the first two links thus far.
Hopefully, this explains my problem better.
Thanks again, all.
The href of your anchor tags are #. This won't change/reload the page, it will just change the url fragment. See http://en.wikipedia.org/wiki/Fragment_identifier
As noted above, removing the following line of code solved the problem.
e.preventDefault();
I hope this helps someone as green as I am with js from agonizing over something simple, as I did. Sheesh!
I'm sure it's just changing one thing, or adding it, but I can't make it work. An image on top of a video slider is supposed to fade away when you play the video. Then, if you click another (they're linked through thumbnails) it will make the image pop back up and fade agisn. the first part works, but after the first time, it doesn't work anymore. Can anyone help me? Here's the fiddle
You have a few serious html and javascript syntax errors that might be causing some trouble.
I properly indented your code in jsfiddle and seems like you have a broken body tag, and two extra closing div tags that are disconnected.
In your javascript, in the videos array, you missed a pretty important quote.
Check this fiddle http://jsfiddle.net/elclanrs/dp5wJ/12/. When the code is properly indented the erors are very easy to spot with the syntax highlighting.
You're re-binding $('#myVid').bind("ended",... on each click.