Λειτουργία "Expand" στο Gtagreece.

Η λειτουργία "expand" σας δίνει την δυνατότητα να αφαιρείται το πλαϊνό menu και να βλέπετε της δημοσίευσης σε μεγαλύτερο μέγεθος.





Για να χρησιμοποιήσετε την λειτουργία απλά πατάτε στο μπλε κουμπί "expand" για να φύγετε από την λειτουργία πατάτε το "X".

Πως να την κάνετε

Για να λειτουργεί αυτή η δυνατότητα χρειαζόμαστε δυο (div) και δυο κουμπιά.
Το πρώτο div(div1) είναι το περιεχόμενο και το δεύτερο(div2) είναι το menu.
Εάν θέλουμε η φωτογραφίες να μεγάλονουν όπως τις έχω εγώ πρέπει να βάλετε σε css ώστε η φωτογραφία να είναι 100%

Κώδικας:

#div1 img {
width:100%!important;
height:auto!important;
}

Για να λειτουργήσει ο κώδικας πρέπει να ενσωματώσουμε στην ετικέτα head το JQuery

Κώδικας:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

εφόσον έχουμε βάλει τα κουμπιά μέσα στο html όπου θέλουμε , εγώ τα ονόμασα b1 και b2

Κώδικας:

 <button id='b1' type='button'>Expand</button>
      <button id='b2' type='button'>X</button>

πάμε εκεί που κλίνει η ετικέτα body και ανοίγουμε μια ετικέτα script

τώρα μες την ετικέτα script

Βάζουμε ,πως όταν κλικαρουμε το b1 το  (το hash σημαίνει πως είναι id) το div2 να κριβετε σιγά γι'αυτο έχουμε το slow, και το div1 αλλάζουμε τιν παράμετρο width στο css σε αργή μορφή (με κίνηση), στην συγκερκιμένη περίπτωση εγώ το έχω 984px εσείς μπορείτε να το βάλετε 100% για παράδειγμα.
το parent.location.hash = "expand"; μας πρόσθετη στην δυεθυνση" url το "#expand" χωρεις να κανει reload ο browser φυσικά μπορείτε να το βάλετε όπως θέλετε εσείς, με hash από πίσω για παραδιγμα "#test",
το replaceurl() ειναι ένα function που θα το φτιάξουμε πιο μετά.

Κώδικας:


    $("#b1").click(function(){
          $( "#div2" ).hide("slow");
            $( "#div1" ).animate({'width':'984px'}, 'slow');
 parent.location.hash = "expand";
replaceurl();

            });

Τώρα ήρθε η ώρα να κάνουμε το δεύτερο κουμπί που το επαναφέρει στην αρχική του κατάσταση
ο κώδικας δεν διαφέρει και πολύ πρώτα βάζουμε όταν κάνουμε click το b2 αυτήν τι φορα να εμφανίζει το div2 σε αργή μορφή "γιαυτο" βάζουμε το show αντί το hide, και το div1 με κίνηση να αλλάζει η παράμετρος width του css στο αρχικό μέγεθος εγώ για παράδειγμα το 640px.
τώρα θέλουμε να αφαιρέσουμε το hash από το url οποτε βάζουμε parent.location.hash = "";..
το clearurl(); ειναι ενα function που θα το χρησιμοποιήσουμε μετά.

Κώδικας:


$( "#b2" ).click(function() {
$ ( "#div2" ).show("slow");
  $( "#div1" ).animate({'width':'640px'}, 'slow');
parent.location.hash = "";
clearurl();
    });


Τώρα για να δώσουμε την δυνατότητα στους χρηστες να επισκέπτονται τον σύνδεσμο μας απευθείας σε μορφή expand χωρίς να χρειάζεται να πατάνε το κουμπί πρέπει να αναγνωρίσουμε το url και να βάλουμε πως εάν το url διαθέτη στο τέλος το hash που βάλαμε πριν ("#expand") τότε να ενεργοποιείται η λειτουργία.
δηλαδή βάζουμε την ιδιότητα "if" και λέμε εάν το url διαθέτη το "#expand" κανε αυτό, και από κάτω γράφουμε τον ίδιο κώδικα που βάλαμε και στο πρώτο button που κάνει ακριβώς την ίδια λειτουργία.

Κώδικας:

if (window.location.href.indexOf("#expand") > -1) {
$( "#div1" ).animate({'width':'984px'}, 'slow');

  $("#div2").hide("slow");

replaceurl();

}

Ήρθε η ώρα να φτιάξουμε τα function που σας έλεγε πριν, με αυτά τα function δίνουμε την δυνατότητα πως εάν ο χρηστης έχει ενεργοποίηση το expand τότε σε οποια σελίδα θα μπαίνει θα είναι ενεργοποιημένο και δουλεύει με την λογική εκείνου που βάζουμε το hash στο url

φτιάχνουμε το πρώτο function, εγώ το ονόμασα replaceurl εσείς το ονομάζεται όπως θέλετε

Κώδικας:

function replaceurl(){//o kodikos pou tha valoume twra paei edw}

με αυτό το function θα κάνουμε το εξής, όλλα τα link θα ανικαταστουντε με το εξής, το ήδη link μαζί με το "#expand" οποτε όταν πατάμε στο link θα κάνει την λιτουργια που κάναμε πιο πριν ώστε όταν βλέπει στο link το #expand το φορτώνει την λιτουργια αυτόματα..

γίαυτό τον λόγο βάλαμε το function replaceurl(); να τρέχει μονο όταν πατάμε το κουμπί expand(b1) η όταν το link έχει το #expand..

ψάξουμε για ολλα τα "a" tags μέσα στο html μας μετά κοιτάμε εάν το "a"(link) έχει ήδη το "#expand" στο τέλος, εάν το έχει ήδη δεν κάνει τίποτα αλλιώς παίρνει το link και πρόσθετη στο τέλος το "#expand" εάν δεν κάναμε αυτό το "if" που ελέγxει εάν έχει ήδη το link το #expand στο τέλος, τότε όταν πατούσαμε το κουμπί expand και έβαζε στο τέλος το #expand με αποτέλεσμα να είχα κάτι τέτοιο μετά από πολλά clicks "www.site.com/link#expand#expand#epxand" για να αποφύγουμε αυτό κάναμε τον έλεγχο
οποτε

Κώδικας:

function replaceurl(){
    var els = document.getElementsByTagName('a'),
        len = els.length;

    while( len-- ) {
  if (els[len].href.indexOf('#expand') > -1) {

  } else {
 els[len].href = els[len].href + "#expand";
  }
      
    }

  }

Τώρα θέλουμε όταν πατάει κάποιος το κουμπί b2 δηλαδή να επαναφέρει την αρχική κατάσταση να φεύγει το hash(#expand) από τα link..

Τώρα φτιάχνουμε το δεύτερο function που εγώ ονόμασα clearurl.

Κώδικας:

function clearurl(){//o kodikos paei edw}

τώρα κάνουμε το ίδιο πρόγραμμα με το replaceurl με την διαφορα πως στο τέλος αντί να προσθετουμε ψάξουμε και αντικαταστουμε.

ψαχνουμε για όλα τα <a> tag στο html μας, εάν ο σύνδεσμος εμπεριεχει το "#expand" στο τέλος τότε το '#expand' αλλάζει σε ''  (τίποτα σχετικά σε κενό).

Κώδικας:

function clearurl(){

   var els = document.getElementsByTagName('a'),
        len = els.length;

    while( len-- ) {
  if (els[len].href.indexOf('#expand') > -1) {
 els[len].href = els[len].href.replace('#expand','');
  } else {

  }
      
    }


και είμαστε έτοιμη...

Video παραδειγμα


Πηγή: τα σκέφτηκα μονος xD