Asta se face folosind shape-outside:circle(); <div> <div style=”width: 300px; height: 300px; border-radius: 50%; float: left; overflow: hidden; margin: 10px; shape-outside: circle();”> <img style=”width: 100%;” src=”img.png” /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu bibendum nunc, sed accumsan est. Vivamus lobortis purus quis elit </p> <div> Lorem ipsum dolor sit amet, consectetur adipiscing […]
Text imagine
HELLO WORLD !
Form Validation
Validarea datelor client-side (adica din browser) se face simplu folosind Form Validator. Form validator e o extensie jQuery care se configureaza astfel : Se include libraria jQuery <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script> sau local <script src=”/path/to/jquery.min.js”></script> Se include extensia FormValidatornet <script src=”//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js”></script> sau o copie locala. Pentru fiecare camp din form pentru care se face validare sea adauga: […]
FontAwesome
FontAwesome va ofera pictograme vectoriale scalabile, care pot fi personalizate instantaneu – dimensiunea, culoarea, umbra, si tot ce se poate face cu puterea CSS. Configurarea FontAwesome se poate realiza prin downloadarea directorului FontAwesome de aici , inserarera acestuia in proiect si adaugarea in HEAD a liniei : <link rel=”stylesheet” href=”path/to/font-awesome/css/font-awesome.min.css”> Folosirea FontAwesome este la fel […]
Liste
Unu Doi Trei Important Patru Cinci Unu Doi Trei Important Patru Cinci
Tipareste un element din pagina
<script> function doPrint(elem) { var mywindow = window.open(„, `PRINT`, `height=400,width=600`); mywindow.document.write(„); mywindow.document.write(„); mywindow.document.write(document.getElementById(elem).innerHTML); mywindow.document.write(„); mywindow.document.close(); // necessary for IE >= 10 mywindow.focus(); // necessary for IE >= 10*/ mywindow.print(); mywindow.close(); return true; } </script>
Lucrul cu MySQL
Pentru usurarea lucrului cu bazele de date am facut functiile urmatoare function mysql_query_assoc($sql) – Returneaza un tablou cu rezultatele query-ului $sql ex: daca avem o tabela care are 3 linii – mysql_query_assoc(„SELECT nume, prenume FROM elevi LIMIT 3”); returneaza array( 0 => ( ‘nume’->’Popescu’, ‘prenume’=>’Adrian’), 1 => ( ‘nume’->’Ionescu’, ‘prenume’=>’Cristian’), 2 => ( ‘nume’->’Georgescu’, ‘prenume’=>’Victor’), […]
Bootstrap modal
Demonstratie × Titlul ferestrei Acest exemplu foloseste AJAX pentru incarcarea textului ferestrei modale : <button type="button" class="btn btn-info" data-toggle="modal" data-target="#fereastra" onclick="getAJAX()">Demonstratie</button> <div class="modal fade" id="fereastra" tabindex="-1" role="dialog" aria-labelledby="fereastraLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="fereastraLabel">Titlul ferestrei</h4> </div> <div class="modal-body" id="fereastraContent"> </div> </div> </div></div><script type="text/javascript"> function getAJAX() […]
Bootstrap responsive embed
embed-responsive-16by9 embed-responsive-4by3 <div class=”embed-responsive [responsivetype]”> <iframe class=”embed-responsive-item” src=”https://www.youtube.com/embed/e6cSOtcc6l0?rel=0&showinfo=0″ frameborder=”0″ allowfullscreen></iframe> </div> [responsivetype] poate fi embed-responsive-4by3 sau embed-responsive-16by9 Pentru alte [responsivetype] adaptati CSS-ul dupa modelul : .embed-responsive-square { border: 1px solid #eee; padding-bottom: 100%; position: relative; }
Carusel (image slider)
Previous Next <div data-ride="carousel" class="carousel slide" id="carousel-example-generic"> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li> <li data-slide-to="1" data-target="#carousel-example-generic" class=""></li> <li data-slide-to="2" data-target="#carousel-example-generic" class=""></li> <li data-slide-to="3" data-target="#carousel-example-generic" class=""></li> </ol> <div role="listbox" class="carousel-inner"> <div class="item active"> <img alt="First slide" src="http://www.mommypotamus.com/wp-content/uploads/2012/03/431589_66152372.jpg" data-holder-rendered="true"> </div> <div class="item"> <img alt="Second slide" src="http://diamondpages.co.za/wpimages/wpe6693555_05_06.jpg" data-holder-rendered="true"> </div> <div class="item"> <img alt="Third slide" src="http://www.westlandsdentalstudio.co.uk/images/facial.jpg" data-holder-rendered="true"> </div> <div […]