jquery - slideUp() & slideDown() virker ikke ordentlig mere - Udvikleren.dk

Tags: jquery

Bruger #16670 @ 24.09.13 23:22

Hej

Jeg har lavet en webside, hvor jeg gør brug af jquery effekten slideUp() & slideDown() til at vise en kontakt formular.

Det har virket rimelig fint, men nu er den begyndt at springe op og i, i stedet for at åbne og lukke i en glidende bevægelse.

Jeg har ikke meget forstand på jquery, så jeg er lidt lost, dog er det min fornemmelse, at problemet måske kan skyldes, at jeg har en hel del <div></div>, og at kontaktformularen er lavet i en tabel, i den kasse som skal udvide og trække sig sammen.

Så måske er det simpelthen blevet for meget for den.

Jeg bruger også

min-height:
height: auto;

I alle mine kasser inde i den kasse som skal udvide og trække sig sammen.

Jeg har bemærket, at hvis man køre Firebug og åbner slideUp() & slideDown() kassen, så tæller Firebug op til et sindssyg højt tal - jeg tror den tæller op til den absolut maximale højde (height) en webside kan have.

skal jeg gå væk fra bruge min-height og height: auto; i kasser hvor jeg bruger slideUp() & slideDown() af hensyn til performancen af jquery ?

Håber der nogen, som kan give mig nogle svar.

Her koden jeg bruger til slideUp() & slideDown()

JScript kode

 <script>
             $(document).ready(function(){
                 $("#open_panel").click(function(){
                     $("#panel").slideDown(500);
                 });
                 
                 $(".close_panel").click(function(){
                     $("#panel").slideUp(500);
                 });
             });
         </script>

Indlæg senest redigeret d. 24.09.2013 23:23 af Bruger #16670

4 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #16372 @ 25.09.13 15:32

519

Hej Henrik

Jeg tror at mere kode og evt. en demo vil gøre at du får bedre respons

//Nicky

Bruger #16670 @ 25.09.13 21:46

Hej

Ja, jeg er godt klar over, at jeg har givet meget lidt - lidt kode ville sikkert hjælpe.

Jeg er dog lidt i tvivl om hvor meget af koden jeg skal vise ? da den er temmelig omfattende.

Anyway, da jeg ikke rigtig kan se mig ud af det ved egen hjælp, så er koden her:

HTML kode

 <html>
     <head>
         <title>Tandl&aelig;ge&nbsp;T.&nbsp;Hansen&nbsp;skoleprojekt</title>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         
         <link rel="stylesheet" type="text/css" href="css/tandlaege_stylesheet_with_jquery.css"/>
         
         <script src="jquery/jquery-1.10.2.min.js"></script>
         
         <script>
             $(document).ready(function(){
                 $("#open_panel").click(function(){
                     $("#panel").slideDown(500);
                 });
                 
                 $(".close_panel").click(function(){
                     $("#panel").slideUp(500);
                 });
             });
         </script>
         
     </head>
     <body>
     <div id="container">
         <div id="master">
             <div id="header">
                 <div id="left_push_container">
                     <div id="left_push_block"></div>
                     <div id="tandlaege_logo_box"></div>
                 </div><!-- left_push_container END -->
                 <div id="vertical_header_spacer"></div>
                 <div id="right_push_container">
                     <div id="right_push_block"></div>
                     <div id="sygeforsikring_danmark_logo_box"></div>
                     <div id="tandlaegeforeningen_logo_box"></div>
                 </div><!-- right_push_container END -->
             </div><!-- header END -->
             <div id="main_banner_area"></div>
             <div class="horizontal_page_spacer"></div>
             <div id="center_content_box">
                 <div id="nav_bar">
                     <a class="link_box" href="#">Forsiden</a>
                     <a class="link_box" href="#">Priser</a>
                     <a class="link_box" href="#">Behandlinger</a>
                     <a class="link_box" href="#">Tilskud</a>
                     <a class="link_box" href="#">Om&nbsp;os</a>
                 <!--    <a class="link_box" href="#">Book&nbsp;en&nbsp;tid</a> -->
                     <p id="open_panel">Book&nbsp;en&nbsp;tid</p>
                 </div>
                 <div class="small_horizontal_page_spacer"></div>
                 <div id="panel"><!-- this is the beginning of the sliding panel -->
                     <div id="panel_content">
                         <div id="panel_content_area_image_box"></div>
                         <div id="panel_content_headline_box">
                             <p>Book&nbsp;en&nbsp;tid</p>
                         </div>
                         <div class="close_panel">
                             <p>Luk</p>
                         </div>                        
                         <div id="panel_content_area_form_box">
                             <form>
                                 <table>
                                     <tbody>
                                         <tr>
                                             <th>Fornavn</th>
                                             <th colspan="2">Efternavn</th>
                                         </tr>
                                         <tr>
                                             <td><input type="text"/></td>
                                             <td colspan="2"><input type="text"/></td>
                                         </tr>
                                         <tr>
                                             <th>Adresse</th>
                                             <th>Postnummer</th>
                                             <th>By</th>
                                         </tr>
                                         <tr>
                                             <td><input type="text"/></td>
                                             <td><input type="text"/></td>
                                             <td><input type="text"/></td>
                                         </tr>
                                         <tr>
                                             <th>Telefon</th>
                                             <th colspan="2">E-mail</th>
                                         </tr>
                                         <tr>
                                             <td><input type="text"/></td>
                                             <td colspan="2"><input type="text"/></td>
                                         </tr>
                                         <tr>
                                             <th>Kontakt&nbsp;mig&nbsp;venligst</th>
                                             <th colspan="2">Tidspunkt</th>
                                         </tr>
                                         <tr>
                                             <td>
                                                 <select>
                                                     <option value="0">V&aelig;lg kontaktform&nbsp;&nbsp;&nbsp;&nbsp;</option>
                                                     <option value="1">Telefonisk</option>
                                                     <option value="2">E-mail</option>
                                                 </select>
                                             </td>
                                             <td colspan="2">
                                                 <select>
                                                         <option value="0">V&aelig;lg tidspunkt</option>
                                                         <option value="1">Formiddag (9-12)</option>
                                                         <option value="2">Eftermiddag (13-17)</option>
                                                 </select>
                                             </td>
                                         </tr>
                                         <tr>
                                             <th>Besked</th>
                                             <th colspan="2">&nbsp;</th>
                                         </tr>
                                         <tr>
                                             <td colspan="2"><textarea rows="10" cols="40"></textarea></td>
                                             <td>&nbsp;</td>
                                         </tr>
                                         <tr>
                                             <td colspan="2">
                                                 <p id="form_submitter_button">Send</p>
                                             </td>
                                             <td>&nbsp;</td>
                                         </tr>
                                     </tbody>
                                 </table>
                             </form>
                         </div>
                     </div>
                     <div id="panel_bottom_horizontal_pusher"></div>
                     <div class="close_panel">
                         <p>Luk</p>
                     </div>
                     
                 </div><!-- panel END -->
                 <div class="small_horizontal_page_spacer"></div>
                 <div id="center_content_area_box">
                     <div id="center_content_area_image_box"></div>
                     <div id="center_content_area_text_box">
                         <h2 id="center_content_area_headline_text_style">Catchy headline !</h2>
                         <p id="center_content_area_text_style">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida a ante ornare tempus. Nulla id sagittis ipsum. Duis et euismod dolor. Nullam tincidunt sodales elit, non sollicitudin erat pretium nec. Aliquam erat volutpat. Aliquam malesuada eget ligula at iaculis. Aliquam posuere nunc et orci cursus mollis. 
 
     Proin condimentum, nunc in lacinia ultrices, justo tellus congue justo, ac hendrerit turpis dolor et diam. Mauris accumsan, ipsum a tristique placerat, velit dolor hendrerit metus, eu faucibus ligula dui id velit. In lorem ipsum, fringilla eu sem vitae, fringilla tempor odio. Vestibulum vitae congue lorem. Maecenas consectetur mauris vitae nulla gravida, at mattis quam ultricies. Vivamus a turpis sed lectus venenatis sollicitudin. Maecenas erat tellus, varius ut tempor convallis, tristique eu neque. Duis ligula velit, ornare ut bibendum vitae, feugiat ac nisi. Mauris porttitor purus ut convallis accumsan. 
     </p>
                     </div><!-- center_content_area_text_box END -->
                 </div>
             </div><!-- center_content_box END -->
             <div id="news_box_right_side">
                 <div id="news_box_headline_container">
                     <p id="news_box_headline_style">Nyheder</p>
                 </div><!-- news_box_headline_container END -->
                 <div id="news_box_main_content">
 
                     <p class="news_box_main_content_headline_style">01-01-2013</p>
                     <p class="news_box_main_content_style">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida a ante ornare tempus. Nulla id sagittis ipsum.</p>
                     <p class="news_box_main_content_headline_style">01-01-2013</p>
                     <p class="news_box_main_content_style">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida a ante ornare tempus. Nulla id sagittis ipsum.</p>
 
                 </div><!-- news_box_main_content END -->
             </div><!-- news_box_right_side END -->
 
             <div class="horizontal_page_spacer"></div>
             <div id="bottom_address_container">
                 <p id="bottom_address_style">Tandl&aelig;ge&nbsp;&nbsp;&nbsp;T.&nbsp;Hansen,&nbsp;&nbsp;&nbsp;Vestergade&nbsp;22,&nbsp;&nbsp;&nbsp;6000&nbsp;Kolding,&nbsp;&nbsp;&nbsp;Tlf.:75&nbsp;12&nbsp;34&nbsp;56,&nbsp;&nbsp;&nbsp;e-mail:&nbsp;thansen@no-reply.dk</p>
             </div>
             <div id="bottom_social_media_main_container">
                 <div id="bottom_horizontal_push"></div>
                 <div id="bottom_container_for_twitter"></div>
                 <div id="bottom_container_for_facebook"></div>
             </div><!-- bottom_social_media_main_container END -->
             <div class="horizontal_page_spacer"></div>
 
         </div><!-- master END -->
     </div><!-- container END -->
         
     </body>
 </html>

CSS kode

 * {
     margin: 0;
     padding: 0;
 }
 
 body{
     /* IE CENTER FIX */
     text-align: center;   
 
 }
 
 #container{
     width: 1024px;
     height: 885px; /*was 1000px; */
     height: auto;
     text-align: left;
     margin: 0 auto;
 }
 
 #master {
     
     width: 1024px;
     min-height: 768px;
     height: auto;
     float: left;   
 }
 
 #header {
     
     width: 918px;
     min-height: 20px; /* was 150px; */
     height: auto;
 /*  margin-right: auto;
     margin-left: auto;*/
     margin-left: 53px;
     float: left;
    
 }
 
 #left_push_container {
     
     width: 156px;
     min-height: 20px;
     height: auto;
     /*height: 102px; *//* was 148px; */
     float: left;
 }
 
 #left_push_block {
     
     width: 156px;
     min-height: 20px;
     height: auto;
   /*  height: 30px; *//* was 50px; */
     float: left;
 }
 
 #tandlaege_logo_box {
     
     background-image: url(../images/Tandlaege_logo.png);
     background-repeat: no-repeat;
     width: 156px;
     height: 48px;
     float: left;
 }
 
 #vertical_header_spacer {
     
     width: 470px;
     min-height: 20px;
     height: auto;
  /*   height: 30px; *//* was 50px; */
     float: left;   
     
 }
 
 #right_push_container {
     
     width: 290px;
     min-height: 20px;
     height: auto;
  /*   height: 100px; *//* was 150px;*/
     float: left; 
 }
 
 #right_push_block {
     
     width: 290px;
     min-height: 20px;
     height: auto;
   /*  height:30px; *//* was 50px; */
     float: left;
 }
 
 #sygeforsikring_danmark_logo_box {
     
     background-image: url(../images/sygeforsikring_danmark_small.png);
     background-repeat: no-repeat;
     width: 130px;
     height: 50px;
     float: left;
     
 }
 
 #tandlaegeforeningen_logo_box {
     
     background-image: url(../images/tandlaegeforeningen_small.png);
     background-repeat: no-repeat;
     width: 160px;
     height: 50px;
     float: left;
 
 }
 /* ---------header END -----------*/
 
 #main_banner_area {
     
     background-image: url(../images/main_banner.png);
     background-repeat: no-repeat;
     width: 918px;
     height: 247px;
     margin-left: 53px;
     float: left; 
 }
 
 .horizontal_page_spacer {
     
     width: 1024px;
     height: 30px;
     float: left;
 }
 
 #center_content_box {
     
     width: 721px;
     min-height: 240px; /* was 418 */
     height: auto;
     margin-left: 53px;
     float: left;
 }
 
 #nav_bar {
     
     background-color: #428BCA;
     width: 720px;
     height: 56px;
     float: left;
 }
 
 /* ------- styling for nav_bar -------- */
 
 
 
 .link_box { /*---- class container for holding links ----*/
     
     width: 120px;
     height: 35px;
     padding-top: 21px;
     float: left;
 }
 
 a:link, a:visited {
     
     font-family: verdana;
     font-size: 14px;
     font-weight: bold;
     color: #FFFFFF;
     text-decoration: none;
     text-align: center;
 
 }
 
 a:active, a:hover {
     
     background-color: #A0C5E4;
 }
 
 /* ------- styling for nav_bar END -------- */
 
 .small_horizontal_page_spacer {
     
     width: 742px;
     height: 30px;
     float: left;
 }
 
 #open_panel { 
     
 /*this is the text which activate the jquery $("#open_panel").click(function()*/
     
     width: 120px;
     height: 35px;
     padding-top: 21px;
     float: left;
     font-family: verdana;
     font-size: 14px;
     font-weight: bold;
     color: #FFFFFF;
     text-align: center;
 }
 
 #open_panel:hover {
     
     background-color: #A0C5E4;
 
 }
 
 #panel { /*this is the panel which will be sliding down */
   
     width: 716px;
 /*    height: 477px;*/
     min-height: 513px;
     height: auto;
 /*    margin-bottom: 30px;*/
     border-color: #428BCA;
     border-style: solid;
     border-width: 2px;
     float: left;
     display: none;
     
 }
 
 #panel_content {
    
     width: 716px;
     min-height: 182px;
     height: auto;
     float: left;
     
 }
 
 #panel_content_area_image_box {
     
     background-image: url(../images/clock_calendar.png);
     background-repeat: no-repeat;
     width: 100px;
     height: 120px;
     margin-top: 20px;
     margin-left: 20px;
     float: left; 
 }
 
 #panel_content_headline_box {
     
     width: 464px;
     height: 35px;
     padding-top: 21px;
     font-family: verdana;
     font-size: 14px;
     font-weight: bold;
     color: #A0C5E4;
     margin-left: 16px;
     float: left;
 }
 
 #panel_content_area_form_box {
 
     width: 580px;/*was 616px;*/
     min-height: 126px;
     height: auto;
 /*    margin-top: 20px;*/
     margin-left: 16px;
     float: left;
     font-family: verdana;
     font-size: 12px;
     color: #A0C5E4;
     
 }
 
 /*table, th, td {border:red 1px solid;}*/
 
 #form_submitter_button {
     
     background-color: #428BCA;
     width: 120px;
     height: 35px;
     padding-top: 21px;
     float: left;
     font-family: verdana;
     font-size: 14px;
     font-weight: bold;
     color: #FFFFFF;
     text-align: center;
     
 }
 
 #panel_bottom_horizontal_pusher {
     
     width: 600px;
     height: 56px;
     float: left;
 }
 
 .close_panel {
 
 /*this is the text which activate the jquery $(".close_panel").click(function()*/    
     
     width: 116px;
     height: 35px;
     float: left;
     padding-top: 21px;
     font-family: verdana;
     font-size: 14px;
     font-weight: bold;
     color: #A0C5E4;
     text-align: center;
 }
 
 /*-------All content and styling for slider panel ENDS here-----------*/
 
 #center_content_area_box {
     
     width: 716px;
     min-height: 238px; /* was 328px; */
     height: auto;
 /*    margin-top: 30px;*/
     border-color: #428BCA;
     border-style: solid;
     border-width: 2px;
     float: left;
     
 }
 
 #center_content_area_image_box {
     
     background-image: url(../images/dentist.png);
     width: 100px;
     height: 150px;
     margin-top: 20px;
     margin-left: 20px;
     float: left; 
 }
 
 #center_content_area_text_box {
     
     width: 566px;
     height: 200px;
     margin-top: 20px;
     margin-right: 10px;
     margin-bottom: 10px;
     margin-left: 20px;
     float: left; 
 }
 
 #center_content_area_headline_text_style {
     
     font-family: verdana;
     font-size: 12px;
     color: #A0C5E4;  
 }
 
 #center_content_area_text_style {
     
     font-family: verdana;
     font-size: 12px;
     color: #A0A0A0;  
 }
 
 /*-----------News box right side of page----------*/
 
 #news_box_right_side {
     
 /*    background-color: #428BCA;*/
     width: 172px;
     height: 326px;
     margin-left: 21px;
     border-right-color: #428BCA;
     border-right-style: solid;
     border-right-width: 2px;
     border-bottom-color: #428BCA;
     border-bottom-style: solid;
     border-bottom-width: 2px;
     border-left-color: #428BCA;
     border-left-style: solid;
     border-left-width: 2px;
     float: left;
     
 }
 
 #news_box_headline_container {
     
     background-color: #428BCA;
     width: 172px;
     height: 35px;
     padding-top: 21px;
     float: left;
 }
 
 #news_box_headline_style {
     
     font-family: verdana;
     font-size: 14px;
     font-weight: bold;
     color: #FFFFFF;
     text-align: center;
     
 }
 
 #news_box_main_content {
     
     width: 172px;
     height: 270px;
     float: left;
 }
 .news_box_main_content_headline_style { /*-- the date is the headline --*/
   
     font-family: verdana;
     font-size: 10px;
     color: #A0C5E4; /* was #808080; */
     margin-top: 10px;
     margin-left: 10px;
    
 }
 
 .news_box_main_content_style {
     
     width: 152px;
     height: 100px;
     margin-left: 10px;
     margin-right: 10px;
     font-family: verdana;
     font-size: 12px;
     color: #A0A0A0;
     
 }
 
 #bottom_address_container {
   
     background-color: #428BCA;
     width: 868px;/*918px;*/
     height: 35px;
     margin-left: 53px;
     padding-top: 21px;
     padding-left: 50px;
     float: left; 
     
 }
 
 #bottom_address_style {
     
     font-family: verdana;
     font-size: 14px;
     font-weight: bold;
     color: #FFFFFF;
     
     
 }
 
 #bottom_social_media_main_container {
     
 
     width: 918px;
     height: 56px;
     margin-top: 10px;
     margin-left: 53px;
     float: left;
 }
 
 #bottom_horizontal_push {
     
     width: 620px;
     height: 56px;
     float: left;
 }
 
 #bottom_container_for_twitter {
     
     background-image: url(../images/twitter_logo_small.png);
     width: 149px;
     height: 56px;
     float: left;
 }
 
 #bottom_container_for_facebook {
     
     background-image: url(../images/facebook_logo_small.png);
     width: 149px;
     height: 56px;
     float: left;
 }

Så håber jeg nogen kan give nogen/nogle anvisninger på hvad der er galt.

På forhånd tak.

Indlæg senest redigeret d. 25.09.2013 22:45 af Bruger #16670

Bruger #11361 @ 29.09.13 11:31

106

Har du mulighed for at lægge det online et sted?

Bruger #16670 @ 01.10.13 17:25

Hej

Lige en update: problem solved :bounce:

Jeg viste mit problem til en medstuderende og det tog ham ikke lang tid (max 2 min.), at finde problemet:

Jeg havde, i mit css-dokument (linjerne 212 - 213), sat min height til:

min-height: 513px;
height: auto;

min medstuderende sagde til mig, at den skal være fixed ellers kan den bagvedliggende JavaScript ikke regne ud hvor længe slideUp & slideDown animation skal køre - om dette er den 100% korrekte ågersag til problemet skal jeg ikke kloge mig på, så jeg nøjes med at konstatere, at problemet forsvinder når man fjerne de to (linjerne 212 - 213) i css-dokumentet og bare indsætter en fixed height.

Jeg håber andre kan drage nytte af denne tråd, hvis en lignede situation skulle opstå for andre.

Samtidig vil jeg gerne sige min medstuderende Nikolaj stor tak hjælpen - u da man

slideUp() & slideDown() virker ikke ordentlig mere

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler