CODEWITHSUNDEEP
javascriptheightwidth
Chris P
Chris P

Reputation: 2357

Window innerWidth,innerHeight issue

Trying to have horizontal and vertical lines in the whole screen (as background). The distance beetween two lines will be 3 pixels.

The code is:

  <!doctype html>
    <html>
        <head>
            <title>Ζωγραφίζοντας ένα γραφείο</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <link rel="StyleSheet" href="style.css" type="text/css" media="screen">
            <script type="text/javascript" src="script.js"></script>
        </head>
        <body>
            <!-- svg path for background -->
            <svg width="0" height="0">
                <path d="" stroke="#ccc" stroke-width="1" fill="none"/>
            </svg>
            <section>
            </section>
        </body>
    </html>

    *{
        margin:0;
        padding:0;
    }

    html, body {
        width:100%;
        height: 100%;
    }

    section{
        position:absolute;
        z-index:2;
        top:0px;
        left:0px;
    }

    var svg_1;
    var background_path;
    var window_height,window_width;
    var i;
    var d_for_path="";
    document.addEventListener('DOMContentLoaded', function(){ 
        svg_1 = document.getElementsByTagName("svg")[0];
        background_path = document.getElementsByTagName("path")[0];

        window_height = window.innerHeight;
        window_width = window.innerWidth;

        var w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0],
        x = parseFloat(w.innerWidth) || parseFloat(e.clientWidth) || parseFloat(g.clientWidth),
        y = parseFloat(w.innerHeight) || parseFloat(e.clientHeight)|| parseFloat(g.clientHeight);
        x = x-1;
        y = y-3;

        //make svg_1 as big as possible
        svg_1.setAttribute("width",x+"px");
        svg_1.setAttribute("height",y+"px");

        //draw horizontal lines
        for(i=0;i<=y;i=i+3){
            d_for_path+= "M 0 "+i+",H "+x+",";
        }
        //draw vertical line
        for(i=0;i<=x;i=i+3){
            d_for_path+= "M "+i+" 0,V "+y+",";
        }
        background_path.setAttribute("d",d_for_path);

    }, false);

What's wrong with the above code? Why must decrease the x, y variables?

Thanks in advance, Chris Pappas

*I cann't see the lines in firefox browser.

Upvotes: 0

Views: 1088

Answers (2)

Chris P
Chris P

Reputation: 2357

Found a solution using just css

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100% }

fountain: answer in How to scale SVG image to fill browser window?

Upvotes: 1

Elias
Elias

Reputation: 4122

You could also use CSS for something like that.

HTML, body {
  height: 100px;
  width: 100%;
}

#small {
  display: inline-block;
  height: 100px;
  width: 100px;
  background-color: rgb(50, 50, 50);
  background-image: 
      linear-gradient(rgb(202, 202, 202) 50%, transparent 50%, transparent), 
      linear-gradient(90deg, rgb(202, 202, 202) 50%, transparent 50%, transparent);
  background-size: 3px 3px;
}

#big {
  display: inline-block;
  height: 100px;
  width: 100px;
  background-color: rgb(50, 50, 50);
  background-image: 
      linear-gradient(rgb(202, 202, 202) 50%, transparent 50%, transparent), 
      linear-gradient(90deg, rgb(202, 202, 202) 50%, transparent 50%, transparent);
  background-size: 30px 30px;
}
<!doctype html>
<html>
  <head>
    <title>Site</title>
  </head>
  <body>
    <label>Scale: small</label>
    <div id="small"></div>
    <label>Scale: big</label>
    <div id="big"></div>
  </body>
</html>

And yes it looks way better on Google Chrome (at least for me) Let me know if it still worked for you. Have a nice day, Elias :)

Upvotes: 0

Related Questions