jQuery Forum

1. $(".box").each(function () {
2. $(".box").click(function () {
3. $(this).removeClass("retain").removeClass("back");
4. $(this).addClass("back").delay(1000).queue(function(){
5.     $(this).removeClass("back").dequeue().addClass("retain");
6. });
7. });
8. });

See complete working code on jsFiddle.

1. var adistance = $('article.about-me').offset().top -90,
2.  
3.     $window = $(window);
4.     $window.scroll(function() {
5.     if ( $window.scrollTop() >= adistance ) {
6.          $("li.active").removeClass("active");    
7.          $('li[href$="about-me"]').addClass("active");
8.     }
9.    });
10.  var edistance = $('article.education').offset().top -90,
11.  
12.     $window = $(window);
13.     $window.scroll(function() {
14.     if ( $window.scrollTop() >= edistance ) {
15.          $("li.active").removeClass("active");    
16.          $('li[href$="education"]').addClass("active");
17.     }
18.    });
19.    var exdistance = $('article.experience').offset().top -90,
20.  
21.     $window = $(window);
22.     $window.scroll(function() {
23.     if ( $window.scrollTop() >= exdistance ) {
24.          $("li.active").removeClass("active");    
25.          $('li[href$="experience"]').addClass("active");
26.     }
27.    });
28.   var pdistance = $('article.portfolio').offset().top -90,
29.  
30.     $window = $(window);
31.     $window.scroll(function() {
32.     if ( $window.scrollTop() >= pdistance ) {
33.          $("li.active").removeClass("active");    
34.          $('li[href$="portfolio"]').addClass("active");
35.     }
36.    });

1. $('.um-member-name').each(function(i, obj) {
2. var n = $(this).attr('userEmail');
3.   $("h2").text(n);
4.         });

Any Ideas how I can solve this issue?

1.     $(document).on('touchend', function(){
2. $(".select2-search, .select2-focusser, #s2id_autogen4, .right [id*=focusser], .right [id*=autogen], .right [id*=foccused], .select2-search-choice-close").remove();
3. });

1. jQuery('.select2-chosen').bind('DOMSubtreeModified',function(event) {
2.     var newText = $(this).text();
3.     alert(newText); 
4.     if ($('.select2-chosen:contains("O")').length === 1) {     
5.     alert(newText);
6. }
7.     
8.     
9.     
10. });

I am trying to stop mobile keyboard from showing when the element on focus is a drop-down but it still does not work. My code looks like below. Any ideas how I can achieve this. The problem is only on mobile.

Please note that the HTML is structured the by author of the plugin that I am using. It is the "marital status field" on this page.

// jQuery

$("#s2id_autogen1").attr("readonly", "readonly");

// HTML

<div style="width: 100%; max-width: 1903px; display: block;" id="s2id_marital_status" class="select2-container um-form-field valid um-s1"><a href="javascript:void(0)" class="select2-choice select2-default" tabindex="-1"> <span id="select2-chosen-1" class="select2-chosen">Marital Status</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a>
    <label for="s2id_autogen1" class="select2-offscreen"></label>
    <input id="s2id_autogen1" aria-labelledby="select2-chosen-1" class="select2-focusser select2-offscreen" aria-haspopup="true" role="button" type="text">
</div>

1. $('#snitchBox').each(function (index, value){
2.     $(document).ready(function () {
3.     $("#snitchBox").hide();
4.         $('select#reportReason').on('change', function() {
5.                                       
6.                        if ($(this).val() === 'Other') {
7.                            
8.                       $("textarea#snitchBox").show();
9.    
10.                         } else {
11.                            
12.                             $("textarea#snitchBox").hide();
13.                         }
14.                        
15.                         }).change();
16.             });
17.        
18.                 });

See on jsFiddle.

1.         <select title="" name="marital_status" id="marital_status">
2.             <option value=""></option>
3.             <option value="Dating">Dating</option>
4.             <option value="Divorced">Divorced</option>
5.             <option value="Married" selected="">Married</option>
6.             <option value="In a Committed Relationship">In a Committed Relationship</option>
7.             <option value="Single">Single</option>
8.             <option value="Separated">Separated</option>
9.             <option value="Widowed">Widowed</option>
10.         </select>
11. <h1>I believe in God</h1>

1. $(document).ready(function() {
2.         if ($('#marital_status option:slected').value == "Married") {
3.      $('h1').hide();
4. }   
5. });

Working on a point system that assigns points for every element with matching content in a group of search results. It works well when I compare the contents from .per-results to .myself, but it doesn't work when I do the comparison from .myself to .per-result.

When reversed, it still assigns points but it assigns the same amount of points for all .per-resultwhen it should differ. My code looks like below.

$(function() {
      $('.per-result').each(function() {
        var $matches = $('span', this).filter(function() { // Each item
            var texts = $(this).text();
            return $('.myself span').filter(function() { // Are there matches in .three?
                return $(this).text() === texts;
            }).length > 0;
        }).length;
        $('.theyRate', this).text(('They score me ' + $matches * 6 + ' Points' ));
    });
  
  
  
  //Reversing the point system
  
        var $matches = $('.myself span', this).filter(function() { // Each item
            var texts = $(this).text();
            return $('.per-result span').filter(function() { // Are there matches in .three?
                return $(this).text() === texts;
            }).length > 0;
        }).length;
        $('.iRate').text(('I score them ' + $matches * 6 + ' Points' ));

  
});

Link to the fiddle

1. // Alert session cookie starts here
2. jg(document).ready(function () {
3.     function closeBox() {
4.         var closeBox = jg('.alert-box:visible').hide();
5.         // - Notice how we pass a function and get an integer
6.         jg.cookie('Alert-closed', true, {
7.             path: '/'
8.         });
9.     }
10.     console.log('Alert-closed');
11.     // - Simply checks the alert box above
12.     if (jg.cookie('Alert-closed')) {
13.         console.log('Closing the alert box automatically...');
14.         closeBox();
15.     }
16.     // Close the box on click
17.     jg('.alert-switch').click(function () {
18.         closeBox();
19.     });
20. });

1. $(document).each(function () {
2.     var pMatch = $('ol li').map(function () {
3.         return $(this).text()
4.     })
5.     var sMatch = $('.three li').map(function () {
6.         return $(this).text()
7.     })
8.     $.each(pMatch, function (i, h) {
9.         if (h === sMatch[i]) {
10.             var uSp = $("ol li").eq(i).length * 10;
11.             $( "ol li:last-of-type" ).text( "" + uSp + " Points");
12.         }
13.     });

Jsfiddle link

1. $(document).each(function() {
2.     var pMatch = $('.one li').map(function(){
3.         return $(this).text()
4.     })
5. var sMatch = $('.two li').map(function() {
6.         return $(this).text()
7.     })
8. $.each(pMatch,function(i,h) {
9.    
10.     if (h===sMatch[i])
11.         
12.     $('.show-here').text('This is Working');
13.    
14.     else    
15.          
16.     $('.show-here').text('This is not Working');
17. });
18.    
19.    
20.    
21. });

Link to jsFiddle

1. $(document).each(function() {
2. var pMatch = $('.one li').contents();
3. var sMatch = $('.two li').contents();
4. if ($(pMatch === sMatch)) {
5.      
6.     $('.show-here').text('This is Working');
7.   }
8.     else {
9.        
10.     $('.show-here').text('This is not Working');
11. }
12.    
13. });

Here is a link to jsfiddle with the code.

Aim: I'm trying to individualize a group of elements(alerts in this case) so that if any of them is closed on one page, it stays closed on all pages until the browsers is closed.

Issues: With the code below, they close independently when the user clicks on the close button(X) but show up again when the user refreshes the page or switch between pages and it also omits one of the available alerts. Any ideas on what I'm getting wrong here. Any ideas on what the problem is.

// Alert session cookie starts here 
$(document).ready(function () {

    function closeBox() {   
         var $this  = $('.alert-switch');     
        var closeBox = $('.alert-box').eq($(this).index()).remove();

        $.cookie('alert-closed', true, {path: '/'});
        console.log('Alert box closed.');


    if($.cookie('alert-closed')){
        console.log('Closing the alert box automatically...');
        closeBox();
    }}


    $('.alert-switch').on('click', function () {

           closeBox();

    });

Here's a link to a replica of the issue on fiddle.

The block of code below works perfectly until I added mouse over timeout. The mouse-over time out works but the classes are no longer being added. Is there a way to combine both and still have the classes added as supposed?

$(document).ready(function(){
    var myTimeout;
$('#nav-bar > ul li').mouseenter(function() {
    myTimeout = setTimeout(function() {
    $('.drop-down-plates:visible').hide();  
    $('#nav-bar ul li.current-menu-item').removeClass('current-menu-item');
    $('#nav-bar ul li').eq($(this).index()).addClass('current-dmenu-item');
    $('.drop-down-plates').eq($(this).index()).slideDown();
    $('#nav-bar ul li.current-dmenu-item').removeClass('current-dmenu-item');
    }, 200);
}).mouseleave(function() {
    clearTimeout(myTimeout);
});


 $('#drop-down-box').mouseleave(function(){
    $('.drop-down-plates:visible').slideUp();   
    $('#nav-bar ul li.current-dmenu-item').removeClass('current-dmenu-item');   
});



});

1. <div id="main">
2. <div class="prev">Previous</div>
3. <div class="next">Next</div>
4. <div class="container active">One</div>
5. <div class="container">Two</div>
6. <div class="container">Three</div>
7. <div class="container">Four</div>
8. 
   
9. </div>

1. .prev, .next {
2. float: left;
3. color:blue;
4. font-size: 24px;
5. margin: 10px 0 50px 50px;
6. cursor:pointer;
7. width: 40%;
8. color: black;
9. }
10. .container {
11. width: 100%;
12. font-size: 70px;
13. margin-bottom: 20px;
14. 
    
15. }
16. .container {
17. display: none;
18. }
19. .container.active {
20. display: inherit;
21. }
22. 
    

1. $(".prev").on("click", function(){
2. $(".container.active").removeClass("active").prev().addClass("active");
3. var $prev = $('.container.active').removeClass('active');
4. if ($prev.length) {
5. $prev.addClass('active');
6. }
7. else {
8. $(".container:last").addClass('active');
9. }
10. 
    
11. });
12. $(".next").on("click", function(){
13. $(".container.active").removeClass("active").next().addClass("active");
14. var $next = $('.container.active').removeClass('active');
15. if ($next.length) {
16. $next.addClass('active');
17. }
18. else {
19. $(".container:first").addClass('active');
20. }
21. 
    
22. 
    
23. });
24. jQuery(document).ready(function(){
25. if ($('.container:nth-of-type(2)').is(':visible')) {
26. $('#main').css({'background' : 'red'});
27. }
28. else {}
29. });

1. <div class="thumb-it"></div>
2. <div class="thumb-it"></div>
3. <div class="thumb-it"></div>

 Script

1. $('.thumb-it').each(function() {
2.     if ($(this).find('img').length === 0) {
3.         $(this).hide();
4.     }
5.    
6.    
7.  else if ($(".thumb-it:contains('img')").length < 300) {
8.         $(this).addClass('floater');
9.     }
10.        
11. });

1. 
   

2. jQuery(document).ready(function ($) {
       $h = jQuery.noConflict();
       console.log($h)
   
   $h('.old-post-box').slice(0,10).addClass('set1').wrapAll('<div class="overlay" />');
   $h('.old-post-box').slice(10,20).addClass('set2').wrapAll('<div class="overlay" />');
   $h('.old-post-box').slice(20,30).addClass('set3').wrapAll('<div class="overlay" />');
   $h('.old-post-box:not(".set1")').hide();
   })
   
   jQuery(document).ready(function ($) {
       $h = jQuery.noConflict();
       console.log($h)
   
   $h('#post-nav ul li').click(function(e){
       $h('.old-post-box:visible').hide();
   $h('.overlay').eq($h('#post-nav ul li').index()).show('slow');
   
       });
           })

1. var b = jQuery.noConflict();
2.   b(document).ready(function(){
3. b.fn.slideFadeToggle  = function(speed, easing, callback) {
4.  return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
5. };
6. b(document).ready(function(){
7.     var max = b('div.faces').length, init = 0;
8.     b("div.faces:not(:first)").hide();
9. b("ul.intro-nav li:first").addClass("currFace");
10.  b(".lefter, .righter").click(function(){
11.             b('.currFace').removeClass('currFace');
12.             var cur = b("div.faces:visible").index('div.faces');
13.             var next = cur<max-1?cur+1:0;
14.    b("div.faces").eq(cur).add(b("div.faces").eq(next)).slideFadeToggle().animate('slow');
15.         b("ul.intro-nav li").eq(next).addClass("currFace");
16.         });
17. b("ul.intro-nav li").click(function(){
18.   var curLI = b("ul.intro-nav li").index(this);
19.   b("div.faces:visible").add(b("div.faces").eq(curLI)).slideFadeToggle('slow');
20.   b('.currFace').removeClass('currFace');
21.   b(this).addClass('currFace');
22.  // alert(curLI);
23. });
24. setInterval(function () {
25.     b('.lefter').click();
26. }, 10000);
27.         });
28.     });   

1.   jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
2.     return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
3.     };
4. var max = $('div.faces').size();
5. var init = 0;
6. $("div.faces:not(:first)").hide();
7.  $(".lefter,.righter").click(function(){
8.    curr = init%max;
9.    next = ++init%max;
10.    $("div.faces").eq(next).add($("div.faces").eq(curr)).slideFadeToggle('slow');
11.     });

Here's a link to how is works on jsFiddle