This is js and there is 4 articles should appear one at a time when I scroll down, but it doesn't work after aticle no.2. what did I wrong?
function scrollAppear(){
var main = document.querySelector("main");
var art = main.querySelectorAll("article");
var artPos1 = art[0].getBoundingClientRect().top;
var artPos2 = art[1].getBoundingClientRect().top;
var artPos3 = art[2].getBoundingClientRect().top;
var artPos4 = art[3].getBoundingClientRect().top;
var artPos5 = art[4].getBoundingClientRect().top;
var screenPos = window.innerHeight /1.3;
if (artPos1>600 && artPos1<700) {
art[0].classList.add('appear');
}
else if (artPos2<500) {
art[1].classList.add('appear');
}
else if (artPos3<800) {
art[2].classList.add('appear');
}
else if (artPos4<600) {
art[3].classList.add('appear');
}
else if (artPos5<600) {
art[4].classList.add('appear');
}
}
window.addEventListener('scroll',scrollAppear);
If they all need to appear at the same spot, shouldn't the same condition work for each?
if (artPos1>600 && artPos1<700) {
art[0].classList.add('appear');
}
else if (artPos2>600 && artPos2<700) {
art[1].classList.add('appear');
}
else if (artPos3>600 && artPos3<700) {
art[2].classList.add('appear');
}
else if (artPos4>600 && artPos4<700) {
art[3].classList.add('appear');
}
else if (artPos5>600 && artPos5<700) {
art[4].classList.add('appear');
}
Consider the following jQuery example.
function scrollAppear() {
var main = $("#main");
var art = $("article");
var screenPos = $(window).scrollTop();
art.each(function(i, el) {
if (screenPos >= $(el).css("top").slice(0, -2) - 120) {
$(el).fadeIn(100).addClass("appear");
}
});
}
window.addEventListener('scroll', scrollAppear);
#main {
position: relative;
height: 2000px;
}
article {
width: 100%;
height: 100px;
position: absolute;
display: none;
}
.red {
background: #F00;
top: 600px;
}
.orange {
background: #F60;
top: 700px;
}
.yellow {
background: #FF0;
top: 800px;
}
.green {
background: #0F0;
top: 900px;
}
.blue {
background: #00F;
top: 1000px;
}
.purple {
background: #F0F;
top: 1100px;
}
.appear {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<article class="red">
</article>
<article class="orange">
</article>
<article class="yellow">
</article>
<article class="green">
</article>
<article class="blue">
</article>
<article class="purple">
</article>
</div>
You can use .scrollTop():
Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.
https://api.jquery.com/scrolltop/
Use .each() to iterate over each element and make it appear if scrolling has crossed the proper threshold on the screen.
Related
I want to show a picture, and some text. When user hovers on text, I want picture to show some other picture. I have other pictures and when user hovers on text I want the changed picture to be the currently visible picture on the viewport.
I have a div on the page, and I want another div to hover on top of the first. I got it working, but it breaks on scroll. I want the position: absolute style to stay and want to transform using translate. The reason I need to compute the bounds and translate, is the .onpage div changes so where I have to show it changes.
let $onpage = document.getElementById('onpage');
let $onhover = document.getElementById('onhover');
let $triggers = document.querySelectorAll('.trigger');
function fTranslate(pos) {
return el => {
el.style.transform = `translate(${pos[0]}px,${pos[1]}px)`;
};
}
function show() {
let bounds = $onpage.getBoundingClientRect();
let pos = [bounds.left, bounds.top];
fTranslate(pos)($onhover);
}
$triggers.forEach(_ => {
_.addEventListener('mouseover', _ => {
show();
});
});
.on-hover {
position: absolute;
top: 0;
left: 0;
}
.on-page {
width: 50vmin;
height: 50vmin;
background: red;
}
.on-hover {
width: 40vmin;
height: 40vmin;
background: #ccc;
}
.content {
height: 10000px;
}
#trigger1 {
margin-top: 10px;
}
#trigger2 {
margin-top: 100px;
}
<div class="wrap">
<div id='onpage' class="on-page"></div>
<span id="trigger1" class="trigger">Hover 1</span>
<p>Some content
<span id="trigger2" class="trigger">Hover 2</span>
</p>
<div id='onhover' class="on-hover"></div>
<div class="content"></div>
</div>
here you go you just had to calculate the scroll offset of the window
let $onpage = document.getElementById('onpage');
let $onhover = document.getElementById('onhover');
function fTranslate(pos) {
return el => {
el.style.transform = `translate(${pos[0]}px,${pos[1]}px)`;
};
}
let bounds = $onpage.getBoundingClientRect();
let pos = [bounds.left, bounds.top];
fTranslate(pos)($onhover);
document.addEventListener('scroll', () => {
let bounds = $onpage.getBoundingClientRect();
const scrollLeft =
window.pageXOffset || document.documentElement.scrollLeft;
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const offsetLeft = bounds.left + scrollLeft;
const offsetTop = bounds.top + scrollTop;
let pos = [offsetLeft, offsetTop];
fTranslate(pos)($onhover);
});
.on-hover {
position: absolute;
top: 0;
left: 0;
}
.on-page {
width: 50vmin;
height: 50vmin;
background: red;
}
.on-hover {
width: 40vmin;
height: 40vmin;
background: #ccc;
}
.content {
height: 10000px;
}
<div class="wrap">
<div id='onpage' class="on-page"></div>
<div id='onhover' class="on-hover"></div>
<div class="content"></div>
</div>
Please let me know if I misunderstood. If you are looking to get the grey square to remain fixed, you can change the values in your translate to be negative to give you a positive offset.
let $onpage = document.getElementById('onpage');
let $onhover = document.getElementById('onhover');
function fTranslate(pos) {
return el => {
el.style.transform = `translate(${-pos[0]}px,${-pos[1]}px)`;
};
}
let bounds = $onpage.getBoundingClientRect();
let pos = [bounds.left, bounds.top];
fTranslate(pos)($onhover);
document.addEventListener('scroll', () => {
let bounds = $onpage.getBoundingClientRect();
let pos = [bounds.left, bounds.top];
fTranslate(pos)($onhover);
});
.on-hover {
position: absolute;
top: 0;
left: 0;
}
.on-page {
width: 50vmin;
height: 50vmin;
background: red;
}
.on-hover {
width: 40vmin;
height: 40vmin;
background: #ccc;
}
.content {
height: 10000px;
}
<div class="wrap">
<div id='onpage' class="on-page"></div>
<div id='onhover' class="on-hover"></div>
<div class="content"></div>
</div>
I have a website with a fixed header, on the home page the header contains additional content when you are at the top of the page, but I want to hide this content and have a reduced header as they scroll down the page.
So on the initial scroll i want to hide the additional header content and animate the margin of the content below but keep it so that the top of the content still shows underneath it and then scroll from normal from there.
The snippet below should show what I mean better:
var head_height = $('#header').outerHeight(true);
$('#page_content').css('margin-top', (head_height)+'px');
if($('#extra_header_content').length != 0){
$('#header').addClass('home');
var main_head_height = $("#main_header_content").outerHeight(true);
var extra_head_height = $('#header').outerHeight(true);
$(document).on("scroll", function(){
if($(document).scrollTop() >= main_head_height){
$("#extra_header_content").slideUp("slow");
$('#page_content').css('margin-top', (main_head_height)+'px');
$('#header').removeClass('home');
}else{
$("#extra_header_content").slideDown("slow");
$('#page_content').css('margin-top', (extra_head_height)+'px');
$('#header').addClass('home');
}
});
}else{
$('#header').removeClass('home');
}
div{padding:0px;margin:0px;}
#header{background-color:#d33;position:fixed;top:0px;width:100%;}
.home{background-color:#3d3 !important;}
#main_header_content{height:50px;width:100%;}
#extra_header_content{height:50px;width:100%;}
#page_content{background-color:#33d;height:5000px;width:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<div id="main_header_content">Main header</div>
<div id="extra_header_content">Extra Header</div>
</div>
<div id="page_content">This should still be visible when header initially reduces</div>
You need to change in your JS code. Margin you are reducing when the page start scrolling need to adjust by padding. So you can try this:
var head_height = $('#header').outerHeight(true);
$('#page_content').css('margin-top', (head_height)+'px');
if($('#extra_header_content').length != 0){
$('#header').addClass('home');
var main_head_height = $("#main_header_content").outerHeight(true);
var extra_head_height = $('#header').outerHeight(true);
$(document).on("scroll", function(){
if($(document).scrollTop() >= main_head_height){
$("#extra_header_content").slideUp("slow");
// $('#page_content').css('margin-top', (main_head_height)+'px');
$('#page_content').css(
{'margin-top': (main_head_height)+'px', 'padding-top': (main_head_height)+'px'}
);
$('#header').removeClass('home');
}else{
$("#extra_header_content").slideDown("slow");
$('#page_content').css('margin-top', (extra_head_height)+'px');
$('#header').addClass('home');
}
});
}else{
$('#header').removeClass('home');
}
div{padding:0px;margin:0px;}
#header{background-color:#d33;position:fixed;top:0px;width:100%;}
.home{background-color:#3d3 !important;}
#main_header_content{height:50px;width:100%;}
#extra_header_content{height:50px;width:100%;}
#page_content{background-color:#33d;height:5000px;width:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<div id="main_header_content">Main header</div>
<div id="extra_header_content">Extra Header</div>
</div>
<div id="page_content">This should still be visible when header initially reduces</div>
You can do it like this:
var head_height = $('#header').outerHeight(true);
$('#page_content').css('margin-top', (head_height)+'px');
if($('#extra_header_content').length != 0){
$('#header').addClass('home');
var main_head_height = $("#main_header_content").outerHeight(true);
var extra_head_height = $('#extra_header_content').outerHeight(true);
$(document).on("scroll", function() {
const scrollTop = $(document).scrollTop();
if (scrollTop >= head_height) {
$("#extra_header_content").css('height', 0);
$('#page_content').css('margin-top', main_head_height);
$('#header').removeClass('home');
} else if (scrollTop > 0) {
$("#extra_header_content").css('height', extra_head_height - scrollTop);
$('#page_content').css('margin-top', head_height);
$('#header').removeClass('home');
} else {
$("#extra_header_content").css('height', extra_head_height);
$('#page_content').css('margin-top', head_height);
$('#header').addClass('home');
}
});
}else{
$('#header').removeClass('home');
}
div{padding:0px;margin:0px;}
#header{background-color:#d33;position:fixed;top:0px;width:100%;}
.home{background-color:#3d3 !important;}
#main_header_content{height:100px;width:100%;}
#extra_header_content{height:100px;width:100%; overflow: hidden;}
#page_content{background-color:#33d;height:500px;width:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<div id="main_header_content">Main header</div>
<div id="extra_header_content">Extra Header</div>
</div>
<div id="page_content">This should still be visible when header initially reduces</div>
I can offer you a different approach without JavaScript
body,html{
padding:0;
margin:0;
}
#main-header{
position:fixed;
top:0;
left:0;
right:0;
height: 50px;
background: green;
z-index:3;
}
#extra-header{
position:fixed;
top:50px;
left:0;
right:0;
height: 50px;
background: lime;
z-index: 0;
}
#content{
margin-top:100px;
height:2000px;
position:relative;
z-index:1;
background:blue;
}
#content>div{
height:200px;
background: #efefef;
}
#content>div:nth-of-type(2n){
background: red;
}
<div id="main-header">
Main
</div>
<div id="extra-header">
Extra
</div>
<div id="content">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
This could be a solution if you will use position sticky and not fixed, but this a bit jerky, So I will post one more solution here with smooth animation
var head_height = $('#header').outerHeight(true);
//$('#page_content').css('padding-top', (head_height)+'px');
if ($('#extra_header_content').length != 0) {
$('#header').addClass('home');
var main_head_height = $("#main_header_content").outerHeight(true);
var extra_head_height = $('#header').outerHeight(true);
$(document).on("scroll", function() {
if ($(document).scrollTop() >= main_head_height) {
$('#page_content').css('padding-top', (main_head_height) + 'px');
$("#extra_header_content").slideUp("slow");
//$('.page_content_wrapper').addClass('scrolled');
//$('.page_content_wrapper').css('top', (main_head_height)+'px');
$('#header').removeClass('home');
} else {
$("#extra_header_content").slideDown("slow");
$('#page_content').css('padding-top', 0);
//$('.page_content_wrapper').css('top', 0);
//$('#header').addClass('home');
}
});
} else {
$('#header').removeClass('home');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
padding: 0px;
margin: 0px;
}
#header {
background-color: #d33;
position: sticky;
top: 0px;
width: 100%;
z-index: 9;
}
.home {
background-color: #3d3 !important;
}
#main_header_content {
height: 50px;
width: 100%;
}
#extra_header_content {
height: 50px;
width: 100%;
}
#page_content {
background-color: #33d;
height: 5000px;
width: 100%;
}
.page_content_wrapper {
position: relative;
top: 0px;
}
#page_content .page_content_wrapper {
transition: top 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<div id="main_header_content">Main header</div>
<div id="extra_header_content">Extra Header</div>
</div>
<div id="page_content">
<div class="page_content_wrapper">This should still be visible when header initially reduces</div>
</div>
<span class="hamBurger"></span>
Hi I have a question regarding the issue as title.
There is Page 1 with jQuery controlling to show the div, section 1 and section 2, as below.
$('.section2,.click1').fadeOut(0);
$('.click2').on('click', function() {
$(this).fadeOut(0);
$('.section1').fadeOut();
$('.section2, .click1').fadeIn();
});
$('.click1').on('click', function() {
$(this).fadeOut(0);
$('.section2').fadeOut();
$('.section1, .click2').fadeIn();
});
a {
display:block;
}
.section-wrapper {
position: relative;
width:400px;
height: 140px;
}
.section-box {
width: 100%;
height: 100%;
}
.section1 {
background: red;
}
.section2 {
position: absolute;
top: 0;
left: 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="click2">Click to section2.</a>
<a class="click1">Click to section1.</a>
<div class="section-wrapper">
<div class="section-box section1">
I am section 1, default section.
</div>
<div class="section-box section2" id="Section2">
I am section 2.
</div>
</div>
However, when I am at Page 2, there's a button need to link me to the section 2.
Go to Page 1 Section 2
How can I call the jquery function to show the section 2 and hide the section 1?
This is more generic
$(function() {
$('.click').on('click', function() {
let sectionNumber = $(this).data("section");
$(".click").show();
$(this).fadeOut(0);
$('.section-box').not(".section"+sectionNumber).fadeOut();
$('.section'+sectionNumber).fadeIn()
});
let hash = "#section2" // change to location.hash when happy
let section = hash ? hash.substring(1).replace("scrolldown&","") : "section1";
if (hash) {
let sectionNumber = hash.replace(/\D+/,"");
$("[data-section="+sectionNumber+"]").click()
}
});
a {
display: block;
}
.section-wrapper {
position: relative;
width: 400px;
height: 140px;
}
.section-box {
width: 100%;
height: 100%;
}
.section1 {
background: red;
}
.section2 {
position: absolute;
top: 0;
left: 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="click" data-section="2">Click to section 2.</a>
<a class="click" data-section="1">Click to section 1.</a>
<div class="section-wrapper">
<div class="section-box section1">
I am section 1, default section.
</div>
<div class="section-box section2" id="Section2">
I am section 2.
</div>
</div>
You could check for hash tag in page url and show/hide the element.
Edited
$(document).ready(function(){
if(window.location.hash) {
var hashVal = window.location.hash.substring(1);
if(hashVal == "Section2"){
var divId = "#"+hashVal; //id of the section 2 element
$('.section1').fadeOut();
$('.section2, .click1').fadeIn();
var pos = $(divId).offset().top; //top position relative to the document
$('body, html').animate({scrollTop: pos});
}
} else {
// No hash value
}
});
i'm trying to develop a game using html, css and js. At the moment I'm focusing on manipulating DOM elements without using the canvas tag. My idea is to create a pseudo graphical programming language, similar to the Blockly environment. So far I have inserted 3 clickable elements inside #toolbox that create their copies in #workspace.
Now, I am trying to assign functions to the elements present in #workspace, which once pressed the Run button are executed in order of appearance, so as to create a queue of commands that is able to move the pink square inside #output_section.
Therefore I cannot understand how to write the function that is able to verify the presence of the elements and then be able to perform the different functions assigned to these elements.
Any ideas? :D
I'm using Jquery 3.3.1
function addRed() {
var redWorkspace = document.createElement("DIV");
redWorkspace.className = "remove-block block red";
document.getElementById("workspace").appendChild(redWorkspace);
};
function addBlue() {
var blueWorkspace = document.createElement("DIV");
blueWorkspace.className = "remove-block block blue";
document.getElementById("workspace").appendChild(blueWorkspace);
};
function addGreen() {
var greenWorkspace = document.createElement("DIV");
greenWorkspace.className = "remove-block block green";
document.getElementById("workspace").appendChild(greenWorkspace);
};
$("#clear_workspace").click(function () {
$("#workspace").empty();
});
$(document).on("click", ".remove-block", function () {
$(this).closest("div").remove();
});
html,
body {
margin: 0;
padding: 0;
}
#workspace {
display: flex;
height: 100px;
padding: 10px;
background: black;
}
#toolbox {
display: flex;
padding: 10px;
width: 300px;
}
#output_section {
height: 500px;
width: 500px;
border: solid black;
margin: 10px;
position: relative;
}
#moving_square {
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
background: pink;
}
.block {
height: 100px;
width: 100px;
}
.red {
background: red;
}
.blue {
background: cyan;
}
.green {
background: green;
}
.grey {
background: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div id="workspace"></div>
<div id="workspace-menu">
<button id="run_workspace">Run</button>
<button id="clear_workspace">Clear</button>
</div>
<div id="toolbox" class="grey">
<div onclick="addRed()" class="block red">Left</div>
<div onclick="addBlue()" class="block blue">Up</div>
<div onclick="addGreen()" class="block green">Right</div>
</div>
<div id="output_section">
<div id="moving_square"></div>
</div>
</body>
</html>
Completely untested but run button does something along the lines of:
$("#run_workspace").click(function() {
$("#workspace .block").each(function(elem) {
if (elem.hasClass("red")) {
moveObjectLeft();
} else if (elem.hasClass("green")) {
moveObjectRight();
} else if (elem.hasClass("blue")) {
moveObjectUp();
}
});
});
Commonly, it's a good idea to store all required information in arrays and objects, and use HTML only to display your data.
Also, if you are already using jQuery - use it for all 100%)
Made some improvements:
let mobs = {
pinky: {
node: $('#moving_square'),
coors: { top: 400, left: 400 },
step: 30,
moveQueue: [],
// moveTimeout ???
},
}; // storing here all created objects, that must move.
/* Each [moveQueue] array will store the chain of moves, like ["up", "up", "left"]
You can take each "key-word" of move, and get required function buy that key,
from the 'move' object */
let move = { // Think about how to simlify this object and functions. It's possible!)
left: function (obj) {
let left = obj.coors.left = (obj.coors.left - obj.step);
obj.node.css('left', left + 'px');
},
up: function (obj) {
let top = obj.coors.top = (obj.coors.top - obj.step);
obj.node.css('top', top + 'px');
},
right: function (obj) {
let left = obj.coors.left = (obj.coors.left + obj.step);
obj.node.css('left', left + 'px');
}
};
let stepTimeout = 1000;
let running = false;
let timeouts = {}; // store all running timeouts here,
// and clear everything with for( key in obj ) loop, if required
$('#toolbox .block').on('click', function () {
let color = $(this).attr('data-color');
let workBlock = '<div class="remove-block block ' + color + '"></div>';
$('#workspace').append(workBlock);
mobs.pinky.moveQueue.push( $(this).text().toLowerCase() ); // .attr('data-direction');
// instead of pinky - any other currently selected object
// $(this).text().toLowerCase() — must be "left", "up", "right"
});
$('#run_workspace').on('click', function () {
running = true;
runCode();
function runCode() {
for (let obj in mobs) { // mobile objects may be multiple
// Inside the loop, obj == mobs each key name. Here it's == "pinky"
let i = 0;
let pinky = mobs[obj];
localRun();
function localRun() {
let direction = pinky.moveQueue[i]; // getting direction key by array index.
move[direction](pinky); // calling the required function from storage.
if (pinky.moveQueue[++i] && running ) {
// self-calling again, if moveQueue has next element.
// At the same time increasing i by +1 ( ++i )
timeouts[obj] = setTimeout(localRun, stepTimeout);
}
}
}
}
});
$("#clear_workspace").click(function () {
$("#workspace").empty();
});
$('#workspace').on("click", ".remove-block", function () {
$(this).closest("div").remove();
});
html,
body {
margin: 0;
padding: 0;
}
#workspace {
display: flex;
height: 100px;
padding: 10px;
background: black;
}
#toolbox {
display: flex;
padding: 10px;
width: 300px;
}
#output_section {
height: 500px;
width: 500px;
border: solid black;
margin: 10px;
position: relative;
}
#moving_square {
position: absolute;
top: 400px;
left: 400px;
width: 100px;
height: 100px;
background: pink;
}
.block {
height: 100px;
width: 100px;
}
.red {
background: red;
}
.blue {
background: cyan;
}
.green {
background: green;
}
.grey {
background: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="workspace"></div>
<div id="workspace-menu">
<button id="run_workspace">Run</button>
<button id="clear_workspace">Clear</button>
</div>
<div id="toolbox" class="grey">
<div data-color="red" class="block red">Left</div>
<div data-color="blue" class="block blue">Up</div>
<div data-color="green" class="block green">Right</div>
</div>
<div id="output_section">
<div id="moving_square"></div>
</div>
But... jQuery was used only for clicks... Translation to JS:
let mobs = {
pinky: {
node: document.getElementById('moving_square'),
coors: { top: 400, left: 400 },
step: 30,
moveQueue: [],
},
};
let move = {
left: function (obj) {
let left = obj.coors.left = (obj.coors.left - obj.step);
obj.node.style.left = left + 'px';
},
up: function (obj) {
let top = obj.coors.top = (obj.coors.top - obj.step);
obj.node.style.top = top + 'px';
},
right: function (obj) {
let left = obj.coors.left = (obj.coors.left + obj.step);
obj.node.style.left = left + 'px';
}
};
let stepTimeout = 1000;
let running = false;
let timeouts = {};
let blocks = document.querySelectorAll('#toolbox .block');
let workSpace = document.getElementById('workspace');
blocks.forEach(function(block){
block.addEventListener('click', function(){
let color = this.dataset.color;
let workBlock = '<div class="remove-block block ' + color + '"></div>';
workSpace.insertAdjacentHTML('beforeend', workBlock);
mobs.pinky.moveQueue.push( this.textContent.toLowerCase() );
});
});
document.getElementById('run_workspace').addEventListener('click', function () {
running = true;
runCode();
function runCode() {
for (let obj in mobs) { // mobile objects may be multiple
// Inside the loop, obj == mobs each key name. Here it's == "pinky"
let i = 0;
let pinky = mobs[obj];
localRun();
function localRun() {
let direction = pinky.moveQueue[i]; // getting direction key by array index.
move[direction](pinky); // calling the required function from storage.
if (pinky.moveQueue[++i] && running ) {
// self-calling again, if moveQueue has next element.
// At the same time increasing i by +1 ( ++i )
timeouts[obj] = setTimeout(localRun, stepTimeout);
}
}
}
}
});
document.getElementById("clear_workspace").addEventListener('click', function () {
workSpace.textContent = "";
});
workSpace.addEventListener('click', function (e) {
if( e.target.classList.contains('remove-block') ){
e.target.remove();
}
});
html,
body {
margin: 0;
padding: 0;
}
#workspace {
display: flex;
height: 100px;
padding: 10px;
background: black;
}
#toolbox {
display: flex;
padding: 10px;
width: 300px;
}
#output_section {
height: 500px;
width: 500px;
border: solid black;
margin: 10px;
position: relative;
}
#moving_square {
position: absolute;
top: 400px;
left: 400px;
width: 100px;
height: 100px;
background: pink;
}
.block {
height: 100px;
width: 100px;
}
.red {
background: red;
}
.blue {
background: cyan;
}
.green {
background: green;
}
.grey {
background: #ccc;
}
<div id="workspace"></div>
<div id="workspace-menu">
<button id="run_workspace">Run</button>
<button id="clear_workspace">Clear</button>
</div>
<div id="toolbox" class="grey">
<div data-color="red" class="block red">Left</div>
<div data-color="blue" class="block blue">Up</div>
<div data-color="green" class="block green">Right</div>
</div>
<div id="output_section">
<div id="moving_square"></div>
</div>
How can i resize a logo( es width: 100px ) in a header on mouse scrolling?
$('.logo').scroll(function() {
$(this).width(100);
$(this).off(); //removes the handler so that it only resizes once...
})
.header {
background-color: black;
}
.logo {
height:100px;
width: 100%;
background-image: url("http://unika.myarmah.it/skin/frontend/sns_simo/default/images/logo.png");
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="logo"></div>
</div>
Just use javascript:
Why? - Because its just as short as using jQuery.
Update #1 -
after seeing the comments to the previous answer from the author, I have adjusted my example to include animation and reset when at the top of the page. Again - just use javascript, and for better performance benefits use CSS classes so that all paints are done in one cycle.
Update #1 jsfiddle - https://jsfiddle.net/113dn29z/16/
var logo = document.querySelector('.logo');
var handleResize = function(e) {
if (document.body.scrollTop === 0) {
logo.classList.remove("resize");
} else {
logo.classList.add("resize");
}
};
document.addEventListener('scroll', handleResize);
<div class="header">
<div class="logo">
</div>
</div>
body {
height: 9999px;
overflow: auto;
}
.header {
background-color: black;
}
.logo {
margin-top: 200px;
height:100px;
width: 100%;
background-color: red;
background-repeat: no-repeat;
transition: width 0.2s ease;
}
.logo.resize {
width: 100px;
}
old jsFiddle example - https://jsfiddle.net/113dn29z/10/
var logoHasResized = false;
$(document).on('scroll', function (e) {
if (window.scrollY == 0) {
$('.logo').animate({'width': '100%'}, 250);
logoHasResized = false;
} else if (logoHasResized == false) {
$('.logo').animate({'width': 100}, 250);
logoHasResized = true;
}
});
edit: Since you want it to go back when you scroll to the top of the page, i've added in a check to see if the animation has happened, as you don't want it to fire constantly.