Προς το περιεχόμενο

jBox jQuery plugin (popup plugin) πρόβλημα

philos

Από τον philos
στο Web Design - Development

 Share

Προτεινόμενες αναρτήσεις

philos Crazy Insomniac

philos

Δημοσ.
Δημοσ.

Χρησιμοποιώ το jBox, το οποίο είναι ουσιαστικά ένα σύστημα popup παραθύρων.

Το χρησιμοποιώ για να ανοίξω popup παράθυρα σε ένα σύστημα Chat που βελτιώνω. Συγκεκριμένα, με την ακόλουθη function ανοίγω τα popup:

function loadpmwin(userid, username)

{

    new jBox('Modal', {

        attach: $('#pm_user' + userid),

        width: 360,

        height: 200,

        title: 'Προσωπική Επικοινωνία με <b>' + username + '</b>',

        overlay: false,

        content: '',

        draggable: 'title',

        repositionOnOpen: false,

        repositionOnContent: false,

        onOpen: function() {

        this.setContent("<iframe seamless='seamless' scrolling='no' src='myscript.php?do=pm&withuser=" + userid + " style='border: 1px solid #333388;' frameborder='0' height='100%' width='100%'></iframe>");

        },

        onClose: function() {

        this.setContent('Κλείσιμο παραθύρου…');

    }



    }).open();

}

Θα ήθελα μέσα σε αυτή την function, προτού καλέσω το new jBox() να ελέγχω αν το παράθυρο είναι ήδη ανοιχτό. Αν είναι τότε να επιστρέφει false, αν δεν είναι τότε να το ανοίγει.

Δοκίμασα διάφορα αλλά χωρίς αποτέλεσμα. Κάποια πρόταση;  :-) 
 

 

nucleus Proficient

nucleus

Δημοσ.
Δημοσ.

Στο documentation δεν είδα κάποιο property ή method για το αν ένα modal είναι open ή closed.

 

To μόνο που μπορώ να σκεφτώ είναι να το κάνεις με μια global μεταβλητή.

 

var isOpen = false;

 

Μετά στο event onOpen του modal την κάνεις true. Στο event onCloseComplete την ξανακάνεις false.

 

Μετά αλλάζεις την συνάρτηση σου.

function loadpmwin(userid, username)

{
    var isOpen = false;
    var modal = new jBox('Modal', {

        attach: $('#pm_user' + userid),

        width: 360,

        height: 200,

        title: 'Προσωπική Επικοινωνία με <b>' + username + '</b>',

        overlay: false,

        content: '',

        draggable: 'title',

        repositionOnOpen: false,

        repositionOnContent: false,

        onOpen: function() {
        isOpen = true;
        this.setContent("<iframe seamless='seamless' scrolling='no' src='myscript.php?do=pm&withuser=" + userid + " style='border: 1px solid #333388;' frameborder='0' height='100%' width='100%'></iframe>");

        },

        onClose: function() {

        this.setContent('Κλείσιμο παραθύρου…');

    },
        onCloseComplete: function() {
        isOpen = false;
}

    });

if (!isOpen)
{
  modal.open();
}

}

Για δοκίμασε μια αυτό αν παίζει.

philos Crazy Insomniac

philos

Δημοσ.
  • Μέλος
Δημοσ.

Δυστυχώς δεν δουλεύει :fear:

 

Να σημειωθεί ότι αυτή η function μπορεί να τρέξει πάνω από μία φορές για πολλά παράθυρα. Για να σας βάλω στο πρόβλημα, πρόκειται για popup παράθυρα prive συνομιλιών σε σύστημα Chat. Οπότε μπορεί να υπάρχουν παράλληλα πάνω από ένα ανοιχτά παράθυρα.

nucleus Proficient

nucleus

Δημοσ.
Δημοσ.

Μπορείς να εξηγήσεις λίγο τα ορίσματα userid, username της συνάρτησης σου?

 

Ποιό όρισμα είναι o χρήστης που δέχεται το pm και ποιό αυτός που το στέλνει?

philos Crazy Insomniac

philos

Δημοσ.
  • Μέλος
Δημοσ.

Γίνεται το εξής από πλευράς της PHP.

Αφού τραβήξω τους ενεργούς χρήστες στο Chat με MySQL κάνω το εξής.

Αν ο χρήστης έχει νέο prive τότε (επειδή όλα γίνονται με AJAX που επιστρέφεται με innerHTML), τρέχει η εικόνα με onload (ξέρω, μπακαλίστικος τρόπος αλλά δουλεύει! ).

Το $user[userid] είναι ο ενεργός χρήστης που τραβήχτηκε από τη MySQL. Το $vbulletin->userinfo[userid] είναι ο χρήστης που προσπαθεί να τραβήξει τα δεδομένα (ουσιαστικά, αυτός που κάνει το request στην PHP).

    while($user = $vbulletin->db->fetch_array($users))
    {
      $pminfo = $vbulletin->db->query_first("SELECT s_time FROM " . TABLE_PREFIX . "infernoshout WHERE s_private = " . intval($vbulletin->userinfo['userid']) . " AND s_user = " . intval($user['userid']) ." ORDER BY sid DESC");
      if ($pminfo['s_time'] > $vbulletin->userinfo['sc_chat_lastread'])
      {
         $js = "loadpmwin($user[userid], '$user[username]')";
      }
      else
      {
         $js = 'return true';
      }
      
      eval('$activeusers .= "' . fetch_template('inferno_shoutbox_activeuser_chat') . '";');
      $activeusers .= "<img src=\"infernoshout/chattheme/images/blank.gif\" onload=\"$js;this.parentNode.removeChild(this);\" />";
    }

Μιλάμε για μηχανή vbulletin, αλλά μη σας μπερδεύει.

 

Αν το timestamp του prive είναι νεότερο από το timestamp της τελευταίας ανάγνωσης μηνυμάτων από πλευράς του χρήστη (το sc_chat_lastread ανανεώνεται αυτόματα με κάθε ανάγνωστη μηνυμάτων), τότε φορτώνει η εικόνα με onload, όπου εμφανίζεται και το popup στο χρήστη.

 

Το θέμα είναι να γίνει κάτι από πλευράς javascript/jquery ώστε αν το popup είναι ήδη ανοιχτό να μην ξανά ανοίγει, ενώ αν είναι κλειστό να ανοίγει.

nucleus Proficient

nucleus

Δημοσ.
Δημοσ.

Η open του jBox σου επιστρέφει μια javascript μεταβλητή που περιέχει το modal.

 

To Θέμα σου είναι ότι δεν ξέρεις ποια modal παράθυρα έχεις ανοικτά και ποιούς χρήστες αφορούν.

 

Πρέπει κάπου να κρατάς ποιά modal παράθυρα έχεις ανοικτά και για ποιόν χρήστη.

 

Έστω ότι έχεις ένα javascript array από Objects. To object αυτό έχει σαν properties το username που δέχτηκε το pm και την modal μεταβλητή από την open.

 

Στην αρχή της loadpmwin ελέγχεις το παραπάνω array με το username.

 

Αν βρει εγγραφή τότε παίρνεις την μεταβλητή του modal και απλώς της λες να κάνει reload το content της.

 

Aν δεν βρει εγγραφή τότε ορίζεις ένα νέο jbox modal

 

var myModal = new jBox('Modal');
 
myModal.setTitle('My Title');
myModal.setContent('My Content');
myModal.open();

Το δείχνεις με την open και το βάζεις στο array μαζί με το username του χρήστη που αφορά. Δυστυχώς δεν βλέπω κάτι αλλο που μπορείς να κάνεις.

libereas Proficient

libereas

Δημοσ.
Δημοσ.

 

Η open του jBox σου επιστρέφει μια javascript μεταβλητή που περιέχει το modal.

 

To Θέμα σου είναι ότι δεν ξέρεις ποια modal παράθυρα έχεις ανοικτά και ποιούς χρήστες αφορούν.

 

Πρέπει κάπου να κρατάς ποιά modal παράθυρα έχεις ανοικτά και για ποιόν χρήστη.

 

Έστω ότι έχεις ένα javascript array από Objects. To object αυτό έχει σαν properties το username που δέχτηκε το pm και την modal μεταβλητή από την open.

 

Στην αρχή της loadpmwin ελέγχεις το παραπάνω array με το username.

 

Αν βρει εγγραφή τότε παίρνεις την μεταβλητή του modal και απλώς της λες να κάνει reload το content της.

 

Aν δεν βρει εγγραφή τότε ορίζεις ένα νέο jbox modal

 

var myModal = new jBox('Modal');
 
myModal.setTitle('My Title');
myModal.setContent('My Content');
myModal.open();

Το δείχνεις με την open και το βάζεις στο array μαζί με το username του χρήστη που αφορά. Δυστυχώς δεν βλέπω κάτι αλλο που μπορείς να κάνεις.

 

Δεν είμαι πολύ γνώστης της jquery εσύ τα ξέρεις καλύτερα... δεν μπορεί να γίνει απλά με το εξής ...

$(function() {
    $(window).focus(function() {
        //if window focus code here
    });

    $(window).blur(function() {
        //if not code here
    });
});

??

alou Proficient

alou

Δημοσ.
Δημοσ.

Η λογική θα μπορούσε να είναι κάπως έτσι, απλά θα χρειαστεί πειραματισμό

var myModals = {};

function loadpmwin(userid, username)
{

	if (myModals[userid]) {
		//it exists, you only need to bring it to front. Is there a method to "focus" it? or a specific id / classname?
		jQuery(**modalspecificid**).click(); //or something
	} else {
		myModals[userid] = new jBox('Modal', {

	        attach: $('#pm_user' + userid),
	        width: 360,
	        height: 200,
	        title: 'Προσωπική Επικοινωνία με <b>' + username + '</b>',
	        overlay: false,
	        content: '',
	        draggable: 'title',
	        repositionOnOpen: false,
	        repositionOnContent: false,

	        onOpen: function() {
	        	this.setContent("<iframe seamless='seamless' scrolling='no' src='myscript.php?do=pm&withuser=" + userid + " style='border: 1px solid #333388;' frameborder='0' height='100%' width='100%'></iframe>");
	        },

	        onClose: function() {
	        	this.setContent('Κλείσιμο παραθύρου…');
	    	}

	    });
            myModals[userid].open();
	}
}
  • Like 1
philos Crazy Insomniac

philos

Δημοσ.
  • Μέλος
Δημοσ.

Παιδιά το κατάφερα! Ευχαριστώ πολύ για τις υποδείξεις σας. :-)

 

Στην ουσία έδωσα τιμές boolean στην myModals[userid], στην onClose την κάνω false, οπότε ΑΝ είναι κλειστό το παράθυρο, η συνάρτηση το ξανά ανοίγει, διαφορετικά δεν κάνει τίποτα.

 

:-D

var myModals = {};

function loadpmwin(userid, username)
{
    if (myModals[userid]) {
      return false;
    } else {
        myModals[userid] = true;
          new jBox('Modal', {
            attach: $('#pm_user' + userid),
            width: 360,
            height: 200,
            title: 'Προσωπική Επικοινωνία με <b>' + username + '</b>',
            overlay: false,
            content: '',
            draggable: 'title',
            repositionOnOpen: false,
            repositionOnContent: false,

            onOpen: function() {
                this.setContent("<iframe seamless='seamless' scrolling='no' src='myscript.php?do=pm&withuser=" + userid + " style='border: 1px solid #333388;' frameborder='0' height='100%' width='100%'></iframe>");
            },

            onClose: function() {
                this.setContent('Κλείσιμο παραθύρου…');
            myModals[userid] = false;
            }

        }).open();
    }
}
nucleus Proficient

nucleus

Δημοσ.
Δημοσ.

Δεν είμαι πολύ γνώστης της jquery εσύ τα ξέρεις καλύτερα... δεν μπορεί να γίνει απλά με το εξής ...

$(function() {
    $(window).focus(function() {
        //if window focus code here
    });

    $(window).blur(function() {
        //if not code here
    });
});

??

 

Εντάξει ίσως η τελευταία φράση να ήταν λίγο απόλυτη απο μέρους μου συγνώμη για αυτό.

 

Απλώς χρησιμοποιεί jquery plugin για τα modals το jBox δεν ξέρω αν ο παραπάνω κώδικας θα δουλέψει για αυτά. Επίσης ανέφερε ότι

 

Οπότε μπορεί να υπάρχουν παράλληλα πάνω από ένα ανοιχτά παράθυρα.

 

οπότε πιο θα κάνει blur ή focus?

  • Like 1
libereas Proficient

libereas

Δημοσ.
Δημοσ.

Εντάξει ίσως η τελευταία φράση να ήταν λίγο απόλυτη απο μέρους μου συγνώμη για αυτό.

 

Απλώς χρησιμοποιεί jquery plugin για τα modals το jBox δεν ξέρω αν ο παραπάνω κώδικας θα δουλέψει για αυτά. Επίσης ανέφερε ότι

 

 

οπότε πιο θα κάνει blur ή focus?

Μμμμμ έχεις ένα point

philos Crazy Insomniac

philos

Δημοσ.
  • Μέλος
Δημοσ.

Και κάτι άλλο παιδιά. Αν μπορεί κάποιος ας ρίξει μια γρήγορη ματιά στα options του jBox.

Αναρωτιέμαι αν μπορώ α) να κάνω το παράθυρο resizable (δλδ να το τραβάει ο χρήστης με το ποντίκι σαν να είναι κανονικό window και να μεγαλώνει) και β) όταν ανοίγει ένα jBox, να μπορεί η βασική σελίδα να εξακολουθεί να είναι scrollable (γιατί όταν ανοίγει το jBox, δε μπορείς να μετακινηθείς πάνω - κάτω στη σελίδα με scroll).

nucleus Proficient

nucleus

Δημοσ.
Δημοσ.

Για το α) δεν φαίνεται να υποστηρίζει κάτι τέτοιο το jBox.

 

Για το β) 

 

Aν επιλέξεις να αφήσεις το type του jBox σαν Modal τότε όχι δεν γίνεται scroll στην σελίδα πίσω. Αυτός είναι άλλωστε και ο σκοπός των Modal dialogues, να μην αφήνουν interaction όταν είναι active.

 

Αν αλλάξεις το type σε Notice τότε μπορείς να κάνεις scroll την σελίδα αλλά αλλάζει εντελώς η εμφάνιση και ο ρόλος του jBox.Δοκίμασε το και δες αν σου κάνει.

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...