jQuery - स्लाइडडाउन और पुश आइकन

Question

मेरे पास आइकन की एक पंक्ति के साथ एक फ्रंट पेज है। उनका आकार व्यूपोर्ट के सापेक्ष हैं। जब मैं कुछ आइकनों को टैप करता हूं तो मैं कुछ सामग्री के साथ आइकन (iTunes-style) की रेखा के नीचे एक div का विस्तार करना चाहता हूं। मैं jQuery का उपयोग करता हूं और आइकन-div पर सामग्री को संलग्न किए बिना स्लाइडडाउन की कोशिश करता हूं, लेकिन यह शेष रेखा के बारे में नहीं सोचता है।

मैं प्रत्येक पंक्ति को एक div के साथ अलग नहीं कर सकता क्योंकि एक पंक्ति पर आइकन की संख्या लगातार नहीं है।

मैं इस पुस्तकालय की कोशिश की है, लेकिन कारण भयानक प्रलेखन मैं यह काम कर लेते हैं फ्लॉप, किसी भी सुझाव: http://thomaspark.me/project/expandingalbums/

कुछ jQuery:

$(document).ready(function(e){ 

    $('#1').on('click',function(){ 

     $('.dropdownwrap').slideToggle(); 

    }); 

एचटीएमएल :

<div id="1" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> 
<a href="#">Icon-Label</a> </div> 
<div class="dropdownwrap"></div> 
<div id="2" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div id="3" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div id="5" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div id="6" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div id="7" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div id="8" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> 
<a href="#">Icon-Label</a> </div> 
<div id="9" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div id="10" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div id="11" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div id="12" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div id="13" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 

सीएसएस:

.app { 
    float: left; 
    width: 14.28%; 
    padding: 1%; 
    font-weight: 300; 
    font-size: 14px; 
    white-space:nowrap; 
    position:relative; 
    text-align:center; 
} 
.app a { 
    display:block; 
} 
.app img { 
    max-width: 121px; 
    width: 100%; 
} 
.dropdownwrap{ 
    height:auto; 
    float:left; 
    margin:0px 0px 20px 0px; 
    background-color:#434343; 
    display:none; 
    padding:20px; 
} 

http://jsfiddle.net/Jxkv5/

Answer 1

कोशिश इस

http://jsfiddle.net/Jxkv5/5/

<div id="1" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> 
<a href="#">Icon-Label</a> </div> 
<div id="2" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div id="3" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div id="5" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div id="6" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div id="7" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div class="boxWrapper"> 
    <div class="dropdownwrap" for="1"></div> 
    <div class="dropdownwrap" for="2"></div> 
    <div class="dropdownwrap" for="3"></div> 
    <div class="dropdownwrap" for="5"></div> 
    <div class="dropdownwrap" for="6"></div> 
    <div class="dropdownwrap" for="7"></div> 
</div> 

<div id="8" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> 
<a href="#">Icon-Label</a> </div> 
<div id="9" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div id="10" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div id="11" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div id="12" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div id="13" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div> 
<div class="boxWrapper"> 
     <div class="dropdownwrap" for="8"></div> 
    <div class="dropdownwrap" for="9"></div> 
    <div class="dropdownwrap" for="10"></div> 
    <div class="dropdownwrap" for="11"></div> 
    <div class="dropdownwrap" for="12"></div> 
    <div class="dropdownwrap" for="13"></div> 
</div> 

js

$(document).ready(function(e){ 
    $('.app').on('click',function(){ 
     var $this = $(this); 
     var id = $this.attr('id'); 
     if($this.hasClass('active')) 
      return; 
     $('.app').removeClass('active') 
     $('.dropdownwrap').css('display','none'); 
     $this.addClass('active');  
     $('[for="'+ id +'"]').slideToggle(); 
    }); 
}); 

Answer 2

मैंने बहुत दूर सोचा है और आखिरकार इस समाधान में आया है।

CHECK DEMO ON JSFIDDLE

JAVASCRIPT

$('.app').on('click', function (evt) { 
       evt.preventDefault(); 

       if ($(this).hasClass("active")) { 
        $(".app.active").removeClass("active"); 
        $(".dropdownwrap").remove(); 
        return false; 
       } 
       $(".app.active").removeClass("active"); 

       var clickedElement = $(this); 
       clickedElement.addClass("active"); 
       var dropDownAppended = false; 


       $(this).nextAll(".app").each(function() { 
        var offset = $(this).offset().top; 
        if (offset > (clickedElement.offset().top + 10)) { 
         $(".dropdownwrap").remove(); 
         $(this).before('<div class="dropdownwrap">Clicked On ID: ' + clickedElement.attr("id") + '</div>'); 
         $(".dropdownwrap").slideDown(); 
         dropDownAppended = true; 
         return false; 
        } 

       }); 

       if (!dropDownAppended) { 
        var itemsAfter = $(this).nextAll(".app").length; 
        console.log(itemsAfter); 
        if (itemsAfter) { 
         $(".dropdownwrap").remove(); 
         $(this).nextAll(".app").last().after('<div class="dropdownwrap">Clicked On ID: ' + clickedElement.attr("id") + '</div>'); 
         $(".dropdownwrap").slideDown(); 
         dropDownAppended = true; 
         return false; 
        } 
        else { 
         $(".dropdownwrap").remove(); 
         $(this).after('<div class="dropdownwrap">Clicked On ID: ' + clickedElement.attr("id") + '</div>'); 
         $(".dropdownwrap").slideDown(); 
         dropDownAppended = true; 
         return false; 
        } 
       } 




      }); 

इस वसीयत किसी भी स्क्रीन आकार में काम करता है, लेकिन आप, जांच करने की आवश्यकता कारण मैं बहुत परीक्षण किया have't। और ड्रॉपडाउन खुला होने पर कोई भी ब्राउज़र का आकार बदलने पर आपको कुछ करने की आवश्यकता है।

आशा है कि यह आपके लिए उपयोगी होगा।

Answer 3

आपको पंक्ति चौड़ाई और आइकन चौड़ाई प्राप्त करके पंक्ति में कितने आइकन पहचानने होंगे। मैंने तुम्हारे लिए एक बेवकूफी रखी है। मुझे लगता है कि आपको क्या चाहिए करता है:

http://jsfiddle.net/qXR3X/

मैं भी कुछ सीएसएस अद्यतन और कुछ मार्कअप परिवर्तन किए हैं, तो सुनिश्चित करें कि आप एक अच्छा नजर है बनाते हैं।

jQuery कोड यह है:

//set the function as a variable of the window to be called later 
window["iconSlider"] = {}; 

//setup basic parameters 
iconSlider.config = { 
    parentWidth: null, 
    width: null, 
    itemsPerRow: null, 
    siblings: null, 
    index: null, 
    total: null, 
    rows: null, 
    position: null, 
    container: $('<div class="dropdownwrap"></div>') 
}; 

//init function to be called at $(document).ready(); 
iconSlider.init = function() { 

    $('.app').on('click',function(){ 


    //get the row position 
     var position = iconSlider.getRow($(this)), 
      stopIndex = iconSlider.config.itemsPerRow * position, 
      startIndex = stopIndex - iconSlider.config.itemsPerRow; 

     var thisRow = iconSlider.config.siblings.slice(startIndex, stopIndex); 
     iconSlider.openRow(thisRow); 


    }); 

    //reset on resize 
    $(window).resize(function() { 
     iconSlider.reset(); 
    }); 
}; 

//getRow function - pass in the icon that was clicked 
iconSlider.getRow = function (icon) { 

    //set values to all our parameters 
     iconSlider.config.parentWidth = icon.parents('.wrapper').width(); 
     iconSlider.config.width = icon.outerWidth(); 
     iconSlider.config.itemsPerRow = Math.floor(iconSlider.config.parentWidth/iconSlider.config.width); 
     iconSlider.config.siblings = icon.parents('.wrapper').find('.app'); 
     iconSlider.config.index = icon.index() +1; 
     iconSlider.config.total = iconSlider.config.siblings.length; 
     iconSlider.config.rows = iconSlider.config.total/iconSlider.config.itemsPerRow; 
     iconSlider.config.position = Math.ceil(iconSlider.config.index/iconSlider.config.total * iconSlider.config.rows); 


    //return the row position 
    return (iconSlider.config.position); 
}; 

//open the row 
iconSlider.openRow = function(row) { 

    //reset 
    iconSlider.reset(); 

    //when reset is complete, initiate the opening of the new row 
    iconSlider.config.container.promise().done(function() { 

     //make sure there is a row 
     if (row.length > 1) { 

      //for each item in the row, add a class 'expanded' 
      for (i = 0; i < (row.length) ; ++i) { 
       row.eq(i).addClass('expanded'); 
      } 

      //append the container after the last item in the row 
      row.eq(row.length -1).after(iconSlider.config.container) 

      //slide the container open 
      iconSlider.config.container.slideDown(); 
     } 

    }); 

}; 


//general reset 
iconSlider.reset = function(){ 
    $('.app.expanded').removeClass('expanded'); 
    iconSlider.config.container.slideUp(200); 
    $(this).remove(); 
}; 

इस तरह दस्तावेज़ में कॉल यह:

$(document).ready(function(e){ 

    iconSlider.init(); 

});