Attachment 153331 Details for Bug 38295 – example styling in html (should work properly in firefox)

example styling in html (should work properly in firefox)

writer_comment_UI_example.html (text/html), 5.50 KB, created by DarkTrick on 2019-08-13 02:35:06 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: DarkTrick

Created: 2019-08-13 02:35:06 UTC

Size: 5.50 KB

patch

obsolete

><!DOCTYPE html>
><html>
>    <head>
>
>    <meta charset=utf-8 />
>    <style>
>        #content{
>            background-color: white;
>            width: 600px;
>            float: left;
>        }
>
>        #sidebar{
>            position:absolute;
>            left: 600px;
>            background-color:rgb(230, 230, 230);
>            width: 250px;
>        }
>
>        .comment{
>            background-color: #ffff9e7a;
>            border-color:#dbb94883;
>            color: rgba(0, 0, 0, 0.5);
>
>            border-style: solid;
>            border-width: 1px;
>            
>            margin-top: 7px;
>            padding: 2px;
>            height: 70px;
>        }
>
>
>        .commentMarking{
>            height: 16px;
>            background-color: #ffff9e7a;
>            border-color:#dbb94883;
>            color: rgba(0, 0, 0, 0);
>            position: absolute; 
>
>            border-style: dashed;
>            border-width: 1px;
>        }
>
>
>
>    </style>
>
>    <script type="text/javascript">
>    function resetViewFor( elementId ){
>        var comment = document.getElementById(elementId);
>        var marking = document.getElementById(elementId + "_mark");
>
>        if(document.activeElement != comment){
>            comment.style.backgroundColor = "#ffff9e7a";
>            comment.style.borderColor = "#dbb94883";
>            comment.style.color = "rgba(0, 0, 0, 0.5)";
>            comment.style.borderWidth = "1px";
>
>            marking.style.borderStyle = "dashed";
>            marking.style.borderColor = "#dbb94883";
>            marking.style.color = "rgba(0, 0, 0, 0)";            
>        }
>    }
>
>    function onCommentFocussed( elementId ){
>        mouseOverComment( elementId);
>
>        var comment = document.getElementById(elementId);
>        var marking = document.getElementById(elementId + "_mark");
>
>        marking.style.borderStyle = "solid";
>        comment.style.borderWidth = "2px";
>    }
>
>    function mouseOverComment( elementId ){
>        var marking = document.getElementById(elementId + "_mark");
>        marking.style.borderColor = "#dbb948";
>        marking.style.color = "rgba(0, 0, 0, 1)";
>
>        var comment = document.getElementById(elementId);
>        comment.style.backgroundColor = "#ffff9e";
>        comment.style.borderColor = "#dbb948";
>        comment.style.color = "rgba(0, 0, 0, 1)";
>    }
>
>    function mouseLeaveComment( elementId){
>        resetViewFor(elementId);
>    }
>    </script>
></head>
>
><body>
>    <div id="content">
>            bbbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb 
>            bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb 
>            bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb 
>            bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb 
>            bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb 
>            bbbbbbbb bbbbb bbbbb bbbbbbbbbb bbbbbbbb bbb bbbbbbbb 
>            bbbbb bbbbb bbbbbbbb 
>            bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb 
>            bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb 
>            bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb 
>            bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb 
>            bbbbbbbb bbbbb bbbbb bbbbbbbbbb bbbbbbbb bbb bbbbbbbb 
>            bbbbb bbbbb bbbbbbbb 
>            bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb 
>            bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb 
>            bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb 
>            bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb 
>            bbbbbbbb bbbbb bbbbb bbbb
>
>    </div>
>
>    <div id="sidebar">
>        
>        <textarea id="comment1" class="comment"
>        onmouseover="javascript:mouseOverComment('comment1');"
>        onmouseleave="javascript:mouseLeaveComment('comment1');"
>        onfocus="javascript:onCommentFocussed('comment1');"
>        onBlur="javascript:mouseLeaveComment('comment1');">comment 1
>
>Unknown Author
>8/12/2019 18:00</textarea>
>
>        <div id="comment1_mark" class="commentMarking" 
>            style="top:67px;
>                    width: 45px;
>                    left:-306px;"
>            onmouseover="javascript:mouseOverComment('comment1');"
>            onmouseleave="javascript:mouseLeaveComment('comment1');">
>            bb bb</div> 
>    
>    <textarea id="comment2" class="comment"s
>    onmouseover="javascript:mouseOverComment('comment2');"
>    onmouseleave="javascript:mouseLeaveComment('comment2');"
>    onfocus="javascript:onCommentFocussed('comment2');"
>    onBlur="javascript:mouseLeaveComment('comment2');">comment 2
>
>Unknown Author
>8/12/2019 18:00</textarea>
>
>            <div id="comment2_mark" class="commentMarking" 
>                style="top:67px;
>                        width: 38px;
>                        left:-251px;"
>                onmouseover="javascript:mouseOverComment('comment2');"
>                onmouseleave="javascript:mouseLeaveComment('comment2');">
>                    bbbb</div> 
>
>        <textarea id="comment3" class="comment"
>        onmouseover="javascript:mouseOverComment('comment3');"
>        onmouseleave="javascript:mouseLeaveComment('comment3');"
>        onfocus="javascript:onCommentFocussed('comment3');"
>        onBlur="javascript:mouseLeaveComment('comment3');">comment 3
>
>Unknown Author
>8/12/2019 18:00</textarea>
>
>        <div id="comment3_mark" class="commentMarking" 
>                style="top:84px;
>                       width: 38px;
>                       left:-251px;"
>            onmouseover="javascript:mouseOverComment('comment3');"
>            onmouseleave="javascript:mouseLeaveComment('comment3');"
>            >bbbb</div> 
>    </div>
> 
>
></body>
></html>

<!DOCTYPE html>
<html>
    <head>

    <meta charset=utf-8 />
    <style>
        #content{
            background-color: white;
            width: 600px;
            float: left;
        }

        #sidebar{
            position:absolute;
            left: 600px;
            background-color:rgb(230, 230, 230);
            width: 250px;
        }

        .comment{
            background-color: #ffff9e7a;
            border-color:#dbb94883;
            color: rgba(0, 0, 0, 0.5);

            border-style: solid;
            border-width: 1px;
            
            margin-top: 7px;
            padding: 2px;
            height: 70px;
        }


        .commentMarking{
            height: 16px;
            background-color: #ffff9e7a;
            border-color:#dbb94883;
            color: rgba(0, 0, 0, 0);
            position: absolute; 

            border-style: dashed;
            border-width: 1px;
        }



    </style>

    <script type="text/javascript">
    function resetViewFor( elementId ){
        var comment = document.getElementById(elementId);
        var marking = document.getElementById(elementId + "_mark");

        if(document.activeElement != comment){
            comment.style.backgroundColor = "#ffff9e7a";
            comment.style.borderColor = "#dbb94883";
            comment.style.color = "rgba(0, 0, 0, 0.5)";
            comment.style.borderWidth = "1px";

            marking.style.borderStyle = "dashed";
            marking.style.borderColor = "#dbb94883";
            marking.style.color = "rgba(0, 0, 0, 0)";            
        }
    }

    function onCommentFocussed( elementId ){
        mouseOverComment( elementId);

        var comment = document.getElementById(elementId);
        var marking = document.getElementById(elementId + "_mark");

        marking.style.borderStyle = "solid";
        comment.style.borderWidth = "2px";
    }

    function mouseOverComment( elementId ){
        var marking = document.getElementById(elementId + "_mark");
        marking.style.borderColor = "#dbb948";
        marking.style.color = "rgba(0, 0, 0, 1)";

        var comment = document.getElementById(elementId);
        comment.style.backgroundColor = "#ffff9e";
        comment.style.borderColor = "#dbb948";
        comment.style.color = "rgba(0, 0, 0, 1)";
    }

    function mouseLeaveComment( elementId){
        resetViewFor(elementId);
    }
    </script>
</head>

<body>
    <div id="content">
            bbbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb 
            bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb 
            bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb 
            bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb 
            bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb 
            bbbbbbbb bbbbb bbbbb bbbbbbbbbb bbbbbbbb bbb bbbbbbbb 
            bbbbb bbbbb bbbbbbbb 
            bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb 
            bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb 
            bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb 
            bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb 
            bbbbbbbb bbbbb bbbbb bbbbbbbbbb bbbbbbbb bbb bbbbbbbb 
            bbbbb bbbbb bbbbbbbb 
            bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb 
            bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb 
            bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb bbbbbbbb bbbbb 
            bbbbb bbbbbbbb bbb bbbbbbbb bbbbb bbbbb bbbbbbbb bbb 
            bbbbbbbb bbbbb bbbbb bbbb

    </div>

    <div id="sidebar">
        
        <textarea id="comment1" class="comment"
        onmouseover="javascript:mouseOverComment('comment1');"
        onmouseleave="javascript:mouseLeaveComment('comment1');"
        onfocus="javascript:onCommentFocussed('comment1');"
        onBlur="javascript:mouseLeaveComment('comment1');">comment 1

Unknown Author
8/12/2019 18:00</textarea>

        <div id="comment1_mark" class="commentMarking" 
            style="top:67px;
                    width: 45px;
                    left:-306px;"
            onmouseover="javascript:mouseOverComment('comment1');"
            onmouseleave="javascript:mouseLeaveComment('comment1');">
            bb bb</div> 
    
    <textarea id="comment2" class="comment"s
    onmouseover="javascript:mouseOverComment('comment2');"
    onmouseleave="javascript:mouseLeaveComment('comment2');"
    onfocus="javascript:onCommentFocussed('comment2');"
    onBlur="javascript:mouseLeaveComment('comment2');">comment 2

Unknown Author
8/12/2019 18:00</textarea>

            <div id="comment2_mark" class="commentMarking" 
                style="top:67px;
                        width: 38px;
                        left:-251px;"
                onmouseover="javascript:mouseOverComment('comment2');"
                onmouseleave="javascript:mouseLeaveComment('comment2');">
                    bbbb</div> 

        <textarea id="comment3" class="comment"
        onmouseover="javascript:mouseOverComment('comment3');"
        onmouseleave="javascript:mouseLeaveComment('comment3');"
        onfocus="javascript:onCommentFocussed('comment3');"
        onBlur="javascript:mouseLeaveComment('comment3');">comment 3

Unknown Author
8/12/2019 18:00</textarea>

        <div id="comment3_mark" class="commentMarking" 
                style="top:84px;
                       width: 38px;
                       left:-251px;"
            onmouseover="javascript:mouseOverComment('comment3');"
            onmouseleave="javascript:mouseLeaveComment('comment3');"
            >bbbb</div> 
    </div>
 

</body>
</html>

Actions: View

Attachments on bug 38295: 57998 | 127323 | 153331 | 153332