Étiquette : responsive

[JavaScript] Mediaqueries et breakpoints en JS ES6+ avec la librairie breakpoint-helper

06/05/2021 / admin

Base de l’initialisation du helper

import bph from 'breakpoint-helper';

// UIkit v3.6.19 CSS breakpoints
// $breakpoint-small: 640px !default;
// $breakpoint-medium: 960px !default;
// $breakpoint-large: 1200px !default;
// $breakpoint-xlarge: 1600px !default;

const instance = bph({
    small: '640px',
    medium: '960px',
    large: '1200px',
    xlarge: '1600px',
});

import bph from 'breakpoint-helper';

// UIkit v3.6.19 CSS breakpoints

// $breakpoint-small: 640px !default;

// $breakpoint-medium: 960px !default;

// $breakpoint-large: 1200px !default;

// $breakpoint-xlarge: 1600px !default;

const instance = bph({

small: '640px',

medium: '960px',

large: '1200px',

xlarge: '1600px',

});

Utiliser la méthode `listen()` avec un breakpoint unique

(Mobile first!) On définit un breakpoint unique à (max-width: 1199px) au-delà duquel on exécute du code pour les Desktops.

La clé/name 'large' correspond à une largeur de 1200px. Le paramètre useMax permet l’ajout et le calcul de la valeur max-width.

const { listen } = instance;

const currentBreakpoint = listen(
    {
        name: 'large',
        useMax: true,
    },
    ({ matches }) => {
        if (matches) {
            // Execute code for Mobile devices
            console.log('Current breakpoint is: (max-width: 1199px)');
        } else {
            // Execute code for Desktop devices
            console.log('Current breakpoint is: (min-width: 1200px)');
        }
    }
);

const { listen } = instance;

const currentBreakpoint = listen(

{

name: 'large',

useMax: true,

({ matches }) => {

if (matches) {

// Execute code for Mobile devices

console.log('Current breakpoint is: (max-width: 1199px)');

} else {

// Execute code for Desktop devices

console.log('Current breakpoint is: (min-width: 1200px)');

}

);

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

Cette solution alternative vous permet d’inclure du code pour nettoyer votre DOM dans le listener propre au breakpoint pour lequel vous initialisez également des choses.

const bpMobile = listen(
{
        name: 'large',
        useMax: true,
    },
    ({ matches }) => {
        if (matches) {
            // Initialiser
            console.log('EXECUTE code for: Mobile!');
        } else {
            // Nettoyer
            console.log('DESTROY code for: Mobile!');
        }
    }
);

const bpDesktop = listen('large', ({ matches }) => {
    if (matches) {
        // Initialiser
        console.log('EXECUTE code for: Desktop!');
    } else {
        // Nettoyer
        console.log('DESTROY code for: Desktop!');
    }
});

const bpMobile = listen(

{

name: 'large',

useMax: true,

({ matches }) => {

if (matches) {

// Initialiser

console.log('EXECUTE code for: Mobile!');

} else {

// Nettoyer

console.log('DESTROY code for: Mobile!');

}

);

const bpDesktop = listen('large', ({ matches }) => {

if (matches) {

// Initialiser

console.log('EXECUTE code for: Desktop!');

} else {

// Nettoyer

console.log('DESTROY code for: Desktop!');

}

});

[Magento 2] Les dimensions des images visuels produit

01/06/2020 / admin

Magento v2.3.3, v2.3.4

Doc officielle: configure image properties in view.xml.
Magento 2 : Product image size and other options. Qui donne en plus quelques codes samples pour l’utilisation dans les PHTML (mais pas testé).
How to increase the quality of product photos JPG (Magento 2)

view.xml de votre thème

Pour les visuels de la fiche produit, que votre thème hérite de blank ou de luma, voici les dimensions à surcharger dans le fichier app/design/frontend/VotreVendor/votretheme/etc/view.xml (ne tenez pas compte des valeurs que j’ai mis, surtout pour le thumbnail) :

product_page_main_image: ???
product_page_main_image_default: ???
product_page_image_large: les dimensions des visuels zoomés du carousel. Remarque: ne pas surcharger permet, il me semble, d’afficher l’image dans sa taille d’origine dans le zoom.
product_page_image_medium: les dimensions des visuels qui s’affichent en carousel
product_page_image_small: les dimensions des visuels des miniatures (thumbnails) du carousel

            <image id="product_page_main_image" type="image">
                <width>1294</width>
                <height>1294</height>
            </image>
            <image id="product_page_main_image_default" type="image">
                <width>1294</width>
                <height>1294</height>
            </image>
            <image id="product_page_image_large" type="image">
                <width>1294</width>
                <height>1294</height>
            </image>
            <image id="product_page_image_medium" type="image">
                <width>647</width>
                <height>647</height>
            </image>
            <image id="product_page_image_small" type="thumbnail">
                <width>90</width>
                <height>90</height>
            </image>

</image>

</image>

</image>

</image>

</image>

Puis en bash:

php magento catalog:images:resize
php magento cache:clean

1 2	php magento catalog:images:resize php magento cache:clean

Modifier le taux de compression (la qualité) des images

En BO:

Stores > Configuration > Advanced > System > Images Upload Configuration > Quality > 100

Dans le code en créant un module (pas testé):

File : {Vendor}/{Module}/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Catalog\Model\Product\Image" type="{Vendor}\{Module}\Model\Product\Image" />
</config>

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

</config>

File : {Vendor}/{Module}/Model/Product You can set the quality to whatever you want. Then flush image cache.

namespace {Vendor}\{Module}\Model\Product;

class Image extends \Magento\Catalog\Model\Product\Image {

    protected function _construct() {
        $this->_quality = 100;

        parent::_construct();
    }
}

namespace {Vendor}\{Module}\Model\Product;

class Image extends \Magento\Catalog\Model\Product\Image {

protected function _construct() {

$this->_quality = 100;

parent::_construct();

}

Utilisation dans un PHTML (pas testé):

Image ID could be used in .phtml template like this:

<?php
/**
 * @var $block \Magento\Catalog\Block\Product\Widget\NewWidget
 */
$image = 'new_products_content_widget_grid';
$items = $block->getProductCollection()->getItems();
foreach ($items as $_item) {
    echo $block->getImage($_item, $image)->toHtml();
}

<?php

/**

* @var $block \Magento\Catalog\Block\Product\Widget\NewWidget

$image = 'new_products_content_widget_grid';

$items = $block->getProductCollection()->getItems();

foreach ($items as $_item) {

echo $block->getImage($_item, $image)->toHtml();

}

You can set custom dimensions directly in template file:

<?php
/**
 * @var $block \Magento\Catalog\Block\Product\Widget\NewWidget
 */
$image = 'new_products_content_widget_grid';
$items = $block->getProductCollection()->getItems();
$width = 100;
$height = 100;
foreach ($items as $_item) {
    $resizedUrl = $block->resizeImage($_item, $image , $width, $height)->getUrl();
    echo '<img src="'.$resizedUrl .'" alt="alt text" />';
}

<?php

/**

* @var $block \Magento\Catalog\Block\Product\Widget\NewWidget

$image = 'new_products_content_widget_grid';

$items = $block->getProductCollection()->getItems();

$width = 100;

$height = 100;

foreach ($items as $_item) {

$resizedUrl = $block->resizeImage($_item, $image , $width, $height)->getUrl();

echo '<img src="'.$resizedUrl .'" alt="alt text" />';

}

You can modify other image options in template file. In order to do it in you need to inject image helper class (\Magento\Catalog\Helper\Image) in your block class.

<?php
/**
 * @var $block \Magento\Catalog\Block\Product\Widget\NewWidget
 * @var $imageHelper \Magento\Catalog\Helper\Image
 */
$image = 'new_products_content_widget_grid';
$items = $block->getProductCollection()->getItems();
$width = 100;
$height = 100;
foreach ($items as $_item) {
    $resizedUrl = $imageHelper->init($_item, $image )
        ->keepAspectRatio(TRUE)
        ->constrainOnly(TRUE)
        ->keepFrame(TRUE)
        ->resize($width, $height)
        ->getUrl();
    echo '<img src="'.$resizedUrl .'" alt="alt text" />';
}

<?php

/**

* @var $block \Magento\Catalog\Block\Product\Widget\NewWidget

* @var $imageHelper \Magento\Catalog\Helper\Image

$image = 'new_products_content_widget_grid';

$items = $block->getProductCollection()->getItems();

$width = 100;

$height = 100;

foreach ($items as $_item) {

$resizedUrl = $imageHelper->init($_item, $image )

->keepAspectRatio(TRUE)

->constrainOnly(TRUE)

->keepFrame(TRUE)

->resize($width, $height)

->getUrl();

echo '<img src="'.$resizedUrl .'" alt="alt text" />';

}

[Bx Slider, responsive] Les images ne s’affichent pas jusqu’à ce qu’on redimensionne la fenêtre du navigateur

08/02/2018 / admin

bxslider isn’t displaying images until page resize with responsive design

Juste après le code qui initialise le carousel, placer:

$('.bx-viewport').css('height', '');

1	$('.bx-viewport').css('height', '');

Responsive image slider bxslider only works on page reload

As it stands, bxslider is initializing before the images have had time to load, calculating 0 width and height for them, thus giving them no appearance.

Plug-in imagesloaded qui permet d’exécuter du code une fois que les images sont chargées.

[Responsive design][SASS] Un tableau responsive en mode No More Tables (version 2017)

18/09/2017 / admin

Sources sur github.com – responsive-tables.

Source de départ: No more tables – This technique was developed by Chris Coyier (@chriscoyier) and described in his post Responsive Data Tables at css-tricks.com. While you’re there, you should probably check out the Responsive Tables Roundup post, which showcases all these techniques and more.

Demo JSFiddle.net

@mixin no-more-tables-core() {
  /* Force table to not be like tables anymore */
	table, 
	thead, 
	tbody, 
	th, 
	td, 
	tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		white-space: normal;
    &:before {
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      white-space: nowrap;
      /* Label the data	*/
      content: attr(data-title);
    }
	}
}

@mixin no-more-tables-skin(
  $thead-width: 33.33333%,
  $border-width: 1px, 
  $border-color: #ccc,
  $padding-y: 8px,
  $padding-x: 10px,
  $text-align: left,
  $thead-font-weight: 700){
  tr {
    border: $border-width solid $border-color;
  }
  td { 
    /* Behave  like a "row" */
    border-bottom: $border-width solid $border-color; 
    padding-left: $thead-width; 
    text-align: $text-align;
    &:before {
      /* Top/left values mimic padding */
      top: $padding-y;
      left: $padding-x;
      width: $thead-width - ($thead-width/10); 
      padding-right: $padding-x; 
      text-align: $text-align;
      font-weight: $thead-font-weight;
    }
  }
}

.no-more-tables {
  @include no-more-tables-core();
  @include no-more-tables-skin();
}

@mixin no-more-tables-core() {

/* Force table to not be like tables anymore */

table,

thead,

tbody,

th,

td,

tr {

display: block;

}

/* Hide table headers (but not display: none;, for accessibility) */

thead tr {

position: absolute;

top: -9999px;

left: -9999px;

}

td {

/* Behave like a "row" */

border: none;

position: relative;

white-space: normal;

&:before {

/* Now like a table header */

position: absolute;

/* Top/left values mimic padding */

white-space: nowrap;

/* Label the data */

content: attr(data-title);

}

@mixin no-more-tables-skin(

$thead-width: 33.33333%,

$border-width: 1px,

$border-color: #ccc,

$padding-y: 8px,

$padding-x: 10px,

$text-align: left,

$thead-font-weight: 700){

tr {

border: $border-width solid $border-color;

}

td {

/* Behave like a "row" */

border-bottom: $border-width solid $border-color;

padding-left: $thead-width;

text-align: $text-align;

&:before {

/* Top/left values mimic padding */

top: $padding-y;

left: $padding-x;

width: $thead-width - ($thead-width/10);

padding-right: $padding-x;

text-align: $text-align;

font-weight: $thead-font-weight;

}

.no-more-tables {

@include no-more-tables-core();

@include no-more-tables-skin();

}

<div class="no-more-tables">
  <table>
    <thead>
      <tr>
        <th>Code</th>
        <th>Company</th>
        <th>Price</th>
        <th>Change</th>
        <th>Change %</th>
        <th>Open</th>
        <th>High</th>
        <th>Low</th>
        <th>Volume</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-title="Code">AAC</td>
        <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
        <td data-title="Price">$1.38</td>
        <td data-title="Change">-0.01</td>
        <td data-title="Change %">-0.36%</td>
        <td data-title="Open">$1.39</td>
        <td data-title="High">$1.39</td>
        <td data-title="Low">$1.38</td>
        <td data-title="Volume">9,395</td>
      </tr>
      <tr>
        <td data-title="Code">AAD</td>
        <td data-title="Company">ARDENT LEISURE GROUP</td>
        <td data-title="Price">$1.15</td>
        <td data-title="Change">  +0.02</td>
        <td data-title="Change %">1.32%</td>
        <td data-title="Open">$1.14</td>
        <td data-title="High">$1.15</td>
        <td data-title="Low">$1.13</td>
        <td data-title="Volume">56,431</td>
      </tr>
      <tr>
        <td data-title="Code">AAX</td>
        <td data-title="Company">AUSENCO LIMITED</td>
        <td data-title="Price">$4.00</td>
        <td data-title="Change">-0.04</td>
        <td data-title="Change %">-0.99%</td>
        <td data-title="Open">$4.01</td>
        <td data-title="High">$4.05</td>
        <td data-title="Low">$4.00</td>
        <td data-title="Volume">90,641</td>
      </tr>
      <tr>
        <td data-title="Code">ABC</td>
        <td data-title="Company">ADELAIDE BRIGHTON LIMITED</td>
        <td data-title="Price">$3.00</td>
        <td data-title="Change">  +0.06</td>
        <td data-title="Change %">2.04%</td>
        <td data-title="Open">$2.98</td>
        <td data-title="High">$3.00</td>
        <td data-title="Low">$2.96</td>
        <td data-title="Volume">862,518</td>
      </tr>
      <tr>
        <td data-title="Code">ABP</td>
        <td data-title="Company">ABACUS PROPERTY GROUP</td>
        <td data-title="Price">$1.91</td>
        <td data-title="Change">0.00</td>
        <td data-title="Change %">0.00%</td>
        <td data-title="Open">$1.92</td>
        <td data-title="High">$1.93</td>
        <td data-title="Low">$1.90</td>
        <td data-title="Volume">595,701</td>
      </tr>
      <tr>
        <td data-title="Code">ABY</td>
        <td data-title="Company">ADITYA BIRLA MINERALS LIMITED</td>
        <td data-title="Price">$0.77</td>
        <td data-title="Change">  +0.02</td>
        <td data-title="Change %">2.00%</td>
        <td data-title="Open">$0.76</td>
        <td data-title="High">$0.77</td>
        <td data-title="Low">$0.76</td>
        <td data-title="Volume">54,567</td>
      </tr>
      <tr>
        <td data-title="Code">ACR</td>
        <td data-title="Company">ACRUX LIMITED</td>
        <td data-title="Price">$3.71</td>
        <td data-title="Change">  +0.01</td>
        <td data-title="Change %">0.14%</td>
        <td data-title="Open">$3.70</td>
        <td data-title="High">$3.72</td>
        <td data-title="Low">$3.68</td>
        <td data-title="Volume">191,373</td>
      </tr>
      <tr>
        <td data-title="Code">ADU</td>
        <td data-title="Company">ADAMUS RESOURCES LIMITED</td>
        <td data-title="Price">$0.72</td>
        <td data-title="Change">0.00</td>
        <td data-title="Change %">0.00%</td>
        <td data-title="Open">$0.73</td>
        <td data-title="High">$0.74</td>
        <td data-title="Low">$0.72</td>
        <td data-title="Volume">8,602,291</td>
      </tr>
      <tr>
        <td data-title="Code">AGG</td>
        <td data-title="Company">ANGLOGOLD ASHANTI LIMITED</td>
        <td data-title="Price" class="numeric">$7.81</td>
        <td data-title="Change" class="numeric">-0.22</td>
        <td data-title="Change %" class="numeric">-2.74%</td>
        <td data-title="Open" class="numeric">$7.82</td>
        <td data-title="High" class="numeric">$7.82</td>
        <td data-title="Low" class="numeric">$7.81</td>
        <td data-title="Volume" class="numeric">148</td>
      </tr>
      <tr>
        <td data-title="Code">AGK</td>
        <td data-title="Company">AGL ENERGY LIMITED</td>
        <td data-title="Price">$13.82</td>
        <td data-title="Change">  +0.02</td>
        <td data-title="Change %">0.14%</td>
        <td data-title="Open">$13.83</td>
        <td data-title="High">$13.83</td>
        <td data-title="Low">$13.67</td>
        <td data-title="Volume">846,403</td>
      </tr>
      <tr>
        <td data-title="Code">AGO</td>
        <td data-title="Company">ATLAS IRON LIMITED</td>
        <td data-title="Price">$3.17</td>
        <td data-title="Change">-0.02</td>
        <td data-title="Change %">-0.47%</td>
        <td data-title="Open">$3.11</td>
        <td data-title="High">$3.22</td>
        <td data-title="Low">$3.10</td>
        <td data-title="Volume">5,416,303</td>
      </tr>
    </tbody>
  </table>
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

<table>

<thead>

<tr>

<th>Company</th>

<th>Price</th>

<th>Change</th>

<th>Change %</th>

<th>Volume</th>

</tr>

</thead>

<tbody>

<tr>

<td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>

</tr>

<tr>

<td data-title="Company">ARDENT LEISURE GROUP</td>

</tr>

<tr>

<td data-title="Company">AUSENCO LIMITED</td>

</tr>

<tr>

<td data-title="Company">ADELAIDE BRIGHTON LIMITED</td>

</tr>

<tr>

<td data-title="Company">ABACUS PROPERTY GROUP</td>

</tr>

<tr>

<td data-title="Company">ADITYA BIRLA MINERALS LIMITED</td>

</tr>

<tr>

<td data-title="Company">ACRUX LIMITED</td>

</tr>

<tr>

<td data-title="Company">ADAMUS RESOURCES LIMITED</td>

</tr>

<tr>

<td data-title="Company">ANGLOGOLD ASHANTI LIMITED</td>

</tr>

<tr>

<td data-title="Company">AGL ENERGY LIMITED</td>

</tr>

<tr>

<td data-title="Company">ATLAS IRON LIMITED</td>

</tr>

</tbody>

</table>

</div>

jQuery (si besoin de fixer les hauteurs des rangées)

    $('.no-more-tables td').each(function(){
      var $this = $(this);
      var thisHeight = $this.height();
      var thisGetZero = $this.get(0);
      var thisBeforeHeightPx = window.getComputedStyle(thisGetZero, ':before').height;
      var thisBeforeHeight = parseInt(thisBeforeHeightPx, 10);
      var thisPaddingY = 8;

      if(thisHeight > thisBeforeHeight) {
        $this.css('height', thisHeight + (thisPaddingY*2) + 'px');
      }
      if(thisHeight < thisBeforeHeight) {
        $this.css('height', thisBeforeHeight + (thisPaddingY*2) + 'px');
      }
      else if(thisHeight == thisBeforeHeight) {
        $this.css('height', thisHeight + (thisPaddingY*2) + 'px');
      }
    });

$('.no-more-tables td').each(function(){

var $this = $(this);

var thisHeight = $this.height();

var thisGetZero = $this.get(0);

var thisBeforeHeightPx = window.getComputedStyle(thisGetZero, ':before').height;

var thisBeforeHeight = parseInt(thisBeforeHeightPx, 10);

var thisPaddingY = 8;

if(thisHeight > thisBeforeHeight) {

$this.css('height', thisHeight + (thisPaddingY*2) + 'px');

}

if(thisHeight < thisBeforeHeight) {

$this.css('height', thisBeforeHeight + (thisPaddingY*2) + 'px');

}

else if(thisHeight == thisBeforeHeight) {

$this.css('height', thisHeight + (thisPaddingY*2) + 'px');

}

});

[CSS] Des mediaqueries adaptées à chaque marque et version de smartphones et tablettes

01/09/2017 / admin

Principalement Apple et Samsung, mais pas que … Device Specific CSS Media Queries Collection.

Version de début septembre 2017; vérifier le git pour la version la plus à jour.

/*
  Based on:
  1. http://stephen.io/mediaqueries
  2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
*/

/* iPhone 6 in portrait & landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {
  
}

/* iPhone 6 in landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) {
  
}

/* iPhone 6 in portrait */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) {
  
}

/* iPhone 6 Plus in portrait & landscape */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) {
  
}

/* iPhone 6 Plus in landscape */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) {
  
}

/* iPhone 6 Plus in portrait */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) {
  
}

/* iPhone 5 & 5S in portrait & landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
  
}

/* iPhone 5 & 5S in landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
  
}

/* iPhone 5 & 5S in portrait */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
  
}

/* 
  iPhone 2G, 3G, 4, 4S Media Queries
  It's noteworthy that these media queries are also the same for iPod Touch generations 1-4.
*/

/* iPhone 2G-4S in portrait & landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  
}

/* iPhone 2G-4S in landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) {
  
}

/* iPhone 2G-4S in portrait */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) {
  
}

/* iPad in portrait & landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
  
}

/* iPad in landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  
}

/* iPad in portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  
}

/* Galaxy S3 portrait and landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Galaxy S3 portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

}

/* Galaxy S3 landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

}

/* Galaxy S4 portrait and landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Galaxy S4 portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Galaxy S4 landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* Galaxy S5 portrait and landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Galaxy S5 portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Galaxy S5 landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* HTC One portrait and landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* HTC One portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* HTC One landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/*
  iPad 3 & 4 Media Queries
  If you're looking to target only 3rd and 4th generation Retina iPads 
  (or tablets with similar resolution) to add @2x graphics,
  or other features for the tablet's Retina display, use the following media queries.
*/

/* Retina iPad in portrait & landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
  
}

/* Retina iPad in landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
  
}

/* Retina iPad in portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
  
}

/*
  iPad 1 & 2 Media Queries
  If you're looking to supply different graphics or choose different typography 
  for the lower resolution iPad display, the media queries below will work 
  like a charm in your responsive design!
*/

/* iPad 1 & 2 in portrait & landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1) {
  
}

/* iPad 1 & 2 in landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
  
}

/* iPad 1 & 2 in portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) {
  
}

/* iPad mini in portrait & landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
  
}

/* iPad mini in landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad mini in portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
  
}

/* Galaxy Tab 10.1 portrait and landscape */
@media
  (min-device-width: 800px) 
  and (max-device-width: 1280px) {

}

/* Galaxy Tab 10.1 portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait) { 

}

/* Galaxy Tab 10.1 landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape) { 

}

/* Asus Nexus 7 portrait and landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Asus Nexus 7 portrait */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait) {

}

/* Asus Nexus 7 landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {

}

/* Kindle Fire HD 7" portrait and landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Kindle Fire HD 7" portrait */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
    
}

/* Kindle Fire HD 7" landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

/* Kindle Fire HD 8.9" portrait and landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Kindle Fire HD 8.9" portrait */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
    
}

/* Kindle Fire HD 8.9" landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

/* Laptops non-retina screens */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    
}

/* Laptops retina screens */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) {
    
}

/* Apple Watch */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm) { 

}

/* Moto 360 Watch */
@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

Based on:

1. http://stephen.io/mediaqueries

2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

/* iPhone 6 in portrait & landscape */

@media only screen

and (min-device-width : 375px)

and (max-device-width : 667px) {

}

/* iPhone 6 in landscape */

@media only screen

and (min-device-width : 375px)

and (max-device-width : 667px)

and (orientation : landscape) {

}

/* iPhone 6 in portrait */

@media only screen

and (min-device-width : 375px)

and (max-device-width : 667px)

and (orientation : portrait) {

}

/* iPhone 6 Plus in portrait & landscape */

@media only screen

and (min-device-width : 414px)

and (max-device-width : 736px) {

}

/* iPhone 6 Plus in landscape */

@media only screen

and (min-device-width : 414px)

and (max-device-width : 736px)

and (orientation : landscape) {

}

/* iPhone 6 Plus in portrait */

@media only screen

and (min-device-width : 414px)

and (max-device-width : 736px)

and (orientation : portrait) {

}

/* iPhone 5 & 5S in portrait & landscape */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px) {

}

/* iPhone 5 & 5S in landscape */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px)

and (orientation : landscape) {

}

/* iPhone 5 & 5S in portrait */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px)

and (orientation : portrait) {

}

iPhone 2G, 3G, 4, 4S Media Queries

It's noteworthy that these media queries are also the same for iPod Touch generations 1-4.

/* iPhone 2G-4S in portrait & landscape */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

}

/* iPhone 2G-4S in landscape */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px)

and (orientation : landscape) {

}

/* iPhone 2G-4S in portrait */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px)

and (orientation : portrait) {

}

/* iPad in portrait & landscape */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

}

/* iPad in landscape */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape) {

}

/* iPad in portrait */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait) {

}

/* Galaxy S3 portrait and landscape */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 2) {

}

/* Galaxy S3 portrait */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 2)

and (orientation: portrait) {

}

/* Galaxy S3 landscape */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 2)

and (orientation: landscape) {

}

/* Galaxy S4 portrait and landscape */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3) {

}

/* Galaxy S4 portrait */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* Galaxy S4 landscape */

@media screen

and (device-width: 320px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: landscape) {

}

/* Galaxy S5 portrait and landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3) {

}

/* Galaxy S5 portrait */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* Galaxy S5 landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: landscape) {

}

/* HTC One portrait and landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3) {

}

/* HTC One portrait */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* HTC One landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: landscape) {

}

iPad 3 & 4 Media Queries

If you're looking to target only 3rd and 4th generation Retina iPads

(or tablets with similar resolution) to add @2x graphics,

or other features for the tablet's Retina display, use the following media queries.

/* Retina iPad in portrait & landscape */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (-webkit-min-device-pixel-ratio: 2) {

}

/* Retina iPad in landscape */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape)

and (-webkit-min-device-pixel-ratio: 2) {

}

/* Retina iPad in portrait */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait)

and (-webkit-min-device-pixel-ratio: 2) {

}

iPad 1 & 2 Media Queries

If you're looking to supply different graphics or choose different typography

for the lower resolution iPad display, the media queries below will work

like a charm in your responsive design!

/* iPad 1 & 2 in portrait & landscape */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad 1 & 2 in landscape */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad 1 & 2 in portrait */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad mini in portrait & landscape */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad mini in landscape */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad mini in portrait */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* Galaxy Tab 10.1 portrait and landscape */

@media

(min-device-width: 800px)

and (max-device-width: 1280px) {

}

/* Galaxy Tab 10.1 portrait */

@media

(max-device-width: 800px)

and (orientation: portrait) {

}

/* Galaxy Tab 10.1 landscape */

@media

(max-device-width: 1280px)

and (orientation: landscape) {

}

/* Asus Nexus 7 portrait and landscape */

@media screen

and (device-width: 601px)

and (device-height: 906px)

and (-webkit-min-device-pixel-ratio: 1.331)

and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Asus Nexus 7 portrait */

@media screen

and (device-width: 601px)

and (device-height: 906px)

and (-webkit-min-device-pixel-ratio: 1.331)

and (-webkit-max-device-pixel-ratio: 1.332)

and (orientation: portrait) {

}

/* Asus Nexus 7 landscape */

@media screen

and (device-width: 601px)

and (device-height: 906px)

and (-webkit-min-device-pixel-ratio: 1.331)

and (-webkit-max-device-pixel-ratio: 1.332)

and (orientation: landscape) {

}

/* Kindle Fire HD 7" portrait and landscape */

@media only screen

and (min-device-width: 800px)

and (max-device-width: 1280px)

and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Kindle Fire HD 7" portrait */

@media only screen

and (min-device-width: 800px)

and (max-device-width: 1280px)

and (-webkit-min-device-pixel-ratio: 1.5)

and (orientation: portrait) {

}

/* Kindle Fire HD 7" landscape */

@media only screen

and (min-device-width: 800px)

and (max-device-width: 1280px)

and (-webkit-min-device-pixel-ratio: 1.5)

and (orientation: landscape) {

}

/* Kindle Fire HD 8.9" portrait and landscape */

@media only screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Kindle Fire HD 8.9" portrait */

@media only screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 1.5)

and (orientation: portrait) {

}

/* Kindle Fire HD 8.9" landscape */

@media only screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 1.5)

and (orientation: landscape) {

}

/* Laptops non-retina screens */

@media screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 1) {

}

/* Laptops retina screens */

@media screen

and (min-device-width: 1200px)

and (max-device-width: 1600px)

and (-webkit-min-device-pixel-ratio: 2)

and (min-resolution: 192dpi) {

}

/* Apple Watch */

@media

(max-device-width: 42mm)

and (min-device-width: 38mm) {

}

/* Moto 360 Watch */

@media

(max-device-width: 218px)

and (max-device-height: 281px) {

}

[CSS] Des cercles responsive dont les dimensions s’adaptent de manière homothétique

17/07/2017 / admin

Source : https://codepen.io/CrocoDillon/pen/trFam.

A noter: par rapport au Codepen où .circle à les propriétés width: 10%; et padding: 5% 0;, mettre width: 100%; et padding: 50% 0; (comme dans le code ci-dessous) rend les cercles parfaitement fluides. Ils s’adaptent au container.

<div class="responsive-circle">
  <div class="responsive-circle-content">
    <i class="iconfont">[P]</i>
  </div>
</div>

</div>

.responsive-circle {
  position: relative;
  width: 100%;
  height: 0;
  padding: 50% 0;
  margin: 0 auto;
  border-radius: 50%;
  background: pink;
  &-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    &:before {
      content: "";
      vertical-align: middle;
      display: inline-block;
      width: 0;
      height: 100%;
    }
    // span {
    //   vertical-align: middle;
    //   display: inline-block;
    // }
  }
}

.responsive-circle {

position: relative;

width: 100%;

height: 0;

padding: 50% 0;

margin: 0 auto;

border-radius: 50%;

background: pink;

&-content {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

text-align: center;

&:before {

content: "";

vertical-align: middle;

display: inline-block;

width: 0;

height: 100%;

}

// span {

// vertical-align: middle;

// display: inline-block;

// }

}

[Foundation 6] Un off-canvas qui prend 50% de la largeur de la fenêtre

07/07/2017 / admin

Sources JS et SASS maintenues à jour ici : https://github.com/franklang/foundation-sites-plugins.

Dans notre example, le off-canvas de droite prend prend 50% de la largeur de la fenêtre pour les écrans medium et supérieurs.

Les plugins Foundation offcanvas, box (util), mediaquery (util) sont obligatoires.

HTML

http://foundation.zurb.com/sites/docs/off-canvas.html

SASS

#offCanvasRight.is-open {
  transform: translateX(0) !important;
}

#offCanvasRight.is-open {

transform: translateX(0) !important;

}

jQuery

;(function ($, window, undefined){
  
  /**
   * foundation.widerOffcanvas.js plugin
   *
   * Extends "Foundation for Sites" v6.4.1 off-canvas plugin
   * to provide a wider than 250px-standard width off-canvas.
   *
   * [WARNING] Tested for right-positioned off-canvas only so far.
   *
   * Required third-party components:
   * - foundation.core.js
   * - foundation.offcanvas.js
   * - foundation.util.box.js
   *
   * Usage:
   * $(document).widerOffcanvas({
   *   triggeringBreakpoint: 'medium',
   *   offCanvasID: '#offCanvasRight',
   *   pageID: '#page-wrapper'
   * });
   */

  $.fn.widerOffcanvas = function(options){

    var defaults = {
      triggeringBreakpoint: 'medium', // one of Foundation's breakpoint (small, medium, large, ...)
      offCanvasID: '#offCanvasRight', // target offcanvas element ID
      pageID: '#page-wrapper' // page ID
    }

    var settings = $.extend({}, defaults, options);

    /**
     * Destroy function (more of a DOM reset actually...)
     */
    function destroyWiderOffCanvas() {
      $(settings.offCanvasID, settings.pageID).attr('style', '');
    }

    /**
     * Set wider off-canvas specific width
     */
    function setWiderOffCanvasWidth() {
      var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));
      var pageSideMarginWidth = (globalWidth.parentDims.width - globalWidth.width)/2;
      var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333;
      var widerOffCanvasWidth = pageSideMarginWidth + baseWiderOffCanvasWidth;
      console.log(pageSideMarginWidth + ', ' + baseWiderOffCanvasWidth + ', ' + widerOffCanvasWidth);
      
      $(settings.offCanvasID).css({
        'width': widerOffCanvasWidth,
        '-webkit-transform': 'translateX(' + widerOffCanvasWidth + 'px)',
        '-ms-transform': 'translateX(' + widerOffCanvasWidth + 'px)',
        'transform': 'translateX(' + widerOffCanvasWidth + 'px)'
      });
    }

    /**
     * Set page indent value (page slides to the opposite side regarding where off-canvas opens)
     */
    function setPageIndentValue() {
      var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));
      var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333;
      
      $(settings.offCanvasID).on('opened.zf.offcanvas', function() {
        $(settings.pageID).css({
          '-webkit-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)',
          '-ms-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)',
          'transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)'
        });
      }).on('closed.zf.offcanvas', function() {
        $(settings.pageID).attr('style', ' ');
      });
    }

    /**
     * On document ready...
     */
    if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) {
      setWiderOffCanvasWidth();
      setPageIndentValue();
    }    

    /**
     * On window resize...
     */
    $(window).on('resize', function() {
      destroyWiderOffCanvas();
      
      var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));

      if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) {
        setWiderOffCanvasWidth();
        setPageIndentValue();
      }
    });
  };

}(jQuery, window));

100

;(function ($, window, undefined){

/**

* foundation.widerOffcanvas.js plugin

* Extends "Foundation for Sites" v6.4.1 off-canvas plugin

* to provide a wider than 250px-standard width off-canvas.

* [WARNING] Tested for right-positioned off-canvas only so far.

* Required third-party components:

* - foundation.core.js

* - foundation.offcanvas.js

* - foundation.util.box.js

* Usage:

* $(document).widerOffcanvas({

* triggeringBreakpoint: 'medium',

* offCanvasID: '#offCanvasRight',

* pageID: '#page-wrapper'

* });

$.fn.widerOffcanvas = function(options){

var defaults = {

triggeringBreakpoint: 'medium', // one of Foundation's breakpoint (small, medium, large, ...)

offCanvasID: '#offCanvasRight', // target offcanvas element ID

pageID: '#page-wrapper' // page ID

}

var settings = $.extend({}, defaults, options);

/**

* Destroy function (more of a DOM reset actually...)

function destroyWiderOffCanvas() {

$(settings.offCanvasID, settings.pageID).attr('style', '');

}

/**

* Set wider off-canvas specific width

function setWiderOffCanvasWidth() {

var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));

var pageSideMarginWidth = (globalWidth.parentDims.width - globalWidth.width)/2;

var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333;

var widerOffCanvasWidth = pageSideMarginWidth + baseWiderOffCanvasWidth;

console.log(pageSideMarginWidth + ', ' + baseWiderOffCanvasWidth + ', ' + widerOffCanvasWidth);

$(settings.offCanvasID).css({

'width': widerOffCanvasWidth,

'-webkit-transform': 'translateX(' + widerOffCanvasWidth + 'px)',

'-ms-transform': 'translateX(' + widerOffCanvasWidth + 'px)',

'transform': 'translateX(' + widerOffCanvasWidth + 'px)'

});

}

/**

* Set page indent value (page slides to the opposite side regarding where off-canvas opens)

function setPageIndentValue() {

var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));

var baseWiderOffCanvasWidth = globalWidth.parentDims.width/2.33333;

$(settings.offCanvasID).on('opened.zf.offcanvas', function() {

$(settings.pageID).css({

'-webkit-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)',

'-ms-transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)',

'transform': 'translateX(-' + baseWiderOffCanvasWidth + 'px)'

});

}).on('closed.zf.offcanvas', function() {

$(settings.pageID).attr('style', ' ');

});

}

/**

* On document ready...

if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) {

setWiderOffCanvasWidth();

setPageIndentValue();

}

/**

* On window resize...

$(window).on('resize', function() {

destroyWiderOffCanvas();

var globalWidth = Foundation.Box.GetDimensions(document.getElementById('globalWidth'));

if (Foundation.MediaQuery.atLeast(settings.triggeringBreakpoint)) {

setWiderOffCanvasWidth();

setPageIndentValue();

}

});

};

}(jQuery, window));

[CSS] Des images responsive dans un tableau HTML ou dans un container en display: table-cell;

24/03/2017 / admin

table

nada …

display: table-cell;

ATTENTION: sous IE10, IE11, dans le cadre d’une mise en page Responsive et si vous utilisez des images, il est possible que le redimensionnement homothétique de celles-ci soit mal géré. Vous pouvez ajouter ce style pour corriger le problème :

.votre-faux-tableau .votre-fausse-cellule img { width: 99.99%; }

1	.votre-faux-tableau .votre-fausse-cellule img { width: 99.99%; }

Source: Responsive Images in display: table-cell – A PEN BY Matt Stow.
Voir également: Why do Firefox and Opera ignore max-width inside of display: table-cell?.

<p>Normal "responsive" image</p>
<img src="http://placehold.it/650x150" />

<p>Image in a display: table-cell</p>
<div class="cell"><img src="http://placehold.it/650x150" /></div>

<p>Image in a display: table-cell with width: 100%</p>
<div class="cell"><img src="http://placehold.it/650x150" class="cell-fluid" /></div>

<p>Normal "responsive" image</p>

<p>Image in a display: table-cell</p>

<p>Image in a display: table-cell with width: 100%</p>

img {
  height: auto;
  max-width: 100%;
}

.cell {
  display: table-cell;
}

.cell-fluid {
  width: 100%;
}

img {

height: auto;

max-width: 100%;

}

.cell {

display: table-cell;

}

.cell-fluid {

width: 100%;

}

[Magento 1.x] Un slider multi-produits responsive avec le plugin jQuery Cycle (fourni avec le thème Rwd)

03/03/2017 / admin

Source : http://jsfiddle.net/kRs2N/6/ et mon fork avec des marges entre les slides http://jsfiddle.net/frontenddeveloper/L3bpavzc/1/.

HTML

<ul class="slideshow">
    <li><img alt="" src="http://malsup.github.io/images/beach1.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach2.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach3.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach4.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong> </div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach5.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach6.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach7.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach8.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
</ul>
<div class="prevnext"> <a href="#" id="prev4" class="skew-backward">PREV</a> <a href="#" id="next4" class="skew-forward">NEXT</a> </div>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

CSS

/* Slider */

ul.slideshow {
  overflow: hidden;
    margin:0;
    padding:0;
    list-style-type:none;
    margin-bottom:-80px;
    margin-left: -10px;
    margin-right: -10px;
    }
li.cycle-slide
{
     text-align:center;
     position:relative;
     text-align:center;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
}
.cycle-slide div
{
    bottom:100px;
    color:#FFF;
    position:relative;
    left:0; right:0;
    font-size:24px;
    font-weight:300;
    text-transform:uppercase;
}
.cycle-slide div strong
{
    font-weight:700;
}
.cycle-slide img
{
    width: 100%; 
}
.slider {
    position:relative;
}
.prevnext
{
    position:absolute;
    top:50%;
    width:100%;
    margin-top:-90px;
}
#prev4
{ 
    position:absolute;
    left:40px;
    background-image:url(../images/prev.png);
    width:70px;
    height:140px;
}
#next4
{
    position:absolute;
    right:0;
    background-image:url(../images/next.png);
    width:70px;
    height:140px;
}

/* Slider */

ul.slideshow {

overflow: hidden;

margin:0;

padding:0;

list-style-type:none;

margin-bottom:-80px;

margin-left: -10px;

margin-right: -10px;

}

li.cycle-slide

{

text-align:center;

position:relative;

text-align:center;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

}

.cycle-slide div

{

bottom:100px;

color:#FFF;

position:relative;

left:0; right:0;

font-size:24px;

font-weight:300;

text-transform:uppercase;

}

.cycle-slide div strong

{

font-weight:700;

}

.cycle-slide img

{

width: 100%;

}

.slider {

position:relative;

}

.prevnext

{

position:absolute;

top:50%;

width:100%;

margin-top:-90px;

}

#prev4

{

position:absolute;

left:40px;

background-image:url(../images/prev.png);

width:70px;

height:140px;

}

#next4

{

position:absolute;

right:0;

background-image:url(../images/next.png);

width:70px;

height:140px;

}

jQuery

function buildCarousel(visibleSlides) {
    $('.slideshow').cycle({
        fx: 'carousel',
        speed: 600,
        slides: 'li',
        carouselVisible: visibleSlides,
        carouselFluid: true,
        swipe:true,
        swipefx:'scrollHorz',
        next: '#next4',
        prev: '#prev4',
        pager: '#gallery-chooser ul',
    });
    $('.slideshow li img').css('opacity','1');
}


function initCycle() {
    var width = $(document).width();
    var visibleSlides = 4;
    
    if ( width < 400 ) {visibleSlides = 1}
    else if(width < 700) {visibleSlides = 2}
    else if(width < 1024) {visibleSlides = 3}
    else if(width < 1400) {visibleSlides = 4}
    else {visibleSlides = 5};

    buildCarousel(visibleSlides);
}

function reinit_cycle() {
    var width = $(window).width();
    
    
    var destroyCarousel = function() { 
        $('.slideshow').cycle('destroy');
    }

    if (width < 400) {
        destroyCarousel(); // call the function
        reinitCycle(1);
    } else if (width > 400 && width < 700) {
        destroyCarousel();
        reinitCycle(2);
    } else if (width > 700 && width < 1024) {
        destroyCarousel();
        reinitCycle(3);
        } else if (width > 1024 && width < 1400) {
        destroyCarousel();
        reinitCycle(4);
    } else {
        destroyCarousel();
        reinitCycle(5);
    }
}

function reinitCycle(visibleSlides) {
    buildCarousel(visibleSlides);
}
var reinitTimer;
$(window).resize(function() {
    clearTimeout(reinitTimer);
    reinitTimer = setTimeout(reinit_cycle, 100);
});

$(document).ready(function(){
    initCycle();    
});

function buildCarousel(visibleSlides) {

$('.slideshow').cycle({

fx: 'carousel',

speed: 600,

slides: 'li',

carouselVisible: visibleSlides,

carouselFluid: true,

swipe:true,

swipefx:'scrollHorz',

next: '#next4',

prev: '#prev4',

pager: '#gallery-chooser ul',

});

$('.slideshow li img').css('opacity','1');

}

function initCycle() {

var width = $(document).width();

var visibleSlides = 4;

if ( width < 400 ) {visibleSlides = 1}

else if(width < 700) {visibleSlides = 2}

else if(width < 1024) {visibleSlides = 3}

else if(width < 1400) {visibleSlides = 4}

else {visibleSlides = 5};

buildCarousel(visibleSlides);

}

function reinit_cycle() {

var width = $(window).width();

var destroyCarousel = function() {

$('.slideshow').cycle('destroy');

}

if (width < 400) {

destroyCarousel(); // call the function

reinitCycle(1);

} else if (width > 400 && width < 700) {

destroyCarousel();

reinitCycle(2);

} else if (width > 700 && width < 1024) {

destroyCarousel();

reinitCycle(3);

} else if (width > 1024 && width < 1400) {

destroyCarousel();

reinitCycle(4);

} else {

destroyCarousel();

reinitCycle(5);

}

function reinitCycle(visibleSlides) {

buildCarousel(visibleSlides);

}

var reinitTimer;

$(window).resize(function() {

clearTimeout(reinitTimer);

reinitTimer = setTimeout(reinit_cycle, 100);

});

$(document).ready(function(){

initCycle();

});

Articles récents

Catégories

Archives

Méta

Étiquette : responsive

[JavaScript] Mediaqueries et breakpoints en JS ES6+ avec la librairie breakpoint-helper

Base de l’initialisation du helper

Utiliser la méthode `listen()` avec un breakpoint unique

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

[Magento 2] Les dimensions des images visuels produit

view.xml de votre thème

Modifier le taux de compression (la qualité) des images

En BO:

Dans le code en créant un module (pas testé):

Utilisation dans un PHTML (pas testé):

[Bx Slider, responsive] Les images ne s’affichent pas jusqu’à ce qu’on redimensionne la fenêtre du navigateur

[Responsive design][SASS] Un tableau responsive en mode No More Tables (version 2017)

jQuery (si besoin de fixer les hauteurs des rangées)

[CSS] Des mediaqueries adaptées à chaque marque et version de smartphones et tablettes

[CSS] Des cercles responsive dont les dimensions s’adaptent de manière homothétique

[Foundation 6] Un off-canvas qui prend 50% de la largeur de la fenêtre

HTML

SASS

jQuery

[CSS] Des images responsive dans un tableau HTML ou dans un container en display: table-cell;

table

display: table-cell;

[Magento 1.x] Un slider multi-produits responsive avec le plugin jQuery Cycle (fourni avec le thème Rwd)

HTML

CSS

jQuery

[Ergonomie] Galerie de menus de navigation de sites e-commerce

Target

Lowe’s

Nordstrom

Curry’s UK

Saint Maclou

Base de l’initialisation du helper

Utiliser la méthode listen() avec un breakpoint unique

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

view.xml de votre thème

Modifier le taux de compression (la qualité) des images

En BO:

Dans le code en créant un module (pas testé):

Utilisation dans un PHTML (pas testé):

jQuery (si besoin de fixer les hauteurs des rangées)

HTML

SASS

jQuery

table

display: table-cell;

HTML

CSS

jQuery

Utiliser la méthode `listen()` avec un breakpoint unique