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!
Related
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.
Similar questions, if not exact questions like this have been asked but not often and the answers I have tried to alter with but have had no luck what-so-ever.
Basically, I want to be able to make the content part of my page (so the header remains on each page) change and I'm not sure if this is with anchors using only one html page or if it's multiple html pages or really how it's done at all. Been looking for over 5 hours but to no avail.
I came across this site looking for an answer and it has exactly what I am looking for http://www.aivahthemes.com/themes/gracious/index.html
I looked everywhere and found sites where it did similar things but if you went right by two pages and then went back to the original page, you would see the middle page on the way back. That site above does NOT do this and actually hides the pages between links somehow which is amazing.
This is a bit vague as I havn't posted any code but literally all the code I tried was just from previous questions and it was just me trying to adapt half-answers to what I wanted.
Any help is greatly appreciated, I'm stumped!
Edit:
*Looked a bit more into detail, does look like one whole single HTML page. Why was it so quick to load though if it was an entire page? Thought that would have been a long process.
Edit2:
*Is it also possible to achieve this 'style' by doing it vertically?
The site you listed uses hashes in the URL. You can add them dynamically with javascript or just by using plain anchors. Hash in the url will save it in the browser history and the back/forward buttons will work fine. The only tricky part is reading the hash, which is pretty much straight forward with window.location.hash - it returns everything after '#' sign.
The script for animation/getting pages would be a little bit more complex, but as I see it's all based on getting the right <div id="HASH_FROM_URL">, moving it to 'left: -9999px' and then animating to main container's offsetLeft.
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.
This is my first question here in StackOverflow, but I have used the site many times, and you always helped me with your answers. Now its time to share my doubt, because I could not find a similar one here.
I have a flash banner rotator in my website, that uses a XML to configure the images and links that will rotate. I don't have acess to the source, because it is a commercial version.
I can not use jQuery to rotate the images, because I have a drop down menu and it always fall behind the banner. I tried z-index but it does not work on IE.
One of the images is to show a video, so, when someone click on it, I want a lightbox to open and play the video (I will use Sublimevideo.com for this)
The XML now is like this:
<slideshow>
<photo image="path/image.jpg" url="link" target="_blank"></photo>
</slideshow>
I need to add a CLASS to this link, because I want it to be opened in a lightbox!!!
So I was wondering to do something like this:
window.location.href='link class="lightbox"';
But this is not a option, it did not worked!
So how can I add a CLASS in the link at the xml file?
I was wondering using javascript, but if you have any other option, it will be GREAT!
Thanks a lot in advance and sorry for my English, I'm from Brazil =P
You could do it with an horrendous jQuery hack:
$('*[href*="path/image.jpg"]').addClass('lightbox');
Of course, if you know what the HTML will look like you could use a far more specific / less ugly selector.
A much better solution would be to add the class on the server, which sounds like it should be possible.
I can't seem to get my colorbox to work here, not sure whats missing. I have done this a ton of times, but apparently I am still so newb.
I have setup this sample page here:
http://www.whiterhino.us/aspire_setup/
(Click Either of the Red Buttons)
Wondering why the colorbox does not seem to format properly.
Thanks,
James
From a quick look at your source it appears you're missing the colorbox.css file.
That link is to the first example from the ColorBox demos on the website, but I'm pretty sure it's a standard file.