dotNetZone.gr

Απ:Preload των εικόνων στο κεντρικό μενού

rousso — Tue, 09 Aug 2005 03:47:41 GMT

Ακριβώς!

IE bug όπως είπα και στο πρηγούμενο post μου. Όποτε περνάει το mouse πάνω από το anchor, το anchor κάνει redraw. Βγάλε το background-image από το class του anchor και λύνεται το θέμα..

Εγώ πάντως στο CS site που φτιάχνω δεν έκανα αυτό που πρότεινα στο προηγούμενο post μου τελικά. Δεν άλλαξα τίποτε άλλο παρά μόνο το css και το skin μου, όπου μέσα στο LI έβαλα ένα table που περιέχει το anchor και έληξε. Έκοψα τις δυο "τεράστιες" εικόνες του background (που φτάνανε το 1K) σε 5 μικρές (63 bytes ή κάθε μια)... και thats it...

Θα το φτιάξω για τα graphics του DNZ όταν θα έχω λίγο χρόνο και θα το στείλω εδώ να κλείσει το θέμα (εκτός αν με προλάβει ο Γιώρος)...

Απ:Preload των εικόνων στο κεντρικό μενού

George J. Capnias — Tue, 09 Aug 2005 02:23:54 GMT

Βρε ΄σεις δεν αλλάζει το background image client-side.

Server-side, καταλαβαίνει το tab που είναι ενεργό και του δίνει διαφορετικό class και έτσι φαίνεται φωτισμένο διαφορετικά. ΔΕΝ ΑΛΛΑΖΕΙ στο mouse over. Δεν έχει τέτοιο εφέ!

Γιατί να μπει script, γιατί να μπει οτιδήποτε;

To anchor tag δουλεύει όπως παντού, και στο hover event κάνει τα γράμματα πορτοκαλί. Αυτό είναι site-wide εφέ για το anchor.

Πιθανώς είναι κάποιο από τα πολλά bug στο rendering των CSS που έχει ο IE(;).

George J.

Απ:Preload των εικόνων στο κεντρικό μενού

Χρήστος Γεωργακόπουλος — Tue, 09 Aug 2005 02:01:50 GMT

Γιατί να μην μπεί ένα javascript preload των εικόνων; του στυλ:

Απ:Preload των εικόνων στο κεντρικό μενού

rousso — Fri, 05 Aug 2005 09:30:07 GMT

Λοιπόν εγώ το "έλυσα" ως εξής:

πήρα τα gif και αφού τα έκανα filp horizontaly στο photoshop τους άλλαξα ονόματα μεταξύ τους (έκανα το δεξί αριστερό και το αριστερό δεξί) όπως είχα πει παραπάνω.

στη συνέχεια πήγα στο /Themes/default/Skins/Skin-NavigationMenu.ascx όπου έκανα την αλλαγή που φαίνεται παρακάτω με bold.

Δηλαδή πρόσθεσα ένα άδειο <LI> με class closing και id closing (δεν έχει καμία σημασία προφανώς αν είναι ή δεν είναι τα ίδια) που τρέχει στον server.

Τέλος πήγα στο γνωστό μας NavigationMenu.cs (το οποίου το skin είχα μόλις αλλάξει) και στην

private void Menu_ItemDataBound(object sender, RepeaterItemEventArgs e)

πρόσθεσα στο τέλος το bold από το κομμάτι που ακολουθεί:

if(string.Compare(link.Name,this.Selected,true) == 0)
{
      HtmlGenericControl genericControl = e.Item.FindControl("listItem") as HtmlGenericControl;
      if(genericControl != null)
            genericControl.Attributes.Add("class", "currenttab");

      genericControl = e.Item.FindControl("closing") as HtmlGenericControl;
      if(genericControl != null)
            genericControl.Attributes.Add("class", "closingCurrent");
}

Δηλαδή πρόσθεσα δυο γραμμές που βρίσκουν το LI που προγουμένως έβαλα στοskin χρησιμοποιώντας του id του (closing) και του αλλάζω το class (CssClass) σε "colsingCurrent".

Τι έμεινε;

Πάμε και στο css και αφού βγάλουμε τα background rules από τους A selectors που είχα αναφέρει στο προηγούμενο post (να μην τα ξαναγράφω τώρα), προσθέτουμε, (τι άλλο;), δύ selectors για το closing και το closingCurrent ως εξής

#headertab li.closing

{
      BACKGROUND: url(../images/righttab2.gif) no-repeat right top;
      PADDING: 5px 0px 6px 9px
      FLOAT: right;
}

#headertab li.closingCurrent
{
      BACKGROUND-IMAGE: url(../images/righttab_on2.gif);
      PADDING: 5px 0px 6px 9px;
      FLOAT: right;
}

Α!.. επίσης στο #headertab UL A selector άλλαξα το PADDING-RIGHT από ~~15px~~ σε 6px

Πιθανώς υπάρχει τρόπος να κάνεις με databinding expression το assignment του class property στο li tag μέσα στο skin (χωρίς να χρειάζεται compilation) αλλά βαριέμαι να το ψάξω τώρα (και νυστάζω επίσης).

Αυτό δουλεύει χωρίς flicker. Γιατί; Διότι ο IE (κακώς κατα πάσα πιθανότητα) κάνει redraw (ή invalidate) όλο το client area του <A> element μόλις περάσει το mouse από επάνω, στο πλαίσιο της υλοποίησης από την MSFT του hover pseudo-selector. Με άλλα λόγια ίσως να τό λεγε κανείς και bug (δεν ξέρω... ας μην λέω μεγάλη κουβέντα καλύτερα).

Μόλις βγάλεις το image από το background του A tag τότε το flicker σταματάει γιατί απλά το όποιο element την έχει τώρα πια δεν καταλαβαίνει από hover και δεν αντιδρά με repaint στο mouseover/mouseout.

Αυτά. Ελπίζω να βοήθησα. Εγώ πάντως βοηθήθηκα γιατί ήταν από τα πρώτα πράγματα που είχα παρατηρήσει στο CS από την πρώτη φορά που το είδα και με χάλαγε πολύ. Ούτως ή άλλως θα καθόμουνα να το λύσω.

rousso

υ/γ: δεν κι ό,τι καλύτερο η λύση που σας δίνω αλλά δουλεύει και γίνεται και γρήγορα. σίγουρα υπάρχει και καλύτερος τρόπος. Αυτό που έλεγα στο προηγούμενο post με τα tables είναι πιο καλό, αλλά αν δείτε τον κώδικα του CS θα πείτε κι εσείς άστο καλύτερα, δεν το ξαναγράφω όλο από την αρχη...

Απ:Preload των εικόνων στο κεντρικό μενού

rousso — Fri, 05 Aug 2005 05:11:47 GMT

Πάντως τώρα που σε διαβάζω το πρόβλημα εξακολουθώ να το βλέπω...

Δεν νομίζω ότι πρέπει να ανησυχείς για τα bytes. Αφού οι εικόνες θα γίνουν ελλάχιστες.. Δύο είκόνες 10Χ10 pixels και μια 1Χ10 pixels. 110 bytes θα είναι (άντε 200) ενώ τώρα είναι 1,5 KB ..... Εσύ τι θα προσθέσεις 50 bytes; 100; 200; Θα είναι 80% μικρότερο τουλάχιστον...

Έτσι νομίζω.

Το μόνο κακό με το recompile είναι ότι δεν θα παίζουν τα έτοιμα themes (αλλά τι σε νοιάζει; αφού έχεις δικό σου!)

rousso

Απ:Preload των εικόνων στο κεντρικό μενού

George J. Capnias — Fri, 05 Aug 2005 05:00:10 GMT

Δεν θα αλλάξει και πολύ την κατάσταση η πρώτη πρόταση που κάνεις: Θα είναι πιο μεγάλο το δεξιό γραφικό και θα είναι πιο μικρό αυτό το κομμάτι που θα χάνεται.

Στην δεύτερη πρόταση δεν συμφωνώ γιατί θα προσθέσει και άλλα byte σε μια σελίδα, που μπορώ να τα αποφύγω με το CSS...

Το πρόβλημα φαίνεται να προέρχεται από τον διαφορετικό path που καλύπτει κάθε ένα από τα 2 styles που υπάρχουν στο toolbar. Έκανα μια μικρή επέμβαση το απόγευμα και πλέον υπάρχουν δύο named css classes που φτιάχνουν το toolbar. Θεωρητικά, αφού χρησιμοποιούν και τα δύο το ίδιο path, όπως άλλωστε αυτό προτείνεις και εσύ με το παραπάνω snippet, κάνουν render τα στοιχεία που βρίσκονται από κάτω τους με τον ίδιο τρόπο, δεν πρέπει να δούμε ξανά το πρόβλημα.

Αν παρατηρήσουμε το πρόβλημα ξανά, μπορούμε να εξετάσουμε και άλλες λύσεις.

George J.

Απ:Preload των εικόνων στο κεντρικό μενού

rousso — Thu, 04 Aug 2005 20:15:08 GMT

χμμμ... τώρα που το ξανασκέφτομαι αυτό που πρότεινα δεν λύνει το θέμα με το current tab....Κάνε καλύτερα το εξής....

αντέστρεψε τα δύο γραφικά μεταξύ τους...

βάλε το μεγάλο στο background του LI και το μικρό στο background του Α...

That should work...

rousso

υ/γ: βέβαια αν θες να κάνεις το σωστό, πέτα τη τη βλακεία και φτιάξε το ανθρώπινα χωρίς μεγάλα γραφικά και γραφικότητες όπως το UL.... βάλε table στο κάτω κάτω της γραφής

minimal graphics ok? you catch my drift....?

(παρένθεση: επιδή το κάνουν με repeater για να κάνεις το παραπάνω table θα χρειαστείς δύο repeaters databound στο ίδιο datasource.)

Απ:Preload των εικόνων στο κεντρικό μενού

rousso — Thu, 04 Aug 2005 20:00:15 GMT

λοιπόν κοίτα να δεις...

Αυτοί το έχουν κάνει με ένα τελείως "ποντιακό" τρόπο...
(τα παιδιά που γράψανε το CS εννοώ και.. δευτερη παρένθεση: δεν έχω τίποτα με τους πόντιους... τρόπος του λέγειν είναι....)

Κάνουν render τα tabs ως UL

Την άρχή του κάθε tab την βάζουν σαν background left attached στο LI

Μέσα σε κάθε LI βάζουν το A tag στο οποίο έχουν ένα right attached background με το τέλος κάθε tab

Δηλάδη φανταστείτε ότι κάνουν το εξής χονδρικά

<tag id="headertab"><ul><li class="currenttab"><a>home</a></li><li><a>forums</a></li><li><a>blogs</a></li></ul></tag>

και μετά έχουν στο css:

#headertab UL
{
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
LIST-STYLE-TYPE: none
}

#headertab LI
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 9px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
/* νάτη η αρχη του tab με το στρογυλεμένο top left */
BACKGROUND: url(../images/lefttab.gif) no-repeat left top;
FLOAT: right;
MARGIN: 0px;
}

#headertab UL A
{
DISPLAY: block;
PADDING-RIGHT: 15px;
PADDING-LEFT: 6px;
PADDING-BOTTOM: 6px;
PADDING-TOP: 5px;
/* νάτο και το τέλος του tab με το στρογυλεμένο top right και το background */
BACKGROUND: url(../images/righttab.gif) no-repeat right top;
FLOAT: left;
COLOR: #26435F;
TEXT-DECORATION: none ;
font-face: Verdana;
}

#headertab A { FLOAT: none }

#headertab A:hover { COLOR: #333 }

#headertab .currenttab
{
/* νάτο κι εδώ για το current tab εδώ... */
BACKGROUND-IMAGE: url(../images/lefttab_on.gif);
}

#headertab .currenttab A
{

/* ... κι εδώ */
BACKGROUND-IMAGE: url(../images/righttab_on.gif);
PADDING-BOTTOM: 6px;
COLOR: #333;
}

Για δείτε εδώ και τις εικόνες που χρησιμοποιούν

Να η αρχή: http://www.dotnetzone.gr/cs/themes/default/images/lefttab.gif

να και το υπόλοιπο: http://www.dotnetzone.gr/cs/themes/default/images/righttab.gif

Είναι ή δεν είναι πόντιοι;

Ας μην μπώ στη συζήτηση που τους ήρθε η φοβερή ιδέα να βάλουν UL/LI γι αυτή τη δουλειά.

Για να το διορθώσουμε χωρίς recompile (γιατί το UL/LI παράγεται στο CommunityServer.Controls.NavigationMenu (cs)), μπορεί να αλλάξει το style sheet (το οποίο βρίσκεται κι αυτό σε aspx ευτυχώς χωρίς codbehind).

το css είναι στο /Themes/default/style/default.aspx.

Προτείνω να σπάσει το righttab.gif σε δύο. Το ένα κομματι πες το tabbg.gif και φτιάξτο παίρνωντας την πρώτη στήλη αριστερά από pixels του rigthtab.gif. Αυτό βάλε το σαν background-image στο UL. Στο righttab.gif άφησε μόνο το δεξί τμήμα του γραφικού που κάνει το στρογκύλκεμα στο τέλος του tab. Mην αλλάξεις τίποτε άλλο.

Νομίζω ότι θα παίξει χωρίς flicker.

Θα το έφτιαχνα εγώ αλλά αν δεν πιάσει το κόλπο δεν έχω χρόνο να το τεστάρω τώρα...

φιλικά

rousso

Απ:Preload των εικόνων στο κεντρικό μενού

George J. Capnias — Thu, 04 Aug 2005 01:59:39 GMT

Δεν υπάρχει θέμα preloading, μιας και δεν αλλάζει το backround image, σε καμιά περίπτωση, σε mouse over event.

Στο mouse over event αλλάζει μόνο το χρώμα του font, ειδικά για να μην υπάρχουν αυτά τα issues.

Πιθανώς ο IE δεν το παίζει και τόσο καλά, όσο θα θέλαμε τα css implementations, που γίνονται όλο και πιο απαιτητικά από την μεριά του σχεδιαστή, όσο περνάει ο καιρός.

Από την άλλη, και τα cascading styles μέσα στο CS, και η HTML που χρησιμοποιείται, είναι σε μερικά σημεία εξεζητημένα και υπερβολικά. Πχ για τα tabs πάντα για να πάρουν αυτό το background όταν είναι στο default τους είναι ένα στυλ κάπως έτσι:

#headertab UL LI{}

και για να πάρουν το έντονο background είναι:

.selected{}

Απλά είναι πάρα πολλά αυτά του είδους τα ψιλο-προβλήματα, και χρειάζονται χρόνο για να εντοπιστούν και να διορθωθούν, δεν μπορούσα να έχω ένα ολοκληρωμένο test χωρίς να έχει βγει live και να μπαίνουν χρήστες για να εντοπιστούν τέτοια προβλήματα.

Από την άλλη, μερικά άλλα προβλήματα, έχουν προτεραίοτητα, μιας και είναι πιο ουσιαστικά για την λειτουργία του forum. Θα προσπαθήσω το συντομότερο δυνατόν να σας απαλλάξω από αυτό.

George J.

Απ:Preload των εικόνων στο κεντρικό μενού

rousso — Wed, 03 Aug 2005 19:37:51 GMT

Το πρόβλημα δεν έχει να κάνει με το DNZ. Πήγαινε στο communityserver.org να το δεις κι εκεί. Η ίδια βλακία γινότανε και με την προηγούμενη έκδοση του CS. Θέλει preoload ή ακόμα καλύτερα θέλει κατάργηση των εικόνων.

Αν θέλετε rounded corners με JavaScript δείτε κι αυτό εναλλακτικά: http://www.stunicholls.myby.co.uk/boxes/krazy.html.

Απ:Preload των εικόνων στο κεντρικό μενού

Dimitris — Wed, 27 Jul 2005 16:46:12 GMT

Καλημέρα,

το γεγονός οτι χρησιμοποιείς pseudo-classes για roll over δεν σε περιορίζει στο να κάνεις preload τις εικόνες σου - εκτος βέβαια αν θέλεις να αποφύγεις τελείως την χρήση Javascript -.

Απ:Preload των εικόνων στο κεντρικό μενού

Χρήστος Γεωργακόπουλος — Mon, 25 Jul 2005 23:01:26 GMT

Δεν θα γλυτώσεις το flick αν δεν τις κάνεις preload. Ο IE ξανατσεκάρει τον server στο mouseover. Όσο πιο αργή η σύνδεση, τόσο πιο έντονα φαίνεται.

Για το style, θα ήθελα να τα πάρω και να δοκιμάσω μια δική μου εκδοχή, ακόμα και αν δεν τρέχει σε άλλο installation, πιστεύω μπορώ να τα καταφέρω στα τυφλά, but άστο για μόλις γυρίσω από διακοπές...

Απ:Preload των εικόνων στο κεντρικό μενού

George J. Capnias — Mon, 25 Jul 2005 21:58:17 GMT

Ναι είδες;

Όσο και να περίμενε κάποιος ότι χρησιμοποιώ javascript για να κάνω το roll-over από την μια κατάσταση στην άλλη δεν το κάνω. Κάνω ένα πολύ πιο απλό κόλπο: To Tab που βλέπεις είναι ένα <a> tag που έχει εκτός από το a {} cascading style έχει και τα a:link{}, a:hover{} και το a:visited{}. Ετσι αλλάζω το background picture ανάλογα την κατάσταση που είναι το <a> tag και έχουμε το φαινόμενο του roll over.

Παρόλλα αυτά τα καλά πρέπει να το ξαναδώ τις εικόνες, πρέπει κάτι να που έχει ξεφύγει...

Αν θέλετε να σας δώσω το default style της έκδοσης του CS που τρέχουμε, αλλά δεν θα τρέξει, σε άλλο installation. Έχω κάνει πάρα πολλές διορθώσεις για να πάρει την μορφή που βλέπετε.

George J.

Preload των εικόνων στο κεντρικό μενού

Χρήστος Γεωργακόπουλος — Mon, 25 Jul 2005 06:34:26 GMT

Κάποιο πρόβλημα έχει στο μενού Αρχική σελίδα | blogs | Συζητήσεις κλπ. Δεν φαίνεται να κάνει σωστό preload και έχει καθυστέρηση στο mouse over.

Τώρα που το βλέπω, πουθενά δεν γίνεται preload.....

Το μόνο πράγμα που κάνει preload εδώ μέσα είναι το FTB, το οποίο κάνει preload και τα 50-70 εικονίδια που έχει έστω και αν έχει ρυθμιστεί να δείχνει μόνο 10... με αποτέλεσμα extra καθυστέρηση...

By the way, μήπως ο Γιώργος να έβαζε κάπου το skin που δουλέυει για να το πειράξουμε και να βγάλουμε νέα skins;