Responsive in javascript

Question

I made an expandable div with jQuery so in my css the div is 250px width and when i expand it is animated to 500px.

How can i make it responsive? I mean when the div is "open" i want it so that when the user resizes his window the div resizes with it and also when the user clicks open on the div it opens depending within the window's size.

Here is my code:

$('.button').click(function(){

$('.content').animate({width: "500px",}, 500);
setTimeout(function(){
    $('.content').animate({top: "-400px", marginBottom: "0px", height:"1000px"}, 500);
},500);

});

.content{
	width:250px;
}

http://jsfiddle.net/Tibuakaw/of8znvc5/

StanGaming 666 · Accepted Answer · 2015-05-26 02:57:40Z

1

.content{
    width:50%;
}

play around with the width :)

answered May 26, 2015 at 2:57

StanGaming 666

1018 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anonymated Over a year ago

actually i was thinking about make like 150% of the width into the javascript and like that make a media queries on the div like that the javascript properties take always 150% of the size but it' s really unstable :p

James Ives Over a year ago

Check out this article: zerosixthree.se/detecting-media-queries-with-javascript

Nicolas Straub · Accepted Answer · 2015-05-26 03:20:43Z

1

you need to use percentage instead of pixels when opening your div:

$('.content').animate({width: "80%",}, 500);

That will expand the div to be 80% the width of the page.

jsfiddle here

edited May 26, 2015 at 3:20

answered May 26, 2015 at 3:05

Nicolas Straub

3,4096 gold badges24 silver badges43 bronze badges

Collectives™ on Stack Overflow

Responsive in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related