I have a nav bar that I want to call either one of 2 options when clicked according to screen size.
I have tried various options including media queries and javascript but I think my construction of the queries is letting me down.
I need to do this:
if screen size <960 then
<li>Page</li>
else
<li>Page</li>
end```
is there a way to do this?
thank you
As the other commenter said, you can use media queries for this. One very easy to understand solution would look like this:
Solution A: Media Queries
<html>
<style>
/* We are disabling linkA from being displayed and allowing linkB to be displayed normally */
#linkA {
display: none;
}
#linkB {
display: inherit;
}
/* if screen width <= 960px, we will display linkA and hide linkB */
#media screen and (max-width: 960px) {
#linkA {
display: inherit;
}
#linkB {
display: none;
}
}
</style>
<body>
<ul>
<!-- Notice the ID tags -->
<li id="linkA">Page</li>
<li id="linkB">Page</li>
</ul>
</body>
</html>
The media query redefines CSS attributes if the query matches. In your case if the screen width is less or equal 960px.
Solution B: Javascript
Another solution for your problem would be to call a javascript function when the link is clicked like this:
<span onclick="buildLink()">Page</span>
Note: I did replace a with span since if there is no href there is no reason to use a
In the javascript you could dynamically change num_months by dividing the width with by the amount of pixels you need to display a month:
function buildLink() {
const link = "page/index.php?lang=en&id_item=2&num_months=";
// casting to integer is very important, since we get decimal values otherwise
const num_months = parseInt(window.innerWidth / 480)
// window.location.href basically sets the address bar of the browser
window.location.href = link + num_months
}
I hope I have given you a clear answer on your question and some room to think about other possible solutions.
Also: You seem to be new to web development so welcome onboard and enjoy the bumpy ride :)
Related
I know this question sounds crazy, but I'm going to explain it.
I have a responsive website and all works OK, but when the width is too low (width < 500px) the website (which is still responsive) start to rearrange in such a way that I prefer to NOT being responsive anymore.
I'd like to know if there is a script or anything that can solve this. Please any help will be useful :)
set a minimum width on the html / body
html, body {
min-width: 500px;
}
Making elements responsive is usually done by setting width to a percentage of parent elements. The above would be an easy fix, but it's possible there will be elements you need to style using media queries.
You can place your css within media queries so that it only applies under particular conditions. E.g.
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
I'm trying to remove two elements from the page of my web app (or the one I'm developing anyone). This is for responsiveness reasons, the elements look great on mobile devices but not very good on desktops. So, I'd like to target the pages by url, then get the elements and hide them.
I'm using node.js but I'm a bit of a noob. Is this something I could achieve with React or Vue or something like that. I tried with jQuery but with no success.
This is the html:
<body>
<div>
<section id="dot1">
<h6>Text Here</h6>
</section>
<section id="dot2">
<h6>Text Here</h6>
</section>
<section id="studiesWp"><img src="/images/ms.png">
<h1>Text Here</h1>
<p>Text Here</p><a href="url/">Text Here</p>
</section>
</div>
</body>
So, I want to hide the two elements: #dot1 & #dot2. The rest of it can stay.
Here's a little jQuery function I tried:
$(window).load(function() {
// Check media queries
if($(window).width() >= 769) {
// Get pathname of page
var page = window.location.pathname;
// If pathname matches any of these
if(page = 'profilePage','projectsPage','contact'){
// Remove two elements
$('#dot1').css('display','none');
$('#dot2').css('display','none');
}
else{
$('#dot1').css('display','block');
$('#dot2').css('display','block');
}
}
});
This is best to do with CSS3, which has media queries to apply styling only if the viewport it's being seen has certain properties.
Desktop-only css
So, if we want to create an element that's only visible on phones, and our css was desktop only, we'd probably create something like this:
/* This example will not work correctly, look below for the full code! */
.phone-only {
display: none;
}
Media Query
To make that style only apply to larger screens, we'll use a #media query. We need to apply styles to only smartphones, or devices with a screen width of less then 769px. In CSS, we write that as min-width: 769px, and then wrap it with a media query like this: #media (min-width: 769px).
When we wrap the style we made earlier inside of our #media query, we get a css rule that hides an element on phones.
#media (min-width: 769px) {
.phone-only {
display: none;
}
}
and use class="phone-only".
I need javascript #help.
I have an object(#objID) with three different data state (A B & C) (https://www.dropbox.com/s/zn19k87eu2hp8ow/data-states.jpg?dl=0)... Each state contain some css to describe the look of it..
I want to use javascript to detect media queries change and add the appropriate data state to #objID.
(ie.
if screen is under 320px then add [data-state="A"] to #objID
or if screen is between 320px and 728px then switch to [data-state="B"]
or if screen is above 1024px then switch to [data-state="C"]
)
similar to this concept..http://zerosixthree.se/detecting-media-queries-with-javascript/
but im not sure how to implement it.
Please help. Thanks
To simplify you can do something like this:
window.matchMedia("(max-width: 320px)").addListener(function() {
// Change the value of `data-state`
});
window.matchMedia("(min-width: 321px) and (max-width: 728px)").addListener(function() {
// Change the value of `data-state`
});
However you need make sure the browser supports window.matchMedia and also handles maintaining state etc to know when you've crossed from one breakpoint and into the other and identify which is active as both will trigger as you exit and enter breakpoints.
As for doing it on window.onresize this is not a very performant way to do this and you must throttle/debounce if you do it that way. Using matchMedia will only trigger when the breakpoint changes rather than continuously on resize. It also give you the benefit of keeping your CSS media breakpoints in sync with your JS.
This is a Polyfill for browsers which do not support it as mentioned and this guide might also help you.
However:
I have an object(#objID) with three different data state (A B & C).
Each state contain some css to describe the look of it..
Sounds as though you want to change the CSS styles applied to an element based on the data-state attribute, which you are going to change per breakpoint?
Correct me if I am wrong but why can't you just use media queries to change the CSS that is applied to it instead?
#media only screen and (max-width: 320px) {
/* State A */
.css-selector {
color: red;
}
}
#media only screen and (min-width: 321px) and (max-width: 728px) {
/* State B */
.css-selector {
color: green;
}
}
#media only screen and (min-width: 728px) {
/* State C */
.css-selector {
color: blue;
}
}
You need the onresize event
window.onresize = function(event) {
//...
};
The screen has two dimensions, width and height, and you describe a one-dimensional comparison, which does not give us enough information about what you want to achieve. Anyway, you can use window.innerWidth and window.innerHeight inside your onresize event.
I need to know how the CSS media query works.
I mean, if I use #media(min-width: 768px), does this function called every time the window is resized ?
Because I am wondering if I can use a Javascript $(window).bind('resize orientationchange') or if it is more resource intensive.
It is for add or remove a class to a div, an exemple :
http://jsfiddle.net/xbh28o08/
My goal is to enter in the HTML a data attribut which determine when the navbar has to collapse (data-breakpoint"768" for example). And I would get this breakpoint for make a responsive navbar automatically, without change any CSS. My idea was to do it with Javascript but it seems really not a good idea according to your answers
var widthScreen = $(window).width();
if (widthScreen > 768)
$('nav').addClass('large');
else
$('nav').addClass('small');
$(window).bind('resize orientationchange', function() {
widthScreen = $(window).width();
if (widthScreen > 768){
$('nav').addClass('large');
$('nav').removeClass('small');
}
else{
$('nav').removeClass('large');
$('nav').addClass('small');
}
});
to answer your first question: yes a media query does get called every time you do resize the window.
there is no need to add classes with javascript, I provided you with an example:
it does completely the same but no js needed. Its better to avoid using javascript when its not needed.
nav{
background: green;
}
#media(min-width: 768px){
nav{
background: red;
}
}
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</nav>
I suggest you use css media queries instead of javascript as css is faster than javascript
As soon as Your device width is 768px all the css in that will be called and would overwrite the any other if exist
For more info you can check the link below
Css Media Queries
A CSS media query will apply whenever the conditions in it are fulfilled (for instance, media screen and max-width of 768px), and be ignored whenever it is not. It applies to the window size and will update on resize. You can test this on this website by shrinking your browser.
Such a use-case (using the window resize event) is not recommended as it will trigger on every resize event. Not just when the resizing is finished, but also every tick between start and end. The only use case I know of is to add/remove classes, which is both not recommended, and also a downright CPU hog.
Media query will trigger only when particular point (width or height) mentioned in your media query, whereas javascript resize will trigger at every pixel changed during resize. And, JS is more resource intensive IMO whereas CSS is not and faster. Have a read here
So, in your case, instead of removing and adding classes, have one class and override it's properties based on the screen size in your media query. Something like:
.my-class { width: 400px; }
#media(min-width: 768px){
.my-class { width: 200px; }
}
OR
You can have 2 classes all the time, but only one will take effect based on the screen size. This way you don't override properties (which is a bit ugly, but, that's just me)
// screen <= 767
#media(max-width: 767px){
.nav-small {
width: 320px;
}
}
// screen >= 768
#media(min-width: 768px){
.nav-large {
width: 100%;
}
}
I'm currently building a portfolio site and i want the sidebar to be hidden by default on mobile devices since its quite big atm, you can check it out here: www.dosh.dk/rofl/
The sidebar will hide if body has the class "sidebar-inactive" and therefore i want to do a single check on the viewport when the site is loaded and then add the class if below X
Im using coffeescript and ive made the following code but it doesnt seem to work, any ideas?
$ ->
$(".inner_content").hide()
$("#myskills").show()
$("#site").addClass 'loaded'
if $(window).width < 600
$("body").addClass 'sidebar-inactive'
How about a non-JavaScript solution using CSS media queries?
#media (max-width: 599px) {
.sidebar {
display: none;
}
}
This will hide elements with the sidebar class when the screen is less than 600px wide and will update as the browser is resized.
More: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries