I am having css issues when using jQuery's animate. I have tried a few methods to get this working but to no avail. Basically all I'm trying to do is have a side bar slide left and right via a click event but it seems the css (float) is causing issues. I know exactly the problem but not sure how to exactly fix it. Rather than me trying to explain the problem i have reproduced it with jsfiddle: http://jsfiddle.net/70hq1ky2/
The main content(article) seems to dip for milliseconds because it has the float style.
<a href='#' class='slide-side'>Slide</a>
<div style='clear:both;'></div>
<aside data-side-bar="open"></aside>
<article></article>
$('.slide-side').click(function (e)
{
var asideWidth = $("aside").width();
var isOpen = $('aside').attr("data-side-bar");
if (isOpen == "open") {
$('aside').animate({ marginLeft: '-=' + asideWidth });
$('article').animate({ width: '100%',});
$('aside').attr("data-side-bar", "close");
}
else if (isOpen == "close")
{
$('aside').animate({ width: '20%', marginLeft: '0' });
$('article').animate({ width: '80%' });
$('aside').attr("data-side-bar", "open");
}
});
Any help greatly appreciated! On pointers on writing this better is certainly most welcome.
Regards,
Instead of having your object have CSS of float: left or right or whatever, using absolute positioning. For example:
HTML
<div id="sidebar">
Woo sidebar content.
</div>
CSS
#sidebar{
position: absolute;
width: 100px;
left: 0px;
top: 100px; /* top offset */
}
Javascript/jQuery
hideSidebar = function(){
$("#sidebar").animate(
{
left: "-100px"
},
500
}
}
Therefore all I need to do is set the left attribute in jQuery to the negative width of the div, and it disappears, then setting it back to 0 will make it appear again. This is, of course, assuming you want the sidebar on the left side, otherwise use right instead of left.
Also note that if you want the sidebar to follow the user as they navigate through your application, you can also set position: fixed instead, so it follows the user as they scroll.
Make slight change in your script make +5 for aside
$('.slide-side').click(function (e)
{
e.preventDefault();
var asideWidth = $("aside").width();
var isOpen = $('aside').attr("data-side-bar");
if (isOpen == "open") {
$('aside').animate({ marginLeft: '-=' + asideWidth+5});
$('article').animate({ width: '100%',});
$('aside').attr("data-side-bar", "close");
}
else if (isOpen == "close")
{
$('aside').animate({ width: '20%', marginLeft: '0' });
$('article').animate({ width: '80%' });
$('aside').attr("data-side-bar", "open");
}
});
Related
When I add overflow-y:scroll to the .nav styling the button to open the navigation requires 2 clicks. Change this to overflow: none and it only requires 1 click as intended when using the following jquery:
$(function(){
var nav = $('.nav'),
navBut = $('.navBut');
navBut.click(function(){
if(nav.width() === 0){
nav.stop().animate({ width: '15%', opacity: '1.0' }, 300);
} else {
nav.stop().animate({ width: '0', opacity: '0.0' }, 300);
}
});
Can anybody see why this would be the case or how I can solve this?
http://jsfiddle.net/9ubxyw0t/2/
Rather than checking if the width of .nav is equal to 0, you need to check to see if it is less than or equal to 0.
Your original issue only seemed to effect certain browsers. It seems like some browsers would give the element a negative width when the overflow property was set to scroll. I guess this is just a cross-browser rendering inconsistency.
Updated Example
var nav = $('.nav'),
navBut = $('.navBut');
navBut.on('click', function () {
if (nav.width() <= 0) {
nav.stop().animate({
width: '15%',
opacity: '1.0'
}, 300);
} else {
nav.stop().animate({
width: '0',
opacity: '0.0'
}, 300);
}
});
In Yahoo website, when scroll down, a blue part is fixed to the top, while if not scroll down, the blue part is not fixed.
How to implement this ?
May I try onScroll function?
I use inspect element and, apperantly it changes class when that "blue part" is not in view,
so what it is doing (I guess) is changing the classes while it is in view and not in view, you can find if a div is in view and then change accordingly, "onscroll" is a great idea
Use $(window).scroll(function() on the part which you want to be fixed.
Fiddle Demo : Demo
$(window).scroll(function(){
if ($(window).scrollTop() >= 100) {
$('.sticky-header').addClass('fixed');
}
else {
$('.sticky-header').removeClass('fixed');
}
});
If you want to apply the fixed part to the header replace the class name in the $(window).scroll(function(){}): function.
Example for fixed Header while scrolling : Demo-2
You can make it fixed just with css.
<div id="myHeader">Header stuff</div>
#myHeader {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
Yes, you need to bind to win scroll like this:
var element = $(YOURTOPELEMENT)
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > element.offset().top) {
element.css({
position: "fixed",
top: 0
})
} else {
element.css({
position: "relative"
})
}
})
Someone know how convert a bottom position to top with CSS transition and jQuery?
I need to change the anchor of my image. And i have this problem. There is a conflict between bottom and top.
EDIT : In my scenario, the image has 100% of the width of the screen. And when the window is resized, i have a code in JS whoes get the new position of the image. If my anchor is always "top" for example, in some situations I have this hole who show-up for severals milliseconds and if I set at this moment bottom instead of top it will fix my issue. But I have this "jump" in the animation.
I made this fiddle to understand my issue.
Sorry for my English! Someone have an idea about this? Thank you !
You can get around the jumps by using a class, and removing the inline style as you go, like so:
if ( image.hasClass("bottom") ) {
image.css("bottom", "").animate( { top: "0" } , 1000, function(){
image.removeClass("bottom");
});
} else {
image.css("top", "").animate( { bottom: "0" } , 1000, function(){
image.addClass("bottom");
});
}
and add a css class
.bottom {
bottom: 0;
}
as per http://jsfiddle.net/rZPq3/
edit for cross-browser:
var top = image.position().top + 'px';
var bottom = image.parent().height() - image.height() + 'px';
if (image.hasClass("bottom")) {
image.finish().css({ "bottom": "", "top": top }).animate({ top: "0px" }
, 500, function () { image.removeClass("bottom"); });
} else {
image.finish().css({ "top": "","bottom": bottom }).animate({bottom:"0px"}
, 500, function () { image.addClass("bottom"); });
}
http://jsfiddle.net/wCuuX/
You should stick with one of the properties to avoid conflicts. I changed your fiddle to use top only and using a class to toggle the value instead.
var toggle = $("button#toggle");
var image = $("div img");
toggle.click(function () {
image.toggleClass("toggled");
});
See updated test case on jsFiddle.
I've been trying to find a solution to my issue for the past few days, but really couldn't find it anywhere, and Google literally hates me, so here I am. This is a big request and my conscience is eating at me for asking, but I don't know where else to turn.
I am building a gallery for a photographer, and while I'm at ease with HTML and CSS, my jQuery skills are taking a beating (in short, they're not good) - surprise, surprise.
The task becomes even more complex since it's a 100% height kind of gallery, and 100% heights don't play nice. I manage to set some of it up, but its functionality is really impaired.
After digging here on Stack and Google I found this great Plugin/Fiddle by William Moynihan:
http://jsfiddle.net/wdm954/8GKz6/11/
It contains exactly my markup and CSS, as well as the functionality I was looking for: a slider which centers the main image when sliding, and is infinite.
However, it doesn't play well with height: 100%; because of the width: auto; property on the images. The following line:
$(content).width(w * $(section).length);
Doesn't appear to calculate the width of the container at all (sets it to zero) because of the auto property in the CSS. When I set the width via the jQuery .css property to ('width', 'auto'), it works fine, but the sliding function is imperfect, causing images to skip/jump when moving right and left.
I didn't resort to a slider, because this is a nice way to actually have the content layed out, in a horizontal manner, which is something that looks great on a photographer's website. And of having width: 100%; will make the vertical images stretch past the browser window, and the horizontal ones to "hang" at the top with plenty of white space below. So, I am convinced that width: auto; and height: 100% is the correct, responsive way to go about it, but if someone manages to "unconvince" me, I will definitely follow your lead.
While I'm here, maybe someone could be polite enough to point me in the right direction to make this gallery finite - ending at the start and end of the slider, with the left/right buttons disappearing accordingly.
Any help is greatly appreciated. Here is the code itself, just in case the fiddle isn't enough:
<div class="container">
<div class="gallery">
<img src="../img/1.jpg" alt="Image" />
<img src="../img/2.jpg" alt="Image" />
<img src="../img/3.jpg" alt="Image" />
<img src="../img/4.jpg" alt="Image" />
<img src="../img/5.jpg" alt="Image" />
</div>
</div>
<nav id="navigation">
<<
>>
</nav>
<script>
/* jQuery Ghost Carousel
* Copyright (c) 2011 William Moynihan
* http://ghosttype.com
* Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php
* May 31, 2011 -- v1.0
*/
$(function() {
var content = '.container .gallery';
var section = content + ' > img';
function ghostCarousel() {
var v = $(window).width();
var w = $(section).width();
var c = (w * $(section).length - v) / 2;
$(content).width(w * $(section).length);
$(content).css('margin-left', -c);
$(content).css('width','auto');
$('#navigation a.left').click(function(e) {
e.preventDefault();
if ($(content).is(':animated')) return false;
$(content).animate({ marginLeft: '-=' +w }, 1000, function() {
var first = $(section).eq(0);
$(section).eq(0).remove();
$(this).animate({ marginLeft: '+=' +w }, 0);
$(this).append(first);
});
});
$('#navigation a.right').click(function(e) {
e.preventDefault();
if ($(content).is(':animated')) return false;
$(content).animate({ marginLeft: '+=' +w }, 1000, function() {
var end = $(section).length - 1;
var last = $(section).eq(end);
$(section).eq(end).remove();
$(this).animate({ marginLeft: '-=' +w }, 0);
$(this).prepend(last);
});
});
}
ghostCarousel();
$(window).resize(function() {
var v = $(window).width();
var w = $(section).width();
var c = (w * $(section).length - v) / 2;
$(content).css('margin-left', -c);
});
});
/* end "jQuery Ghost Carousel" */
</script>
Along with the CSS:
html, body { padding: 0px; }
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.container .gallery > img {
position: relative;
float: left;
height: 100%;
}
To make it finite, you need to understand and modify this tow functions only,
$('#gcNav a.left').click(function(e) {
e.preventDefault();
if ($(content).is(':animated')) return false;
$(content).animate({ marginLeft: '-=' +w }, 1000, function() {
var first = $(section).eq(0);//this is first
$(section).eq(0).remove();
$(this).animate({ marginLeft: '+=' +w }, 0);
$(this).append(first);//adding
});
});
$('#gcNav a.right').click(function(e) {
e.preventDefault();
if ($(content).is(':animated')) return false;
$(content).animate({ marginLeft: '+=' +w }, 1000, function() {
var end = $(section).length - 1;
var last = $(section).eq(end);//this is last
$(section).eq(end).remove();
$(this).animate({ marginLeft: '-=' +w }, 0);
$(this).prepend(last);//adding
});
});
Now, in this code, it is working with click on .left, and .right, if you want to make it finite,
just calculate the length of slides, and stop adding the slides, I have added the comments..
I have just pointed out the way...
I hope this will help...
I need that when I scroll down or up with mouse wheel or sidebar my div change incrementally the Y position (for example 50px up or down ). I need this in Javascript/Jquery.
I Try this code, but only works for scrolling down(The Scrolling Down and Up Function is working well, only the animate part is working wrong):
UPDATE:
var sidebarScrollTop = 0;
$(document).ready(function() {
sidebarScrollTop = $("body").offset();
$(window).scroll(function ()
{
var docScrollTop = $('body,html').scrollTop();
if(docScrollTop > sidebarScrollTop.top)
{
$("#legend").stop().animate({ marginTop: "+=50px",}, 'slow', "easeOutCirc" );
}
else
{
$("#legend").stop().animate({ marginTop: "-=50px",}, 'slow', "easeOutCirc" );
}
});
});
$(window).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
$(document).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
Thanks
You can use
$(window).scroll(function() {
// Your scroll code here
});
to grab whenever the user is scrolling on the page.
Next you want to change the div's y-value.
If the div is positioned absolute, this is just changing its top-value.
$('my-div').top = original-top-value + $(window).pageYOffset;
I believe you need is to keep the div always showing even when user scrolls down. If that is the case then it can be done with only CSS:
div {
position: fixed;
z-index: 100;
top: 100px;
left: 100px;
}
The values of z-index, top and left are dummy values. Change em with your ones.
UPDATE:
Since CSS Solution won't work for you, here is a working example writter in JS: http://jsfiddle.net/qCtt5/