Counter plays when reach the section on scroll - javascript

i have the next script to count some stats and i want to know how to make it to be played when the scroll reach his section.
How we saw from the script, the script autoplay when page onload i think.
Maybe i will need to change the script but i haven't found another script for this, if you know some scripts, please tell me.
(function($) {
"use strict";
function count($this){
var current = parseInt($this.html(), 10);
current = current + 1; /* Where 50 is increment */
$this.html(++current);
if(current > $this.data('count')){
$this.html($this.data('count'));
} else {
setTimeout(function(){count($this)}, 50);
}
}
$(".stat-count").each(function() {
$(this).data('count', parseInt($(this).html(), 10));
$(this).html('0');
count($(this));
});
})(jQuery);
.stat {
margin:150px auto;
text-align:center;
}
.highlight {
color:#111;
padding:20px 0;
font-weight:bold;
display:block;
overflow:hidden;
margin-bottom:0;
font-size:48px;
}
.stat i {
color:#f7c221;
}
.milestone-details {
font-weight:bold;
font-size:18px;
color:#999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="stat">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="milestone-counter">
<i class="fa fa-user fa-3x"></i>
<span class="stat-count highlight">122</span>
<div class="milestone-details">Happy Customers</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="milestone-counter">
<i class="fa fa-coffee fa-3x"></i>
<span class="stat-count highlight">4226</span>
<div class="milestone-details">Ordered Coffee's</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="milestone-counter">
<i class="fa fa-trophy fa-3x"></i>
<span class="stat-count highlight">14</span>
<div class="milestone-details">Awards Win</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="milestone-counter">
<i class="fa fa-camera fa-3x"></i>
<span class="stat-count highlight">232</span>
<div class="milestone-details">Photos Taken</div>
</div>
</div>
</div><!-- stat -->
</div>

Use the jQuery InView plugin.
$('.milestone-counter').on('inview', function(event, isInView) {
if (isInView) {
count($(this));
}
});

Related

add more field using jquery

I have 2 input fields 1 for image and 1 for video.
I want to add more fields when +Add More button is pressed.
Here is the code
<div class="row p-20 partPending">
<div class="col-lg-6">
<x-forms.file allowedFileExtensions="png jpg jpeg" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partImage')" fieldName="part_image"
fieldId="part_image" />
</div>
<div class="col-lg-6">
<x-forms.file allowedFileExtensions=" mp4 avi " allowedFileSize=" 1mb" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partVideo')" fieldName="part_video"
fieldId="part_video" />
</div>
</div>
<div class="row px-lg-4 px-md-4 px-3 pb-3 pt-0 mb-3 mt-2">
<div class="col-md-12">
<a class="f-15 f-w-500" href="javascript:;" id="add-more"><i
class="icons icon-plus font-weight-bold mr-1"></i>#lang('app.addMore')</a>
</div>
</div>
$("body").on("click",".add-more",function(){
var html = $(".partPending").first().clone();
$(html).find(".change").html("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".partPending").last().after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".partPending").remove();
});
How can i get the desired result. Please help
your issue is about wrong CSS selector :
$("body").on("click",".add-more",function(){
should be :
$("body").on("click","#add-more",function(){
ALSO your codes will correctly adds your desired element, but the element contents is nothing so you cannot view it .
you can get some style to the element for view it :
.partPending {
display:block;
background:yellow;
height: 20px;
border:1px black solid;
width:100%;
}
check it in the snippet :
$("body").on("click","#add-more",function(){
var html = $(".partPending").first().clone();
$(html).find(".change").html("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".partPending").last().after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".partPending").remove();
});
div{
background : green;
}
.partPending {
display:block;
background:yellow;
height: 20px;
border:1px black solid;
width:100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row p-20 partPending">
<div class="col-lg-6">
<x-forms.file allowedFileExtensions="png jpg jpeg" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partImage')" fieldName="part_image"
fieldId="part_image" />
</div>
<div class="col-lg-6">
<x-forms.file allowedFileExtensions=" mp4 avi " allowedFileSize=" 1mb" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partVideo')" fieldName="part_video"
fieldId="part_video" />
</div>
</div>
<div class="row px-lg-4 px-md-4 px-3 pb-3 pt-0 mb-3 mt-2">
<div class="col-md-12">
<a class="f-15 f-w-500" href="javascript:;" id="add-more"><i
class="icons icon-plus font-weight-bold mr-1"></i>#lang('app.addMore')</a>
</div>
</div>

how to Put div to same Position on reload and load using jquery 1.5.2

I wanted to know if there was an easy way to change the div position when i refresh my browser I don't want to lose the place that I have changed to i have 3 Div (Div1 Logo - Div2 Text - Div3 Langue) I want to change Div2 and Div3 when witdh page <=765 and refresh and don't lose this position (Div1 -Div2 -Div3)
$(document).load($(window).bind("resize", listenWidth));
function listenWidth( e ) {
if($(window).width() <= 765)
{
$(".welcomeheader1").remove().insertAfter($(".welcomeheader2"));
} else {
$(".welcomeheader1").remove().insertBefore($(".welcomeheader2"));
}
}
HTML Code
<div id="header" class="header clearfix">
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-6 col-4 xs-last txtRight">
<div id="headerLogo" ></div>
</div>
<div id="welcome" class="txtCenter col-lg-6 col-md-7 col-sm-12 col-12 clearfix welcomeheader1">
<!-- <img src="./resources/_images/wifi.png?1595436503" class="wifi-img" alt="WIFI" /> -->
<!--
<div class="wifi-symbol">
<div class="wifi-circle first"></div>
<div class="wifi-circle second"></div>
<div class="wifi-circle third"></div>
<div class="wifi-circle fourth"></div>
</div>
-->
<img class="wifi_welcome" src="./resources/_images/wifi_welcome.png?1590753851" alt="">
<h1 id="welcomeHeadline">WELCOME</h1>
<h2 id="connectezvous">Connectez-vous au Wifi gratuit</h2>
</div>
<div class="col-lg-3 col-md-2 col-sm-6 col-8 welcomeheader2 " align="Right">
<div id="lang_block">
<i id="showLanguages"> <span id="language_text_id">Langue</span> <img class="left_arrow" src="./resources/_images/left-arrow.png?1590753851" alt=""></i>
<div id="langContainer">
<a id="lang_link[en]" href="#" style="display:none"><img src="./resources/_images/flags/en.png?1595436503" title="English"></a>
<a id="lang_link[fr]" href="#" style="display:none"><img src="./resources/_images/flags/fr.png?1595436503" title="Français"></a>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<!-- The header template -->
<!-- Will be added on top of the page -->
So call the function on load
$(document).load( function () {
listenWidth();
$(window).bind("resize", listenWidth)
});

content overlapping in Ipad landscape view

my content is working fine in desktop and other small devices but in iPad landscape view ( screen size 1024pX768) I'm facing issue, when I clicked on the menu sidebar toggle it's overlapping on the existing content. we're using bootstap 3
I don't want overlap the div content its there in the area when menu toggle clicked.
In the first image, it looks fine when clicked on the toggle menu button it will be overlapped.
My HTML code is:
<div class="row">
<div class="box-hseader">
<div class="col-md-6 col-sm-6">
<div class="col-md-3" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat " ng-click="totalComplaints()">
<div class="col-mds-3">
<span>Total: {{commonareacount||0}}</span>
</div>
</a>
</div>
<div class="col-md-3" style="padding: 0 6px">
<a class="btn btn-app boxFlat" ng-click="isSolved()">
<div class="col-mds-3">
<span>Solved: {{commonareacountsolved||0}}</span>
</div>
</a>
</div>
<div class="col-md-3" style="padding: 0 6px">
<a class="btn btn-app boxFlat " ng-click="isUnsolved()">
<div class="col-mds-3">
<span>Unsolved: {{commonareacountpending||0}}</span>
</div>
</a>
</div>
<div class="col-md-3" style="padding: 0 6px">
<a class="btn btn-app boxFlat " ng-click="isCancelled()">
<div class="col-mds-3">
<span>Cancelled: {{commoncanceled||0}}</span>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="form-group form-inline pull-right rghtFlt">
<select name="filterByRolenm" id="filterByRoleId" ng-model="roleFilter"
ng-change="showFilteredComplaints(CommonAreaComplaintsCopy)" class="form-control">
<option value="All">All roles</option>
<option ng-repeat="resPerson in personnelResType" value="{{resPerson.res_id}}">{{resPerson.res_type}}</option>
</select>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" ng-model="searchText" ng-change="updateFilteredList('getcomplaints', complaintsCopy)"
placeholder="Search ">
</div>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-success pull-right iPhn5cbtn" data-toggle="modal"
data-whatever="#getbootstrap" data-target="#exportComplaintsId"
ng-click="getComplaintId(1)" data-keyboard="false">Export
</button>
</div>
</div>
</div>
My CSS code is:
#media only screen and (max-width: 320px){
.rghtFlt{
float: none !important;
}
}
#media only screen and (max-width: 568px) {
.rghtFlt{
float: none !important;
}
}
#media only screen and (max-width: 640px) {
.rghtFlt{
float: none !important;
}
}
.boxFlat {
position: relative;
border-radius: 3px;
background: #ffffff;
margin-bottom: 20px;
width: 100%;
box-shadow: 5px 5px 5px 6px rgba(0, 9, 0, 0.1);
}
Toggle Navigation JS Script:
// toggle nav bar
function openNav() {
var marginLeftContent = document.getElementById("user_name");
if (marginLeftContent.style.display === 'none') {
var elements = document.getElementsByClassName('displayIcon');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'inline-block';
}
document.getElementById("sidebar-left").style.width = "230px";
// document.getElementsByClassName("displayIcon")[0].style.display = "none";
document.getElementById("user_name").style.display = "block";
document.getElementById("main-header").style.marginLeft = "228px";
document.getElementById("main-footer").style.marginLeft = "230px";
document.getElementById("wrapper").style.backgroundColor = '#ecf0f5';
document.getElementById("wrapper").style.backgroundImage = 'none';
document.getElementById("content-wrapper").style.marginLeft = '230px';
} else {
var elements = document.getElementsByClassName('displayIcon');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'none';
}
document.getElementById("sidebar-left").style.width = "70px";
// document.getElementsByClassName("displayIcon")[0].style.display = "none";
document.getElementById("user_name").style.display = "none";
document.getElementById("main-header").style.marginLeft = "70px";
document.getElementById("main-footer").style.marginLeft = "70px";
document.getElementById("wrapper").style.backgroundColor = '#ecf0f5';
document.getElementById("wrapper").style.backgroundImage = 'none';
document.getElementById("content-wrapper").style.marginLeft = '69px';
}
}
Finally achieved my self what I'm expecting the result, I created the custom column width code instead of bootstrap width class after that it is working
My CSS code:
.col-md-1-complnts {
width: 12.29%;
}
.col-md-1-complnts-four {
width: 5%;
}
.col-md-4-complnts-search {
width: 41% ;
}
My HTML code:
<div class="row">
<div class="col-md-1-complnts-four col-xs-2 " style="position: initial !important;">
<button type="button" class="btn btn-info " ng-click="backtodashboard()"><i
class="fa fa-reply"></i></button>
</div>
<div class="col-md-2 col-xs-6" style="position: initial !important; margin-top: 0px !important; margin-bottom: 15px;">
<button type="button" class="btn btn-success" data-toggle="modal" style="width: 100%"
data-target="#complaisntsmodel" data-whatever="#getbootstrap" ng-click="complaints();complaintsresp();setFormPristine()"
data-keyboard="false">
<i class="fa fa-plus-circle"></i>
Rise Complaint
</button>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat" ng-click="totalPlayComplaints()">
<div class="col-mds-3">
<span>Total:Play {{playareacount||0}}</span>
</div>
</a>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat" ng-click="isPlaySolved()">
<div class="col-mds-3">
<span>Solved: {{playareacountsolved||0}}</span>
</div>
</a>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat " ng-click="isPlayUnsolved()">
<div class="col-mds-3">
<span>Unsolved: {{playareacountpending||0}}</span>
</div>
</a>
</div>
<div class="col-md-3 col-xs-6" style="padding: 0 6px 0px 0px">
<a class="btn btn-app boxFlat " ng-click="isPlayCancelled()">
<div class="col-mds-3">
<span>Cancelled: {{playAreacanceled||0}}</span>
</div>
</a>
</div>
<div class="col-md-3 col-xs-10 " style="position: initial !important;" >
<div class="form-group form-inline ">
<select name="filterByRolenm" id="filterByRoleId" ng-model="roleFilter" style="width: 100%"
ng-change="showFilteredComplaints(CommonAreaComplaintsCopy)" class="form-control">
<option value="All" >All roles</option>
<option ng-repeat="resPerson in personnelResType" value="{{resPerson.res_id}}">{{resPerson.res_type}}</option>
</select>
</div>
</div>
<div class="col-md-4-complnts-search col-xs-12 " style="position: initial !important; margin-bottom: 10px; ">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" ng-model="searchText" ng-change="updateFilteredList('getcomplaints', complaintsCopy)"
placeholder="Search ">
</div>
</div>
<div class="col-md-1-complnts col-xs-6" style="position: initial !important; margin-top: 0px !important; margin-bottom: 15px;" >
<button type="button" class="btn btn-success " style="width: 100% !important" data-toggle="modal" data-whatever="#getbootstrap" data-target="#exportComplaintsId" ng-click="getComplaintId(2)" data-keyboard="false">Export
</button>
</div>
</div>
Nothing changed anything in toggle navigation JS

how to move element to another element then auto fulfill some divs

I would like to use picture to demonstrate my doubt.
For example, i would like to move Boston to the right, which would under USA_LL - United States - Low Pay. My code is below:
function move(elem){
if($(elem).parent().attr("id")=="left-part"){
$(elem).appendTo('#right-part');
}
else{
$(elem).appendTo('#left-part');
}
}
the html code is below:
<div class="panel-body" id="left-part">
<div class="item" onclick="move(this)">
<div class="row">
<div class="col-md-2 item_position"><p class="item-words">Boston(BOS)</p></div>
<div class="col-md-2 arroww"><img class="img-responsive arrow_1" src="file:///Users/cengcengruihong/Desktop/bootstrap%20exercise/static/images/ic_add_arrowshape_15px#1x.png" alt="arrow" width="18px"></div>
</div>
</div>
</div>
<div class="panel-body" id="right-part">
<div class="item2" id="removed">
<div class="row">
<div class="col-md-2 item_position2"><p class="item-words">CAN-Canada</p></div>
<div class="col-md-2 edit_position" style=""><img class="img-responsive edit" src="ic_edit_lightblue_15px#1x.png" alt="edit"></div>
<div class="col-md-1 remove"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
But the output just put the arrow to the right too. What i want is Boston moved to the right without the arrow and also with the edit and cancel icon.
Anyone could give me a hint would be highly appreciated.
This structure can help you. You can clone element using clone() and then append it to another div using .appendTo().
$('.copy').click(function() {
$(this).parents('h1').clone().append('<span class=remove>×</span>').appendTo('.div-2');
$(this).parents('h1').remove()
})
$(document).on('click', '.remove', function() {
$(this).parents('h1').remove();
})
div {
border: 1px solid;
margin-bottom: 10px;
float:left;
width:48%;
min-height:200px;
}
.div-2{
float:right
}
.div-2 .remove,
.div-1 .copy{
float:right;
cursor:pointer;
}
.div-2 .copy{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-1">
<h1>Element 1 <span class=copy>→</span></h1>
<h1>Element 2 <span class=copy>→</span></h1>
<h1>Element 3 <span class=copy>→</span></h1>
<h1>Element 4 <span class=copy>→</span></h1>
</div>
<div class="div-2">
<h1>Element 5 <span class=remove>×</span></h1>
</div>

Isotope filtering with bootstrap

I am working on using the isotope plugin with bootstrap and have run into some trouble. I need the col-md-4 div around the isotope element gallery-image-a, so the .grid is not a direct parent of the isotope element. Once I get rid of the col-md-4 div that I need, the plugin works.
Was wondering if anyone knows of a way to keep the existing markup while maintaining the functionality of the isotope plugin?
HTML Snippet 1
<span class="menu-button" id="food-button">Food</span>
<span class="menu-button" id="staff-button">Staff</span>
<span class="menu-button" id="all-button">All</span>
HTML Snippet 2
<div class="container">
<div class="row grid">
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
</div>
</div>
CSS
.gallery-image-a {
display:block;
height:360px;
background-position:center center;
transition: ease all 950ms;
background-repeat:no-repeat;
box-sizing: border-box;
border:10px solid #fff;
background-size:cover;
background-image: url('http://animalpetdoctor.homestead.com/acat1.jpg');
}
JavaScript
$grid = $('.grid');
$grid.isotope();
$('#food-button,#staff-button, #all-button').click(function(){
var id = $(this).attr('id');
var className = id.replace("-button", "");
if (className == 'all') {
$grid.isotope({ filter: '*' });
return false;
}
$grid.isotope({ filter: '.' + className });
});
2 problems. First, the filter works on children so change HTML to this
<div class="container">
<div class="row grid">
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
</div>
</div>
second, even if it does work, you won't see it. add min-width to class
min-width: 100px;
here's a working fiddle: https://jsfiddle.net/shirandror/rvnrk2kc/
Have you tried defining the itemSelector option to .col-md-4 or better declaring a designated class for that like "grid-item"?
$('.grid').isotope({
itemSelector: '.grid-item'
});
EDIT:
I put up a working example on codepen:
http://codepen.io/iCymiCy/pen/grwpXp?editors=1111

Categories