I am building some test split screen layouts and would like to show / hide content based on scroll position. As I have built layouts in VH set scroll position in VH too? (although im switching text I would like to learn how to show and hide by class/id so I can switch other content in the future.
Here is the codepen
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y < 0) {
$(".test1").hide();
} else {
$(".test1").show();
}
});
$(function() {
var element =$("#it");
var element1 =$("#it1");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
element.hide();
element1.show();
} else {
element.show();
element1.hide();
}
});
})
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<body style="height :2000px;">
<div id="it" style="background-color:red;height :1000px;">TEST</div>
<div id="it" style="background-color:yellow;height :1000px;">TEST2</div>
</body>
</html>
Related
i have a image ,i want whenever cursor try to touch the image it moves away randomly from the cursor i tried using jquery but it not working , see this link http://jsfiddle.net/emreerkan/atNva/
my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
</head>
<body>
<img src="https://images.pexels.com/photos/569986/pexels-photo-569986.jpeg?auto=compress&cs=tinysrgb&w=600" width="100" height="100" alt="Grey Square" class="som" />
</body>
<!-- <script src="jquery-3.6.1.min.js"></script> -->
<script>
alert('hi')
jQuery(function($) {
$('.som').mouseover(function() {
var dWidth = $(document).width() - 100, // 100 = image width
dHeight = $(document).height() - 100, // 100 = image height
nextX = Math.floor(Math.random() * dWidth),
nextY = Math.floor(Math.random() * dHeight);
$(this).animate({ left: nextX + 'px', top: nextY + 'px' });
});
});
</script>
</html>
my style.css
body { position: relative; }
#img { position: relative; }
in css
use the pointer .som instead of #img
because in your jQuey code you used top and left,these properties will not work unless the position property is set first, in this case its position:relative;
(static is the default value of position )
everything else looks good
Hi i tried to make the div smaller wqhen scrolling. however i found some article that the div is small then when scroll it make bigger. i wanted the opposite. when run the image is 100% then when scroll it will be smaller. can someone help me please? i am new to this
This is the code:
https://codesandbox.io/s/sharp-lewin-to1o2b?file=/index.html
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div id="animatedDiv"></div>
</body>
</html>
<style>
#animatedDiv {
background: #dc143c;
min-height: 9000px;
min-width: 20%;
position: absolute;
}
</style>
<script>
var aDiv = document.getElementById("animatedDiv");
function changeWidth() {
var scrollVal = window.pageYOffset;
var scrollSlow = scrollVal / 4;
//Changing CSS Width
aDiv.style.width = Math.min(Math.max(scrollSlow, 20), 100) + "%";
}
window.addEventListener(
"scroll",
function () {
requestAnimationFrame(changeWidth);
},
false
);
</script>
I did it with my math logic
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div id="animatedDiv"></div>
</body>
</html>
<style>
#animatedDiv {
background: #dc143c;
min-height: 9000px;
width: 100%;
position: absolute;
}
</style>
<script>
var aDiv = document.getElementById("animatedDiv");
function changeWidth() {
var scrollVal = window.pageYOffset;
//Changing CSS Width
/* This lags if you scroll fast.. aDiv.style.width = (100 - (scrollVal*100/800)) + "%";
I just tried it out, so instead use the code down above, 800 to 1500 doesn't matter, I just increased time of animation
*/
//NOTE this line checks if PERCENT <= 10 then sets width to 10%
( (100 - (scrollVal*100/1500)) ) <= 10 ? aDiv.style.width = "10%" : aDiv.style.width = (100 - (scrollVal*100/1500)) + "%";
}
window.addEventListener(
"scroll",
function () {
requestAnimationFrame(changeWidth);
},
false
);
</script>
I tried to export variables to another module, but error occured.
Uncaught SyntaxError: Unexpected token 'export'.
File structure:
./css:
select.css style.css
./html:
index.html make.html select.html
./javascript:
make.js script.js select.js
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Search Maker</title>
</head>
<body>
<div class="title-h1">
<h1>
Simple Word Search maker
</h1>
</div>
<div class="start">
<button id="start-button">Start ➝</button>
</div>
<script src="/javascript/script.js"></script>
<link rel="stylesheet" href="/css/style.css">
</body>
</html>
script.js
const startButton = document.querySelector("#start-button");
const activeclass = "active";
function handlestartBtnMouseEnter() {
startButton.classList.add(activeclass);
}
function handlestartBtnMouseLeave() {
startButton.classList.remove(activeclass);
}
function handleStartBtnClick() {
window.location.href = "/html/select.html";
}
startButton.addEventListener("mouseenter", handlestartBtnMouseEnter);
startButton.addEventListener("mouseleave", handlestartBtnMouseLeave);
startButton.addEventListener("click", handleStartBtnClick);
select.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Making Basic template</title>
</head>
<body>
<h1>
Basic template:
</h1>
<div class="settings">
width: <input type="text" id="width">
<br>
height: <input type="text" id="height">
</div>
<button id= "make-button">Make</button>
<script type="module" src="/javascript/select.js"></script>
</body>
</html>
select.js:
let width_textbox = document.getElementById("width");
let height_textbox = document.getElementById("height");
let width = null;
let height = null;
const makebutton = document.querySelector("#make-button");
function handleClickMakeBtn() {
width = parseInt(width_textbox.value);
height = parseInt(height_textbox.value);
if (width > 30 || height > 30) {
alert("Width and height cannot longer than 30!");
width_textbox.value = "";
height_textbox.value = "";
} else if (width < 5 || height < 5) {
alert("Width and height cannot shorter than 5!");
width_textbox.value = "";
height_textbox.value = "";
} else if (isNaN(width) || isNaN(height)) {
alert("Width and height must be number!");
width_textbox.value = "";
height_textbox.value = "";
} else if (width == null || height == null) {
alert("You have to enter width and height!");
}
else {
window.location.href = "/html/make.html";
}
export { width, height }
}
makebutton.addEventListener("click", handleClickMakeBtn);
make.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Make word search</title>
</head>
<body>
<script type="module" src="/javascript/make.js"></script>
</body>
</html>
make.js:
import * as settings from "./select.js";
for (i=0; i <= width; i ++) {
document.createElement('input') * settings.width;
console.log(settings.height);
}
I'm very new to web. Sorry if it's just my mistake.
the issue come from function handleClickMakeBtn
you can't export object in function like that
if you want to return value you have to use the keyword return
but like width and height are global variable when you modify it in function it's modify the global variable
You can only export stuff only at the top-level of the file (ie not inside a function).
However you can use window object to access the variable from anywhere.
like this
function handleClickMakeBtn() {
width = parseInt(width_textbox.value);
height = parseInt(height_textbox.value);
window.settings = { width, height }
}
now you can access the object from anywhere.
like window.settings. I don't recommend this way instead you can create a global object inside the module and export that at top level.
I am currently switching a header class based on the scrollTop and wrapping the logic in
if(scroll_start >= 600) {...}
but it doesn't work ideally because obviously the screen resolution changes.
Ideally I would want to do this (in pseudo code)
if (first section (with an id) is scrolled past) {...}
but I'm not sure how to achieve this? Any suggestions?
Thanks
Get the height of the element, then add it to the position of the element from top
var elementPosition = $([element]).position().top + $([element]).height()
$(document).on('scroll', function() {
if($(this).scrollTop() > elementPosition){
// actions
}
})
Here is an example:
window.addEventListener("scroll", function(){
var two = document.getElementById("One");
if (window.scrollY > two.offsetTop + two.offsetHeight){
console.log("You got it!");
}
})
#One{
height:50px;
width:100%;
background-color:lightblue;
}
#Two{
height:1000px;
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="One">Goto: HERE</div>
<div id="SCROLL">HERE:</div>
<div id ="Two"></div>
</body>
</html>
What's the problem I've been having recently with the editor?
I have a span
<span>123456789<span>
I selected 456 regions for segmentation and I want to achieve this effect
<span>123</span>456<span>789</span>
what should I do?
1.Select with mouse
enter image description here
2.Click bold
enter image description here
3.Split effect
enter image description here
I think I found a way! ! !
window.onload = function(){
var oBtn = document.querySelector('#btn');
oBtn.onclick = function(){
var range = getRangeAt();
console.log(range.commonAncestorContainer.parentNode.nodeName);
document.execCommand('RemoveFormat');
range = getRangeAt();
console.log(range.commonAncestorContainer.parentNode.nodeName);
}
}
function getRangeAt(win) {
var _selection, //选取对象
_range //光标对象
;
win = win || window; //获取创建光标的域
//html5得到光标的处理
if (win.getSelection) {
_selection = win.getSelection(); //获取选取对象
//当获取选取中有光标的处理
if (_selection.rangeCount) {
_range = _selection.getRangeAt(0); //返回选区的处理
}
}
//ie系列的处理，ie系列不支持win.getSelection，有自己独特的属性
else {
_selection = win.document.selection; //获取选取对象
_range = _selection.createRange(); //光标对象
}
return _range; //光标的处理
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div contenteditable="true">
<span style="font-weight:bold">Selected part</span>
</div>
<button id="btn">split</button>
</body>
</html>