html - Issue in the width of a fixed positioned div -
how make fixed positioned div fit content width?
i've made demo here
before clicking on load button, div must have enough width contain gif image , button.
when more content loaded, width of div must fit width.
here css
i've made
body{background: #eee; } #divtocenter{ border-radius: 5px; box-shadow: 0 0 0 10px rgba(0,0,0,0.2); background: #fff; padding: 20px; position: fixed; top: 20px; right: 0; left: 0; margin-right: auto; margin-left: auto; max-width: 400px; }
since using javascript/jquery show/hide loader, why don't change width
of box via javascript?
you toggle class called .wide
instance, achieve desired result follows:
css:
#divtocenter{ /* other declarations... */ text-align: center; width: 50px; } #divtocenter.wide { width: 400px; text-align: left; }
jquery:
var $divtocenter = $("#divtocenter"); $("#show-more-data").click(function() { // ... $divtocenter.addclass("wide"); }); $("#show-less-data").click(function() { // ... $divtocenter.removeclass("wide"); });
Comments
Post a Comment