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

  • 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

  • You'll probably be better off asking HTML coding questions the Internet Explorer Web Development forum. Once you have it working in the browser then it should work the same in the WebView control. If not then we can try to help here.

    --Rob

    • Marked as answer by Anne Jing Wednesday, June 4, 2014 6:41 AM
    Tuesday, May 27, 2014 10:19 PM
    Moderator

All replies

  • Does this work correctly in a browser?

    --Rob

    Saturday, May 24, 2014 12:26 AM
    Moderator
  • I did try in browser it doesn't work correctly, same problem.
    Monday, May 26, 2014 8:48 AM
  • You'll probably be better off asking HTML coding questions the Internet Explorer Web Development forum. Once you have it working in the browser then it should work the same in the WebView control. If not then we can try to help here.

    --Rob

    • Marked as answer by Anne Jing Wednesday, June 4, 2014 6:41 AM
    Tuesday, May 27, 2014 10:19 PM
    Moderator