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();
});
Related
since overflow: auto and overflow: scroll don't work for android 4 and older versions I tried to use Iscroll.js. I use it for 2 normal div and it works fine. but bootstrap modal has a problem with it. it only gets scrolled after a window resize.
I tried many things to solve it:
give the scroll to different div inside model.
change positions: fixed to absolute and relative.
give modal divs height and max-height.
none of the them solve this problem.
so please help.
I solved it. the code can explain the problem.
'
$(".product-it").click(function(){
$(this).delay(500).queue(function() {
myScroll.refresh();
$(this).dequeue();
});
});
'
So I'm trying to have a div slide in on pageload. It has an id of "#crazyslide" and is absolutely positioned to the right -800px in the css.
So I used this code in the head:
<script type="text/javascript">
$(document).ready(function() {
$("#crazyslide").animate( { right: '0px' }, 2000 );
});
</script>
Shouldn't this work?
No, you can't hide it off the edge of the screen. Devices like mobiles will let people scroll past the edge and it will look bad.
I recommend using this example of hiding and showing it with javascript.
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show
Yes it should. I just tested with your exact code, and it worked fine. There are ways to prevent a parent element from showing scroll bars for offscreen content.
Check to be sure your div is properly named: (console.log($("#crazyslide"));
Be sure a parent element's css isn't preventing the div from being
shown at all, such as a strange body width or something.
Be sure the div has content, and a set width.
*This turned out to be a load order issue where jquery was not yet defined when the animation code was called.
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.
My slideToggle is a little jumpy at the bottom of the slide transition. Could that be because there is a button there or something. Any way to make it smoother. Tried using easing but not very successful. Any suggestions
click on video setup to see for yourself
The site
$(document).ready(function() {
$('.drop').click(function() {
$(this).parent().next('li.drop_down').slideToggle();
return false;
});
});
Give your li.drop_down a fixed width. This should clear it up. I don't remember the exact reason for this, but I just tested it on your site, and it works.
Right now the computed width is 217px so try that.
.drop_down {
width: 217px;
}
EDIT: Looks like you have a .drop_down2 and a .drop_down3 as well (maybe more). You would need to do the same for those. I'd suggest assigning a common class for each.
Try storing the height of each item before animating it, and then re-apply that height to the element just before starting the hiding animation.
Here's an article I wrote how with an example of doing this:
http://www.pewpewlaser.com/articles/jquery-smooth-animation
Fixed width didn't work for me, but what did was adding a clearfix class to the animated element, since I had some floated elements inside.
I am using a div to populate a ul/li list and then draw a jCarousel out of it.
So this works fine:
$('#mycarousel').jcarousel();
Here is the problem:
The div containing the ul/li items could be hidden by the click of another button. When the div is hidden, and I re-size the browser window, the jCarousel also attempts to redraw itself, but since it is hidden, it is not able to draw it properly. The result is that everything is jumbled up in the list (if I click the button again to make it visible). But again if I re-size the window now (the jumbled up jCarousel is NOT hidden now), it redraws itself correctly.
I tried getting ahold of the jCarousel instance and reload itself as soon as the button is clicked to make the div visible (the way it re-sizes itself when it is visible and window is re-sized).
To get the jCarousel, I am using:
JQuery('#mycarousel').data('jcarousel')
and it is returned as null.
How can I get the jCarousel to draw correctly?
What makes you assume that the $().jcarousel() call does anything with .data()? Better to stick with the API provided by the plugin anyway, rather than guessing at how it works under the hood. Anyway, to answer your question...
The problem is that, when a div is hidden, it has no height or width. Use the "off-left technique" rather than hiding the div, like this:
#mycarousel {
height: 100px; /* whatever height your div will have when shown */
width: 100px; /* whatever width your div will have when shown */
position: absolute:
left: -10000px;
}
When you want to show it, use $('#mycarousel').css('position', 'static') to remove the absolute positioning, and the div will jump into place.
A little more info here.
Little more debugging and found that when the browser ressizes (and the carousel is already visible), its reload function is called to adjust its position, so to help myself in the hide/show div scenario, I ended up calling the carousel api's reload function after the wrapping div becomes visible.
a bit of effort was to actually get hold of the jcarousel instance.
so it was a two step process...
get hold of the carousel instance.
var cInstance = null;
cInitCallback = function(c){
cInstance = c;
};
$('#mycarousel').jcarousel({
initCallback: cInitCallback,
});
reload the carousel on the show of the div
cInstance.reload();