Solved

Getting rid of scrollbars in Iframe

Posted on 2014-03-27
40
227 Views
Last Modified: 2014-04-03
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
0
Comment
Question by:Rowby Goren
  • 23
  • 15
  • +1
40 Comments
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39960109
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
0
 
LVL 34

Assisted Solution

by:Dan Craciun
Dan Craciun earned 100 total points
ID: 39960138
If you add to the iframe:
scrolling="no" style="overflow:hidden;"

the scroll bars dissapear in Chrome.

HTH,
Dan
0
 
LVL 58

Expert Comment

by:Gary
ID: 39960139
#mbMedia > iframe {
    overflow: hidden;
}

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39960427
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

0
 
LVL 58

Expert Comment

by:Gary
ID: 39960441
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
0
 
LVL 58

Expert Comment

by:Gary
ID: 39960447
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
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39960448
Work for me :
body {
      overflow:hidden;
}

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39960488
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
0
 
LVL 58

Expert Comment

by:Gary
ID: 39960510
Just set the background of the iframe or the #mbMedia div to the login_bg.png image
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39960514
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...
0
 
LVL 58

Expert Comment

by:Gary
ID: 39960516
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
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39960536
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

0
 
LVL 58

Expert Comment

by:Gary
ID: 39960538
Which link should I be looking at?
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39960548
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
0
 
LVL 58

Expert Comment

by:Gary
ID: 39960559
Errmm I don't see where you have made the changes, you still have two iframes.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39960563
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39960569
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.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39960578
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
0
 
LVL 58

Expert Comment

by:Gary
ID: 39960590
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.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39960595
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
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 58

Expert Comment

by:Gary
ID: 39960605
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
0
 
LVL 58

Expert Comment

by:Gary
ID: 39960606
You're gonna have add !important as it is being overridden by the inline style, or remove the inline background-image: none;
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39960627
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
0
 
LVL 58

Expert Comment

by:Gary
ID: 39960633
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
0
 
LVL 58

Accepted Solution

by:
Gary earned 400 total points
ID: 39960635
From #mbCenter {} remove

   background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);

and that should be it.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39960703
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
0
 
LVL 58

Expert Comment

by:Gary
ID: 39960740
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
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39960777
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

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39963890
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
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39964053
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
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39964076
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.

Joomla menu options
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

0
 
LVL 58

Expert Comment

by:Gary
ID: 39964084
Rowby
Busy right now, will be free later this evening (my time)
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39964090
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
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39965406
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.Updated parameters in menu module
<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
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39966915
Ignore this comment.  I am working on something that I hope will fix this....
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39967030
I am trying one more thing that I think will work.  See my next comment.... :)
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39967924
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
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39976941
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
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39976942
Sorry,

I didn't wan
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39976947
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
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
spacing 5 27
Jquery Data table pagination not working ? 12 23
CSS Divs in Safari 3 18
modify h2 4 8
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now