homepage Welcome to WebmasterWorld Guest from 54.161.220.160
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Remove border from div within iframe
greencode

5+ Year Member



 
Msg#: 4564534 posted 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

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



 
Msg#: 4564534 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4564534 posted 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

5+ Year Member



 
Msg#: 4564534 posted 7:41 am on Apr 14, 2013 (gmt 0)

Unfortunately not.

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4564534 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4564534 posted 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

5+ Year Member



 
Msg#: 4564534 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4564534 posted 11:27 pm on Apr 15, 2013 (gmt 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>
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved