Iframe css manipulation when navigation target page

Hi Guys!

I need this iframe for a facebook tab, since they changed the width to 520px. The original page in the iframe is 700px wide, and I’ve changed a few CSS properties using the frameReady plugin. It’s works just fine, but trouble starts, when i’m navigating the target site, the CSS properties I’ve changed goes back to the original props.

This is my code:

 <script>
 $.frameReady( function() {
        $("#gmap-auto1map-gmap0").css("width", "520px");
        $(".views-view-grid").css("width", "520px");
        $(".title").css("font-size", "9px");
 },
 "myFrame"
 ); 

 </script>

The page i’m talking about is this:

Try clicking any of the ‘view on map’ links, then you’ll see where I’m getting at.

How could I work around this? Can I make it apply the script every time something new loads into the iframe?

Well, thats what i already did, right? :slight_smile: Or are you talking about changing content, which is loaded into the iframe after navigating the target site?

I see yes. Maybe you can make those columns smaller?
I saw they have class=“col-1”, “row-2” or “title” etc… try modifying them so the 3 columns fit next to each other in 520px max.

But I don’t know in which .css file I have to look for :smiley:


<link type=“text/css” rel=“stylesheet” media=“all” href=“/modules/node/node.css?4” />
<link type=“text/css” rel=“stylesheet” media=“all” href=“/modules/system/defaults.css?4” />
<link type=“text/css” rel=“stylesheet” media=“all” href=“/modules/system/system.css?4” />
<link type=“text/css” rel=“stylesheet” media=“all” href=“/modules/system/system-menus.css?4” />
<link type=“text/css” rel=“stylesheet” media=“all” href=“/modules/user/user.css?4” />
<link type=“text/css” rel=“stylesheet” media=“all” href=“/sites/all/modules/cck/theme/content-module.css?4” />
<link type=“text/css” rel=“stylesheet” media=“all” href=“/sites/all/modules/ckeditor/ckeditor.css?4” />
<link type=“text/css” rel=“stylesheet” media=“all” href=“/sites/all/modules/filefield/filefield.css?4” />
<link type=“text/css” rel=“stylesheet” media=“all” href=“/sites/all/modules/gmap/gmap.css?4” />
<link type=“text/css” rel=“stylesheet” media=“all” href=“/sites/all/themes/ninesixty/styles/framework/reset.css?4” />
<link type=“text/css” rel=“stylesheet” media=“all” href=“/sites/all/themes/ninesixty/styles/framework/text.css?4” />
<link type=“text/css” rel=“stylesheet” media=“all” href=“/sites/all/themes/ninesixty/styles/framework/960.css?4” />
<link type=“text/css” rel=“stylesheet” media=“all” href=“/sites/all/themes/ninesixty/styles/framework/debug.css?4” />
<link type=“text/css” rel=“stylesheet” media=“all” href=“/sites/all/themes/topcamp/styles/styles.css?4” />
<link type=“text/css” rel=“stylesheet” media=“all” href=“/sites/all/themes/topcamp/styles/jcarousel_style.css?4” />
<link type=“text/css” rel=“stylesheet” media=“all” href=“/sites/all/themes/topcamp/styles/jquery.jcarousel.css?4” />
<link type=“text/css” rel=“stylesheet” media=“all” href=“/sites/all/themes/topcamp/skins/tango/skin.css?4” />
<link type=“text/css” rel=“stylesheet” media=“all” href=“/sites/all/themes/topcamp/css/south-street/jquery-ui-1.7.2.custom.css?4” />

Shame on your boss! It doesn’t work in EI7? Happy to hear it working on your end Stomme :slight_smile:

Anyway, now that the problem is clear :slight_smile: As far as I know, there’s no jQuery event that triggers when the target page is navigated or updated. I’m not so into javascript, so anyone knows an eventlistener or something that could be used in this case?

I’m not sure if you can change content that’s loaded into an iframe by javascript/Jquery on the main document.
If the content is loaded into a <div> by something like php, you probably can modify the stuff appearing in the <div id=“trigger”> by calling it’s trigger id.

I’m using IE 7.0 at the moment.
(my boss’ idea, not mine)

Does it look like this?

It does on my end. FF3/Linux.

Off Topic:

I don’t see Helsinki either, but wouldn’t that be because there are not camping things there? I see nothing in Finand at all anyway.

Yes, I meant that.

Hmm… that css property in the last part of the header your refering to, is the one i modified directly on the div called #gmap-auto1map-gmap0. It works, but all 3 css modifcations reset when the target page is navigated, causing some of the list and map to hide on the right. Thats what i need to fix :frowning:

Btw, try switching on hybrid as map option… I found your (assumable) home city :slight_smile:

On the original page loaded in your Iframe, where it’s 700px, it’s defined in one of the last parts of your <head> section:
http://www.topcamp.dk/se-plads/59

jQuery.extend(Drupal.settings, { "basePath": "/", "googleanalytics": { "trackOutgoing": 1, "trackMailto": 1, "trackDownload": 1, "trackDownloadExtensions": "7z|aac|avi|csv|doc|exe|flv|gif|gz|jpe?g|js|mp(3|4|e?g)|mov|pdf|phps|png|ppt|rar|sit|tar|torrent|txt|wma|wmv|xls|xml|zip" }, "gmap_markermanager": [  ], "gmap": { "auto1map": { [COLOR="Red"]"width": "700px",[/COLOR] 

Or you have to change the width right there, or you have to define it somewhere in your testpage for facebook:

Edit: I couldn’t find Helsinki on that map :frowning:

Heh, css-hell… I’d rather stay clear of those files :wink:

I beginning to think my iframe mods don’t show correctly on your side. Which browser do you use? Does it look like this?: