Mois : mars 2018

[Chrome DevTools] Ressources en ligne, astuces, tutoriels

27/03/2018 / admin

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.

Liste des Carousels, Sliders gratuits pour vos projets

23/03/2018 / admin

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

23/03/2018 / admin

http://jsfiddle.net/eMAtL/

<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>

</ul>

</ul>

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);
}

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

15/03/2018 / admin

Source: How to trigger the window resize event in JavaScript?

var evt = window.document.createEvent('UIEvents'); 
evt.initUIEvent('resize', true, false, window, 0); 
window.dispatchEvent(evt);

var evt = window.document.createEvent('UIEvents');

evt.initUIEvent('resize', true, false, window, 0);

window.dispatchEvent(evt);

Pour Angular:

$timeout(function() {
    var evt = $window.document.createEvent('UIEvents'); 
    evt.initUIEvent('resize', true, false, $window, 0); 
    $window.dispatchEvent(evt);
});

$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

02/03/2018 / admin

bin\custom\naos\naoscommerceservices\resources\naoscommerceservices-spring.xml

<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>

<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">

</util:map>

</beans>

bin\custom\naos\naosstorefront\web\webroot\WEB-INF\tags\responsive\oney\response.tag

<%-- 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>

<%-- 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>

[CSS] Ajouter un voile teinté transparent sur n’importe quel type de visuel (jpg, gif)

01/03/2018 / admin

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

<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>

</a>

</div>

source LESS (bouuuh!)

.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;
    }
  } 
}

.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;

}

Articles récents

Catégories

Archives

Méta

Mois : mars 2018

[Chrome DevTools] Ressources en ligne, astuces, tutoriels

Liste des Carousels, Sliders gratuits pour vos projets

[bxSlider][jQuery] Synchroniser la navigation dans deux carousels distincts

[javascript] Simuler un redimensionnement de la fenêtre du navigateur avec l’événement window resize

[Hybris] Appliquer une classe différente en fonction d’un état

[CSS] Ajouter un voile teinté transparent sur n’importe quel type de visuel (jpg, gif)

source HTML

source LESS (bouuuh!)