$(.class).eq().append appends to wrong class after working twice - javascript

I'm making an App that reads a log file, generates cards images from it and then stores the card name into an tag onto divs. I have an if sentence where after 12 picks, the card names are appended onto the next div with the same class. It used to work fine, but now I have the divs .display set to none at start and later set it to inline-block manualy, and now it will only append my onto the first two divs instead of all four the second div just overflows until I run out of cards.
Here's LOG FILE that the app opens (you need to download it manualy and then click browse in the fiddle to run it)
Here's a fiddle of the whole thing, hope it's not too confusing
var prelink = "http://mtgimage.com/card/";
var postlink = ".jpg";
var booster = 1;
var pick = 0;
var currentCards = 15;
var sortingCardsInt = 0;
var cards = [];
for(t=0;t<45;t++) {
cards.push([]);
}
var picks = [];
$("#draftlog").change(function() {
//hides start message, tip jar
$('.startMessage').css('display', 'none');
$('.tipJar').css('display','none');
//shows picks list
$('.picks').eq(0).css('display', 'inline-block');
$('.picks').eq(1).css('display', 'inline-block');
$('.picks').eq(2).css('display', 'inline-block');
$('.picks').eq(3).css('display', 'inline-block');
//removes card container background
$('.cardcontainer').css('background-image','none');
//gets first file from draftlog
var logFile = $('#draftlog').get(0).files[0];
//reads first file from draftlog as text
var reader = new FileReader;
reader.readAsText(logFile);
reader.onload = function(e) {
var rawLog = reader.result;
//splits the text into an array of strings for every new line
var re=/\r\n|\n\r|\n|\r/g;
arrayOfLines = rawLog.replace(re,"\n").split("\n");
//removes " "
for(x=0;x<arrayOfLines.length;x++) {
arrayOfLines[x] = arrayOfLines[x].replace(/ /g,'');
}
//sorts cards into pick arrays
sortCards(15);
sortCards(167);
sortCards(319);
//tags picked card
for(y=0;y<cards.length;y++) {
for(x=0;x<cards[y].length;x++) {
var start = cards[y][x].substring(0,4);
if(start === "--> ") {
picks.push(x);
cards[y][x] = cards[y][x].replace(/--> /g,'');
}
}
}
//turns picks into links
for(y=0;y<cards.length;y++) {
for(x=0;x<cards[y].length;x++) {
cards[y][x] = prelink.concat(cards[y][x]);
cards[y][x] = cards[y][x].concat(postlink);
cards[y][x] = cards[y][x].replace(/ /g,'_');
}
}
loadCards();
};
});
$(".card").hover(
function() {
},
function() {
});
$(".card").click(function () {
if ($(this).hasClass('selected')) {
//formats and appends cardname onto related div
var cardname = $(this).attr('src');
cardname = cardname.replace("http://mtgimage.com/card/",'');
cardname = cardname.replace(".jpg",'');
cardname = cardname.replace(/_/g,' ');
if(pick < 12){
$(".picks").eq(0).append('<a class="picksave">'+cardname+'</a>');
}
else if(pick => 12 && pick < 24){
$(".picks").eq(1).append('<a class="picksave">'+cardname+'</a>');
}
else if(pick => 24 && pick < 36){
$(".picks").eq(2).append('<a class="picksave">'+cardname+'</a>');
}
else if(pick => 36){
$(".picks").eq(3).append('<a class="picksave">'+cardname+'</a>');
}
//counts pick, changes currentCards number
if (currentCards > 1) {
pick++;
currentCards--;
//opens next booster
} else {
pick++;
booster++;
currentCards = 15;
}
clearCards();
loadCards();
} else {
//clears all card borders to white
for(x=0;x<15;x++) {
$('.card').eq(x).removeClass('selected');
$('.card').eq(x).css('border','4px solid white');
$('.historyPick').css('border', '4px solid lime');
}
//selects card, makes border gray
$(this).addClass('selected');
$(this).css('border', '4px solid gray');
}
});
function loadCards() {
//writes pick onto cards, makes them visible
for(x=0;x<currentCards;x++) {
$(".card").eq(x).attr('src', cards[pick][x]);
$(".card").eq(x).css('display', 'inline');
$(".card").eq(picks[pick]).addClass('historyPick');
$('.card').eq(picks[pick]).css('border', '4px solid lime');
}
};
function clearCards() {
//hides all cards
for(x=0;x<15;x++) {
$('.card').eq(x).css('display', 'none');
$('.card').eq(x).attr('src', 'http://mtgimage.com/card/cardback.jpg');
$('.card').eq(x).removeClass('historyPick selected');
$('.card').eq(x).css('border', '4px solid white');
}
}
function sortCards(num) {
var currentLine = num;
var numCards = 15;
var pickNumber = 0;
for(y=0;pickNumber<15;y++) {
for(x=0;x<numCards;x++) {
cards[sortingCardsInt].push(arrayOfLines[currentLine]);
currentLine++;
}
pickNumber++;
sortingCardsInt++;
numCards--;
currentLine +=2;
}
}
body {
background-color:#0066ff;
}
.cardcontainer {
margin:auto;
width:1260px;
height:650px;
border-radius: 3px;
overflow:auto;
background-color:white;
background-image: url("images/program/cardbox.jpg");
background-repeat:no-repeat;
background-size:100%;
}
.startMessage {
font-family:verdana;
font-size:20px;
font-weight:bold;
text-align: center;
width: 420px;
height:325px;
margin-top:162px;
margin-right:auto;
margin-left:10%;
background-color:white;
border-radius:10px;
padding:10px;
opacity:0.8;
}
.cardbox {
border-radius: 5px;
width:auto;
display:inline-block;
}
.card {
border: 4px solid white;
width:192px;
height:272px;
border-radius: 3px;
display:none;
}
.picksbox {
width:1260px;
height:285px;
margin:auto;
background-color:white;
background-image:url("images/program/picksbox.jpg");
border-radius:3px;
}
.tipJar {
width:146px;
height:250px;
background-image:url("images/program/TipJar.jpg");
background-size:100%;
border-radius:10px;
margin:auto;
opacity:0.7;
position:relative;
top:17px;
}
.picks {
display:none;
width:315px;
height:285px;
margin:auto;
overflow:auto;
font-family:verdana;
font-weight:bold;
}
.picksave {
font-family:verdana;
margin:5px;
display:block;
font-size:14px;
}
.options {
margin-top:5px;
margin-bottom:5px;
margin-right:auto;
margin-left:auto;
width:1260px;
background-color:white;
border-radius:3px;
}
<html>
<head>
<title>MTGO draft replayer 0.1.3</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<div class="cardcontainer">
<div class ="startMessage">
<br/>
Welcome to the TopdeckAndWreck.com MTGO Draft Replayer!<br/>
<br/>
In case you're not sure where and how to start check out our tutorial or FAQ pages.<br/>
<br/>
Thanks for visiting and have fun!
</div>
<div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div
><div class="cardbox">
<img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
</div>
</div>
<div class="options">
<input type="file" name="draftlog" id="draftlog">
</div>
<div class="picksbox">
<div class='tipJar'></div>
<div class="picks"></div
><div class="picks"></div
><div class="picks"></div
><div class="picks"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="magic.js"></script>
</body>
</html>

Have tested your logical operators, especially the greater than equal operators in the following part of the code:
else if(pick => 12 && pick < 24){
$(".picks").eq(1).append('<a class="picksave">'+cardname+'</a>');
}
else if(pick => 24 && pick < 36){
$(".picks").eq(2).append('<a class="picksave">'+cardname+'</a>');
}
else if(pick => 36){
$(".picks").eq(3).append('<a class="picksave">'+cardname+'</a>');
}
When I tested => operator, I got the following error: Uncaught SyntaxError: Unexpected token => . Maybe >= should be used instead. I hope this helps :-)
console.log( 3 >= 2); //true
console.log( 3 <= 2); //false
//console.log( 3 => 2); //Uncaught SyntaxError: Unexpected token =>

Related

Hi, I'm trying to replicate an event listener with different elements on my page, pairing different elements with different keys

const input = document.querySelector('input');
document.addEventListener('keydown', logKey);
function logKey(e) {
if(e.code == 'KeyB') {
var tag = document.querySelector('.batman');
tag.classList.toggle('active');
}
}
body {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; background:#333 url(https://images.unsplash.com/photo-1475862013929-0af29a1197f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80) fixed 50% 50%/ cover; }
.holo {margin:0 10px 20px 10px; xwidth:300px; xheight:200px; border:5px solid rgba(0,100,200,0.5); border-radius:20px; text-align:center; color:rgba(0,100,200,0.9); background:rgba(0,0,0,0.7); transform:scale(1.0);}
.holo:hover, .holo.active {background:rgba(30,30,30,0.8); transition-duration:0.5s; transform:scale(1.1);}
.holo h1 {font:bold 30px Arial; text-transform:uppercase;}
.holo img {width:100%; width:300px; margin:10px; border-radius:20px;}
<div class="holo batman active">
<h1>Batman</h1>
<img src="https://images.unsplash.com/photo-1509347528160-9a9e33742cdb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Spiderman</h1>
<img src="https://images.unsplash.com/photo-1521714161819-15534968fc5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Iron Man</h1>
<img src="https://images.unsplash.com/photo-1509817445409-e2057fd6feac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Thor</h1>
<img src="https://images.unsplash.com/photo-1495044245703-b07f266e47b4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Spiderman 2</h1>
<img src="https://images.unsplash.com/photo-1505925456693-124134d66749?ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80">
</div>
<div class="holo">
<h1>The Dark Knight</h1>
<img src="https://images.unsplash.com/photo-1519740296995-10d3d8267019?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Avengers</h1>
<img src="https://images.unsplash.com/photo-1471877325906-aee7c2240b5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>WonderWoman</h1>
<img src="https://images.unsplash.com/photo-1517242296655-0a451dd85b30?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo">
<h1>Spiderman 3</h1>
<img src="https://images.unsplash.com/photo-1534375971785-5c1826f739d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
I want to use an event listener to get every element on the page to respond to a keypush - however, I'm having problems replicating the Javascript code for each element, it just won't work.
const input = document.querySelector('input');
document.addEventListener('keydown', logKey);
function logKey(e) {
if(e.code == 'KeyB') {
var tag = document.querySelector('.batman');
tag.classList.toggle('active');
}
}
I want to use a different key - say 'KeyA' for a different element - say '.spiderman'. I've tried replicating the code above with these replacements, but this hasn't worked.
What's the best way to achieve this?
Your forgot to assign each separate div a classname. I added the names for all of them, but only tied in batman and spiderman (b and s keys). Try it out, and you can easily add the rest of them.
const input = document.querySelector('input');
document.addEventListener('keydown', logKey);
function logKey(e) {
if(e.code == 'KeyB') {
var tag = document.querySelector('.batman');
tag.classList.toggle('active');
console.log('B clicked')
}
if (e.code == 'KeyS') {
var tag = document.querySelector('.spiderman');
tag.classList.toggle('active');
console.log('S clicked')
}
}
body {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; background:#333 url(https://images.unsplash.com/photo-1475862013929-0af29a1197f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80) fixed 50% 50%/ cover; }
.holo {margin:0 10px 20px 10px; xwidth:300px; xheight:200px; border:5px solid rgba(0,100,200,0.5); border-radius:20px; text-align:center; color:rgba(0,100,200,0.9); background:rgba(0,0,0,0.7); transform:scale(1.0);}
.holo:hover, .holo.active {background:rgba(30,30,30,0.8); transition-duration:0.5s; transform:scale(1.1);}
.holo h1 {font:bold 30px Arial; text-transform:uppercase;}
.holo img {width:100%; width:300px; margin:10px; border-radius:20px;}
<div class="holo batman">
<h1>Batman</h1>
<img src="https://images.unsplash.com/photo-1509347528160-9a9e33742cdb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo spiderman">
<h1>Spiderman</h1>
<img src="https://images.unsplash.com/photo-1521714161819-15534968fc5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo ironman">
<h1>Iron Man</h1>
<img src="https://images.unsplash.com/photo-1509817445409-e2057fd6feac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo thor">
<h1>Thor</h1>
<img src="https://images.unsplash.com/photo-1495044245703-b07f266e47b4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo spiderman2">
<h1>Spiderman 2</h1>
<img src="https://images.unsplash.com/photo-1505925456693-124134d66749?ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80">
</div>
<div class="holo darkknight">
<h1>The Dark Knight</h1>
<img src="https://images.unsplash.com/photo-1519740296995-10d3d8267019?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo avengers">
<h1>Avengers</h1>
<img src="https://images.unsplash.com/photo-1471877325906-aee7c2240b5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo wonderwoman">
<h1>WonderWoman</h1>
<img src="https://images.unsplash.com/photo-1517242296655-0a451dd85b30?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo spiderman3">
<h1>Spiderman 3</h1>
<img src="https://images.unsplash.com/photo-1534375971785-5c1826f739d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>

My jquery slider refresh rate won't update live

I am trying to develop a simple jquery slider, the slier switches between images and text each three seconds by default (var segundos = 3;), the slider has a button which acts as a play/pause action and a menu option which lets you increase or decrease the ammoun of seconds it will switch between images each time. This is done via the classes .resta and .suma(decrease and decrease).
Now, the slider works good but there is a problem, when the segundos variable (segundos means seconds) changes the effect don't take action unless the slider is paused, it won't automatically refresh while theslider is running. It has to go like this: pause slider > change default seconds > play slider > see results
My objective is to make it so it changes the refresh rate while the slider is up and running.
Here is the code:
<script>
$(document).ready(function(){
var segundos = 3000;
var stop = true;
var slideInterval;
$('.play').click(function(){
if (stop == false) {
stop = true;
$('#playpause').text('Play it');
clearInterval(slideInterval);
}
else {
stop = false;
$('#playpause').text('Pause it');
slideInterval = setInterval(swapSlides, segundos);
}
});
function swapSlides(){
//var cs = $('div.currentslide:first');
var cs = $('#polaroid1').children('.currentslide:first');
var ns = cs.next();
if(ns.hasClass('mySlides1')){
cs.removeClass('currentslide');
ns.addClass('currentslide');
}
else{
ns = $('#polaroid1').children('div.mySlides1:first');
cs.removeClass('currentslide');
ns.addClass('currentslide');
}
}
$('.resta').click(function(){
if(segundos > 1000){
segundos = segundos - 1000;
segundoss = (segundos/1000);
$('.segundos').text(" " + segundoss + "s ");
}
});
$('.suma').click(function(){
if(segundos >= 1000 && segundos < 15000){
segundos = segundos + 1000;
segundoss = (segundos/1000);
$('.segundos').text(" " + segundoss + "s ");
}
});
});
</script>
.menu{
list-style:none;
bottom:8px;
position:absolute;
font-family: 'Covered By Your Grace', cursive;
font-weight:300;
width:200px;
}
.menu > li{
}
.play{
width:59px;
height:52px;
position:absolute;
left:5px;
bottom:5px;
cursor:pointer;
z-index:10000;
}
.polaroid1{
box-shadow: 10px 10px 7px -7px rgba(0, 0, 0, 0.5);
-webkit-backface-visibility: hidden;
transform: rotate(-8deg);
margin-bottom:30px;
width:380px;
height:320px;
background-color:rgba(255, 255, 255, 1.0);
text-align:right;
padding-top:10px;
padding-right:10px;
padding-left:10px;
padding-bottom:15px;
top:15px;
left:25px;
position:relative;
}
.photo1{
width:100%;
height:85%;
position:relative;
padding:5px;
}
.date1{
margin:0;
padding-right:10px;
font-family: 'Covered By Your Grace', cursive;
transform: rotate(-5deg);
font-size:28px;
}
.mySlides1{
display:none;
width:380px;
height:320px;
position:absolute;
top:0px;
left:0px;
}
.currentslide{display:block;}
<ul class="menu hide">
<li style="font-size:22px; margin-top:8px;">Diapositivas: <span class="resta" style="cursor:pointer;">< </span><span class="segundos">3s</span><span class="suma" style="cursor:pointer;"> ></span></li>
</ul>
</div>
<div id="polaroid1" class="polaroid1">
<div class="tooltip2 play" style="background-image: url('images/heart2.png');"><span id="playpause" class="tooltiptext2">Play it</span></div>
<div class="mySlides1 fade currentslide">
<img class="photo1" src="images/IMG-20170610-WA0028.jpg">
<h3 class="date1">22-05-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170812_181516.jpg">
<h3 class="date1">12-08-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170522_112958.jpg">
<h3 class="date1">22-05-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/IMG-20170610-WA0017.jpg">
<h3 class="date1">10-06-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170819_194526.jpg">
<h3 class="date1">19-08-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170811_182103.jpg">
<h3 class="date1">11-08-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170522_124602.jpg">
<h3 class="date1">22-05-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170419_020725.jpg">
<h3 class="date1">19-04-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170520_115819.jpg">
<h3 class="date1">20-05-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170822_011703.jpg">
<h3 class="date1">22-08-2017</h3>
</div>
<div class="mySlides1 fade">
<img class="photo1" src="images/20170705_184344.jpg">
<h3 class="date1">05-07-2017</h3>
</div>
</div>
It has to go like this: pause slider > change default seconds > play
slider > see results
My objective is to make it so it changes the refresh rate while the
slider is up and running.
That's because you never do anything to your slideInterval when you increase/decrease the slide interval time (segundos).
Solution:
Add function to restart your slideInterval like so:
function _restartSlide() {
clearInterval(slideInterval);
slideInterval = setInterval(swapSlides, segundos);
}
jsfiddle link https://jsfiddle.net/sudarpochong/2za1ccra/1/

Change Icon on click and add a css class through javascript

I'm trying to make a expandable h3. For that I'll have a "plus" image to click and when it's clicked has to change to a "minus" image and I need to add a css class to the h3 to show the content. I'll paste all the code below:
<div class="default">
[ManageBlog]
<div class="msearch-result" id="LBSearchResult[moduleid]" style="display: none">
</div>
<div class="head">
<h1 class="blogname">
[BlogName] <img src="/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png" alt="Plus Button" id="ExpandBlogDescriptionImg"></h1> [RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3> [Author]
</div>
<br /> [Posts] [Pager]
</div>
<div style="clear: both"></div>
And here is the javascript:
jQuery(document).ready(function() {
$("#ExpandBlogDescriptionImg").click(function() {
var right = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png";
var left = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png";
element.src = element.bln ? right : left;
element.bln = !element.bln;
});
var img = $("#ExpandBlogDescriptionImg");
if (img.src = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png") {
$('.blogdescription').addClass("ExpandBlogDescriptionText");
} else {
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
};
});
you can use .attr function of jquery to set image source like
$('.img-selector').attr('src','plusorminusimagepath.jpg');
and you can have a boolean flag to know if it is less or more
Here i was changing alt attribute of image tag on click. the same way you can change src
jQuery(document).ready(function() {
$("#ExpandBlogDescriptionImg").click(function() {
if ($(this).attr("alt") == "+") {
$(this).attr("alt", "-");
} else {
$(this).attr("alt", "+");
}
});
var img = $("#ExpandBlogDescriptionImg");
if (img.src = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png") {
$('.blogdescription').addClass("ExpandBlogDescriptionText");
} else {
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="default">
[ManageBlog]
<div class="msearch-result" id="LBSearchResult[moduleid]" style="display: none">
</div>
<div class="head">
<h1 class="blogname">
[BlogName] <img alt="+" src="/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png" alt="Plus Button" id="ExpandBlogDescriptionImg"></h1> [RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3> [Author]
</div>
<br />[Posts] [Pager]
</div>
<div style="clear: both"></div>
You should use a sprite image and CSS, else when you click and it will load another image, for some time between image would disappear.
HTML
<div class="head">
<h1 class="blogname">
[BlogName] <span class="plus icon"></span></h1>
[RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3>
[Author]</div>
<br />
CSS
.icon{
width:30px;
height:30px;
display:inline-block;
background-image:url(plus-minus-sprite-image.png);
}
.icon.plus{
background-position:20px center;
}
.icon.minus{
background-position:40px center;
}
JS
$('.icon').click(function(){
$(this).toggleClass("plus minus");
if($(this).hasClass("plus")){
$('.blogdescription').addClass("ExpandBlogDescriptionText");
}else{
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
}
// Or $('.blogdescription').toggleClass("ExpandBlogDescriptionText");
});
$("#ExpandBlogDescriptionImg").click( function(e){
var right = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png";
var left = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png";
if($(e.currentTarget).attr('img') == left){
$(this).hide();
$(e.currentTarget).attr('img',right);
}else{
$(this).show();
$(e.currentTarget).attr('img',left);
}
});

Jquery Custom image gallery

I wrote a little complex code (Coz i am not an expert) to mage a gallery.. But i want to do it more simple.. Bellow is my code:
This is the buttons:
<div class="pic1">Image1</div>
<div class="pic2">Image2</div>
<div class="pic3">Image3</div>
This is the each image:
<div class="PicsHolder">
<div id="pic1" style="padding: 2px; margin: auto;">
<img src="image_gallery/1.jpg" alt="" width="100%" />
<div style="width:610px; padding-bottom:4px; margin-top:10px; float:left; color:#000; font-family:Verdana, Geneva, sans-serif;">
Some text in Here!!!
<div style="clear:both;"></div>
</div>
</div>
<div id="pic2" style="padding: 2px; margin: auto; display: none;">
<img style="margin: 0 auto;" src="image_gallery/2.jpg" alt="" width="100%" border="0" />
<div style="width:610px; padding-bottom:4px; margin-top:10px; float:left; color:#000; font-family:Verdana, Geneva, sans-serif;">
Some text in Here Image 2!!!
<div style="clear:both;"></div>
</div>
</div>
<div id="pic3" style="padding: 2px; margin: auto; display: none;">
<img style="margin: 0 auto;" src="image_gallery/3.jpg" alt="" width="100%" border="0" />
<div style="width:610px; padding-bottom:4px; margin-top:10px; float:left; color:#000; font-family:Verdana, Geneva, sans-serif;">
Some text in Here Image 3!!!
<div style="clear:both;"></div>
</div>
</div>
</div>
And my JAvascript (and the complicated part)
<script type="text/javascript">
$(document).ready(function() {
var myString = window.location.href;
var finals = myString[myString.length - 1];
if (finals == "") {
$("#pic2").hide();
$("#pic3").hide();
$("#pic1").fadeIn("fast");
}
if (finals == "1") {
$("#pic2").hide();
$("#pic3").hide();
$("#pic1").fadeIn("fast");
}
if (finals == "2") {
$("#pic1").hide();
$("#pic3").hide();
$("#pic2").fadeIn("fast");
}
if (finals == "3") {
$("#pic1").hide();
$("#pic2").hide();
$("#pic3").fadeIn("fast");
}
});
</script)
<script type="text/javascript">
$(document).ready(function() {
var currentURL = window.location.href;
var p1 = "?id=1";
var p2 = "?id=2";
var p3 = "?id=3";
var p1url = window.location.href + p1;
var p2url = window.location.href + p2;
var p3url = window.location.href + p3;
$(".pic1").click(function() {
$("#pic2").hide();
$("#pic3").hide();
$("#pic4").hide();
window.location.href = p1url;
$("#pic1").fadeIn("fast");
});
$(".pic2").click(function() {
$("#pic1").hide();
$("#pic3").hide();
window.location.href = p2url;
$("#pic2").fadeIn("fast");
});
$(".pic3").click(function() {
$("#pic1").hide();
$("#pic2").hide();
window.location.href = p3url;
$("#pic3").fadeIn("fast");
});
});
</script>
Is there any possibility to do all this jquery code more simple?
is there any possibility to make it more dynamic? I mean if i want to add more images
like this way:
Some text in Here Image 2!!!
The jquery code that i am using to calculate the images and generate the rest code?
Regards!

HTML Javascript Slideshow Optimization

I had to write my own code of a couple of lines for displaying slideshow on my websites splashpage. I couldnt use any plugin as I had designed the website on HTML5 and css3 and images were synchronized to resize with the browser. Now, coming to the actual problem, the last image takes double time as taken by
each image in the list. Below is the HTML and the javascript pasted.
HTML
<div id="backgrounds">
<div class="bgs" style="z-index:1000;">
<!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>-->
<img src="images/main_nop.jpg" alt="" class="background" />
</div>
<div class="bgs" style="z-index:999; display: none">
<!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>-->
<img src="images/main_jkl.jpg" alt="" class="background" />
</div>
<div class="bgs" style="z-index:998; display: none">
<!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>-->
<img src="images/main_ghi.jpg" alt="" class="background" />
</div>
<div class="bgs" style="z-index:997; display: none">
<!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>-->
<img src="images/main_def.jpg" alt="" class="background" />
</div>
<div class="bgs" style="z-index:996; display: none">
<!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>-->
<img src="images/main_abc.jpg" alt="" class="background" />
</div>
</div>
JAVASCRIPT
var count = 0;
var repeatCount = 0;
var backgrounds = $('.bgs').length;
function startSlideShow() {
myRecFunc = setInterval(function () {
if (count == backgrounds) {
$('.bgs').eq(0).stop(true, true).hide(1000, 'easeOutExpo');
$('.bgs').eq(backgrounds - 1).show(1000, 'easeOutExpo');
}
if (count < backgrounds) {
$('.bgs').eq(count).stop(true, true).show(1000, 'easeOutExpo');
$('.bgs').eq(count - 1).stop(true, true).hide(1000, 'easeOutExpo');
count++;
}
else {
count = 0;
repeatCount++;
}
}, 1000);
}
startSlideShow();
The first if() in the code above is the one I added to handle the situation I stated on top, thanks in advance for the help.
You have a condition where you do nothing for a whole interval which is your "else" case. Try moving that check inside so that it happens immediately.
var count = 0;
var repeatCount = 0;
var backgrounds = $('.bgs').length;
function startSlideShow() {
myRecFunc = setInterval(function () {
$('.bgs').eq(count).stop(true, true).show(1000, 'easeOutExpo');
$('.bgs').eq(count - 1).stop(true, true).hide(1000, 'easeOutExpo');
count++;
if (count === backgrounds) {
count = 0;
repeatCount++;
}
}, 1000);
}
startSlideShow();​

Categories

Resources