Develop Reference

Text scroll using jQuery

I've been trying to create a text scroller to display one div at a time using jQuery and I'm very new to this.
I used divs and have been trying to scroll through using two buttons-previous and next. I'm not able to figure out how to scroll through the texts whilst maintaining the position of the scroll.
Issue 1: It works fine if I hit next, however, At any given point during the scroll, when I hit previous, the output gets messed up and I'm really getting stuck here.
Issue 2: The first and the last captions are shown twice during the scroll. I've tried my best to fix this but in vain.
Any kind of help will be highly appreciated. Thank you so much in advance!
jQuery(document).ready(function($) {
var state = 0;
function loadOne(state) {}
function displayFirst(value) {
$('.caption' + value).show();
}
function hideall() {
$('.caption').hide();
}
function reset(value) {
state = -1;
}
function updateCounter() {
state = state + 1;
}
hideall();
//alert(state);
$(".next-update").click(function() {
state = state + 1;
if (state >= 1 && state <= 5) {
hideall();
$('.caption' + state).show();
} else {
reset(state);
}
});
$(".prev-update").click(function() {
state = state + 1;
if (state >= 5 && state <= 1) {
hideall();
$('.caption' + state).show();
} else {
reset(state);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="caption caption1">Hello 1</div>
<div class="caption caption2">Hello 2</div>
<div class="caption caption3">Hello 3</div>
<div class="caption caption4">Hello 4</div>
<div class="caption caption5">Hello 5</div>
<button class="prev-update">Prev</button>
<button class="next-update">Next</button>

Hope the following code will work for you.
$(window).ready(function(){
var state = 1;
$(".caption").hide();
$(".caption.caption" + state).show();
$(".prev-update").click(function(){
if(state > 1){
state--;
}
$(".caption").hide();
$(".caption.caption" + state).show();
})
$(".next-update").click(function(){
if(state < 5){
state++;
}
$(".caption").hide();
$(".caption.caption" + state).show();
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="caption caption1">Hello 1</div>
<div class="caption caption2">Hello 2</div>
<div class="caption caption3">Hello 3</div>
<div class="caption caption4">Hello 4</div>
<div class="caption caption5">Hello 5</div>
<button class="prev-update">Prev</button>
<button class="next-update">Next</button>

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

Remove Link on scroll

In my application I have 4 links with different IDs and 4 DIV with same ID as each link (I use them for anchor-jumping).
My current code:
One
Two
Three
Four
<div class="col-md-12 each-img" id="1">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="2">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="3">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="4">
<img src="img/album-img.png">
</div>
Sometime users just scroll to second div id="2" first before they click on buttons and when they do so, they are sent to top id="1" first instead of continue to next ID id="3".
Only one button is visible at a time with use of CSS and when link is clicked, I remove that link.
CSS
a.btn{display: none}
a.btn a:first-child{display: block !important;}
jQuery
$(document).ready(function(){
$('a.btn').click(function () {
$(this).remove(); // remove element which is being clicked
});
});
How can I achieve so if user scroll down, each link that has same ID as the DIV get removed.
For instance: If user scroll down to <div class="col-md-12" id="1">, One gets removed and Next link would be Two to click on.
PS: This is for a dynamic page and IDs will change, so we need another selector maybe
This is what I have tried until now, but problem is that it removes all the links and not first one only
$(function() {
var div = $('.each-img').offset().top;
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
$('.each-img').each(function(){
if (scrollTop >= div) {
$("a.btn:eq(0)").remove();
//$("a.btn:first-child").remove();
}
});
});
});
PS: The way HTML & CSS is setup doesn't need to like this and I can change it to whatever that will be better for the function

It's no problem to make it dynamic:
JSFiddle: https://jsfiddle.net/rc0v2zrw/
var links = $('.btn');
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
links.each(function() {
var href = $(this).attr('href');
var content = $(href);
if (scrollTop > content.offset().top) {
$(this).hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:fixed; top:0; left:0; right:0">
One
Two
Three
Four
</div>
<div class="col-md-12" id="1">
<img src="http://lorempixel.com/400/500/">
</div>
<div class="col-md-12" id="2">
<img src="http://lorempixel.com/450/500/">
</div>
<div class="col-md-12" id="3">
<img src="http://lorempixel.com/480/500/">
</div>
<div class="col-md-12" id="4">
<img src="http://lorempixel.com/500/500/">
</div>

I think this is more or less what you're after:
JSFiddle
https://jsfiddle.net/wc0cdfhv/
It's good to cache the position of your elements outside the scroll function, this way it doesn't need to be calculated every time.
You should also keep in mind this won't scale too well if you have dynamic content but if you're just working with 4 static links it will do fine.
Code
$(function() {
var scroll1 = $('#1').offset().top;
var scroll2 = $('#2').offset().top;
var scroll3 = $('#3').offset().top;
var scroll4 = $('#4').offset().top;
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop >= scroll4) {
$("#go1, #go2, #go3, #go4").hide();
}
else if (scrollTop >= scroll3) {
$("#go1, #go2, #go3").hide();
$("#go4").show();
}
else if (scrollTop >= scroll2) {
$("#go1, #go2").hide();
$("#go3, #go4").show();
}
else if (scrollTop >= scroll1) {
$("#go1").hide();
$("#go2, #go3, #go4").show();
}
else {
$("#go1, #go2, #go3, #go4").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:fixed; top:0; left:0; right:0; background:#CCC">
One
Two
Three
Four
</div>
<div class="col-md-12" id="1">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="2">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="3">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="4">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>

use scrollEvent listener
$(window).scroll(function(e){
if($(this)).scrollTop >= $('div#1').offset().top){
$("a#1").hide();
}
});
Use Something like that and it will work .. Hope this helps

How can I use fade or any other transition effect while swapping two elements using display:none

I have made a simple code snippet to swap two divs using two separate buttons via javascript. Here is the code:
function SwapDivsWithClick2(div1, div2) {
d1 = document.getElementById(div1);
d2 = document.getElementById(div2);
d1.style.display = "block";
d2.style.display = "none";
}
.button1 {
content: url("http://placehold.it/250x50/000000/FFFF00?text=CLICK+FOR+DIV1");
}
.button2 {
content: url("http://placehold.it/250x50/000000/FFFF00?text=CLICK+FOR+DIV2");
}
<body>
<div class="buttons">
<span><a href="javascript:SwapDivsWithClick2('div1','div2')"><img class="button1 fade"/></span>
<span><a href="javascript:SwapDivsWithClick2('div2','div1')"><img class="button2 fade"/></span>
</div>
<div id="div1" style="display: block;">
<img src="http://placehold.it/500x300/FF0000/FFFFFF?text=div1" />
</div>
<div id="div2" style="display: none;">
<img src="http://placehold.it/500x300/0000FF/FFFFFF?text=div2" />
</div>
</body>
Codepen link to the above code: http://codepen.io/misteeque/pen/qNZJLj
In the above, how can I add a transition effect like "fade" or something else when the div's are swapped? If not possible via display: none, is there any other way to achieve the transition effect?
Thank you!

how to do hover over image then image blurred and overlay text appears

I am making portfolio website and I tried this code and it worked
<div id="nytimes" class="portfolio-thumbnail" style="left: 100px; top: 80px;">
<span class="text">
NY times magazine: Table of Contents
</span>
<img src="images/nytimes.png" alt="">
</div>
with this js
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .8;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
}
it works like this : http://codepen.io/anon/pen/mkpha
however, i tried to use responsive grid but then i am not sure how to incorporate the function of image blurred and text overlay appears with this code here.
<div class="row">
<div class="col-xs-4"><img src="images/nytimes.png" class="img-responsive"></div>
<div class="col-xs-4"><img src="http://placehold.it/450x600" class="img-responsive"> </div>
<div class="col-xs-4"><img src="http://placehold.it/450x600" class="img-responsive"> </div>
</div>

I don't know why would want to use javascript if you simply want to have a text overlay, on hovering over a specific div. I am still not certain if this is what you want to achieve, but I did a simple mock-up on what I understood from your question:
http://codepen.io/nighrage/pen/DqKLj
let me know if this not what you were trying to achieve