CODEWITHSUNDEEP
javascripthtmlcss
Kr Digvijay Singh Champawat
Kr Digvijay Singh Champawat

Reputation: 11

How to change DOM elements, using javascript, depending on the screen size of a client

I am working on this event slider which has 3 posts with left, right scroll buttons. but i am new to responsive designs, and i want to change the whole content including all the elements in the DIV once the screen size reduces to 1000px. please help me with some ideas to go through.

Upvotes: 0

Views: 1207

Answers (4)

Manoj Kumar
Manoj Kumar

Reputation: 11

Have a look below example using css media queries, it may help you.

<style>
	@media(min-width:1000px) {
	    .hide-on-desktop {
	        display:none;
	    };
	}

	@media(max-width:999px) and (min-width:767px) {
	    .hide-on-laptop {
	        display:none;
	    };
	}

	@media(max-width:766px) {
	    .hide-on-mobile {
	        display:none;
	    };
	}
</style>
<div class="hide-on-desktop hide-on-laptop"> for mobile </div>
<div class="hide-on-desktop hide-on-mobile"> for laptop </div>
<div class="hide-on-laptop hide-on-mobile"> for desktop </div>

Upvotes: 1

shv22
shv22

Reputation: 690

You can define something like this in CSS

div {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

or you can use media for set font size in the CSS file

@media(max-width:767px) {
    body {
        font-size: 10px;
    };
}

@media(min-width:768px) {
    body {
        font-size: 11px;
    };
}

@media(min-width:992px) {
    body {
        font-size: 12px;
    };
}

@media(min-width:1200px) {
    body {
        font-size: 13px;
    };
}

Then set font-sizes on each and every elements you want to resize font while resizing browser or according to resolution in percentage.

eg: if you want to resize fonts on h1

h1 {
   font-size: 150%;
}

it will work as you want it to.

EDIT: I think you need to resize te screen according to Desktop and Tablet and mobile if that it is then maybe this help--

Assuming this HTML:

<div id="some_container">
    <nav id="n1">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </nav>
    <p>Some Text</p>
    <nav id="n2">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </nav>
</div>

You will only need the following CSS:

#n1{
    display:none;
}

@media only screen 
and (max-width : 1000px) {
    #n1{
        display:block;
    }
    #n2{
        display:none;
    }
}

The great thing about this way is that it's very scaleable. Need this "effect" on a different page? You'll only have to edit [u]that[/u] page. No messing around with JavaScript, hard-coding new classes / cases.

Upvotes: 0

Marcus H&#246;glund
Marcus H&#246;glund

Reputation: 16856

Use the CSS media queries instead of using Javascript. Less code and more efficient

@media (min-width: 1001px) {
  #yourDiv {
     /*Add css property to your div when its 1001px or more*/
  }
}

 @media (max-width: 1000px) {
   #yourDiv {      
      /*Add css property to your div when its 1000px or less*/
   }
 }

Check this link for more examples: http://www.w3schools.com/css/css3_mediaqueries_ex.asp

Upvotes: 0

partypete25
partypete25

Reputation: 4413

In your css use a media query with a max-width of 1000px. Inside the media query apply some css that will only come into effect on devices that are <= 1000px.

@media(max-width:1000px){
 /* So  in here you might want to apply some css to stack your posts one after the other and to hide your left and right scroll buttons*/
}

Upvotes: 0

Related Questions