Develop Reference

Add option on FullPage.js when screen size is equal to 480 and below

I am using fullpage.js for a website I am building and I want to add a normal scroll option on specific section when screen size is equal to 480 or below.
This is my current code.
new fullpage('#fullpage', {
autoscrolling: true,
anchors: ['hero', 'news', 'information', 'activity', 'pictures', 'contact', 'oceanShiga',
'p-footer'
],
css3: true,
scrollingSpeed: 1000,
fitToSection: true,
dragAndMove: true,
afterRender:()=>{
if(window.innerWidth <= 480 ){
scrollbar:true
}
$(window).width() > 480){
$('#fullpage').fullpage(
normalScrollElements:['hero','news'],
)
};
},

The question has been answered on the fullpage.js isssues forum:
I would recommend you to just listen to the resize event.
When the viewport becomes less than 480px width then you can add a class to those elements, for example .normalScroll.
And when it becomes bigger you can remove it.
To do so you can use the afterResize event that fullpage.js provides.
Then you can use this option on fullpage.js initialisation.
new fullpage('#fullpage', {
normalScrollElements: '.normalScroll',
afterResize: function(width, height) {
var normalScrollSelectors = ['.hero', '.news'];
console.log(width)
normalScrollSelectors.forEach(function(selector) {
if (width < 440) {
document.querySelector(selector).classList.add('normalScroll');
} else {
document.querySelector(selector).classList.remove('normalScroll');
}
});
}
})
<div id="fullpage">
<div class="section">
Section 1
<div class="news">
Testing...
</div>
</div>
<div class="section">Section 2
<div class="hero">
Testing...
</div>
</div>
<div class="section">Section 3</div>
<div class="section">Section 4</div>
</div>

Javascript - Display images from photo into unique <div>

I have been searching this site for days looking for a solution. I would like to use javascript to take images from a folder on my server and put them into a set of like this. I thought it would be fairly simple but I've come up with nothing.
It would take the place of the divs below between the section tags in this code.
I could just hard code them all but there are 107 images that I need to display in this carousel and it would be much easier in the long run to be able to add/delete images from the folder than to do so by having to hard code them all.
Below is the code I have so far.
<section id="vendors" class="zerogrid">
<div width="90%" >
<div class="container" width="90%" style="background-color: #858585;">
<h2 class="clr-1" style="padding: 2%;" >Our Suppliers</h2>
<section class="customer-logos slider" style="padding-bottom: 5%;">
<div class="slide"><img src="images/image1.png"></div>
<div class="slide"><img src="images/image2.png"></div>
<div class="slide"><img src="images/image3.png"></div>
</section>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.customer-logos').slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1000,
arrows: false,
dots: false,
pauseOnHover: true,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 106
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 3
}
}]
});
});
</script>
</section>
This carousel works fine, sp any help getting the thing sorted would be greatly appreciated.

Add id by:
<section class="customer-logos slider" style="padding-bottom: 5%;" id="customer-logos-slider">
And add this to your script tag:
window.onload = function () {
let toAdd = '';
let totalImages = 107;
for (let i = 0; i < totalImages; i++) {
toAdd += '<div class="slide"><img src="images/image' + i + '.png"></div>';
}
document.getElementById('customer-logos-slider').innerHTML = toAdd;
}

I have been working with this bit of code. It is placing image placeholders but all of them are displaying at one time and not is separate divs. Also the 5th line of code that is setting each image with a number. I would like the javascript to pull the file name from each image in the folder, place it in a div (similar to line 6) and then repeat it the end of the images.
<script type="text/javascript">
window.onload = function () {
let toAdd = '';
let totalImages = 107;
for (let i = 0; i < totalImages; i++) {
toAdd += '<div class="slide"><img src="images/vendors/' + i + '.jpg"></div>';
}
document.getElementById('logos').innerHTML = toAdd;
}
</script>```
This last iteration of the tinkering leaves me with a large space in the section that contains nothing but I am guessing it's loading empty files due to the numbering. Any other thoughts from anyone?

Creating a div slider in jquery

I am trying to make an image change when I click on a piece of text on a website that I am building.
At this moment I have created a class called device with one of them being device active as shown below:
<div class="col-md-3">
<div class="device active">
<img src="app/assets/images/mockup.png" alt="">
</div>
<div class="device">
<img src="app/assets/images/mockup.png" alt="">
</div>
<div class="device">
<img src="app/assets/images/mockup.png" alt="">
</div>
</div>
And then what i am currently trying to do is remove the class of active when I click on some text with the i.d of #search2. This is my whole jquery script so far:
$("#search2").click(function() {
var currentImage = $('.device.active');
var nextImage = currentImage.next();
currentImage.removeClass('active');
});
However this does not seem to remove the class of active and the image is still displayed? any ideas?

Your selection is done right and it is working for me (the active class is removed from that item). The problem must be somewhere else in your code.
Here is an alternative:
var activeDeviceIndex = 0;
$("#search2").click(function() {
var devicesContainer = $('.device');
$(devicesContainer[activeDeviceIndex]).removeClass('active');
activeDeviceIndex === devicesContainer.length - 1 ? activeDeviceIndex = 0 : activeDeviceIndex++;
$(devicesContainer[activeDeviceIndex]).addClass('active');
});
.device {
display: none;
}
.device.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="device active">
<p>Device 1</p>
</div>
<div class="device">
<p>Device 2</p>
</div>
<div class="device">
<p>Device 3</p>
</div>
</div>
<button id="search2">click</button>

Check on the following, the id on the button to click should be search2 and not #search2, may be just typo stuffs.
after that update your code as follows
/**
*#description - gets the next image to slide, if the last image is the current image, it will loop the sliding
*#param {Element} current - the currently active image
*#param {Boolean} islooped - boolean value indicating if a looping just started
*/
var nextImage = function(current, islooped) {
var next = islooped? current : current.nextSibling;
while(next && next.nodeName.toLowerCase() !== 'div') {
next = next.nextSibling;
}
next = next? next : nextImage(current.parentNode.firstChild, true);
return next;
};
$('#search2').bind('click', function(event) {
var current = $('.device.active').removeClass('active').get(0);
var next = nextImage(current, false);
$(next).addClass('active');
});

How to use React-Scroll to scroll to element on click?

I've been trying to use the react-scroll library with my HTML to be able to click on a cube i made up of divs in a wrap, scrolling down to another part of the page.
My react-scroll code is this:
var React = require('react');
var Scroll = require('react-scroll');
var Link = Scroll.Link;
var Element = Scroll.Element;
var Events = Scroll.Events;
var scroll = Scroll.animateScroll;
var scrollSpy = Scroll.scrollSpy;
var Section = React.createClass({
componentDidMount: function() {
scrollToElement(link1); {
let scroller = Scroll.scroller;
scroller.scrollTo(link1, {
duration: 1500,
delay: 100,
smooth: true,
},
)
}
},
///
render( < App / > , document.getElementById('app'));
I'm trying to scroll to this element in my HTML:
<Element name="link1">
<div class="bg2" id="snap1"></div>
</Element>
When one of these cubes are clicked:
<div class="cube" change-background colorcode=¨#f45642¨>
<div class="front"><span>Resume</span></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
I made this fiddle https://jsfiddle.net/zhenkgxz/8/ but I'm new to JSfiddle so Im not sure if I have set it up correctly. Anyways, how can I get the scroll animation on click of the cube?

Complicated Conditional

I have a set of instruction at the top of my page:
<div class="instructions">
<div id="step1" class="step"><span class="step_active">1</span><span class="step_title_active">General Info</span></div>
<div id="step2" class="step"><span class="step_next">2</span><span class="step_title">Select Contact</span></div>
<div id="step3" class="step"><span class="step_next">3</span><span class="step_title">Log Details</span></div>
</div>
I have a form that reveals itself as conditions are met.
The first condition being that both select boxes must have options selected, before the next part appears.
<script>
$(document).ajaxSuccess(function () {
$("#test").hide();
$("#comType, #comDirection").bind('change', function () {
// show the button if they both have a value
if ($("#comType").val().length > 1 && $("#comDirection").val().length > 1) {
$("#test").fadeIn();
}
});
});
</script>
How can I change the classes in #step1 #step2 so that when the above conditions are met, they appear as:
<div id="step1" class="step"><span class="step_complete">1</span><span class="step_title">General Info</span></div>
<div id="step2" class="step"><span class="step_active">2</span><span class="step_title_active">Select Contact</span></div>
Thoughts?

You can use addClass & removeClass property of jQuery.
Try this:
if ($("#comType").val().length > 1 && $("#comDirection").val().length > 1) {
$("#test").fadeIn();
$("#step1").children("span").removeClass("step_active").addClass("step_complete");
$("#step2").children("span").removeClass("step_next").addClass("step_active");
$("#step1").children("span").next("span").removeClass("step_title_active").addClass("step_title");
$("#step2").children("span").next("span").removeClass("step_title").addClass("step_title_active");
}