Add responsive screen size buttons in css/scss preview iframe and increase width of iframe
Created
May 15, 2024 10:59
-
-
Save Kevin-LeMasters-PixelParade/32b0384529e265f22051d040d41443be to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
add_action("admin_head", "add_responsive_buttons_to_wpcodebox"); | |
function add_responsive_buttons_to_wpcodebox() | |
{ | |
?> | |
<style> | |
//this line increases the width of the iframe by setting max-wdith for the snippet codebox | |
.snippet-container:has(~.preview-container) { | |
max-width: 700px; | |
} | |
.responsive-buttons { | |
position: absolute; | |
top: 50px; | |
right: 65px; | |
display:none; | |
z-index:1; | |
} | |
.responsive-buttons button { | |
margin-right: 5px; | |
min-width:70px; | |
} | |
.preview-container #wpadminbar{ | |
display: none !important; | |
} | |
.preview-container iframe{ | |
margin: auto; | |
} | |
.responsive-buttons:has(~ #wpwrap .preview-container){ | |
display:block !important; | |
} | |
.snippet-container:has(~.preview-container) { | |
max-width: 700px; | |
} | |
</style> | |
<div class="responsive-buttons"> | |
<button class="preview-full">Full</button> | |
<button class="preview-desktop">Desktop</button> | |
<button class="preview-tablet">Tablet</button> | |
<button class="preview-mobile">Mobile</button> | |
</div> | |
<script> | |
jQuery(document).ready(function($) { | |
$('.preview-full').click(function() { | |
$('.preview-container iframe').width('100%'); | |
$('.preview-container iframe').height('100%'); | |
}); | |
$('.preview-desktop').click(function() { | |
$('.preview-container iframe').width(1200); | |
$('.preview-container iframe').height(800); | |
}); | |
$('.preview-tablet').click(function() { | |
$('.preview-container iframe').width(768); | |
$('.preview-container iframe').height(1024); | |
}); | |
$('.preview-mobile').click(function() { | |
$('.preview-container iframe').width(360); | |
$('.preview-container iframe').height(640); | |
}); | |
$('div span:contains("PREVIEW")').on("click", function() { | |
$('.responsive-buttons').toggle(); | |
}); | |
}); | |
</script> | |
<?php | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment