Develop Reference

Trigger multiple classes within js funtion

so i found this js somewhere, which is working perfectly fine. But how can i add this funtion to a diffrent class without overwriting it? like i want to use the same funtion but for a diffrent object in my html, so that i can use the same effect again just at a diffrent viewpoint and with a diffrent object on my page.
$(document).scroll(function() {
myID = document.getElementById("advertisement");
var myScrollFunc = function () {
var y = window.scrollY;
if (y >= 550) {
myID.className = "advertisement show"
} else {
myID.className = "advertisement hide"
}
};
window.addEventListener("scroll", myScrollFunc);
});
i tried to just copy paste it and create a new variable but im a js beginner so had no luck with that

You don't need the jQuery scroll event. Only the inner JavaScript one.
Also, use classList.toggle("className", force) instead:
const elAdvertisement = document.querySelector("#advertisement");
const toggleAdvertisement = () => {
elAdvertisement.classList.toggle("hide", scrollY < 550);
};
addEventListener("scroll", toggleAdvertisement); // On scroll
toggleAdvertisement(); // On init
body {
min-height: 1000vh; /* just to force scrollbars */
}
#advertisement {
position: fixed;
top: 0;
}
.hide {
display: none;
}
Scroll down
<div id="advertisement" class="hide">ADVERTISEMENT HERE</div>
If you are using jQuery, here's a code sample with that library:
const $advertisement = $("#advertisement");
const toggleAdvertisement = () => {
$advertisement.toggleClass("hide", scrollY < 550);
};
$(document).on("scroll", toggleAdvertisement); // On scroll
toggleAdvertisement(); // On init
body {
min-height: 1000vh; /* just to force scrollbars */
}
#advertisement {
position: fixed;
top: 0;
}
.hide {
display: none;
}
Scroll down
<div id="advertisement" class="hide">ADVERTISEMENT HERE</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Create alert pop-up with blank background screen [duplicate]

This question already has answers here:
Why don't my alert message and background color change execute simultaneously?
(3 answers)
Closed 3 years ago.
I need to display an alert box and at the same time cover what is on my HTML page. Basically, I'd like to have a blank or white background when my alert pop-up appears. I tried something like below, but doesn't work.
if (something happens) {
changeBackgroundColor();
if (alert("My alert box")){
} else {
//Return to previous page
window.history.go(-1);
}
}
..
....
.....
function changeBackgroundColor() {
document.body.style.backgroundColor = "white";
}

Changing your background color will not hide any of the elements on your page. You will most likely need an overlay, which can be a simple div styled something like this:
.overlay {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:999; /* adjust the z-index as you need it */
background:#fff;
display:none;
}
you can then show the overlay before your alert and hide it afterwards
function toggleOverlay( show ){
document.querySelector('.overlay').style.display = (show === true) ? 'block' : 'none';
}
// ...
toggleOverlay(true);
// Kudos to Kobe for pointing out that the alert is triggered before the repaint
// simple way to solve the problem is a timeout, which will
// make the browser paint the changes before the alert is triggered
setTimeout(function(){
alert('Something');
toggleOverlay(false);
}, 0);
Here is a working jsFiddle: https://jsfiddle.net/UsernamesSuck/cpdrtgb8/2/

The problem is that when alert() is called the rest of the script pauses. A solution is to wrap it in a setTimeout() function to make it async to allow the rest of the code to be executed.
Take a look at the following Fiddle for a possible solution:
https://jsfiddle.net/hckevbtp/

You can create an absolutely positioned div with a z-index greater than all of your content to hide it:
const hide = () => {
var div = document.getElementById('hide')
div.style.display = 'block'
setTimeout(() => {
alert()
div.style.display = 'none'
}, 0)
}
.hide {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background-color: blue;
z-index: 1000;
display: none;
}
<p>Content Content Content</p>
<button onclick="hide()">HIDE</button>
<div id="hide" class="hide"></div>
Since alert is blocking, you can immediately remove the style after the alert, which will take effect after the alert is closed.

you can use the display='none' for the container and call the alert in setTimeout() as follows -
function openAlert() {
document.getElementsByClassName('block')[0].style.display = 'none';
setTimeout(function() {
alert('hello world!');
document.getElementsByClassName('block')[0].style.display = 'block';
}, 100);
}
html -
<body>
<div class='block'>
<button onclick={openAlert()}>hello</button>
</div>
</body>

Try this:
if (something happens) {
changeBackgroundColor();
setTimeout(function() {alert("hey");}, 0)
}
..
....
.....
function changeBackgroundColor() {
document.body.style.opacity= "0";
}

You can use below code:
function showMessage() {
var div = document.getElementById('div');
if(div == null){
div = document.createElement('div');
div.id = "div";
}
div.classList.add('alert')
document.body.appendChild(div)
setTimeout(function() {
alert("alert text");
div.classList.remove('alert');
},0)
}
Style:
.alert {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background-color: white;
}

How to maintain display onmouseover after moving mouse with Javascript

I have three objectives with these pics, hide all but the first. Display all pics, inline with the first, when hovering over the first and continue display when hovering over all pics. Hide the pics once leaving the area with display only when hover over the first again. (I forgot img sources but they are there in the code) To do this consistently I wrote html, css and js code but I can only achieve two never all three, repeatedly w/o refresh. The code:
var tog = document.querySelector('#toggle');
var glide = document.querySelector('#first')
glide.onmouseover = function() {
tog.classList.add('picclass');
}
tog.onmouseout = function() {
tog.classList.remove('picclass');
}
.picclass {
display: flex
}
.pics {
display: none;
}
.picclass > .pics {
display: inline-flex;
}
#first {
display: inline-flex;
}
<div id="toggle">
<img id="first">
<img class="pics">
<img class="pics">
</div>

Okay now i get it.
Here you have a sample that works. If you want to change the delaying time you have to change it in the setTimeout. (Now its 500milli = 0,5 sec)
https://jsfiddle.net/falkedesign/ce1ayo93/21/
var tog = document.querySelector('#toggle');
var glide = document.querySelector('#first')
var isover = false;
mover = function() {
isover = true;
tog.classList.add('picclass');
}
mout = function() {
isover = false;
setTimeout(removefunc,500)
}
removefunc =function(){
if(!isover){
tog.classList.remove('picclass');
}
}
glide.onmouseover = mover;
tog.onmouseout = mout;
and in the html
<img class="pics" src="https://img.fireden.net/v/image/1531/17/1531179205107.png" onmouseover="mover()" onmouseout="mout()">

How to make text appear on scroll in html

Hello, I want a certain text to appear when I scroll past it or when I scroll until the point where the text is. The effect when appearing should be somewhat like the first effect on the top of the website http://namanyayg.com/.
I want the effect in minimal code with pure CSS and JS i.e no jQuery.
I was thinking that maybe I would use something like a display:none property for a span and then when you scroll past it the display becomes block but I dont know how to trigger the effect using javascript.
Any help would be appreciated.

First wrap whatever your text or content that you want to show on scroll, in one div so that you can show hide the div depending upon the scroll. Write two classes for your target div.
Your CSS:
/*Use this class when you want your content to be hidden*/
.BeforeScroll
{
height: 100px; /*Whatever you want*/
width: 100%; /*Whatever you want*/
.
.
display: none;
}
/*Use this class when you want your content to be shown after some scroll*/
.AfterScroll
{
height: 100px; /*Whatever you want*/
width: 100%; /*Whatever you want*/
.
.
display: block;
}
Your HTML:
<!--Set class BeforeScoll to your target div-->
<div id = "divToShowHide" class = "BeforeScroll">Content you want to show hide on scroll</div>
Your Script:
<!--include these script in head section or wherever you want-->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
<script type = "text/javascript">
$(document).ready(function(){
//Take your div into one js variable
var div = $("#divToShowHide");
//Take the current position (vertical position from top) of your div in the variable
var pos = div.position();
//Now when scroll event trigger do following
$(window).scroll(function () {
var windowpos = $(window).scrollTop();
//Now if you scroll more than 100 pixels vertically change the class to AfterScroll
// I am taking 100px scroll, you can take whatever you need
if (windowpos >= (pos.top - 100)) {
div.addClass("AfterScroll");
}
//If scroll is less than 100px, remove the class AfterScroll so that your content will be hidden again
else {
s.removeClass("AfterScroll");
}
//Note: If you want the content should be shown always once you scroll and do not want to hide it again when go to top agian, no need to write the else part
});
});
</script>
Hope it will solve your problem.

I would recommend this plugin
http://johnpolacek.github.io/superscrollorama/
Edit:
I don't know how no one noticed that the solution had to be made without using external libraries like jQuery. However, the solution is extremely easy with basic functionality. Find it here
HTML:
<div id="parent-div">
<div id="child-div">
Psst .. I am here!!
</div>
</div>
CSS:
#parent-div
{
position:relative;
height:3000px;
width:300px;
background-color:red;
}
#child-div
{
color:white;
position:relative;
top:1000px;
width:300px;
display:none;
text-align:center;
}
JS:
var body=document.getElementsByTagName("body")[0];
var parent=document.getElementById("parent-div");
var child=document.getElementById("child-div");
body.onscroll = function(){
//console.log(documenhttps://fiddle.jshell.net/3urv0tp0/#tidyt.getElementById("child-div").style.top)
if(document.documentElement.scrollTop>=child.offsetTop)//Adjust Tolerance as you want
{
child.style.display="block"
}
};

I was looking for this either. Here i was trying to make "show text after scrolling to (number)px with fade effect". I wish it will work as it works for me :) The animation will be playing again if u scroll back to it, idk how to make it just one like in web u showed xd (i will edit if I find out)
window.addEventListener("scroll", function() {showFunction()});
function showFunction() {
if (document.body.scrollTop > 900 || document.documentElement.scrollTop > 900) {
document.getElementById("toptexts2").style.display = "block";
} else {
document.getElementById("toptexts2").style.display = "none";
}
}
.toptexts2 {
animation: fadeEffect 3s; /* fading effect takes 3s */
}
#keyframes fadeEffect { /* from 0 to full opacity */
from {opacity: 0;}
to {opacity: 1;}
}
<div class="toptexts2" id="toptexts2">
<div>Hi!</div>
<div>↓ go down ↓</div>
</div>

I like this:
var doc = document, dE = doc.documentElement, bod = doc.body;
function E(e){
return doc.getElementById(e);
}
function xy(e, d){
if(!d)d = 'Top';
d = 'offset'+d;
var r = e[d];
while(e.offsetParent){
e = e.offsetParent; r += e[d];
}
return r;
}
function x(e){
return xy(e, 'Left');
}
function y(e){
return xy(e);
}
var txt = E('theId'), txtS = txt.style;
onscroll = function(){
var left = dE.scrollLeft || bod.scrollLeft || 0;
var top = dE.scrollTop || bod.scrollTop || 0;
var w = innerWidth || dE.clientWidth || bod.clientWidth;
var h = innerHeight || dE.clientHeight || bod.clientHeight;
if(top > y(txt)-h){
txtS.display = 'none';
}
else{
txtS.display = 'block';
}
}
I left the left stuff in there, just in case, but you can probably remove it.

var div=$("#divtochange");
$(window).scroll(function () {
var windowpos = $(window).scrollTop();
//---check the console to acurately see what the positions you need---
console.log(windowpos);
//---------------------
//Enter the band you want the div to be displayed
if ((windowpos >= 0) && (windowpos <= 114)){
div.addClass("AfterScroll");
}
else{
div.removeClass("AfterScroll");
}

jQuery slide out animation

I am working on a slide out bar for a project I am working on and I am having a hard time getting an animation to work.
My Goal is to have it slide out from left to right not appear from the top like it is now.
Below is my jQuery code as well as my jsfidde
Thanks in advance
George
http://jsfiddle.net/tXye8/
$(document).ready(function(){
var $button = $('#sideoutButton');
var $contain = $('#slideoutContain');
var containWidth = $('#slideoutContain').width();
//Hide the box
$contain.hide();
//Hide or show the container on button click
$button.click(function(){
if ($contain.is(":visible")) {
$contain.hide();
$button.css("left", 0);
}
else {
$contain.show(400, buttonMove());
}
});
function buttonMove(){
$button.css("left", function(value) {
return 0 + containWidth;
});
}
});

If you know how wide it's supposed to be, you can achieve this with CSS:
#mycontainer {
width: 0;
transition: width 400ms ease;
}
#mycontainer.expand {
width: 400px; //or whatever your width is
}
and just use JS/jQuery to toggle a class on #mycontainer