[ERLEDIGT] Flexible Html-Div Box?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Thehtmler

Neues Mitglied
9 Januar 2020
6
0
1
20
Moin,
Ich hätte da mal eine frage ich möchte auf meiner Seite mit aside eine div box an der Seite positionieren diese soll der Nutzer dann individuell in die länge ziehen können (ähnlich wie im Windows Explorer mit der Verzeichnisstruktur am Rand)
Nur wie kriege ich das nun realisiert ich habe dazu nicht im Internet gefunden
Ich hoffe ihr könnt mir helfen und das ihr versteht was ich meine:-)
LG
 

Thehtmler

Neues Mitglied
9 Januar 2020
6
0
1
20
Am besten wäre es, wenn du mit Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) dein Aside Element in die Seite einbaust.
Das mit der individuellen Größe sollte dann mit dem CSS Format 'resize' zu machen sein.
https://www.w3schools.com/cssref/css3_pr_resize.asp
Danke,
das hilft mir schon sehr aber wie krieg ich jetzt hin das man die sidebar nicht nur unten an diesem kleinen punkt verschieben kann sondern von überall am rand.
LG :-)
 

Sailor

Aktives Mitglied
14 Juli 2017
501
64
28
Das wird mit reinem HTML und CSS nicht realisierbar sein - zumindest ist mir da nichts bekannt.
Es gibt sicherlich Wege das mit JavaScript umzusetzen... frag doch mal die Suchmaschine deines Vertrauens - gibt da bestimmt fertige Scripte.
 

Thehtmler

Neues Mitglied
9 Januar 2020
6
0
1
20
Das wird mit reinem HTML und CSS nicht realisierbar sein - zumindest ist mir da nichts bekannt.
Es gibt sicherlich Wege das mit JavaScript umzusetzen... frag doch mal die Suchmaschine deines Vertrauens - gibt da bestimmt fertige Scripte.
Was muss ich denn dann am besten eingeben um dafür Ergebnisse zu bekommen
:-)?
 

Sailor

Aktives Mitglied
14 Juli 2017
501
64
28
Schwierig - habe keinen passenden Suchbegriff gefunden, der nur brauchbare Ergebnisse liefert :frown:.
Aber ich gebe dir einen Link, wo was brauchbares zu finden ist.
https://jqueryui.com/resizable/
Der Code (leicht modifiziert, damit er auch außerhalb der Ursprungsseite läuft) sieht so aus.
HTML:
<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Resizable - Default functionality</title>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
        <style>
        #resizable { width: 150px; height: 150px; padding: 0.5em; }
        #resizable h3 { text-align: center; margin: 0; }
        </style>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
        $( function() {
                $( "#resizable" ).resizable();
        } );
        </script>
</head>
<body>

<div id="resizable" class="ui-widget-content">
        <h3 class="ui-widget-header">Resizable</h3>
</div>


</body>
</html>
Viel Erfolg!
 
  • Like
Reaktionen: Thehtmler

Thehtmler

Neues Mitglied
9 Januar 2020
6
0
1
20
Schwierig - habe keinen passenden Suchbegriff gefunden, der nur brauchbare Ergebnisse liefert :frown:.
Aber ich gebe dir einen Link, wo was brauchbares zu finden ist.
https://jqueryui.com/resizable/
Der Code (leicht modifiziert, damit er auch außerhalb der Ursprungsseite läuft) sieht so aus.
HTML:
<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Resizable - Default functionality</title>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
        <style>
        #resizable { width: 150px; height: 150px; padding: 0.5em; }
        #resizable h3 { text-align: center; margin: 0; }
        </style>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
        $( function() {
                $( "#resizable" ).resizable();
        } );
        </script>
</head>
<body>

<div id="resizable" class="ui-widget-content">
        <h3 class="ui-widget-header">Resizable</h3>
</div>


</body>
</html>
Viel Erfolg!
Sehr nett danke :-)
 
Werbung: