Indexhibit Support

Impressum

horizontal menu / iframed trouble

Liene / 2009-04-30 12:46:28   

Hi guys,

Allow me to start of by showing my appreciation for what you guys are putting down!
Indexhibit is just great, it just works, I love the clean design and easy usage...!
I also learned just about everything I know from HTML and CSS editing here and being a stubborn (I don’t like to give in easy) person I almost solved all my problems using the forum. But for now I’m stuck. I believe I know where the problem is, I just don’t know how to solve it. (and I’m afraid everybody is going to say my CSS is a mess because I’ve been experimenting with it and I’m still a rookie to it)

My site is Liene Meneve
After a few hours I managed to get menu horizontal but I believe it’s this menu that is making things difficult.

I’m trying to integrate a 'Say Hi To Me' in my page with iFrame plugin. Now, so far so good. 'Say Hi To Me' is installed properly, and so is the iFrame plugin. But now a scroll bar pops up… I believe this is because I erased the #menu in my style CSS (and replaced it to get the menu horizontal, for more info see CSS below) iFrame plugin tries to get the height from the #menu (which is not there anymore..) so that’s probably the reason ‘say hi to me’ doesn’t show up as it should be, right?

So I changed my iframed plugin, so that it would get the height of #content…
Withouth any result. So i just reinstalled the iframed plugin.

I really would appreciate it if anyone could tell me what to do !?

Thanks,

William & Liene

Say hi to me = Say Hi To Me
Say hi to me in indexhibit = say hi to me in indexhibit
iframed now using = standard
Style.css = CSS

Vaska A / 2009-04-30 13:18:37   

Yes, this would be a problem with iframed...it was really developed for a particular purpose (left and right frame use).

The problem is is rather simple...the code for iframed is looking for the height of the #content div. But, this div is not very tall because of your customizations. So, you need to edit. I'm just tossing this out but it could work...change the javascript part in the plugin to this:

  1. // get width of #content 
  2. frame_x = $('#content').width(); 
  3. // get height of THE WINDOW
  4. frame_y = $(window).height(); ¬†¬†¬†¬†
  5. // apply height and width 
  6. $('#iframed').css('width', frame_x); 
  7. $('#iframed').css('height', frame_y - 200);

All I'm doing here is using the height of the browser window and then subtracting a safe amount from it to account for your header and some decent looking margin at the bottom.

Try it...tell us how this works...

Liene / 2009-04-30 13:57:08   

Thx Vaska,

I replaced the javascript part just like you suggested, but it didn't turn out well ...

As you can see the box where the ‘say hi to me’ appears in, has even become smaller..
Suggestions?

Thanks again!

Vaska A / 2009-04-30 13:59:21   

Noooooooooooooooooooooo...

This?

  1. frame_y = $('http://www.lienemeneve.be/sayhitome').height();

Should be...like above...

  1. frame_y = $(window).height();
Liene / 2009-04-30 13:59:46   

mm the image i added didn't came through...

Image

Vaska A / 2009-04-30 14:00:52   

I think you should reduce the width of it as well so you don't get the horizontal scroll.

Liene / 2009-04-30 14:07:18   

You're right about the reduction that needs to be done...

But still, I first replaced the javascript part just like you said and got what the image looks like. Then I started to mess around and tried filling in the link (Rookie Wild Style)

So no progress so far...

Vaska A / 2009-04-30 14:15:31   

You shouldn't have this twice at the top of your document...

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  5.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  7. <head>
Liene / 2009-04-30 14:32:18   

And which document are we talking about here?
I’m sorry but I can’t find any document where this is mentioned twice…

Vaska A / 2009-04-30 14:33:25   

The index.php file...the template for your site...the file you've been editing.

holaferf / 2011-07-13 23:26:15   

didnt work for me
i solved out like this
i dunno if its the right way to do this, but workd for me :)

{
    // get width of #content
    frame_x = $('#content').width();
    // get height of #menu
    frame_y = ('88%');
    
    // apply height and width
    $('#iframed').css('width', frame_x);
    $('#iframed').css('height', frame_y);
}

This thread has been closed, thank you.