2013-05-10 3 views
0

J'ai fait ce jsfiddle qui explique tout.Le gestionnaire redimensionnable jquery se déplace avec le contenu?

My JSFiddle

asd 

Regardez ce qui se passe au gestionnaire de redimensionnement lorsque vous faites défiler vers le bas/vers le haut.

Comment puis-je changer cela? Pourrais-je ajouter un peu de css à ce bâton toujours fixé au fond de la div?

+2

double possible de [ui jQuery redimensionnable avec des barres de défilement] (http://stackoverflow.com/questions/ 3858460/jquery-ui-resizable-with-scroll-bars) – MikeM

+0

de toute façon cela ne fonctionne pas si vous utilisez également draggable. – msqar

Répondre

1

La structure html/css n'est pas correcte. Vous devriez avoir un parent (boîte redimensionnable), un enfant (avec les poignées) et un sous-enfant avec le contenu.

Cela devrait faire l'affaire:

  <!DOCTYPE html> 
    <html> 
    <head> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script></script> 

    <script type="text/javascript" > 

    jQuery(document).ready(function($) { 

     $("#resizable").resizable(); 

    }); 

    </script> 
    <style type="text/css"> 
    #resizable{ 

      width: 250px; 
      height: 200px; 
      background-color: #eee; 
      text-align: center; 

     } 

     #resizable .handles { 

      width:100%; 
      height:inherit; 
      overflow: auto; 

     } 

     #resizable .handles .content { 

      display:block; 
      padding-left: 20px; 
      padding-right: 20px; 

     } 
    </style> 
    </head> 

    <body> 



     <div id="resizable"> 
      <div class="handles"> 
       <div class="content"> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut sagittis erat. Ut vitae dictum leo. Proin dignissim lobortis nunc, vitae suscipit ante viverra eu. Integer mauris orci, dignissim a venenatis convallis, dictum vitae leo. Nullam sapien tellus, tristique in venenatis sed, malesuada id justo. Aliquam lobortis consectetur augue, id condimentum odio bibendum sit amet. Suspendisse bibendum, urna nec luctus lobortis, ipsum risus placerat dolor, eget interdum dui mi ut neque. Nunc imperdiet pretium magna eget malesuada. Nam mattis magna in enim ultrices pharetra eu ac leo. Nullam sed purus dolor, a faucibus ipsum. Donec et sagittis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce sollicitudin vehicula laoreet. Duis luctus mattis massa vehicula pulvinar. Integer dictum ultricies augue, non aliquet enim dictum ac. Etiam non mi in nisi porta pulvinar eu non dolor. Nullam et nisl eget sem auctor tincidunt vel ut metus. Vestibulum sed est quis mauris rutrum tristique. Aenean pellentesque malesuada leo non pharetra. Integer commodo, eros vel sollicitudin porta, turpis lacus accumsan magna, non imperdiet mauris mi ut lectus. Nulla eget velit purus. In et nulla mauris. Ut elementum ligula eget est gravida ut euismod tellus auctor. Cras enim velit, vulputate quis iaculis at, sagittis vel nisl. Proin sagittis est quis mi volutpat et molestie nisi pretium. Aliquam pulvinar aliquet nisl a laoreet. Suspendisse potenti. Praesent molestie mattis felis et suscipit. Curabitur vulputate est nec nunc sollicitudin ultricies. Aliquam et sapien eros, vitae molestie massa. Nullam quis pellentesque odio. Suspendisse at mauris vel massa consequat tempor sed eget nulla. Suspendisse ullamcorper, velit mattis condimentum sodales, est massa sollicitudin velit, vel laoreet turpis est ut metus. Suspendisse elementum, diam sit amet tincidunt cursus, orci erat sollicitudin neque, id varius augue nibh vitae odio. Proin congue metus id arcu congue adipiscing. Maecenas sed augue in metus placerat blandit non vel dui. Duis nec placerat justo. Maecenas metus dui, aliquet id fermentum non, fringilla mattis nibh. Donec porta pellentesque ligula, fringilla tristique justo aliquam non. Sed mi arcu, tincidunt a pulvinar eu, varius vitae ante. Donec congue egestas ipsum. Quisque feugiat, magna vel ultricies auctor, nulla velit luctus enim, sed adipiscing felis arcu vitae elit. Phasellus luctus sapien vitae tortor pulvinar vel placerat purus tincidunt. Phasellus posuere molestie purus. Donec mauris neque, bibendum nec consectetur eget, porttitor ut lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictums 

       </div> 
      </div> 
     </div> 
    </body> 
    </html> 

espérons que cette aide, heureux de codage :)

+0

n'a pas fonctionné pour moi :( – msqar

+1

Cela fonctionne pour moi.J'ai édité la source entière afin que vous puissiez avoir l'exemple complet. :) s'il vous plaît voir la réponse éditée;) –

+0

vous êtes un génie mariux! MERCI !!!!!!!!!!!!! – msqar

Questions connexes