Well, I have a very simple code, that do something like... when you are at the top of the page, #header have background-color:transparent;, and as you start scrolling down, it has static black color. It works great, but every time, when I refresh the page, the header has the black color instead of transparent.... I tried making the offset in scrolling from the top heigher, but still nothing. (when I refresh it, it has black color, as i scroll down, still black color, but as i scroll to the top again, right at the top it works, and i have the color transparent. [it starts working when i just move with the scroll button, but not from the beginning{landing} on the page])... there is my code:
js:
$(window).scroll(function () {
if ($(window).scrollTop() < 500) {
$('#header').css("background-color", "transparent");
}
else{
$('#header').css("background-color", "black");
}
});
css (for header)
#header {
background-color: black;
height: 75px;
width: 100%;
top:0px;
position: fixed;
z-index: 10;
}
html:
<div class="container">
<!--HEADER-->
<div id="header">
<div id="main">
<img src="images/my_logo.png">
</div>
<div id="menu">
<img name="menu" src="images/my_menu.png">
</div>
</div>
<!--/HEADER-->
At the moment you're only running the function when you scroll the page. You need to also run your function on the page load...
$(function(){
// Run it on page-loaded
setHeaderColour();
// Run it on scroll
$(window).scroll(setHeaderColour);
});
function setHeaderColour() {
if ($(window).scrollTop() < 500) {
$('#header').css("background-color", "transparent");
}
else{
$('#header').css("background-color", "black");
}
});
This is because the changes that you make on the client are not stored after a refresh, and the page is back to how it was before. This will make sure that after the refresh you set the colour correctly
As per the comment by #Quantiastical, this is probably better code, as it will cover more events and keeps your function in one place...
$(function(){
$(window).on('load scroll resize orientationchange', function () {
if ($(window).scrollTop() < 500) {
$('#header').css("background-color", "transparent");
}
else{
$('#header').css("background-color", "black");
}
});
});
Well, i found my solution, which is the best. Simply change the background color of the header in css to transparent, so... when the page loads itself, the header has no appearance, when i start scrolling, the event-handler starts and jQuery do its job :) easy as a pie
#header {
background-color: transparent;
height: 75px;
width: 100%;
top:0px;
position: fixed;
z-index: 10;
}
Related
I have a navbar on my website that is too wide for all buttons to display on mobiles devices. So I want to hide when the offset of the navigation buttons from the viewport is less than 150px (a drop down will take it's place). If there is more than 150px offset, then the navbar needs to be displayed.
I have made a Fiddle that shows what I want (resize the window). It correctly hides the navbar from view, but it won't make it appear again if there offset is greater than 150.
I know this happens because the element gets width "auto" and so the condition cannot be checked, but I don't know a workaround for this.
How can I fix this issue? Thanks.
HTML
<div>
<div class="container">
<div class="item">Some</div>
<div class="item">Example</div>
<div class="item">Text</div>
</div>
</div>
CSS
div {
background: red;
text-align: center;
}
.container {
display: inline-block;
background: green;
}
.item {
display: inline-block;
background: green;
}
JS
$(window).on('resize', function(){
var offset = $('.container').offset();
if (offset.left < 150) {
$('.container').hide();
} else {
$('.container').show();
}
}).resize();
The reason this is happening is that once you hide something, it is no longer rendered and so it does not know the .offset() of the container.
Maybe try css "visibility" instead?
See: http://jsfiddle.net/hnwacrzq/5/
$(window).on('resize', function(){
var offset = $('.container').offset();
console.log(offset);
if (offset.left < 150) {
$('.container').css("visibility", "hidden");
} else {
$('.container').css("visibility", "visible");
}
}).resize();
I need the contents of an iframe which has height of 100px(displays only part of iframe) to expand like an animation on read more button click,and fill up the entire screen(expands in all directions), and on clicking close button positioned on top of it, it needs to animate and shrink to it original size.
I found a fiddle that dooes something similar
http://jsfiddle.net/FP2DZ/.
But my issue is that my div cannot be absolutely positioned as I have contents underneath that and that gets affected if I make this one absolutely positioned.
Absolutely positioning rest of the contents also does not seem to me like a good solution
Code
<html>
<head>
<script type="text/javascript">
var isFullscreen = false;
function fullscreen(){
//var d = document.getElementById('controls').style;
var d = {};
var speed = 900;
if(!isFullscreen){ // MAXIMIZATION
/*comment to have smooth transition from centre but loose covering the header*/
//document.getElementById('controls').style.position= "absolute";
d.width = "100%";
d.height="100%";
//d.left="0%";
d.top="0px";
//d.margin="0 0 0 0";
$("#header").animate({
height: 0
}, speed);
$("#controls2").animate(d,speed);
isFullscreen = true;
}else{ // MINIMIZATION
d.width="300px";
d.height="100px";
d.margin="0 auto";
d.position="relative";
//d.top="+=30px";
/* comment to have smooth minimze transition but not be placed below header */
// document.getElementById('controls').style.position= "relative";
$("#header").animate({
height: 30
}, speed);
$("#controls2").animate(d,speed);
isFullscreen = false;
}
}
</script>
<style>
* { margin: 0 }
#controls {
width:100%;
height:100%;
margin: 0 auto;
display:block;
position:absolute;
left: 50%;
z-index:5;
}
#controls2 {
overflow:visible;
width: 300px;
height: 100px;
position: relative;
left: -50%;
background-color: green;
z-index:10;
}
</style>
</head>
<body>
<h1 id="header" align=center> Header (To be covered on Fullscreen) </h1>
<div id='controls' style="" align="center">
<div id='controls2'>
<input type='button' value='fullscreen' onclick='fullscreen();' /><br>
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</body>
Probably the easiest way is to utilize the .animate({}) method in Jquery.
Check out this fiddle: http://jsfiddle.net/cm6v7bca/2/
$("#clickhere").on("click", function () {
$("#myframe").animate({
width: "200px",
height: "200px"
}, 1000);
});
.animate({}) allows you to change the css properties and then smoothly animates the changes onto the element. There are several different parameters you can pass. In the fiddle you'll see that I passed "1000" - that's the duration for the animation to complete in ms.
You can read more about the parameters and the method here: https://api.jquery.com/animate/
That really helps. But then the iframe needs to cover rest of the contents in the page and overlay them, Thats seems possible only if iframe is absolutely positioned. But there is so much dynamic content in the page, I do not want to absolute position the iframe.
http://jsfiddle.net/CvhkM/2833/
this is like what I want just that am not able to absolute position.
JS:
$(this).stop().animate({
left: parseInt(this.style.left)-100,
top: parseInt(this.style.top)-100,
width: parseInt(this.style.width)+200,
height: parseInt(this.style.height)+200
}, 300);
I have a musicplayer fixed on the bottom of the screen and when I scroll 300px he should start to scroll with the rest of the content. All that works fine at the computer but not on mobile. Its dificult to explain this with my skill in english.
I made a jsfiddle but i cant get it to work there. In my project it works. The musicplayer should start to scroll after i scrolled 300px. If it would work it wouldnt work on mobiles correctly. On mobile it is jerky and dont refresh the position when i am scrolling. only when i stop the scrolling it jumps to the correct position. But it is not smooth like on the computer.
<body>
<div id="content">
//long text see jsfiddle
</div>
<div id="musicplayer">
<div id="control">Musicplayer: play/pause</div>
</div>
</body>
my css:
#content {
width: 2000px;
background-color: black;
color: white;
margin-bottom: 300px;
}
#musicplayer {
position: fixed;
bottom: 0px;
width: 100%;
height: 100px;
background-color: #485670;
z-index: 5;
color: white;
}
my javascript:
$(window).scroll(function () {
if ($(window).scrollTop() >300) {
$('#musicplayer').css('bottom', $(window).scrollTop()-300);
}
else if($(window).scrollTop() < 300) {
$('#msuciplayer').css('bottom', 0)
}
});
Edit:
I got an idea. but at the moment i dont have time to try it out anymore. I try it tomorrow.
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>
I am working on javascript scroll. I have following html code
JSFIDDLE
<div class="wrapper">
<div class="red div current"></div>
<div class="blue div"></div>
<div class="green div"></div>
<div class="yellow div"></div>
</div>
In above code I have four div tags red, blue, green and yellow. All of them are position in following css.
html, body {
height: 100%;
}
.wrapper {
overflow: hidden;
height: 100%;
}
.div {
position: relative;
height: 100%;
}
.red {
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
In above html and css the red div tag is the current one which means user is seeing the red div tag on the screen. Now what I am trying to do is when user scroll over window once, then the next div tag i.e. blue will be animated and moved to the top and will become visible to the user whereas the red div tag will be behind the blue one. This same process goes for both green and yellow.
The problem is that when user scroll once then the div tag should animate however my current javascript code is keep reading the scroll and animating the div tags one after another. What I want is when user scroll once then scroll should be disabled until the blue div tag is animated. Then scroll should be enabled. Again when user scroll second time, the scroll should disable until the green div tag completes its animation. Same goes for yellow.
How can I achieve above?
Here is my javascript
$(window).on("scroll", function () {
var next = $('.current').next();
var height = next.outerHeight();
next.animate({top: '-=' + height}, 500, function () {
$(this).prev().removeClass('current');
$(this).addClass('current');
});
});
Please have a look on update JsFiddle
$(window).on("scroll", function () {
var next = $('.current').next();
var height = $('.current').outerHeight();
$('.current').prevAll().each(function(){
height += $(this).outerHeight();
});
next.animate({top: '-=' + height}, 500, function () {
$(this).prev().css('top','');
$(this).prev().toggleClass('current');
$(this).toggleClass('current');
});
});
The main reason your example wasn't working as expected is because you were relatively positioning the divs, and not moving them to the correct spot.
Working JSFiddle:
http://jsfiddle.net/seanjohnson08/rVVuc/6/
.wrapper {
overflow: hidden;
height: 100%;
position: relative;
}
.div {
position: absolute;
height: 100%;
width: 100%;
top: 100%;
}
.current{
top: 0;
}
If you are looking for a way to limit the amount of scroll events fired, try throttling: http://benalman.com/projects/jquery-throttle-debounce-plugin/. My solution doesn't require this, because no matter how many times it is firing the scroll event, it only ever tells jquery to animate to top:0, there's no chance of it animating past that.