Develop Reference

JS next tab jump section

I have a simple next and previous tab to move between "section". When you click the next tab the page moved down and skips the next "section" and goes the one after.
var $sec = $("section");
$(".prev, .next").click(function() {
var y = $sec.filter(function(i, el) {
return el.getBoundingClientRect().top > 0;
})[$(this).hasClass("next") ? "next" : "prev"]("section").offset().top;
$("html, body").stop().animate({
scrollTop: y
});
});
<div data-role="page" id="main">
<section>
<div id="home-section" class="section">
<img src="images/welcome-homepage.jpg" />
</div>
</section>
<section>
<div id="about-section" class="section">
<img src="images/about-us.jpg" />
</div>
</section>
<section>
<div id="service-charter-section" class="section">
<img src="images/service-charter.jpg" />
</div>
</section>
<section>
<div id="testionials-section" class="section">
<img src="images/about-us.jpg" />
</div>
</section>
</div>

This should work. It does not account for current scroll position, i.e. if you scroll halfway down and hit next, it will continue in series from the last item clicked through. It just makes an array of all sections positions and hops through that as you click prev / next.
jQuery(document).ready(function($) {
var sectionPosition = 0;
var scrollPositions = []
function scroll(y) {
$('html').stop().animate({
scrollTop: y
});
}
$("section").each(function(i, el) {
scrollPositions.push(parseInt($(el).offset()['top']))
})
$(".prev, .next").click(function() {
if ($(this).hasClass('next')) {
scroll(scrollPositions[sectionPosition + 1]);
if (sectionPosition < scrollPositions.length) {
sectionPosition++;
}
} else if (sectionPosition > 0) {
scroll(scrollPositions[sectionPosition - 1]);
sectionPosition--;
}
});
});

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');
});

Fading in and out at the same time between images dynamically(ish) using JS and HTML

I cannot for the life of me figure out why this wouldn't work. It seems to be immediately switching to the next image then fading in and out on that image and not between images. Any help would be awesome?
<div id="slider">
<img src="slider/1.jpg" id="test"></img>
<div style="padding-bottom: 2%;">
<button onClick="slider(1)" class="lebutt">1m</button>
<button onClick="slider(2)" class="lebutt">50km</button>
<button onClick="slider(3)" class="lebutt">the moon</button>
<button onClick="slider(4)" class="lebutt">mars</button>
<script>
function slider(x) {
var images = $('#slider img');
var y = document.getElementById('test').getAttribute('src').slice(7,8);
now = images.attr('src', "slider/" + y + ".jpg");
last = now.filter(':visible');
last.fadeOut();
next = images.attr('src', "slider/" + x + ".jpg");
next.fadeIn();
}
</script>
</div>

javascript slideshow shows all photos when site opens but not otherwise

My JavaScript slideshow is acting a little wonky. When I load the page the slide show pictures are visible, but it shows all the photos in the slideshow.
After a couple of seconds, it does decompress to one photo showing, and works how it's supposed to, flipping through each one at a 5 second pace.
However, no matter what I do, it still shows all the pictures at the beginning, which defeats the point...
This is my HTML:
<div class="container">
<div style="display: inline-block; ">
<img class="mySlides" src="../images/fullshot1.jpg">
</div>
<div style="display: inline-block; ">
<img class="mySlides2" src="../images/unnamed.jpg">
</div>
<div style="display: inline-block; ">
<img class="mySlides3" src="../images/fullshot2.jpg">
</div>
</div>
And this is my Jquery/JavaScript:
$(document).ready(function() {
console.log( "document loaded" );
//declare section variables
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;
//how to click and make it work
function cycleItems() {
var item = $('.container div').eq(currentIndex);
items.hide();
item.css('display','inline-block');
}
//interval time
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
//this closes the doc ready
});
Can anybody help me with this/has had this problem too? Thanks!

Infinite looping slideshow of HTML pages with jQuery

I'm trying to make a slideshow of HTML pages outputting to a screen 24/7. What I have works, but different slides need different intervals. How can I achieve this?
The output is fullscreen with a fixed footer which displays logo, some messages and the time.
jQuery
$(document).ready(function () {
var div = $('#content'); // Target iFrame
var slides = ['welcome','movie']; // Which slides
var time = 5000; // Default interval
var folder = 'slides'; // Folder where the HTML slides are
var extension = 'html';
var index = 1; // Skip first (0), already loaded by default SRC from iframe
$.ajaxSetup({
cache: false // Maybe not neccesary any more, before I used a div and $.load() instead of iframe
});
function loop() {
if (index === slides.length) { // If at end
index = 0; // Start again
}
div.attr('src', folder + '/' + slides[index] + '.' + extension); // Load next one
index++;
}
setInterval(function () {
loop();
}, time);
});
HTML
<iframe id="content" src="slides/welcome.html" width="100%" height="100%" frameborder="0"></iframe>
<div id="bar">
<div class="row">
<div class="col-lg-3">
<img src="img/logo.png" alt="" id="logo">
</div>
<div class="col-lg-6">
<div id="welcome">
Welcome <span>visitor</span>!
</div>
</div>
<div class="col-lg-3">
<div id="time"></div>
</div>
</div>
</div>

Using setTimeout and buttons to start and stop the loop.
http://jsfiddle.net/nirmaljpatel/75tmnmbq/

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="bar">
<div class="row">
<div class="col-lg-3">
<img src="img/logo.png" alt="" id="logo">
</div>
<div class="col-lg-6">
<div id="welcome">
Welcome <span>visitor</span>!
</div>
</div>
<div class="col-lg-3">
<div id="time"></div>
</div>
</div>
</div>
<div id="content"></div>
</body>
<script>
$(document).ready(function () {
var div = $('#content'); // Target iFrame
var slides = [{"ImageName":"Welcome", "Time":200},{"ImageName":"Image1", "Time":5000},{"ImageName":"Image3", "Time":1000},{"ImageName":"Image4", "Time":500},]; // Which slides
//var slideObj = JSON.parse(slides);
//alert(slides);
var time = 5000; // Default interval
var folder = 'slides'; // Folder where the HTML slides are
var extension = 'html';
var index = 0; // Skip first (0), already loaded by default SRC from iframe
$.ajaxSetup({
cache: false // Maybe not neccesary any more, before I used a div and $.load() instead of iframe
});
function loop() {
if (index == slides.length) { // If at end
index = 0; // Start again
}
div.html("ImageName: "+slides[index].ImageName + "; Image Time Interval: "+slides[index].Time); // Load next one
index++;
}
if(index==0)
loop();
setInterval(loop, slides[index].Time);
});
</script>
</html>