2010-01-27 11 views
5

मेरे पास एक मूल टॉगल स्विच है जो अन्य सभी समान divs को बंद करते समय div पर क्लिक किया गया दिखाता है। यह ठीक काम करता है, टॉगल मुद्दा नहीं है। नीचे देखें:चिनाई प्लगइन के साथ Jquery कॉलबैक

$(document).ready(function(){ 
$('.threadWrapper > .littleme').click(function() { 
    $(this).next().toggle('slow'); 
    $(this).toggle('slow'); 
    $('.littleme').not(this).next().hide('slow'); 
    $('.littleme').not(this).show('slow'); 
    return false; 
}).next().hide(); 
}); 

मैं भी चिनाई jQuery के लिए प्लगिन है, जो सभी चयनित div तत्वों horrizontally और फिर खड़ी का आयोजन का इस्तेमाल किया है। शानदार जो सभी प्रकार की विभिन्न div ऊंचाई के लिए भी काम करता है। नीचे देखें:

$(function(){ 
    $('#mainContent').masonry({ 
    columnWidth: 200, 
    itemSelector: '.threadWrapper:visible', 
}); 
}); 

मैं जो करना चाहता हूं वह हर बार एक div विस्तार या ढहने के लिए लेआउट को पुनर्गठित करता है। प्रभाव में प्रारंभिक .click फ़ंक्शन के लिए कॉलबैक के रूप में। Masonry कमांड को ट्रिगर करना। यह मेरे लिए काम नहीं कर रहा है। शुरुआती प्रश्न के लिए माफी।

देखें कि कैसे अपने वर्तमान यहाँ काम: kalpaitch.com

एंड्रयू

गैबी - वाक्य रचना की जांच के लिए धन्यवाद, मैं बहुत अच्छा हूँ उन अप fluffing पर और उसके बाद लगभग आधे घंटे के दौर चल रहा है की तलाश में खर्च उनके लिए।

साइरो - सही और काम करता है, मैं इसे निकट भविष्य के लिए उपयोग करूँगा। जो मैं जोड़ना चाहता था वह यह था कि यह एनीमेशन गति के साथ शो/छुपा/टॉगलिंग के मामले में कैसे हासिल किया जाएगा (तदनुसार ऊपर कोड)। फिर divs का विस्तार होने से पहले चिनाई कॉल आग लग जाएगी (जैसा कि वर्तमान में kalpaitch.com पर हो रहा है)। हालांकि उत्तर के लिए बहुत धन्यवाद, यह इस तरह से निश्चित रूप से आसान है।

उत्तर

4

कोशिश फिर से चलाने के लिए चिनाई कॉल फिर से क्लिक परिवर्तन संकल्प के बाद पेज को समायोजित:

$(document).ready(function(){ 
$('.threadWrapper > .littleme').click(function() { 
    $(this).next().toggle(); 
    $(this).toggle(); 
    $('.littleme').not(this).next().hide(); 
    $('.littleme').not(this).show(); 

    // re-run masonry 
    $('#mainContent').masonry({ 
    columnWidth: 200, 
    itemSelector: '.threadWrapper:visible' 
    }); 

    return false; 
}).next().hide(); 
}); 

संपादित करें: चिनाई डॉक्स ऐसा लगता है कि चिनाई अपने प्रारंभिक सेटिंग्स की बचत होगी, ताकि आप केवल मुख्य विधि फिर से फोन करने के लिए है को देखते हुए। यह रूप में अच्छी तरह से काम करना चाहिए:

$(document).ready(function(){ 
$('.threadWrapper > .littleme').click(function() { 
    $(this).next().toggle(); 
    $(this).toggle(); 
    $('.littleme').not(this).next().hide(); 
    $('.littleme').not(this).show(); 

    // re-run masonry 
    $('#mainContent').masonry(); 

    return false; 
}).next().hide(); 
}); 
1

आप एक गलत पथ जहां masonry.js फ़ाइल को शामिल किया है ..

आप js/jquery.masonry.js का उपयोग जब यह JS/jquery.masonry.js (राजधानी जे एस)

होना चाहिए और आप एक अतिरिक्त अल्पविराम है (,) पर विकल्पों में से अंत आप पारित चिनाई ..

आप अपने उदाहरण में उन त्रुटियों को ठीक करने के बाद, बस चिनाई कोड क्रायो फिर से की तरह अपने जवाब में बताया गया चलाने ...

2

मैं भी एक टॉगल था, और उस प्रभाव के लिए फिर से लोड करने चिनाई नहीं मिल सका। लेकिन जब आइटम को फीका हुआ था (फ़िल्टर किया गया) तो मुझे फिर से लोड करने के लिए चिनाई मिली।

देखें: http://jasondaydesign.com/masonry_demo/

+1

बहुत अच्छा। हालांकि थोड़ा दुर्भाग्यपूर्ण आईई अभी भी 90 के दशक में फीका है। मैंने एक टाइमआउट के साथ प्रयास किया जो ठीक से काम करता था, लेकिन यह आसान दिखता है। दिमाग अगर मैं देखता हूं कि आप किसके साथ समाप्त हुए हैं। – kalpaitch

+1

क्या आप समझा सकते हैं? पहली दौड़ के बाद आप फिर से दौड़ने के लिए चिनाई कैसे मजबूर करते हैं?क्या यह कहीं भी दस्तावेज है? – BuddyJoe

+0

ठीक है, मैं Desandro के नवीनतम - आइसोटोप का उपयोग करूंगा, जिसमें फ़िल्टरिंग शामिल है। हालांकि यदि आप मेरे लिंक का पालन करते हैं और कोड को देखते हैं, तो आप देखेंगे कि मैंने फ़िल्टरिंग फ़ंक्शन और टाइमआउट कहां जोड़ा है – Jason

0

यह एक समय हो गया है, लेकिन जब से मैं अपने प्रश्न पर मार, जबकि कुछ और खोजने रखने के लिए, मैं यहां जोड़ा गया है कि चिनाई एक .reload समारोह गयी। यह मेरे लिए काम कर रहा है:

 $(window).resize(function(){ 
      var wallWidth = $wall.width(); 
      var width  = $(window).width(); 
      if (width<700) { 
        $('.brick').css('width', wallWidth/1); 
        $wall.masonry('option', { columnWidth: wallWidth/1 }); 
        $wall.masonry('reload'); 
      } else if (width>=700 && width<1024) { 
        $('.brick').css('width', wallWidth/2 - 1); 
        $wall.masonry('option', { columnWidth: wallWidth/2 }); 
        $wall.masonry('reload'); 
      } else if (width>=1024) { 
        $('.brick').css('width', wallWidth/3 - 1); 
        $wall.masonry('option', { columnWidth: wallWidth/3 }); 
        $wall.masonry('reload'); 
      } 
     }); 
संबंधित मुद्दे