Welcome to WebmasterWorld Guest from 54.145.53.251

Forum Moderators: open

Message Too Old, No Replies

Remove border from div within iframe

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

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 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.
8:57 pm on Apr 13, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12702
votes: 244


:: 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.)
5:05 am on Apr 14, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 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 ?
7:41 am on Apr 14, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 0


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

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


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
1:04 am on Apr 15, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


Your script needs to execute after the iframe has loaded, try moving code to iframe onload.
4:34 pm on Apr 15, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 0


Thanks for everyone's help with this. DaveVk, can you let me know how you do this.
11:27 pm on Apr 15, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


<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" onload="$('#strava').contents().find('.widget').css('border','none');"></iframe>