Bonjour à tous, voici un outil qui permet la prévisualisation d'un site dans divers formats, PC de bureau, tablette et smartphone.
Nous allons l'utiliser pour le nouveau site de templates pour silex v3.
Hello everyone, here's a tool that lets you preview a site in various formats, desktop PC, tablet and smartphone. We're going to use it for the new templates site for silex v3
https://responsive-live-silexv3.netlify.app/
HTML head
document.addEventListener('DOMContentLoaded', function () {
function init() {
document.getElementById('previewDesktopBtn').addEventListener('click', function (e) {
setLivePreviewFrameSize(this);
setActiveResponsiveButton(this);
e.preventDefault();
});
document.getElementById('previewLaptopBtn').addEventListener('click', function (e) {
setLivePreviewFrameSize(this);
setActiveResponsiveButton(this);
e.preventDefault();
});
document.getElementById('previewTabletBtn').addEventListener('click', function (e) {
setLivePreviewFrameSize(this);
setActiveResponsiveButton(this);
e.preventDefault();
});
document.getElementById('previewPhoneHorizontalBtn').addEventListener('click', function (e) {
setLivePreviewFrameSize(this);
setActiveResponsiveButton(this);
e.preventDefault();
});
document.getElementById('previewPhoneBtn').addEventListener('click', function (e) {
setLivePreviewFrameSize(this);
setActiveResponsiveButton(this);
e.preventDefault();
});
detectActiveResponsiveButton();
}
if (document.readyState === 'complete') {
init();
} else {
document.addEventListener('readystatechange', function () {
if (document.readyState === 'complete') {
init();
}
});
}
function setActiveResponsiveButton(btn) {
document.querySelectorAll('.page-preview-header > a').forEach(function (el) {
el.classList.remove('active');
});
btn.classList.add('active');
}
function detectActiveResponsiveButton() {
var d = device || 'desktop';
document.getElementById('preview' + d.charAt(0).toUpperCase() + d.slice(1) + 'Btn').click();
}
function setLivePreviewFrameSize(srcEl) {
var getScrollbarWidth = function () {
var s = document.createElement('div');
s.style.width = '100px';
s.style.height = '100px';
s.style.overflow = 'scroll';
s.style.visibility = 'hidden';
s.style.position = 'absolute';
s.style.top = '-99999px';
document.body.appendChild(s);
var res = s.offsetWidth - s.clientWidth;
document.body.removeChild(s);
return res;
};
var attr = srcEl.getAttribute('data-preview-size');
document.getElementById('livePreviewFrame').style.width = attr.indexOf('%') !== -1 ? attr : (parseInt(attr, 10) + getScrollbarWidth()) + 'px';
}
});
</script>
custom code
<div class="page-preview">
<div class="page-preview-header">
<a href="#" id="previewDesktopBtn" data-preview-size="100%"><img src="assets/responsive-desktop.png" alt="Responsive Desktop Mode"></a>
<a href="#" id="previewLaptopBtn" data-preview-size="1040px"><img src="assets/responsive-laptop.png" alt="Responsive Laptop Mode"></a>
<a href="#" id="previewTabletBtn" data-preview-size="820px"><img src="assets/responsive-tablet.png" alt="Responsive Tablet Mode"></a>
<a href="#" id="previewPhoneHorizontalBtn" data-preview-size="640px"><img src="assets/responsive-phone-horizontal.png" alt="Responsive Phone Horizontal Mode"></a>
<a href="#" id="previewPhoneBtn" data-preview-size="440px"><img src="assets/responsive-phone.png" alt="Responsive Phone Mode"></a>
<a class="close" href="https://www.silex.me/"><img src="assets/icon-close.png" alt="Close"></a>
</div>
<div class="page-preview-body">
<iframe id="livePreviewFrame" src="https://www.jpwebdesign.be" width="1057" height="640" style="width:100%;"></iframe>
</div>
</div>
