If you'll take a look at this:
http://jsfiddle.net/hunterscott/JYLVQ/
You'll notice that if you try to drag the image, you can see the helper move, but it won't leave the gallery box. I have a feeling this is a CSS thing, but I'm not sure where it is.
Edit: Sorry, I need to be more specific, since that fiddle is pretty watered down from the full project. Gallery-wrap has to be set to overflow:hidden because it is an image carousel that shows 5 images at a time, and the rest are hidden. The user clicks arrows to advance through them. If I make gallery-wrap visible, then the images that shouldn't be seen are seen stacked below the first 5.
#gallery-wrap
is the culprit, it has overflow:hidden; set.
EDIT: ah, thanks for the clarification. Does this help?
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 have a wordpress theme that i'm building but i've hit a snag with some code and can't seem to get my div to expand correctly. I've tried clearing the floats at different positions, i've tried overflow: hidden, but nothing seems to work.
What i'm trying to do is have the content slide in from either side based on what header you click. The content is based on a wordpress post for each link. So the client can easilly edit it to any size.
Because of this it isn't viable to use pixels in the sizing of it. And i know that absolute positioning means that pixels are very nearly the only option.
I've messed with everything i can think of in firebug and just cannot get it to expand.
You'll find the site here: http://tinyurl.com/okd5wnf
However i couldn't get this to work either. Maybe that'll give you a clue as to what might be wrong.
I know it's a long winded post, and i apologise. If i have time later, i should be able to make a jsfiddle. However time is short at the moment.
Any help would be appreciated. Thank you very much.
Your problems stems from setting the <div class="box"></div>'s position property to absolute. Give the parent element(<div id="body-wrapper"></div>) overflow-x:hidden; to hide children that are not being displayed, and then use negative margins to position child elements within the viewport (the parent element). This is basically how most sliders work.
Remove position absolute from box class. please also mention what desired layout you need for content. we will suggest you classes for that.
Romove position:absolute from div.box
I guess that's all.
What I'm trying to do is something like you see at http://www.nejm.org/doi/full/10.1056/NEJMimc1109704. (Click Play and go to page 5 - the interactive physical exam.) I think they are doing this with Flash, but I'd like to use javascript/jQuery.
Basically there's an image that has multiple captions. The captions have arrows that point to different parts of the image, but that's not essential for me. When you click on different links, different captions appear.
Would I tackle this as an image map? I.e. create a map, and use jQuery to toggle different parts of the map? Is there a plug-in that does that? Google searches aren't helping me - but maybe I don't know what to look for. Any help will be appreciated.
I'm having the same problem and I found imageMapster. Check out
http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles
I think this is what you want to do. Just this solution today, haven't figured it out yet. Looks promising though. Otherwise check out qTip2
http://craigsworks.com/projects/qtip2/demos/
Maybe some adaptions let you/us do what we wanna do
Good luck! Keep u updated if I figured it out
Why would you need jQuery?
Anyway, put your main image down, and set its position to be fixed where you want it. You could even put it in a nice container div, just make sure all your caption divs are relative to the same parent. Then put fixed position divs of your caption images over it with a higher z-index in your css. Then place your caption images at the appropriate top and left positions until they are correct. Of course, use transparent PNGs.
All you need to do to toggle them is set the element's style.display to "none" or "inherit"
I'm working on a script that fades in and out both an image and a div I have set behind the image when you hover over the image. I'm having two problems:
The fades on the image and div don't seem to move at the same speed even though I have them set to.
I can't figure out how to get the div's to only show for the image you hover over. If I could type ("this" div.info) as an object, it would work fine. Is there a way to do that?
I can't get $(".info",this), $(this).find(".info"), or $(".info", $(this).closest("li")) to work.
Result: I have found the solution. I was able to get it to work by using lthibodeaux's suggestion and using $(".info", $(this).closest("li")) as the object and making all the functions .fadeTo go here for the result:
http://jsfiddle.net/Z5p4K/7/
Edit:
I found out the image and the div animations really were moving at the same speed, just the image only had it's z-index set on hover, so if you took your mouse off the image while the animation was running, it would appear to move at a different speed than the div when really the image was behind the div, it only appeared to be moving at different speeds because when the div became invisible you could see the image behind it but when it became opaque, the image was gone (making you think the image became invisible when really the div was in front of the image). This was easily fixed by moving the the z-index property from ul.columns li:hover img to ul.columns li img.
The div only had a border around it while you hovered over it. This was easily fixed by changing the border properties from ul.columns li:hover .info to ul.columns li .info
Check out the final version here: http://jsfiddle.net/tV9Bw/
This is the final version because I can no longer find any problems with any of the code; everything is optimized, there are no glitches, and it looks great.
Thanks to everyone who answered and to Yi Jiang for editing this post with better formatting. I'm new to this site so I wasn't sure how to properly format my question.
and a Huge thanks to artyom.stv for fixing the last glitch in the script that I didn't know how to fix.
You've got the general idea. One thing you should know about a selector is that you are able to define a second argument as the scope of the selector, i.e.
$("selectorString", scopeObject)
In your case, make the second argument $(this).closest("li"). It will find the list item containing your image and select .info descendants of that container:
$(".info", $(this).closest("li")).fadeIn(1000);
Change $(".info") to $(this).find(".info") and all will be sweet.
Yes you can use something like $(this).find(".info") as mentioned by Bundy
but as The jQuery constructor accepts a 2nd parameter which can be used to override the context of the selection.
You can also do something like this:
$(".info",this)
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.