We Keep Coding

Element visible only after 300px scrolled

i only know the basics on coding, and i've hit a dead end right here. Is there a simple code on how to make something visible only when scrolled after a few pixels?
You can see what i mean here http://cocorrinanewtemplate.blogspot.gr
the grey van bar that is fixed, should have a menu visible only when scrolled 300px (that's when the main menu is no longer visible)

You can try this.
HTML
CSS
.back-to-top {display: none; width: 30px; height: 30px; position: fixed; bottom: 20px; right: 20px; z-index: 500;}
JavaScript
$(function(){
$(window).scroll(function(e) {
if($(this).scrollTop()>150){
$('.back-to-top').fadeIn(1000); // Fading in the button on scroll after 150px
}
else{
$('.back-to-top').fadeOut(500); // Fading out the button on scroll if less than 150px
}
});
$('.back-to-top').click(function(e) {
$('body, html').animate({scrollTop:0}, 800);
});
});

You hase to use the jQuery function .scroll()
You will have to calculate where are you at in the scrolling proccess, and when you're at 300px from the top, do your logic.

I believe this script might work for you:
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.classid').fadeIn();
} else {
$('.classid').fadeOut();
}
});
</script>
this is your problem on the blinking just remove this script and you will be fine:
<script type='text/javascript'>
$(function(){
$(window).scroll(function(e) {
if($(this).scrollTop()>200){
$('#menutest').fadeIn(1000); // Fading in the button on scroll after 150px
}
else{
$('#menutest').fadeOut(500); // Fading out the button on scroll if less than 150px
}
});
});
</script>

Jquery: slideToggle, then scroll to div

I'm using slideToggle to display a div when a navigation button is clicked. It's working, but the div that I'm displaying is pretty tall, so you don't actually see much of it once it loads. The div sits directly beneath the button you use to trigger slideToggle. I would like to find a way to slideToggle the div, and then have the window scroll to the nav button, automatically displaying the entire previously hidden div.
<a href="#"> doesn't work as it tries to jump to the element before the slideToggle function has executed. Is there a way to have the window scroll to the element after slideToggle has completed?
You can see what I have so far here.
Click on the printables button to see what I'm talking about.
I also created a jsFiddle of the basic functionality, jsfiddle.

$('a').click(function(event){
event.preventDefault();
$(element).slideToggle(250, function(){
window.location.hash = "#content";
});
});
Should work.

Piggybacking off of Robert's answer, you could clean it up a bit by not using hashes.
$('a').click(function(event){
event.preventDefault();
$a = $(this);
$(element).slideToggle(250, function(){
$(window).scrollTop($a.offset().top);
});
});

The two answers provided by Chad and Robert are both valid, however, I like to write it a bit differently.
Below is an example based on your jsFiddle. The JS is the part you need.
$(function() {
$( "#button" ).on( "click", function() { //Click
$( "#content" ).slideToggle( "slow", function(){
if ($(this).is(":visible")) { //Check to see if element is visible then scroll to it
$('html,body').animate({ //animate the scroll
scrollTop: $(this).offset().top - 25 // the - 25 is to stop the scroll 25px above the element
}, "slow")
}
});
return false; //This works similarly to event.preventDefault(); as it stops the default link behavior
});
});
/* This is for the example */
#button{
display: block;
margin: auto;
margin-top:130px;
height: 50px;
width: 180px;
background-color: #ccc;
}
#content{
display: none;
margin: 0 auto;
height: 1200px;
width: 170px;
background-color: blue;
}
<!-- HTML for example -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to expand content
<div id="content">
</div>

How to make divs rise up from other divs?

I know how to stack divs on top of divs by doing position:absolute for the parent and position:relative for the children, but how can I make a div "rise up" from another div? An example of what I want to achieve is here. Scroll to the bottom and hover your mouse over the artwork.

What you can do is absolute position that pop-up in a relative positioned box, for example:
<div class="featured-image">
<div class="caption">
<p>This is where your text goes</p>
</div>
</div>
Now that you have that, you'll want to make the caption invisible unless scrolled over. So, a simple way to do this with just CSS is:
.featured-image { position:relative; width:300px; height: 400px; }
.caption { position:absolute; bottom:0; display:none; }
.feature-image:hover > .caption { display:block; }
The last line makes it seen when you mouse-over the image.
Then you could animate it with jQuery easily. That appears to be what they're using.
$(document).ready(function(e) {
$(".caption").hide();
});
var show = function() {
$(".caption", this).stop(true, true).show(500)
};
var hide = function() {
$(".caption", this).stop(true, true).hide(500);
};
$(".featured-image").hover(show, hide);

HTMl
<div id="pic">
<div>
</div>
</div>
CSS
#pic {
position: relative;
background: yellow;
width: 100px;
height: 100px;
overflow: hidden;
}
#pic div {
position: absolute;
bottom: -50px;
background: black;
height: 50px;
width: 100px;
}
JQuery
$('#pic').hover(
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '+=50'
}, 100);
},
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '-=50'
}, 100);
}
);
jsfiddle: http://jsfiddle.net/Z6eLa/2/

Introduce yourself to jQuery and z-index.
http://api.jquery.com/slideDown/
The trick here is slidedown will make your top div slide down. The only thing that comes to my mind, is instead of expanding that bottom div up, do the opposite. Get the top div, and have it slide-up, while the other div is displayed behind it. It should give the appearance of the bottom div 'sliding-up'.
Note, sorry if this doesn't work. I'm actually not sure if you can get it to slide only halfway up instead of all the way...good luck though!

You don't need JS for that, just use css3 transitions.

Simple JQuery Fade In/Out

So what I'm trying to do is getting a div with an animation to show up only when I hover a button. I want that div to be invisible until the page hovers it, and I want it to go back being invisible once the mouse is no longer hovering the button.
Also, I want to do this with JQuery since I've kept far away from it for too long.
JQuery Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});
});
</script>
HTML Code:
<div id="about_hover">
<img src="images/hover.gif">
</div>
<img src="images/menu/about.png">
<br>
CSS:
#about_hover {
text-align: right;
width: 150px;
float: left;
margin: 5px 0px 0px 100px;
overflow: hidden;
}
I'm getting a few problems though. First of all, the image inside the div loads up with opacity at 100% and only goes to 80% after I hover it for the first time. After that, it fades away like it's supposed to but it doesn't show up again when I hover the button.
Any thoughts?
Thanks
Thanks!

How about using fadeTo or fadeToogle ?
Here's a small snippet made using fadeTo: http://jsbin.com/agojux ?
you can have a look at it's source here

Here is your code, but a little bit modified:
JS:
$('#about_hover').width(0);
$('#about').hover(function(){
$('#about_hover').stop(true, true).animate({
width: '150px',
opacity: '0.8',
}, 300);
}, function(){
$('#about_hover').animate({
width: '0px',
opacity: '0',
}, 300);
});​
HTML:
<img src="http://www.placekitten.com/20/20/"><br>
<div id="about_hover"><img src="http://www.placekitten.com/80/80/"></div>

Honestly, it's probably best to use jQuery's on in this situation.. Your code would look something like this:
$("selector").on({
mouseenter: function () {
//fade in goes here
},
mouseleave: function () {
//fade out goes here
}
});
Hover is cool and all, but things can get messy with hover toggling. on makes this a snap. Also for your opacity's, I would probably use a fadeTo instead.
Here is the on documentation.

animate scrolling in scrollbars

Is there any plugin available for jquery to animate the scroll? Say I have few scrollbars in the window. I want that whenever user is scrolling the scrollbar should animate and not appear instantaneously.
To get an exact idea of what I am trying to achieve, see this:
http://demo.xceed.com/DataGrid_Silverlight/Demo_1.3/
This is in Silverlight.
See how it scrolls in fluid manner. I want to achieve the same effect but using jquery. Is this possible?
Thanks.

Use jQuery UI: http://jqueryui.com/demos/slider/#default.
Insert code into the ready handler as shown here:
var width = $('#scrollable').width() - $('#wrapper').width();
$('#slider')
.slider( { max: width })
.bind('slide', function(event, ui) {
$('#scrollable').stop().animate(
{
right: ui.value
},
1000
);
});
HTML:
<div id="wrapper">
<div id="scrollable"><!-- bla bla --></div>
<div id="slider"></div>
</div>
Don't forget to hide the scrollbar:
#wrapper {
text-align: left;
width: 900px;
height: 600px;
margin: 0 auto;
border: 1px solid black;
overflow: hidden;
position: relative;
}

Some thing like this might help.
$("html, body").animate({
scrollTop: 0
}, "slow");

You could make your own custom "sliders" using jQuery UI, and then upon change, do what "userD" suggested. One slider would be horizontal, one vertical (of course).
Then you'd want to hide the browsers actual scroll bars for the particular div by using css ("overflow: hidden;")
Here's was #userD suggested....
$("html, body").animate({
scrollTop: 0
}, "slow");
You would of course change that to "#myDiv" instead of "html, body".

A nice light plugin jQuery .scrollTo. Found here: Arial Fiesler Blog
sytanx is easy $('div').scrollTo(#anchorindiv,{duration:1000});