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.
Related
Hey lovely StackOverflow Community.
I have a problem with my website. I added the Bootstrap Carousel from getbootrap.com and it actually works very well. But there is one problem. Everytime the image sitch, my whole website goes up and down.
I don't know what could be the problem, cause i changed nothing on the code from getbootstrap.com :-/
Sorry for my bad english :D Hope you can understand my problem.
Overwrite the Bootstrap class. This will solve your problem
.carousel-inner>.item {
width: 100%;
}
My issue with the Carousel was not directly related to the image, but rather the content within it that was causing the shifting of the page. To avoid it while being elsewhere on the page, I just used JQuery to detect if I had scrolled past my carousel and to make it pause. I know its a workaround but its effective.
$(document).on("scroll",function(){
if($(document).scrollTop()>200){
$('#slider').carousel('pause');
} else{
$('#slider').carousel('cycle');
}});
It is because it changes some class on the carousel items.
You can set a min-height to the carousel container (.carousel-inner) and it won't jump anymore.
Set the value that fits better your needs.
ALSO:
Seam like there is a little effect on the images, so that every time that an image change, it became a bit smaller. If you just want to avoid the all website jump, use what i said above, if you want to change the "change-of-size" behave, you need to check the class .next and (probably) .right/.left and see if there's a change of height. It is hard to inspect them from a live website, that why i'm telling you to check this from the code - Or upload the code if you prefer.
I've been trying to get a proper 'inner zoom' jQuery plugin to function on my webshop's category page. Because i'm limited in my skills, not every one of them seems to work as easy.
However, i've found one that met my needs;
- The image thumbnail and large image are the same link source, just a width/height readjusted
- The zoom appears inside the image's 'frame'
- No 'magnifying glass' type of zoom with like 40x40px, the entire picture needs to enlarge at once
- Short, simple code
It's regarding this plugin: http://www.jacklmoore.com/zoom/
It works fine, except it only works on one image at a time (per page). When I copy the same code more than once, it only works on the first image.
How do I get it so that it works an unlimited number of times? Or perhaps any other type of zoom plugin that meets my needs?
I hope someone can help me out.
Best,
Dave
As it's explained on the plugin page, the zoom function can only be applied to images that are wrapped in some HTML tag. I think what you're trying to do is to apply the zoom function to a container that contains several images and therefore it only works for the first image.
What you could try to do is use the second code example, which should wrap the images and then apply the zoom function, but be careful so it doesn't break the styling:
$(document).ready(function(){
$('img')
.wrap('<span style="display:inline-block"></span>')
.css('display', 'block')
.parent()
.zoom();
});
If you could provide some code from your page which shows the images and their HTML containers, it would be easier to help you out with more specific jQuery code.
I'm looking to do something like this. I'm using code from this answer here but the answer is never made entirely clear. They are suggested to use this jquery plugin here but I haven't been able to get it to work. I would go with the first example's code, only, I'm using Foundation 4 and the progress bars are something that come with it and are simpler to create. Also, the animation code provided in the second example is a lot cleaner-- overall, the first example is kinda messy, code heavy, and redundant.
My code is live here. I'm working with the skill bars in the about section. Before the user gets to this point, the animation should be paused. Once the user scrolls to this part of the page, the animation should play.
EDIT: Also, if you have any suggestions to stop the bars from "breaking" out of their containers when you scale the page (this site is meant to be responsive), I would appreciate that as well.
EDIT2: I've noticed as I've been playing with this that overflow: hidden; on .progress fixes my "breaking" issue.. however, when you resize the window, the sizes stay at what they initialized at. I know realistically users visiting my site likely won't be resizing the window a whole lot, but for employers looking at it, it'll kinda be lame if it doesn't work properly. I'm having this same issue with the grumpy-cat button overlays where it initializes at the first size and doesn't resize the overlay after that. Suggestions to this would be really, really appreciated!
If you know where your skill bar is and you know where your screen is at, you only need javascript. (no plugins or weird stuff)
To get the vertical position of your screen it's simple:
window.pageYOffset
To get the vertical position of your div, you just need
div.offsetTop
In your case, I would give an id to the div that wraps all the skill bars and set a loop (window.requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame ) to check if you're within reach of the div (say, if the difference between the window offset and the div is less than some amount).
If the answer is yes, trigger the animation.
The best way to do the animation is by a css transition. (if you need a good intro to css animations here's a video that i found helpful: http://www.youtube.com/watch?v=VoncDvOfUkk )
You can set css animations from javascript.
The idea is that you would set all your "meter" widths to 0. Then in javascript do something like:
div.style.transition = "width 1s";
div.style.width = someValue;
My recommendation for the value to include in the div is some constant fraction of the "progress" div, as in with % as opposed to em or px. This technique should work. (in case you still have issues, you have a window.requestAnimationFrame loop going on so you can recalculate the values at each timestep... although... beware performance).
The reason you were recommended jQuery is because when you're going to have to update all the divs in order to animate them, just writing $(this).find('.meter') and then addClass('.expand') is so much easier.
Hope this helps
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.
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.