Number of elements in turn.js - javascript

I have a number of divs with the class "append".
The problem is that when I use the plugin turn.js, the function .size() return a wrong result
Here is my HTML
<div id="book">
<div class="folhas" id="0">
<div class="back_img" ></div>
<div class='append' id="foto0"></div>
<div class="legenda_div" id="legenda0">
<textarea class='legenda'></textarea>
</div>
</div>
<div class="folhas" id="1">
<div class='append' id="foto2"></div>
<div class="legenda_div">
<textarea class='legenda'></textarea>
</div>
</div>
<div class="folhas" id="2">
<img class="back_img_fixo" src="imagens/back1.png" width="100%"/>
<div class='append' id="foto2"></div>
<div class="legenda_div">
<textarea class='legenda'></textarea>
</div>
</div>
<div class="folhas" id="3">
<img class="back_img_fixo" src="imagens/back2.png" />
<div class='append' id="foto3"></div>
<div class="legenda_div">
<textarea class='legenda'></textarea>
</div>
</div>
<div class="folhas" id="4">
<div class="back_img" ></div>
<div class='append' id="foto4"></div>
<div class="legenda_div">
<textarea class='legenda'></textarea>
</div>
</div>
<div class="folhas" id="5">
<div class="back_img" ></div>
<div class='append' id="foto5"></div>
<div class='append' id="foto6"></div>
<div class='append' id="foto7"></div>
<div class='append' id="foto8"></div>
<div class='append' id="foto9"></div>
</div>
<div class="folhas" id="6">
<div class="back_img" ></div>
<div class='append' id="foto10"></div>
<div class='append' id="foto11"></div>
</div>
<div class="folhas" id="7">
<div class="back_img" ></div>
<div class='append' id="foto12"></div>
<div class='append' id="foto13"></div>
<div class='append' id="foto14"></div>
</div>
<div class="folhas" id="8">
<div class="back_img" ></div>
<div class='append' id="foto15"></div>
<div class='append' id="foto16"></div>
<div class='append' id="foto17"></div>
<div class='append' id="foto18"></div>
</div>
<div class="folhas" id="9">
<div class="back_img" ></div>
<div class='append' id="foto19"></div>
<div class='append' id="foto20"></div>
</div>
<div class="folhas" id="10">
<div class="back_img" ></div>
<div class='append' id="foto21"></div>
</div>
</div>
And here is my js
$(window).load(function(){
alert($(".append").size());
$('#book').turn({
gradients: true,
acceleration: true
});
alert($(".append").size());
})
The first alert gives me the right answer, 22. But the second alert output 10!!
And when I need to interact with an element above index 10, the jquery function just doesn't work
The big problem is that I can't manipulate de DOM elements above 10!


Take a look at this fiddle I set up http://jsfiddle.net/y8xaX/
$( window ).load( function(){
var item = $( '#book' ).find('.append');
var len = item.length;
alert(len);
$('#book').turn({
gradients: true,
acceleration: true
});
alert(len);
});

Related

toggle with closest at sametime with jQuery for show/hide a item list?

How I can use a toggle with closest at same time with jQuery for show/hide a item list?
I have been trying with this, but it is tiring to have to do it for each element
<div class="sidebar-suboptions-box3 main-head-trigger">
<a href="javascript:void(0)" class="sidebar-suboptions-content dsp-f bullet-point active">
<div>
<div class="sidebar-holder-portf">Portafolio 100000-1</div>
<div class="sidebar-suboptions-money">$ 1,022,158.81</div>
</div>
</a>
</div>
<div class="block-profile-portfolios-secondary main-body-trigger" style="display: none;">
<hr class="sidebar-inteligo-hr-2">
<div>
<div class="head-portfolio-active cash-head-trigger">
<div class="sidebar-suboptions-title horizontal-bar"> <em>Cash</em> y equivalentes
<br><div class="sidebar-suboptions-money">$ 726,134.93</div>
</div>
</div>
<div class="portfolio-active-subitems cash-body-trigger" style="display: none;">
<div class="portfolio-active-subitems-head">
<div class="sidebar-subblock-secondary-2">
<div class="sidebar-subblock-title">Cuenta trading
<br><div class="sidebar-subblock-money-2">$ 726,134.93</div>
</div>
</div>
<div class="sidebar-subblock-secondary-2">
<div class="sidebar-subblock-title">Prod. estructurados
<br><div class="sidebar-subblock-money-2">$ 726,134.93</div>
</div>
</div>
<div class="sidebar-subblock-secondary-2">
<div class="sidebar-subblock-title">Depósitos
<br>
<div class="sidebar-subblock-money-2">$ 726,134.93</div>
</div>
</div>
</div>
</div>
<div class="head-portfolio-active activos-head-trigger">
<div class="sidebar-suboptions-title horizontal-bar">Activos
<br><div class="sidebar-suboptions-money-2">$ 726,134.93</div>
</div>
</div>
<div class="portfolio-active-subitems activos-body-trigger" style="display: none;">
<div class="portfolio-active-subitems-head">
<div class="sidebar-subblock-secondary-2">
<div class="sidebar-subblock-title">Cuenta trading
<br><div class="sidebar-subblock-money-2">$ 726,134.93</div>
</div>
</div>
<div class="sidebar-subblock-secondary-2">
<div class="sidebar-subblock-title">Prod. estructurados
<br><div class="sidebar-subblock-money-2">$ 726,134.93</div>
</div>
</div>
<div class="sidebar-subblock-secondary-2">
<div class="sidebar-subblock-title">Depósitos
<br>
<div class="sidebar-subblock-money-2">$ 726,134.93</div>
</div>
</div>
</div>
</div>
</div>
</div>
$( ".main-head-trigger" ).click(function() {
$( ".main-body-trigger" ).toggle( "fast", function() {
// Animation complete.
});
});

How to update all easypiecharts in JavaScript(js)

I have a problem and that is I can not update all charts in my program.
I can update one of the four charts with the following command, but I cannot update the other three.
$('.chart').data('easyPieChart').update(60);
This is my html code
<div id="content">
<div class="b-skills">
<div class="container">
<div id="row">
<div class="col-md-5">
<div class="skill-item center-block align:center">
<div class="chart-container">
<div id="CO" class="chart" data-percent="0">
</div>
</div>
<p id="COP">CO</p>
<p id="colim"></p>
</div>
</div>
<div class="col-md-5">
<div class="skill-item center-block">
<div class="chart-container">
<div id="CO2" class="chart" class="boba" data-percent="90">
<a class="percent" data-after="%" style="text-decoration: none; color:black"></a>
</div>
</div>
<p id="CO2P">CO2</p>
<p id="valueCO2"></p>
</div>
</div>
</div>
<div id="row">
<div class="col-md-5">
<div class="skill-item center-block">
<div class="chart-container">
<div id="Volume" class="chart" data-percent="0">
<a class="percent" data-after="%" style="text-decoration: none; color:black"></a>
</div>
</div>
<p id="laermP">Lautstärke</p>
<p id="laemlim"></p>
</div>
</div>
<div class="col-md-5">
<div class="skill-item center-block">
<div class="chart-container">
<div id="yes4" class="chart" data-percent="">
<a class="percent" data-after="%" style="text-decoration: none; color:black"></a>
</div>
</div>
<p id="feuchtigkeitP">Luftfeuchtigkeit</p>
<p id="teamplim"></p>
</div>
</div>
</div>
</div>
</div>
How can i update all four charts separatly, so i can change every chart value independently.

Cypress - waiters for dependent sub elelemnts

I'm stuck with problem in cypress
there is dynamic DOM:
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
<div class="Item">
<div class="Name"> Name2 </div>
<div class="Color"> Color2 </div>
<div class="Add"> Add </div>
</div>
</div>
elements .Item appear dynamically how I can wait until "Item" with
<div class="Name"> Name3 </div>
<div class="Color"> Color3 </div>
appear in this list and get .Item via Cypress
DOM before
before
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
</div>
after
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color2 </div>
<div class="Add"> Add </div>
</div>
</div>
or
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
<div class="Item">
<div class="Name"> Name2 </div>
<div class="Color"> Color2 </div>
<div class="Add"> Add </div>
</div>
</div>
or it could be
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
<div class="Item">
<div class="Name"> Name2 </div>
<div class="Color"> Color2 </div>
<div class="Add"> Add </div>
</div>
</div>
need to wait second row appear by Name and Color

Since class="Item" is the common factor, use a cy.get() with retry on the count of it.
cy.get('.Item').should('have.length', 2)

on npm there is a package named cypress-wait-until that should work fine
Installation
npm i -D cypress-wait-until
Import
import 'cypress-wait-until';
Usage
Refere to the official npm site

jQuery show/hide methods arent working

Here is my codepen for you guys to play with.... CodePen.io
I cannot seem to get the #play-again button to show up once a game has finished using $('#play-again').show().
Any thoughts on this???
Update Added raw html link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="banner">
<p>tic-tac-toe</p>
<button id="play-again"> <i class="fa fa-repeat"></i></button>
</div>
<div class="board">
<div class="row" id="row-1">
<div class="col" id="col-1-1">
<div class="content"></div>
</div>
<div class="col" id="col-1-2">
<div class="content"></div>
</div>
<div class="col" id="col-1-3">
<div class="content"></div>
</div>
</div>
<div class="row" id="row-2">
<div class="col" id="col-2-1">
<div class="content"></div>
</div>
<div class="col" id="col-2-2">
<div class="content"></div>
</div>
<div class="col" id="col-2-3">
<div class="content"></div>
</div>
</div>
<div class="row" id="row-3">
<div class="col" id="col-3-1">
<div class="content"></div>
</div>
<div class="col" id="col-3-2">
<div class="content"></div>
</div>
<div class="col" id="col-3-3">
<div class="content"></div>
</div>
</div>
</div>
</div>
The issue is that you must place the button#play-again outside the p when i changed, it is working for me

ContentFlow - div max-width not working

I am trying to use a div instead of an image for the item and content but it won't set with the width correctly. I want it to work like the images do.
http://jsfiddle.net/ququat29/ example code
<div class="ContentFlow">
<div class="loadIndicator">
<div class="indicator"></div>
</div>
<div class="flow">
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<img class="item" src="https://tse1.mm.bing.net/th?id=HN.607994144777177645&pid=1.7" />
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<!-- Add as many items as you like. -->
</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider">
<div class="position"></div>
</div>
</div>
</div>
<div class="ContentFlow">
<div class="flow">
<div class="item more-width">
<div class="center-block club-card content" style="background-color: blue;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">coffee</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: red; ">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">car wash</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: yellow;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">foutain</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
http://www.jacksasylum.eu/ContentFlow/index.php

Categories

Resources