Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Member
    Join Date
    Mar 2018
    Posts
    31
    Member #
    58566
    Liked
    1 times

    How to make a "span" across the diagonal of a web-page?

    So, I have tried to add the "SOLD!" sign across the diagonal of my house-selling web-page. Here is what I tried.
    HTML:
    Code:
    <span id="prodano">PRODANO! - SOLD!</span>
    CSS:
    Code:
    #prodano
    {
        background-color:#FF7777;
        color:#000077;
        font-size:36px;
        line-height:50px;
        position:fixed;
        display:none; /*Has not yet been sold!*/
        text-align:center;
    }
    JavaScript:
    Code:
    document.body.onresize=function()
        {
            var content=document.getElementById("content");
            var sirinaProzora=(window.innerWidth || //Moderni internetski preglednici
                                document.documentElement.clientWidth || //Internet Explorer 8
                                document.body.clientWidth //Internet Explorer 6
                                );
            var visinaProzora=(window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight);
            content.style.left=sirinaProzora/2-content.clientWidth/2+"px";
            var prodano=document.getElementById("prodano");
            var sirinaNatpisaProdano=Math.sqrt(Math.pow(sirinaProzora,2)+Math.pow(visinaProzora,2))+2*50;
            prodano.style.width=sirinaNatpisaProdano+"px";
            var nagibNatpisaProdano=Math.atan2(visinaProzora,sirinaProzora);
            prodano.style.transform="rotate("+nagibNatpisaProdano+"rad)";
            var yKoordinataNatpisa=(visinaProzora/2-Math.cos(nagibNatpisaProdano)*50); 
            prodano.style.top=yKoordinataNatpisa+"px";
            prodano.style.left=-(Math.sin(nagibNatpisaProdano)*yKoordinataNatpisa)+"px";
        }
    window.onresize=document.body.onresize;
    window.onload=document.body.onresize;
    I haven't yet managed to sell my house. My mother keeps insisting that the real price is 45'000 euros, even though I think houses like that are usually sold at around 30'000 euros.
    But, anyway, what I have done now works in Firefox when run on my laptop, however, for some reason, it moves away from the diagonal as I resize the window. Can you find the error?
    You can see my house-selling web-page here (the "display" of that "span" is set to "none" instead of to "block").

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:33 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com