Hello I'm quite new to using jQuery and I was trying to create a menu that showed different pictures when you moused over the links. It will show one picture and hide 4 others and when you mouse off a link it will go back to a default picture. I'm using the hover function but sometimes when I moved the mouse to the bottom both images (the one related to the link and the default) both show up and I was wondering if there was some check I could do to make sure that this didn't happen. Here's what my code looks like.
$("#blog-img").hide();
$("#contact-img").hide();
$("#headturner-img").hide();
$("#work-img").hide();
$("#blog").hover(
function(){
$("#default").hide();
$("#contact-img").hide();
$("#headturner-img").hide();
$("#work-img").hide();
$("#blog-img").show("slow");
},
function(){
$("#blog-img").hide();
$("#default").show("slow");
}
);
I would love any help I could get on this.
You are possibly creating a race condition by using timing to show the images.
When both images are shown it's probably because the at least one of the Shows has been executed before the first executed one completes. This can happen when you move fractionally -we're talking pixels - into/out of the object with the hover.
I recommend using CSS to resolve this. It's much cleaner than using Javascript.
Related
There is a piece of functionality that I am trying to emulate on a .net e-commerce site, where you have a target area (I'll use the term "window" here, but I'm not talking about an actual window, more a div) which contains a large image. Next to the large image container, there are several smaller thumbnails. I want to emulate the functionality where as you either mouseover or click on the thumbnails, it refreshes the larger window with the fullsize version of that thumbnail. I guess it's a lightbox at the end of the day.
This isnt one of those cases where I've googled around and can't find any solutions... actually the polar opposite, i've found too many of them. I'm asking the community if there is any prebuilt script that is better than the others, or if anyone has done anything custom like this that's easy to implement. We aren't talking about pages of thumbnails here, maybe 2-3 per image. Again, I'm not trying to pop it in a lightbox, but refresh a div thats already inside the page.
What is structure of those divs?
If I get it right. Each thumb has responding to it 'big div' that is shown when clicked.
I would join then each small div with big via and attach action:
var b1 = $('#big1');
$('#small1').data('big',b1).click(function(){
var big = $(this).data('big');
big.someShowFunction();
});
I've got a question. I've been working on this site for a while, and I've hit a bit of a brick wall. I've thought this over a few times and I'm not sure how to go about this.
I've got 5 different configurations for content on a page, and I need to swap between them. What's supposed to happen, is when the user clicks on a button, a series of animations is supposed to happen, and ultimately replace the button and the top with the one that was pressed. The one that was at the top should return to its original position ("Home" should always be on top, "About" should always be just beneath that, save for when it's the current page).
My site is here, http://www.logicanddesign.ca, and all the javascript is open for you to see. Any help you guys could provide would really help. I'd like to do this without completely rewriting my site, but if it's the only way, I will.
Well, the first thing I'd like to point out is that you're associating the button_click function with the images instead of the divs containing them. You would be better off using the div tags for event handling.
Secondly, you only move the current button and the pressed button. To achieve the affect you're going for, you need to move the buttons in-between the default positions of buttonPressed and currentPage.
Moreover, you can't just statically define moveUp function for the button pressed and nothing else. Because sometimes you'll need to move the buttons between the button pressed and current button upwards.
As is apparant, you need to account for in-between moves when you set divs to animate. Possibly in the moveDivs function.
I made a fiddle representing what changes you could do to achive required effect, but I feel what I have written is a mess. The sort of mess which is worthy of nightmares, really...
In my opinion, you could create a javascript class to handle animations and movements. Making a class will make code much cleaner and you could indefinitely add buttons without breaking your code.
I'm having a helluva time figuring out how to accomplish this - and I'm surprised it isn't a more common occurance throughout the web, though I digress.
I'm building a small site that I'm trying to keep on a single page - in the end the site will live on a USB, so things should be as self-contained (file wise) as possible. Currently I've got a navigation menu (ie- Page 1, Page 2, Page 3) vertically, and when you select an link from the menu new content for that section comes up. I've got this part down - more or less - thanks to modified Coda-Slider script (See here: http://codysilfies.com/orn/).
The part I can't figure out is that in addition to changing the content when clicking a menu item, I would like to also change the backgroun. So Menu_Item_1 will show BGImage1.jpg, Menu_Item_2 - BGImage2.jpg, and so on. Something pretty much like this: http://brewfestgb.com/#!/merriment - though there are a bunch of additional features on that page...that I can't really figure out how to whittle out. There's got to be a simpler way to do it.
There are a ton of 'click a single link to change an image' tutorials around - but nothing with multiple links. I also tried using the same slider code for the background - but I can't make the image resize to the size of the browser window AND get the slider to work (it needs a set width apparently - which is workable for the content bit, but not when I want the background to resize with the browser).
Any advice...or leads? Seems to me someone should know something. Thanks in advance!
You can change the background-image when the click handler is fired:
$('a.link').click(function(){
// Find the image value
var background = 'BGImage' + $(this).data('bg') + '.jpg';
// Change CSS background-image
$('body').css('background-image',background);
});
Your links would have to look something like this:
Link 1
Link 2
Link 3
I have a demo up here so you can look at all the html and javascript involved.
Problem:
The problem I'm having is that at the moment, when you hover over a link (other than home) and then move the mouse anywhere else on the screen (except over the home link) the home link isn't reverting to the white text color.
I tried to resolve the problem by changing the following piece of code (look in the "example.js" file linked to from the page to view full code):
if (status == "off")
{
$(this).stop().animate({ color: linkcol },500);
}
I added an extra line
if (status == "off")
{
$(this).stop().animate({ color: linkcol },500);
$(".current_page_item_two a").stop().animate({ color: whitecol },500);
}
This line was intended to set the link inside the current_page_item_two element back to white when no link is hovered over (when the slider returns to the home link).
However, looking at the demo here, you can see that this creates some horrible glitches in the nav (wiggle the mouse about over the links to see what I mean, I end up causing some issue where the white rollover animations don't work at all)
Also, as a side note, why are my callback functions when animating the hover rectangle being called before the animation is complete? I'm new to jquery and I was under the impression that the fourth parameter was a function to be called when the animation was complete.
Thanks!
Your code is needlessly complex. I refactored what you want to do into a very simple jQuery plugin. If you want I encourage you to look into css3 animations to make it even smaller (although you might want to maintain cross browser compat). The code is still a little more complex than it needs to be, although that is more due to me not having much time at the moment. You can see the solution here:
http://jsfiddle.net/hGm7M/3/
Edit: updated url to add resetting slider to home and changing slider width
If you have any questions feel free to ask.
Notes:
You could move all the css into the jQuery plugin making it a self contained widget
You could separate the slider from the color system, although in this case I am not sure if it's worth it
Right now I don't set the colours in css for simplicity which means browsers without javascript will just get default coloured links. There are a number of solutions to this, but it depends on what you want to do. I tend to prefer the widget style of things, so I would serve a html menu to the client and then replace it with a js widget with all its own styling et all. This way you have graceful degradation, but the code is still simple and strait-forward.
I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.