I'm attempting to get the following site to work:
The "Test" logo appears properly before the jQuery slider transitions to the next picture, which is when it gets shoved behind the new slide. I've tried changing the z-index on a lot of the elements, but nothing seems to work at all. What can I do to fix this?
The slider I'm using is Nivo: http://nivo.dev7studios.com/
Give a z-index of 100 or above to div#logo:
#header #logo{
z-index: 100
}
It works on the div but not on the image because z-index only works for positioned elements. I.e. elements that have position relative, absolute, etc.
Related
I'm using this code:
$('#container').animate({ height: '-=400px'}, 1000).fadeOut('fast');
The container is 400 pixels in height, the goal being to try make it shrink out into nothing, but at the end of the animation the div is still there, about 5 pixels in height, it doesn't fully collapse on itself as you'd expect with an empty div with no height value.
I've tried making it -=410px but the result is the same, it doesn't fully disappear - i've tried adding the fadeOut animation but it's a bit clunky. Does anyone know how to fix this?
EDIT: Found some stray padding which seemed to be causing the issue, now i'm having an issue with the border of the div disappearing afterwards.
I looked into the .animate() API for JQuery, and it looks like you're hardcoding the "toggle" target property. Try this:
$('#container').animate({ height: 'toggle'}, 1000).fadeOut('fast');
I"m making a script for a portfolio. when you click on one of the portfolio items a div will appear with the jquery onclick function like this:
$('#portfolioItem').click(function() {
$('#divThatWillApear').show();
This all works fine. I also downloaded a slider called glide.js. this slider also work fine.
But as soon as I combine my script and the slider togheter the slider is acting wierd.
I've created a jsfiddle : http://jsfiddle.net/skunheal/fzftX/2/
the slides dont scale to the full width of the slider. but when you rescale the window they do. when I remove the display none from my parent element (portfolioOverlay) it suddenly works all fine...
any one has an idea whats going wrong and how to fix it?
Hope to hear from anyone!
An easy fix would be to initialize the slider after clicking show, to fix this problem.
$('#show').click(function () {
$('#portfolioOverlay').show();
$('.slider').glide();
});
Demo Fiddle
Your .slider width is messing up as the width of the display:none; parent.
I "fixed" it by adding to your .slider
width: 100%;
to
width: 500px; // same as parent element, this means you are joining the width to the width of the parent however
Updated jsFiddle:
http://jsfiddle.net/cB3Pn/
As the portfolioItem is display:none on load it's size/position can not be calculated by your code. Removing the display:none CSS and adding the following to the bottom of your JavaScript will fix this as it will hide the portfolioItem once the JavaScript has run.
$('#portfolioOverlay').hide();
You could trigger the resize event yourself after showing the slider:
$('#show').click(function() {
$('#portfolioOverlay').show();
$(window).resize();
});
I'm stuck with this. Hope you can helpme. I'm adapting Nivo Slider for a site (I must use jquery 1.5.1). Everything is fine but the issue now is that when the image change the control nav thumbs loose its cursor pointer property. I mean, the click only works the first time the slide runs but when the image change the controls in the thumbs doesn't allow to make click.
Here you can see the slider:
http://www.sixplus1.com.mx/stackoverflow/carrusel_stack.html
The nivo slider Script:
http://www.sixplus1.com.mx/stackoverflow/js/jquery_kfu.nivo.slider.pack.js.js
I've been diging on the script to find a reason, around line 175 to 201, specifically on line 193 is the function that add the class to the thumbnails nav controller,
`$('.nivo-controlNav a:eq('+vars.currentSlide+')',slider).addClass('active');
$('.nivo-controlNav a',slider).live('click',function(){
if(vars.running)return false;
if($(this).hasClass('active'))return false;
clearInterval(timer);
timer='';]`
but I can't find anything that helps. I set in all the states of the thumb (on the css) the "cursor:pointer" property. And it doesn't works.
The reason for this is because your .nivo-slice goes over your .nivo-controlNav so when you hover it, you're actually going on top of the slice and not the .nivo-controlNav.
To solve this, by looking at your code, you only need to add a z-index
.nivo-controlNav {
z-index:10;
}
In your case, you need a z-index higher than 5 because .nivo-slice has a z-index of 5.
i'm having a problem using the scrolltofixed jquery plugin
https://github.com/bigspotteddog/ScrollToFixed
i use:
$('#tostick').scrollToFixed({ limit: $('#app-footer').offset().top - $('#tostick').height() - 20});
my #tostick is inside a
margin:0 auto
div container and as soon it hits the fixed footer and the script switches from fixed to absolute positioning it jumps out of the container because
left: 1107px
is applied, which is the distance to the left border of the browser window, instead of the left border of the centered div container. it tried to add:
offsetLeft: -$('#container').offset().left
which is completely ignored.
thanks in advance for any tip!
You need to give more info we don't know what #tostick is. Obviously we need the whole JS, and related html and css. Have you tried moving the entire container div it its only purpose is to have a style of margin:0 auto?
Also you can do:
$('#tostick').bind('unfixed', function() { $(this).css('left', ''); });//or what it needs to look right
$('#tostick').bind('fixed', function() { $(this).css('left', '1107px'); });//switch back to what it was
I am currently learning jQuery. I'd like to know how to make an image slide in when you click on its edge, then click again and it slides away. Similar to this:
http://www.karenmillen.com/
If you see the right hand side and click, there is the effect that i'm looking for. I assume this will involve making a div and giving it a background image then using some jquery to make the div slide into view. Of course the div could have other content such as html. Any ideas?
Would the .slideDown() method work?
if you want a div to slideDown() first it has to hidden.
so use $("#div_Id").hide();
after that use $("#div_Id").slideDown('slow');
this will work
Check out slideToggle
Here's what i have so far:
$(document).ready(function() {
$('.inner').hide();
$("button").click(function() {
$("#static_image").hide();
$('.inner').slideToggle(300);
});
});
So basically the animated div begins hidden. There's another div with a background image that is lined up to look as if the animated div is still sticking out a bit. Then clicking a button makes the static div dissapear and the animated div slide into view. However i'm not sure how to make the timing perfect so it's smooth and people won't know there are two divs. The animated div takes a fraction of a second to move up to where the div with the static image was, however the static images disappears immediately leaving a non-smooth animation.
One other thing, how do i get the static image div to return at the moment that the animated div moves back down after a user click? It can't be at the exact moment the user clicks 'retract' button else it'd definitely appear before it's supposed to.
In order to use the animate() function add a CSS class to the <div> tag that has a height attribute, it can either be in pixels or %, this will be the initial height. After that then you can use the animate().
$('#mydiv').animate({
height: 500px
}, 5000, function() {
// Animation complete.
});
This will slide the div to 500px, which will take 5 seconds.