Overflow X in Animate Div?

I'm building an animation that has a few screenshot images that overflow their container divs to scroll vertically:
http://www.shoutscience.com/beta/
It works great on Chrome and Safari, but Friefox and IE add clunky scrollbars that take up extra space. This causes an uneccesary horisontal scrollbar, which I managed to gray-out but not completely remove by setting the screenshot image width to 100%.
I tried manipulating the CSS in Edge to add an "overflow-x: hidden" property to the container div, but it didn't seem to work. I don't know if I was entering it correctly as I'm just learning JS. Any ideas?
Thanks!

"Division-itis (excessive overuse of divs for every element) should be avoided. But Jon is right, divisions are a basic and necessary part of HTML. You must use them.
Vertical Scrolling Table (this is how I do it)
http://alt-web.com/DEMOS/vertical-scrolling-table.shtml
Nancy O."
I think I'm getting a better feel for <div>s.
Thank you VERY VERY much for your "trade secret" on the scrolling table.
I've put it together and it works great!
Super!
Thanks!
PS - And the other teaching point is the "overflow-y" - more to study! Thanks again

Similar Messages

Use of "overflow:auto" in a div vs a table

Pest is back.
I am building pages where there are potentially VERY long tables, and I only want them to take up "X"px of vertical space.
Using a <div> to surround the table, adjusting the height and width of the <div> to whatever I want has been VERY successful -
no problems, can use it anywhere, feel comfortable.
Recently, I've learned from this forum that <div>s should only be used when really necessary,
and I've been able to get rid of many of my <div>s - except on tables that scroll.
Recently did an experiment with a <div> around a LOOOOONG table - worked fine.
Then I removed the <div> and added the "overflow:auto" to the table style with various
table heights selected.
I've done the experiment with and without "table-layout:fixed" - no luck.
Here's the <style> portion:
table.scrolltable {
    table-layout:fixed;
    height:100px;
     width:640px;
    border:2px solid #000;
    cellpadding:1;
    background-color:#DCF1F8;
    margin-left:1%;
    margin-right:1%;
    overflow:auto;}
table.scrolltable td {
     text-align:center;
    border:1px black solid;
Questions:
1. Is it possible to effectively use "overflow:auto" directly on a <table> layout?
2. If yes, what should I change in the above style?
And again, I thank you in advance.

"Division-itis (excessive overuse of divs for every element) should be avoided. But Jon is right, divisions are a basic and necessary part of HTML. You must use them.
Vertical Scrolling Table (this is how I do it)
http://alt-web.com/DEMOS/vertical-scrolling-table.shtml
Nancy O."
I think I'm getting a better feel for <div>s.
Thank you VERY VERY much for your "trade secret" on the scrolling table.
I've put it together and it works great!
Super!
Thanks!
PS - And the other teaching point is the "overflow-y" - more to study! Thanks again

Pasting ordinary HTML into an Animate div

I have an ordinary div I composed with HTML, that I'd like to import into an existing Edge Animate comp and have it treated like an ordinary div.
The two closest things I saw were:
a YouTube video of a whole page opening in EA, and divs animated within it
This other forum, which has more components imported than I need: http://forums.adobe.com/message/5039684#5039684
Isn't there some kind of pasting window somewhere?

Hi there,
Edge Animate is not an HTML editor.
However, you could use jQuery's append method to append the div to the body of your HTML file. It won't appear in Edge itself, but would be dynamically loaded when you open the page in the browser. I would add it in the compositionReady event.
Another solution might be to create an HTML file containing the div, and then open that in EA. You'll then see it rendered in Edge Animate's stage.
hth,
Joe

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"

Scrolling main content in an AP Div disappearing behind other AP Divs...?

Newbie here, using CS3. No CSS power user (yet!)--general concepts, yes, but not much practice. Meanwhile two recent CS3 classes, several books, and a concerted search through online forums have failed to point me toward a fix for this prob. Any help greatly appreciated.
Prob statement: In design view the core content of my pages disappears behind my footer and a secondary box, both AP Divs, so that I cannot see or edit anything beyond the bottom edge of the core-content AP Div. Overflow for that AP Div is set to scroll. The "obscured" content shows up only as an outlined shape extending past the footer etc. (and I can see some of the obscured text "through" the footer). Down arrow doesn't get me there: it just scoots down the outlined-but-obscured section. Doubleclicking highlights everything that's obscured so that I can see the relative shapes of the paragraphs, but doesn't expose the content. This seemed to start the first time I set the content div to scroll any overflow. I've changed it back/forth since; no joy.
Rendered in IE or Firefox, all the pages with all their varying content lengths look fine. Scrollbar works great. It's just that in order to edit or compose further, I have to copy everything into Notepad or something, work there, and then paste it back into DW. Definitely non-optimum, though: can't format or add hyperlinks to the content.
I'm using AP Divs, with scroll on in the "content" AP Div, because I couldn't figure out how to create a template where the footer would slide down the page in response to varying amounts of content. Started out with a table to handle all this, but an instructor recommended AP Divs so I went that way. I'd like to resolve this, rather than just go back to using tables while leaving this AP Div oddness a mystery.
The footer is full of a Spry tabbed panels giving my legal/green/design statements and other small bits of info. The secondary box is an AP Div called "quotations" and is for friendly little bits of cute/clever nonsense at the bottom of each page.
Tried a number of different settings so far and by now I've probably truly messed things up. Can anyone suggest a fix?
The code for the template file seems long, so my apologies. However, the content type isn't allowed for attachments so I've pasted it in below.
Much appreciation!
=================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

</style>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>

<style type="text/css">

</style>
<meta name="Description" content="Skyway Consulting: taking your information to a higher level! We do information design: planning, writing, editing, and indexing your user documentation. We also design websites, website graphics, print layouts, and logos. Basically, we want to be your source for the way your organization interfaces with the world. " />
</head>
<body onload="MM_preloadImages('../Images/Button_WebDesignOver.gif','../Images/Button_UserDocsO ver.gif','../Images/Button_LogoDesignOver.gif','../Images/Button_PrintLayoutOver.gif','../ Images/Button_ITSvcsOver.gif','../Images/Button_Home.gif','../Images/Button_HomeOver.gif', '../Images/Button_WebDesign.gif','../Images/Button_UserDocs.gif','../Images/Button_ITSvcs. gif','../Images/Button_LogoDesign.gif','../Images/Button_AboutUs.gif','../Images/Button_Co ntact.gif','../Images/Button_AboutUsOver.gif')">
<div id="LeftSidebar"></div>
<div id="Banner">
<div align="center"><img src="../Images/Banner.gif" alt="Skyway Consulting" width="335" height="184" /></div>
</div>
<div id="BannerPhone">
<p align="center">Taking your information to a higher level.</p>
<p align="center">530.965.2624</p>
<p align="center"><img src="../Images/email_Info.gif" alt="Address" width="203" height="23" /></p>
</div>
<div id="NavBar">
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><a href="../index.html" target="_top" onclick="MM_nbGroup('down','group1','Home','../Images/Button_HomeOver.gif',1)" onmouseover="MM_nbGroup('over','Home','../Images/Button_HomeOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_Home.gif" alt="Skyway Consulting Homepage" name="Home" border="0" id="Home" onload="" /></a></td>
      <td><a href="../webdesign.html" target="_top" onclick="MM_nbGroup('down','group1','WebsiteDesign','../Images/Button_WebDesignOver.gif', 1)" onmouseover="MM_nbGroup('over','WebsiteDesign','../Images/Button_WebDesignOver.gif','',1) " onmouseout="MM_nbGroup('out')"><img src="../Images/Button_WebDesign.gif" alt="Website Design Services" name="WebsiteDesign" width="106" height="30" border="0" id="WebsiteDesign" onload="" /></a></td>
      <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','UserDoc','../Images/Button_UserDocsOver.gif',1)" onmouseover="MM_nbGroup('over','UserDoc','../Images/Button_UserDocsOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_UserDocs.gif" alt="User Documentation Services" name="UserDoc" width="106" height="30" border="0" id="UserDoc" onload="" /></a></td>
      <td><a href="../it_svcs.html" target="_top" onclick="MM_nbGroup('down','group1','ITServices','../Images/Button_ITSvcsOver.gif',1)" onmouseover="MM_nbGroup('over','ITServices','../Images/Button_ITSvcsOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_ITSvcs.gif" alt="IT Services" name="ITServices" width="106" height="30" border="0" id="ITServices" onload="" /></a></td>
      <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','LogoDesign','../Images/Button_LogoDesignOver.gif',1) " onmouseover="MM_nbGroup('over','LogoDesign','../Images/Button_LogoDesignOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_LogoDesign.gif" alt="Logo Design Services" name="LogoDesign" width="106" height="30" border="0" id="LogoDesign" onload="" /></a></td>
      <td><a href="../about.html" target="_top" onclick="MM_nbGroup('down','group1','AboutUs','../Images/Button_AboutUsOver.gif',1)" onmouseover="MM_nbGroup('over','AboutUs','../Images/Button_AboutUsOver.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="../Images/Button_AboutUs.gif" alt="AboutUs" name="AboutUs" border="0" id="Contact" onload="" /></a></td>
    </tr>
</table>
</div>
<div id="Content">
<p>Content</p>
</div>
<div id="Footer">
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">Info</li>
      <li class="TabbedPanelsTab" tabindex="0">Legal</li>
      <li class="TabbedPanelsTab" tabindex="0">Privacy Policy</li>
      <li class="TabbedPanelsTab" tabindex="0">Green Statement</li>
      <li class="TabbedPanelsTab" tabindex="0">Design Credit</li>
      <li class="TabbedPanelsTab" tabindex="0">Webmaster</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">Click for information on these topics.</div>
      <div class="TabbedPanelsContent">(c) 2009 Skyway Consulting. All content, including photographic content, is owned by Skyway Consulting. You may not copy, reproduce, modify, or publicly display, perform, distribute, or otherwise use the content provided on this site in any way for any public or commercial purpose. Skyway Consulting will not work on websites involving objectionable material, including but not limited to pornography, hatred, intolerance, or animal abuse. Our management staff's decision on what constitutes "objectionable material" is final. </div>
      <div class="TabbedPanelsContent">We recognize that your privacy is important. This privacy policy applies to all of our services and website pages. We do not set cookies. We do not sell or otherwise seek to profit from the contact information you provide, although we may preserve some information for use by Skyway Consulting. If you have questions about this privacy policy, please [link]contact us.</div>
      <div class="TabbedPanelsContent">Skyway Consulting is an American home-based business that makes every effort to conserve, reduce, reuse, and recycle.</div>
      <div class="TabbedPanelsContent">
        <p>Page design by Skyway Consulting. (Of course!)</p>
        <p>Tiling forest graphic at left by the talented Silvia Hartmann, <a href="http://silviahartmann.com/">http://silviahartmann.com/</a>. (Thank you, Silvia!)</p>
      </div>
      <div class="TabbedPanelsContent">Page problems? Contact <img src="../Images/email_Webmaster.gif" alt="Webmaster e-dress" width="177" height="18" align="absmiddle" /></div>
    </div>
</div>
</div>
<div id="Quotation">Quotation</div>
<div id="Heading">Heading</div>
<div align="center"></div>
<script type="text/javascript">

</script>
</body>
</html>

I hadn't looked at the code at all. I was relying on the Dreamweaver GUI to correctly guide me to a desired outcome.
I think that this is not a desirable approach to Dreamweaver, which will write perfect HTML if you let it, but it's too easy to click buttons and apply wizards without regard for the markup consequences, thereby producing a veritable pig's ear of a page. If you are going to use DW professionally, you will have to become comfortable with code. That doesn't mean you will have to spend 100% of your time in Code view, but you will definitely need to watch the code as it is formulated.
I'm not starting from an engineering background.
Neither did I. But I did start with a sincere desire to become proficient, and to learn the technology.
Murray, I get the idea of redoing my template without AP Divs, and will get into that. I don't know what "image swaps and links" mean, though. Would you mind teaching this newbie on this point?
Not at all. When you select the "NavBar" feature, you are placing elements and code on your page that were designed in the dark ages of HTML (frames). Some of the features in the NavBar will only work in a framed page (the down image and the over while down). The code is antique, invalid, and just wrong to be included. My suggestion was to forego this and just place your button images on the page (in whatever container you need to use), and apply links to them so that they link to the desired pages. Then apply swap image behaviors to them to create your rollover effects, one for each button. The result will be modern code, that has none of the legacy stuff of the navbar, and that will work fine for you. As you become more familiar with CSS you can investigate even better ways to do such menus (if you want a preview of this, Google "CSS Sprites). The latter method is usually the only way I do menus anymore. And even then, I use both text and graphics for accessability and SEO purposes.
I will say that I like your attitude. A determination to learn and improve is a winning approach.

Render textarea content charachters in a div

Hi all,
I want to render the formatted content of my textarea in a div with 150px width
So now I have the string in my DB like "My string \r\n blah blah blah eccccccccccccccccccccccccccccccccccccccccc"
Wrapping this text in a html <pre> element causes the string to be formatted but it breaks the div because the formatted string is too long for the div content.
So don't want to use the pre element instead maybe change the \r\n to <br> o something like that.
Is there something in jsf to manage this problem?
thanks

You can apply the CSS overflow property on the div so that it would get a scrollbar if the content it too long.
Replacing CRLF by <br> is relatively easy: you can do it with String#replaceAll().

IE6 div spacing issue

Ok, I've been searching the net for days now trying to figure
this out. I've tried several fixes, including setting
vertical-align,
display:block, and
margin &
padding properties on the divs.
The issue is that I'm creating a box that has a rounded top
and bottom to it, provided by background images in the associated
divs. FF/IE7 work fine (of course) but IE6 generates weird spacing
between the divs.
You can find the example at
http://www.ryanburrell.com/test.html
http://www.ryanburrell.com/test.html">http://www.ryanburrell.com/test.html
Any thoughts or suggestions are greatly appreciated.

It seems the problem here is that in IE6, the empty div is
still being seen as having something in it. So it treats it as if
there were text in there so the height is not 10px, it is 20px or
so. Your background is only 10px heigh so that is why you are
seeing the white. Try using overflow:hidden; on those divs and it
should go away.

Div layout breaks apart

I have created a CSS div layout contained within an overall
div so I can syle layout to a fixed width.
I have styled container "overflow: hidden" but internal divs
still break apart in IE.
I have reduced px width of center content div but that makes
no difference either.
Site URL is:
http://dstall.com/oft/
Layout should look like this screenshot:
http://dstall.com/oft/PIX/Screenshot.jpg
but in IE it's breaking apart like in screenshot2:
http://dstall.com/oft/PIX/Screenshot2.jpg

See if the below html/css helps:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper {
    width: 980px;
    margin: 0 auto;
#header {
    overflow: hidden;
#headerLeft {
    float: left;
    width: 600px;
#headerRight {
    float: right;
    width: 380px;
#mainAreaWrapper {
    overflow: hidden;
#mainAreaLeft {
    float: left;
    width: 240px;
#mainAreaRight {
    float: left;
    width: 740px;
#mainAreaTop {
    min-height: 320px;
    background-color: #CCC;
    margin-bottom: 15px;
        -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
#mainAreaBlueBox {
    min-height: 250px;
    float: left;
    width: 450px;
    background-color:#09C;
    -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
#mainAreaGreenBox {
    min-height: 250px;
    float: left;
    width: 280px;
    margin-left: 10px;
    background-color:#6C3;
    -moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="headerLeft">Header Left</div>
<div id="headerRight">Header Right</div>
</div>
<div id="mainAreaWrapper">
<div id="mainAreaLeft">Main Area Left</div>
<div id="mainAreaRight">
<div id="mainAreaTop">Main Area Top</div>
<div id="mainAreaBlueBox">Blue Box</div>
<div id="mainAreaGreenBox">Green Box</div>
</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

Overflow hidden not working

Hey,
I'm in need of disabling scroll on body, and enabling it on div that appears on top.
I'm setting on body overflow: hidden;
and on div that show on top overflow: auto;
it works in all major mobile browsers, but in firefox it does not.
I've addded an image which represents my problem
black frame is viewport
red box is body with overflow:hidden
cyan box is div with overflow:auto
here's jsfiddle with an example: http://jsfiddle.net/gwhkLnbu/1/
on firefox mobile you can scroll the red div, but you cant do it on any other browser

''adwil [[#answer-710932|said]]''
<blockquote>
Hey,
Right now my site is working with something like this in CSS:
html.noscroll, body.noscroll {
overflow: hidden;
you have to add noscroll class to both body and html then it does basically same thing as overflow hidden just on body in other browsers
</blockquote>
Thanks. That doesn't solve my problem though. I would like to scroll on all the pages, as it is necessary. I just don't want an excessive amount of space under my content in firefox .

Adding html into edge animate text box from external js file

I have a text field in edge animate that I want to update with a score. The function that is used to click and update the score is in an enternal file so I'm trying to figure out how to get my edge animate div to be read by jquery in the external file. This is what I have so far in the external js but it isn't reading the edge animate text field properly:
external .js file:
        AdobeEdge.coinCounter += 250; // this calls the variable coinCounter which was set in edgeActions.js and updates it from the original 0 value
                alert(AdobeEdge.coinCounter); // this shows it works and updated correctly
       var comp = AdobeEdge.getComposition("EDGE-172492634");
       var stage = comp.getStage();
     stage.sym.$("gameText").html(AdobeEdge.coinCounter); // this is where things go wrong. I want this updated value to read back into the textbox called "gameText" that is in the edgeAnimate composition
      stage.sym.$("gameText").html("NewText"); // nothing reads to the "gameText" textbox; something must be wrong how I am referencing it outside of edgeActions in the external .js file
Would someone mind helping me reference the textbox "gameText" correctly so I can input my new value? Thank you!!

Thank you. The learning curve is taking me awhile. It works now:
    var checking = AdobeEdge.getComposition("EDGE-172492634").getStage().$("gameText").text();
    alert(checking); //yay!
Thanks Joel!

Div tags problem on centered layout

Like the title says, I'm working on a centered layout and I
need to place a div tag that has an overflow for scrolling. The
problem is what do I do so that it does just that. I tried using an
AP div tag but it doesn't follow the rest of the layout if you play
with the browser width. And if I simply put a div tag in my table,
I don't know how to put an overflow on it. I only have a limited
amount of space for the text, and I have too much text to simply
put it in the table. It's my first time working on a centered
layout, so I'm kind of at a lost right now. And that's the only
thing stopping me from putting it online.

> And if I simply put a div tag in
> my table, I don't know how to put an overflow on it.
<div style="overflow:scroll">
> I only have a limited
> amount of space for the text, and I have too much text
to simply put it in
> the
> table.
If that's the case, then you have a broken layout scheme, and
a usability
problem.
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
==================
"cprime" <[email protected]> wrote in
message
news:g6n78v$qmn$[email protected]..
> Like the title says, I'm working on a centered layout
and I need to place
> a div
> tag that has an overflow for scrolling. The problem is
what do I do so
> that it
> does just that. I tried using an AP div tag but it
doesn't follow the rest
> of
> the layout if you play with the browser width. And if I
simply put a div
> tag in
> my table, I don't know how to put an overflow on it. I
only have a limited
> amount of space for the text, and I have too much text
to simply put it in
> the
> table. It's my first time working on a centered layout,
so I'm kind of at
> a
> lost right now. And that's the only thing stopping me
from putting it
> online.
>

DW bug? Not clearing floats via overflow:hidden

OK so I think I found a bug in Dreamweaver CS3's Design View.
I have been using an alternative technique to clear floats using
overflow:hidden. It's not a new technique but it is very clean. You
can read about it here:
http://www.quirksmode.org/css/clearing.html
I believe the technique is valid, standards-compliant and
rendered by all modern browsers. What happens in DW is that the
floats are not cleared, and the containing box collapses. Here's
some very basic code to test it:

It's a well known flaw in CS3 and earlier Design view. It's
fixed in CS4.
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
==================
"sly one" <[email protected]> wrote in
message
news:g5ip1q$90r$[email protected]..
> OK so I think I found a bug in Dreamweaver's Design
View. I have been
> using an
> alternative technique to clear floats using
overflow:hidden. It's not a
> new
> technique but it is very clean. You can read about it
here:
>
http://www.quirksmode.org/css/clearing.html
> I believe the technique is valid, standards-compliant
and rendered by all
> modern browsers. What happens in DW is that the floats
are not cleared,
> and the
> containing box collapses. Here's some very basic code to
test it:
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
> <title>Clear Floats with Overflow
Hidden</title>
> <style type="text/css">
> 
> </style></head>
>
> <body>
>
> <div class="container" style="overflow: hidden;
width: 100%">
> <div class="left">
> <p>The left column.</p>
> <p>The left column.</p>
> <p>The left column.</p>
>
> <p>The left column.</p>
> </div>
> <div class="right">
> <p>The right column.</p>
> <p>The right column.</p>
> <p>The right column.</p>
> </div>
>
> </div>
>
> </body>
> </html>
>

Can I remove the Edge Animate stage from the body of my HTML but keep the .js file in the head?

Howdy,
I have designed a couple of Edge Animations for a client to insert on a single page of their website.
The client wants to package all .js files as one for the site to reduce the pageload - but if they do that and simply remove the stage elements from this page the animations take over the page where the stages are supposed to be.
I am hoping it is possible to add some logic to the .js file about "if these divs don't exist, do nothing" but I do not have enough coding skill to alter these Edge Animate .js files.
Does anyone have any suggestions?
Thanks!

Hi Sarah,
Thanks for the reply.
What my clients want to accomplish is is to package all the separate .js files for the website into one file, so all the pages load faster.
This includes the Animate.js files which are only to be used for the home page, so of course random animations appear on the rest of the pages which don't have the animate DIVs in them.
I have suggested they package all the .js files EXCEPT the animate.js ones and just load them separately on the page the animations are to appear on.
But they are still wanting to do them all in one package however (!!) so my question is:
Can some code be added to the animate.js files that says something like "if these DIVs are not found, make the animation do nothing"?
It is possible the relevant code cannot be added in which case they will have to do the animate.js files separately, but as they have asked me about it I thought I would ask people in the forum if they knew how to accomplish this.
Cheers,
Jim

ADF master-detail master selection not updating detail tables properly

Hi All,
I am using JDev version : 11.1.2.0.0
I created new Fusion Web Application Module. In that module I created a master-detail data model and added them to a page fragment with a query panel. When I run it as a separate module, It works perfectly and Master selection correctly updates detail tables.
But when I integrate that module to another Fusion Application(Add application jar file to the Master Application libraries), Master-details master selection not updating detail tables properly. This problem occurred sequentially.
The problem is that.
After the page load, first selection of the Master Table works correctly and detail tables update correctly.
But second selection doesn't work, means detail table doesn't get update according to the Master table.
And again in the third selection works correctly.
This happens in a sequential manner. I monitor the behavior using Firebug. Observations are as follows,
When running correctly, Response of the Post Definition is
<?xml version="1.0" ?> <partial-response><changes><update id="pt1:t1"><![CDATA[<div tabindex="0" id="pt1:t1" class="xpa xpi" _leafColClientIds="['pt1:t1:c1','pt1:t1:c2','pt1:t1:c3','pt1:t1:c4','pt1:t1:c5','pt1:t1:c6','pt1:t1:c7','pt1:t1:c8','pt1:t1:c9','pt1:t1:c10','pt1:t1:c11','pt1:t1:c12','pt1:t1:c13']"><div id="pt1:t1::ch" style="overflow:hidden;position:relative;width:1365px;" _afrColCount="13" class="xz4"><table class="xz6" summary="This table contains column headers corresponding to the data body table below" id="pt1:t1::ch::t" style="position:relative;table-layout:fixed;width:1365px" cellspacing="0"><tr><th style="padding:0px;padding-left:5px;width:100px;"></th><th style="padding:0px;padding-left:5px;width:100px;"></th><th style="padding:0px;padding-left:5px;width:100px;"></th><th style="padding:0px;padding-left:5px;width:100px;"></th><th style="padding:0px;padding-left:5px;width:100px;"></th><th style="padding:0px;padding-left:5px;width:100px;"></th><th style="padding:0px;padding-left:5px;width:100px;"></th><th style="padding:0px;padding-left:5px;width:100px;"></th><th style="padding:0px;padding-left:5px;width:100px;"></th><th style="padding:0px;padding-left:5px;width:100px;"></th><th style="padding:0px;padding-left:5px;width:100px;"></th><th style="padding:0px;padding-left:5px;width:100px;"></th><th style="padding:0px;padding-left:5px;width:100px;"></th></tr><tr><th id="pt1:t1:c1" _d_index="0" _afrLeaf="true" _afrRoot="true" align="left" class="xz7"><div style="position:relative; float:right"><table id="pt1:t1:c1::afrSI" _afrHoverable="true" style="display:none" class="xzs" cellpadding="0" cellspacing="0"><tr><td _afrSortAsc="1"><a tabIndex="-1" class="xza" title="Sort Ascending"></a></td><td _afrSortDesc="1"><a tabIndex="-1" class="xzb" title="Sort Descending"></a></td></tr></table></div><div class="x19d">DateFormat</div></th><th id="pt1:t1:c2" _d_index="1" _afrLeaf="true" _afrRoot="true" align="left" class="xz7"><div style="position:relative; float:right"><table id="pt1:t1:c2::afrSI" _afrHoverable="true" style="display:none" class="xzs" cellpadding="0" cellspacing="0"><tr><td _afrSortAsc="1"><a tabIndex="-1" class="xza" title="Sort Ascending"></a></td><td _afrSortDesc="1"><a tabIndex="-1" class="xzb" title="Sort Descending"></a></td></tr></table></div><div class="x19d">DefinisionId</div></th><th id="pt1:t1:c3" _d_index="2" _afrLeaf="true" _afrRoot="true" align="left" class="xz7"><div style="position:relative; float:right"><table id="pt1:t1:c3::afrSI" _afrHoverable="true" style="display:none" class="xzs" cellpadding="0" cellspacing="0"><tr><td _afrSortAsc="1"><a tabIndex="-1" class="xza" title="Sort Ascending"></a></td><td _afrSortDesc="1"><a tabIndex="-1" class="xzb" title="Sort Descending"></a></td></tr></table></div><div class="x19d">FieldId</div></th><th id="pt1:t1:c4" _d_index="3" _afrLeaf="true" _afrRoot="true" align="left" class="xz7"><div style="position:relative; float:right"><table id="pt1:t1:c4::afrSI" _afrHoverable="true" style="display:none" class="xzs" cellpadding="0" cellspacing="0"><tr><td _afrSortAsc="1"><a tabIndex="-1" class="xza" title="Sort Ascending"></a></td><td _afrSortDesc="1"><a tabIndex="-1" class="xzb" title="Sort Descending"></a></td></tr></table></div><div class="x19d">FieldLabel</div></th><th id="pt1:t1:c5" _d_index="4" _afrLeaf="true" _afrRoot="true" align="left" class="xz7"><div style="position:relative; float:right"><table id="pt1:t1:c5::afrSI" _afrHoverable="true" style="display:none" class="xzs" cellpadding="0" cellspacing="0"><tr><td _afrSortAsc="1"><a tabIndex="-1" class="xza" title="Sort Ascending"></a></td><td _afrSortDesc="1"><a tabIndex="-1" class="xzb" title="Sort Descending"></a></td></tr></table></div><div class="x19d">FieldLength</div></th><th id="pt1:t1:c6" _d_index="5" _afrLeaf="true" _afrRoot="true" align="left" class="xz7"><div style="position:relative; float:right"><table id="pt1:t1:c6::afrSI" _afrHoverable="true" style="display:none" class="xzs" cellpadding="0" cellspacing="0"><tr><td _afrSortAsc="1"><a tabIndex="-1" class="xza" title="Sort Ascending"></a></td><td _afrSortDesc="1"><a tabIndex="-1" class="xzb" title="Sort Descending"></a></td></tr></table></div><div class="x19d">FieldOffset</div></th><th id="pt1:t1:c7" _d_index="6" _afrLeaf="true" _afrRoot="true" align="left" class="xz7"><div style="position:relative; float:right"><table id="pt1:t1:c7::afrSI" _afrHoverable="true" style="display:none" class="xzs" cellpadding="0" cellspacing="0"><tr><td _afrSortAsc="1"><a tabIndex="-1" class="xza" title="Sort Ascending"></a></td><td _afrSortDesc="1"><a tabIndex="-1" class="xzb" title="Sort Descending"></a></td></tr></table></div><div class="x19d">FieldOrder</div></th><th id="pt1:t1:c8" _d_index="7" _afrLeaf="true" _afrRoot="true" align="left" class="xz7"><div style="position:relative; float:right"><table id="pt1:t1:c8::afrSI" _afrHoverable="true" style="display:none" class="xzs" cellpadding="0" cellspacing="0"><tr><td _afrSortAsc="1"><a tabIndex="-1" class="xza" title="Sort Ascending"></a></td><td _afrSortDesc="1"><a tabIndex="-1" class="xzb" title="Sort Descending"></a></td></tr></table></div><div class="x19d">FieldStatus</div></th><th id="pt1:t1:c9" _d_index="8" _afrLeaf="true" _afrRoot="true" align="left" class="xz7"><div style="position:relative; float:right"><table id="pt1:t1:c9::afrSI" _afrHoverable="true" style="display:none" class="xzs" cellpadding="0" cellspacing="0"><tr><td _afrSortAsc="1"><a tabIndex="-1" class="xza" title="Sort Ascending"></a></td><td _afrSortDesc="1"><a tabIndex="-1" class="xzb" title="Sort Descending"></a></td></tr></table></div><div class="x19d">FieldType</div></th><th id="pt1:t1:c10" _d_index="9" _afrLeaf="true" _afrRoot="true" align="left" class="xz7"><div style="position:relative; float:right"><table id="pt1:t1:c10::afrSI" _afrHoverable="true" style="display:none" class="xzs" cellpadding="0" cellspacing="0"><tr><td _afrSortAsc="1"><a tabIndex="-1" class="xza" title="Sort Ascending"></a></td><td _afrSortDesc="1"><a tabIndex="-1" class="xzb" title="Sort Descending"></a></td></tr></table></div><div class="x19d">FieldTypeLen</div></th><th id="pt1:t1:c11" _d_index="10" _afrLeaf="true" _afrRoot="true" align="left" class="xz7"><div style="position:relative; float:right"><table id="pt1:t1:c11::afrSI" _afrHoverable="true" style="display:none" class="xzs" cellpadding="0" cellspacing="0"><tr><td _afrSortAsc="1"><a tabIndex="-1" class="xza" title="Sort Ascending"></a></td><td _afrSortDesc="1"><a tabIndex="-1" class="xzb" title="Sort Descending"></a></td></tr></table></div><div class="x19d">IgnoreField</div></th><th id="pt1:t1:c12" _d_index="11" _afrLeaf="true" _afrRoot="true" align="left" class="xz7"><div style="position:relative; float:right"><table id="pt1:t1:c12::afrSI" _afrHoverable="true" style="display:none" class="xzs" cellpadding="0" cellspacing="0"><tr><td _afrSortAsc="1"><a tabIndex="-1" class="xza" title="Sort Ascending"></a></td><td _afrSortDesc="1"><a tabIndex="-1" class="xzb" title="Sort Descending"></a></td></tr></table></div><div class="x19d">IsMandatory</div></th><th id="pt1:t1:c13" _d_index="12" _afrLeaf="true" _afrRoot="true" align="left" class="xz7"><div style="position:relative; float:right"><table id="pt1:t1:c13::afrSI" _afrHoverable="true" style="display:none" class="xzs" cellpadding="0" cellspacing="0"><tr><td _afrSortAsc="1"><a tabIndex="-1" class="xza" title="Sort Ascending"></a></td><td _afrSortDesc="1"><a tabIndex="-1" class="xzb" title="Sort Descending"></a></td></tr></table></div><div class="x19d">RecordType</div></th></tr></table></div><div id="pt1:t1::db" class="xyx" style="position:relative;width:100%;overflow:hidden" _afrColCount="13"></div><div id="pt1:t1::sm" class="xzt" style="position:absolute;display:none"></div><div id="pt1:t1::ri" class="xyz" style="position:absolute;display:none;overflow:hidden"></div><div id="pt1:t1::dataW" style="display:none"></div></div>]]></update><update id="f1::postscript"><![CDATA[<span id="f1::postscript"><span id="f1::postscript:st"><input type="hidden" name="javax.faces.ViewState" value="!-75cc188st"></span></span>]]></update><update id="d1::iconC"><![CDATA[<span id="d1::iconC" style="display:none"><span id="af_table::disclosed-icon"></span><span id="af_table::undisclosed-icon"></span></span>]]></update><update id="javax.faces.ViewState"><![CDATA[!-75cc188st]]></update><eval><![CDATA[AdfPage.PAGE.__handleRichResponseAction('/MillenniumCSD-ViewController-context-root/faces/FileDefinition?_adf.ctrl-state=cmpl0ptfg_7');]]></eval><eval><![CDATA[AdfPage.PAGE.sendStreamingRequest("pt1:t1");]]></eval><extension id="adf-script-library">/MillenniumCSD-ViewController-context-root/afr/partition/gecko/default/opt/dnd-SHERMAN-1147.js</extension><extension id="adf-script-library">/MillenniumCSD-ViewController-context-root/afr/partition/gecko/default/opt/nav-SHERMAN-1147.js</extension><extension id="adf-script-library">/MillenniumCSD-ViewController-context-root/afr/partition/gecko/default/opt/menu-SHERMAN-1147.js</extension><extension id="adf-script-library">/MillenniumCSD-ViewController-context-root/afr/partition/gecko/default/opt/table-SHERMAN-1147.js</extension><eval>AdfPage.PAGE.addResource('javascript','/MillenniumCSD-ViewController-context-root/JarLoaderPages/jquery-1.7.1.min.js');</eval><eval>AdfPage.PAGE.addResource('javascript','/MillenniumCSD-ViewController-context-root/JarLoaderPages/dis_contx.js');</eval><eval>AdfPage.PAGE.addResource('javascript','/MillenniumCSD-ViewController-context-root/js/floating_bar_bottom.js');</eval><eval>if(self.window.name != "MillenniumDepository"){ self.location = "mcsd.html"; }</eval><eval><![CDATA[AdfDhtmlLookAndFeel.addSkinProperties({"af|table-tr-column-scroll-animation-duration":"300","af|table-tr-column-reorder-animation-duration":"600","af|table-tr-hover-highlight-row":"true"});AdfPage.PAGE.addComponents(new AdfRichTable('pt1:t1',{'rowSelection':'single','rowBandingInterval':0,'editingMode':'none','afrSelListener':true}),new AdfRichColumn('pt1:t1:c1',{'sortProperty':'DateFormat','sortable':true,'minimumWidth':12,'rowHeader':false}),new AdfRichColumn('pt1:t1:c2',{'sortProperty':'DefinisionId','sortable':true,'minimumWidth':12,'rowHeader':false}),new AdfRichColumn('pt1:t1:c3',{'sortProperty':'FieldId','sortable':true,'minimumWidth':12,'rowHeader':false}),new AdfRichColumn('pt1:t1:c4',{'sortProperty':'FieldLabel','sortable':true,'minimumWidth':12,'rowHeader':false}),new AdfRichColumn('pt1:t1:c5',{'sortProperty':'FieldLength','sortable':true,'minimumWidth':12,'rowHeader':false}),new AdfRichColumn('pt1:t1:c6',{'sortProperty':'FieldOffset','sortable':true,'minimumWidth':12,'rowHeader':false}),new AdfRichColumn('pt1:t1:c7',{'sortProperty':'FieldOrder','sortable':true,'minimumWidth':12,'rowHeader':false}),new AdfRichColumn('pt1:t1:c8',{'sortProperty':'FieldStatus','sortable':true,'minimumWidth':12,'rowHeader':false}),new AdfRichColumn('pt1:t1:c9',{'sortProperty':'FieldType','sortable':true,'minimumWidth':12,'rowHeader':false}),new AdfRichColumn('pt1:t1:c10',{'sortProperty':'FieldTypeLen','sortable':true,'minimumWidth':12,'rowHeader':false}),new AdfRichColumn('pt1:t1:c11',{'sortProperty':'IgnoreField','sortable':true,'minimumWidth':12,'rowHeader':false}),new AdfRichColumn('pt1:t1:c12',{'sortProperty':'IsMandatory','sortable':true,'minimumWidth':12,'rowHeader':false}),new AdfRichColumn('pt1:t1:c13',{'sortProperty':'RecordType','sortable':true,'minimumWidth':12,'rowHeader':false}));AdfPage.PAGE.__recordSessionTimeout(1800000, 120000, "http://127.0.0.1:7101/MillenniumCSD-ViewController-context-root/faces/FileDefinition");AdfPage.PAGE.__initPollingTimeout(600000);AdfPage.PAGE.clearMessages();AdfPage.PAGE.clearSubtreeMessages('pt1:t1');AdfPage.PAGE.clearSubtreeMessages('pt1:resId1');]]></eval></changes></partial-response>
When not running correctly, Response of the Post Definition is
<?xml version="1.0" ?> <partial-response><changes><update id="f1::postscript"><![CDATA[<span id="f1::postscript"><span id="f1::postscript:st"><input type="hidden" name="javax.faces.ViewState" value="!-75cc188st"></span></span>]]></update><update id="javax.faces.ViewState"><![CDATA[!-75cc188st]]></update><eval><![CDATA[AdfPage.PAGE.__handleRichResponseAction('/MillenniumCSD-ViewController-context-root/faces/FileDefinition?_adf.ctrl-state=cmpl0ptfg_7');]]></eval><eval>AdfPage.PAGE.addResource('javascript','/MillenniumCSD-ViewController-context-root/JarLoaderPages/jquery-1.7.1.min.js');</eval><eval>AdfPage.PAGE.addResource('javascript','/MillenniumCSD-ViewController-context-root/JarLoaderPages/dis_contx.js');</eval><eval>AdfPage.PAGE.addResource('javascript','/MillenniumCSD-ViewController-context-root/js/floating_bar_bottom.js');</eval><eval>if(self.window.name != "MillenniumDepository"){ self.location = "mcsd.html"; }</eval><eval><![CDATA[AdfPage.PAGE.__recordSessionTimeout(1800000, 120000, "http://127.0.0.1:7101/MillenniumCSD-ViewController-context-root/faces/FileDefinition");AdfPage.PAGE.__initPollingTimeout(600000);AdfPage.PAGE.clearMessages();AdfPage.PAGE.clearSubtreeMessages('pt1:t1');AdfPage.PAGE.clearSubtreeMessages('pt1:resId1');]]></eval></changes></partial-response>
I could not figure out what went wrong when integrating to another module.
Can you please help me to rectify this problem.
Thanks
dk

Hi,
sound to be an implementation specific issue that is hard to comment on without knowing how to reproduce it. If you have a rerooducible test case based on the Oracle HR schema using JDeveloper 11.1.1.6, zip it up, rename the "zip "extension to "unzip" and sent it to the mail address you find in my OTN profile. If you don't have that test case, explain how this can be reproduced
Frank

Paragraph and line break tags not working in inserted html

I used some code found on this forum to insert a text box with a scoll bar. The scroll bar is exactly what I needed, and I figured out how to style the text (using the text option that popped up on the far right side of the options bar), but for some reason the text all runs together. The <p> </p> tag is not creating the extra lines, nor could I get extra lines with <br/>. How can I get my paragraph spacing to show up?
Here is the forum discussion: http://forums.adobe.com/message/4514956
Here is the code I used:
<style type="text/css">
     .scroll {
         padding: 10px;
         height: 280px;
         width: 450
0px;
         overflow-y: scroll;
overflow-x: hidden;;
</style>
<div class="scroll">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Aliquam venenatis elit et dui scelerisque id condimentum
       tellus mollis. Phasellus varius augue at lectus egestas
       sit amet dapibus sem interdum. Vivamus aliquet augue vitae
       magna porttitor eget sagittis quam convallis. Integer aliquam
       sodales odio vel aliquet. Suspendisse non orci ut quam
       ultricies iaculis vitae vel neque. Sed sit amet neque a dui
       adipiscing convallis. Nam consectetur commodo arcu, eget
       feugiat risus tempus non. Suspendisse dignissim porta risus,
       eu lobortis metus facilisis non. Mauris id lacus eu tellus
       porttitor sodales in sed enim. Mauris euismod libero sed mi
       ultricies ac vehicula tellus tristique. Donec lacus tellus,
       varius sit amet mattis at, feugiat sed ante. Duis auctor
       iaculis aliquet. Vivamus fringilla nisi non eros congue
       dapibus. Praesent quis molestie mauris. Donec adipiscing
       dui ut elit interdum eu scelerisque sem pellentesque.
    </p>
    <p>Nulla pharetra nisl adipiscing ipsum fringilla at auctor
       ipsum posuere. Etiam ac dolor turpis. Nam non ligula purus.
       In metus nisl, ullamcorper ac sodales quis, molestie id leo.
       Etiam faucibus dui at eros molestie interdum. Quisque quis
       eros vel urna fermentum iaculis. Quisque vestibulum erat in
       risus lobortis malesuada rhoncus purus vestibulum. Integer
       vehicula ultrices quam, ac faucibus dui tristique sed. Duis
       nec felis mauris. Morbi non neque turpis, at lobortis mauris.
       Fusce a turpis sit amet leo ullamcorper semper et dignissim
       sem. Phasellus lacinia sodales massa, eget egestas velit
       malesuada at. Quisque feugiat erat in dolor eleifend ut
       convallis ante vehicula. Aenean a turpis neque, vitae eleifend
       augue. Class aptent taciti sociosqu ad litora torquent per
       conubia nostra, per inceptos himenaeos. Nunc porta, massa
       at viverra tincidunt, quam sem pellentesque felis, sed
       mattis lectus arcu eu turpis.
    </p>
    <p>Sed rutrum iaculis vulputate. Duis sed lectus lacus. Etiam
       faucibus, libero id placerat congue, turpis leo varius magna,
       vitae dapibus neque libero eu elit. Vivamus quis urna sed
       nibh elementum sodales quis in dolor. Sed ut metus ut metus
       facilisis fringilla vel sit amet mi. Etiam placerat lectus
       sed nibh bibendum vulputate non rhoncus est. Quisque vulputate
       luctus tincidunt. Duis quis tortor massa, sed scelerisque elit.
       Nam id vulputate orci. Morbi a porta lorem. Nunc elementum
       viverra sem quis blandit. Cras vel eros erat. Aliquam erat
       volutpat. Sed id odio nec erat viverra ultricies vel ac mi.
     </p>
</div>

For anyone else struggling with this problem, I chatted with support and got an answer. According to the agent "
Muse is removing the default margin for various tags including the <p> tag to reset default styles to achieve consistency and control. All you need to do is specify the margin:1em for p tags in CSS to fix this." Another --simpler-- solution turned out to be another suggestion the agent made: "just place <p> </p> after every closing </p> tag." The &nbsp is what turned out to work for me. Now I have a way to only show a portion of the text yet still allow the reader to access more (through a scroll bar) without leaving the page.

Overflow X in Animate Div?

Similar Messages

Maybe you are looking for