Πρόβλημα με isotope(jquery) και height.

[SlackulatoR]

Στη σελίδα μου(βλ. υπογραφή), χρησιμοποιώ το παρακάτω για το portfolio:

http://www.webdesigntunes.com/coding/jquery-filterable-portfolio/

 

Το οποίο χρησιμοποιεί το isotope script και όσα article's υπάρχουν μέσα στο portfolio τόσο και το ανάλογο height του div.

 

<section class="main">

         

        <div class="portfolio">

             

            <article class="entry video">

                <a data-rel="prettyPhoto" href="http://vimeo.com/34266952">

                <img src="images/portfolio/work1.jpg" alt="">

                <span class="video-hover"></span>

                </a>

            </article>

    

            <article class="entry video">

                <a data-rel="prettyPhoto" href="http://vimeo.com/34266952">

                <img src="images/portfolio/work1.jpg" alt="">

                <span class="video-hover"></span>

                </a>

            </article>

     

        </div>

     

    </section>

 

Σκέφτηκα λοιπόν, επειδή τα items γίνονται πολλά να φτιάξω ένα load more button που να εμφανίζει τα επόμενα οπότε έκανα rename αυτά που θέλω να κρύψω σε "entry video hidden": 

 

 <article class="entry video hidden">

        <a data-rel="prettyPhoto" href="http://vimeo.com/34266952">

            <img src="images/portfolio/work1.jpg" alt="">

            <span class="video-hover"></span>

        </a>

    </article>

Και μέσω της jquery χρησιμοποιώ την hide(); για να τα κρύψω:

 

  $("article.entry.video.hidden").hide();

 

Παρόλο που λειτουργεί και τα items εξαφανίζονται, παραμένει κενός χώρος όπως δείχνω και στην παρακάτω εικόνα. Καμιά ιδέα για το πως θα μπορούσε να φτιαχτεί αυτό; Μόνο όταν αφαιρώ το κάθε <article> μικραίνει το ύψος του div.

[angelos_io]

Φίλε καλησπέρα,

μπορείς να δώσεις ενα link για το website για να βοηθήσουμε περισσότερο;

[SlackulatoR]

Είναι το site της υπογραφής μου. Δεν έχω ανανεώσει τον κώδικα με το load more button(παρά μόνο σε localhost) εφόσον δεν το έχω κάνει να δουλέψει ακόμη.

[XPHSTOS_]

Μήπως είναι θέμα CSS σκέφτομαι, μήπως κάποιο div που τα περικλείει έχει σταθερό μέγεθος? 

[SlackulatoR]

Όχι, δε νομίζω. Το height αλλάζει σύμφωνα με τα πόσα <article> υπάρχουν στο div.

Επεξ/σία 16 Μαρτίου 2014 από SlackulatoR

[angelos_io]

Φίλε το μόνο που βρήκα.,
ειναι να φέρνεις στην αρχη μονο τα πρώτα articles
και μετά με το κουμπί more να στέλνεις ενα ajax request., να φέρνεις τα υπόλοιπα,
να τα βάζεις append .portfolio στο μετά να καλείς:

$('.portfolio').isotope('reLayout');
 

Είναι η μονη λύση που μπορώ να σκεφτώ.!

[nucleus]

Δοκίμασε μια και αυτό

 

Στο style σου entry video hidden στο CSS βάλε το display:none

 

Μετά στο Load button κάνε toggle (αν είναι visible θα στο κρύψει αν είναι not visible θα στο δείξει)

 

Αν δεν θες το παραπάνω κάνε απλώς show στο Load button

[SlackulatoR]

Φίλε το μόνο που βρήκα.,

ειναι να φέρνεις στην αρχη μονο τα πρώτα articles

και μετά με το κουμπί more να στέλνεις ενα ajax request., να φέρνεις τα υπόλοιπα,

να τα βάζεις append .portfolio στο μετά να καλείς:

 

$('.portfolio').isotope('reLayout');

 

Είναι η μονη λύση που μπορώ να σκεφτώ.!

 

Θα το δοκιμάσω αν είναι, ευχαριστώ.

 

Δοκίμασε μια και αυτό

 

Στο style σου entry video hidden στο CSS βάλε το display:none

 

Μετά στο Load button κάνε toggle (αν είναι visible θα στο κρύψει αν είναι not visible θα στο δείξει)

 

Αν δεν θες το παραπάνω κάνε απλώς show στο Load button

 

Μα και τώρα το ίδιο κάνω, απλά αντί για css χρησιμοποιώ jquery(hide).

Αλλά και με css που δοκίμασα το ίδιο έκανε.

Μόνο όταν αφαιρώ τα <article> ή τα κάνω comment λειτουργεί(εξαφανίζεται το κενό).

 

Επίσης έσβησα όλη την css και πάλι υπήρχε το κενό. 

Κάτι άλλο που προσπάθησα είναι να βάλω τα <article> σε ένα div αλλά όταν το κάνω αυτό τα κρύβει από μόνο του και δεν μπορώ να τα επαναφέρω.

[nucleus]

http://isotope.metafizzy.co/demos/removing.html

 

Από ότι βλέπω εδώ

$('#removable a').click( function( jQEvent ) 
{ 
  var selector = $(this).attr('data-option-value'); 
  var $removable = $container.find( selector ); 
  $container.isotope( 'remove', $removable ); 
  jQEvent.preventDefault(); 
}); 

Υπάρχει remove event στον isotope container (κοινώς το top most div).Το θέμα είναι να κάνεις σωστά το select.

 

Και εδώ το απίθανο documentation

 

http://isotope.metafizzy.co/docs/methods.html#remove

 

remove

.isotope( 'remove', $items, callback )

Removes specified item elements from Isotope widget and the DOM.

 

 

Note δεν νομίζω ότι κάνει "hide" αλλά remove από το DOM tree της σελίδας.Οπότε εσύ θα πρέπει με κάποιο τρόπο να "ξαναφέρνεις" τα "εξαφανισμένα".

[SlackulatoR]

Βασικά το σωστό απ'ότι βλέπω είναι με appended:

http://isotope.metafizzy.co/docs/adding-items.html

 

Δούλεψε

var $newItems = $(".designs_hidden");
$(".loadMore").on("click",function(){
$pfcontainer.append( $newItems ).isotope( 'appended', $newItems );
});

Το θέμα είναι τώρα πως εμφανίζονται και στις δίπλα κατηγορίες... 

Επεξ/σία 17 Μαρτίου 2014 από SlackulatoR

[nucleus]

Δεν κοιτάζεις μια και τα sorting filtering options που έχει το isotope?Πόσα items έχεις σύνολο σε όλες τις κατηγορίες?Ίσως να μπορείς να τα φορτώνεις όλα μαζί και μετά σε κάθε κατηγορία να κάνεις filter τα κατάλληλα items αυτό κάνεις τώρα?.
 
 
http://isotope.metafizzy.co/docs/filtering.html#creating_interactive_buttons
 

// cache container
var $container = $('#container');
// initialize isotope
$container.isotope({
  // options...
});

// filter items when filter link is clicked
$('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $container.isotope({ filter: selector });
  return false;
});

εκεί που κάνει filter $container.isotope({ filter: selector }); μετά μπορείς να προστέσεις τον κώδικα για το Onclick event στο loadMore button
 

var $newItems = $(".designs_hidden");
$(".loadMore").on("click",function(){
$pfcontainer.append( $newItems ).isotope( 'appended', $newItems );
});

απλώς πρέπει να αλλάξεις τον selector στα νέα items ανάλογα με την κατηγορία που είσαι πχ

 

.designs_hidden .flash_hidden η μεταβλητή var selector περιέχει το filter πχ .designs

[SlackulatoR]

Ωραίος, τώρα δούλεψε σωστά, απλά ήθελε να προσθέσω και τα δύο filters μαζί:

 

var $newItems = $(".designs_hidden");
$(".loadMore").click(function(){
$pfcontainer.isotope('appended', $newItems);
$pfcontainer.isotope({ filter: '.designs,.designs_hidden' });
return false;
});

[SlackulatoR]

Τώρα προσπαθώ να εμφανίζω το loadMore button μόνο όταν είναι επιλεγμένα τα designs αλλά δεν το έχω καταφέρει.

Κάπως έτσι:

 

if ($("nav.primary ul a[data-filter]=designs") == true){
$(".loadMore").show();
}

Καμιά ιδέα; Δοκίμασα και με css αλλά δεν λειτουργεί.

 

Edit: Το βρήκα:

 

$('nav.primary ul a').click(function(){
var selector = $(this).attr('data-filter');
if (selector !== ".designs"){
$(".loadMore").hide();
}
else {
$(".loadMore").show();
}
});

Επεξ/σία 18 Μαρτίου 2014 από SlackulatoR