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
Related
I am trying to create a column containing items, within this column you can go to "next" or "prev" page.
This works fine and quick!
Now here my question is
How do I create up to page 8 or even more, so that you could scroll through the pages?.
I am trying something with this, but I somehow cant implement it into html
function next() {
var nextUrl = "Page + (index+1)";
}
function back() {
var prevUrl = "Page + (index-1)";
}
Here is my current setup
function show(elementID) {
var ele = document.getElementById(elementID);
if (!ele) {
alert("dit bestaat niet");
return;
}
var pages = document.getElementsByClassName('page');
for(var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
ele.style.display = 'block';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Page1" class="page" style="">
page 1
</div>
<div id="Page2" class="page" style="display:none">
page 2
</div>
<div class="column-wrapper">
<div class="pagination paginatioon--full">
<p>
<span onclick="show('Page1');">
prev
</span>
<span onclick="show('Page2');">
next </span>
</p>
</div>
</div>
You can do something like this :
var currentPageId = 1;
var totalpages = $('.page').length;
$('.prev').click(function(e) {
if (currentPageId > 1) {
currentPageId--;
show('Page' + currentPageId);
}
});
$('.next').click(function(e) {
if (currentPageId < totalpages) {
currentPageId++;
show('Page' + currentPageId);
}
});
function show(elementID) {
var ele = document.getElementById(elementID);
if (!ele) {
alert("dit bestaat niet");
return;
}
var pages = document.getElementsByClassName('page');
for (var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
ele.style.display = 'block';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Page1" class="page" style="">
page 1
</div>
<div id="Page2" class="page" style="display:none">
page 2
</div>
<div id="Page3" class="page" style="display:none">
page 3
</div>
<div class="column-wrapper">
<div class="pagination paginatioon--full">
<p>
<span class='prev'>
prev
</span>
<span class='next'>
next </span>
</p>
</div>
</div>
Below is html code for content within Shattered Popup:
<div class="popups-cont">
<div class="popups-cont__overlay"></div>
<div class="popup">
<div class="popup__pieces"></div>
<div class="popup__content">
<div class="popup__close"></div>
<p class="popup__text">1111111</p>
</div>
</div>
</div>
<div class="popups-cont">
<div class="popups-cont__overlay"></div>
<div class="popup">
<div class="popup__pieces"></div>
<div class="popup__content">
<div class="popup__close"></div>
<p class="popup__text">2222222</p>
</div>
</div>
</div>
<img id="c1" class="client col1 row1" src="http://bower.io/img/bower-logo.png" alt="">
<img id="c2" class="client col2 row1" src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="">
When clicking on button with id c1 I expect modals with popup__text = "1" to open and "2" when c2 is clicked.
Javascript code:
var numOfPieces = 6*6;
var frag = document.createDocumentFragment();
function insertInnerPieces($el, innerPieces) {
for (var i = 0; i < innerPieces; i++) {
var $inner = document.createElement('div');
$inner.classList.add('popup__piece-inner');
$el.appendChild($inner);
}
};
for (var i = 1; i <= numOfPieces; i++) {
var $piece = document.createElement('div');
$piece.classList.add('popup__piece');
insertInnerPieces($piece, 3);
frag.appendChild($piece);
}
document.querySelector('.popup__pieces').appendChild(frag);
var $popupsCont = document.querySelector('.popups-cont');
var $popup = document.querySelector('.popup');
var popupAT = 900;
document.querySelector('#c1').addEventListener('click', function() {
$popupsCont.classList.add('s--popup-active');
$popup.classList.add('s--active');
});
document.querySelector('#c2').addEventListener('click', function() {
$popupsCont.classList.add('s--popup-active');
$popup.classList.add('s--active');
});
function closeHandler() {
$popupsCont.classList.remove('s--popup-active');
$popup.classList.remove('s--active');
$popup.classList.add('s--closed');
setTimeout(function() {
$popup.classList.remove('s--closed');
}, popupAT);
}
document.querySelector('.popup__close').addEventListener('click', closeHandler);
document.querySelector('.popups-cont__overlay').addEventListener('click', closeHandler);
How do I get distinct modals to pop up from respective icons/buttons?
You can find the fiddle example here: Shattered Popup Example
I just need some advice with my current code. I am trying to display a different div depending on the menu item clicked. I was thinking theoretically using some kind of indexing method. i think the if statement i am using for once does not work but also seems a little horrible in terms of coding.
anyway what do you think?
/**
* Lets get Menu container
*/
var menu = document.getElementById("configurator-menu");
/**
* Set Current Tab and Store which tab is Active
*/
var navitem = menu.querySelector(".configurator-menuitems div");
navitem.className += " " + "activeTab";
/**
* Add click events to Menu Tabs
*/
var tabs = menu.querySelectorAll(".configurator-menuitems div");
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick=displayPage;
}
/**
* Tabs Logic
*/
function displayPage() {
var items = menu.querySelectorAll(".configurator-menuitems div");
for (var i = 0; i < items.length; i++) {
items[i].classList.remove("activeTab");
}
this.className += " " + "activeTab";
if (this.classList.contains("mainMenu1")) {
var item = document.getElementByClassName("appCanvas1");
item.style.display = "block";
}
else if (this.classList.contains("mainMenu2")) {
var item = document.getElementByClassName("appCanvas2");
item.style.display = "block";
}
else if (this.classList.contains("mainMenu3")) {
var item = document.getElementByClassName("appCanvas3");
item.style.display = "block";
}
}
<div id="configurator-menu" class="appMenu" style="background-color:#001A35;">
<div class="appLogo">
Logo Here
</div>
<hr class="no-margin" />
<div class="configurator-menuitems">
<div class="mainMenu-btn mainMenu1">Shape</div><hr class="no-margin" />
<div class="mainMenu-btn mainMenu2">Size</div><hr class="no-margin" />
<div class="mainMenu-btn mainMenu3">Color</div><hr class="no-margin" />
</div>
<div class="menuspacer"></div><hr class="no-margin" />
<div class="currentSettings">
<p class="settings-title">Your Selection</p>
<p class="variant-config">Shape: </p>
<p class="variant-config">Colors: </p>
<p class="variant-config">Size: </p>
<p class="variant-config">Quantity: </p>
<p class="variant-config">Total Price: </p>
</div>
</div>
<div class="canvas-wrapper">
<div class="appCanvas1" style="background-color:#e7e7e7;">
<div class="shape-selection-bar">
<div class="shape-selector"><img src="'.plugins_url("pentant_conical.png", __FILE__).'" alt="" /></div>
<div class="shape-selector"><img src="'.plugins_url("pendant_cyl.png", __FILE__).'" alt="" /></div>
<div class="shape-selector"><img src="'.plugins_url("standing_lamp_conical.png", __FILE__).'" alt="" /></div>
<div class="shape-selector"><img src="'.plugins_url("standing_lamp_cyl.png", __FILE__).'" alt="" /></div>
</div>
<div class="configurator-progressBtn"> Move On</div>
</div>
<div class="appCanvas2" style="background-color:#e7e7e7;">
<div class="configurator-progressBtn"> Move On</div>
</div>
<div class="appCanvas3" style="background-color:#e7e7e7;">
<div class="configurator-progressBtn"> Move On</div>
</div>
</div>
My automatic carousel doesn't work. I tried using setInterval as you can see below but it still doesn't work. I really don't know why. It's syntactically correct and I think it ain't logically wrong either. Please help.
HTML:
<div class = "slidingPhotos" align="center">
<div class = "slide active-item">
<div class = "photo1">
<img src = "Images/mainImage.jpg"></img>
</div>
<div class = "description">
<h3> Welcome to O-Grocery! Your #1 Online Grocery Store </h3>
</div>
</div>
<div class = "slide ">
<div class = "container">
<div class = "photo1">
<img src = "Images/mainImage3.jpg"></img>
</div>
<div class = "description">
<h3> You have a thousand products to choose from at O-Grocery! </h3>
</div>
</div>
</div>
<div class = "slide">
<div class = "container">
<div class = "photo1">
<img src = "Images/mainImage2.jpg"></img>
</div>
<div class = "description">
<h3> You can guarantee 100% freshness of goods! </h3>
</div>
</div>
</div>
</div>
<div class ="footer" align="center">
<div class = "dots">
<div class = "arrow-prev">
<img src = "Images/arrow-prev.png"></img>
</div>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<div class = "arrow-next">
<img src = "Images/arrow-next.png"></img>
</div>
</div>
</div>
jQuery:
setInterval(function()
{
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
currentSlide.fadeOut(500).removeClass('active-slide');
setTimeout(function(){ nextSlide.addClass('active-slide').fadeIn('slow'); }, 500);
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
}, 5000);
you have a syntax error
setInterval(function()
{
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
} // <- THIS is missing in your code
currentSlide.fadeOut(500).removeClass('active-slide');
setTimeout(function(){ nextSlide.addClass('active-slide').fadeIn('slow'); }, 500);
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
}, 5000);
http://jsfiddle.net/evilbuck/aj0nuyLk/
I have 2 divs, #col1 and #col2, that I need to generate some divs with fruit names in there.
So far I have:
var fruitArray = ['apples','banana','orange','grapes'];
for (fruit in fruitArray) {
$('<div class="'+fruitArray[fruit]+'"></div>').appendTo('#col1').doSomething();
$('<div id="'+fruitArray[fruit]+'"></div>').appendTo('#col2').doSomething();
}
Which turns out like:
<div id="#col1">
<div class="apples"></div>
<div class="banana"></div>
<div class="orange"></div>
<div class="grapes"></div>
</div>
<div id="#col2">
<div id="apples"></div>
<div id="banana"></div>
<div id="orange"></div>
<div id="grapes"></div>
</div>
How do I randomize the array so it looks something like:
<div id="#col1">
<div class="orange"></div>
<div class="apples"></div>
<div class="orange"></div>
<div class="grapes"></div>
</div>
<div id="#col2">
<div id="grapes"></div>
<div id="orange"></div>
<div id="apples"></div>
<div id="banana"></div>
</div>
Simple shuffle extension:
Array.prototype.shuffle = function() {
var shuffledArray = [];
while (this.length) {
shuffledArray.push(this.splice(Math.random() * this.length, 1)[0]);
}
while (shuffledArray.length) {
this.push(shuffledArray.pop());
}
return this;
}
Use it like
var fruitArray = ['apples','banana','orange','grapes'].shuffle();
for (var i = 0; i < fruitArray.length; i++) {
$('<div class="'+fruitArray[i]+'"></div>').appendTo('#col1').doSomething();
$('<div id="'+fruitArray[i]+'"></div>').appendTo('#col2').doSomething();
}