Welcome to WebmasterWorld Guest from 54.167.177.207

Forum Moderators: open

Remove border from div within iframe

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

5+ Year Member



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)

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



:: 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)

WebmasterWorld Senior Member 5+ Year Member



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)

5+ Year Member



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

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member 5+ Year Member



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)

5+ Year Member



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)

WebmasterWorld Senior Member 5+ Year Member



<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>
 

Featured Threads

Hot Threads This Week

Hot Threads This Month