javascript and media queries

[chauhanheena]

Hi,

I have this following funtion on my html page

<script type="text/javascript">
$(document).ready(function() {
$('#map').pixelmap({
point_shape:'rect',
c_bg:'rgba(13, 13, 13, 0)',
c_deadPoint:'#fff',
c_hotPoint: "#ff0000",
c_hotPointOver: "#ff0000",
pointW:4,
pointH:4,
pointS:2,
cw:726,
ch:547,
rad:6,
slideshow:true,
tooltip_delay:550,
tt_off:0
});
});
</script>

How can i set the above values depending on media queries.I want to make it responsive.

for example, if the device is iphone portrait, i will want to change the cw and ch to a smaller number.

[Shikkediel]

You could have a look at this :

Moz doc matchMedia

[chauhanheena]

@shikkwdiel

the following is the entire code:

        <script type="text/javascript">
            window.addEventListener("load", function() {
                var options = {
                   width:621,
                   height:545,
                   rotationIdleSpeedFactor: 10.0,
                   rotationSpeedFactor: 1.5,
                   wave: false
                };
                var globe = new Globe(document.getElementById("3DView"),options);
                var img = new Image();
                var items = [];
                img.onload = function() {
                     globe.addImage(13.006415, 77.659382, img);
                };
                img.src = "globe/item.png";
                window.setInterval(function() {
                      globe.addImage(13.006415, 77.659382, img, { color: [ 1.0, 0.0, 0.0, 0.9] }, function() { osg.log("Hit itemID " + this.itemID ); } );
                   }, 500);
            },true);
        </script>

How do i bring in matchMedia() to set the width and height to the max width of the screen (responsiveness)

[chauhanheena]

@shikkwdiel

the following is the entire code:

        <script type="text/javascript">
            window.addEventListener("load", function() {
                var options = {
                   width:621,
                   height:545,
                   rotationIdleSpeedFactor: 10.0,
                   rotationSpeedFactor: 1.5,
                   wave: false
                };
                var globe = new Globe(document.getElementById("3DView"),options);
                var img = new Image();
                var items = [];
                img.onload = function() {
                     globe.addImage(13.006415, 77.659382, img);
                };
                img.src = "globe/item.png";
                window.setInterval(function() {
                      globe.addImage(13.006415, 77.659382, img, { color: [ 1.0, 0.0, 0.0, 0.9] }, function() { osg.log("Hit itemID " + this.itemID ); } );
                   }, 500);
            },true);
        </script>

How do i bring in matchMedia() to set the width and height to the max width of the screen (responsiveness)

[Shikkediel]

If it should always be as wide as the screen this would be easiest but maybe you could be more specific if you meant something else :

img.style.width = '100%';

[Author]

Posts