So HERE is the code. I simple want to change the color of the h1 heading when the scroll is 1000px from top. I would like to use purely javascript for this purpose.Please try and ignore how poorly the code has been written. Any suggestion would be more than welcome. Thank you for you time.
<html> <head> <title> scroll </title>
<!-- CSS !-->
<style> .redbox {
background-color: red;
position: absolute;
top: 10px;
height: 90px;
width: 100px;
} .reveal {
position: fixed;
top:450px;
transition: width 2s;
display: block;
} </style>
</head>
<!-- HTML !-->
<body>
<div class='redbox' id='red'> , </div>
<h1 class='reveal' id='demo'> The comes up on 1000 scroll! </h1>
<h1 style='position: absolute;top: 1900px;'> END </h1>
<!-- JS !-->
<script>
var top = window.pageYOffset || document.documentElement.scrollTop
if (top == 1000) {
document.getElementById('demo').style.color = 'red'}
</script> </body> </html>
You could check the current scroll offset using an event handler:
document.body.addEventListener('scroll', function() {
if(window.scrollY > 499) {
document.getElementById('myDiv').classList.add('appear'); // or whatever...
}
});
Related
Here's what I'm trying to do:
A position:sticky div has a rectangle in it (id=mysquare). After scrolling a bit, the width of mysquare should shrink using jquery's animate. Then, when scrolling back up, mysquare should instantly grow back to its original width.
The problem:
The animation bit works fine. What doesn't work is reverting back to mysquare's original width. When you scroll back up after mysquare shrinks to 100px, it stays the same (when it should theoretically go back to 150px).
var headheight = $(".myheading").height();
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > headheight) {
//if scrolled past myheading
//Gradually change the width of the square to 100px, from 150px
$("#mysquare").animate({
width: "100px",
}, 1500);
}
if ($(this).scrollTop() < headheight) {
//If not scrolled past myheading
//Keep the square big
$("#mysquare").width("150px");
}
})
});
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 10px;
font-size: 20px;
}
#mysquare {
height: 50px;
background-color: #555;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="myheading" style="height: 50px;"></div>
<div class="sticky">Hello
<div id="mysquare" style="width 150px;">
</div>
</div>
<main style="height:500px;"></main>
</body>
</html>
A JSFiddle: https://jsfiddle.net/82n16x07/7/
On a side note, mysquare seems to take up the entire width of the screen when first loaded in. Any help with that would also be appreciated.
after animation you need to remove the element and replace it to have other css applied
var headheight = $(".myheading").height();
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > headheight) {
//if scrolled past myheading
//Gradually change the width of the square to 100px, from 150px
$("#mysquare").animate({
width: "100px",
}, 1500);
}
if ($(this).scrollTop() < headheight) {
var elm = document.getElementById('mysquare');
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
//If not scrolled past myheading
//Keep the square big
$("#mysquare").width("500px");
}
})
});
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 10px;
font-size: 20px;
}
#mysquare {
height: 50px;
background-color: #555;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="myheading" style="height: 50px;"></div>
<div class="sticky">Hello
<div id="mysquare" style="width 150px;">
</div>
</div>
<main style="height:500px;"></main>
</body>
</html>
Your initial width problem is caused by an incorrect style directive, with a missing colon:
<div id="mysquare" style="width 150px;">
should be:
<div id="mysquare" style="width: 150px;">
The main problem is caused by the fact that the animate() function is repeatedly called when the scroll condition is true, and these function calls stack up. If you wait long enough, they clear, and the box is returned to it's normal size.
To fix this, you can add a shrunk flag to determine if the box is shrunk or not, and check this flag to determine whether or not to issue a new animate() call.
var headheight = $(".myheading").height();
var shrunk=false;
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > headheight && !shrunk) {
//if scrolled past myheading
//Gradually change the width of the square back to the size of the new image
shrunk=true;
$("#mysquare").animate({
width: "100px",
}, 1500);
}
if ($(this).scrollTop() < headheight) {
//If not scrolled past myheading
//Keep the square big
shrunk=false;
$("#mysquare").width("150px");
}
})
});
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 10px;
font-size: 20px;
}
#mysquare {
height: 50px;
width:150px;
background-color: #555;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="myheading" style="height: 50px;"></div>
<div class="sticky">Hello
<div id="mysquare" style="width: 150px;">
</div>
</div>
<main style="height:500px;"></main>
</body>
</html>
Just try with this. hope this works for you.
var lastScrollTop = 0;
$(window).scroll(function(event){
var thisScrolltop = $(this).scrollTop();
if (thisScrolltop > lastScrollTop){
// write code here, when down scroll
} else {
// write code here, when up scroll
}
lastScrollTop = thisScrolltop;
});
I have a webpage that uses tubular.js script to show youtube video as a site background. There's a sentence on tubular page:
First, it assumes you have a single wrapper element under the body tag
that envelops all of your website content. It promotes that wrapper to
z-index: 99 and position: relative.
So following that, I wrote a simple html/css code:
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#logocontainer{
position: absolute;
top: 20%;
margin-top: -35px;/* half of #content height*/
left: 0;
width: 100%;
text-align:center;
}
#logo {
margin-left: auto;
margin-right: auto;
height: 75px;
}
</style>
<body>
<div id="wrapper" class="clearfix">
<div id="logocontainer">
<div id="logo">
<img src="img/logo.png"/>
</div>
</div>
</div> <!--wrapper-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
<script type="text/javascript">
$(function() {
var options = {
videoId : '9JXVUP1hyxA',
start : 1
};
$('body').tubular(options);
});
</script>
</body>
</html>
but now, when I run it - I see only youtube video without my logo on top... I know the logo is there, because when I comment out the youtube script I can see it, however I don't see it when the video is present. I tried to add z-index:99 to #logo but that didn't do any magic... Can you help me with that?
EDIT:
As A. Wolff suggested below, I added to my css:
#wrapper{
z-index:99;
position: relative;
}
still though - no good results, video is still on top..
I see in their own Tubular they use this little script...
$('document').ready(function() {
var options = { videoId: 'ab0TSkLe-E0', start: 3 };
$('#wrapper').tubular(options);
// f-UGhWj1xww cool sepia hd
// 49SKbS7Xwf4 beautiful barn sepia
});
Just adding this keeps everything on top.
Use the code in this Fiddle as a sample.
Your must use z-index with position: relative/absolute.
Also your z-index in video must be less than in your blocks.
video {
position: absolute;
z-index: 1;
}
div {
position: relative;
z-index: 2;
}
I'm trying to make the div "button_tray" stick to the top of the page when scrolled by. the whole page looks like this so you can get a better idea of what i'm trying to do: http://tinypic.com/r/n6cnte/8
It seems to be working when I pasted bits of code needed for this to work into jsfiddle: http://jsfiddle.net/5ADzD/641/
So I really have no idea what is it here making it not work.
Appreciate the help.
HTML:
<doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="<?php bloginfo(stylesheet_url)?>"/>
<script type="text/javascript" src="sticky.js"></script>
</head>
<body>
<div id="main_img"></div>
<div id="button_tray">
Sample 1
Sample 2
Sample 3
</div>
<div id="content">
part of CSS:
#button_tray {
width: 100%;
height: 100px;
background-color: #373737;
line-height: 100px;
color: orange;
font-size: 22px;
text-align: center;
}
#button_tray.sticky {
position: fixed;
top: 0px;
}
JS:
var $window = $(window);
$stickyEl = $('#button_tray');
var elTop = $stickyEl.offset().top;
$window.scroll(function() {
var windowTop = $window.scrollTop();
$stickyEl.toggleClass('sticky', windowTop > elTop);
});
Div tags are stacked on each other from top to bottom without CSS.
Probably, there is a syntax error. I believe instead of using #button_tray, try using .button_tray
I am trying to make a background slide show effect. What i have managed to do is to make this slideshow but without any beautifully effect like sliding or other image appearing effect. Can someone help with some advice in creating the effect of sliding or any other more beautiful effects.
Here what I managed to do:
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" src="function.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body >
<div class='bannerbg'>
<div class='slider'></div>
</div>
</body>
</html>
CSS CODE
body{
margin: 0px;
margin-left: 0px;
}
.bannerbg{
background-size: cover;
position: relative;
height: 500px;
}
.bannerbg img{
width: 100%;
}
.slider{
width: 940px;
height: 360px;
background-color: #FFDF00;
position: relative;
margin: 0 auto;
top: -370px;
}
JavaScript CODE
$(document).ready(init)
images=new Array
(
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg"
);
function init(){
$('.bannerbg').prepend("<img id='principala' src='"+images[1]+"' />")
}
function left() // functia data schimba cu locul indexul din array la stinga cu 1 unitate
{
images.push(images.shift());
}
function change(){
p=document.querySelector("#principala");
p.src=images[1];
}
setInterval("left(); change()",1000);
I slide the elements by using the animate function and by setting the css property and animation time in miliseconds for that element, like that:
jQuery( "#slid_img1" ).animate({marginLeft: 0}, 250);
It slides very nicely then.
So, you could adapt your code to use the animate function to make the slide animate.
I'm trying to replicate an example of an jquery plugin that enlarges image from thumbnail at my desktop and the problem is , the image doesn't enlarge from the thumbnail whenever I click on it
Here is the original source of the jquery demo that enlarges image from thumbnail that i'm trying to replicate
How to enlarge image from thumbnail in jQuery?
This is his working demo http://jsbin.com/egevij/3/edit
The problem is in my HTML .Can someone please point where I'm going wrong?
This is my HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="css/forms.css">
<meta charset=utf-8 />
<title>Demo by roXon</title>
</head>
<body>
<div id="jQ_popup_window">
<div id="jQ_popup" class="shadow radius">
<div id="jQ_popup_close"></div>
<script type = "text/javascript" src ="trouble.js"></script>
</div>
</div>
<img src="http://placehold.it/250x150/cf5" data-full="http://placehold.it/860x590/cf5" alt="" />
<img src="http://placehold.it/250x150/fof" data-full="http://placehold.it/860x590/fof" alt="" />
</body>
</html>
forms.css CSS
CSS:
/* === POPUP WINDOW === */
#jQ_popup_window{
background: rgba(0,0,0,0.6);
left: 0;
margin-left: -9000px;
position: absolute;
top: 0;
width: 100%;
z-index:999999;
}
#jQ_popup {
background: #000;
border: 1px solid #BDB9B8;
margin: 30px auto;
padding: 25px;
position: relative;
width: 600px; /* SET HERE DESIRED W .*/
}
#jQ_popup_close {
background:#fff;
cursor: pointer;
height: 28px;
width: 28px;
position: absolute;
z-index:999999;
right: 10px;
top: 10px;
-webkit-border-radius:30px;
border-radius:30px;
border:2px solid #fff;
border-color: rgba(255,255,255,0.2);
}
#jQ_popup_close:hover{
background:#f00;
}
/* #POPUP WINDOW */
jQuery:
// POPUP WINDOW:
var scrT = $(window).scrollTop();
$(window).scroll(function(){
scrT = $(window).scrollTop();
});
// GET and use WINDOW HEIGHT //
$.getDocHeight = function(){
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
// POPUP WINDOW (lightbox for video and other)
// GET WINDOW SCROLLtop OFFSET
$('[data-full]').on('click', function(e){
e.preventDefault();
$('#jQ_popup').css({
top: scrT+15
}).find('img').remove();
$('#jQ_popup_window').height($.getDocHeight).fadeTo(0,0).css({
marginLeft:0
}).fadeTo(600,1);
var imgToLoad = $(this).data('full');
$('<img>', {src:imgToLoad, width:'100%'}).appendTo('#jQ_popup');
});
// close popup
$('#jQ_popup_close, #jQ_popup_window').on('click', function(){
$('#jQ_popup_window').fadeTo(600,0,function(){
$(this).hide();
});
});
$('#jQ_popup').on('click', function(ev){
ev.stopPropagation();
});
// end POPUP WINDOW
The solution to your problem is simply moving the import of the JavaScript file. It should be placed at the end after your two <img> tags.
<img src="http://placehold.it/250x150/cf5" data-full="http://placehold.it/860x590/cf5" alt="" />
<img src="http://placehold.it/250x150/fof" data-full="http://placehold.it/860x590/fof" alt="" />
<script type = "text/javascript" src ="trouble.js"></script>
It's standard practice to load your javascript files either last in the head or last in the body. Putting script tags inside of other html tags such as <div> as you have done is not normal but I've never seen it have ill effects like this before.