determining DOM element media style using JS - javascript

I want to know the display CSS of a DOM element. Normally I would using something like document.getElementById('hello-world').style.display but when the style is being set using CSS #media Rule I do not see any change to this value.
Any reason why?
And how would I be able to get this information.
Here is an example to demonstrate https://codepen.io/liywjl/pen/JjYyqVv
Code:
HTML
<p id="hello-world">Hello world</p>
CSS
#media (min-width: 980px) {
#hello-world {
display: none;
}
}
JS
window.addEventListener('resize', function(){
console.log(document.getElementById('hello-world').style.display)
})

You can use
window.getComputedStyle(document.getElementById('hello-world')).display
However, then can be a delay between the the setting of the style and the page re-flow and this may be not work on all browsers.

Related

having issues with javascript style properties of an html element

I am trying to change the style property which is set in the inline in the HTML. I'm using clickfunnels as my landing page builder and I can only add CSS rules.
My issue is that when you view the site on mobile there is extra empty space to the right of the page (see screenshot).
I troubleshooted it in the console to find out that if I manually change the property of the overflow to auto it solves the issue.
Since then I've tried to add various type of custom css (disclaimer I'm not familiar with this) but with no success.
What I've tried to add to the css:
html.style.property={overflow:auto;}
#html.style.property={overflow:auto;}
.html.style.property={overflow:auto;}
grammarly-btn {display:none!important;}
#html{overflow:auto;}
#clickfunnels-com{overflow:auto;}
#wf-proximanova-i4-active{overflow:auto;}
#wf-proximanova-i7-active{overflow:auto;}
#wf-proximanova-n4-active{overflow:auto;}
#wf-proximanova-n7-active{overflow:auto;}
#wf-active{overflow:auto;}
#wf-proximanova-i3-active{overflow:auto;}
#wf-proximanova-n3-active{overflow:auto;}
#elFont_opensans{overflow:auto;}
#wf-proximanovasoft-n4-active{overflow:auto;}
#wf-proximanovasoft-n7-active{overflow:auto;}
#wf-proximasoft-n4-active{overflow:auto;}
#wf-proximasoft-i4-active{overflow:auto;}
#wf-proximasoft-i6-active{overflow:auto;}
#wf-proximasoft-n6-active{overflow:auto;}
#wf-proximasoft-i7-active{overflow:auto;}
#wf-proximasoft-n7-active{overflow:auto;}
#bgRepeat{overflow:auto;}
#avcHn2VQJenBvoR5hilPG{overflow:auto;}
getElementByID.html{overflow:auto;}
getElementByID.html='overflow:auto';
The element in the source view is this:
<html lang="en" class="clickfunnels-com wf-proximanova-i4-active wf-proximanova-i7-active wf-proximanova-n4-active wf-proximanova-n7-active wf-active wf-proximanova-i3-active wf-proximanova-n3-active elFont_opensans wf-proximanovasoft-n4-active wf-proximanovasoft-n7-active wf-proximasoft-n4-active wf-proximasoft-i4-active wf-proximasoft-i6-active wf-proximasoft-n6-active wf-proximasoft-i7-active wf-proximasoft-n7-active bgRepeat avcHn2VQJenBvoR5hilPG " style="overflow: initial; background-color: rgb(252, 213, 213); --darkreader-inline-bgcolor:#2f251e; font-family: Lato, Helvetica, sans-serif !important;">
here is a screenshot better describing my issue:
screenshot of the issue
If you are trying to use JavaScript to apply styles to your HTML, you need access the specific style property of your html that you are trying to change.
getElementByID.html='overflow:auto'; won't work.
You should write something like document.getElementbyId('your_id').style.overflow = 'auto'
If you are just trying to select your HTML entirely then you don't need to use getElementById but can rather use a
document.getElementsByTagName('html')[0].style.overflow = 'auto'.
Another alternative is using an external stylesheet and implementing media queries to adjust for mobile view. Here is how to add an external stylesheet.
See the snippet for an example of a media query in CSS. is some example CSS.
html{
background-color: pink;
}
#media only screen and (max-width: 300px) {
/* when screen is this size or smaller, background color will change */
html {
background-color: orange;
}
}
to fix your issue of white space on the right, study more about Responsive Web Design.
in general, I would put all my body in one container and set its margin to 50% of both sides.

How can I block an Image using HTML

I have an HTML Website. I want to display it in an mobile app using HTML code. But I wan't to block / not load the original website background because it's very large and you can't see it mobile.
Is there a way to do it with HTML / CSS / JavaScript?
Use media queries to load the background image if the screen is larger than XX.
Add the media query to your CSS.
Change div to the element you're loading the background image on.
<style>
#media (max-width:500px) {
div {
background-image: none;
}
}
</style>
** EDIT **
With mobile-first being the correct approach, it would be preferred only to add the background image when the viewport reaches the required size.
<style>
#media (min-width: 644px) {
div {
background-image: url(/image/here.jpg);
}
}
</style>
CSS Media Queries is the best way to apply different styles for an HTML document in different resolutions.
so, if you want to apply a different style (here remove background image in mobile resolutions) you may use Media queries
Eg.
<style>
#media screen and (max-width:640px){
element{
background:none;
}
}
</style>

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/

JQuery Mobile: modifying <a> button data-inline="true" using CSS #media query

I'd like for my buttons to only be inline in certain browser widths.
Can this be done with CSS?
Failing that, can this be done with Javascript (fire a function when screen layout changes)?
Yes. You can use CSS resposive design techniques with attribute selectors to affect these elements.
#media only screen and (min-width : 320px) {
a[data-inline=true] {
display:inline;
}
}
Simply using display: inline-block actually works for me right now.

Categories

Resources