Removing border from Filemaker Web Viewer to Create Image Slider

StackOverflow https://stackoverflow.com/questions/22175258

  •  03-06-2023
  •  | 
  •  

Question

Hi there I am trying my hand at inserting custom HTML into the Filemaker Web Viewer but am having a trouble removing the border from the web viewer when I add the HTML Doctype tag to the code. The border is removed if I take out the tag but without the tag the slideshow won't function. Any ideas?

    "data:text/html,

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    #slideshow { 
    margin: 0; 
    position: absolute; 
    width: 250px; 
    height: 250px; 
    padding: 0;  
    overflow:hidden;
    }

    #slideshow > div { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    overflow:hidden;
    bottom: 0px; 
    }

    </style>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
    <script src='https://dl.dropboxusercontent.com/u/236154657/CVI%20Slideshow.js'></script>


    </head>


    <body style='border=0;margin=0;overflow:hidden'>

    <div id='slideshow'>

    <div>
    <img src= 'http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg'  style='width:100%; height:100%;'>
    </div>

    <div>
    <img src= 'http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg'  style='width:100%; height:100%;'>
    </div>

    </div>


    </body>

    </html>

    "
Was it helpful?

Solution

The issue that you're running into isn't filemaker, it's the web code itself.

The HTML and body tags get some default styling applied to them by the web browser. If you take your code and write it out in just a regular html file you can see the padding as well.

Try adding this to your style tag:

html,body{
    padding:0px;
    margin:0px;
    height:100%;
    width:100%;
}

This will tell the web page that your html and body tag need to take up the entire browser window (the height and width rules) and that they should have no padding or margins. This will make sure your image tag is flush against the boundaries of the web viewer.

Hope this helps!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top