I have embedded a facebook iframe in my site and I want to disable it when the screen reaches a certain width. I don't know how to actually make the iframe go away. Here's my implementation:
window.onresize = () => {
if (window.innerWidth <= 1200) {
document.getElementsByClassName("fb-page")[0].setAttribute("data-height", "0");
}
else {
document.getElementsByClassName("fb-page")[0].setAttribute("data-height", "130");
}
But it doesn't work because the min height is 70 and the iframe itself doesn't refresh. Any ideas?
I suggest you you try this using CSS:
#media screen and (max-width: 768px) { // or other width
iframe {
display: none;
}
}
Or you can use height: 0 instead of display if there are no paddings.
Related
Is it possible?
I have the following javascript function
<a onclick="execute()">Click here</a>
function execute(){
//code goes here
}
I would like that the onclick event to be only active when the screen size is below 768, so it's only relevant on mobile devices and so on.
Is it possible? and how do you achieve this?
It's totally possible. You'd probably want to do it in the execute function, otherwise when someone clicks on a larger size, there would be a ReferenceError (execute is not defined).
function execute () {
var width = window.innerWidth
if (width >= 768) return
// rest of code here
}
function execute(){
if(screen.width <= 768) {
//code goes here
}
}
Reference: https://www.w3schools.com/jsref/prop_screen_width.asp
Could also use a media query with CSS
#media only screen and (max-width: 768px) {
a {
display: none;
}
}
Media Queries
I grab the size of a slide image using let size = carousel_images[0].clientWidth; and clientWidth varies in different viewports, here, carousel_images is pointing to img within the .carousel and here is how it varies in different viewports:
#media screen and (min-width: 1024px) {
.carousel {
max-width: 994px;
img {
min-width: 994px;
}
}
}
#media screen and (min-width: 1200px) {
.carousel {
max-width: 1150px;
img {
min-width: 1150px;
}
}
}
so when I resize the browser it looks like:
but as I refresh the page, it looks normal again.
here is full code pen link, Thank You.
You need to add this code:
window.addEventListener('resize', ()=>{
size = carousel_images[0].clientWidth
carousel_slide.style.transform = `translateX(${-size}px)`
})
Essentially, you need to listen window resize event, update variable and execute code again wherever that variable is used.
I think you have to assign a new value to your let size. Is it a global variable? Perhaps, putting it inside a function or class is a good idea.
You could use the resize event, which fires when your window changes size.
The following demo is from:
https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event
const heightOutput = document.querySelector('#height');
const widthOutput = document.querySelector('#width');
function reportWindowSize() {
heightOutput.textContent = window.innerHeight;
widthOutput.textContent = window.innerWidth;
}
window.onresize = reportWindowSize;
<p>Resize the browser window to fire the <code>resize</code> event.</p>
<p>Window height: <span id="height"></span></p>
<p>Window width: <span id="width"></span></p>
On my mobile responsive website Registration page, The registration form is moved from its original position on PC to a different position on Phone/Mobile deviece.. The re positioned form does not work (I cant input in value or text)
(Works fine on iphone 5 and other phones excluding chrome on Iphone 6)
<script type="text/javascript">
$(document).ready(function(){
if ($(window).width() <= 767){
$('#side-content').insertAfter('#mobilePos').css;
} else {
$('#side-content').insertAfter('#desktopPos').css;
}
});
$(window).resize(function(){
if ($(window).width() <= 767){
$('#side-content').insertAfter('#mobilePos').css;
} else {
$('#side-content').insertAfter('#desktopPos').css;
}
});
</script>
I think you just want to move the form. So just put it with this code.
$('#side-content').insertAfter('#mobilePos');
Css function only to style element with jquery.
CMIIW.
Use this code:
$(document).ready(function(){
$(window).load(function(){
if ($(window).width() <= 767){
$('#side-content').insertAfter('#mobilePos');
} else {
$('#side-content').insertAfter('#desktopPos');
}
});
$(window).resize(function(){
if ($(window).width() <= 767){
$('#side-content').insertAfter('#mobilePos');
} else {
$('#side-content').insertAfter('#desktopPos');
}
});
});
Use Css Media Query
#media (min-width: 768px) and (max-width: 1100px) {
User Css Code For min - desktop Screen resolution
}
#media (min-width: 480px) and (max-width: 767px) {
User Css Code For Tab Screen resolution
}
Same for mobile screen and you want any ohter screen like smart tv & more ..
I'm doing responsivity on my website in JS. How can I change this (normal resolution):
$(".card1_content_arrow").click(function () {
$(".card1_content").css('margin-left', '-45%');
});
Into this, when media width is <860px (in css #media all and (max-width: 860px)):
$(".card1_content_arrow").click(function () {
$(".card1_content").css('margin-left', '-100%');
});
When I click on .card1_content_arrow on big resolution, then margin-left will be changed to -45%', but if I will change the resolution to 860px (and less) I want, that when I click on same .card1_content_arrow, then margin-left will be changed to -100%.
Thanks :)
You can detect the screen resolution as described on this question.
$(".card1_content_arrow").click(function () {
var margin = "-45%";
if (window.screen.availWidth < 860) {
margin = "-100%";
}
$(".card1_content").css('margin-left', margin);
});
I would suggest using media queries instead by specifying another class to control the margin.
.yourClass {
margin-left: -45%;
}
#media (max-width: 859px) {
.yourClass {
margin-left: -100%;
}
}
You can just add the class into your element and let the browser do the checking.
$(".card1_content_arrow").click(function () {
$(".card1_content").addClass('yourClass');
});
For a responsive template, I have a media query in my CSS:
#media screen and (max-width: 960px) {
body{
/* something */
background: red;
}
}
And, I made a jQuery function on resize to log the width:
$(window).resize( function() {
console.log( $(window).width() );
console.log( $(document).width() ); /* same result */
/* something for my js navigation */
}
And there a difference with CSS detection and JS result, I have this meta:
<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/>
I suppose it's due to the scrollbar (15 px). How can I do this better?
You're correct about the scroll bar, it's because the CSS is using the device width, but the JS is using the document width.
What you need to do is measure the viewport width in your JS code instead of using the jQuery width function.
This code is from http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
I found following code on http://www.w3schools.com/js/js_window.asp:
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
Practically its working the same way as the answer in #Michael Bird's answer, but it's more easy to read.
Edit: I was looking for a method to give exactly the same width as it is used for css media queries. But the suggested one does not work perfect on Safari with scrollbars, sorry. I ended up using modernizr.js in one central function and in the rest of the code I just check if display type is mobile, tablet or desktop. As I am not interested in the width, this works fine for me:
getDisplayType = function () {
if (Modernizr.mq('(min-width: 768px)')){
return 'desktop';
}
else if (Modernizr.mq('(min-width: 480px)')){
return 'tablet'
}
return 'mobile';
};
window.innerWidth is what you need.
if (window.innerWidth < 768) works for 768 break point in CSS
Workaround that always works and is synced with CSS media queries.
Add a div to body
<body>
...
<div class='check-media'></div>
...
</body>
Add style and change them by entering into specific media query
.check-media{
display:none;
width:0;
}
#media screen and (max-width: 768px) {
.check-media{
width:768px;
}
...
}
Then in JS check style that you are changing by entering into media query
if($('.check-media').width() == 768){
console.log('You are in (max-width: 768px)');
}else{
console.log('You are out of (max-width: 768px)');
}
So generally you can check any style that is being changed by entering into specific media query.
My experience was that the media query width tracks document.body.clientWidth. Because of a vertical scroll bar coming and going, checking document, window, or viewport().width could cause my Javascript to run late--after the media query rule change, depending on the height of the window.
Checking document.body.clientWidth allowed my script code to execute consistently at the same time the media query rule took effect.
#media (min-width:873px) {
//some rules
}
...
if ( document.body.clientWidth >= 873) {
// some code
}
The Andy Langton code put me onto this--thanks!
Hi i use this little trick to get JS and CSS work together easily on responsive pages :
Test the visibility of an element displayed or not on CSS #media size condition.
Using bootstrap CSS i test visibility of a hidden-xs class element
var msg = "a message for U";
/* At window load check initial size */
if ( $('#test-xsmall').is(':hidden') ) {
/* This is a CSS Xsmall situation ! */
msg = "#media CSS < 768px. JS width = " + $(window).width() + " red ! ";
$('.redthing-on-xsmall').addClass('redthing').html(msg);
} else {
/* > 768px according to CSS */
msg = "#media CSS > 767px. JS width = " + $(window).width() + " not red ! ";
$('.redthing-on-xsmall').removeClass('redthing').html(msg);
}
/* And again when window resize */
$(window).on('resize', function() {
if ($('#test-xsmall').is(':hidden')) {
msg = "#media CSS < 768px. JS width = " + $(window).width() + " red ! ";
$('.redthing-on-xsmall').addClass('redthing').html(msg);
} else {
msg = "#media CSS > 767px. JS width = " + $(window).width() + " not red ! ";
$('.redthing-on-xsmall').removeClass('redthing').html(msg);
}
});
#media (min-width: 768px) {
.hidden-xs {
display: block !important;
}
}
#media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
.redthing-on-xsmall {
/* need a scrollbar to show window width diff between JS and css */
min-height: 1500px;
}
.redthing {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- the CSS managed Element that is tested by JS -->
<!-- class hidden-xs hides on xsmall screens (bootstrap) -->
<span id="test-xsmall" class="hidden-xs">THIS ELEMENT IS MANAGED BY CSS HIDDEN on #media lower than 767px</span>
<!-- the responsive element managed by Jquery -->
<div class="redthing-on-xsmall">THIS ELEMENT IS MANAGED BY JQUERY RED on #media max width 767px </div>
Css media query is equal to window.innerWidth. Css Media Queries calculate the scrollbar as well.
The simple and reliable way of doing this is to use Media Queries.
To demonstrate, I want to check if the screen width is greater than or equal to 992px (Bootstrap's large device):
function isLargeDevice() {
if (window.matchMedia("(min-width: 992px)").matches) {
return true;
}
return false;
}
If you are using Modernizer then it's a bit easier, here I want to check if the screen is smaller than Bootstrap's large screen (992px)
function isSmallerThanLargeScreen() {
if (Modernizr.mq('(max-width: 991px)')) {
return true;
}
return false;
}