jQuery sliding function - javascript

I have a working jQuery sliding function that I have posted here below. I got it from another question on this site. It's great. Except I now want it to go the opposite direction.
I used this to slide from left to right. I tried adding a minus sign (-) in the animate function to make it {'-width': 'toggle'} but that just made it toggle on and off instead of sliding. I'm sure it's something simple, I'm just frustrated with it.
JS
$(document).ready(function(){
$('.pull-me').click(function(){
$('.panel p').css({
'width': $('.panel p').width(),
'height': $('.panel p').height()
});
$('.panel').animate({'width': 'toggle'});
});
});
And the html
html
<div class="panel">
<p id="novelDescrip">A website for a local musician to market, stream, and distribute music and merchandise. Content design and development</p>
</div>
</div>
<p class="slide"><div class="pull-me">Slide Out!</div></p>
When I click the More info tab, I want that panel to slide out to the left. Then if they click the More info tab again, it should close back up to the right into the more info tab.
Is there not a way to just reverse the direction of the function i'm already using?

Try this:
http://jsfiddle.net/FL87t/3/
$(document).ready(function(){
$('.pull-me').click(function(){
if ($('.panel').is(":hidden"))
{
$('.panel').show('slide', { direction : 'left'}, 500);
}
else
{
$('.panel').hide('slide', { direction : 'right'}, 500);
}
});
});

This should help you:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
Read through it and you should find what your looking for.
Bare in mind that JQuery also has: .slideDown() & .slideUp()
But for changing the animation itself you're probably going to need CSS.
This goes in the opposite direction and sort of matches what you want to do in the image you just posted, try building off of it: JSFiddle

Related

Can't get slide out menu to display properly

Here is a link to the site in progress -- http://barret.co/resources/testsite12345/
There is almost nothing on the site yet as I am working on the skeleton, so inspecting element should be very easy to pinpoint what's wrong.
I'm working on a slide out menu from scratch but am fairly new to jQuery. Basically, what I have now is working, but not exactly how I'd like it to be. as you can see, when you click the menu button in top left, it slides the panel left and back to the right. I'd like for this panel to initially be hidden upon viewing the page, and then slide out when menu is clicked.
Also, is there an easy way to close this panel if a user clicks onto the main page? The only way it closes now is if the menu button is clicked again.
Any help is very much appreciated.
Thanks in advance!
I think you simply had a mixup with the classes.
Add this to your #left-menu css:
right: 300px;
and then use this:
jQuery(document).ready(function($) {
$('#menu-container #right-menu').click(function(){
var hidden = $('#left-menu');
if (! hidden.hasClass('visible')){
hidden.animate({"right":"0px"}, "slow").addClass('visible');
} else {
hidden.animate({"right":"300px"}, "slow").removeClass('visible');
}
});
}); // end
Add the following: $(".logo").hide() to the $(document).ready(function () {});

jQuery Waypoint Plugin troubles

I'm having slight troubles with the jQuery Waypoint plugin, and any information/help is appreciated.
Ok, so to define what I want to do: I have images, that are hidden prior to being in the view area. I want them to do an animation effect once in the view area. That is the final result, for now, I'm still in testing as I am generally new to jQuery but getting better.
So I started out doing the shake on a single div, and it worked great once the once it was in view. I used the following code:
HTML:
<div class="shown">Shake it</div>
jQuery
jQuery(document).ready(function($){
$(".shown").waypoint(function(direction) {
$(this).effect("shake");
}, { offset: '95%', triggerOnce: true });
});
Then I made two instances of the class='shown' in my HTML (one at top, and one at the bottom), and when I scrolled to them, they both worked great. Plus, they both worked at separate times, which is what I'm trying to gain.
Here's the trouble
When I tried to 'display:none' and then animate to show on scroll, it animates BOTH, instead of just the single at a time.
This is what I'm using
HTML
<div class="shown" style="display: none;">
jQuery
jQuery(document).ready(function($){
$(".shown").waypoint(function(direction) {
$(this).fadeIn( 10000, function() {
// Animation complete
});
}, { offset: '95%', triggerOnce: true });
});
Ok, so just to clarify one more time :D (to be safe)
I want to be able to use the same class for MULTIPLE instances, that will only display once THAT element is in view. Right now it's displaying ALL elements once 1 instance is in view.
Again, any information/help is appreciated. You guys have a great community here, I'm glad I could join!

Show an element at the bottom of the page with javascript

In a guestbook I have a button at the bottom of the page which displays the input form on click:
$("a#showform").click(function(){
$(this).hide();
$("div#post").show("slow");
});
The problem is that the appearing form is outside the current view port and only manual scrolling makes the form visible to the user. I couldn't find any solution from the web but this must be a very common issue. Isn't there a jquery command to "stick to bottom" or similar?
Next thing is: I use nanoScroller on the whole page, so normal downscrolling methods won't work here. nanoScroller has a method scroll:"bottom" but it isn't smooth...
Thank you very much,
Toni
You can easially scroll to the bottom of the page whenever your webpage expands :
$("a#showform").click(function(){
$(this).hide();
$("div#post").show("slow");
$('html, body').animate({
scrollTop:$(document).height()
}, 'slow');
});
you can set the 'slow' of the .animate() to any speed in miliseconds.
jsFiddle
Just ajust the scrolling within your function
$("a#showform").click(function(){
$(this).hide();
$("div#post").show("slow");
/* $(scroll magically to #post) */
$("div#post").nanoScroller({ scroll: 'top' });
});
You may wish to use css to solve this problem if you aren't concerned with the post item covering other elements:
div#post {
position: fixed;
bottom: 0px;
}

Animate a div after scrolling away from the top of the webpage

I'm currently trying to make a div appear from behind another div after the user scrolls away from the top of the page.
I'm hoping to do this using animate so that it slides out. Like this...
http://jsfiddle.net/xaYTt/99/
But I can't figure out how to make the red box stay behind the blue box until the user scrolls away from the top of the page.
I also need to reverse this when the user scrolls back up to the top of the page, so the red box slides back under the blue box again.
Can anyone help me out?
This is not the most elegant solution, but it works nonetheless.
http://jsfiddle.net/37LZ5/
Components:
Use $(document).scroll as a trigger to know when scrolling
Use scrollTop() to know how far we're scrolling (0 = top)
Remember state to make sure animation doesn't get triggered a zillion times (var away)
Use .stop() to prevent weird behaviour when halfway through one animation, another animation gets triggered
I think you are looking for this take a look at this demo
Working demo
Code
$(document).ready(function(){
//$('#bottom-box').animate({'margin-top': '200px'}, 1500);
$('body').hover(function(){
$('#bottom-box').animate({'margin-top': '200px'}, 1500);
}, function(){
$('#bottom-box').animate({'margin-top': '50px'}, 1500);
});
});
If my understanding about your question is correct, this is what you are looking for
Since you said, "User scrolls away from the top of the page", I added a div to be at the top of the page.
var isAlreadyOut=false;
$("#divPageTop").mouseover(function(){
if( isAlreadyOut==true)
{
$('#bottom-box').animate({'margin-top': '60px'}, 1500);
isAlreadyOut=false;
}
else
{
$('#bottom-box').animate({'margin-top': '200px'}, 1500);
isAlreadyOut=true;
}
});
Here is the jsfiddle version
http://jsfiddle.net/xaYTt/103/
I did something with jsFiddle that might be what you are after, if I understood your question correctly.
Basically, the red box will animate when you scroll the window more than the distance of the blue box.
Not 100%, just a quick mock up to see if that's what you want.
(When you scroll, click on the scroll bar arrows for more accurate results)
Demo here: http://jsfiddle.net/peduarte/xaYTt/104/

element animation

i saw an effect in iconArchive site and i don't no how to apply it if one of you help me to get the idea with small example this will be nice.
under this link :http://www.iconarchive.com/search?q=share&page=3 if you go over the heart img then a copy of it will move to the bottom and add the icon you have selected. i have no idea how to start for that reason i don't have any code .
i think they use java script +jquery+ css to do it.
The jQuery animate function can do this neatly: http://jsfiddle.net/bX6Uk/.
$('#button').click(function() {
$('#div').animate({
top: 300,
left: 10,
}, 'slow');
});
To achieve the specific effect on your example page you should check out the jQuery UI Transfer effect.

Categories

Resources