Где скрыть и показать элементы div в зависимости от разрешения экрана? - PullRequest
Новая
       22

Где скрыть и показать элементы div в зависимости от разрешения экрана?

0 голосов
/ 09 апреля 2020

Я пытаюсь установить немного другое поведение для отображений моего описания на основе мультимедийного устройства, но возникают проблемы. На мобильном устройстве я хотел, чтобы описания отображались между пунктами меню, а на рабочем столе - внизу. В этой перестановке кода он работает на мобильном телефоне, но отказывается показывать информацию для рабочего стола. Я уверен, что сделал что-то глупое, но не могу понять, что это такое. Я пробовал несколько вещей, которые заставят одну или другую работу, но никогда не обе. Я ладья ie и немного потерян и благодарен за любой совет. Большое спасибо за любые советы. 

<!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 ]

0 голосов
/ 09 апреля 2020

Проблема в том, что вы используете идентификатор, чтобы найти элемент. document.getElementById () работает только один раз, это означает, что он вернет только первый элемент на странице с идентификатором, который вы найдете. Итак, в вашем коде вы используете один и тот же идентификатор как для декстопа, так и для мобильного. Например: 'viz', 'assets' et c.

. Я предлагаю вам использовать class или сделать id уникальным для мобильного и dekstop.

0 голосов
/ 09 апреля 2020

Попробуйте изменить CSS медиазапросы. 


@media only screen and (min-width: 435px) {
      .mobileservicestextwrapper  {
            display:none !important;
   }
 }


@media only screen and (max-width: 435px) {
      .servicestextwrapper {
            display:none !important;
   }
 }
...