08. november 2002 - 15:00
Der er
4 kommentarer og 1 løsning
fade/slide af html element (helst med css transition)
Jeg vil gerne have min venstre del til at slide ud til venstre når man klikker på Vis/Skjul. Dette må meget gerne ske via IE transitions. 200 point til den første og bedste :-) <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> AO-online </title> <style> body{font-family : verdana, arial, sans-serif; font-size: 12px;} td{font-family : verdana, arial, sans-serif; font-size: 12px;} th{font-family : verdana, arial, sans-serif; font-size: 12px;} span{font-family : verdana, arial, sans-serif; font-size: 12px;} input{font-family : verdana, arial, sans-serif; font-size: 12px;} select{font-family : verdana, arial, sans-serif; font-size: 12px;} colgroup{padding:0px;} table{border-collapse: collapse;} .content {width:100%; height: 100%; overflow: auto;} </style> <script> function showHide(tab) { if (left.style.display == 'none') { tab.innerHTML = 'Skjul'; left.style.display = ''; } else { tab.innerHTML = 'Vis'; left.style.display = 'none'; } } </script> </head> <body style="background-color: #337799"> <div style="width: 800px; height:100%; background-color: #ffffff;"> <table style="width: 100%; height: 100%;"> <colgroup> <col style="width: 200px; height: 100%;"></col> <col style="height: 100%;"></col> </colgroup> <tr> <!-- Left Colomn --> <td id="left"> <div class="content"> Venstre side... </div> </td> <!-- Right Colomn --> <td style="background-color:#dddddd;"> <div class="content"> Højre side... </div> </td> </tr> </table> </div> </body> </html>
Annonceindlæg fra FPT Software
18. november 2002 - 15:21
#1
Det kan så visdt jeg ved ikke lade sig gøre når du vil have din <td> resizet. Du skal gøre det med din venstre div, så kode bliver nogenlunde som dette: <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> AO-online </title> <style> body{font-family : verdana, arial, sans-serif; font-size: 12px;} td{font-family : verdana, arial, sans-serif; font-size: 12px;} th{font-family : verdana, arial, sans-serif; font-size: 12px;} span{font-family : verdana, arial, sans-serif; font-size: 12px;} input{font-family : verdana, arial, sans-serif; font-size: 12px;} select{font-family : verdana, arial, sans-serif; font-size: 12px;} colgroup{padding:0px;} table{border-collapse: collapse;} .content {width:100%; height: 100%; overflow: auto;} </style> <script> function showHide(tab) { if (left.style.display == 'none') { tab.innerHTML = 'Skjul'; left.style.display = ''; } else { tab.innerHTML = 'Vis'; left.style.display = 'none'; } } function move(to) { var elm=document.getElementById('left'); if(to+''!='undefined') { if(to>=0) { elm.style.width=to+'px'; setTimeout("move("+(to-5)+")",20); } } else { if(elm.style.width=='') { setTimeout("move(195)",20); } else { if(elm.style.width=='0px') { elm.style.width='200px'; } else { setTimeout("move(195)",20); } } } } </script> </head> <body style="background-color: #337799"> <input type="button" onClick="move()" value="Skjul/vis"> <div style="width: 800px; height:100%; "> <table style="width: 100%; height: 100%;"> <colgroup> <col style="width: 200px; height: 100%;"></col> <col style="height: 100%;"></col> </colgroup> <tr> <!-- Left Colomn --> <td id="left2"> <div class="content" id="left" style="background-color:#ffffff;"> Venstre side... </div> </td> <!-- Right Colomn --> <td style="background-color:#dddddd;"> <div class="content"> Højre side... </div> </td> </tr> </table> </div> </body> </html>
18. november 2002 - 15:25
#2
Det er næsten korrekt, den højreside skal bare overtage pladsen fra den venstre når den slider ud.
18. november 2002 - 15:29
#3
nåh okay. Det fikser jeg lige :)
18. november 2002 - 15:32
#4
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> AO-online </title> <style> body{font-family : verdana, arial, sans-serif; font-size: 12px;} td{font-family : verdana, arial, sans-serif; font-size: 12px;} th{font-family : verdana, arial, sans-serif; font-size: 12px;} span{font-family : verdana, arial, sans-serif; font-size: 12px;} input{font-family : verdana, arial, sans-serif; font-size: 12px;} select{font-family : verdana, arial, sans-serif; font-size: 12px;} colgroup{padding:0px;} table{border-collapse: collapse;} .content {width:100%; height: 100%; overflow: auto;} </style> <script> function showHide(tab) { if (left.style.display == 'none') { tab.innerHTML = 'Skjul'; left.style.display = ''; } else { tab.innerHTML = 'Vis'; left.style.display = 'none'; } } function move(to) { var elm=document.getElementById('left'); var elm2=document.getElementById('right'); if(to+''!='undefined') { if(to>=0) { elm.style.width=to+'px'; setTimeout("move("+(to-5)+")",20); } } else { if(elm.style.width=='') { setTimeout("move(195)",20); } else { if(elm.style.width=='0px') { elm.style.width='200px'; } else { setTimeout("move(195)",20); } } } } </script> </head> <body style="background-color: #337799"> <input type="button" onClick="move()" value="Skjul/vis"> <div style="width: 800px; height:100%; "> <table style="width: 100%; height: 100%;padding:0px" cellpadding="0" cellspacing="0"> <!-- <colgroup> <col style="width: 200px; height: 100%;"></col> <col style="height: 100%;"></col> </colgroup> --> <tr> <!-- Left Colomn --> <td id="left2"> <div class="content" id="left" style="background-color:#ffffff;width: 200px; height: 100%;"> Venstre side... </div> </td> <!-- Right Colomn --> <td style="background-color:#dddddd;"> <div class="content" style="height: 100%;width:600px"> Højre side... </div> </td> </tr> </table> </div> </body> </html>
18. november 2002 - 15:33
#5
Så skulle den være der. Det ser lidt mærkeligt ud nårdet grå bliver resizet. I starten følger det med, men til sidst løber det hvide hurtigere. Ihvertfald på min maskine. :)
Vi tilbyder markedets bedste kurser inden for webudvikling