Text scroll using jQuery - javascript

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>

Related

Replacing one div with another according to a value

So I have 2 different card designs and I want them to change if a value is higher or lower than 20.
I tried using document.getElementById("div2").innerHTML = "whatever"; but it only changes text.
<body>
<div id="div1">This is div 1</div>
<div id="div2">this is div2</div>
</body>
<script>
if(data[i].value > 20)
//*replace div1 with div2*
else if(data[i].value < 20)
*replace div1 with div2*
</script>
To show/hide divs:
function showHideDiv(value) {
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
if (value > 20) {
div1.style.display="none";
div2.style.display="block";
} else if (value < 20) {
div1.style.display="block";
div2.style.display="none";
}
}
showHideDiv(30)
setTimeout(function() {
showHideDiv(10)
}, 2000)
<div id="div1">This is div 1</div>
<div id="div2">this is div2</div>
To reposition divs:
Here's a reusable function to help illustrate how it's done. If you look at the snippet, it will show both results - the second coming 2 seconds after the first.
Essentially, you need to use this syntax:
theParentContainer.insertBefore(firstDiv, secondDiv);
where theParentContainer is the parent of both divs, firstDiv is the div you want to go first, and secondDiv is the element to go after the first.
function moveDiv(value) {
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
if (value > 20) {
div2.parentNode.insertBefore(div2, div1);
} else if (value < 20) {
div2.parentNode.insertBefore(div1, div2);
}
}
moveDiv(30)
setTimeout(function() {
moveDiv(10)
}, 2000)
<div id="div1">This is div 1</div>
<div id="div2">this is div2</div>
Try using the hidden attribute. For example:
<body>
<div id="div1" [hidden]="data[i].value > 20">This is div 1</div>
<div id="div2" [hidden]="data[i].value < 20">this is div2</div>
</body>

How to hide an item?

var r1=Math.floor(Math.random()*255)
var g1=Math.floor(Math.random()*255)
var b1=Math.floor(Math.random()*255)
$(".color1").click(function (){
$(this).css("background", "rgb(" + r1 + "," + g1 + "," + b1 + ")")
})
$(document).ready(function () {
$(document).on('click', function (event) {
$target = $(event.target);
$target.addClass('clicked');
});
})
var numItems
var getfirstclass
var getsecondclass
$('div').click(function saveclassnames(){
var getfirstclass=$(this).attr('class')
console.log(getfirstclass)
var getsecondclass=$(this).attr('class')
console.log(getsecondclass)
getfirstclass===null
getsecondclass===null
})
$('div').click(function remove(){
var numItems = $('.clicked').length
if(numItems===2 && getfirstclass === getsecondclass){
$('.clicked').css('opacity', '0')
}
else{
$('.clicked').css('background', 'black')
}
})
<body>
<div class="container">
<div class="row">
<div class="color1"></div>
<div class="color2"></div>
<div class="color3"></div>
<div class="color4"></div>
</div>
<div class="row">
<div class="color5"></div>
<div class="color3"></div>
<div class="color1"></div>
<div class="color6"></div>
</div>
<div class="row">
<div class="color7"></div>
<div class="color6"></div>
<div class="color8"></div>
<div class="color5"></div>
</div>
<div class="row">
<div class="color7"></div>
<div class="color8"></div>
<div class="color4"></div>
<div class="color2"></div>
</div>
</div>
</body>
I am trying to make a game called "Memory" (if 2 flipped cards are same, the cards will disappear, but if the cards are not the same, they will flip back). But there is a difference between the original one). I am using random colors instead of card pictures, but I cannot make <div> elements with the same background-color disappear, or flip back if they are not the same. Can someone explain to me why this code does not work?
Thanks.
opacity: 0; hiding generates a lot of space although the element is not visible.
background: black; – the element needs to blend in with the background, otherwise it will not work (technically it won't work)
You can either do this:
$('yourItem').css({
display: 'none'
});
Or, the "simplest way to hide an element":
$('yourItem').hide();
For more information see https://api.jquery.com/hide/
You could use
display: none
If that messes with other stuff, use
visiblity: hidden;

Open and close different divs through clicking menu

I’m having trouble with my JavaScript regarding turning visibility on and off between divs.
I have two columns; on the left is a menu and on the right is the space where I would like to display different divs. My intention is that:
When you click on a menu item, the relevant div appears on the right.
(i.e. display: block)
When you click again on the same menu item, the
relevant div closes (i.e. display: none)
When you click on a menu
item, the relevant div opens, AND all other open divs close.
I've got it working nearly as I want it, though the current issue is that opening a div requires clicking twice. Also, as I am a complete novice at javascript, I imagine my code is MUCH more cumbersome than it needs to be. I’ve looked through similar examples but I can’t quite find the answer. Any help would be much appreciated!
function switchVisible() {
if (document.getElementById('hidden1')) {
if (document.getElementById('hidden1').style.display == 'none') {
document.getElementById('hidden1').style.display = 'block';
document.getElementById('hidden2').style.display = 'none';
document.getElementById('hidden3').style.display = 'none';
}
else {
document.getElementById('hidden1').style.display = 'none';
}
}
}
function switchVisible2() {
if (document.getElementById('hidden2')) {
if (document.getElementById('hidden2').style.display == 'none') {
document.getElementById('hidden2').style.display = 'block';
document.getElementById('hidden1').style.display = 'none';
document.getElementById('hidden3').style.display = 'none';
}
else {
document.getElementById('hidden2').style.display = 'none';
}
}
}
function switchVisible3() {
if (document.getElementById('hidden3')) {
if (document.getElementById('hidden3').style.display == 'none') {
document.getElementById('hidden3').style.display = 'block';
document.getElementById('hidden1').style.display = 'none';
document.getElementById('hidden2').style.display = 'none';
}
else {
document.getElementById('hidden3').style.display = 'none';
}
}
}
<div class="leftcolumn">
<div class="leftmenu">
<div class="subheader" onclick="switchVisible()">Content 1</div>
<div class="subheader" onclick="switchVisible2()">Content 2</div>
<div class="subheader" onclick="switchVisible3()">Content 3</div>
</div>
</div>
<div class="rightcolumn">
<div id="hidden1">
Content 1
</div>
<div id="hidden2">
Content 2
</div>
<div id="hidden3">
Content 3
</div>
</div>
You can add similar classes to the elements to use them as reference. Then toggle one class in the matching clicked container:
function switchVisible(el) {
var classN = el.classList.value.split(' ')[1];
if(classN == 'c1'){
document.querySelector('.rightcolumn .c1').classList.toggle('hideContent');
}
else if(classN == 'c2'){
document.querySelector('.rightcolumn .c2').classList.toggle('hideContent');
}
else if(classN == 'c3'){
document.querySelector('.rightcolumn .c3').classList.toggle('hideContent');
}
var arrayOfElements = document.querySelectorAll('.rightcolumn div').forEach(function(div,i){
if(!div.classList.value.includes(classN) && !div.classList.value.includes('hideContent')){
div.classList.toggle('hideContent');
}
});
}
.rightcolumn div {
font-size:20px;
color: green;
}
.hideContent{
display:none;
}
<div class="leftcolumn">
<div class="leftmenu">
<div class="subheader c1" onclick="switchVisible(this)">Content 1</div>
<div class="subheader c2" onclick="switchVisible(this)">Content 2</div>
<div class="subheader c3" onclick="switchVisible(this)">Content 3</div>
</div>
</div>
<div class="rightcolumn">
<div id="hidden1" class="c1 hideContent">Content 1</div>
<div id="hidden2" class="c2 hideContent">Content 2</div>
<div id="hidden3" class="c3 hideContent">Content 3</div>
</div>
I would instead of making it invisible just to offset it by a lot then set that value as a global variable then just set it to the CSS position attribute. Remember to make the position relative!

jQuery: show/hide are instantaneous

I've one div that contains to other one:
<div>
<div id="card-container">....</div>
<div id="wait-for-result-container" style="display: none;">...</div>
</div>
On some event, I want to change the displayed element, with a fadeIn/fadeOut effect.
$('#card-container').hide(5000);
$('#wait-for-result-container').show(5000);
(I put some big number to really see the effect)
But when I trigger my effect, it is instantaneous, there is no fade-in/fade-out.
I'm not sure it matters, but I'm using jquery-3.1.1 and bootstrap 4 alpha.
Any idea what is going wrong?
EDIT
As asked, here is some clarification.
The element that I'm trying to hide is hided immediatly and the one I show is appearing immediately.
EDIT
I tried to put a demo here with the code from above:
$('#myBt').click(function(){
$('#card-container').hide(5000);
$('#wait-for-result-container').show(5000);
});
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Click me</button>
If you can use the full version of jQuery, give jQuery fadeOut and fadeIn a try :)
$('#myBt').click(function(){
var duration = 5000;
$('#card-container').fadeOut(duration);
$('#wait-for-result-container').delay(duration).fadeIn(duration);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Example1</button>
If you have to stick with the slim version, you can use setInteval
$('#myBt').click(function(){
var duration = 5000;
var op = 0.9; // initial opacity
var timer1 = setInterval(function () {
if (op <= 0.1){
clearInterval(timer1);
op = 0;
$('#card-container')[0].style.display = 'none';
}
$('#card-container')[0].style.opacity = op;
op -= 100/duration;
}, 100);
var timer2 = setInterval(function () {
if (op <= 0){
$('#wait-for-result-container')[0].style.opacity = 0;
$('#wait-for-result-container').show();
}
if (op >= 1){
clearInterval(timer2);
}
if($('#wait-for-result-container').is(':visible')){
$('#wait-for-result-container')[0].style.opacity = op;
op += 100/duration;
}
}, 100);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Example2</button>

how to pass accurate multiple selections data using ui-selectable

I am useing jquery-ui selectable, I choose multiple divs, For example: divs 1-3 and divs 5-6 after the selection I pass the divs's info to an array and later to a string (strToSend). the problem is : when I choose divs 1-3 and divs 5-6 I get this Information :
for divs 1-3 : 100,200,300.
for divs 5-6 :100,200,300,400,500,600. -> what I really need is to get: 500,600.At first I thought that I need to clear my array in each loop so I tried : _info1.length = 0; _info1 = []; - no change.
I hope my problem is clear, please ideas what to do ?..
//HTML
<div class="ui-selectable" id="day" style="width: 100px; float: left;">
Sunday
<div class="ui-selectee" id="1" >100 </div>
<div class="ui-selectee" id="2" > 200 </div>
<div class="ui-selectee" id="3" > 300 </div>
<div class="ui-selectee" id="4" > 400 </div>
<div class="ui-selectee" id="5"> 500 </div>
<div class="ui-selectee" id="6"> 600 </div>
<div class="ui-selectee" id="7"> 700 </div>
</div>
//Jquery
$(function () {
$("#day").bind("mousedown", function (event) {
return event.metaKey = true;
}).selectable({
stop: function () {
_info1.push(0);
$(".ui-selected", this).each(function () {
var id = this.id;
_info1.push(id);
});
strToSend += _info1[0] + "_" + _info1[1] + "-" + _info1[_info1.length - 1] + "*";
}
});});
Here's a fiddle: http://jsfiddle.net/tS2cV/
Not sure where you're declaring your _info1 but it looks like you just want it to hold the divs you've selected. Your each function (below) goes through and grabs all divs that have been selected, so you don't have to manually push anything into it beforehand.
All I did was declare _info inside of the stop function - I'm sure what you were doing with the string to send so I removed it for simplicity:
$(function () {
$("#day").bind("mousedown", function (event) {
return event.metaKey = true;
}).selectable({
stop: function () {
var _info1 = [];
$(".ui-selected", this).each(function () {
var id = this.id;
_info1.push(id);
});
alert(_info1);
}
});});

Categories

Resources