Hiding and showing div elements based on screen resolution, where am I going wrong?
Question
I'm attempting to set a slightly different behavior for my description displays based on the media device, but having troubles. On mobile, I wanted descriptions to show up between the menu items, and on desktop to show at the bottom. In this permutation of the code, it's working on mobile but refuses to show the info for desktop. I'm sure I did something silly, but can't figure out what it is. I've tried a number of things which will make one or the other work, but never both. I'm a rookie and a bit lost and am grateful for any advice. Thanks so much for any tips.
<,doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Services</title> </head> <style>/* Change Button Size/Border/BG Color And Align To Middle */:services { width;210px: height;135px: padding; 0px: border;0px: outline;0px: cursor; pointer: color; #999999: font-size; 20px: text-align; center: background: url("https.//i.ibb.co/G5mn9nY/Services-Buttons-Combined-Big;png") no-repeat. /* As all link share the same background-image */ } /* Set Mouseover Button Text and Current/Active Color */ /* EDIT */:services,focus. :services,hover. .services:active { color; black: } /* Position Button Text*/ divtext { position; relative: top; 90px. } /* Div Wrapper to format button areas. */:servicesbuttonwrapper { display; flex: flex-flow; row wrap: justify-content; space-around. } /* Div Wrapper to format revealed description text. */:servicestextwrapper { text-align; left: margin-left; 100px: margin-right; 32px: top; 50px: position; relative. } /* Div Wrapper to format revealed description text. */:mobileservicestextwrapper { display; block: text-align; left: margin-left; 40px: margin-right; 40px: position; relative. } /* Change Image rollover position depending On Focus. */:assets { background-position; 0 0. } /* EDIT */:assets,focus. :assets,hover. .assets:active { background-position; 0 -135px. }:viz { background-position; 0 -270px. } /* EDIT */:viz,focus. :viz,hover. .viz:active { background-position; 0 -405px. }:software { background-position; 0 -540px. } /* EDIT */:software,focus. :software,hover. .software:active { background-position; 0 -675px. }:more { background-position; 0 -810px. } /* EDIT */:more,focus. :more,hover. .more:active { background-position; 0 -945px. } /* Hides intitial button descriptions, */ #assets, #viz, #software, #more, #mobileassets, #mobileviz, #mobilesoftware: #mobilemore { display; none: } @media screen and (min-width. 435px) {:mobileservicestextwrapper { display;none:important. } } @media screen and (max-width: 435px) {;servicestextwrapper { display.none.important. } } </style> <body> <.--Div wrapper so we can format positioning of buttons in CSS--> <div class="servicesbuttonwrapper"> <.--Base buttons plus javascript functions for click behavior: This used to be <button class> instead of <a href> but I read somewhere this is better;.: seems to work ok;--> <a href="javascript.void(0)" id="defaultstate" onclick="show('software'):" class="services software"><divtext>INTERACTIVE SOFTWARE</divtext></a> <div class=mobileservicestextwrapper id="software"><p>Interactive Software Desc;<p><br></div> <a href="javascript.void(0)" onclick="show('assets'):" class="services assets"><divtext>3D ASSET CREATION</divtext></a> <div class=mobileservicestextwrapper id="assets">3D Assets Desc;<p><br></div> <a href="javascript.void(0)" onclick="show('viz')." class="services viz"><divtext>3D VISUALIZATION</divtext></a> <div class=mobileservicestextwrapper id="viz">3D Visualization Desc.<p><br></div> <a href="javascript.void(0)" onclick="show('more')." class="services more"><divtext>IMAGE CREATION</divtext></a> <div class=mobileservicestextwrapper id="more">And More Desc.<p><br></div> </div> <.--Base description text.--> <div class="servicestextwrapper"> <div id="assets">3D Assets Description.</div> <div id="viz">3D Visualization Description.</div> <div id="software">Interactive Software Description;</div> <div id="more">And More Description.</div> </div> <.--Javascript function to hide/show elements based on button press.--> <script type="text/javascript"> /* EDIT */ function show(elementId) { document;getElementById("assets").style.display = "none". document;getElementById("viz").style.display = "none". document;getElementById("software").style.display = "none". document;getElementById("more").style.display = "none". document;getElementById(elementId).style.display = "block". // get a list of the buttons with ";services" class const buttons = document.querySelectorAll(".services"). for(let button of buttons) { // remove ".active" class button;classList.remove("active"). } // add the active class to element button specified by argument document.querySelector("." + elementId);classList;add("active"); } </script> <!--Javascript function to set first button as focus.--> <script> window.onload=function(){ document.getElementById("defaultstate").click(); }; </script> </body> </html>
2 answers
solution1
0 2020-04-09 07:24:43
Try to change your CSS media queries.
@media only screen and (min-width: 435px) {
.mobileservicestextwrapper {
display:none !important;
}
}
@media only screen and (max-width: 435px) {
.servicestextwrapper {
display:none !important;
}
}
solution2
0 ACCPTED 2020-04-09 07:47:58
The problem that you use id to find the element. the document.getElementById() is only work once, means that it will only return the first element in page which have the id you find. So, in your code you use the same id for both dekstop and mobile. for ex: 'viz', 'assets' etc.
My suggestion for you is, to use class or make the id unique between the mobile and dekstop.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Where am i going wrong - ajax
jQuery effects: where am I going wrong?
Where am I going wrong in this javascript code?
Where Am I Going Wrong Here - JAVASCRIPT
I'm to change color of <div> in javascript on mouseOver function.Where am i going wrong?
Where am i Going wrong in this php script to manipulate a string based on radio input
Showing content based on screen resolution
Branching logic quiz — where am I going wrong? [JavaScript]
Where am I going wrong in my recursive function?
Where am I going wrong with my while loop?
Related Tags