logo
down
shadow

Loop event click jquery synchronize current status


Loop event click jquery synchronize current status

Content Index :

Loop event click jquery synchronize current status
Tag : javascript , By : Nic Doye
Date : November 28 2020, 11:01 PM

will help you I think you should better use currentItem instead another counter, see following:
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    body{
      margin: 0px;
      padding: 0px;
      overflow:hidden;
    }
    .conta{margin: 0 auto;
    width: 300px; position:relative;}
    .contasli #next, .contasli #prev{
    background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
    border-radius: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 100%;
    }
    .npconta{position:absolute;z-index:3;
    top: 50%;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    min-height: 70px;
    min-width: 70px;
    overflow: hidden;
    }
    .contasli #prev{background:#ccc;}
    .contasli #next{background:#ccc;}
    .contasli .npconta.left{left:0;}
    .contasli .npconta.right{right:0;}
    #slider img{left: 0;
        position: absolute;
        transition: opacity 1s ease-in-out 0s;
        max-width: 100%;
        width:100%;
      z-index:1;}

      .setimage, .setimageleft{background-position: center center;
    background-size: cover;
    border-radius: 50%;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 100%;
    }
  </style>
</head>
<body>
<div class="conta">
<div id="slider">
    <img src="http://dummyimage.com/600x400/000/fff&text=1.jpg" alt="" />
    <img src="http://dummyimage.com/600x400/000/fff&text=2.jpg" alt="" />
    <img src="http://dummyimage.com/600x400/000/fff&text=3.jpg" alt="" />
    <img src="http://dummyimage.com/600x400/000/fff&text=4.jpg" alt="" />
    <img src="http://dummyimage.com/600x400/000/fff&text=5.jpg" alt="" />
    <br>


</div>

<div class="contasli">
<div class="npconta left">
<div id="prev"><div class="setimageleft"></div></div>
</div>

<div class="npconta right">
<div id="next"><div class="setimage"></div></div>
</div>
</div>

</div>
  <script>
    var images = [];
    $('#slider img').each(function () {
        images.push($(this));
        $(this).hide();
    });

    var imgcount = images.length;
    var currentItem = 0;
    images[currentItem].show();

    var imagesrc = $('#slider').children('img').map(function(){
        return $(this).attr('src')
    }).get()


    pcounter = imgcount-1;
    $('.setimageleft').css({'background-image': 'url(' + imagesrc[pcounter] + ')',});

    ncounter = 1;
    $('.setimage').css({'background-image': 'url(' + imagesrc[ncounter] + ')',});

    $('#next').click(function () {
        images[currentItem].hide();
        currentItem = (currentItem + 1) % imgcount;
        images[currentItem].show();
        calcButtons();
    });

    $('#prev').click(function () {
        images[currentItem].hide();
        if (currentItem > 0) currentItem--;
        else currentItem = imgcount - 1;
        images[currentItem].show();
        calcButtons();
    });
    
    function calcButtons(){
      if(currentItem>0)
          $('.setimageleft').css({'background-image':'url(' + imagesrc[currentItem - 1] + ')',});
        else
          $('.setimageleft').css({'background-image':'url(' + imagesrc[imgcount-1] + ')',});
      
      if(currentItem<imgcount-1)
          $('.setimage').css({'background-image':'url(' + imagesrc[currentItem + 1] + ')',});
        else
          $('.setimage').css({'background-image':'url(' + imagesrc[0] + ')',});
    }
  </script>
</body>
</html>

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

jQuery get current click event for element and append to it


Tag : jquery , By : user158193
Date : March 29 2020, 07:55 AM
To fix this issue The jQuery event binding mechanism isn't one that overwrites. In other words:
 $("#button").click(function() { alert("hello"); });
 $("#button").click(function() { alert("goodbye"); });

jQuery click handler passing event object, getting checkbox status


Tag : jquery , By : user87752
Date : March 29 2020, 07:55 AM
it should still fix some issue (Sort of a newbie question from someone that is more accustomed to how Flash/ActionScript works.) , .attr() needs to be called on a jQuery object:
checkboxState = $(event.target).is(':checked');
checkboxState = $(this).is(':checked');

Get the current word in paragraph on click event in jquery


Tag : jquery , By : user135518
Date : March 29 2020, 07:55 AM
I wish did fix the issue. Well, for your solution you will need to work with selections and doubleclick event as a tricky thing and get the selected word in the generated range by the doubleclick event.
There is no other way if you don't want to introduce new tags.
$(document).ready(function() {

    /* set hand cursor to let know the user that this area is clickable */
    var p = $('p');
    p.css({ cursor: 'pointer' });

    /* doubleclick event working with ranges */
    p.dblclick(function(e) {
        var selection = window.getSelection() || document.getSelection() || document.selection.createRange();
        var word = $.trim(selection.toString());
        if(word != '') {
            alert(word);
        }
        /* use this if firefox: selection.collapse(selection.anchorNode, selection.anchorOffset); */
        selection.collapse();
        e.stopPropagation();
    });

});‚Äč

jQuery defining click events in for loop (taking click event info from array of objects)


Tag : javascript , By : Cosmin
Date : March 29 2020, 07:55 AM
I hope this helps you . This problem can be fixed in a number of ways. You can use closures, or make the Popups variable an object(with key-value pairs, like var Popups = {'Payment-Selection':'Cards-Popup',...), but the solution that would require the least modification to your code would be to use a custom attribute, like so:
$(Popups[i]['c']).attr('Wt', Popups[i]['w']).click(function () {
        var Wt = this.getAttribute('Wt');
        PopupDrop(Wt);
        console.log(Wt);
});

Working click event in current index with jquery


Tag : jquery , By : foxthrot
Date : March 29 2020, 07:55 AM
I hope this helps you . If you want when click one li, then change its color(or other style), try css:
$("li").click(function () {
  $(this).css({
    "width": 50px,
    "background-color": "red"
    // maybe other attribute pairs
  });
}
$("li").click(function () {
  $(this).toggleClass("new-color-new-width-li");
}
Related Posts Related QUESTIONS :
  • How to prepare array of json objects to d3 hierarchical tree structure
  • VueJS - event emitted - show HTML before other calculations
  • Export SASS/SCSS variables to Javascript without exporting them to CSS
  • How to attach an event handler only once continuously
  • How to make button open a link in new tab in JavaScript?
  • Find range from the javascript object
  • How can I use my jQuery code as JavaScript?
  • How to show 5 images in a 2 row slider with bxslider
  • How to convert stream into variables in typescript
  • Three.js custom shader error on Chrome GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs
  • My JavaScript doesn't work. How can I solve this problem?
  • Why is this async function is running synchronously?
  • Get updated variable from within react hook before return
  • I want to show all image preview but whenever I upload a new one the old one is gone
  • Would I be able to give access to specific electron APIs safely?
  • Why several clicks fire for each instance of a Class?
  • cant grab value from div using attr()
  • Make web service not accessible by browser?
  • Select DOM elements within template
  • How to customize angular ui-grid row background color?
  • Binding data in two respective $scope in AngularJS, how?
  • react put some props after import class
  • Variable is distributed among same components
  • switch class in jQuery/JavaScript for active/inactive state
  • How To Track Outbound Clicks Using Javascript
  • How to get total seconds elapsed since the beginning of the month?
  • Protractor: Stale element reference at "browser.wait(EC.visibilityOf(confDial), FIFTY_SECONDS);"
  • Access to an array inside an object
  • Reseting an JavaScript Interval with different value?
  • Learning Angular for the first time - version 2 or 4?
  • Rendering RSS feed (XML) in React with jquery, why do object values parsed from the feed seem empty?
  • Node.js xml2js http.request tag matching
  • applying texture to custom plane geometry in Threejs
  • How do I pass an Event as a function parameter in HTML written inside JavaScript variable?
  • Interface of object parameter with default value and default property
  • Does using try / catch rather than `.catch` observable operator with XHR requests reduce performance?
  • In IE11 background colors not working on printing
  • TypeScript interface signature "(): string"
  • Is synchronous XMLHttpRequest supported in Internet Explorer 10 and 11?
  • Axios function not returning any values with js
  • How to use firestore TIMESTAMP to create time-stamp in JavaScript
  • Instantiate subclass without constructing
  • Outputing a created object in javascript to a server side JSON file
  • Transition the numeric labels in a bar chart
  • createBottomTabNavigator: hide just one tab from the tabBar
  • iife vs simple statement behavior with document.title
  • showDialogPopup Refresh Page after Click
  • Child component does not set the initial value passed from the parent: ReactJS
  • Nodejs javascript added to button not responding
  • Trying to define a promise.all
  • Python GEE to extract featurecollection timeseries from Landsat imageries
  • How to write negative binary number?
  • Unable to set property of individual object
  • Why Named Function Expression itself cannot assign Name to another Value?
  • How to reset scroll position on single page pagination
  • How to scroll to bottom of page, when a new message is sent - Socket.io
  • How to reconstruct audio blob from a base64 encoded String?
  • How to calculate numbers within an array of objects
  • Using JavaScript to change CSS properties of SVG circles for all circles that was not clicked
  • Is there value in propTypeing repeat required properties at every level of nested components?
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com