Our server costs ~$56 per month to run. Please consider donating or becoming a Patron to help keep the site running. Help us gain new members by following us on Twitter and liking our page on Facebook!
Current time: August 13, 2025, 8:38 pm

Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How to make a "span" across the diagonal of a web-page?
#1
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").
Reply



Messages In This Thread
How to make a "span" across the diagonal of a web-page? - by FlatAssembler - May 10, 2020 at 6:53 am

Possibly Related Threads...
Thread Author Replies Views Last Post
  The Web SimpleCaveman 24 5313 January 9, 2024 at 5:29 pm
Last Post: brewer
  [Serious] Coronavirus plotting on a web map WinterHold 6 1852 May 26, 2021 at 5:29 pm
Last Post: BrianSoddingBoru4
  bots and the change of the web. WinterHold 29 4971 June 20, 2020 at 11:26 am
Last Post: Abaddon_ire
  Solar System simulation: my latest web app. WinterHold 8 2011 February 7, 2020 at 2:49 pm
Last Post: WinterHold
  [Serious] Multiple Sclerosis Map: my latest web project WinterHold 22 4942 October 4, 2019 at 10:02 am
Last Post: WinterHold
  Is front-end web development dying? WinterHold 18 3092 September 10, 2018 at 12:28 am
Last Post: KevinM1
  HELP! The Page Breaks in All My Documents Have Disappeared in Windows 2013 Rhondazvous 18 5384 January 9, 2018 at 8:44 pm
Last Post: Mermaid
  Welcome to McAfee Web Advisor popups... Rev. Rye 5 3596 June 4, 2017 at 5:31 pm
Last Post: Jackalope
  Question for Those of You Wwho Use Mobile Web Devices (iPhones, Smart Phones, etc.) Rhondazvous 26 5895 July 24, 2015 at 4:25 pm
Last Post: IATIA
  Advice Sought for Web Programming AFTT47 13 4324 April 4, 2015 at 10:41 pm
Last Post: bennyboy



Users browsing this thread: 1 Guest(s)