If I have something like this:
<br><br><br>...Lots of BRs...<br><br><br>
<div id="thetarget"></div><div id="show"></div>
<br><br><br>...Lots of BRs...<br><br><br>
I want to show the #show when user scroll to the #thetarget OR/and to manipulate with css styles of the #thetarget when user scroll to it, but without "click interaction" of the user as it normally would with the target
Is this even possible with only css code?
If it's not, how can I make this with javascript(not jquery) so it won't be impact on performance at all(=tiny affect)?
Thank you
You could also do this with pure JS
window.onscroll = function() {
var show = document.getElementById('show');
if (this.pageYOffset > 100) {
show.style.display = 'block';
} else {
show.style.display = 'none';
}
}
#thetarget {
height: 1000px;
}
#show {
display: none;
position: fixed;
z-index: 1;
bottom: 0;
}
<div id="thetarget">
<h1>Keep scrolling</h1>
</div>
<div id="show">
<h1>Revealed</h1>
</div>
Related
Maybe someone know how to open only one container at a time? Now in this example you can open all three? I would like to open only one and when it's opened change text to "Close". Any ideas?
Here is the link with a code to codepen: code https://codepen.io/jorgemaiden/pen/YgGZMg
I'll be really apreciate for any help and tips!
You can do it in many ways, but according to your reference, I would just add function that loop through your elements which is not your clicked element, then remove active class if it's present
var linkToggle = document.querySelectorAll(".js-toggle");
for (i = 0; i < linkToggle.length; i++) {
linkToggle[i].addEventListener("click", function(event) {
event.preventDefault();
var container = document.getElementById(this.dataset.container);
this.innerText = "Close";
toggleSlide(container);
});
}
function toggleSlide(container) {
for (i = 0; i < linkToggle.length; i++) {
let el = document.getElementById(linkToggle[i].dataset.container);
if (el != container && el.classList.contains("active")) {
el.style.height = "0px";
linkToggle[i].innerText = "Click";
el.addEventListener(
"transitionend",
function() {
el.classList.remove("active");
}, {
once: true
}
);
}
}
if (!container.classList.contains("active")) {
container.classList.add("active");
container.style.height = "auto";
var height = container.clientHeight + "px";
container.style.height = "0px";
setTimeout(function() {
container.style.height = height;
}, 0);
} else {
container.style.height = "0px";
container.addEventListener(
"transitionend",
function() {
container.classList.remove("active");
}, {
once: true
}
);
}
}
.box {
width: 300px;
border: 1px solid #000;
margin: 10px;
cursor: pointer;
}
.toggle-container {
transition: height 0.35s ease-in-out;
overflow: hidden;
}
.toggle-container:not(.active) {
display: none;
}
<div class="box">
<div class="js-toggle" data-container="toggle-1">Click</div>
<div class="toggle-container" id="toggle-1">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths.
</div>
</div>
<div class="box">
<div class="js-toggle active" data-container="toggle-2">Click</div>
<div class="toggle-container open" id="toggle-2">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths.
</div>
</div>
<div class="box">
<div class="js-toggle" data-container="toggle-3">Click</div>
<div class="toggle-container" id="toggle-3">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths.
</div>
</div>
I am trying to open a URL link using DIV tags and nothing else.
So this is my HTML/JavaScript:
<div id="divs" onmouseover="newfunction2()"></div>
and this is the function:
function newfunction2(){
var txt = document.getElementById('divs');
if(document.body.scrollTop >= 0 || document.documentElement.scrollTop > 0){
txt.innerHTML = '<div id="divss"></div>';
} else {
txt.innerHTML = "";
}}
(the id="divs" just positions a display:block and so does id="divss"
I want to click the div id="divss" to open the link?
function newfunction2(){
var txt = document.getElementById('divs');
if(document.body.scrollTop >= 0 || document.documentElement.scrollTop > 0){
txt.innerHTML = '<div id="divss"></div>';
} else {
txt.innerHTML = "";
}}
#divs{
position:absolute;
left: 0;
top: 18px;
width:20px;
height: 20px;
background-color: red;
cursor: pointer;
opacity: 1;
z-index: 1;
}
a #divss{
height: 100%;
width: 100%;
display: inline-block;
}
<div id="divs" onmouseover="newfunction2()"></div>
If you want to keep your div empty, css can come to your rescue.
document.querySelector('#divs').addEventListener('click', e => {
window.open('http://www.bbc.com', '_blank');
});
#divs {
height: 200px;
width: 200px;
}
<div id="divs"/>
Try this updated code:
document.querySelector('#divs').addEventListener('click', function(e) {
window.open('http://www.bbc.com', '_blank');
});
Just use addEventListener to have your element listen for any click events. When a click is registered then navigate to the new URL:
document.querySelector('#divEl').addEventListener('click', redirect);
function redirect() {
console.log('Execute the following code:\nwindow.location.assign("http://www.mozilla.org");');
}
<div id="divEl">Go to URL</div>
I'm not doing the actual redirect in my example, but you just have to use the following line of code for the redirect: window.location.assign("http://www.mozilla.org"); (or whatever URL you want to direct to).
I want to click the div id="divss" to open the link?
add an event listener for the click on the div and use window.open (the second param '_blank' is optional to open the link in a new tab.)
<div id="divs">
</div>
document.querySelector('#divs').addEventListener('click', e => {
window.open('http://www.bbc.com', '_blank');
});
I think you can use anchor tag within the div and this will give you better way to redirect and also add bit css on the div
<div id="divs"></div>
css can be
#divs{
cursor:pointer;
}
I am after creating a drop down page like on my examples below:
This is how I would like it to show when the arrow on the side is cliked.
How would I make something like this and is there any examples any where for me to study to help me make this ?
If you can use jquery you can play with hasClass, addClass and removeClass to change the height of the submenu
Working Demo.
$(".btn").click(function() {
if ($(".menu").hasClass("dropped")) {
$(".menu").removeClass("dropped");
} else {
$(".menu").addClass("dropped");
}
});
.menu {
height: 0;
overflow: hidden;
transition: all 0.5s ease 0s;
}
.dropped {
height: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="btn">
Dropdown
</button>
<div class="menu">
<p>Stufss...</p>
<p>Stufss...</p>
<p>Stufss...</p>
<p>Stufss...</p>
<p>Stufss...</p>
<p>Stufss...</p>
</div>
With 3 div elements you can get a result like the one pictured. From the picture it looks like one div is wrapping around two other div elements, a div element that already has some information and a div element that will grow/shrink in size through appending/removing elements when the user presses the dropdown button.
Here is a working example:
var extraInformation = document.getElementById('infoLong');
var dropdown = document.getElementById('dropdown');
// The extra info that will be appended into the infoLong div
var someHeading = document.createElement('h4');
someHeading.innerHTML = 'Detailed Game Information';
someHeading.style.background = '#C58AC5';
var teamOneInfo = document.createElement('p');
teamOneInfo.innerHTML = 'Team 1: Lost';
teamOneInfo.style.background = '#FF516B';
var teamTwoInfo = document.createElement('p');
teamTwoInfo.innerHTML = 'Team 2: Won';
teamTwoInfo.style.background = '#3FBFBF';
// Should add more detailed information when the dropdown button
// is pressed only if the infoLong div is empty
dropdown.addEventListener('click', function(){
if(extraInformation.children.length === 0){
extraInformation.appendChild(someHeading);
extraInformation.appendChild(teamOneInfo);
extraInformation.appendChild(teamTwoInfo);
}else{
while(extraInformation.firstChild){
extraInformation.removeChild(extraInformation.firstChild);
}
}
});
#infoShort {
background: #3FBFBF;
}
p {
margin: 0;
}
h4 {
margin: 0;
}
<div id='gameInfoContainer'>
<div id='infoShort'>
<h3>Game Summary</h3>
<button id='dropdown'>Dropdown</button>
</div>
<div id='infoLong'></div>
</div>
Trying to figure out how to switch from one to two images then back to one with an onlick.
So far I have below which works no problem for switching to one image and back to original image. Ultimately I'm trying to get the first onclick event to be two images vertically and then click again back to the first single image.
var play = false;
function toggle() {
var image = document.getElementById('image')
var scan = document.getElementById('scan');
play = !play;
if (play) {
image.src = "pause.png";image.width="182";image.height="182";image.border="0";
scan.play();
}
else {
image.src = "play.png";image.width="182";image.height="182";image.border="0";
scan.pause();
}
}
and in body:
<img onclick="toggle()" id="image" src="play.png" alt="image" width="182" height="182" style="margin:auto; position:absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0;">
This should work fine except, take out the width, height and border from the javascript, they're not changing so why have it there and risk some browsers freaking out on them?
I just put this together real quick to test and it works a treat.. I've commented out scan.play and pause of course but I'm assuming you've checked the console in your browser to see if those are throwing any errors?
I took the <a> out and used style cursor=pointer instead for the click-able element as well.. either way works but this is neater and works from ie6 I think, ie7+ definately.
edit: removed source block didn't achieve goal of question
After discussion in comment there's heaps of ways to do it, and I'd probably use jQuery but since you're not here's one not
<!doctype html>
<html>
<head>
<script type="text/javascript">
var play = true;
function toggle() {
//var scan = document.getElementById('scan');
var playpause = document.getElementById('playpause');
var btnplay = playpause.getElementsByClassName('play');
var btnpause = playpause.getElementsByClassName('pause');
play = !play;
if (play) {
btnplay[0].className = 'btn play active';
btnpause[0].className = 'btn pause';
//scan.play();
}
else {
btnplay[0].className = 'btn play';
btnpause[0].className = 'btn pause active';
//scan.pause();
}
}
</script>
<style>
.btn {
width: 182px;
height: 182px;
cursor: pointer;
position: absolute;
visibility: hidden;
}
.btn.active { visibility: visible; }
.btn.play { background: url('play.png') no-repeat 0 0; }
.btn.pause {
background: url('pause.png') no-repeat 0 0;
padding: 182px 0 0 0;
}
</style>
</head>
<body>
<div id="playpause">
<div class="btn play active" onclick="toggle()">
</div>
<div class="btn pause" onclick="toggle()">
<img src="other.png" alt="other" />
</div>
</body>
</html>
how can I give an alert when one div hovers over another div upon scroll? here is a working example,
http://jsfiddle.net/uprosoft/Ek5Gy/267/
I cant find a jQuery code to go after though in-order to give an alert.
Code:
HTML
<div id="container">
<div id="div1">test</div>
<br>
<div id="div2"> another test</div>
</div>
CSS
#div1{
background: green;
position: fixed;
width: 100%;
}
#div2{
background: yellow;
position: relative;
width: 100%;
margin-top: 100px;
}
#container{
height: 1000px;
}
JQUERY ???
/* what jquery code goes here? to alert when the yellow div touches the green div upon scroll? */
Something like that should work:
$(window).scroll(function() {
var div1 = $("#div1");
var div2 = $("#div2");
var div1_top = div1.offset().top;
var div2_top = div2.offset().top;
var div1_bottom = div1_top + div1.height();
var div2_bottom = div2_top + div2.height();
if (div1_bottom >= div2_top && div1_top < div2_bottom) {
// overlapped
}
});
DEMO: http://jsfiddle.net/Ek5Gy/280/
I know the question is for Jquery but either way, the same done with vanilla JS
function didDiv1TouchedDiv2() {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
// Guard
if (div1 === undefined || div2 === undefined) return;
var div1Rect = div1.getBoundingClientRect();
var div2Rect = div2.getBoundingClientRect();
// We need to add the offsetHeight in order to include padding and border of element and get excact position
return div1Rect.top >= div2Rect.top + div2.offsetHeight;
}
window.addEventListener("scroll", didDiv1TouchedDiv2);