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.
Related
I'm trying to create a responsive navbar with list & javascript and #media.
When i resize the browser to ~700px, the item in list style is "display: none" and the hamburger menu appears. If i don't click the hamburger menu, when i resize the browser to normal size, the list still display inline-block, but when i click the hamburger menu to display menu item in 'list-item', i still get the list-item display type when i resize my browser to normal.
Am i missing something?
function myFunction3() {
x = document.getElementsByClassName("li-tag");
if (x[0].style.display === 'none'){
for (index = 0; index<x.length; index++)
{
x[index].style.display = 'list-item';
}
} else {
for (index = 0; index<x.length; index++)
{
x[index].style.display = 'none';
}
}
}
My #Media
#media (max-width: 700px){
.toggle-button{
display:block;
}
.li-tag {
display:none;
}
}
CSS of the Navbar:
.tags{
background: #0000cc;
color:white;
font-family: 'Alata', sans-serif;
width: 100%;
text-align: center;
}
.ul-tag {
list-style-type:none;
width: 70%;
margin:auto;
text-align: center;
}
.li-tag {
display:inline-block;
font-family: 'Alata', sans-serif;
font-size:25px;
margin-right: 10px;
}
HTML Code:
<div class ="tags" >
☰
<ul class = "ul-tag">
<li class = "li-tag ">Home</li>
<li class = "li-tag ">Type 1</li>
<li class = "li-tag">Type 2</li>
<li class = "li-tag ">Type 3</li>
<li class = "li-tag ">Type 4</li>
<li class = "li-tag ">Type 4</li>
<li class = "li-tag ">Type 4</li>
<li class = "li-tag ">Type 4</li>
<li class = "li-tag ">Type 4</li>
</div>
My Code
Any input is appreciated!
the Css applied using js is an inline rule which has higher priority than the css rules in file.So when you set list-item with js , your inline-block rule wont work any more.
I suggest to add a class to your items in js and control display property within the class.
JS:
function myFunction3() {
var x = document.getElementsByClassName("li-tag");
for (index = 0; index<x.length; index++)
{
x[index].classList.toggle('list_view');
}
}
CSS:
#media (max-width: 700px){
.toggle-button{
display:block;
}
.li-tag {
display:none;
}
/* new */
.li-tag.list_view{
display: list-item;
}
}
JSFiddle
There are tons of screens and devices with different heights and widths, so it is hard to create an exact breakpoint for each device. To keep things simple you could target five groups without using any styling library.
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {...}
Define styles spacially width, padding and margin for tags, ul-tags and li-tags in each group.
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>
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 code:
<h1 id="logo">
<a class="brand" href="/cgi-bin/koha/opac-main.pl">
CSU Library
</a>
</h1>
When my browser width is 701px and above, I don't want this to be seen (edit clarification: the element should be deleted from my html code); otherwise, the tag can be seen normally when my browser width is below 701px.
Is there any way I can do that? I don't know where to go from this code.
#media only screen and (min-width: 701px){
....??
}
This can be easily achieved in CSS if this is a responsive website you are building.
#media (min-width: 700px) {
#logo {
display: none;
}
}
For Modern browsers and IE9 and above you can use media queries like
#logo {
display: none;
}
#media (max-width: 701px) {
#logo {
display: block;
}
}
Try this as css
#logo { display : none; }
#media only screen and (min-width: 701px){
#logo { display : block; }
}
One method is to use media queries and another way is with jquery as :
$(document).ready(function(){
if($(window).width() > 701)
{
$("#logo").hide()
}
else
{
$("#logo").show()
}
});
OR
$( window ).resize(function() {
if($(window).width() > 701)
$("#logo").hide()
else
$("#logo").show()
});
According to the asker's comment... "but it leaves a blank space, and that's not what I want. I wanted it to be totally deleted from my html."
Yes, it is possible, but you'll need to use javascript. It is very simple with jQuery:
$("#logo").remove();
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 ?