Avatar billede kodak Mester
19. juni 2014 - 01:17 Der er 11 kommentarer

problem med display:none;

Jeg har en <div class="panel"> der slider ned fra toppen af min side ved tryk på et link.

i den har jeg "<div id="scrollbar-four"><div class="scrollbar">" som er en scrollbar.

Jeg har dette i min css:
#panel {
    width: 100%;
    height: 250px;
    color: #999999;
    background: #272727;
    overflow: hidden;
    position: relative;
    z-index: 3;
    display: none;
}
men "display: none;" bliver ved med at drille mig,
hvis ikke den er der vil mit slidedown være synligt ved load
Hvis den er der virker scroll funktionen ikke i scrollbaren,

Hvad kan jeg gøre ved dette?
Avatar billede Stickano Nybegynder
19. juni 2014 - 09:27 #1
Du skal fortælle din div, at den skal blive synlig på handling.

#panel {
    width: 100%;
    height: 250px;
    color: #999999;
    background: #272727;
    overflow: hidden;
    position: relative;
    z-index: 3;
    display: none;
}

#panel:active{
    display:visible;
}

Noget i den dur.
Avatar billede kodak Mester
19. juni 2014 - 11:33 #2
når panelet er nede kommer denne style ind:
<div id="panel" style="display: block;">

men jeg kan ikke finde kilden der giver skriver den style
Avatar billede kodak Mester
19. juni 2014 - 12:04 #3
Avatar billede Stickano Nybegynder
19. juni 2014 - 12:23 #4
Det syntes ellers at virke helt fint her. Den er oppe når man kommer ind på siden, og glider ned når man trykker på login.
Avatar billede kodak Mester
19. juni 2014 - 14:27 #5
jeg har indsat en scroll liste i venstre side af slideren
men man kan ikke scrolle i den.
Avatar billede Stickano Nybegynder
19. juni 2014 - 16:12 #6
Kan du smide CSS'en for følgende klasser-

viewport
overview
featured-articles-container

Tak på forhånd.
Avatar billede kodak Mester
19. juni 2014 - 17:42 #7
#scrollbar .viewport {
    width: 98%; height: 270px; overflow: hidden; position: relative;
}
#scrollbar-one .viewport {
    width: 98%; height: 270px; overflow: hidden; position: relative;
}
#scrollbar-two .viewport {
    width: 98%; height: 270px; overflow: hidden; position: relative;
}
#scrollbar-three .viewport {
    width: 98%; height: 270px; overflow: hidden; position: relative;
}
#scrollbar-four .viewport {
    width: 98%; height: 270px; overflow: hidden; position: relative;
}
#scrollbar-five .viewport {
    width: 98%; height: 270px; overflow: hidden; position: relative;
}






#scrollbar .overview {
    list-style: none; left: 0px; top: 0px; width: 100%; position: absolute;
}
#scrollbar-one .overview {
    list-style: none; left: 0px; top: 0px; width: 100%; position: absolute;
}
#scrollbar-two .overview {
    list-style: none; left: 0px; top: 0px; width: 100%; position: absolute;
}
#scrollbar-three .overview {
    list-style: none; left: 0px; top: 0px; width: 100%; position: absolute;
}
#scrollbar-four .overview {
    list-style: none; left: 0px; top: 0px; width: 100%; position: absolute;
}
#scrollbar-five .overview {
    list-style: none; left: 0px; top: 0px; width: 100%; position: absolute;
}







.featured-articles-container {
    background: rgb(247, 247, 247); padding: 10px;
}
.featured-articles-container .heading {
    color: rgb(237, 109, 73); padding-bottom: 8px; margin-top: 0px; border-bottom-color: rgb(217, 217, 217); border-bottom-width: 1px; border-bottom-style: dotted;
}
.featured-articles-container .heading-blue {
    color: rgb(237, 109, 73); padding-bottom: 8px; margin-top: 0px; border-bottom-color: rgb(217, 217, 217); border-bottom-width: 1px; border-bottom-style: dotted;
}
.featured-articles-container .heading-blue {
    color: rgb(54, 147, 207);
}
.featured-articles-container .articles a {
    color: rgb(13, 13, 13); line-height: 30px; padding-left: 20px; font-size: 12px; font-weight: 500; margin-bottom: 1px; border-bottom-color: rgb(217, 217, 217); border-bottom-width: 1px; border-bottom-style: dotted; display: block; position: relative;
}
.featured-articles-container .articles a:hover {
    color: rgb(115, 115, 115);
}
.featured-articles-container .articles a .label-bullet {
    left: 1px; top: 10px; width: 0px; height: 0px; border-top-color: rgb(239, 128, 96); border-left-color: transparent; border-top-width: 9px; border-left-width: 9px; border-top-style: solid; border-left-style: solid; position: absolute;
}
.featured-articles-container .articles a .label-bullet-blue {
    left: 1px;
    top: 10px;
    width: 0px;
    height: 0px;
    border-top-color: rgb(239, 128, 96);
    border-left-color: transparent;
    border-top-width: 9px;
    border-left-width: 9px;
    border-top-style: solid;
    border-left-style: solid;
    position: absolute;
}
.featured-articles-container .articles a .label-bullet-blue {
    border-top-color: rgb(75, 158, 212);
    border-top-width: 9px;
    border-top-style: solid;
}
.featured-articles-container .articles a .label-bullet-green {
    left: 1px;
    top: 10px;
    width: 0px;
    height: 0px;
    border-top-color: rgb(116, 183, 73);
    border-left-color: transparent;
    border-top-width: 9px;
    border-left-width: 9px;
    border-top-style: solid;
    border-left-style: solid;
    position: absolute;
}
.featured-articles-container .articles a .label-bullet-green {
    border-top-color: rgb(116, 183, 73);
    border-top-width: 9px;
    border-top-style: solid;
}
.featured-articles-container .articles a .date {
    color: rgb(179, 179, 179); padding-left: 2px; font-size: 10px; font-weight: normal;
}
.featured-articles-container .articles:hover {
    cursor: default; opacity: 1;
}
.featured-articles-container .articles .phone {
    text-align: right; padding-top: 5px; font-size: 12px;
}
Avatar billede Stickano Nybegynder
20. juni 2014 - 10:02 #8
Hvad sker der hvis du smider overflow:scroll; på din featured-articles-container klasse?

.featured-articles-container {
    background: rgb(247, 247, 247);
    padding: 10px;
    overflow:scroll;
}
Avatar billede kodak Mester
20. juni 2014 - 17:04 #9
Som du kan se der kommer en scrolbar frem inde i div'en
men den virker heller ikke
Avatar billede HBP2 Praktikant
21. juni 2014 - 00:15 #10
Prøv at sæt overflow=hidden på .features-article-container, og sæt overflow=scroll på .viewport. Så kan du scrolle med standard scrollbaren, men ikke med den hjemmelavede.
Avatar billede kodak Mester
21. juni 2014 - 13:17 #11
kan man ikke ændre noget i "panel" for at få den hjemmelavede til at virke?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester