Oprettet lør. d. 21. juli 2012 kl. 22:34:33

100 point uddelt | 11 kommentarer
mik2000
mik2000 (7.502 point. Point ude: 200)

Transition og transform

Hej

Jeg er ved at lave en lille chat der skal ligge nede i hjørnet.

Jeg har i den forbindelse 2 spørgsmål:

1: Vil I på nogen måde optimerer/ændre koden (er noget forkert/misforstået)?

2: Jeg vil gerne ved hjælp af transition/transform (CSS3) have den store chatbox til enten at komme op flydende i animation eller fade ind - men kan ikke få det til at virke i min kode

Herunder er min kode (ps er klar over der mangler ting ved html som doctype, titel mv):

------------------------------------------
Index.html
------------------------------------------
<html>
<head></head>
<body>
<div id="div1">Dette er den normale side eller rettere en illustration for det.</div>

<div class="chat" id="chat" onclick="this.className = 'chat2'; document.getElementById('stor_chat').className = 'stor_chat2'">Online support chat - Online</div>

<div class="stor_chat" id="stor_chat">Stor chat<br /><br />
    <span style="cursor:pointer; color:#00F;" onclick="document.getElementById('chat').className = 'chat'; document.getElementById('stor_chat').className = 'stor_chat'">Gør lille</span>
</div>

</body>
</html>

------------------------------------------
css.css
------------------------------------------
body{
    background-color:#06F;
    overflow-y: scroll;
}
#div1{
    background-color: #CCC;
    margin: 0 auto;
    width: 960px;
    min-height: 700px;
}
.chat{
    background-color:#FFF;
    position: fixed;
    bottom: 0px;
    right: 10px;
    width: 200px;
    height: 28px;
    z-index: 99;
    line-height:28px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:center;
    border-top-color:#000;
    border-top-style:solid;
    border-top-width:2px;
    border-left-color:#000;
    border-left-style:solid;
    border-left-width:2px;
    border-right-color:#000;
    border-right-style:solid;
    border-right-width:2px;
    cursor: pointer;
    border-radius: 8px 8px 0px 0px;
}
.chat2{
    display:none;
}
.stor_chat{
    display:none;
    height:1px;
}
.stor_chat2{
    background-color:#FFF;
    position: fixed;
    bottom: 0px;
    right: 10px;
    width: 300px;
    height: 300px;
    z-index: 98;
    padding-right: 8px;
    padding-left: 8px;
    padding-top: 8px;
    box-sizing:border-box;
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    border-top-color:#000;
    border-top-style:solid;
    border-top-width:2px;
    border-left-color:#000;
    border-left-style:solid;
    border-left-width:2px;
    border-right-color:#000;
    border-right-style:solid;
    border-right-width:2px;
    border-radius: 8px 8px 0px 0px;
}
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet søn. d. 22. juli 2012 kl. 00:49:59| #1

DeeDawg
DeeDawg (9.509 point)
- og nej det staves ikke DeeDwag
Eftersom CSS3 endnu ikke er en standard og ikke kan forventes at fungere i alle browsere, bør du holde dig til normen og bruge JavaScript (evt. jQuery) til den slags opgaver.

Hvad angår det resterende, så er der da plads til lidt forbedringer. Først og fremmest skal <br /> ikke bruges til at skabe mellemrum, det har vi margin og/eller padding til. Derudover er der ingen grund til at bruge et <span> element for at imitere et normalt link. Du kan bare bruge et helt normalt link, og så gøre som følgende for at fjerne linkets standard funktionalitet:

<a href="#" onclick="document.getElementById('chat').className = 'chat';document.getElementById('stor_chat').className = 'stor_chat';return false">Gør lille</a>

Dette kan ligeledes gøres for din chat knap. Du behøver ikke et <div> element for at kunne style det som en blok. Dette kan også gøres for helt normale links, bare ved at tilføje display: block; eller display: inline-block;. Du bør altid holde dig til de tags som bedst passer til indholdet, for at holde orden på din side.

Så findes der jo også shorthand alternativer til de fleste CSS-properties.

line-height:28px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;

kan forkortes til

font: 12px/28px Arial, Helvetica, sans-serif;


border-top-color:#000;
border-top-style:solid;
border-top-width:2px;
border-left-color:#000;
border-left-style:solid;
border-left-width:2px;
border-right-color:#000;
border-right-style:solid;
border-right-width:2px;

kan forkortes til

border: 2px solid #000;
border-bottom: none;


padding-right: 8px;
padding-left: 8px;
padding-top: 8px;

kan forkortes til

padding: 8px 8px 0 8px;
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet søn. d. 22. juli 2012 kl. 03:29:51| #2

scootergrisen
scootergrisen (8.346 point)
Prøv og lav koden om så du i stedet for at bruge 2 x div hvor du skrites til at vise og gemme dem så brug den samme div.

Så kan vi lave en transition bagefter.
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet søn. d. 22. juli 2012 kl. 13:27:34| #3

mik2000
mik2000 (7.502 point)
Hej

Jeg har nu forsøgt det, men ud over transition mangler er der et problem mere.

For denne linje virker ikke, så længe den ligger inde i den samme div
------
<a href="#" onclick="document.getElementById('chat').className = 'chat'; document.getElementById('content_online').style.display = 'inherit'; document.getElementById('content_chat').style.display = 'none'; return false;">Gør lille</a>
------
Dvs. man kan ikke længere lave boksen lille igen


------------------------------------------
Index.html
------------------------------------------
<html>
<head></head>
<body>
<div id="div1">Dette er den normale side eller rettere en illustration for det.</div>

<div class="chat" id="chat" onclick="document.getElementById('content_online').style.display = 'none'; document.getElementById('content_chat').style.display = 'inherit'; this.className = 'stor_chat'">
    <div id="content_online">
        Online support chat - Online
    </div>
    <div id="content_chat" style="display: none;">
        Stor chat<br /><br />
        <div style="cursor: pointer; color:#00F;" onclick="document.getElementById('chat').className = 'chat'; document.getElementById('content_online').style.display = 'inherit'; this.parrent().style.display = 'none';">Gør lille</div>
    </div>
   
   
</div>
</body>
</html>

------------------------------------------
css.css
------------------------------------------
body{
    background-color:#06F;
    overflow-y: scroll;
}
#div1{
    background-color: #CCC;
    margin: 0 auto;
    width: 960px;
    min-height: 700px;
}
.chat{
    background-color:#FFF;
    position: fixed;
    bottom: 0px;
    right: 10px;
    width: 200px;
    height: 28px;
    z-index: 99;
    font: 12px/28px Arial, Helvetica, sans-serif;
    text-align:center;
    border: 2px solid #000;
    border-bottom: none;
    cursor: pointer;
    border-radius: 8px 8px 0px 0px;
}
.stor_chat{
    background-color:#FFF;
    position: fixed;
    bottom: 0px;
    right: 10px;
    width: 300px;
    height: 300px;
    z-index: 98;
    padding: 8px 8px 0 8px;
    box-sizing:border-box;
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
    font: 12px Arial, Helvetica, sans-serif;
    border: 2px solid #000;
    border-bottom: none;
    border-radius: 8px 8px 0px 0px;
}
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet søn. d. 22. juli 2012 kl. 13:29:28| #4

mik2000
mik2000 (7.502 point)
Den virker heller ikke selvom det er en div eller span

Vedr. det med at bruge javascript i stedet for css3, så ved jeg godt det ikke virker i alle, men så vidt jeg kan forstå vises den så bare uden transition i de browsere der ikke understøtter det indtil det kommer med. Så det går nok :)
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet søn. d. 22. juli 2012 kl. 14:09:25| #5

Accepteret svar!100 point tildelt

Skrevet søn. d. 22. juli 2012 kl. 14:19:02| #6

mik2000
mik2000 (7.502 point)
Tak for det ...... også næsten god.
Problemet er bare at den helst skal blive oppe selvom man tager musen væk fra feltet - dvs. man skal kunne klikke den op og ned.
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet søn. d. 22. juli 2012 kl. 14:41:11| #7

scootergrisen
scootergrisen (8.346 point)
Jeg har rettet på siden.
Prøv og opdater den.
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet søn. d. 22. juli 2012 kl. 15:57:53| #8

mik2000
mik2000 (7.502 point)
Så lykkes det - tak for hjælpen

Også tak til dig DeeDawg

Et lille tillægsspørgsmål - blot til hvis I ved det:
1: Er det muligt at lave delay på noget når det kommer ind men ikke når det kører ud?
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet søn. d. 22. juli 2012 kl. 17:49:24| #9

Skrevet søn. d. 22. juli 2012 kl. 18:12:16| #10

mik2000
mik2000 (7.502 point)
Tak, men den laver det både når den kører ind og ud
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skrevet søn. d. 22. juli 2012 kl. 22:17:39| #11

scootergrisen
scootergrisen (8.346 point)
Prøv og læse noget mere om det.
Læs også om animation hvor du kan lave keyframes.
Anmeld misbrug
Skriv et svar | Skriv en kommentar

Skriv et indlæg




Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] [img]link til billede[/img]
Web- og emailadresser omdannes automatisk til links
Se preview
Opret

Log ind

   
Opret bruger | Glemt adgangskode

Seneste spørgsmål

List style ved linjeskift

Oprettet den 19. maj 2013 kl. 23.57
sarcar giver 60 point for svar | Giv et svar »

line.height

Oprettet den 19. maj 2013 kl. 18.16
ZeBa giver 30 point for svar | Giv et svar »

Fat footer skal fylde hele sidens bredde

Oprettet den 17. maj 2013 kl. 14.42
13thsky giver 60 point for svar | Giv et svar »

Seneste guides

Håndtering af tekstoversættelse i...
29. april 2013 kl. 21.46 | Læs »
Parameteriseret tekstformatering i C#
29. april 2013 kl. 21.45 | Læs »
C++ Historie og Programmering - Del 1
26. april 2013 kl. 19.05 | Læs »
Afstande mellem Ikoner På Windows 8 skrivebordet
7. april 2013 kl. 08.31 | Læs »
koper mappe uden af skifte dato.
2. april 2013 kl. 00.23 | Læs »

Seneste nyheder

Galleri: De 10 vildeste datacentre i verden
24. maj 2013 kl. 16.02 | Læs »
Amazon er klar til at sælge sin Kindle Fire HD i Danmark
24. maj 2013 kl. 15.30 | Læs »
iPhone-brugernes store tilfredshed falder
24. maj 2013 kl. 15.01 | Læs »
It-giganten Yahoo køber dansk firma
24. maj 2013 kl. 14.38 | Læs »
24.000 vrede kunder demonstrerer mod grafikgiganten Adobe
24. maj 2013 kl. 13.02 | Læs »

Tips & Tricks fra PC World

Teaser billede

Fem smarte funktioner i din Mac som du sikkert ikke kender

Her har du fem muligheder for at tweake din Mac på en fed måde.

Læs mere »

Anmeldelser fra PC World

Teaser billede

Test: Samsung Galaxy S4 er et hit - trods gøglertricks

Kan Samsung beholde førertrøjen i det store Android-race? Galaxy S4 er smækfyldt med innovative funktioner, men også med en del gøgl. Er det for meget? Få vores dom over Samsungs nye topmodel.

Læs mere »

Seneste blogindlæg

Teaser billede

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...

Læs mere »

Nyheder fra PC World

Teaser billede

Ny opfindelse: Oplad din mobil på 20 sekunder

Måske er det snart slut med at lade mobilen op hver aften. Med ny opfindelse kan telefonen få fuld energi på sølle 20 sekunder.

Læs mere »

Nyheder fra Computerworld

Teaser billede

Galleri: De 10 vildeste datacentre i verden

I en gammel kirke, i et oppusteligt telt, på nedlagte militæranlæg eller midt i ørkenen. Der er ingen grænser for, hvor man kan banke et datacenter op. Her er de 10 sejeste anlæg i verden. I...

Læs mere »

IT Kurser
Styrk mersal i Hotline(Service & Support) afdelingen - Større samarbejde med salgsafdelingen, mersalg & kunde forankring i en travl hverdag
ITIL® Capability: Planning, Protection and Optimization (PPO)
6293A Troubleshooting and Supporting Windows 7 in the Enterprise
PRINCE2®Practitioner Certificering - kursus i projektledelse efter Prince2 metoden
VMware vSphere Skills for Storage Administrators
Se alle kurser »
Samarbejdspartnere
Webhotel
Digital TV fra Viasat
VM fodbold
Udgiver · © 2013 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger