Usability question: Iframe or DIV overflow-scroll

Hi,
I have designed a site: www.banacreative.com that uses a DIV
with
overflow scroll for the text content area. From a design
standpoint I
don't like endlessly scrolling pages filled with lots of
boring text, so
I have chosen to put the long text in a scroll DIV keeping
the design
intact. I have gotten some feedback that having two scroll
bars - one
for the HTML page, and one for the DIV - is confusing. I'm
therefore
looking for comments on this. Is this something to be avoided
in
general, or is this an acceptable solution?
TIA

BruceCSI2 wrote:
> I've created pages with both IFrames and scrolling divs.
The bottom scrollbar
> of the IFrame doesn't really scroll all that much so
it's not really an issue,
> and as on your site the bottom scrollbar of the div is
actually grayed out so
> it's not an issue at all. It would be nice to get rid of
it,
just use any other browser than IE to get rid of it
> but it's
> nonfunctional.
>
you're talking some IE-Windows-specific-behavior described as
if it was something everybody saw...
In my browser (Safari) I get two scroll bars (page, and
scrolling area). The scroll bar of the
scrolling area is in part hidden, as it goes beyond my
browser window height.
So I have to scroll the page anyways, to see the whole of the
inner scrolling area. And that, is
very annoying.
seb ( [email protected])
http://webtrans1.com | high-end web
design
An Ingenious WebSite Builder:
http://sitelander.com

Similar Messages

Editable div using overflow: scroll not eitable in Contribute

I have created a website using Dreamweaver 5. Within the site I created a template page with an editable text region. Within that region I have a div that has a overflow: scroll; command on some of the pages. On all the pages that I have used this div within the editable region my customer, who is using Adobe Contribute, can not edit the text. What do I need to do to make this text accessible to them while using Contribute to edit the copy.

my customer, who is using Adobe Contribute, can not edit the text.
I'm not sure you can do anything here. But ask them to try double clicking on the text within that region.

CSS - Overflow: Scroll

Hi, I have a question about Overflow: Scroll option. heres
the scneario:
Say I have a box 500px wide, 250 high. theres too much text
to fit into that box, so i go into my css positioning tab and
change "Overflow: " to "Overflow: Scroll". Now in a browser the box
will have a scroll bar. But it has both horizonal & vertical
bars. the bottom one (i'm calling it the horizontal scroll bar) is
grayed out and you cannot use it, but the vertical scroll bar is
usuable so you can scroll up and down to read the text, which works
great. But heres the issue: the horizontal one looks really ugly...
how would i make it so the horizontal one does not show, and only
the vertical scroll bar will? or vis versa for other scenarios?
While were at it, could i change the way the scroll bar
looks, like some websites do?
Thanks.

I have begun always using
:root { overflow-y:scroll; }
to force a scrollbar on FF and Safari on all pages. It seems
to work
fine....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"ZzarkZul" <[email protected]> wrote in
message
news:goa6h3$b2a$[email protected]..
> Hmm overflow-y (and x) arent working quite right. it
sometimes does the
> job,
> but other times it doesn't. i am using firefox. Also
when i type in the
> code i
> get a green squiggle line under the text, and it says:
Unsupported
> property:
> overflow-y, may cause problems with firefox, ie on mac,
safari, etc
> etc....
>

Scroll indicator sometimes disappears in Safari iOS 8.3 bug. (On scrollable divs using "-webkit-overflow-scrolling:touch")

Hi,
After updating to iOS 8.3 on an iPad Air, it seems something is wrong with the scroll indicator on scrollable divs in Safari.
It scrolls like it should be, but randomly I just don't get to see the scroll indicator on the right side of the scrollable div.
You can see the problem when refreshing the page, sometimes the scroll indicator is visible and sometimes it is not.
Here is a small example, to view on an iPad/Safari: http://www.roidesrois.be/new_site/div_scroll.html
The code used should be correct. Before the update I never saw this problem before.
Here is an example from somebody else. http://www.quirksmode.org/css/css2/overflowscrolling.html
I see the exact same problem there too.
When using Chrome or Mercury on an iPad I don't see this problem, only in Safari.
Can someone please confirm this problem or maybe has a solution for this?
Is this a bug in Safari that needs to be solved?
Thnx in advance,
Kind regards.
Lester.

Hello to both of you.
Don't know if this will clarify or mudle the issue but in the same platform context I have a similar issue. Don't know if you are familiar with the LaPresse App (go to AppStore and download it: it is free) but it has vertical text that begins mostly offscreen (just a small portion is visible), which you can swipe upwards and eventually beyond the top, without the tablet page height ever resizing at any moment. It behaves very similarly to an Adobe Premiere title starting off-screen at the bottom, then rolling upwards (e.g. as you would swipe, on the table), and ending off-screen over the top. That's what I'm trying to reproduce using Muse and cannot achieve. As soon as I move the text below the defined page size, Muse automatically expands that page size to accomodate the new text position. I thought of turning off vertical scrolling in the Page properties to force a static page height but the scrolling options in Tablet layout are disabled (by the way: why is that?)
Gil

iframe tag + disable horizontal scroll-bar

Hi..
I want to disable horizontal scroll-bar only.The code is::
<iframe>
style="overflow-x:hidden;overflow-y:visible"
</iframe>
It's working in IE but not in mozilla firefox.
Can anyone plz help.
regards
Sonia

Funny, I tried it out; it's working in Firefox but NOT in IE 7.
Check these out and do a little tweaking I guess....
http://www.brunildo.org/test/Overflowxy2.html
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
Not a Java question though...

IE7 issue with Thumbnails div & Overflow

this has to do with layout of the the gallery page and an IE7
CSS issue.
I was playing with the Photo gallery demo and decided to
resize the thumbnails div to get different shape and found an issue
with IE7 and the overflow. if the tumbnail div height is set to say
100px, and set overflow:auto; it makes sense that the thumbnails in
the bottom 3 rows would not be visible unless you scrolled the div.
well it works fine in Firefox but IE draws thumbnails right
over the height boundry and on into the next div below. I thought
IE7 was supposed to fix the CSS hacks needed.
what is the hack to fix this?

It could be a function of how the script is written and
changes being
made at the object-level. Rather than set position to
relative, you
might try using the proprietary Microsoft zoom property to
give the
naughty container layout.
your-container {zoom: 1;}
If that doesn't work, then you can resort to position:
relative.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"

DIV Tag Scroll Bars

I have a AP Div box that I want to hold more text than the
vertical length has room for. I checked the box in the Positioning
category for the overflow to scroll. This is all good. But is there
any way to specify that I don't want the scroll bar bottom gray
box?
http://www.communicationssquared.com/C2newsite/services.html
I can deal with the right scroll bar, because it's useful,
but do I have to have that gray non-scroll bar on the bottom?
Thanks.

ethomasmcginnis wrote:
> I have a AP Div box that I want to hold more text than
the vertical length has
> room for. I checked the box in the Positioning category
for the overflow to
> scroll. This is all good. But is there any way to
specify that I don't want the
> scroll bar bottom gray box?
>
>
http://www.communicationssquared.com/C2newsite/services.html
>
> I can deal with the right scroll bar, because it's
useful, but do I have to
> have that gray non-scroll bar on the bottom?
> Thanks.
>
Or even better than Micha's suggestion, let the content flow
down the
page and use the scrollbar the browser gives you.
Bonnie

Floating divs and scroll bar in div

I've been searching the postings and can't find an answer to
this. I'm trying to make #content a div that, when content is too
much for the div, scroll bar will appear and not expand the entire
design. I assigned a height to the div and added overflow:auto; but
it still doesn't work. Please advise! Thank you...again....
http://www.nsbcustomjewelry.com/DIVTEST.shtml

You page is completely broken in Firefox and IE7.
You will need to go through your container widths because
they are not
correct. In FF for example, you can't see the right sidebar
nav, in IE7,
the content area is being dropped down.
If you remove the margin-left: 175px; from #content and
change the width to
around 322px; it moves it into position correctly, but you
need to narrow
the width of the #leftnav to at least 155px;
Work out the rest of your widths and the right sidebar should
show up ok.
The scrollbar does show up once you narrow down the width of
the content
area. At the moment, there's not enough content in there (at
the width you
have) to invoke a scrollbar.
Hope this helps :)
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
"SisAndi" <[email protected]> wrote in
message
news:f4783n$5ln$[email protected]..
> I've been searching the postings and can't find an
answer to this. I'm
> trying
> to make #content a div that, when content is too much
for the div, scroll
> bar
> will appear and not expand the entire design. I assigned
a height to the
> div
> and added overflow:auto; but it still doesn't work.
Please advise! Thank
> you...again....
>
>
http://www.nsbcustomjewelry.com/DIVTEST.shtml
>

Double clicking on a div with contenteditable inside and iframe disables div

If i create a div that has contenteditable true on it works great on the ipad.. but put that same div inside of an iframe and if you double click it it becomes non functional.
I have searched high and low for answers. I did see that there was a bug reported
https://bugs.eclipse.org/bugs/show_bug.cgi?id=371646
but does ANYONE know a work around for this? ive tried a lot of things and nothing seems to work.

If i create a div that has contenteditable true on it works great on the ipad.. but put that same div inside of an iframe and if you double click it it becomes non functional.
I have searched high and low for answers. I did see that there was a bug reported
https://bugs.eclipse.org/bugs/show_bug.cgi?id=371646
but does ANYONE know a work around for this? ive tried a lot of things and nothing seems to work.

Web page in iframe does not maintain scroll position on refresh in FF4

I have a web page on my local drive which refreshes live sports commentary every minute in an iframe.
In FF3.6.x the page in the iframe retained the scroll position of where I had moved to.
In FF4 the page within the iframe goes back to the top so I now have to scroll down every time to where I want to read.
I disabled all addins in FF4 and have tried this on different URLs but the page in the iframe still returns to the top.

Similar problem running a 27" iMac only it occurs in Excel and inDesign. Hit the cell with the curser and the worksheet moves over to the right 7 or 8 cells away. Have to curser back to the cell quite frequently. This issue make the machine unusable when working with those two aps. Today I did the ultimate and completely reloaded Yosemite and the problem is still there.

Question on positioning div elements

I have a wrapper div and a footer div below that. I want to
center the wrapper div in the middle of the page and then position
sub elements within this wrapper div. For example, I would like to
create a "nav" div and an "actual content" div within the wrapper
div. I learned that I can relatively position the wrapper div to be
in the middle of a page regardless of screen width and then
absolutely position the "nav" div and "actual content" within the
wrapper div. The problem with this is that as soon as I absolutely
position the "actual content" div within the wrapper div then the
footer div jumps up the page to be right in the middle of the
wrapper div when it should be located completely below the wrapper
div. The other way of doing it would be to relatively position (or
don't specify) both the nav and actual content divs and just float
the nav to the left. This seems to work but I am wondering why the
footer jumped up when I tried to absolutely postion divs in the
wrapper div. Is there a way to not make the footer jump up and also
what is the standard way of doing this?

This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with
regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
This does several things -
1. It 'removes' the element from the flow of the code on
the page so that
it can no longer influence the size or position of any other
page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from
the position of
its closest PARENT *positioned* element - in the
absence of any explicitly
positioned parent, this will default to the <body> tag,
which is always
positioned
at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the
layer's code
appears (between <body> and </body>), its
location on the screen will not
change (this assumes that you have not positioned the A/P
element within
a table or another A/P element, of course).
Furthermore, the space in
which
this element would have appeared were it not positioned
is not preserved
on the screen. In other words, absolutely positioned elements
don't take
up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
In contrast to absolute positioning, a relatively positioned
page element is
*not* removed from the flow of the code on the page, so
it will use the
spot
where it would have appeared based on its position in
the code as its
zero point reference. If you then supply top, right,
bottom, or left
positions
to the style for this element, those values will be
used as offsets from
its
zero point.
This means that it DOES matter where in the code the
relatively positioned
element appears (, as it will be positioned in that location
(factoring in
the offsets) on the screen (this is true for any placement in
the code).
Furthermore, the space where this element would have
appeared is
preserved in the display, and can therefore affect the
placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
As with relative position, static positions also "go with
the flow". An
element with a static position cannot have values for
offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless
explicitly
positioned, all div elements default to static positioning.
Position:fixed
A page element with this style will not scroll as the page
content scrolls.
Support for this in elements other than page backgrounds is
quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables,
images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that
if it is not
positioned or explicitly styled otherwise, a) it will always
begin on a new
line on the screen, and b) it will always force content to a
new line below
it, and c) it will always take up the entire width of its
container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of
other
elements
on the page. For example, a 'layer' placed over a hyperlink
will mask that
hyperlink.
You can see a good example of the essential difference
between absolute and
relative positioning here -
http://www.great-web-sights.com/g_layersdemo.asp
You can see a good demonstration of why using layers for a
page layout tool
is dangerous here -
http://www.great-web-sights.com/g_layer-overlap.asp
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Johnny the boy" <[email protected]> wrote
in message
news:[email protected]...
>I have a wrapper div and a footer div below that. I want
to center the
>wrapper
> div in the middle of the page and then position sub
elements within this
> wrapper div. For example, I would like to create a "nav"
div and an
> "actual
> content" div within the wrapper div. I learned that I
can relatively
> position
> the wrapper div to be in the middle of a page regardless
of screen width
> and
> then absolutely position the "nav" div and "actual
content" within the
> wrapper
> div. The problem with this is that as soon as I
absolutely position the
> "actual content" div within the wrapper div then the
footer div jumps up
> the
> page to be right in the middle of the wrapper div when
it should be
> located
> completely below the wrapper div. The other way of doing
it would be to
> relatively position (or don't specify) both the nav and
actual content
> divs and
> just float the nav to the left. This seems to work but I
am wondering why
> the
> footer jumped up when I tried to absolutely postion divs
in the wrapper
> div.
> Is there a way to not make the footer jump up and also
what is the
> standard way
> of doing this?
>

Ap Div Overflow

Is it possible for ap div's to become larger when the text
overflows? If this is not
possible, is it possible when done with a standard div tag (i
will have to convert my tags)
Thank you

Hello medi-ochre,
If I understand correctly, the problem you're having is that
content is getting clipped when it extends beyond the height of
your div. If this is the case, you should set the div's overflow
style from hidden to visible. Here's an example of the CSS for an
AP div with an overflow specified:
#apDiv1 {
position:absolute;
width:200px;
height: 200px;
overflow:visible;
Let me know if you need more help.
Best regards,
Corey

Quick question about AP Divs...

So I am creating the navigation bar for a site, main pages are on the left and contact/social links are on the right. Normally I would align a table the right for the social links and use an AP Div for the main pages on the left, but as I have a 100% width div across the top of the page for the header the table and contact/social links would appear beneath it.
So my question is how do I align an AP Div so that it is relative the right side of the page rather than the left? I have been looking for hours but can’t find any method. [I am using CS5.5]
Thanks for reading and any help.
Connor.

I never said "do not use divisions." Those are a necessary and fundamental part of web design. I said don't use APDivs or Layers which are absolutely positioned relative to the browser's top, left screen margins and thus removed from normal document flow.
Positioning is not required for most of the work we do. This article explains why APDivs are a major problem for new web designers and why you should not use them.
http://www.apptools.com/examples/pagelayout101.php
Code fundamentals: Sorry, but this is required learning if you want to continue using Dreamweaver. No shortcuts around it. A couple of weekends of study and you should be in a much better place.
HTML & CSS Tutorials -
http://www.html.net/
http://w3schools.com/
How to Develop with CSS? (a must read)
http://phrogz.net/css/HowToDevelopWithCSS.html
From Tables to CSS Web Design Part 1 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
From Tables to CSS Web Design Part 2 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html
Good luck!
Nancy O.

Quick question: How to get the scrolled page number using af:table

Hi,
When using range paging on scrolled table, how to get the current scrolled page number(1,2,3...), for example when moving the table vertical scroll bar forward or backward, is there any method in ViewObjectImpl class that I can use to get such information? I have seen the method scrollToRangePage(int i), but when scrolled ("Fetching data..."), it doesn't not get into this method. So it is wrong usage for this method, right?
Thanks

Didn't you just ask that question in this thread?: How to catch the page number when using scroll table in ADF 11g?
A bit of patience might be in order.
CM.

Question about Panel,toolbar and scrolling

I have Panel that contains a ControlBar at the top, and a DataGrid that takes up most of the space. All good.
However. When the Panel scrollbars appear. It scrolls not only the grid, but, also the ControlBar.
Is there a way to prevent the panel from scrolling the ControlBar as well.
Thanks.

A Panel ControlBar has to be the last child to be treated as a controlbar and not be part of the scrollable content.
I would put a VBox in the Panel with the ControlBar first and Canvas with the DataGrid second. Set minHeight=0 on the Canvas
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

Usability question: Iframe or DIV overflow-scroll

Similar Messages

Maybe you are looking for