I've tried many combinations of this code and nothing works correctlly. I've also tried scrollTop. Just look at my js code and tell me what is wrong with it.
<header>
<div class="nav" id="nav">
<div class="navRow" id="navRow">
<div class="navBrand" id="brand"><img src="img/logo-light.png" alt="Snow" height="35"></div>
<div class="navLinks">
<div class="navItem">About</div>
<div class="navItem">Contact</div>
<div class="navItem">Portfolio</div>
<div class="navItem">Blog</div>
<div class="navItem">Wordpress Theme</div>
</div>
</div>
</div>
</header>
<script>
var yPos = window.pageYOffset;
var nav = document.getElementById("nav");
if (yPos > 50 || document.body.pageYOffset > 50) {
nav.style.backgroundColor = "white";
}
else {
nav.style.backgroundColor = "none";
}
</script>
Your code runs only once when page loads. I suppose you want it to run on every scroll event:
window.addEventListener('scroll', function(e) {
// ... your code here
})
Related
I'm trying to show the next image by just adding the style: display(none) but it is not working at all
<script>
function displayBanner() {
var count = 1;
if (count == 1) {
document.getElementById("banner_img3").style.display = "none";
}
}
displayBanner();
</script>
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img1"></div>
<div class="banner_img" id="banner_img2"></div>
<div class="banner_img" id="banner_img3"></div>
</div>
</div>
</header>
Your element does not exist when you execute the script before the element. Move the script to after the elements or move displayBanner into a load event
I assume you want to rotate the images
var count = 0, max;
function displayBanner() {
document.getElementById("banner_img"+count).style.display = "none";
count++
if (count === max ) count = 0
document.getElementById("banner_img"+count).style.display = "block";
}
window.addEventListener("load", function() {
max = document.querySelectorAll(".banner_img").length;
document.getElementById("banner_img0").style.display = "block";
setInterval(displayBanner, 3000);
})
.banner_img { display:none; text-align:center }
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img0"><img src="http://lorempixel.com/output/animals-q-c-640-480-1.jpg" /><br/>Image 1</div>
<div class="banner_img" id="banner_img1"><img src="http://lorempixel.com/output/animals-q-c-640-480-2.jpg" /><br/>Image 2</div>
<div class="banner_img" id="banner_img2"><img src="http://lorempixel.com/output/animals-q-c-640-480-3.jpg" /><br/>Image 3</div>
</div>
</div>
</header>
your div didn't have any source add a source using <img src=""></img> for the div try below code for that
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img1"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg" ></div>
<div class="banner_img" id="banner_img2"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg"></div>
<div class="banner_img" id="banner_img3"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg"></div>
</div>
</div>
</header>
window.onload=displayBanner();
function displayBanner() {
var count = 1;
if (count == 1) {
document.getElementById("banner_img3").style.display = "none";
}
}
working demo:https://jsfiddle.net/athulmathew/yh2esp1c/21/
I'm having a problem with this exercise
So far I have the boxes, but the logic in javascript I don't know how to do ? Any advise ?
this is my progress:
The code is really simple:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>David Aparicio</title>
</head>
<body>
<div class="container">
<div class="box active">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<div class="buttons">
<button> Left </button>
<button> Right </button>
</div>
Here's my take on it.
First I added ids to your buttons to reference them.
<div class="buttons">
<button id="left"> Left </button>
<button id="right"> Right </button>
</div>
Then my javascript looks like this:
//Find all boxes and put them in an array
let boxes = document.querySelectorAll(".box");
let activeIndex = 0;
function changeActive() {
//remove previous active class
document.querySelector(".active").classList.remove("active");
//find box at active index and add active class
document.querySelectorAll(".box")[activeIndex].classList.add("active");
}
//Event listeners to increment and decrement the active index
document.getElementById("left").addEventListener("click", function() {
if(activeIndex > 0) {
activeIndex -= 1;
changeActive();
}
});
document.getElementById("right").addEventListener("click", function() {
if(activeIndex < boxes.length -1) {
activeIndex += 1;
changeActive();
}
});
JSFiddle: https://jsfiddle.net/r6foyj1d/13/
I am getting unwanted class (.page) as the page loads with css property display: none, which makes the content invisible. I haven't inserted any class(.page). I have tried to undo the css property none to block via a JS but its not working. I can't figure out the problem. Its strange.
Here is the html that I actually coded:
<div class="deck-background"></div>
<div id="page">
<div id="main">
<div id="content" class="column" role="main">
<a id="main-content"></a>
<the main html content sits here>
</div>
</div>
</div>
This I am getting as the page loads. Please note two new divs with class (.page).
<div class="deck-background"></div>
<div id="page">
<div id="main">
<div id="content" class="column" role="main">
<div class="page" style="display: block;">
<a id="main-content"></a>
</div>
<div class="page" style="display: none;">
<the main html content sits here>
</div>
</div>
</div>
</div>
Here is the JS:
<script type="text/javascript">
window.onload = function() {
function showHide(id) {
var el = document.querySelectorAll('.page')
if( el && el.style.display == 'block')
el.style.display = 'none';
else
el.style.display = 'block';
}
}
</script>
Here is the JS
window.onload = function() {
var nodes = document.querySelectorAll('.page');
[].forEach.call(el, function(el){
el.style.display = "block";
});
}
Unsatisfied with existing sliders (mostly because they're bloated code and require external script calls), I decided to try to write a simple, site-specific inline slider script. However, I get a stack overflow error.
<div id="featured">
<div class="tween">
<div class="cropimg">
</div>
<div class="container">
text
</div>
</div>
<div class="tween">
<div class="cropimg">
</div>
<div class="container">
text
</div>
</div>
<div class="tween">
<div class="cropimg">
</div>
<div class="container">
text
</div>
</div>
</div>
<script>
var _rys = jQuery.noConflict();
_rys("document").ready(function(){
var timeOut = 5000;
setTimeout(nextSlide(1),timeOut);
});
function nextSlide(next) {
var i = 1;
var numberOfChildren = _rys("#featured").children().length;
_rys(".tween:nth-child("+next+")").fadeTo(500,1);
while (i<=numberOfChildren) {
// loop through the children and make those that are opaque invisible
if (i != next) {
if (_rys(".tween:nth-child("+i+")").css('opacity') != 0) {
_rys(".tween:nth-child("+i+")").css('opacity',0);
}
}
i++;
}
if (next>=numberOfChildren) {
setTimeout(nextSlide(1), 5000);
} else {
setTimeout(nextSlide(next+1), 5000);
}
}
</script>
I am making a slideshow for a website i am making.
but my slideshow keeps getting error
Cannot set property 'className' of null
here is my code:
window.onload=function(){
var slideshow = document.getElementsByClassName('slideshow').item(0),
train = slideshow.getElementsByClassName('train').item(0),
lists = document.getElementsByClassName('btns').item(0).getElementsByClassName('btn'),
currentSlide = 0;
(go2slide = function (n) {
if(n>lists.length-1) n=0;
if(n<0) n=lists.length-1;
train.style.left=(-310*n)+'px';
lists.item(currentSlide).className = '';
lists.item(n).className = 'active';
currentSlide=n;
})(0); // set active of first li
nextSlide = function(){
go2slide(currentSlide+1);
}
prvSlide = function(){
go2slide(currentSlide-1);
}
var autoPlayIv = false;
(autoPlayStart = slideshow.onmouseout = function(){
if(autoPlayIv) return;
autoPlayIv = setInterval(nextSlide, 2000);
})(); // run auto play
autoPlayStop = slideshow.onmouseover = function(){
clearInterval(autoPlayIv);
autoPlayIv = false;
}
slideshow.getElementsByClassName('next').item(0).onclick=nextSlide;
slideshow.getElementsByClassName('previous').item(0).onclick=prvSlide;
for (var i=0; i<lists.length; i++) {
(function(j){
lists.item(j).onclick=function(){
go2slide(j);
}
})(i);
}
}
i DO have a li tag classes as btn and a btns ul.
its item(0).
and here is the html related to it
<div class="body">
<div class="slide">
<div class="s1">
<div class="slideshow">
<div class="train">
<script type="text/javascript">
var slidesLen = 3;
for(var i=1;i<=slidesLen;i++){
document.write("<div style=\"background-image:url('../images/pic"+i+".jpg');\"></div>");
}
</script>
</div>
<div class="previous"></div>
<div class="next"></div></div>
<ul class="btns">
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
</ul>
</div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>
<div class="s5">
<div class="I"></div>
<div class="II"></div>
<div class="III"></div>
</div>
</div>
<div class="text"></div>
</div>
and of course its only the body.php i am posting here. I don't think header.php which contains the menu and the css and js association tags are needed. tell me if it is