Vertical tabbed panel with background image

Hi all,
I have a working vertical tabbed panel. For the text that's shown, there's a background image assigned to the associated DIV.
However...
The background image that's shown is clipped to the bottom of the text.
In other words, if I have 3 lines of text, the bottom of the background image only goes as far down as the bottom line of text. In order to show the entire image, I have to put in a lot of </ br> tags for "empty" text, not a very good approach.
More of the backgound will show if I increase the text text size via the browser.
To try to describe this more accurately,
Let's say I have a background image that's 600 px in height, but the lines of text only measure to 400px. That means that the bottom 200 px of the image doesn't show, unless I add more lines of text.
Hoping someone has an answer!
Thanks,
Jerry

Gramps,
Again, thanks for your time. While we're now full time commercial photographers (http://www.jerryandlois.com), I was a software engineer for some 20+ years in an earlier life, all on the application side of things. Not really any appreciable time with website stuff.
There are a few more tech/how-to questions I have that are specific to CSS, in terms of polishing up the small site I'm working on. However these are not SPRY related, unless SPRY can solve this for me.
In particular, suppose I have a large block with a background image and a body of text. I want to ensure the text wraps around the image, rather than being a complete overlay where the text can collide with the main body of the photo.
Example:
http://jerryandloisstudios.com/about.html
The issue is that the text is resizable, by design of course. Is there any way to manage these two elements (text and image) so they get along the right way? We want the text to overlay some of the image, but only on the periphery, if that makes sense. So far, the only solution I've seen is to keep the text formatted roughly in a column so that if its size increases all will still be OK. But... artistically that just doesn't look right.
If you're up for it, I'd certainly welcome a private email thread, unless others can also benefit from the rather newbie questions I'm raising: [email protected]
Again, thank you for your help!!!
Jerry

Similar Messages

FF36: Sites with background image flickers/flashes when going back to tab after 2 minutes.

Figure I'll mention this here as well.
When viewing websites with background images, such as twitter.com or my own website at www.markheadrick.com and I change to another tab for 2 minutes (this amount of time is repeatable anyway) I get a flicker of a black background before the page is fully drawn. If I have multiple tabs with the same background image, only the first tab will show the flicker. It's like it's loosing the image in memory or something. It has done this with Firefox in Safe Mode and with a new, clean profile. It has also done this with Hardware Acceleration off.
Windows 7 Pro 64bit w/ NVidia 550ti and 314.22 drivers. Newer drivers are more problematic which is why I have stayed with these.
Again, only pages with background images seem to show this flicker. Did not happen with Firefox 35 on my system.
I created a bug for it here: https://bugzilla.mozilla.org/show_bug.cgi?id=1137082
Thanks,
Mark H

I tried, but could not see and problem.
Hello,
In order to better assist you with your issue please provide us with a screenshot. If you need help to create a screenshot, please see [[How do I create a screenshot of my problem?]]
Once you've done this, attach the saved screenshot file to your forum post by clicking the '''Browse...''' button below the ''Post your reply'' box. This will help us to visualize the problem.
Thank you!

Using Srpy tabbed panels with slidding panels

I am very new to spry and so I am still just figuring it all
out. How I found it was I wanted a tabbed panel like the one on the
IBM website. Anyway, I am trying to
use the tabbed panels with the sliding panels and it just does not
seem to be working. I found
this
tutorial and followed the codes but it still only works as just the
tabbed panels - nothing has changed at all. Can someone tell me
what I might be doing wrong? I am attaching both my html and css
code for you to inspect.
HTML Code
<!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>
<script
src="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<link
href="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"><a
href=”#Tab1″>Tab 1</a></li>
<li class="TabbedPanelsTab" tabindex="0"><a
href=”#Tab1″>Tab 2</a></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
css code to follow in post below - too many characters.

and here is the css code
CSS Code
@charset "UTF-8";
/* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab
buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container.
For our
* default style, this container does not contribute anything
visually,
* but it is floated left to make sure that any floating or
clearing done
* with any of its child elements are contained completely
within the
* TabbedPanels container, to minimize any impact or
undesireable
* interaction with other floated elements on the page that
may be used
* for layout.
* If you want to constrain the width of the TabbedPanels
widget, set a
* width on the TabbedPanels container. By default, the
TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this
selector is not
* necessary to make the widget function. You can use any
class name you
* want to style the TabbedPanels container.
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded
by a paragraph. (hasLayout Bug)*/
/* This is the selector for the TabGroup. The TabGroup
container houses
* all of the tab buttons for each tabbed panel in the
widget. This container
* does not contribute anything visually to the look of the
widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in
this selector is not
* necessary to make the widget function. You can use any
class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
/* This is the selector for the TabbedPanelsTab. This
container houses
* the title for the panel. This is also the tab "button"
that the user clicks
* on to activate the corresponding content panel so that it
appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1
pixel down from
* where it wold normally render. This allows each tab to
overlap the content
* panel that renders below it. Each tab is rendered with a 1
pixel bottom
* border that has a color that matches the top border of the
current content
* panel. This gives the appearance that the tab is being
drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this
selector is not
* necessary to make the widget function. You can use any
class name you want
* to style this tab container.
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
/* This selector is an example of how to change the appearnce
of a tab button
* container as the mouse enters it. The class
"TabbedPanelsTabHover" is
* programatically added and removed from the tab element as
the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
background-color: #CCC;
/* This selector is an example of how to change the
appearance of a tab button
* container after the user has clicked on it to activate a
content panel.
* The class "TabbedPanelsTabSelected" is programatically
added and removed
* from the tab element as the user clicks on the tab button
containers in
* the widget.
* As mentioned above, for our default style, tab buttons are
positioned
* 1 pixel down from where it would normally render. When the
tab button is
* selected, we change its bottom border to match the
background color of the
* content panel so that it looks like the tab is part of the
content panel.
.TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: 1px solid #EEE;
/* This selector is an example of how to make a link inside
of a tab button
* look like normal text. Users may want to use links inside
of a tab button
* so that when it gets focus, the text *inside* the tab
button gets a focus
* ring around it, instead of the focus ring around the
entire tab.
.TabbedPanelsTab a {
color: black;
text-decoration: none;
/* This is the selector for the ContentGroup. The
ContentGroup container houses
* all of the content panels for each tabbed panel in the
widget. For our
* default style, this container provides the background
color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in
this selector is
* not necessary to make the widget function. You can use any
class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;
/* This is the selector for the Content panel. The Content
panel holds the
* content for a single tabbed panel. For our default style,
this container
* provides some padding, so that the content is not pushed
up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this
selector is
* not necessary to make the widget function. You can use any
class name you
* want to style the Content container.
.TabbedPanelsContent {
padding: 4px;
/* This selector is an example of how to change the appearnce
of the currently
* active container panel. The class
"TabbedPanelsContentVisible" is
* programatically added and removed from the content element
as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
/* Vertical Tabbed Panels
* The following rules override some of the default rules
above so that the
* TabbedPanels widget renders with its tab buttons along the
left side of
* the currently active content panel.
* With the rules defined below, the only change that will
have to be made
* to switch a horizontal tabbed panels widget to a vertical
tabbed panels
* widget, is to use the "VTabbedPanels" class on the
top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons
it contains
* render to the left of the active content panel. A border
is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed
on each tab button
* by the default TabbedPanelsTab selector rule above. It
also draws a bottom
* border for the tab. The tab button will get its left and
right border from
* the TabGroup, and its top border from the TabGroup or tab
button above it.
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* This selector disables the float property that is placed
on each tab button
* by the default TabbedPanelsTab selector rule above. It
also draws a bottom
* border for the tab. The tab button will get its left and
right border from
* the TabGroup, and its top border from the TabGroup or tab
button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so
that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
/* BEGIN: Spry Horizontal Tabbed Panels meets Sliding Door
and CSS Sprites */
/* Revision by Craig Malcolm Petrou of CPMMUG.com */
.TabbedPanels {
margin: 10px 0 5px 0;
.TabbedPanelsTab {
font-weight: bold;
font-size: 100%;
background-color: #FFF;
border: solid 0 #FFF;
.TabbedPanelsTabHover {
background-color: #FFF;
.TabbedPanelsTabSelected {
background-color: #FFF;
border-bottom: 1px solid #FFF;
position: relative;
.TabbedPanelsContentGroup {
background-color: #FFF;
ul.TabbedPanelsTabGroup a {
display: block;
ul.TabbedPanelsTabGroup li.TabbedPanelsTab {
background: url(/images/brown.png) no-repeat 0 0;
margin: 0 0 0 -1px;
padding: 0 0 0 10px;
ul.TabbedPanelsTabGroup li.TabbedPanelsTab a {
background: url(/images/brown.png) no-repeat 100% 0;
padding: 7px 10px 5px 0;
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected {
background: url(/images/brown.png) no-repeat 0 -41px;
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected a {
background: url(/images/brown.png) no-repeat 100% -41px;
/* END: Spry Horizontal Tabbed Panels meets Sliding Door and
CSS Sprites */
Also - is there a way to get rounded corners on the tabs in
spry? Any good tutorials I can follow about spry - more
specifically about using widgets and effects together.
Thanks so much

Spry - Vertical Tabbed Panel

Hey guys,
I looked around this site and I could find an answer to this but I couldn’t, so I thought I would pop this question in.
I want to make a vertical Tabbed Panel but I want it to be split into different categories.
The category heading is not clickable but its sub item are clickable, e.g.
Group A – Not clickable                     | Content Panel
Tab1 – Shows content panel 1            |
Tab2 – Shows content panel 2            |
Group B– Not clickable                      |
Tab3 – Shows content panel 3            |
Tab4 – Shows content panel 4            |
I tried a few ideas but with not luck. If anyone could point me in the right direction I would be very grateful.

What I would do is make small change the JavaScript file
Find Spry.Widget.TabbedPanels.prototype.getTabs and replace it with this function.
Spry.Widget.TabbedPanels.prototype.getTabs = function()
     var tabs = [];
     var tg = this.getTabGroup();
     if (tg)
          tabs = this.getElementChildren(tg);
     for(var i = 0; i < tabs.length; i++){
          if(!tabs[i].className.match('TabbedPanelsTab')){
               tabs.splice(i, 1); // remove because its not a tab
     return tabs;
It checks if your tabbedpanels tab have the class "TabbedPanelsTab" if it does, it will allow it to be tab
So now you can do..
<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li class="tab1" tabindex="0">I do nothing</li>
<li class="TabbedPanelsTab tab2" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab tab3" tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab tab4" tabindex="0">Tab 3</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Tab 1 Content</div>
<div class="TabbedPanelsContent">Tab 2 Content</div>
<div class="TabbedPanelsContent">Tab 3 Content</div>
</div>
</div>

Looking to create fully editable PDF files with background images

Hello and thank you, I create menu's and flyers for a group of restaurants. I need to make text editable PDF menus with background images. I believe Livecycle is able to do this, but would really like to hear it from someone who knows for sure. Again thank you.
Cheers,
Charlie

Yes it can. Download a free trial and try it out.

Tabbed panel with adjustable/variable height based on content

Is there anyway that you can create a tabbed panel with adjustable/variable height based on content in each tab?

Abhishek,
Thanks for your reply, however, it is not working with Muse. I added the Javascript to the head section and adjusted iframe and it displays as a small square in the upper left hand corner, unable to view the whole page.
Inserted into head section --
<script type="text/javascript">
function resizeIframe(obj)
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
</script>
inserted as an html object --
<iframe name="MycoSmooth" src="http://www.mycosmooth.com" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
Below is the result:
The purpose is to have an independent website run the blogging capabilities, since muse doesn't directly support blogging as of yet.
Since the site is on a different domain, I am running into cross domain issues and it won't get the height of the page. The methods that apparently work use php and I am unsure how that would work in muse, if at all.

Flexible Tabbed Panels with CSS Selector

Just thought I'd share a tip about making Tabbed Panels more
flexible with the CSS Selector.
In working on the
menu
page for
a new
restaurant, I needed Tabbed Panels with the same custom scroll
bar I used on the rest of the site. I'd chosen the
fleXcroll kit because it is so
flexible, unobtrusive, and cross-browser compatible (if poorly
documented). Once you figure out how fleXcroll wants you to give it
the elements of your scroll bar, activating it is as easy as adding
the "fleXcroll" class to the div you want scrolled. This was the
same div which wraps my Tabbed Panels
(div.TabbedPanelsContentGroup).
No problem, I thought, as fleXcroll makes a big deal about
how it "can cope with dynamic updates such as dynamic content
injected via AJAX." The problem, though, is that that Tabbed Panels
can't cope with the wrappers fleXcroll injects inside the panel
container, as Tabbed Panels depends on a clean and fixed hierarchy
to identify panels as direct descendants of that container. Tabbed
Panels thought the fleXcroll wrappers were panels, and things just
didn't work.
Luckily, the CSS Selector provides a much easier method of
finding panels and tabs than traversing a fixed hierarchy. Instead
of identifying tabs as children of .TabbedPanelsTabGroup (which is
identified as the first child of the div you give to Tabbed Panel's
constructor) and panels as children of .TabbedPanelsContentGroup,
you simply identify tabs as Spry.$$(".TabbedPanelsTab") and panels
as Spry.$$(".TabbedPanelsContent")!
In SpryTabbedPanels.js, tabs and panels are collected with
getTabs() and getPanels():
var tabs = this.getTabs();
var panels = this.getContentPanels();
To escape the hierarchical bounds of Tabbed Panels, you just
have to change:
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
to:
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
tabs = Spry.$$(".TabbedPanelsTab"); // or your selector of
choice
return tabs;
and:
Spry.Widget.TabbedPanels.prototype.getContentPanels =
function()
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
to:
Spry.Widget.TabbedPanels.prototype.getContentPanels =
function()
var panels = [];
panels = Spry.$$(".TabbedPanelsContent"); // or your
selector of choice
return panels;
This still assumes that everything happens within the element
you give to the constructor, but that's okay by me for now.
Hope this helps someone else!

The TabbedPanels code:
<div id="mainmenu" spry:region="menuCom menuCat">
     <div id="TP1" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
               <li spry:repeat="menuCat" class="TabbedPanelsTab" tabindex="0">{menuCat::category}</li>
          </ul>
          <div class="TabbedPanelsContentGroup">
               <div spry:repeat="menuCom" spry:test="'{menuCom::category}' == '{menuCat::category}'" class="TabbedPanelsContent">{menuCom::subcategory} - {menuCom::description}</div>
            </div>
            </div>
           </div>
           </div>

Loading Tabbed Panels with the updateContent Util function

Hey,
Just wanted to see if anyone has had any issues while running
ThickBox Javascript and the updateContent function at the same
time.
On my site only 1 or the other will work... very confusing,
as my Javascript skills are minimal. Not sure what the clash is, I
thought it might be conflicting div id actions not being unique
enough, but it wasn't.
Anyone else?

HI Kin,
I appreciate your quick reply. Actually I was using your old
code to rotate my tabbed panels and not the new one you posted. The
new one from your website works well with regular tabbed panels but
when trying it with a Spry data, it still doesn't work, the tabs
doesn't play at all...
I use the spry:repeat, I don't know if that makes a
difference.
http://demiurgical.fluctuation.net/development/test.html
based on the original Tabbed Panels with Spry Data
http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample2.html
I really appreciate your help!
Thanks,
John

Horizontal Tabbed Panel Inside Vertical Tabbed Panel

Hello!
I am new to web coding and in dreamweaver I would like to place a horizontal spry tabbed panel as the content of a vertical spry tabbed panel. I guess you could call it a nesting a tabbed panel. However, when I place the horizontal panel in the content area, it takes the form of a vertical panel. Any thoughts?
Here is a live page of the issue: http://andrewpapp.com/baseballprofile.html
and here is the code:
http://www.andrewpapp.com/html.txt

Hi Newbie,
I say this through gritted teeth because I think you have done far better than just a newbie, even to the extent that you have given correct advice to Jennigje Galama.
To get to your problem, have a look at the following example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<style>
.HTabbedPanels .TabbedPanels {
     margin: 0px;
     padding: 0px;
     float: left;
     clear: none;
     width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
.HTabbedPanels .TabbedPanelsTabGroup {
     margin: 0px;
     padding: 0px;
.HTabbedPanels .TabbedPanelsTab {
     position: relative;
     top: 1px;
     float: left;
     padding: 4px 10px;
     margin: 0px 1px 0px 0px;
     font: bold 0.7em sans-serif;
     background-color: #DDD;
     list-style: none;
     border-left: solid 1px #CCC;
     border-bottom: solid 1px #999;
     border-top: solid 1px #999;
     border-right: solid 1px #999;
     -moz-user-select: none;
     -khtml-user-select: none;
     cursor: pointer;
.HTabbedPanels .TabbedPanelsTabHover {
     background-color: #CCC;
.HTabbedPanels .TabbedPanelsTabSelected {
     background-color: #EEE;
     border-bottom: 1px solid #EEE;
.HTabbedPanels .TabbedPanelsTab a {
     color: black;
     text-decoration: none;
.HTabbedPanels .TabbedPanelsContentGroup {
     clear: both;
     border-left: solid 1px #CCC;
     border-bottom: solid 1px #CCC;
     border-top: solid 1px #999;
     border-right: solid 1px #999;
     background-color: #EEE;
.HTabbedPanels .TabbedPanelsContent {
     padding: 4px;
.HTabbedPanels .TabbedPanelsContentVisible {
</style>
</head>
<body>
<div id="TabbedPanels1" class="VTabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
         <div id="TabbedPanels2" class="HTabbedPanels">
           <ul class="TabbedPanelsTabGroup">
             <li class="TabbedPanelsTab" tabindex="0">Tab 1.1</li>
             <li class="TabbedPanelsTab" tabindex="0">Tab 1.2</li>
         </ul>
           <div class="TabbedPanelsContentGroup">
             <div class="TabbedPanelsContent">Content 1.1</div>
             <div class="TabbedPanelsContent">Content 1.2</div>
         </div>
       </div>
    </div>
    <div class="TabbedPanelsContent">
         <div id="TabbedPanels3" class="HTabbedPanels">
           <ul class="TabbedPanelsTabGroup">
             <li class="TabbedPanelsTab" tabindex="0">Tab 2.1</li>
             <li class="TabbedPanelsTab" tabindex="0">Tab 2.2</li>
         </ul>
           <div class="TabbedPanelsContentGroup">
             <div class="TabbedPanelsContent">Content 2.1</div>
             <div class="TabbedPanelsContent">Content 2.2</div>
         </div>
       </div>
    </div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
</script>
</body>
</html>
What the vertical tabs does, is override the style rules of the normal (horizontal) tabs. Thats OK, but if we then want horizontal tags, we must resurrect the orginal style rules. We must also make sure that we choose the selectors carefully unless we want to rewrite the JavaScript file.
I think the above approach is probably the best,
Keep up the good work.
Gramps

Problem with aligning buttons with background image.

Dear all,
Just an introduction, I am a newbie to dreamweaver and currently hopelessly lost in solving some problems, and wish to seek your advice and help here.
I am creating a webpage with a background that shows a line across near the top of the site. I placed an image with the line as background under the page properties. I am placing buttons on that line, so when I mouse over the buttons, the part of the line above the buttons will darken, showing that the button has been selected.
The image of the buttons include the darken lines and the words. I can align the button lines with the background line when viewing the site in 100%, but on other resolutions or if I zoom in 125% or 150%, the lines are not aligned.
Here is a picture of my dreamweaver working area, where I manually adjust the buttons to align with the background line. The button lines are already not aligned here, but they look aligned on site in 100%.
[IMG]http://i1126.photobucket.com/albums/l614/artbox11/pic1.jpg[/IMG]
Here are how the lines look at 150%. The arrows show where the button lines are not aligned with the background image line.
[IMG]http://i1126.photobucket.com/albums/l614/artbox11/pic2.jpg[/IMG]
Can anyone advise how I can align the button lines with the background image line so that whichever resolution I view the lines will be aligned from side to side? Any tips and advice will be greatly appreciated, as I have been looking around DW for a day now and cannot find out how to fix this.
Thank you!!

Dear Murray, thank you for offering to help, much appreciated.
Here are my codes. I did not write any of the codes though, I just use the design tab and built tables and insert images.
<!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=iso-8859-1" />
<title>Metamorfic</title>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
</head>
<body onload="MM_preloadImages('Metamorfic Site Files/Button - About 2.jpg','Metamorfic Site Files/Button - Contact 2.jpg')">
<table width="800" border="0" align="center">
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td height="187"> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td width="116" height="32"> </td>
    <td width="552"> </td>
    <td width="110"> </td>
</tr>
</table>
<table width="1100" height="50" border="0" align="center">
<tr>
    <td width="1094" height="46"><table width="672" height="34" border="0" align="center">
      <tr>
        <td width="666" height="30" align="center" valign="bottom"><img src="Metamorfic Site Files/Button - About 1.jpg" width="122" height="28" id="Image3" onmouseover="MM_swapImage('Image3','','Metamorfic Site Files/Button - About 2.jpg',1)" onmouseout="MM_swapImgRestore()" /><img src="Metamorfic Site Files/Button - Contact 1.jpg" width="110" height="28" id="Image6" onmouseover="MM_swapImage('Image6','','Metamorfic Site Files/Button - Contact 2.jpg',1)" onmouseout="MM_swapImgRestore()" /></td>
      </tr>
    </table></td>
</tr>
</table>
<table width="800" border="0" align="center">
<tr>
    <td height="340"> </td>
</tr>
</table>
<table width="800" border="0" align="center">
<tr>
    <td width="300" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="25" align="center" valign="middle"> </td>
    <td width="300" align="center" valign="middle"> </td>
</tr>
</table>
<p> </p>
</body>
</html>

Trouble with background image in JPanel

I'm trying to get an image to display as a background image, and then put JLabels with other content on top of that background image. I've tried several things but can't figure out how to do it. Everytime I try, I get the images to display but the content is displayed side by side because of the layout manager.
I've tried this but the image is displayed very tiny and still is not displayed in the background.
   //*   Draw background images for panels            *
       public class BackgroundPanel extends JPanel
      // the image you want displayed in the background
         private Image background;
      // A constructor to build and initialise your panel.
      // @param resourceName
          public BackgroundPanel(String resourceName)
            background = new ImageIcon( getClass().getClassLoader().getResource( resourceName )).getImage();
            setOpaque(false);
      // @see java.awt.Container#paint(java.awt.Graphics)
          public void paint(Graphics g)
            g.drawImage(background, 0, 0, 200, 480, this);
         // draw the rest of the panel and it's children
              super.paint(g);
      }

To add a background to a Swing component, do not overload the public void paint(Graphics g); methods, but the public void paintComponent(Graphics g); instead, otherwise, the background will always overlap the Swing components added.
Here is a goog working code:
public void paintComponent(Graphics g) {
     super.paintComponent(g);
     g.drawImage(myStaticBackground, this.getWidth() - 256, this.getHeight() - 256, this);
}In this example, I draw a static Image sized 256�256 at the bottom right corner.
Fabruccio
Java J2SE 1.5

Problem with Background image and JFrame

Hi there!
I've the following problem:
I created a JFrame with an integrated JPanel. In this JFrame I display a background image. Therefore I've used my own contentPane:
public class MContentPane extends JComponent{
private Image backgroundImage = null;
public MContentPane() {
super();
* Returns the background image
* @return Background image
public Image getBackgroundImage() {
return backgroundImage;
* Sets the background image
* @param backgroundImage Background image
public void setBackgroundImage(Image backgroundImage) {
this.backgroundImage = backgroundImage;
* Overrides the painting to display a background image
protected void paintComponent(Graphics g) {
if (isOpaque()) {
g.setColor(getBackground());
g.fillRect(0, 0, getWidth(), getHeight());
if (backgroundImage != null) {
g.drawImage(backgroundImage,0,0,this);
super.paintComponent(g);
Now the background image displays correct. But as soon as I click on some combobox that is placed within the integrated JPanel I see fractals of the opened combobox on the background. When I minimize
the Frame they disappear. Sometimes though I get also some fractals when resizing the JFrame.
It seems there is some problem with the redrawing of the background e.g. it doesn't get redrawn as often as it should be!?
Could anyone give me some hint, on how to achieve a clear background after clicking some combobox?
Thx in advance

I still prefer using a border to draw a background image:
import java.awt.*;
import java.awt.image.*;
import javax.swing.border.*;
public class CentredBackgroundBorder implements Border {
    private final BufferedImage image;
    public CentredBackgroundBorder(BufferedImage image) {
        this.image = image;
    public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
        int x0 = x + (width-image.getWidth())/2;
        int y0 = y + (height-image.getHeight())/2;
        g. drawImage(image, x0, y0, null);
    public Insets getBorderInsets(Component c) {
        return new Insets(0,0,0,0);
    public boolean isBorderOpaque() {
        return true;
}And here is a demo where I load the background image asynchronously, so that I can launch the GUI before the image is done loading. Warning: you may find the image disturbing...
import java.awt.*;
import java.io.*;
import java.net.URL;
import javax.imageio.*;
import javax.swing.*;
import javax.swing.border.*;
public class BackgroundBorderExample {
    public static void main(String[] args) throws IOException {
        JFrame.setDefaultLookAndFeelDecorated(true);
        JFrame f = new JFrame("BackgroundBorderExample");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        JTextArea area = new JTextArea(24,80);
        area.setForeground(Color.WHITE);
        area.setOpaque(false);
        area.read(new FileReader(new File("BackgroundBorderExample.java")), null);
        final JScrollPane sp = new JScrollPane(area);
        sp.setBackground(Color.BLACK);
        sp.getViewport().setOpaque(false);
        f.getContentPane().add(sp);
        f.setSize(600,400);
        f.setLocationRelativeTo(null);
        f.setVisible(true);
        String url = "http://today.java.net/jag/bio/JagHeadshot.jpg";
        final Border bkgrnd = new CentredBackgroundBorder(ImageIO.read(new URL(url)));
        Runnable r = new Runnable() {
            public void run() {
                sp.setViewportBorder(bkgrnd);
                sp.repaint();
        SwingUtilities.invokeLater(r);
}

Mixed results on iPad and iPhone 6 Plus with background image. How to fix this?

Flash Professional CC
I'm having an issue with adding images on iPhone 6 plus and iPad. I'm getting mixed results with two items: 1) a background image and 2) a button that should appear at the bottom left-hand corner on any device. In one case the background image appears enlarged and only shows about 30% of itself. In the other case, the bottom left-hand button appears about 50 pixels to the left when x=0. I also get different results when I set the following:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
This does not produce the expected results. I would like to have consistent results across iPad and iPhone 6 plus, which seams to be an issue. The immediate fix for this is to leave the images on the stage instead of using addChild. I could then just stretch the background image so that it spans the whole screen. But I want to add the items dynamically for greater flexibility.
Here are two cases:
Case #1:
This an iPhone 6 plus and you should notice 2 things. 1) There is black and white on both sides. The blue background SHOULD APPEAR ACROSS THE WHOLE SCREEN. 2) The red button in the corner SHOULD APPEAR IN THE LEFT MOST CORNER OF THE
SCREEN.
Case #2:
This an iPhone 6 plus and I have set the scale X, Y to the stage.stageWidth/Height:
mc_stageBackground_Main.scaleX = stage.stageWidth;
mc_stageBackground_Main.scaleY = stage.stageHeight;
This results in a close up of the background image.
Here is the code that I'm using:
import com.greensock.TweenLite;
import com.greensock.easing.*;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
//When this is active the background image spans across the device (iPhone 6 plus) correctly. The main logo image does not line up correctly.
/*stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;*/
var main_logo:MC_LOGO_MAIN = new MC_LOGO_MAIN();
var mainBackground_2208: MC_MAIN_BACKGROUND_2208 = new MC_MAIN_BACKGROUND_2208();
var mainBackground_1024: MC_BACKGROUND_1024 = new MC_BACKGROUND_1024();
var mainCorner: MC_MAINCORNER = new MC_MAINCORNER();
var chapters: MC_CHAPTERS = new MC_CHAPTERS();
var _stageWidth = 1024;
if (stage.stageWidth > _stageWidth)
    //Add bigger background if the stage is bigger than 1024
    mainBackground_2208.x = stage.stageWidth/2;
    mainBackground_2208.y = stage.stageHeight/2;
    addChild(mainBackground_2208);
    //Using this code results in a very close up view of the stage on iPhone 6 plus
    /*mc_stageBackground_Main.scaleX = stage.stageWidth;
    mc_stageBackground_Main.scaleY = stage.stageHeight;*/
    //Adds corner to the main screen.
    mainCorner.y = stage.stageHeight;
    mainCorner.x = (stage.stageWidth - stage.stageWidth);
    addChild(mainCorner);
    TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});
    //add logo to sit at 50 pixels from the top of the stage
    /*main_logo.x = stage.stageWidth/2;
    main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);
    addChild(main_logo);
    TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});*/
else
    trace ("The stage is 1024 or smaller");
    //Add 1024 background if stage is 1024 or smaller
    mainBackground_1024.x = stage.stageWidth/2;
    mainBackground_1024.y = stage.stageHeight/2;
    addChild(mainBackground_1024);
    //Adds corner to the main screen.
    mainCorner.y = stage.stageHeight;
    mainCorner.x = (stage.stageWidth - stage.stageWidth);
    addChild (mainCorner);
    TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});
    //adds chapters
    chapters.x = (stage.stageWidth - stage.stageWidth)+75;
    chapters.y = stage.stageHeight - 120;
    addChild(chapters);
    TweenLite.from(chapters, 1,{ height: 0, delay:.5, ease:Elastic.easeOut});
    //adds the Main logo to sit at 50 pixels from the top of the stage
    main_logo.x = stage.stageWidth/2;
    main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);
    addChild(main_logo);
    TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});

On all of the devices go to settings - facetime - iphone cellular calls - oFF, this part of Apple continuity.

Scrolling slow in a panel with 300 images

Hi,
I am using a panel which contains about 300 images (small icons).
I covered this panel with a scroller, and when scrolling, it's very slow.
when there are less images (about 50), it scrolls smoothly.
Any suggestions ?
<s:Panel id="src"
                               skinClass="SrcSkin"
                               dragEnter="trashDragEnterHandler(event);"
                               dragDrop="trashDragDropHandler(event);"
                               bottom="{bottomBar.height}" width="100%" >
                    <s:Scroller width="100%" height="100%" id="srcScroller" >
                              <s:Group width="100%" height="100%" id="aaa" verticalCenter="0">
                    ADDING 300 IMAGES HERE AT RUNTIME....
                                        <s:layout>
                                                  <s:TileLayout verticalGap="-50" horizontalGap="11" />
                                        </s:layout>
                              </s:Group>
                    </s:Scroller>
          </s:Panel>

Try using a list with itemrenderer for image. Scrolling performance will imporve as the list recycles its renderers.

Tabbed Panel with Fade Effect

Open my site, dg-ad.com, and the tabbed panel drop down menu has the first level visible. Click on a menu item and the second level becomes visible. The second level has a Spry fade effect so it fades into view nicely. The class .TabbedPanelContent sets the visibilty of the second layer hidden, and there is no distracting flicker, good so far.
Besides clicking on menu item I often send clients a link with a string query which lands them on my site with the tabbed panel open to what I want them to see initially., I use a string query in the URL per Dave Powers technique often refered to in this forum titled'Spry: Opening Specific Tabs and Panels from Another Page".
Because the visibility is set to hidden in the CSS the second level of the tabbed panel is still invisible, So I am looking for suggestions that may involve scripting the style or playing with the CSS to overide the CSS and make the second level visible when users arrive via the query string method.
Thanks for taking a look!
Daniel

For Spry 1.0 widgets, each widget had one core file. Each of them had common things like addClassName(), removeClassname(), along with a bunch of basic functionality. So that adds up to a lot of redundant code.
This way, all that common stuff is kept in a single file. That means that each widget base class just has what it needs to glue everything together.
Many widgets are 'panel' based: accordions, tabbed panels, slideshows. So handling those panels is done via the PanelSet and PanelSelector files.
You will find SpryTabbedPanels2.js much smaller than the first version.
By components, for instance: SpryFadingPanels.js is only needed if you want to fade between panels. If you don't want that effect, you don't need to use it. WIth components and plugins, you or anyone else can write a different transition and make that available to all your Spry UI widgets.
I don't like all the includes either but it's the right way to go with what we are doing.
Thanks,
Don

Vertical tabbed panel with background image

Similar Messages

Maybe you are looking for