Remove border from div within iframe

Forum Moderators: open

Message Too Old, No Replies

Remove border from div within iframe

greencode

7:10 pm on Apr 13, 2013 (gmt 0)

There's a really annoying grey border on an iFrame I'm trying to add to a site I'm working on but I can't get rid of it.

The code is

<iframe id="strava" height='160' width='100%' frameborder='0' style="" allowtransparency='true' scrolling='no' src='http://app.strava.com/clubs/shift/latest-rides/7fc3de7b9d74afbba847b1b19b8487b7471acd68?show_rides=false'></iframe>

The div that has the grey border is called ".widget"

and I've tried to add this code

<script>$("#strava").contents().find(".widget").css("border","none");</script>

But that doesn't seem to work.

Any ideas or advice would be greatly appreciated.

lucy24

8:57 pm on Apr 13, 2013 (gmt 0)

:: quick detour to page that I know uses an iFrame ::

Did you try <frameborder = "no">? That's what mine says.

You could also try cheating. Let the css say

iframe {border: 1px solid transparent;}

(I had to go look this up. "transparent" as a universal color is CSS3, so it's risky, but as a border color it's CSS2 and should be OK.)

daveVk

5:05 am on Apr 14, 2013 (gmt 0)

from [api.jquery.com...]

The .contents() method can also be used to get the content document of an iframe, if the iframe is on the same domain as the main page.

Is that the case ?

greencode

7:41 am on Apr 14, 2013 (gmt 0)

Unfortunately not.

birdbrain

1:49 pm on Apr 14, 2013 (gmt 0)

Hi there greencode,

does this sneaky code help...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>hiding iframe content</title>

<style type="text/css">
body {
  margin:0;
 }

          /* for Firefox and Wewbkit */
#iframe-container {
    background:-moz-linear-gradient(top,#fff 55%,#eee);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(55%,#fff),to(#eee));
  }
#inner {
    height:136px;
    width:800px;
    margin:auto;
    overflow:hidden;
  }
#strava {
    display:block;
    width:804px;
    height:160px;
    border:0;
    margin:-2px 0 0 -2px;
  }
#strava-link {
    width:800px;
    margin:auto;
    overflow:hidden;
  }
#strava-link a {
    float:right;
    line-height:22px;
    padding:0 10px;
    border-radius:0 0 5px 5px;
    background-color:#f26522;
    font-size:10px;
    color:#fff;
    text-decoration:none;
  }
#strava-link a:hover { 
    text-decoration:underline;
  }  
</style>


<div id="iframe-container">
<div id="inner">
<iframe id="strava" 
 scrolling="no"
 src="http://app.strava.com/clubs/shift/latest-rides/7fc3de7b9d74afbba847b1b19b8487b7471acd68?show_rides=false">
</iframe>
</div>
</div>

<div id="strava-link">
 <a href="http://www.strava.com/clubs/shift?&amp;utm_medium=widget&amp;utm_campaign=club_share&amp;utm_content=16518">
 View all of SHIFT&#x27;s activity on Strava &raquo;
 </a>
</div>

</body>
</html>

birdbrain

daveVk

1:04 am on Apr 15, 2013 (gmt 0)

Your script needs to execute after the iframe has loaded, try moving code to iframe onload.

greencode

4:34 pm on Apr 15, 2013 (gmt 0)

Thanks for everyone's help with this. DaveVk, can you let me know how you do this.

daveVk

11:27 pm on Apr 15, 2013 (gmt 0)