- Performance Analysis Reference (doc officielle)
- A LIST OF COOL CHROME DEVTOOLS TIPS AND TRICKS – The Chrome DevTools provide an amazing set of tools to help you develop on the Web platform. Here are a few tips you might now know yet.
Mois : mars 2018
Liste des Carousels, Sliders gratuits pour vos projets
-
http://idangero.us/swiper/ (Git +15.000 étoiles). Vu sur https://www.esprit.fr/.
Technos: less, JS
Swiper – is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers.
Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.
-
http://kenwheeler.github.io/slick/ (Git +21.000 étoiles). Vu sur http://www.sarenza.com/.
Technos: less, scss, JS
-
http://bqworks.com/slider-pro/ (Git +700 étoiles)
Technos: css, JS, plugin jQuery
-
https://www.jssor.com/demos/ (Git +1.800 étoiles)
-
https://bxslider.com/ (Git +4.000 étoiles)
-
https://owlcarousel2.github.io/OwlCarousel2/ (Git +5.000 étoiles)
[bxSlider][jQuery] Synchroniser la navigation dans deux carousels distincts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ul class="bxslider" > <li> <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-20.jpg" height="200px"/></li> <li> <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-42.jpg" height="200px"/></li> <li><img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-54.jpg" height="200px"/></li> <li><img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-01.jpg" height="200px"/></li> <li> <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-20.jpg" height="200px"/></li> <li> <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-42.jpg" height="200px" /></li> </ul> <ul class="bxslider1"> <li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li> <li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li> <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li> <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li> <li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li> <li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li> </ul> |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var slider = $('.bxslider').bxSlider({ onSlideNext: doThis, onSlidePrev: doThis }); var slider1 = $('.bxslider1').bxSlider({ onSlideNext: doThis, onSlidePrev: doThis }); function doThis(ele, old, newi){ slider.goToSlide(newi); slider1.goToSlide(newi); } |
[javascript] Simuler un redimensionnement de la fenêtre du navigateur avec l’événement window resize
Source: How to trigger the window resize event in JavaScript?
1 2 3 |
var evt = window.document.createEvent('UIEvents'); evt.initUIEvent('resize', true, false, window, 0); window.dispatchEvent(evt); |
Pour Angular:
1 2 3 4 5 |
$timeout(function() { var evt = $window.document.createEvent('UIEvents'); evt.initUIEvent('resize', true, false, $window, 0); $window.dispatchEvent(evt); }); |
[Hybris] Appliquer une classe différente en fonction d’un état
bin\custom\naos\naoscommerceservices\resources\naoscommerceservices-spring.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:util="http://www.springframework.org/schema/util" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util.xsd"> // Les clés qui nous intéressent sont ici <util:map value-type="java.lang.String" key-type="java.lang.String" id="naos_carte_translation"> <entry key="CARTE INACTIVE" value="inactive"/> <entry key="CARTE PERIMEE" value="périmée"/> <entry key="CARTE ACTIVEE" value="active"/> <entry key="CARTE OPPOSEE" value="en opposition"/> <entry key="CARTE BLOQUEE" value="bloquée"/> <entry key="" value="Inconnue"/> </util:map> </beans> |
bin\custom\naos\naosstorefront\web\webroot\WEB-INF\tags\responsive\oney\response.tag
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<%-- On déclare les statuts et leurs valeurs --%> <c:set var="carteInactiveStatus" value="CARTE INACTIVE"/> <c:set var="cartePerimeeStatus" value="CARTE PERIMEE"/> <c:set var="carteActiveeStatus" value="CARTE ACTIVEE"/> <c:set var="carteOpposeeStatus" value="CARTE OPPOSEE"/> <c:set var="carteBloqueeStatus" value="CARTE BLOQUEE"/> <%-- On déclare une valeur par défaut pour la couleur --%> <c:set var="statusColor" value="text-error"/> <%-- On sette une valeur différente selon le statut --%> <c:if test="${carteActiveeStatus==infos.statutCarte}"> <c:set var="statusColor" value="text-success"/> </c:if> <c:if test="${carteInactiveStatus==infos.statutCarte || cartePerimeeStatus==infos.statutCarte}"> <c:set var="statusColor" value="text-warning"/> </c:if> <c:if test="${infos!=null}"> <c:if test="${infos.statutCarte!=null}"> <%-- On applique la classe adéquate en fonction du statut --%> <p class="${statusColor}"><spring:theme code="naos.oney.result.status" text="Etat"/> ${infos.etatCarteTraduit}</p> </c:if> </c:if> |
[CSS] Ajouter un voile teinté transparent sur n’importe quel type de visuel (jpg, gif)
Ajouter un voile teinté transparent sur n’importe quel type de visuel (JPG, GIF) et le faire disparaître au survol de la souris. Cette astuce est pratique lorsqu’on ne dispose pas de visuels détourés au format PNG avec des fonds transparents.
source HTML
1 2 3 4 5 6 7 8 |
<div class="product-item-information"> <div class="product-item-image-wrapper"> <a class="thumb" href="#"> <img src="#" alt="" /> <span class="veil"></span> </a> </div> </div> |
source LESS (bouuuh!)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.product-item-information{ .product-item-image-wrapper{ position: relative; .veil{ position: absolute; z-index: 2; width: 100%; height: 100%; opacity: .1; background: @veil-color; } } } .product-item-information:hover{ .product-item-image-wrapper{ .veil{ display: none; } } } |