locked
Webview displaying html file styled using mutli column layout with problem in javacript

    Question

  • I have the following scenario . My html files are displayed inside webview windows 8.1. I do apply css multi column layout style with some javascript on html click in order to move between columns generated by css.

    Here are the css file and js function.

    var myWidth = 860;
    var myGap =1000;
    var webviewwidth = 860;
    
    
    
    
    function getXYposition() {
        var x = event.clientX;
        var y = event.clientY;
    
    
        var k = webviewwidth / 2;
       
        //when clicking to the left
           if (x <= 100)
        {
            if (window.pageXOffset == 0 && document.getElementById("divb").scrollWidth > myWidth) {
              
               
                window.scrollBy((myWidth + myGap - 100  ), 0);
              
            }
            else if (window.pageXOffset == 0 && document.getElementById("divb").scrollWidth < myWidth ) {
                
                window.external.notify('next chapter');
                        }
            else if (window.pageXOffset != 0 && -(window.pageXOffset - (myWidth) - myGap) > (document.getElementById("divb").scrollWidth)) {
            window.external.notify('next chapter');
            }
            else if (window.pageXOffset != 0) {
                window.scrollBy((myWidth + myGap - 100), 0);
            }
        }
        // when clicking to the right
            else if (x >= webviewwidth-100)
        {
            if (window.pageXOffset != 0) {
                window.scrollBy(-(myWidth + myGap - 100), 0);
            }
            else if (window.pageXOffset == 0) {
               window.external.notify('previous chapter');
            }
        }
    
    
    
    }

    I do check X position and when body is clicked it do scroll either left or right accordingly. And when end of file reached I do send notification to code to open next or previous html file, and so on.

    html {
        height: 650px;
        font-size: 24px;
        width: 100%;
        overflow: scroll;
        overflow-y: scroll;
        overflow-x: hidden;
        
    }
    #divb {
         column-width: 640px;
     column-gap:1000px;
        column-rule: 1px solid red;
        height:620px;
           -ms-hyphens: auto;
        text-align:center;
          direction: rtl;
         padding-left:50px;
         padding-right:50px;
            
    
    }

    In html I have link to css file and to script. And js function is called from <html... onclick="getXYposition();">

    All is working fine , css columns are correct .Js is moving between columns. But there is a problem wherever I click and it displays a new column it shifts the column info  a little bit to the left or right according to where I pressed. So the words inside the file will move and wont be all visible. Even though am moving exact amount each time but on each click it shifts text and this gap increases with each click.

    What could be missing in my code?




    • Edited by Mahagh Friday, May 23, 2014 6:37 AM
    Friday, May 23, 2014 6:35 AM

Answers

All replies