HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


[SOLVED] - IFRAME within a COMCODE page - help needed

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#62057 (In Topic #13516)
Avatar

Community saint

Allow me the luxury of 'dismissing' observations as to WHY I want to use an IFRAME at all, and as to WHY I even need another Guestbook in preference to the ocP-bundled one …

  • LazarusGB is one I have used over many years, and one which I have managed to successfully 'import' into whatever CMS engine I was currently using - including ocPortal
  • Sticking to LazarusGB has also let me continue to 'keep' the guestbook comments that have acumulated over the years
  • I have managed to successfully 'import' this guestbook into older versions of ocPortal (← 5.x.x), so it didn't seem to be an insurmountable obstacle for the latest version

Now, here's the rub! Inserting the guestbook into a Comcode page isn't a major problem, however, I now find that I am being forced to state a fixed height. This displays pretty amateurishly, with large spaces below the display on some pages, and vertical scrollbars appearing on others! Omitting the 'height' parameter, or setting it to 100% or auto, doesn't work either!

I have even resorted to calling up a 'no-scroll, auto-adjust' independant JavaScript in my HEADER.tpl to overcome this problem, but even that refuses to auto-adjust.

Here is the actual code that I have inserted into the body of the Comcode page, bearing in mind that the page being called in the IFRAME is on the same domain, so there shouldn't be any security issues here …

Code

[html]<iframe id="lazarusgb" name="lazarusgb" title="lazarusgb" src="http://www.tapmal.com/anglo/lazarusgb/index.php" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" style="overflow:visible; width:100%; height:1500px;"></iframe>[/html]

Any advice from JS pundits, especially those that are familiar with ocPortal and the IRAME parameters, would be very much appreciated!

Thanks.

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#62058
Avatar

I think we discuss it in our integration tutorial, although it's possible that is outdated.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#62062
Avatar

Community saint

ocPortal Tutorial: Integration of ocPortal and other installed scripts/applications - ocPortal.com

Edit: Glad you brought this up Fletch. As you are using another guestbook, one of my sites is using 2-D visual chatrooms which will replace the chat that comes with ocPortal. And using iframes to add it to the site.

Eric DeMars . com
My electronic portfolio and personal site. Uses ocPortal!
Back to the top
 
Posted
Rating:
#62064
Avatar

Community saint

@both

I've looked at the tute, but it doesn't resolve my initial requirement to NOT have a vertical scroll bar.

The tute assumes a fixed height - exactly what I am trying to avoid.

I KNOW this worked previously, but it has probably become hostage to the combination of enhanced functionality in the latest browser releases and the demands of the W3C standards committee.

LazarusGB actually works without any problem when inserted into a Comcode page using a fixed-height iframe. The display is a bit 'kludgy', but I doubt many, if any, of my users will even notice!

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#62065
Avatar

Hi,

I think you might want to read the iframe part of the tutorial again, it does actually provide a Javascript solution to height. I'm just not sure how up to date the Javascript code is with newer generations of browsers.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#62070
Avatar

Community saint

@Chris

Thanks for the continued 'encouragement'. Looked really hard at the tute script, but my (very) limited knowledge of Javascript didn't enlighten me any further, and using the code from the tute didn't resolve the issue!

HOWEVER!

@Chris & Eric

Trawled the web and got 'educated' on the use of JQuery libraries, and in particular the JQuery autoHeight plugin!

A good start point is to visit lost-in-code.

Placing the jquery.js and autoHeight.js in the appropriate place in HEADER.tpl and then giving the iframe a class of 'autoHeight' solved the problem.

Warning for others that may wish to use this 'solution': The preview window refuses to display the iframe with an adjusted (auto) height. It is only when you've 'saved' your edit that the script(s) kick in.

You can spend quite a while scratching your head and double-checking your typing if you rely only on the preview window to show your hard work!!!

 :thumbs:



Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#62071
Avatar

Community saint

Thanks Fletch. I'll look into that for the visual chatrooms.

Eric DeMars . com
My electronic portfolio and personal site. Uses ocPortal!
Back to the top
 
Posted
Rating:
#62871
Avatar

Community saint

Eric said

Thanks Fletch. I'll look into that for the visual chatrooms.

Re-visiting this one Eric as I 'discovered' that it suddenly stopped rendering in IE. Must have been a recent M$ update that broke it, because it certainly worked when I first applied the script.

I've also discovered that this script is NOT connected to the JQuery library, so any mention of it as being a JQuery driven script is misleading.

I've had to make an adjustment to the script to get it to work with IE as well as the others. Got the info off a smart cookie who seems to know his JS.

Here is the 'edited' version which you might want to tuck away for future deployment …

Code

function doIframe(){
   o = document.getElementsByTagName('iframe');
   for(i=0;i<o.length;i++){
      if (/\bautoHeight\b/.test(o[i].className)){
         setHeight(o[i]);
         addEvent(o[i],'load', doIframe);
      }
   }
}

function setHeight(e){
   if (e.Document && e.Document.body.scrollHeight) //ie5+ syntax
   e.height = e.contentWindow.document.body.scrollHeight;

   else if (e.contentDocument && e.contentDocument.body.scrollHeight) //ns6+ & opera syntax
   e.height = e.contentDocument.body.scrollHeight + 35;

   else (e.contentDocument && e.contentDocument.body.offsetHeight) //standards compliant syntax - ie8
   e.height = e.contentDocument.body.offsetHeight + 35;
}



function addEvent(obj, evType, fn){
   if(obj.addEventListener)
   {
   obj.addEventListener(evType, fn,false);
   return true;
   } else if (obj.attachEvent){
   var r = obj.attachEvent("on"+evType, fn);
   return r;
   } else {
   return false;
   }
}

if (document.getElementById && document.createTextNode){
 addEvent(window,'load', doIframe);   
}

I can confirm it works in all browsers, HOWEVER, I've also noticed a slight anomaly for IE. When the script adjusts the iframe for a page that has a 'long' height, it is reluctant to readjust to a shorter page when it is called next. Refreshing the browser sorts everything, but I think there is something missing somewhere.

But it is useable …

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#62876
Avatar

Community saint

Thanks Fletch. I'm still playing around with mine because the page I am adding to the iframe bunches up together and seeing if I can rearrange some of the stuff on the page so it looks right in the iframe.

I have no control over the visual chat look, just able to put it in the iframe. And doing so, the menu looks horrible and unusable… lol

Eric DeMars . com
My electronic portfolio and personal site. Uses ocPortal!
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: