|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
$(document).ready(function(){ // On récupère la largeur de chaque image. // Si l'image a une largeur inférieure ou égale à 1224px // on ajoute une classe ".container" à l'élément ".cRow". function setClassForImageContainer(htmlElement){ $(htmlElement).each(function(){ var img = $(this)[0]; $('<img/>') .attr('src', $(img).attr('src')) .on('load', function(){ if(this.width <= 1224){ $(img).closest('.cRow').addClass('container'); } }); }); } function setClassForOtherContainer(){ $('div.cRow').each(function(){ // Tous les blocs ".cRow" qui ne font pas l'objet d'un // traitement spécifique via une autre fonction. // Si l'élément ".cRow" contient une image // c'est la fonction "setClassForImageContainer" // qui s'occupe d'attribuer ou non la classe ".container". if($(this).find('div.image-container').length != 0){ // do nuffin' } // Sinon : else{ $(this).addClass('container'); } }); } // si gabarit 2 colonnes if($('body#tplSidebar').length != 0){ // console.log('gabarit 2 colonnes'); $('section#heading').addClass('container-xl'); // Pour les blocs ".cRow" qui contiennent des images, mais uniquement dans "#heading" : setClassForImageContainer('#heading div.image-container img'); } // si gabarit 1 colonne else if($('body#tplNosidebar').length != 0){ // console.log('gabarit 1 colonne'); $('section#content').addClass('container-xl'); // Pour tous blocs ".cRow" de la page qui contiennent des images : setClassForImageContainer('div.image-container img'); // Pour les blocs ".cRow" qui ne font pas l'objet d'un traitement spécifique via une autre fonction : setClassForOtherContainer(); } }); |
Étiquette : width
[jQuery] Créer un effet ‘pointillés’ après des libellés avec width et prev
Simulation : http://jsfiddle.net/frontenddeveloper/VXg2D/597/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<ul class="list"> <li> <span class="label-wrapper"><span class="label">Pomme : </span><span class="dots"></span></span> <div class="content"> Lorem Elsass ipsum aliquam ante bredele senectus tchao bissame Richard Schirmeck auctor, tellus Gal ! Pfourtz ! Morbi hopla Coopé de Truchtersheim libero. vulputate mollis mänele salu Oberschaeffolsheim gravida rossbolla purus Salut bisamme Yo dû. </div> </li> <li> <span class="label-wrapper"><span class="label">Poire : </span><span class="dots"></span></span> <div class="content"> nüdle Salu bissame und messti de Bischheim picon bière chambon Chulia Roberstau barapli Carola schpeck yeuh. Chulien leo libero, knack wurscht sed schnaps porta hopla s'guelt gewurztraminer Heineken dui Mauris DNA, munster Racing. </div> </li> <li> <span class="label-wrapper"><span class="label">Kiwi : </span><span class="dots"></span></span> <div class="content"> Lorem ipsum ... </div> </li> <li> <span class="label-wrapper"><span class="label"> : </span><span class="dots"></span></span> <div class="content"> </div> </li> </ul> |
|
1 2 3 4 |
var max = 120; jQuery('.list .dots').each(function(){ jQuery(this).width(max - jQuery(this).prev('.list .label').width() - 10); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.list li { width: 100%; float: left; clear: both; margin-bottom: 12px; list-style-type: none; } .list .label-wrapper { float: left; margin-right: 10px; } .list .label { display: inline-block; } .list .dots { border-bottom: 1px dotted #C9CACC; display: inline-block; height: 6px; margin-left: 10px; } .list .content { overflow: hidden; } |