Style a jquery accordion

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Style a jquery accordion

Δημοσίευση από dionisis71 » 07 Φεβ 2013 16:45

Καλησπέρα,

Θέλω να κάνω css ένα jquery accordion. Όσο και αν το έψαξα η αλήθεια είναι ότι δυσκολεύομαι αρκετά και θα ήθελα κάποιος να με βοηθήσει να καταλάβω κάποια πράγματα.

Έχω ξεκινήσει ένα demo εδώ.

Τι έχω κάνει.

α. έχω δώσει ένα style στο accordion div
β. έχω δώσει ένα style στο accordion header.
γ. έχω δώσει ένα style στο accordion content.


Περίεργο πρόβλημα.


α) Στο active header εμφανίζεται ένα border πορτοκαλί το οποίο δεν το έχω όρίσει, πως μπορώ να το αλλάξω και που το βρίσκει;

β) Ενω η κλάση για το active header μου δουλεύει local κανονικά, δεν μπορώ να καταλάβω γιατί το header δεν γίνεται πράσινο όπως του έχω ορίσει στο demo που έχω ανεβάσει.

Μέχρι που θέλω να φτάσω.

α) Όταν το header είναι active, να αλλάζει χρώμα το background και έστω ότι

για:

α) innactive header τότε Title font 13px
β) innactive header τότε Article font 11px
γ) active header τότε Title font 15px
δ) active header τότε Article font 13px

Θα είναι ένα ωραίο μάθημα για μένα να καταλάβω κάποια πράγματα παραπάνω.

Ευχαριστώ

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6237
Εγγραφή: 30 Νοέμ 2004 03:09

Style a jquery accordion

Δημοσίευση από fafos » 07 Φεβ 2013 18:08

a) einai to outline otan kati einai energo (fysiologika tha to vlepeis portokali me chrome, mple me safari kai diakekomenh grammh me IE)... aplos vazeis ena outline:0; sto .ui-accordion .ui-accordion-header

b) vale to me on click sto stoixeio gia na allazei background (mporeis anti gia css() na xrhsimopohseis class() )

g) to idio me parapano

demo: http://jsfiddle.net/FG9mA/
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Style a jquery accordion

Δημοσίευση από dionisis71 » 08 Φεβ 2013 09:09

Σε ευχαριστώ πολύ, ώρα για παιχνίδι...

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Style a jquery accordion

Δημοσίευση από dionisis71 » 08 Φεβ 2013 11:20

λοιπόν.. ,

κατάφερα να κάνω το header να αλλάζει χρώμα όταν είναι active. Αυτό που δεν μπορώ να καταλάβω είναι πως θα κάνω το tittle και μόνο αυτό (όχι όλο το accordion-header) να έχει ένα font size 15px όταν είναι active το accordion-header.

ευχαριστώ

demo:jsfiddle.net/FG9mA/11/

Coddy
Δημοσιεύσεις: 7
Εγγραφή: 06 Μάιος 2005 23:09

Style a jquery accordion

Δημοσίευση από Coddy » 08 Φεβ 2013 12:54

Δεν σου δουλεύει διοτι στο css θέλει !important. Μπορείς να παίξεις με το addClass και το removeClass για να το πετύχεις:

http://jsfiddle.net/FG9mA/14/

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Style a jquery accordion

Δημοσίευση από dionisis71 » 08 Φεβ 2013 13:29

νομίζω όμως ότι το ερώτημα παραμένει.. Αυτό που κάνει το demo είναι 15px για Tittle και Article ενώ θέλω 15px μόνο το Tittle.

edit:Νομίζω ότι κατάλαβα τι λές. Για να δοκιμάσω πάλι..

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Style a jquery accordion

Δημοσίευση από dionisis71 » 08 Φεβ 2013 13:36

Δεν κατάφερα κατι.. η απορία παραμένει.

Coddy
Δημοσιεύσεις: 7
Εγγραφή: 06 Μάιος 2005 23:09

Style a jquery accordion

Δημοσίευση από Coddy » 08 Φεβ 2013 14:39

Μα μόνο το font-size του Title αλλάζει.

Δες εδω:
http://jsfiddle.net/FG9mA/15/

Στο έκανα 25px για να δεις τη διαφορά

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Style a jquery accordion

Δημοσίευση από dionisis71 » 08 Φεβ 2013 14:47

Και όμως φίλε μου, όσο μεγάλο και να το κάνεις ο υπολογιστής μου μου δείχνει ότι αλλάζει font-size και το article μαζί με το tittle. Δοκίμασα με 2-3 διαφορετικούς browsers και το αποτέλεσμα είναι το ίδιο. Δεν μπορώ να καταλάβω γιατί σε κάποιες περιπτώσεις μου τα δείχνει όπως γουστάρει.. το 'χω τσεκάρει και με άλλα πράγματα. Πρέπει να θέλω ένα format να έρθει στα ίσια του..

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Style a jquery accordion

Δημοσίευση από dionisis71 » 08 Φεβ 2013 14:54

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

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6237
Εγγραφή: 30 Νοέμ 2004 03:09

Style a jquery accordion

Δημοσίευση από fafos » 08 Φεβ 2013 16:11

An valeis divs anti gia tables tha ta allazeis pio eukola.. an epimeneis sta tables prepei na doulepseis me eq() gia na allazeis ta css ton td:

Κώδικας: Επιλογή όλων

$(".accordion-header").click(function() {
//epanefere ta prohgoumena active se inactive
    $(".accordion-header").css("background", "#D2D2D2").find('td').eq(0).css("font-size", "13px").find('td').eq(1).css("font-size", "11px");    

//dhmiourghse ta nea active
    $(this).css("background", "#BEFF9F");
     $(this).find('td').eq(0).css("font-size", "15px");//allazei to title
     $(this).find('td').eq(1).css("font-size", "13px");//allazei to article     
});
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 238
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

Style a jquery accordion

Δημοσίευση από dionisis71 » 08 Φεβ 2013 22:27

Πολύ ενδιαφέρον fafos, σε ευχαριστώ.

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 4 επισκέπτες