janvier 2018 – devfrontend.info

[Emmet] Bonnes pratiques et astuces d’utilisation

24/01/2018 / admin

7 Awesome Emmet HTML Time-Saving Tips

li.product-list__item*11>.product-list__item_wrapper>img[src=http://lorempixel.com/640/480/sports/$].product-list__item_visual+h2.product-list__item_label>lorem3^p.product-list__item_description>lorem16^p.product-list__item_price>{299,00 €}^button.product-list__item_button--add-to-cart>{Ajouter au panier}

li.product-list__item*11>.product-list__item_wrapper>img[src=http://lorempixel.com/640/480/sports/$].product-list__item_visual+h2.product-list__item_label>lorem3^p.product-list__item_description>lorem16^p.product-list__item_price>{299,00 €}^button.product-list__item_button--add-to-cart>{Ajouter au panier}

…donne ceci (x11) :

<li class="product-list__item">
  <div class="product-list__item_wrapper">
    <img src="http://lorempixel.com/640/480/sports/2" alt="" class="product-list__item_visual">
    <h2 class="product-list__item_label">Officiis, officia, saepe!</h2>
    <p class="product-list__item_description">Voluptatum cumque iure reprehenderit nemo molestiae voluptate officiis tenetur, adipisci veritatis deleniti quaerat perspiciatis laborum laboriosam!</p>
    <p class="product-list__item_price">299,00 €</p>
    <button class="product-list__item_button--add-to-cart">Ajouter au panier</button>
  </div>
</li>

<h2 class="product-list__item_label">Officiis, officia, saepe!</h2>

<p class="product-list__item_description">Voluptatum cumque iure reprehenderit nemo molestiae voluptate officiis tenetur, adipisci veritatis deleniti quaerat perspiciatis laborum laboriosam!</p>

<button class="product-list__item_button--add-to-cart">Ajouter au panier</button>

</div>

</li>

Animation CSS et JS, ressources en ligne, astuces, bonnes pratiques

17/01/2018 / admin

ANIMISTA IS A PLACE WHERE YOU CAN PLAY WITH A COLLECTION OF PRE-MADE CSS ANIMATIONS, TWEAK THEM AND GET ONLY THOSE YOU WILL ACTUALLY USE.
Animate.css – A cross-browser library of CSS animations. As easy to use as an easy thing.
Motion UI – A Sass library for creating flexible CSS transitions and animations.

[jQuery] Stocker dans un tableau tous les éléments d’une liste et ajouter des classes à n divs en fonction du contenu de ce tableau

15/01/2018 / admin

Stocker dans un tableau tous les éléments d’une liste

Source: Get an array of list element contents in jQuery
.

var optionTexts = [];
$("ul li").each(function() { optionTexts.push($(this).text()) });

1 2	var optionTexts = []; $("ul li").each(function() { optionTexts.push($(this).text()) });

Ajouter des classes à n divs en fonction du contenu de ce tableau

Source: How do I add class from array to n divs using .each function?
.

var colours = ['red', 'green', 'blue'];
$('.box').each(function(index, element) {
  $(element).addClass(colours[index % colours.length]);
});

var colours = ['red', 'green', 'blue'];

$('.box').each(function(index, element) {

$(element).addClass(colours[index % colours.length]);

});

Exemple:

Code:

<table id="relatedProductsTable" class="product-features-table is-full-width" tal:define="headerLine php: templateManager.getHeaderTable(lines[0])">
	<thead>
		<tr>
			<th tal:repeat="columnTitle headerLine">${columnTitle}</th>
		</tr>
	</thead>
	<tbody>
		<tr tal:define="lines php:templateManager.getLineTable(lines, product)" tal:repeat="line lines">
			<td data-title="" tal:repeat="value line">
				${value}
			</td>
		</tr>
	</tbody>
</table>

<thead>

<tr>

<th tal:repeat="columnTitle headerLine">${columnTitle}</th>

</tr>

</thead>

<tbody>

${value}

</td>

</tr>

</tbody>

</table>

var relatedProductsTableHeadings = [];
$('#relatedProductsTable thead tr th').each(function() {
  relatedProductsTableHeadings.push($(this).text())
});

$('#relatedProductsTable tbody tr td').each(function(index,element) {
  $(element).attr('data-title', relatedProductsTableHeadings[index % relatedProductsTableHeadings.length]);
});

var relatedProductsTableHeadings = [];

$('#relatedProductsTable thead tr th').each(function() {

relatedProductsTableHeadings.push($(this).text())

});

$('#relatedProductsTable tbody tr td').each(function(index,element) {

$(element).attr('data-title', relatedProductsTableHeadings[index % relatedProductsTableHeadings.length]);

});

Résultat dans le DOM:

<table id="relatedProductsTable" class="product-features-table is-full-width">
							<thead>
								<tr>
									<th>Bearing 1</th><th>Nut</th><th>Lock washer</th><th>Feltstrips (optional)</th>								</tr>
							</thead>
							<tbody>
								<tr>
									<td data-title="Bearing 1">
										22220									</td><td data-title="Nut">
										KM 20									</td><td data-title="Lock washer">
										MB 20									</td><td data-title="Feltstrips (optional)">
										9x7,5x428									</td>								</tr>							</tbody>
						</table>

<thead>

<tr>

<th>Bearing 1</th><th>Nut</th><th>Lock washer</th><th>Feltstrips (optional)</th> </tr>

</thead>

<tbody>

<tr>

22220 </td><td data-title="Nut">

KM 20 </td><td data-title="Lock washer">

MB 20 </td><td data-title="Feltstrips (optional)">

9x7,5x428 </td> </tr> </tbody>

</table>

[jQuery] Migrer jQuery-ui pour jQuery 3.x

11/01/2018 / admin

Une partie des sources migrées est disponible ici.

Uncaught TypeError: Cannot read property ‘msie’ of undefined

Erreur Uncaught TypeError: Cannot read property 'msie' of undefined: cette erreur est rencontrée, notamment avec le composant datepicker. Il suffit de placer le code suivant au début du fichier incriminé:

/* [FIX]
 * Uncaught TypeError: Cannot read property 'msie' of undefined
 *     at Datepicker._generateHTML (page.js?cv=445913:74)
 *     at Datepicker._updateDatepicker (page.js?cv=445913:74)
 *     at HTMLInputElement._showDatepicker (page.js?cv=445913:74)
 *     at HTMLInputElement.dispatch (template.js?cv=445913:10)
 *     at HTMLInputElement.q.handle (template.js?cv=445913:10)
 */
(function ($) {
    $.browser = {};
    $.browser.msie = false;
    $.browser.version = 0;
    if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
        $.browser.msie = true;
        $.browser.version = RegExp.$1;
    }
})(jQuery);
/* end: [FIX] */

/* [FIX]

* Uncaught TypeError: Cannot read property 'msie' of undefined

* at Datepicker._generateHTML (page.js?cv=445913:74)

* at Datepicker._updateDatepicker (page.js?cv=445913:74)

* at HTMLInputElement._showDatepicker (page.js?cv=445913:74)

* at HTMLInputElement.dispatch (template.js?cv=445913:10)

* at HTMLInputElement.q.handle (template.js?cv=445913:10)

(function ($) {

$.browser = {};

$.browser.msie = false;

$.browser.version = 0;

if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {

$.browser.msie = true;

$.browser.version = RegExp.$1;

}

})(jQuery);

/* end: [FIX] */

Articles récents

Catégories

Archives

Méta

Mois : janvier 2018

[Emmet] Bonnes pratiques et astuces d’utilisation

Animation CSS et JS, ressources en ligne, astuces, bonnes pratiques

[jQuery] Migrer jQuery-ui pour jQuery 3.x

Uncaught TypeError: Cannot read property ‘msie’ of undefined