I have a slide where I want to show photos specific for each device. iPhone, iPad, Desktop.
I would like to use something like this to filter each out. Obviously display:none isn't going to work since it's JavaScript, but this is just a general idea of how it should work:
<style type="text/css">
#media only screen and (min-width: 800px) {
#slide-desktop{display:block;}
#slide-ipad{display:none;}
#slide-iphone{display:none;}
}
#media only screen and (min-width: 481px) and (max-width: 799px) {
#slide-desktop{display:none;}
#slide-ipad{display:block;}
#slide-iphone{display:none;}
}
#media only screen and (max-width: 480px) {
#slide-desktop{display:none;}
#slide-ipad{display:none;}
#slide-iphone{display:block;}
}
</style>
<div id="slide-desktop">
<script>
$.vegas('slideshow', {
delay:6000,
backgrounds:[
{ src:'images/slide/desktop.jpg', fade:600 },
]
})('overlay');
</script>
</div>
<div id="slide-ipad">
<script>
$.vegas('slideshow', {
delay:6000,
backgrounds:[
{ src:'images/slide/ipad.jpg', fade:600 },
]
})('overlay');
</script>
</div>
<div id="slide-iphone">
<script>
$.vegas('slideshow', {
delay:6000,
backgrounds:[
{ src:'images/slide/iphone.jpg', fade:600 },
]
})('overlay');
</script>
</div>
If you want to run different scripts based on a media query you can use enquire.js
enquire.js is a lightweight, pure JavaScript library for responding to
CSS media queries.
So, you no need to put anything in a style at all.
If you want to check by the device width you can use simple javascript like this
if(window.innerWidth >= 800)
{
alert('desktop?');
}
else if(window.innerWidth >= 481 && window.innerWidth < 799)
{
alert('ipad?');
}
else if(window.innerWidth < 480)
{
alert('iphone?');
}
But I would not go for this technique.
Check out
What is the best way to detect a mobile device in jQuery?
Related
I have a website with a responsive background image for a div.
I choose which size of the image to take through #media queries.
The div in question in the code has the id banner-div.
HTML:
<div id="header-div">
<div id="background-clipped-div">
<div id="banner-div">
<div id="scroll-down-div" onclick="scrollToMainContent()">
<i class="fas fa-angle-down"></i>
</div>
</div>
</div>
</div>
CSS:
#media only screen and (max-width: 480px) {
#banner-div {
background-image: url(images/background-1-small.png);
}
}
#media only screen and (max-width: 768px) {
#banner-div {
background-image: url(images/background-1-medium.png);
}
}
#media only screen {
#banner-div {
background-image: url(images/background-1-big.png);
}
}
Question:
If I now want to swap/replace the image, for example by having an ever changing background image between multiple different images, how would I do that while respecting the correct image for a given resolution?
Let us say I have the following images in the images folder:
background-1-small.png
background-1-medium.png
background-1-big.png
background-2-small.png
background-2-medium.png
background-2-big.png
I know how to replace the path to the current image in JavaScript, but I
did not find a way to replace all #media queries.
You could use matchMedia for that.
Here's how I would do it:
- Each image container has it's responsive variations set as data-attributes so that we can access them in javascript for each breakpoint:
var $elements = $(".element");
var mqls = [ // list of window.matchMedia() queries
window.matchMedia("(min-width: 860px)"),
window.matchMedia("(max-width: 600px)"),
window.matchMedia("(max-width: 500px)")
]
for (var i=0; i<mqls.length; i++){ // loop through queries
mediaqueryresponse(mqls[i]) // call handler function explicitly at run time
mqls[i].addListener(mediaqueryresponse) // call handler function whenever the media query is triggered
}
function mediaqueryresponse(mql){
// check which breakpoint we're in and send the parameter "big", "medium" or "small" to the setBakground function
if (mqls[0].matches){
setBackground("big")
}
if (mqls[1].matches){
setBackground("medium")
}
if (mqls[2].matches){
setBackground("small")
}
}
function setBackground (size) {
// Loop through each element that needs to have the responsive background images and change the background image based on the current breakpoint
$elements.each(function() {
$(this).css({
"background-image": "url("+$(this).attr("data-"+size)+")"
})
})
}
.element {
width: 400px;
height: 400px;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element" data-big="//placehold.it/400x400?text=Big1" data-medium="//placehold.it/300x300?text=Medium1" data-small="//placehold.it/200x200?text=Small1"></div>
<div class="element" data-big="//placehold.it/402x402?text=Big2" data-medium="//placehold.it/302x302?text=Medium2" data-small="//placehold.it/202x202?text=Small2"></div>
EDIT: Sorry for the mix between vanilla js and jquery. I copied the first part from a website and then added the last parts with jquery.
EDIT2: Link to JS fiddle to test the responsiveness of it:
https://jsfiddle.net/q30u5o7j/
I'm hidding the sidebar with a button.
But when the view get's under 991px I want to hide the sidebar to have more space for my site.
How can i do this? If I put the code inside the if it will always be toggling. If the size is bigger than 991px it should show the sidebar again
$('#sidebar-btn').click(function () {
$('#sidebar').toggle('visible');
$('.content-wrapper, .full-page-wrapper').toggleClass('content-wrapper full-page-wrapper');
});
//toggle sidebar when width is too small
var browserWidth = $(window).width();
if(browserWidth <= 991 ) {
}
You can use plain CSS for that (EDIT: if you want to toogle classes you need JS).
if(!($(window).width() <= 911)) {
$('.content-wrapper').toggleClass('content-wrapper');
$('.full-page-wrapper').toggleClass('full-page-wrapper');
}
#media screen and (max-width: 911px) {
#sidebar {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<section id="sidebar" class="content-wrapper full-page-wrapper">AAAAAAAAAA</section>
You could try with css as follow :
#media (min-width:991px) {
//Do your css things
}
Else you can catch resize event
Use jQuery to get the width of the window.
if ($(window).width() < 960) { alert('Less than 960'); } else { alert('More than 960'); }
I want to a div to be hidden it the screen size is bigger than 700px and shown only if the screen size is less than 700 px;
Here is the code i'm trying to implement with using jQuery 3
jQuery(document).ready(function() {
if ((screen.width>701)) {
$(".mobile-section").css('display', 'none'); $(".yourClass").hide();
}elseif ((screen.width<=699)) {
$(".mobile-section").css('display', 'block');
}
});
It's not working --- am I doing anything wrong ??
Makes no sense really to use javscript/JQuery here if that is all you want try with CSS media queries like
.mobile-section {
display: none;
background-color: orange;
}
#media screen and (max-width: 700px) {
.mobile-section {
display: block;
}
}
<div class="mobile-section">
hello mobile section
</div>
Check out this fildde and resize the viewable area
width() is a function supported by jQuery providing the width property of e.g. document or window elements. In your case it refers to the document.
http://api.jquery.com/width/
An explanation of the difference between jQuery's .width() and screen.width would be good - screen.width is a native DOM property and it returns the width of the whole screen, e.g. if you have a monitor with 1920x1200 resolution, screen.width will return 1920.
$(document).ready(function() {
if (($(this).width() > 701)) {
$(".mobile-section").css('display', 'none');
$(".yourClass").hide();
}
else {
$(".mobile-section").css('display', 'block');
}
});
Use media queries, no JavaScript required.
#media only screen and (min-width: 700px) {
#hideMe{
display:none;
}
}
<div id="hideMe">This should only be displayed on smaller than 700px screens</div>
You can read about media queries here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Try this,
// Returns width of browser viewport
$( window ).width();
// Returns width of HTML document
$( document ).width();
$(document).ready(function() {
if ($(window).width() > 701) {
$(".mobile-section").css('display', 'none');
} else if ($(window).width() <= 700) {
$(".mobile-section").css('display', 'block');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width : 100px; height:100px;border:solid 1px red;" class="mobile-section">
</div>
Hope this helps.
I'm building a web page to learn about responsive web development and have run into a problem with my links. When the page width is small I would like to add hyperlinks to my images however when it becomes large I would like to take them off the images and put them on another element. Is there a way to do this with HTML, CSS and/or JavaScript?
For more context please take a look at this slideshow where I have added a breakpoint at screen width 450px. When the screen is wider, the hyperlink is on the "Read More" button, however I would like it to be on the image when the "Read More" button disappears.
If you wanted to use jQuery, you could do something like this:
Demo
JS:
$(document).ready(function() {
moveLink();
});
$(window).resize(function() {
moveLink();
});
function moveLink() {
if ($(window).width() >= 450) {
$("#myImage").unwrap();
$("#myText").wrap('<a href="https://www.stackoverflow.com">').show();
} else {
$("#myText").unwrap().hide();
$("#myImage").wrap('<a id="myLink" href="https://www.stackoverflow.com"></a>');
}
}
HTML:
<img id="myImage" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
<br>
<span id="myText">Read More</span>
Example using media queries (minimize the window to be less than 600px, you will see the link, otherwise you will see the image):
https://jsfiddle.net/89ptv9mt/
#media (max-width: 600px) {
.logo {
display : none;
}
.altText {
display : block;
}
}
#media (min-width: 601px) {
.logo{
display : block;
}
.altText {
display : none;
}
}
<img class="logo" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="MDN">
MDN
I try to load a different TPL according to the window width (or I can also set a variable).
So, I suppose I can use a code like that or get at least 2 different kind of window:
Basically, this is the result I would like to have:
if($(window).width() < 960){
include file="small.tpl"
};
else{
include file="big.tpl"
};
or something like that:
if ($(window).width() < 960)
{assign var="numcolumns" value="1"};
else
{assign var="numcolumns" value="2"};
Any easy suggestion?
Sorry, but it won't work this way. You cannot load PHP (and Smarty is de facto PHP) using JavaScript conditions.
The best you can do, is to include both files and depending on detecting window with in JavaScript to hide unwanted block.
However it's not the best technique. I would recommend you using Responsive Web Design technique to display site no matter of client window width.
EDIT
Working code (without using jQuery)
<div id="big">
{include file="big.tpl"}
</div>
<div id="small">
{include file="small.tpl"}
</div>
<script type="text/javascript">
if (window.innerWidth < 960)
document.getElementById('big').style.display = 'none';
else
document.getElementById('small').style.display = 'none';
</script>
No need to use Javascript
<div id="big">
{include file="big.tpl"}
</div>
<div id="small">
{include file="small.tpl"}
</div>
Just use CSS
#big {
display: block;
}
#small {
display: none;
}
#media screen and (max-width: 960px) {
#big {
display: none;
}
#small {
display: block;
}
}