Link to home
Start Free TrialLog in
Avatar of Rowby Goren
Rowby GorenFlag for United States of America

asked on

Getting rid of scrollbars in Iframe

Hello

I'm trying to remove scrollbars in an iframe.

This is an html5 site and it's my understanding it must be done in css.

I've also read that if the iframe content is in a different domain that javascript might be needed.

In my next question I will provide the link to the test site.

Thanks for any help!

Rowby
Avatar of Rowby Goren
Rowby Goren
Flag of United States of America image

ASKER

Hello!

This is a link to the test site Test site

And here's a link to the page that is used within the iframe.    There is some inline html regarding scroll bars, but I'm leaving that in until I'm told to remove it by someone here :)

Link to the iframe page

The link that activates the iframe is the upper right menu item "Login New"

Again, the goal of this question is to remove the scroll bars.

Thanks!

Rowby
SOLUTION
Avatar of Dan Craciun
Dan Craciun
Flag of Romania image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
#mbMedia > iframe {
    overflow: hidden;
}

Open in new window

Hi Dan

I modified the html code to the following
<iframe frameborder="0" height="400" width="298" id="LogInForm" scrolling="no" style="overflow:hidden;" src="https://list.drivehubber.com/hubber/Login.aspx" width="300"></iframe></p>

Open in new window


But I am still seeing scrollbars -- in chrome.

Here's the modified page:  modified html

Gary

Do I use specifically #mbMedia > iframe    Or do I need to modify the ID to fit my html markup?

#mbMedia > iframe {
    overflow: hidden;
}

Open in new window

That is based on your current markup, I see you have added it and it's working fine.

Though this is amiss

</head>  ;"

Though since you are using jQuery it would be a fairly trivial exercise to use a modal instead of an iframe
A small modal plugin
http://www.ericmmartin.com/projects/simplemodal/

Stick your login code (only the login html) directly in the page, attach the modal to it's container and you're done.

Kinda bemusing having an iframe that loads another iframe...

I even have a lightbox article here that is a few lines of code to achieve the same look
Work for me :
body {
      overflow:hidden;
}

Open in new window

Hi Gary,

Actually I am using an modal plugin for joomla with this.  

The problem is the logo. I need to get the logo to be a part of the iframe.   That's why I'm using this screwy iframe in a modal 'solution'.

So you can see the issue I am trying to resolve -- I just now added added a new menu item that would be better, but it does not include the logo.   The form page without the logo is hosted on a remote server that I do not have easy access to.     The new menu item is called "Login Better Almost"  Now including a menu item that works "better" but no logo

Here's the live page that I am trying to recreate -- so far as the "Login" button is concerned.  [url="http://drivehubber.com/index.html" Example of "proper" login....... trying to recreate.[/url]  If you go to this page, you will see it working "properly" including the logo image which is on the local server.  An iframe is being used to include the logo on the form. (I did not build this page).   The logon form (without the logo) is on a remote server.  If I could recreate this then all would be solved.

If recreating the above page --  I could use one of the other modal solutions you mentioned that's okay -- I'm not married to the Joomla modal plugin.

Rowby
Just set the background of the iframe or the #mbMedia div to the login_bg.png image
Just set the background of the iframe or the #mbMedia div to the login_bg.png image

Do i do that in the html or the css...
So you just have this single iframe
<iframe width="298" scrolling="no" height="400" frameborder="0" id="LogInForm" style="overflow:hidden;" src="https://list.drivehubber.com/hubber/Login.aspx"></iframe>

and this css on #mbMedia
background: url("http://drivehubber.com/Images/login_bg.png") no-repeat;
(Either inline or in your css file)

Your current popup is bigger than the other popups
Hi Gary

Here's the new css
#mbMedia
background: url("http://drivehubber.com/Images/login_bg.png") no-repeat;

}

Open in new window


And here's the new html:  
<p>
<iframe width="298" scrolling="no" height="400" frameborder="0" id="LogInForm" style="overflow:hidden;" src="https://list.drivehubber.com/hubber/Login.aspx"></iframe>
<p>
	 </p>

Open in new window


Here's the link on the menu item (I think this is where I am messing up now.
<a class="maximenuck LiLogin" rel="lightbox" title="LogIN" href="/iframelogonNewHubber.html">

Open in new window


Interestingly on the "live site" the menu link is  
li class="LiLogin">
<a class="popup" rel="popuprel" href="#">Login</a>
</li>

Open in new window

Which link should I be looking at?
The live site which I am recreating (specifically the LOGIN FORM) is at Live site with Properly working LOGIN button - resulting in a modal with iframe that includes the local logo image

The test page is at test site

The html page with the current iframe is at html page with iframe

BTW I am not sure where the #mbMedia tag is coming from :)

Thanks

Rowby
Errmm I don't see where you have made the changes, you still have two iframes.
I have two iframes in this page?    Where are you seeing the two iframes?

Is this the page with two iframes?

Keep in mind I have a modal coming from the menu item that is being activated when clicked on.
http://brentwoodvillagemarket.com/iframelogonNewHubber.html
...is an iframe (on the main page) which in turn loads your login iframe.

You just need your login iframe.  The outter iframe is just a waste, you are basically loading a page that has nothing of use except load the login iframe.
This is the url that contains only the form:    (no logo)Link that contains only the form - on remote server

Are you saying that is the "login iframe"?  In any case I am now linking directly to that from the corrected Logon.

Now I need to use your css to add the logo image to that as a "background image"?

and this css on #mbMedia
background: url("http://drivehubber.com/Images/login_bg.png") no-repeat;
(Either inline or in your css file)

Still not sure where "mbMedia" is coming from.  Is that somewhere in my existing code?

:)

Rowby
When you click Login it loads this iframe...
<iframe id="mediaId_1395968350950" width="310" height="381" frameborder="0" src="/iframelogonNewHubber.html">
(This is a waste of time)

And that iframe loads this iframe...
<iframe width="298" scrolling="no" height="400" frameborder="0" id="LogInForm" style="overflow:hidden;" src="https://list.drivehubber.com/hubber/Login.aspx"></iframe>

#mbMedia is the div container for the modal login form.
I've added this to my css:


#mbMedia {
background: url("http://drivehubber.com/Images/login_bg.png") no-repeat;
}

Open in new window


If it's being applied, I don't see it -- is it "hiding" behind the "iframe"?

link to page
The parent iframe is being loaded by this
mediaId = "mediaId_"+new Date().getTime()
...

Open in new window

which is in mediaboxAdv.js

What are we always telling you rowby - KISS
You're gonna have add !important as it is being overridden by the inline style, or remove the inline background-image: none;
Hi

If i'm understanding you correctly, I can't remove background-image: none; from the inline style, because the form is hosted by the external company.

So I added it to my local /css/rowbystyle.css as follows.  (Not sure how that can affect a remote file, but let's see_:

#mbMedia {
background: url("http://drivehubber.com/Images/login_bg.png") no-repeat; !important;
}

I can't remove the
It's being added here
media = new Element("div", {id: "mbMedia"}).inject(container, "inside");
in the same js file as above -
/plugins/system/mediabox_ck/mediabox_ck/mediaboxAdv.js
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi Gary,

Almost there.  I just need to deal with the image repeats, and adjust width and height.

Taking a breather!

Thanks for sticking through  this.

Almost there


Should I get rid of the iframe inline height and width of the  and do that in css?   And I guess I should give the iframe and ID????

 #mbCenter {

   background-color: transparent;
  
    border-radius: 1px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  background-image:url('/Images/login_bg.png');
background-repeat:repeat: no-repeat;
}

Open in new window

Rowby
Change #mbCenter {} - rowbystyle.css line 99 to this

#mbCenter {
    background: url("/Images/login_bg.png") no-repeat;
}

Remove the css class #mbCenter {} that you have in the page header
Thanks

Did that.  Now the only remaining issue is how to remove the extra width and height of the overall box --- the transparent area.

I think that's in the plugin and may be dynamic -- there is an admin panel for the plugin but I don't see any paramaters to change that.  

I might need to ask the developer of the plugin on how to do that.  He's pretty quick to respond -- unless you have an idea.

<div id="mbCenter" style="top: 273px; left: 894px; width: 331px; height: 431px; margin-top: -225px; margin-left: -175px;" class=""><div id="mbContainer"><div id="mbMedia" style="opacity: 1; background-image: none; width: 311px; height: 381px;"><iframe width="311" height="381" frameborder="0" src="https://list.drivehubber.com/hubber/Login.aspx" id="mediaId_1395982511397"></iframe></div></div><div id="mbBottom" style="opacity: 1; width: 291px;"><a id="mbCloseLink" href="#"><big>×</big></a><a id="mbNextLink" href="#" style="display: none;"><big>»</big></a><a id="mbPrevLink" href="#" style="display: none;"><big>«</big></a><div id="mbTitle"></div><div id="mbNumber"></div><div id="mbCaption" style="width: 291px;"></div></div></div>

Open in new window

Hi Gary
I am having too many problems with the Joomla plugin I am using.  

The developer gave me some suggestions, but I am still having problems.

So I am thinking of using the one you recommended.

SimpleModal Demos

Before I do the swap, I just want to confirm with you that I should go ahead and do that.

For example, on that page I see the demo of Flickr Badge Viewer.   Would that be the best one to give me this look:  Live site - look at Login Button for effect that is needed


And then there is your article you mentioned a few days ago:
I even have a lightbox article here that is a few lines of code to achieve the same look    Link to article
Thanks

Rowby
I've gone ahead and am using your own "simple" script as a guide.  I've already put the javascript in the head.

To keep things simpler I'm moving this whole business over to my other development site.

So going forward, this is the page I am working on:  Switcheroo page for this EE question.

Now I am going to see how to do this with the Logon menu link on that page.

....ROwby
HI

Using the menu for the link, here are the various options available to me in the Joomla menu manager for this specific menu item.

The fields contain the fields left over from my previous attempt to get the popup to work.

User generated image
I've added the following css to the /rowbystyle.css
 .document_backdrop{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	background:#000;
	opacity: .0;
	filter:alpha(opacity=0);
	z-index:999998;
}
 
.lb_container{
	position:absolute;
	background:#ffffff;
	z-index:999999;
	padding:10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.lb_container img{
	max-width:300px;
	max-height:200px;
}

Open in new window

Rowby
Busy right now, will be free later this evening (my time)
Hi Gary,

I would not want to take up your Saturday.   Appreciate your help -- whenever you have time to get back into this.

No hurry at all.

:)

Rowby

In the meantime, here are some links and notes:

The link to the background image is Link to background image  The background image is 311px × 381px.

Note:  In my previous comment the "Image" link in the screen capture of the Joomla menu manager is not for an external imagelink such as the popup background image. It's to add an image to the menu item itself.

In your article you mention to link to this version of /1.9.1/jquery.  My existing header has a internal link to the following jquery version: jquery-1.9.0.min.js"   Is that okay?  

Here's the link to the logon form logon form

Link to live site including popup I am attempting to recreate: popup from orginal site as example
Just so you can see what parameters I have easy control over, I went into the menu admin panel and added dummy names to the various fields.User generated image
<li data-level="1" class="maximenuck item200 last level1 ClassLIElementRowby" style="z-index : 11995;"><a class="maximenuck lightbox" href="https://list.drivehubber.com/hubber/Login.aspx#anchorRowby" title="Okidokie" rel="popuprel"><span class="titreck">LOGIN NEW</span></a></li>            </u 

Open in new window

Not sure exactly what creates the spanclass "titreck, but the menu manager was created by a French developer who names most of his extensions with "ck" suffixes --- so I googled "titre" and found it is French for "Title".    I assume you don't need control of a title tag, but if you do let me know and I'll ask the developer where it is changed, because I couldn't find a place to change that in the menu module.

Link to development site: Development site link
Ignore this comment.  I am working on something that I hope will fix this....
I am trying one more thing that I think will work.  See my next comment.... :)
Hi Gary

Looks like the craziness is just about over.

Here's a clean Joomla install with the joomla modal plugin installed and working with the background.

I need to clean a few things up.  But it looks like it's almost okay now.

The modal is working 95 percent now

Take a look.   The modal does a weird resizing thing, but I think the developer can give me a fix for that.

One thing I'd like to fix is when the wrong login is used, scroll bars show up.

I guess I could change the size of the modal/popup to allow for this.  But if we could put some css or whatever into the html or css to force no scoll bar.  Maybe the developer's fix for the resizing will handle that????

Also I need to move the little "X" higher so it is black and in the box, or remove the x altogether.  I'll look at the code.....  And will ask the developer about that.

I posted a pretty detailed question on the developer's forum, regarding the remaining fine tuning.  He's pretty good at getting back to me, so let's see what he says.

Whew!

Rowby
I've requested that this question be closed as follows:

Accepted answer: 0 points for rowby's comment #a39967924
Assisted answer: 50 points for DanCraciun's comment #a39960138
Assisted answer: 450 points for GaryC123's comment #a39960740

for the following reason:

Hello

I'm closing this question, because most of it has been resolved.

I'm opening a new question which zeros in on the modal size.

I think that is hopefully a "simple" (it never is) image size fix.

Rowby
Sorry,

I didn't wan
Hi I was able to fix all of this by switching back to the Joomla modal thing and after some tweaking and resizing the image, etc, I finally got rid of the scrollbars.

I previously closed the question giving me some points.  That was in error.

I'm re-awarding the points and closing the question again.

Thanks for sticking through this most convoluted question!

Rowby