So, I checked out Do something if screen width is less than 960 px to see how to execute something if the screen size was less than 960 px. However, it did not work for me. Their answer was this:
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
I tried it and it did work. I also already had an alert that told me the screen size;
var size = $(window).width();
alert(size);
and this worked, but this did not:
if (size < 1200) {
$("#mobileVersionDetected").css("display", "block");
}
else {
$("#mobileVersionDetected").css("display", "none");
}
Any ideas?
If I add $(window).width() into the actual if function rather than using a variable it works.
Try this:
if (size < 1200) {
$('#mobileVersionDetected').attr("style", "display: block");
}
else {
$('#mobileVersionDetected').attr("style", "display: none");
}
To echo #charlietfl, this is exactly what CSS Media Queries are for. They eliminate the need for script and are more efficient.
/* Baseline styles applied initially: */
body { background-color: #b200ff; /* purple */ }
p {
border:1px solid black;
background: white;
padding:5px;
text-align:center;
font:bold 1.2em Arial;
}
/*
When writing multiple media queries that don't explicitly
specify a range, the order of the queries matter!!!
For example:
With a viewport of 400px wide, both of the the following
two queries would apply:
#media screen and (max-width:400px) {...}
#media screen and (max-width:600px) {...}
So, the last one would be used.
*/
/*
Note that this query uses "min-width",
not "max-width" so that it handles
all viewports bigger than 1200
*/
#media screen and (min-width: 1201px) {
body { background-color: orange; }
p:after { content: "over 1200px"; }
}
/*
Here, we're using "max-width" to handle
viewports up to the specified sizes:
*/
#media screen and (max-width: 1200px) {
body { background-color: yellow; }
p:after { content: "961px to 1200px"; }
}
#media screen and (max-width: 960px) {
body { background-color: blue; }
p:after { content: "769px to 960px"; }
}
#media screen and (max-width: 768px) {
body { background-color: grey; }
p:after { content: "551px to 768px"; }
}
#media screen and (max-width: 550px) {
body { background-color: green; }
p:after { content: "321px to 550px"; }
}
#media screen and (max-width:320px) {
body { background-color: red; }
p:after { content: "up to 320px wide"; }
}
<p></p>
Related
My Webpage functions to change SVG size when the webpage is in either Landscape or Portrait
if webpage screen is resized then the appropriate SVG is loaded either:
car1-landscape.svg
car1-portrait.svg
on iPhone using safari or chrome browser if the page is scrolled up
the webpage will be reloaded/restart
the webpage works fine on Desktop/Laptop only but restarting occurs on mobile devices.
restarting occurs in iPhone safari or chrome browsers
I use the line "window.location.href = window.location.href;" to restart page
so it can correctly load the appropriate landscape or portrait SVG
my file
<script>
if(window.innerHeight > window.innerWidth)
{
// Portrait
//alert ("Resized..P");
document.write( '<object id=\"svg-objectp\" data=\"car1-portrait.svg\" type=\"image/svg+xml\"></object>' );
document.getElementById("svg-objectp").style.width = "100%";
document.getElementById("svg-objectp").style.height = "auto";
}else{
// Landscape
//alert ("Resized..L");
document.write( '<object id=\"svg-objectl\" data=\"car1-landscape.svg\" type=\"image/svg+xml\"></object>' );
document.getElementById("svg-objectl").style.width = "100%";
document.getElementById("svg-objectl").style.height = "auto";
}
// Listen for resize changes
window.addEventListener("resize", function() {
// Get screen size (inner/outerWidth, inner/outerHeight)
//alert ("Resized..");
window.location.href = window.location.href;
}, false);
</script>
webpage:
http://www.qurantour.com/car/index.html
zip:
http://www.qurantour.com/car/car.zip
i have tried the following code, but it still seems to reload/flicker page on
mobile device
<style>
.svg-container {
width: 100%;
height: auto;
}
#media only screen and (orientation: landscape) {
.svg-container {
background: url('car1-landscape.svg') // set correct path here
}
}
#media only screen and (orientation: portrait) {
.svg-container {
background: url('car1-portrait.svg') // set correct path here
}
}
</style>
<div class="svg-container"></div>
i have tried above, but page still seems to reload when i scroll up,
anything else i can try please
thankyou
<style>
.svg-container-landscape,
.svg-container-portrait {
width: 100%;
height: auto;
}
.svg-container-landscape {
background: url(car1-landscape.svg);
background-repeat: no-repeat;
}
.svg-container-portrait {
background: url(car1-portrait.svg);
background-repeat: no-repeat;
}
#media only screen and (orientation: landscape) {
.svg-container-portrait {
opacity:0;
width: 100%;
height: auto;
}
}
#media only screen and (orientation: portrait) {
.svg-container-landscape {
opacity:0;
width: 100%;
height: auto;
}
}
</style>
<html>
<div class="svg-container-landscape"></div>
<div class="svg-container-portrait"></div>
</html>
To change the svg dynamically, try using css like below instead of reloading the content.
in HTML add the following container for the svg
<div class="svg-container-landscape"></div>
<div class="svg-container-portrait"></div>
in CSS add the svg as background
.svg-container-landscape,
.svg-container-portrait {
width: 100%;
height: auto;
opacity:1;
}
.svg-container-landscape {
background: url('car1-landscape.svg') // set correct path here
background-repeat: no-repeat; //if needed
}
.svg-container-portrait {
background: url('car1-portrait.svg') // set correct path here
background-repeat: no-repeat; //if needed
}
#media only screen and (orientation: landscape) {
.svg-container-portrait {
opacity:0;
}
}
#media only screen and (orientation: portrait) {
.svg-container-landscape {
opacity:0;
}
}
UPDATE:
Keeping both the svg in dom to prevent flicker on rotation, which happens when the new image is loaded and used to replace the other image. Now with opacity, both images would be loaded, but only one would be showed. You could test with display:none and display:block too
Background: I am using a snippet of JQuery to assign an event to an element based on its ID. That event slides a menu from the left side of the screen.
Question: When the screen size changes to < 710px I am going to hide the original element and show a new element (which is just a different icon). But I want that new element to trigger the same event.
Should I just assign the event to both elements one after another or can I combine that into one Event?
Below is an example of my HTML JS and CSS
PLEASE NOTE THE TRIGGER WILL NOT WORK UNLESS THE TEST WINDOW IS ABOVE 711PX
window.onload = function(){
document.getElementById('megga-nav-toggle').addEventListener('click', function () {
var documentBody = $('#megga-global-menu');
documentBody.toggleClass('is-active');
if (documentBody.hasClass('hide-megga')) {
documentBody.removeClass('hide-megga');
return;
}
documentBody.addClass('hide-megga');
});
document.getElementById("megga-global-menu").addEventListener("mouseleave", menuHide);
};
function menuHide() {
document.getElementById("megga-global-menu").classList.add('hide-megga');
}
#megga-global-menu {
background: red ;
position: fixed;
top: 50px;
bottom: 0;
left:0px;
width: 200px;
z-index: 1000000;
transition: ease all .6s;
}
#megga-global-menu.hide-megga {
left: -200px;
transition: ease all .6s;
}
#megga-nav-toggle {
display: inline-block;
z-index:999998;
font-size: 30px;
color: #000;
cursor: pointer;
}
#media screen and (min-width: 710px) {
#megga-navmobile-toggle {
display:none;
}
}
#media screen and (max-width: 710px) {
#megga-nav-toggle {
display:none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="megga-nav-toggle">FULL SCREEN</span><Bn/><Br/>
<span id="megga-navmobile-toggle">MOBILE SCREEN</span>
<div id="megga-global-menu" class="">
My slide out menu goes here!
</div>
I'm not sure I understand your problem, but if you want just show different icon based on screen size, why not put both of them in the same element and display the wanted icon with #media?
#media screen and (min-width: 710px) {
#megga-navmobile-toggle-icon { display: none; }
}
#media screen and (max-width: 710px) {
#megga-nav-toggle-icon { display: none; }
}
And your html should be:
<div id="megga-nav-toggle">
<span id="megga-nav-toggle-icon">FULL SCREEN</span><Bn/><Br/>
<span id="megga-navmobile-toggle-icon">MOBILE SCREEN</span>
</div>
Link to site
I'm trying to format the menu on the above site, when it's in sticky mode (i.e. scrolled down), because at certain widths the Request a Quote button is obscured by the screen. I'm using Javascript to action the change only when the screen is scrolled down, and an additional CSS class to move the menu. Unfortunately it's not working - while I can move the menu using just CSS applied directly to the existing class, trying to tie this in with JS to make it scroll specific doesn't any effect.
Is anyone able to tell me where I'm going wrong please?
Thank you in advance.
Javascript
<script type="text/javascript">
$ = jQuery;
$(function() {
//caches a jQuery object containing the header element
var header = $(".header-widget");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 20) {
$(".header-widget").addClass("header-widget-shortheader");
$(".second-header-widget").addClass("second-header-widget-shortheader");
$(".navbar .nav").addClass(".stickyheader-midscreen-cta-fix");
} else {
$(".header-widget").removeClass("header-widget-shortheader");
$(".second-header-widget").removeClass(".second-header-widget-shortheader");
$(".navbar .nav").removeClass(".stickyheader-midscreen-cta-fix");
}
});
});
</script>
CSS
/* -----Moves menu to avoid cutting off CTA button with sticky header on mid-sized screen (toggle with JS in 'Header & Footer')----- */
#media screen and (min-width: 980px) and (max-width: 1189px) {
.stickyheader-midscreen-cta-fix {
margin: 40px 22% 0 0;
float: right;
}
}
Thanks to Marian07 for the support. This is where I ended up:
/* -----Fixes menu CTA button being cut off by mid size screens----- */
#media screen and (min-width: 980px) and (max-width:1084px) {
.sticky-enabled .navbar-wrapper {
margin-left: 0;
}
.sticky-enabled .navbar-wrapper a {
padding-right: 9px!important;
padding-left: 8px!important;
font-size: 95% !important;
}
}
#media screen and (min-width: 1085px) and (max-width:1200px) {
.sticky-enabled .navbar-wrapper {
margin-left: 0;
}
.sticky-enabled .navbar-wrapper a {
padding-right: 3px!important;
padding-left: 25px!important;
}
}
The problem is at line 6:
$(window).scroll(function() {
(did not actually call the function on scroll)
Solution:
$(window).on('scroll', function() {
For your design problem, you can decrease the width of the headers on certain screen sizes by adding the below code at the end of file: /wp-content/themes/customizr-child/style.css
#media screen
and (max-width:1200px)
and (min-width: 980px) {
.sticky-enabled .navbar-wrapper {
margin-left: 0;
}
.sticky-enabled .navbar-wrapper a {
padding-right: 7px!important;
padding-left: 7px!important;
}
}
remove . use only class name
$(".navbar .nav").addClass(".stickyheader-midscreen-cta-fix");
replace
$(".navbar .nav").addClass("stickyheader-midscreen-cta-fix");
$(".navbar .nav").removeClass(".stickyheader-midscreen-cta-fix");
replace
$(".navbar .nav").removeClass("stickyheader-midscreen-cta-fix");
I have this HTML:
<li><i class="fa fa-iconname" style="vertical-align: middle;"></i>Link Name</li>
I am then using this media query in my CSS:
#media (max-width: 1000px) {
...
}
how can i change my tag to:
<i class="fa fa-iconname lg-2x" style="vertical-align: middle;"></i>
when the media query takes effect?
You can use pure css to achieve this by just replicating the list-item and toggle with media query like this:
HTML:
<li class="bigScreen"><i class="fa fa-iconname"></i>Link Name</li>
<li class="smallScreen"><i class="fa fa-iconname lg-2x"></i>Link Name</li>
CSS:
#media (max-width: 1000px) {
.bigScreen {
display:none;
}
.smallScreen {
display:block;
}
}
#media (min-width: 1001px) {
.bigScreen {
display:block;
}
.smallScreen {
display:none;
}
}
CSS is just a styling language, it cannot actually edit the HTML.
If you want to actually make changes to the HTML, use javascript:
jQuery:
var $homeIcon = $('.fa-iconname');
$(window).resize(function() {
if (window.innerWidth <= 1000) $homeIcon.addClass('lg-2x');
else $homeIcon.removeClass('lg-2x');
});
JSFiddle Demo
Vanilla JS:
var homeIcon = document.querySelector('.fa-home');
window.onResize = function() {
if (window.innerWidth <= 1000) homeIcon.classList.add('lg-2x');
else homeIcon.classList.remove('lg-2x');
};
JSFiddle Demo
You can not do that with css, but you can with JavaScript or jQuery.
fa-2x is essentialy: font-size: 2em; . So, you can do this:
#media (max-width: 1000px) {
.fa-iconname {
font-size: 2em;
}
}
Toggle class lg-2x on element li when the window size is less than 1000px .
$( window ).resize(function() {
if($(window).width() <=1000) {
$('i').toggleClass(function() {
if ( $( this ).is( ".lg-2x" ) ) {
console.log("class already there good to go");
} else {
$( this ).addClass("lg-2x");
}
}
}else{
$('i').removeClass("lg-2x");
}
});
You can create an equivalent class for bigger screen and leave it empty:
#media (min-width: 1000px) {
.lg-2x {
/* empty class */
}
}
and assign it to the html element from the beginning.
Use a class identified as a class whose name indicates it is affected by media queries: media-lg-2x{}
.media-lg-2x{}
#media (max-width: 1000px) {
.media-lg-2x {
font-size: 1em;
}
}
#media (min-width: 1000px) {
.media-lg-2x {
font-size: 2em;
}
}
I prefer to keep content confined to a single instance, and deal with display issues in code.
Well i do have the below query which is working fine without any problem. it is changing the background-image when i open it in explorer. and when i change the resolution it does not change the background-image automatically i need to refresh the page to change the background image.
i want to change it immediately when i change the screen resolution.
Please help....
<script type="text/javascript">
document.onload=pickIt()
function pickIt()
{
var w=screen.width
var h=screen.height
if(w==1440&&h==900)
{
//alert("1440x900");
document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1440x900.png')";
}
else if(w==1280&&h==800)
{
//alert("1280x800")
document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
} else if(w==1280&&h==768)
{
//alert("1280x768")
document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
} else if(w==1280&&h==720)
{
//alert("1280x720")
document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
}
}
</script>
You can use media queries for this. compatibility is still not the best, but it is growing: http://caniuse.com/#feat=css-mediaqueries
#media (max-width: 1200px) and (max-height:600px) {
html {
background: url(http://lorempixel.com/1200/600);
}
}
#media (max-width: 900px) and (max-height:500px) {
html {
background: url(http://lorempixel.com/900/500);
}
}
#media (max-width: 700px) and (max-height:500px) {
html {
background: url(http://lorempixel.com/700/500);
}
}
#media (max-width: 500px) and (max-height:300px) {
html {
background: url(http://lorempixel.com/500/300);
}
}
Demo: http://jsfiddle.net/32X57/
Why not simply document.getElementsByTagName('body')[0].onresize=pickIt ?