hide DIV and replace with a DIV if window is narrower than - javascript

I found this topic Hide A DIV if screen is narrower than 1024px and I want to get something similar with quoted code below, a code for this kind of response: to hide one div ( id="krug_wide" ) if a window is narrower then 1280px and to replace that hidden div with another one ( id="krug_small" ).
I also found out the page http://www.fryed.co.uk/labs/resize_div_on_window_resize connected with mentioned topic. I still can not figure out the right and appropriate syntax but I'm sure it is "a piece of cake" for you.
Thank you in advance.
$(document).ready(function () {
var screen = $(window)
if (screen.width < 1024) {
$("#krug_wide").hide();
}
else {
$("#floatdiv").show();
}
});

You can use Media Queries ou have example on this link
A media query consists of a media type and zero or more expressions
that check for the conditions of particular media features.
with on CSS
#media screen and (max-width: 1280px) {
//Some property here
#krug_wide{
...
}
}
Or create different CSS
<link rel="stylesheet" media="screen and (max-width:1280px)" href="example.css" />
You have many example on W3C Media Queries

Apply the following mediaquery in css
#media only screen (max-device-width: 1023px) {
.content { // Your div's class name to hide
display: none;
}
}

Related

A simple dictionary list in jQuery

I need some help please. I'm noob in jQuery and I try to create a dictionary list.
But my problematic is that each definition must be displayed under his own row of 3 words (desktop), 2 words (in tablet) and under his own word (accordion system) in mobile. One definition must be displayed at a time. I would like to toggle definition when I click on a word.
Wordpress will be use to add words so the list must be dynamic.
Here my incomplete test : https://jsfiddle.net/Xroad/qbh79xoy/31/
$('.tabs .tab-link').each(function (index, item) {
$(item).attr('data-link', index);
});
$('.tab-content .tab-content').each(function (index, item) {
$(item).attr('data-content', index);
});
$('.tabs .tab-link').click(function () {
$('.tabs .tab-link').not(this).removeClass('current');
$(this).toggleClass('current');
});
I don't know what I must write to display each definition under a row of 3 words. Can I have some help please ? Thank you in advance.
DESKTOP VERSION
MOBILE VERSION
You can use media queries, media queries change CSS rules depending on criteria such as screen width.
For example the following width rule won't apply for screens wider than 480px:
#media screen and (max-width: 480px) {
body {
width: 100%;
}
}
And the following width rule won't apply for screens wider than 769px:
#media screen and (max-width: 769px) {
body {
width: 33%;
}
}
You can have as much media queries as you need.
For more info about media queries see this w3schools page

How to get media queries to work with style added by a toggle function

I have a mobile-menu which is toggled by js code when user clicks the mobile-menu-icon.
The problem I have is: when re-sizing screen from mobile view to large view, the menu is still open.
I used media query to hide the mobile-menu for large screens, but it seems the toggle method added display:block on the element and the media query cannot override that.
What's your approach to fix this problem?
Instead of using .toggle, use .toggleClass("hidden"). Then you can use CSS
.hidden {
display: none;
}
When the class is removed, it will get whatever styling is default for the media type.
#media only screen and (min-width: 768px) {
.mobile-menu { display: none !important; }
}
Try overriding the same by adding !important to display:none in media query for large screens
Or use a resize script like this:
$(window).resize(function () {
if ($(window).width() > 641) {
$(".mobile-menu").hide();
}
else {
}
})

activate different media query although screen resolution does not change

I'm in the following situation:
I have media-query A for screenresolution: width<1200px.
I have media-query B for screenresolution: width>1200px.
There is a Button in the document with a click eventhandler.
Currently my screenresolution is below 1200px, so Elements use media-query A.
Inside this eventhandler I'd like to force my Elements to use media-query B.
Is this possible?
I know how to manipulate the dom with JS, but that's what I want to avoid here.
Is there a solution for this?
Thanks for your replies.
In a simple way, in your click handler, if you try to add a class to the <body> tag and add all the B media query's CSS inside the new class and target all the required selectors, your work is done.
Resolution: < 1200 px:
Body uses A media query.
Body with .fake-b-class class uses B media query.
Hope this helps you. In simple words, you copy all the styles in B media query to A.fake-b-class.
Consider the #media query example here:
/* This is B style! */
#media screen and (min-width: 1200px) {
body {
background-color: lightblue;
}
}
/* This is A style */
body.fake-b-class {
background-color: lightblue;
}
Hope you get it better.

Issue with div display, css #media vs javascript

For my first responsive design I use css #media with display: none; or display:table-cell to show or hide sidebars. This works fine, I need the display:table-cell for a three divs layout.
CSS example:
#div_right { display: table-cell; }
#media screen and (max-width: 700px) { #div_right {display: none; } }
JS is standard ToogleDisplay function (with e.style.display = "table-cell"; in place of e.style.display = "block"; )
On small windows/screen the sidebars are hidden, but a new div with 2 options to display these 2 same navigation sidebars appears: clicking on a link with embedded javascript, allows to toogle display of a sidebar div. It also works fine.
The problem comes when I show then hide the sidebars by clicking on the JS links (on small windows), and then resize the window to a larger width: the sidebars are not displayed this time!
Is there a #media condition to specify "on larger width than xxx" do force display:table-cell; ?
I don't want to use jQuery, and a solution with CSS would be nice.
Just use min-width instead of max-width:
#div_right { display: table-cell; }
#media screen and (min-width: xxx) { #div_right {display: none; } }
Very simple, tells the browser that these rules are to be used if the browser is larger then xxx.
If you want to know everything about #media queries, check out the Mozilla Docs On It.
Could be very helpful to you.
To see it in action, see this JSFiddle
[EDIT]
As noted in the other answer, if you are using jquery, it will override the #media rule.
The correct way to do this, not using !important is to use jquery:
In your js:
$(".menu").show().css("display","block");
This JS shows it as display:block;
Are you using jquery to $.('el').css("display","none") or .hide() the elements? If so jquery will add the style as an inline-style - hence overwriting your media query.
You can try to add !important to your CSS code (the media query) and it might work.
See: http://www.iandevlin.com/blog/2013/05/css/using-important-in-your-media-queries
Also please note the follow rule of thumb:
CSS style is applied in the following hierachy/priority:
!important is always highest priority
The closer styles to your elements will override styles defined before:
inline styles are higher priority
CSS styles are lowest priority
Please check: developer.tizen.org/dev-guide/2.2.1/org.tizen.web.appprogramming/html/guide/w3c_guide/dom_guide/html_priorities_css.htm
Also you might want to use not only min-width, but rather a range like:
#media screen (min-width: xxx) and (max-width: yyy){ }
Check out some standard templates from: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Detect screen resolution and modify layout

I need to check whether user's resolution is <1300px or >1300px and if it is <1300px to load layout with horizontal divs and if it is >1300px to load layout with vertical divs.
Template is the same I only need to put one div in horizontal or vertical position depening on resolution.
Since I cannot do it with PHP, I have to do it with javascript, so I would have to use "load" function to load part of my template where is vertical or horizontal div? I'm using Yii framework
You can use CSS media query for that:
// For screen < 1300px
#media screen and (max-width: 1300px) {
.foo {
...
}
}
// For screen > 1300px
#media screen and (min-width: 1300px) {
.foo {
...
}
}
Typically this sort of thing is in the CSS domain (via media queries), not the JavaScript domain.
You can use the screen object, though, to get the dimensions of the user's screen:
var width = screen.width; // Or screen.availWidth;
In JavaScript you can detect it by:
window.screen.availHeight
window.screen.availWidth
while in CSS you need to use media queries:
#media screen and (min-width: 1200px)

Categories

Resources