2.1 EA1 - No scroll in Outline
If I'm looking at the outline for a large stored procedure, I am limited to the size of the outline window. I've tried docking it in different places and floating it to see if it would get a scroll bar, but no luck.
On a larger scale, it would be nice if in addition to outline (or in replacement of), that something comparable to the Structure Tab in JDeveloper was included...which does have scrollbars, and much more detail.
What's the outline window? I don't see it listed as one of the views on the view menu. I can hold the control key while hovering over the right hand gutter to see code in that location, but it's still not an outline.
I'm just curious about a feature I may never have encountered before.
Similar Messages
-
Right margin ? and JSrollBar question
To keep my components from being too close to the edge on the left hand side of my app, i use:
container.add(Box.createRigidArea(new Dimension(5,0)));
My question is how i can acheive the same 5 pixel wide margin on the right handside of my container. If i do 'newDimension(5, (getWidth() - 5))' will this be respected as the component is enlarged or is there a better way ?
Secondly i have 2 JScrollBars (each with a JTable) in a splitPane, the horizontal scroll bar outline always shows but never with the blue bar part. Here is the relevant code:
JScrollPane s1 = new JScrollPane(getTableA());
JScrollPane s2 = new JScrollPane(getTableB());
JSplitPane spl = new JSplitPane(JSplitPane.VERTICAL_SPLIT,s1, s2);
s1.setHorizontalScrollBarPolicy(JScrollPane.HORIZONTAL_SCROLLBAR_ALWAYS);
s1.setVerticalScrollBarPolicy(JScrollPane.VERTICAL_SCROLLBAR_AS_NEEDED);
s2.setHorizontalScrollBarPolicy(JScrollPane.HORIZONTAL_SCROLLBAR_ALWAYS); s2.setVerticalScrollBarPolicy(JScrollPane.VERTICAL_SCROLLBAR_AS_NEEDED);
void set(Container pane){
pane.setLayout(new BoxLayout(pane, BoxLayout.Y_AXIS));
//returns the split pane above
pane.add(getSpl());
}Thanks for the helpRegarding the margin, it appears i can't apply this to a container. Is there another way ?Borders are only for Swing components so you would at the Border to the panel you added to the content pane.
if the table doesn't resize to the size of the application it looks very bad indeedIf the table resizes to the size of the application then there is no need for horizontal scrollbars. -
Yahoo hijacked my address bar and new tabs how can i restore google
Whenever I open a new tab it defaults to yahoo search even when i uninstalled yahoo toolbar and set new tabs to my home page. Yahoo also shows in my address bar. What gives? I would prefer to have google for my search default new tab page
here's the FIRST HALF of the source... how do I obliterate it?
<!doctype html><html lang="en-US"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Yahoo! Search - Web Search</title><meta name="description" content="The search engine that helps you find exactly what you're looking for. Find the most relevant information, video, images, and answers from all across the Web."><style>html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif}table{font-size:inherit;font:100%}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}.sa-tray *{position:static;margin:0;padding:0;border:0;float:none;font:13px arial,helvetica,clean,sans-serif;font-style:normal;font-weight:normal;background-image:none}.sa-hidden{display:none}.sa-tray{font:13px arial,helvetica,clean,sans-serif;background:#414e67;border:1px solid #222;line-height:18px;position:relative}.sa-tray ul{margin:6px}.sa-tray li{list-style:none;margin-bottom:2px}.sa-tray li a{color:#fff;text-decoration:none;display:block;padding:0 3px 1px 3px;_width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis;-moz-border-radius:3px;-webkit-border-radius:3px}.sa-tray li a:hover{background:#636f89}.sa-tray li a:focus{outline:#838da2 solid thin}.sa-tray li a b{color:#a1bbd9;font-weight:bold}li.sa-spayt a,li.sa-spayt a b{color:#3ff;font-weight:bold;font-style:italic}.sa-active{background:#51607c}.sa-gossip{margin-right:70px}.sa-settings{text-decoration:none;color:#a1bbd9;position:absolute;top:2px;right:5px;font-size:10px}.sa-scroll-up,.sa-scroll-down{outline:none;position:absolute;right:6px;width:10px;height:5px;overflow:hidden;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJAQMAAAAxaC9QAAAABlBMVEX////8/f2LAkibAAAAAXRSTlMAQObYZgAAAB1JREFUeNpj4GFgkGNgsGdgqG9g+H8ARNqDRXgYAD4tBJAUajdMAAAAAElFTkSuQmCC);*background:url(http://a.l.yimg.com/a/i/us/sch/gr4/miniassist-20091019.png)}.sa-scroll-up{bottom:24px}.sa-scroll-down{background-position:0 5px;bottom:6px}.sa-disabled{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);opacity:.2}.sa-shim{position:absolute;left:-1px;top:-1px;border:0;margin:0;padding:0;display:none;z-index:-1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity:0}.sa-tray p{position:absolute;visibility:hidden}body{font:15px arial,helvetica,'bitstream vera sans',clean,sans-serif}a{color:#133891;text-decoration:none}a:hover{text-decoration:underline}.offscreen{left:-9999px;position:absolute}#bd{margin:153px auto 0;position:relative;width:750px}#tabs{margin:0 0 4px 150px;position:relative;z-index:1}#tabs li{display:inline;padding:0 7px}#tabs li.last{border:0}.sd #tabs{margin:0 0 13px 150px}.sd #tabs li{padding:0 19px 0 3px;position:relative}.sd #logo{top:25px;left:-60px}#tabs .on{color:#133891;font-weight:bold;cursor:default}#logo{background-repeat:no-repeat;overflow:hidden;position:absolute;top:5px;left:-50px;width:200px;height:58px;text-indent:-9999px}#sf{margin-left:150px}#yschsp{border:1px solid #929292;border-bottom-color:#d5d5d5;border-right-color:#d5d5d5;height:18px;padding:3px 6px;position:relative;width:434px;-moz-box-shadow:inset 1px 1px #dfdfdf}#yschbt{background-color:#fdce3e;background-repeat:repeat-x;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAZCAIAAAB/8tMoAAAAPUlEQVR42jWLQQqAQBDDOv3/9xSf4WlP7sQi4yGEFGr6tNZl0WFbCjxWh5i4mG127mN6/78P8q00HVeaGF4G+jQ9YP3upQAAAABJRU5ErkJggg==');border:1px solid #e5a716;color:#434343;cursor:pointer;font-weight:bold;height:26px;margin-left:7px;padding:0 23px;*padding:0 11px;*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fffff4ae,endColorstr=#fffdce3e)}#yschsp,#yschbt{font-weight:bold}#ft{font-size:11px;color:#6f9cb9;margin-top:50px;text-align:center}#ft a{color:#6f9cb9}#ft ul{display:inline}#ft span{margin-right:10px}#ft li{display:inline;padding:0 6px;border-left:1px solid #aac5d4}#tabs li.last{position:relative}#more-link{position:relative;padding-right:16px;_zoom:1;text-decoration:none}#more-link span{background-position:-193px -60px;background-repeat:no-repeat;position:absolute;bottom:6px;right:4px;width:7px;height:4px;overflow:hidden}#more-menu li{display:block;border:0;padding:0}.menu{font-size:13px;position:absolute;top:18px;left:6px;display:none;background:#fff;border:1px solid #889aa7;z-index:1;padding:2px}.menu ul{border-top:1px solid #889aa7;padding:3px}.menu ul.first-of-type{border:0}.menu li a{display:block;padding:2px 12px 2px 4px;white-space:nowrap}.menu li a:hover{background:#889aa7;color:#fff;text-decoration:none}.menu-visible{display:block}#promo{margin-top:50px;text-align:center;position:relative}#promo a.ypromo{text-decoration:underline;position:relative}#promo .ypromo s,#promo .y-dsp s{width:16px;height:12px;background-position:-117px -95px;position:absolute;top:4px;left:-20px}#promo .y-dsp{position:relative;margin-left:50px}#promo .msb{margin-left:120px;margin-top:10px}#promo .msb li{float:left;width:105px;margin-right:10px;overflow:hidden;height:21px}#promo .fb iframe{float:left}#sat{width:446px;_width:440px;position:absolute;z-index:1;*margin-top:-1px}body.ffstart #bd{width:630px;height:145px;margin-top:50px;padding:85px 0 0 18px;background:url(http://a.l.yimg.com/a/i/us/sch/gr4/firefox-201005071438.png) no-repeat}.firefox-start{position:absolute;top:25px;left:12px;color:#fefffc;font-size:32px;text-shadow:#0f0f18 2px 2px}body.ffstart h1{position:relative;height:70px}body.ffstart #logo{left:-10px}body.ffstart #tabs,body.ffstart #sf{margin-left:0}body.ffstart #ypromo{margin-top:70px}body.ffstart #ft{margin-top:100px}#bd[dir="rtl"] .firefox-start{left:auto;right:150px}#bd[dir="rtl"] #tabs,#bd[dir="rtl"] #sf{margin-right:55px}body.yptnr #bd{width:820px}body.yptnr div#logoHolder{position:absolute;top:-90px}#logoHolder.p{left:325px}#logoHolder.s{left:275px}body.yptnr span.sep{position:absolute;left:160px;border-left:1px solid #BDBDBD;padding:5px 20px}body.yptnr #tabs,body.yptnr #sf{margin-left:135px}body.yptnr #mkts{position:absolute;top:-120px;right:135px}body.yptnr #mkts-menu{position:absolute;display:none;width:300px;border:1px solid #889AA7;background-color:white;font-size:13px;padding:2px;z-index:2;text-align:left;margin:2px auto;padding-left:10px}body.yptnr #mkts-menu a{width:150px;float:left;margin:5px 0;font-size:13px;color:#133891;cursor:pointer}body.yptnr #mkts-menu.menu-visible{display:block}.clear_fix{zoom:1}.clear_fix:after{clear:both;content:'';display:block}#bd{width:820px}#at{margin-left:150px}#sf,#at{z-index:3}.off-left{left:-9999px;position:absolute}#yschsp.sd{border-color:#929292 #D5D5D5 #D5D5D5 #929292;border-style:solid;border-width:1px;height:18px;padding:3px 6px;width:534px}#yschsp.sd{padding:3px 8px \9;width:530px \9}:root #yschsp.sd{padding:3px 6px \9;width:534px \9}#yschbt{margin-left:6px;*margin-left:4px;position:relative}#sbx{padding:6px}#sbx.shl-reg{padding:5px}#sbx .sbq:focus{outline:none}.shl-reg .sbq{border:1px solid #B8C1CD}.shl-reg{border:1px solid #b8c1cd;padding:5px;background:#dbdee5;position:relative}#sbx.shl-reg{border-radius:4px;-moz-border-radius:4px}#at.shl-reg{border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;box-shadow:2px 2px 2px #e5e9ec;-webkit-box-shadow:2px 2px 2px #e5e9ec;-moz-box-shadow:2px 2px 2px #e5e9ec}.shl-bd{background:white;border:1px solid #b8c1cd;margin:0;padding:0;position:relative;overflow:hidden;display:block}#at{background-image:none;position:absolute;top:64px;left:0;font-size:15px;border-top:0}#at,#at.shl-reg,#at.sa-tray{filter:none!important}#at.shl-reg -
I was trying to bookmark a page, using the "Choose" menu in the bookmarks. I must have touched a key by accident, and a box with a blue outline & the name of one of my folders appeared in my bookmark drop-down menu. At first the box contained the folder name, then I was trying to delete the box, and erase the name, thinking it might get rid of the box, but it didn't. I can't get rid of this box! It obstructs the view of what is underneath. It stays in the same position as I scroll up & down in the drop-down menu, and it hides what is underneath. Please help me get rid of this box. It is driving me crazy! Thanks!
Start Firefox in <u>[[Safe Mode]]</u> to check if one of the extensions or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance/Themes).
*Don't make any changes on the Safe mode start window.
*https://support.mozilla.org/kb/Safe+Mode
*https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes
See also:
*http://kb.mozillazine.org/Corrupt_localstore.rdf -
I am experiencing difficulty with iPhoto '11. Some of more recent photos can not be accessed. As I scroll down the page of photos, the most recent ones appear briefly, then disappear to be replaced with a box outlined by a broken-line. The menu bar says that I have 317 photos hidden. Hiding photos is not something that I normally do, can't imagine why these are hidden. Anyway, when I try to unhide the photos, I can view them as an event, but if I click on a single photo, or try to move it into an album, the photo does not display. Instead I get a dark exclamation point within a triangle. Another problem with these same photos is on the event page there is no key photo for these events only a dark screen. I can't find an answer to my problem. Has anyone experienced this? What is the problem and how can I correct it?
The ! turns up when iPhoto loses the connection between the thumbnail in the iPhoto Window and the file it represents.
Option 1
Back Up and try rebuild the library: hold down the command and option (or alt) keys while launching iPhoto. Use the resulting dialogue to rebuild. Choose to Rebuild iPhoto Library Database from automatic backup.
If that fails:
Option 2
Download iPhoto Library Manager and use its rebuild function. This will create a new library based on data in the albumdata.xml file. Not everything will be brought over - no slideshows, books or calendars, for instance - but it should get all your albums and keywords back.
Because this process creates an entirely new library and leaves your old one untouched, it is non-destructive, and if you're not happy with the results you can simply return to your old one. .
Regards
TD -
My scroll bar is not working properly. It works if I click the outline only. How do I fix this?
I have tried reinstalling the lastest version but it did not fix the problem. I am running windows 7 on a hp envy. My scroll bar was working fine before the firefox version 4 update. Also the up and down arrows do not work unless I click on the outline of the boxes either. Any help in resolving this issue would be greatly appreciated as this is vary annoying.
Does your MacBook have a removable battery?
If so, try removing the battery and running just on the power adapter. Don't do anything too important as the computer will power off if the power adapter comes loose! Just do this for a few minutes to see if your trackpad works any better.
If your battery isn't removable, run your hand over the bottom of the computer - or run a level over it if you have one - to see if it's flat.
In either case, it's possible your battery has swollen and is applying pressure on the connection for the trackpad, which in turn means the trackpad won't work as expected.
~Lyssa -
Show Section/Level 1 Outline Title when Scrolling in iOS Pages
To make this a bit clear I would like to refer to scrolling in iBooks. When you swipe the scroll bar you will see the title of the chapters (sections) of the book above the tip of your finger. I would like to see same effect/feature of this in Pages. I have created an ms word 500-page doc (text only) complete with Sections and Outline Level 1 for chapter titles and the rest will be body text. The imported doc into Pages format looks almost same as the original doc and the sections are preserved. Since Pages has no Document Map (as in MS Word) it would help me a lot to jump to any of the sections of the document without having to rely on the tiny thumbnail with unreadable text, like jumping from chapter to another if there is that title text appearing over the thumbnail when I am scrolling along the doc. Is there a way I can show the outline level title/chapters? Or is this feature not yet available? Hope this will be available soon because it will be very helpful. Thank you...
You should submit feedback directly to Apple to let them know you would like to see this feature. Feedback for Pages for Mac: http://www.apple.com/feedback/pages.html. Feedback for Pages for iOS: http://www.apple.com/feedback/pages_ios.html
-
Photos in iPhoto album are only a hash-marked outline the image only shows when scrolling how can I see the image and open the photo?
Make a temporary, backup copy (if you don't already have a backup copy) of the library and apply the two fixes below in order as needed:
Fix #1
Launch iPhoto with the Command+Option keys held down and rebuild the library.
Select the options identified in the screenshot.
Fix #2
Using iPhoto Library Manager to Rebuild Your iPhoto Library
Download iPhoto Library Manager and launch.
Click on the Add Library button, navigate to your Home/Pictures folder and select your iPhoto Library folder.
Now that the library is listed in the left hand pane of iPLM, click on your library and go to the File ➙ Rebuild Library menu option
In the next window name the new library and select the location you want it to be placed.
Click on the Create button.
Note: This creates a new library based on the LIbraryData.xml file in the library and will recover Events, Albums, keywords, titles and comments but not books, calendars or slideshows. The original library will be left untouched for further attempts at fixing the problem or in case the rebuilt library is not satisfactory.
OT -
EA1 - Right gutter scroll bar in the Code Editor doesn't work?
SQL Developer version 4.0.0.12, Windows XP
I'm opening package body in Code Editor. In previous version of SQL Dev after pressing CTRL and moving mouse over the right gutter I could see a few lines of the code from mouse pointed position in the source.
Now it doesn't work.
Link below - section "Working in the Procedure Editor":
http://www.thatjeffsmith.com/archive/2012/01/viewing-plsql-compilation-errors-in-oracle-sql-developer/Hi,
It is true the right gutter's general scrolling window view capability no longer exists in 4.0. However, if code errors exist, then small blue squares (uncompiled code) or slightly larger red rectangles (compiled code) appear in the gutter representing the relative positions of the bad code. Hovering the mouse over those produces a pop-up display of the offending code and, in fact, the pop-up will not display if the Ctrl key is pressed at the same time. Of course, clicking on the rectangles or squares moves the editor's current line to that code as in earlier releases.
So it is not clear whether this is merely the new, intended behavior, or if more of the prior behavior remains to be implemented in 4.0. As far as I can tell, nothing important has been lost here, but that is just my opinion.
Regards,
Gary
SQL Developer Team -
SQL DEVELOPER 3 EA1 - Missing Left / Right tab scroll icons
On the left pane that has the Connections, Reports tabs, once a few schema browsers are added (2 for example), there is no way to scroll left and right on the tabs using Left/Right buttons. The right pane that has the SQL worksheets get those arrows once more tabs are added then can fit the window.
I already have a bug logged for the text on the tabs not being visible if you have 3 or more tabs open in the navigator. As noted, you can drag these tabs to create separate new navigators, which may be considered to be a work around, but does mean you can see your tab headings. The extra options and navigators do mean that this is more noticeable now. I have raised the priority of the bug.
Ctrl+tab will allow you to navigate through the tabs.
Sue -
My iPhone 4s suddenly stopped opening apps when icons were touched. Touching an icon puts a black box around it and it will only open with a double touch, then app will not scroll at all. Also, cannot switch sideways l between home screens. Tried resetting, resyncing, no help.
Oh my gosh! Thank you so much for your answer! I wasn't able to fix my phone for days and my cell phone company's store didn't even know how to fix it. Thank you so much! BTW your answer made my phone work again!!!
-
Scrolling text is jumpy/pulsing when compressed
I'm making end credits using the scroll up text animation behavior in Motion 2.1.2. Whenever I compress it for DVD Studio Pro and insert it the text looks terrible. It is pulsing in and out and is hardly readable. I found a few other people who have had this problem, but no solutions that have helped.
I have done credits using the scrolling text in Final Cut without much problem, but for this project I need motion in order to use text of different sizes.
Here are my specs:
Project Properties - NTSC DV; 720x480; Pixel Aspect Ratio: NTSC D1/DV - 0.90; Field Order: Lower First (Even); Frame Rate: 29.97; Background color is black (0%)
Render Settings - Motion Blur Samples: 8; Shutter Angle: 360; Output Antialiasing Method: Best
I used Export using Compressor: DVD Best Quality 90 minutes 4:3; I tried using the Color+Alpha and just Color in the Output options. Premultiply alpha and Use field render are both checked. Use motion blur is not checked.
Most of the text is Geneva Regular 14 pt font. I have tried completely white as well as setting the RGB sliders all at 235 with no difference. I also tried using a black outline with no difference. The scroll up behavior has a rate of 52.
Please help! It took me forever to put these credits together and I don't want to start from scratch with another program. Making the text bigger helps a little bit but I would really like to keep it the same size for timing and format sake. However, I can't keep it like this because it looks terrible both on an Apple Cinema display and on a tv after burned to DVD.
Thanks!My first guess would be the font itself. Geneva is a pretty thin font and it's not likely to look good interlaced and on a TV. Can you try a thicker font?
I'd also turn off Field Rendering. It looked much worse with it on than off. Keep Frame Blending though.
Andy -
How do I reposition image scroller bar from middle to the right
I am customising an image thumb scroller. and trying to follow up previously developed code.
All worked fine until the last moment when thumbnails bar is positioned as if its starting point is in the middle of the screen. I suppose it was developed for the flash screen layout with centered coordinates. My stage probably has them set to the upper left corner.
I can not make the bar move.
My stage size is 1024 x 768
Where do I do my math in the code so the thumbnails will be located in the middle of the screen rather than in its right hand.
Here are the code snippets responsible for the thumbnails build up:
const _THUMB_WIDTH:Number = 50;
const _THUMB_HEIGHT:Number = 64;
const _IMAGE_WIDTH:Number = 860;//550;original #
const _IMAGE_HEIGHT:Number = 500;//355;original #
const _THUMB_GAP:Number = 2;
const _SCROLL_SPEED:Number = 12;
const _SCROLL_AREA:Number = 150;
var _progressBar:MovieClip;
var _arrowLeft:MovieClip;
var _arrowRight:MovieClip;
var _slides:Array;
var _curSlide:Slide; //Slide that is currently displaying
var _loadingSlide:Slide; //only used when a Slide is supposed to show but hasn't been fully loaded yet (like if the user clicks "next" many times before all the images have loaded). We keep track of the one that's in the process of loading and should be shown as soon as it finishes, then we set _loadingSlide back to null.
var _imagesContainer:Sprite; //the Sprite into which the full-size images are placed (this helps manage the stacking order so that the images can always be behind everything else and yet we can addChild() each image so that it shows up on top of the previous one)
var _thumbnailsContainer:Sprite; //the Sprite into which the thumbnail images are placed. This also allows us to slide them all at the same time.
var _destScrollX:Number = 0; //destination x value for the _thumbnailsContainer which is used for scrolling it across the bottom. We don't want to use _thumbnailsContainer.x because it could be in the process of tweening, so we keep track of the end/destination value and add/subtract from it when creating our tweens.
var _minScrollX:Number; //we know the maximum x value for _thumbnailsContainer is 0, but the mimimum value will depend on how many thumbnail images it contains (the total width). We calculate it in the _setupThumbnails() method and store it here for easier/faster scrolling calculations in the _enterFrameHandler()
_thumbnailsContainer = new Sprite();
addChild(_thumbnailsContainer);
//_thumbnailsContainer.x = -550;//moves x position of thumbnails, instead done in line 273 thumbnail.x = curX - 590;
_thumbnailsContainer.y = _IMAGE_HEIGHT;//moves y position of thumbnails
_thumbnailsContainer.alpha = 0; //we want alpha 0 initially because we'll fade it in later when the thumbnails load.
_thumbnailsContainer.visible = false; //ensures nothing is clickable.
var xmlLoader:XMLLoader = new XMLLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/data.xml", {onComplete:_xmlCompleteHandler});
xmlLoader.load();
function _xmlCompleteHandler(event:LoaderEvent):void {
_slides = [];
var xml:XML = event.target.content; //the XMLLoader's "content" is the XML that was loaded.
var imageList:XMLList = xml.image; //In the XML, we have <image /> nodes with all the info we need.
//loop through each <image /> node and create a Slide object for each.
for each (var image:XML in imageList) {
_slides.push( new Slide(image.@name,
image.@description,
new ImageLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/thumbnails/appThmb_imgs/" + image.@name + ".jpg",
name:image.@name + "Thumb",
width:_THUMB_WIDTH,
height:_THUMB_HEIGHT,
//centerRegistration:true,
//x:260, y:320,//doesn't work here but works in line 69
scaleMode:"proportionalInside",
bgColor:0x000000,
estimatedBytes:13000,
onFail:_imageFailHandler}),
//loops through all the thumbnail images and places them in the proper order across the bottom of the screen and adds CLICK_THUMBNAIL listeners.
function _setupThumbnails():void {
var l:int = _slides.length;
var curX:Number = _THUMB_GAP;
for (var i:int = 0; i < l; i++) {
var thumbnail:Sprite = _slides[i].thumbnail;
_thumbnailsContainer.addChild(thumbnail);
TweenLite.to(thumbnail, 0, {colorTransform:{brightness:0.5}});
_slides[i].addEventListener(Slide.CLICK_THUMBNAIL, _clickThumbnailHandler, false, 0, true);
thumbnail.x = curX;
thumbnail.y = -234;//defines y position of the thumbnails row
curX += _THUMB_WIDTH + _THUMB_GAP;
_minScrollX = _IMAGE_WIDTH - curX;
if (_minScrollX > 0) {
_minScrollX = 0;
function _enterFrameHandler(event:Event):void {
if (_thumbnailsContainer.hitTestPoint(this.stage.mouseX, this.stage.mouseY, false)) {
if (this.mouseX < _SCROLL_AREA) {
_destScrollX += ((_SCROLL_AREA - this.mouseX) / _SCROLL_AREA) * _SCROLL_SPEED;
if (_destScrollX > 0) { //this number is 1/2 the stage size, previously was at 0 it defines the left position of the thumbnails scroll end, has to be indentical to the number below
_destScrollX = 0; //this number is 1/2 the stage size, previously was at 0 it defines the left position of the thumbnails scroll end, has to be indentical to the number above
TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX});
} else if (this.mouseX > _IMAGE_WIDTH - _SCROLL_AREA) {
_destScrollX -= ((this.mouseX - (_IMAGE_WIDTH - _SCROLL_AREA)) / _SCROLL_AREA) * _SCROLL_SPEED;
if (_destScrollX < _minScrollX) {
_destScrollX = _minScrollX;
TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX});Hi, thanks for taking a look at my problem.
I assume that the code was difficult to read due to an unusual line brakes, which somehow I got when pasting on this site.
Please take a look I am pasting the code anew in it entirety:
(please let me know if you would like me to separate the areas which I believe give me troubles to address my previously describe problem:
All worked fine until the last moment when thumbnails bar is positioned as if its starting point is in the middle of the screen. I suppose it was developed for the flash screen layout with centered coordinates. My stage probably has them set to the upper left corner.
I can not make the bar move.
My stage size is 1024 x 768
Where do I do my math in the code so the thumbnails will be located in the middle of the screen rather than in its right hand.)
(Also wanted to mention that there an external file Slide.as which is not responsible for the construction and positioning of the thumbnails)
import com.greensock.*;
import com.greensock.loading.*;
//import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.*;
//import com.greensock.TweenLite;
import com.greensock.events.LoaderEvent;
//import com.greensock.loading.ImageLoader;
//import com.greensock.loading.SWFLoader;
//import com.greensock.loading.LoaderMax;
//import com.greensock.loading.XMLLoader;
import com.greensock.plugins.AutoAlphaPlugin;
import com.greensock.plugins.ColorTransformPlugin;
import com.greensock.plugins.GlowFilterPlugin;
import com.greensock.plugins.BlurFilterPlugin;//i added this filter to blur the progressBar
import com.greensock.plugins.TweenPlugin;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
//public class SlideshowExample extends MovieClip {
const _THUMB_WIDTH:Number = 50;
const _THUMB_HEIGHT:Number = 64;
const _IMAGE_WIDTH:Number = 860;//550;original #
const _IMAGE_HEIGHT:Number = 500;//355;original #
const _THUMB_GAP:Number = 2;
const _SCROLL_SPEED:Number = 12;
const _SCROLL_AREA:Number = 150;
var _progressBar:MovieClip;
var _arrowLeft:MovieClip;
var _arrowRight:MovieClip;
var _slides:Array;
var _curSlide:Slide; //Slide that is currently displaying
var _loadingSlide:Slide; //only used when a Slide is supposed to show but hasn't been fully loaded yet (like if the user clicks "next" many times before all the images have loaded). We keep track of the one that's in the process of loading and should be shown as soon as it finishes, then we set _loadingSlide back to null.
var _imagesContainer:Sprite; //the Sprite into which the full-size images are placed (this helps manage the stacking order so that the images can always be behind everything else and yet we can addChild() each image so that it shows up on top of the previous one)
var _thumbnailsContainer:Sprite; //the Sprite into which the thumbnail images are placed. This also allows us to slide them all at the same time.
var _destScrollX:Number = 0; //destination x value for the _thumbnailsContainer which is used for scrolling it across the bottom. We don't want to use _thumbnailsContainer.x because it could be in the process of tweening, so we keep track of the end/destination value and add/subtract from it when creating our tweens.
var _minScrollX:Number; //we know the maximum x value for _thumbnailsContainer is 0, but the mimimum value will depend on how many thumbnail images it contains (the total width). We calculate it in the _setupThumbnails() method and store it here for easier/faster scrolling calculations in the _enterFrameHandler()
//function SlideshowExample() {
//super();
//activate the plugins that we'll be using so that TweenLite can tween special properties like filters, colorTransform, and do autoAlpha fades.
TweenPlugin.activate([AutoAlphaPlugin, ColorTransformPlugin, GlowFilterPlugin, BlurFilterPlugin]);//i added BlurFilterPlugin at the end
_progressBar = this.getChildByName("progress_mc") as MovieClip;
_arrowLeft = this.getChildByName("arrowLeft_mc") as MovieClip;
_arrowRight = this.getChildByName("arrowRight_mc") as MovieClip;
//////////my additions to make progress bay blurry
TweenLite.to(progress_mc.progressBar_mc.gradientbar_appLoader_mcPopUp_mc, 0, {blurFilter:{blurX:21, blurY:8}});//i added this line to make ProgressBar_mc to blur
TweenLite.to(progress_mc.rectangleGray, 0, {blurFilter:{blurX:21, blurY:8}});//i added this line to make ProgressBar_mc to blur
_arrowLeft.visible = _arrowRight.visible = false;
_imagesContainer = new Sprite();
this.addChildAt(_imagesContainer, 0);
_thumbnailsContainer = new Sprite();
addChild(_thumbnailsContainer);
//_thumbnailsContainer.x = -550;//moves x position of thumbnails, instead done in line 273 thumbnail.x = curX - 590;
_thumbnailsContainer.y = _IMAGE_HEIGHT;//moves y position of thumbnails
_thumbnailsContainer.alpha = 0; //we want alpha 0 initially because we'll fade it in later when the thumbnails load.
_thumbnailsContainer.visible = false; //ensures nothing is clickable.
var xmlLoader:XMLLoader = new XMLLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/data.xml", {onComplete:_xmlCompleteHandler});
xmlLoader.load();
function _xmlCompleteHandler(event:LoaderEvent):void {
_slides = [];
var xml:XML = event.target.content; //the XMLLoader's "content" is the XML that was loaded.
var imageList:XMLList = xml.image; //In the XML, we have <image /> nodes with all the info we need.
//loop through each <image /> node and create a Slide object for each.
for each (var image:XML in imageList) {
_slides.push( new Slide(image.@name,
image.@description,
new ImageLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/thumbnails/appThmb_imgs/" + image.@name + ".jpg",
name:image.@na me + "Thumb",
width:_THUMB_W IDTH,
height:_THUMB_ HEIGHT,
//centerRegist ration:true,
//x:260, y:320,//doesn't work here but works in line 69
scaleMode:"pro portionalInside",
bgColor:0x0000 00,
estimatedBytes :13000,
onFail:_imageF ailHandler}),
new SWFLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/images/" + image.@name + ".swf",
name:image.@name + "Image",
width:_IMAGE_WIDTH,
height:_IMAGE_HEIGHT,
//centerRegistration:true,
x:-420, y:-260,
scaleMode:"proportionalInside",
bgColor:0x000000,
estimatedBytes:820000,
onFail:_imageFailHandler})
//now create a LoaderMax queue and populate it with all the thumbnail ImageLoaders as well as the very first full-size ImageLoader. We don't want to show anything until the thumbnails are done loading as well as the first full-size one. After that, we'll create another LoaderMax queue containing the rest of the full-size images that will load silently in the background.
var initialLoadQueue:LoaderMax = new LoaderMax({onComplete:_initialLoadComplete, onProgress:_progressHandler});
for (var i:int = 0; i < _slides.length; i++) {
initialLoadQueue.append( _slides[i].thumbnailLoader );
initialLoadQueue.append(_slides[0].imageLoader); //make sure the very first full-sized image is loaded initially too.
initialLoadQueue.load();
_setupThumbnails();
function _initialLoadComplete(event:LoaderEvent):void {
//now that the initial load is complete, fade out the progressBar. autoAlpha will automatically set visible to false once alpha hits 0.
TweenLite.to(_progressBar, 0.5, {autoAlpha:0});
//fade in the thumbnails container
TweenLite.to(_thumbnailsContainer, 1, {autoAlpha:1});
_setupArrows();
//setup the ENTER_FRAME listeners that controls the thumbnail scrolling behavior at the bottom
this.stage.addEventListener(Event.ENTER_FRAME, _enterFrameHandler, false, 0, true);
//now put all the remaining images into a LoaderMax queue that will load them one-at-a-time in the background in the proper order. This can greatly improve the user's experience compared to loading them on demand which forces the user to wait while the next image loads.
var imagesQueue:LoaderMax = new LoaderMax({maxConnections:1});
for (var i:int = 1; i < _slides.length; i++) {
imagesQueue.append( _slides[i].imageLoader );
imagesQueue.load();
//now start the slideshow
_showNext(null);
//loops through all the thumbnail images and places them in the proper order across the bottom of the screen and adds CLICK_THUMBNAIL listeners.
function _setupThumbnails():void {
var l:int = _slides.length;
var curX:Number = _THUMB_GAP;
for (var i:int = 0; i < l; i++) {
var thumbnail:Sprite = _slides[i].thumbnail;
_thumbnailsContainer.addChild(thumbnail);
TweenLite.to(thumbnail, 0, {colorTransform:{brightness:0.5}});
_slides[i].addEventListener(Slide.CLICK_THUMBNAIL, _clickThumbnailHandler, false, 0, true);
thumbnail.x = curX;
thumbnail.y = -234;//defines y position of the thumbnails row
curX += _THUMB_WIDTH + _THUMB_GAP;
_minScrollX = _IMAGE_WIDTH - curX;
if (_minScrollX > 0) {
_minScrollX = 0;
function _setupArrows():void {
_arrowLeft.alpha = _arrowRight.alpha = 0;
_arrowLeft.visible = _arrowRight.visible = true;
_arrowLeft.addEventListener(MouseEvent.ROLL_OVER, _rollOverArrowHandler, false, 0, true);
_arrowLeft.addEventListener(MouseEvent.ROLL_OUT, _rollOutArrowHandler, false, 0, true);
_arrowLeft.addEventListener(MouseEvent.CLICK, _showPrevious, false, 0, true);
_arrowRight.addEventListener(MouseEvent.ROLL_OVER, _rollOverArrowHandler, false, 0, true);
_arrowRight.addEventListener(MouseEvent.ROLL_OUT, _rollOutArrowHandler, false, 0, true);
_arrowRight.addEventListener(MouseEvent.CLICK, _showNext, false, 0, true);
function _showNext(event:Event=null):void {
//if there's a _loadingSlide we should assume that the next Slide would be AFTER that one. Otherwise just get the one after the _curSlide.
var next:int = (_loadingSlide != null) ? _slides.indexOf(_loadingSlide) + 1 : _slides.indexOf(_curSlide) + 1;
if (next >= _slides.length) {
next = 0;
_requestSlide(_slides[next]);
function _showPrevious(event:Event=null):void {
//if there's a _loadingSlide we should assume that the previous Slide would be BEFORE that one. Otherwise just get the one before the _curSlide.
var prev:int = (_loadingSlide != null) ? _slides.indexOf(_loadingSlide) - 1 : _slides.indexOf(_curSlide) - 1;
if (prev < 0) {
prev = _slides.length - 1;
_requestSlide(_slides[prev]);
function _requestSlide(slide:Slide):void {
if (slide == _curSlide) {
return;
//kill the delayed calls to _showNext so that we start over again with a 5-second wait time.
TweenLite.killTweensOf(_showNext);
if (_loadingSlide != null) {
_cancelPrioritizedSlide(); //the user must have skipped to another Slide and didn't want to wait for the one that was loading.
//if the requested Slide's full-sized image hasn't loaded yet, we need to show the progress bar and wait for it to load.
if (slide.imageLoader.progress != 1) {
_prioritizeSlide(slide);
return;
//fade the old Slide and make sure it's not highlighted anymore as the current Slide.
if (_curSlide != null) {
TweenLite.to(_curSlide.image, 0.5, {autoAlpha:0});
_curSlide.setShowingStatus(false);
_curSlide = slide;
_imagesContainer.addChild(_curSlide.image); //ensures the image is at the top of the stacking order inside the _imagesContainer
TweenLite.to(_curSlide.image, 0.5, {autoAlpha:1}); //fade the image in and make sure visible is true.
_curSlide.setShowingStatus(true); //adds an outline to the image indicating that it's the currently showing Slide.
TweenLite.delayedCall(5, _showNext); //create a delayedCall that will call _showNext in 5 seconds.
function _prioritizeSlide(slide:Slide):void {
TweenLite.to(_progressBar, 0.5, {autoAlpha:1}); //show the progress bar
_loadingSlide = slide;
_loadingSlide.imageLoader.addEventListener(LoaderEvent.PROGRESS, _progressHandler);
_loadingSlide.imageLoader.addEventListener(LoaderEvent.COMPLETE, _completePrioritizedHandler);
_loadingSlide.imageLoader.prioritize(true); //when the loader is prioritized, it will jump to the top of any LoaderMax queues that it belongs to, so if another loader is in the process of loading in that queue, it will be canceled and this new one will take over which maximizes bandwidth utilization. Once the _loadingSlide is done loading, the LoaderMax queue(s) will continue loading the rest of their images normally.
function _cancelPrioritizedSlide():void {
TweenLite.to(_progressBar, 0.5, {autoAlpha:0}); //hide the progress bar
_loadingSlide.imageLoader.removeEventListener(LoaderEvent.PROGRESS, _progressHandler);
_loadingSlide.imageLoader.removeEventListener(LoaderEvent.COMPLETE, _completePrioritizedHandler);
_loadingSlide = null;
function _completePrioritizedHandler(event:LoaderEvent):void {
var next:Slide = _loadingSlide; //store it in a local variable first because _cancelPrioritizedSlide() will set _loadingSlide to null.
_cancelPrioritizedSlide();
_requestSlide(next);
function _progressHandler(event:LoaderEvent):void {
_progressBar.progressBar_mc.scaleX = event.target.progress;
function _clickThumbnailHandler(event:Event):void {
_requestSlide(event.target as Slide);
function _rollOverArrowHandler(event:Event):void {
TweenLite.to(event.currentTarget, 0.5, {alpha:1});
function _rollOutArrowHandler(event:Event):void {
TweenLite.to(event.currentTarget, 0.5, {alpha:0});
function _enterFrameHandler(event:Event):void {
if (_thumbnailsContainer.hitTestPoint(this.stage.mouseX, this.stage.mouseY, false)) {
if (this.mouseX < _SCROLL_AREA) {
_destScrollX += ((_SCROLL_AREA - this.mouseX) / _SCROLL_AREA) * _SCROLL_SPEED;
if (_destScrollX > 0) { //this number is 1/2 the stage size, previously was at 0 it defines the left position of the thumbnails scroll end, has to be indentical to the number below
_destScrollX = 0; //this number is 1/2 the stage size, previously was at 0 it defines the left position of the thumbnails scroll end, has to be indentical to the number above
TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX});
} else if (this.mouseX > _IMAGE_WIDTH - _SCROLL_AREA) {
_destScrollX -= ((this.mouseX - (_IMAGE_WIDTH - _SCROLL_AREA)) / _SCROLL_AREA) * _SCROLL_SPEED;
if (_destScrollX < _minScrollX) {
_destScrollX = _minScrollX;
TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX});
//if an image fails to load properly, remove it from the slideshow completely including its thumbnail at the bottom.
function _imageFailHandler(event:LoaderEvent):void {
var slide:Slide;
var i:int = _slides.length;
while (--i > -1) {
slide = _slides[i];
if (event.target == slide.thumbnailLoader || event.target == slide.imageLoader) {
slide.dispose();
_slides.splice(i, 1);
_setupThumbnails();
return; -
How do I add a 5th photo to be viewed in a scrolling slideshow while still keeping it 4 photos long?
I am not sure if this really makes sense. But I am working with a template in Dreamweaver and the template has a 4 picture vertical slideshow(attached photo). It is really not a slideshow but I do not know what else to call it. So I want to add more than just 4 pictures but everytime I go to add a picture it turns the 4 picture slideshow into a 5 picture slideshow rather than hiding that 5th picture until it is scrolled over using the up/down buttons at the bottom. Initially the Up/Down buttons are of no use unless I can figure this out and add say 8 pictures instead of just the 4. If now I will just have to remove the buttons since they would be a waste of place.
This is the html code used in the template for this slideshow. If you have any suggestions it would be greatly appreciated since I am sort of new to Dreamweaver. Also if you need more information I would be happy to provide you with anything.
<div class="images">
<ul>
<li><a href="#"><img src="images/yellow.gif" alt="" width="215" height="124"/></a></li>
<li><a href="#"><img src="images/basin_door.gif" alt="" width="215" height="124"/></a></li>
<li><a href="#"><img src="images/ford_valve_covers.gif" alt="" width="215" height="124"/></a></li>
<li><a href="#"><img src="images/car_frame.gif" alt="" width="215" height="124"/></a></li>
</ul>
</div>
Thank you,
RyanWell I tried placing that in various places. Under .images which stretched each image to 500px since that would equal the 4 images. But instead it stretched each image.
I placed in layout.css under the appropriate index which worked but once I tried to place another image it tried to just add it which eliminated the Up/Down buttons.
In other words I have no idea where to place this code plus it probably doesn't help that I am pretty new to dreamweaver. So I attached the layout.css, style.css, and index-3.html which is the page I am working with right now. Thank you.
Layout.css
/*======= index.html =======*/
#page1 header {height: 664px;}
#page1 .col-1 {width: 215px;}
#page1 .col-2 {width: 665px; padding: 0px 0px 0px 42px;}
#page1 .col-2 .col-1 {width: 287px;}
#page1 .divider {background: url(../images/divider-bg.gif) 247px 0px repeat-y;}
/*======= index-1.html =======*/
#page2 .col-1 {width: 242px;}
#page2 .col-2 {
width: 625px;
text-align: center;
#page2 .divider {background: url(../images/divider-bg.gif) 247px 0px repeat-y;}
/*======= index-2.html =======*/
#page3 .col-1 {width: 275px;}
#page3 .col-2 {width: 900px;}
#page3 .col-3 {width: 214px;}
//#page3 .divider {background: url(../images/divider-bg.gif) 652px 0px repeat-y;}
/*======= index-3.html =======*/
#page4 .col-1 {width: 215px;}
#page4 .col-2 {
width: 650px;
padding-left: 47px;
#page4 .col-2 .col-1 {width: 286px;}
#page4 .divider {background: url(../images/divider-bg.gif) 247px 0px repeat-y;}
/*======= index-4.html =======*/
#page5 .col-1 {width: 198px;}
#page5 .col-2 {width: 900px; padding: 0px 27px 0px 0px}
//#page5 .divider {background: url(../images/divider-bg.gif) 449px 0px repeat-y;}
/*======= index-5.html =======*/
#page6 .col-1 {width: 215px;}
#page6 .col-2 {
width: 620px;
padding-right: 63px;
#page6 .col-2 .col-1 {width: 286px;}
#page6 .divider {background: url(../images/divider-bg.gif) 652px 0px repeat-y;}
/*======= index-6.html =======*/
#page7 .col-1 {width: 242px;}
#page7 .col-2 {width: 620px;}
#page7 .divider {background: url(../images/divider-bg.gif) 247px 0px repeat-y;}
Style.css
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }
/* Global properties ======================================================== */
body {
background: url(../images/policsy-bg.gif) 0 bottom repeat-x #fff;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 18px;
color: #828282;
min-width: 1000px;
html, body { height: 100%;}
p { padding-top: 18px; }
.top { padding-top: 6px; }
.top1 { padding-top: 0px; }
.top2 { padding-top: 0px; }
.top3 { padding-top: 21px; }
.top4 { padding-top: 25px; }
.top5 { padding-top: 29px; }
.bot { padding-bottom: 34px; }
.bot1 {
padding-bottom: 38px;
padding-left: 0px
.h-top {padding: 0px 0px 2px 0px; margin-top: -2px;}
.h-bot {
padding-bottom: 25px;
text-align: center;
padding-right: 0px;
.h-bot1 {
padding-bottom: 20px;
text-align: center;
.h-bot2 {padding-bottom: 3px;}
.h-bot3 {padding-bottom: 23px;}
.pad-left {
display: inline-block;
margin-left: 4px;
a { color: #d52d00; outline: none; }
a:hover{
text-decoration: none;
color: #B8D6D6;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
/* Global Structure ============================================================= */
.main {
margin: 0 auto;
width: 960px;
/* Header */
header{
height: 438px;
/* Content */
section#content {
/* Footer */
footer{
min-height: 268px;
/* Left & Right alignment */
.fleft { float: left;}
.fright { float: right;}
.clear { clear: both;}
.col-1, .col-2, .col-3, .col-4, .col-5 { float: left;}
.alignright { text-align: right;}
.aligncenter { text-align: center;}
.wrapper {
width: 100%;
overflow: hidden;
.container {
width: 100%;
/*----- form defaults -----*/
input, select, textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
vertical-align: middle;
font-weight: normal;
/*----- other -----*/
.img-indent { margin: 0 25px 0 0; float: left; }
.extra-wrap { overflow: hidden; }
.img {padding-top: 4px;}
.img1 {padding-top: 2px;}
/*=============================================================================== text =====*/
h1 {
padding: 0px 0 0px 326px;
position: relative;
float: left;
h1 a {
display: block;
height: 120px;
width: 300px;
text-indent: -5000px;
background: url(../images/msi_logo_webcolors.gif) left top no-repeat;
h2 {
font-size: 24px;
line-height: 1.2em;
color: #fff;
padding: 36px 0px 2px 0px;
margin: 0px 0px 0px 0px;
text-align: center;
h3 {
font-size: 18px;
line-height: 1.2em;
color: #fff;
padding: 16px 0px 17px 0px;
.color {color: #19a7f4;}
/*======================================================================================== =========================== header =====*/
.extra {background: url(../images/body-bg.gif) 0 0 repeat-x #222222;}
.shadow {background: url(../images/extra-bg.jpg) top center no-repeat;}
.header strong {
float: left;
padding: 9px 0 0 0;
color: #333;
text-transform: uppercase;
text-decoration: none;
font-size: 12px;
line-height: 1.2em;
display: inline-block;
*+ html .header strong {
padding: 7px 0 0 0;
.login {
float: right;
padding: 4px 0 0 0;
margin-right: -2px;
width: 204px;
*+ html .login {
width: 201px;
.login-link {
background: url(../images/login-bg.gif) left 0px no-repeat;
padding: 4px 0 0 22px;
margin: 1px 0 0;
color: #a0a0a0;
text-transform: uppercase;
text-decoration: none;
font-size: 12px;
line-height: 1.2em;
display: inline-block;
*+ html .login-link {
padding: 2px 0 0 21px;
.login-link:hover {
color: #333;
.social {
float: right;
background: url(../images/login-span-bg.gif) 0 4px no-repeat;
padding-left: 0px;
overflow: hidden;
width: 92px;
margin-left: 7px;
.social img {
float: right;
margin-left: 4px;
/*=============================================================================== nav =====*/
#menu {
width: 100%;
height: 68px; position:relative; z-index:99
#menu > li {
float: left;
font-size: 15px;
line-height: 1.2em;
background: url(../images/nav-li-bg.png) 0 0 no-repeat;
padding-left: 2px; position:relative
#menu > li > a {
display: block;
width: 134px;
background: url(../images/nav-a-bg.png) 0 0 repeat-x;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: white;
padding: 28px 0 21px;
#menu > li:hover > a{ color:#1eaffa}
#menu > li > .active {
background: url(../images/nav-a-bg-hover.gif) 0 0 repeat-x;
position: relative;
margin-left: -2px;
padding: 28px 0 21px 2px;
color:#fff !important
#menu > .first{ background:none;
padding-left:0}
#menu > .first > a {
background: url(../images/nav-first-a-bg.gif) 0 0 no-repeat;
margin: 0;
width: 135px;
#menu > .first > .active {
background: url(../images/nav-first-a-bg-hover.gif) 0 0 no-repeat;
margin: 0 0px 0 0;
padding: 25px 0 24px 0px;
#menu > .last > a {
background: url(../images/nav-last-a-bg.gif) right 0 no-repeat;
margin: 0;
width: 143px;
#menu > .last > .active {
background: url(../images/nav-last-a-bg-hover.gif) right 0 no-repeat;
margin: 0 0px 0 -1px;
padding-left: 1px;
.submenu_1{ position:absolute; top:73px; left:0; width:295px;}
.menu_box{ padding:14px; background:#272727}
.menu_box > li{ line-height:36px; background: url(../images/menu_line.gif) 0 bottom repeat-x; position:relative; margin-top:-2px; padding:3px 0; zoom:1}
.menu_box > .end{ background: none}
.menu_box > li > a{ display:block; padding-left:19px;border-radius: 18px; -moz-border-radius: 18px; -webkit-border-radius: 18px; font-size:13px; font-weight:700; color:#fff; text-transform:uppercase; text-decoration:none; position:relative; line-height:36px; height:36px; zoom:1;background: url(../images/spacer.gif) 0 0 repeat}
.menu_box > li:hover > a{background: url(../images/submenu_bg.gif) 0 0 repeat-x #0280d8;}
.menu_box > li:hover{ background:#272727}
.submenu_2{ top:-13px; position:absolute; left:282px; width:181px; background:#272727}
.submenu_2 > ul{ padding:14px 9px}
.submenu_2 > ul >li{ line-height:40px; background: url(../images/menu_line.gif) 0 bottom repeat-x;}
.submenu_2 > ul >li > a{ display:block; padding-left:22px;font-size:13px; font-weight:700; color:#fff; text-transform:uppercase; text-decoration:none; line-height:40px;}
.submenu_2 > ul >li:hover > a{ color:#1eaffa}
.submenu_2 > ul > .end{ background: none}
#menu div{ display:none}
/*=============================================================================== sliders =====*/
#page1 .sliders {background: url(../images/sliders-bg.gif) 0 0 repeat-x #0e0e0e; overflow:none !important; height:398px; padding-bottom:2px; padding-top:10px}
.sliders {
background: url(../images/sliders-bg-1.gif) 0 0 repeat-x #0e0e0e;
border-radius: 0 0 20px 20px;
-moz-border-radius: 0 0 20px 20px;
-webkit-border-radius: 0 0 20px 20px;
box-shadow: 2px 1px 3px #101010;
-moz-box-shadow: 2px 1px 3px #101010;
-webkit-box-shadow: 2px 1px 3px #101010;
position: relative; padding-top:10px;
.slider{ overflow:none !important; z-index:2 !important; zoom:1}
.sliders .pic { margin: 0 0 10px 10px; position:relative; z-index:2 !important; zoom:1}
#page1 .sliders .pic { margin: 0 0 20px 10px;}
.sliders .items{ display:none}
.pagination{ position: relative; z-index:2; bottom:0px; left:376px; zoom:1}
* + html .pagination{ bottom:3px;}
.pagination li{ float:left; padding-right:6px;}
.pagination li a{ display:block; width:25px; height:25px; background:url(../images/buttons.png) right 0 no-repeat; text-indent:-9999px;}
.pagination li a:hover, .pagination .current a{ background-position:left}
/*======================================================================================== =========================== content =====*/
/*=============================================================================== indents =====*/
.indent { padding: 0px 0px 0px 0px }
.indent1 { padding: 0px 0px 0px 0px }
.policy-indent {padding: 0 30px 34px 0;}
.policy-indent a:hover {text-decoration: underline;}
/*=============================================================================== col-indents =====*/
.col-indent { padding-right: 0px; }
.col-indent1 { padding-right: 37px; }
.col-indent2 { padding-right: 29px; }
.col-indent3 { padding-right: 44px; }
.col-indent4 { padding-right: 36px; }
/*=============================================================================== boxes =====*/
.box {
background: #000;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: 5px 5px 5px #191919;
-moz-box-shadow: 5px 5px 5px #191919;
-webkit-box-shadow: 5px 5px 5px #191919;
position: relative;
padding: 0px 0px 0px 32px;
left: 2px;
top: 1px;
/*=============================================================================== line-hor =====*/
/*=============================================================================== lists =====*/
.list {
padding: 18px 0 0;
.list li {
background: url(../images/list-bg.gif) 2px 6px no-repeat;
padding-left: 14px;
.list li a {
color: #19a7f4;
font-weight: bold;
.list .last {padding-bottom: 12px;}
.list_1 {padding-bottom: 18px;}
.list_1 li {
font-size: 12px;
line-height: 24px;
.list_1 li a {
text-decoration: none;
color: #828282;
text-transform: uppercase;
.list_1 li a:hover {color: #19a7f4;}
/*=============================================================================== images =====*/
.images img {margin-bottom: 1px;}
/*=============================================================================== links =====*/
.link {
background: url(../images/link-bg.gif) 0 0 repeat-x #191818;
display: inline-block;
padding: 8px 13px 11px;
text-decoration: none;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
position: relative;
font-size: 14px;
line-height: 1.2em;
color: #fff;
margin-top: 9px;
.link:hover {
color: #19a7f4;
.links a {
display: block;
width: 107px;
height: 49px;
text-decoration: none;
.links .fleft {
background: url(../images/links-fleft.gif) 0 0 no-repeat;
.links .fleft:hover, .links .fright:hover{ background-position:bottom}
.links .fright {
background: url(../images/links-fright.gif) 0 0 no-repeat;
.policy-indent a {text-decoration: none; color: #19a7f4;}
/*=============================================================================== contact =====*/
.contact {
width: 195px;
float: left;
.contact span {
display: inline-block;
vertical-align: baseline;
width: 99px;
.contact a {
font-weight: bold;
text-decoration: none;
color: #19a7f4;
.contact a:hover {text-decoration: underline;}
/*======================================================================================== =========================== footer =====*/
footer {position: relative; overflow: hidden;}
footer .indent {padding: 31px 0 62px 31px;}
footer .col {
float: left;
width: 162px;
margin-right: 30px;
footer img {
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
box-shadow: 5px 5px 5px #1a1a1a;
-moz-box-shadow: 5px 5px 5px #1a1a1a;
-webkit-box-shadow: 5px 5px 5px #1a1a1a;
position: relative;
footer .divider1 {background:url(../images/divider_1-bg.gif) 574px 0px repeat-y;}
.policy {
position: absolute;
bottom: 0;
background: url(../images/policy-bg.gif) 0 0 repeat-x;
height: 36px;
width: 100%;
.policy strong {
padding: 14px 0 0 380px;
color: #333;
text-transform: uppercase;
text-decoration: none;
font-size: 12px;
line-height: 1.2em;
display: inline-block;
text-align: left;
.policy strong a {margin-right: 60px; color: #9f9f9f; text-decoration: none;}
.policy strong a:hover {
color: #333;
/*---------------------------------------------------------------------------------------- --------------------------- forms -----*/
#ContactForm {
padding-top: 21px;
width: 215px;
#ContactForm label {
min-height: 44px;
display: block;
position:relative;
background: url(../images/label-bg.gif) no-repeat 0 0;
#ContactForm .error,#ContactForm .empty{ position:relative; font-size:10px; color:#19A7F4; background:none; padding:0; display:none}
#ContactForm .link {
margin: 30px 0px 0px 0px;
padding: 8px 19px 11px;
#ContactForm input {
width: 193px;
border: none;
padding: 7px 11px;
background: none;
color: #828282;
font-size: 14px;
line-height: 18px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
#ContactForm textarea {
width: 194px;
height: 433px;
background: none;
border: none;
padding: 0px 11px;
color: #828282;
font-size: 14px;
line-height: 18px;
overflow: auto;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
#ContactForm span {
width: 215px;
display: block;
background: url(../images/text-bg.gif) no-repeat 0 0;
border: none;
padding: 6px 0px;
.success{ padding-bottom:15px; display:none}
.success strong{color:#19A7F4;}
/*==========================================*/
/* Project specifics =========================================================== */
/* Pour some CSS below ========================================================= */
Index-3.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Projects</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/jquery-1.6.min.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script src="js/MyriadPro-Bold.js" type="text/javascript"></script>
<script src="js/Myriad_Roman.js" type="text/javascript"></script>
<script type="text/javascript" src="js/imagepreloader.js"></script>
<script type="text/javascript">
preloadImages([
'images/nav-a-bg-hover.gif',
'images/nav-last-a-bg-hover.gif',
'images/nav-first-a-bg-hover.gif.jpg']);
</script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/tms-0.3.js"></script>
<script type="text/javascript" src="js/tms_presets.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="js/jcarousellite.js" type="text/javascript"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<style type="text/css">
.menu_box > li > a, .sliders, .box, .link, footer img{ behavior: url(js/PIE.htc); }
</style>
<![endif]-->
</head>
<body id="page4">
<div class="extra"><div class="shadow">
<div class="main">
<!-- header -->
<header>
<div class="container header">
<strong>We provide quality manufacturing!</strong>
<div class="login">
<div class="social">
<a href="#"><img src="images/social-img_3.gif" alt="" /></a><a href="#"><img src="images/social-img_2.gif" alt="" /></a><a href="#"><img src="images/social-img_1.gif" alt="" /></a>
</div>
<a href="#" class="login-link">Client Login</a>
</div>
<div class="clear"></div>
</div>
<div class="wrapper"><h1><a href="index.html">Highway Road Construction and repair</a></h1></div>
<nav>
<ul id="menu">
<li class="first"><a href="index.html">Home</a></li>
<li><a href="index-1.html">powder coating</a>
<!--<div class="submenu_1">
<ul class="menu_box">
<li><a href="index-1.html">Earthwork Contractor</a></li>
<li><a href="index-1.html">Utility Contractor</a></li>
<li><a href="index-1.html">Demolition Contractor</a>
<div class="submenu_2">
<ul>
<li><a href="index-1.html">Demolish</a></li>
<li class="end"><a href="index-1.html">recycle </a></li>
</ul>
</div>
</li>
<li><a href="index-1.html">Road Construction</a></li>
<li class="end"><a href="index-1.html">Construction Equipment Rental</a></li>
</ul>
</div>
</li>-->
<li><a href="index-2.html">fabrication</a></li>
<li><a href="index-3.html" class="active">projects</a></li>
<li><a href="index-4.html">design</a></li>
<li><a href="index-5.html">wire forming</a></li>
<li class="last"><a href="index-6.html">contact us</a></li>
</ul>
</nav>
<div class="sliders">
<ul class="items">
<li><img src="images/red_bike.gif" alt=""></li>
<li><img src="images/well.gif" alt=""></li>
<li><img src="images/belle_inn.gif" alt=""></li>
<li><img src="images/belle_motive.gif" alt=""></li>
<li><img src="images/basin_cab.gif" alt=""></li>
<li><img src="images/basin_bed.gif" alt=""></li>
</ul>
</div>
</header>
<!-- content -->
<section id="content">
<div class="box">
<div class="wrapper divider">
<article class="col-1 col-indent bot">
<div align="center">
<h2>Best Projects</h2>
<p class="bot"><strong class="color">Maecenas tristique orci ac sem. Duis ultricies pharetra donec in accumsan malesuada orci orem ipsum dolor sit amet.</strong></p></div>
<div class="images">
<ul>
<li><a href="#"><img src="images/yellow.gif" alt="" width="215" height="124"/></a></li>
<li><a href="#"><img src="images/basin_door.gif" alt="" width="215" height="124"/></a></li>
<li><a href="#"><img src="images/ford_valve_covers.gif" alt="" width="215" height="124"/></a></li>
<li><a href="#"><img src="images/car_frame.gif" alt="" width="215" height="124"/></a></li>
</ul>
</div>
<div class="wrapper links">
<a href="#" class="fleft" id="prev"> </a>
<a href="#" class="fright" id="next"> </a>
</div>
</article>
<article class="col-2 bot1">
<div align="center">
<h2>Past Projects</h2>
<p>For 25 years, Manufacturing Systems Inc. has had the opportunity to send a wide variety of products out the door and are always excited to be involved in new, innovative projects.<br>
<br>
Our signature product line, <a href="http://www.trucatchtraps.com" title="Tru Catch Traps" target="_blank">Tru-Catch Traps™</a>, has allowed us to serve the animal welfare community nation-wide and gain valuable knowledge in every aspect of product development, design, promotion,a nd sales. Our traps are constructed, welded, and powder coated in-house. Give your customers what we give ours...a quality, American-made product. </p>
</div>
<div class="wrapper top">
<div class="col-1 col-indent3">
<ul class="list">
<li><a href="#">Vestibulum iaculis lacinia est roin</a></li>
<li><a href="#">Fusce euismod consequat ante ing elitom</a></li>
<li><a href="#">Lorem ipsum dolor sit amet consecte</a></li>
<li><a href="#">Aliquam congue fermentum nisl</a></li>
<li><a href="#">Mauris accumsan nulla vel diam ulla venen</a></li>
<li><a href="#">Sed in lacus ut enim adipiscing aliquet</a></li>
<li><a href="#">In pede mi aliquet sit amet euism</a></li>
<li><a href="#">Praesent justo dolor lobortis quis lobortis</a></li>
</ul>
</div>
<div class="col-1">
<ul class="list">
<li><a href="#">Sed in lacus ut enim adipiscing aliquet</a></li>
<li><a href="#">In pede mi aliquet sit amet euism</a></li>
<li><a href="#">Praesent justo dolor lobortis quis lobortis</a></li>
<li><a href="#">Vestibulum sed ante onec sagittis</a></li>
<li><a href="#">Fusce euismod consequat ante ing elitom</a></li>
<li><a href="#">Lorem ipsum dolor sit amet consecte</a></li>
<li><a href="#">Aliquam congue fermentum nisl</a></li>
<li><a href="#">Mauris accumsan nulla vel diam ulla venen</a></li>
</ul>
</div>
</div>
<!--<p class="top3"><a href="#" class="link">More Info</a></p>-->
<div align="center">
<h2>Current Projects</h2>
<p><strong class="color">Project1. </strong> Fusce euismod consequat ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed dolor. Aliquam congue fermentum nisl. Mauris accumsan nulla vel diam. Sed in lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut in, ligula. Aliquam dapibus tincidunt metus justo dolor.</p>
<p><strong class="color">Project2. </strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed dolor. Aliquam congue fermentum nisl. Mauris accumsan nulla vel diam. Sed in lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut in, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus euismod.</p>
<!--<p><a href="#" class="link">More Info</a></p>-->
</div>
</article>
</div>
</div>
</section>
</div>
<!-- footer -->
<footer>
<div class="main">
<div class="indent">
<div class="container divider1">
<div class="col">
<div align="center">
<h3>Subnavigation</h3>
</div>
<ul class="list_1">
<li><a href="#">Clients Support</a></li>
<li><a href="#">Standards</a></li>
<li><a href="#">new technologies</a></li>
<li><a href="#">faqs</a></li>
</ul>
</div>
<div class="col">
<div align="center">
<h3>Archive</h3>
</div>
<ul class="list_1">
<li><a href="#">2012</a></li>
<li><a href="#">2011</a></li>
<li><a href="#">2010</a></li>
<li><a href="#">2009</a></li>
</ul>
</div>
<div class="col col-indent2">
<div align="center">
<h3>Useful Info</h3>
</div>
<ul class="list_1">
<li><a href="#">news</a></li>
<li><a href="#">career</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">hours: mon-fri 8-5 MST</a></li>
</ul>
</div>
<div class="fleft">
<img src="images/footer-img.jpg" alt="" / -
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">
<!--
body {
background-color: #003300;
#LeftSidebar {
position:absolute;
width:80px;
height:697px;
z-index:1;
background-image: url(../Images/BG.jpg);
top: 20px;
#Banner {
position:absolute;
width:360px;
height:187px;
z-index:2;
left: 100px;
top: 20px;
background-color: #6384EF;
#BannerPhone {
position:absolute;
width:265px;
height:187px;
z-index:3;
left: 470px;
top: 20px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: x-large;
font-variant: normal;
color: #E4D9A8;
#NavBar {
position:absolute;
width:636px;
height:35px;
z-index:4;
left: 100px;
top: 219px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 5px;
background-color: #E4D9A8;
border-top-color: #E4D9A8;
border-right-color: #E4D9A8;
border-bottom-color: #E4D9A8;
border-left-color: #E4D9A8;
#Heading {
position:absolute;
left:100px;
top:254px;
width:636px;
height:42px;
z-index:8;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: bold;
color: #003300;
background-color: #E4D9A8;
text-indent: 5px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 5px;
border-top-color: #E4D9A8;
border-right-color: #E4D9A8;
border-bottom-color: #E4D9A8;
border-left-color: #E4D9A8;
vertical-align: bottom;
#Content {
position:absolute;
width:636px;
height:315px;
z-index:9;
left: 100px;
top: 296px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #003300;
background-color: #E4D9A8;
overflow: scroll;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 5px;
#Footer {
position:absolute;
width:560px;
height:50px;
z-index:-1;
left: 133px;
top: 670px;
background-color: #E4D9A8;
#Quotation {
position:absolute;
width:636px;
height:40px;
z-index:0;
left: 101px;
top: 621px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: x-small;
font-style: italic;
color: #E4D9A8;
text-indent: 5px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 5px;
background-color: #003300;
-->
</style>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
//-->
</script>
<!-- TemplateParam name="Content2" type="boolean" value="true" -->
<style type="text/css">
<!--
a:link {
color: #003300;
a:visited {
color: #336666;
a:hover {
color: #009933;
a:active {
color: #990033;
-->
</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"><!-- TemplateBeginEditable name="Content" -->
<p>Content</p>
<!-- TemplateEndEditable --></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"><!-- TemplateBeginEditable name="Quotation" -->Quotation<!-- TemplateEndEditable --></div>
<div id="Heading"><!-- TemplateBeginEditable name="Heading" -->Heading<!-- TemplateEndEditable --></div>
<div align="center"></div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</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.
Maybe you are looking for
-
'Info' file count varies between original and copied folders
Unlike Snow Leopard, Lion and Mountain Lion 'Info' counts hidden files in folders (usually .DS files). However copied folders, often to different locations, computers, etc, do not count to the same total as the original folder. How can I stop 'Info
-
How do I make a pixel stay a pixel?
It surprises me that after several thousand hours of using InDesign, I still don't know how to place an object and know what InDesign is doing. Amazing, really. Playing around with CS6, I thought I'd jump into the Digital Publishing mode and see what
-
When I set up my mail I could send emails now a day later I can not send them but can still receive them ... I can't see what is wrong .. Any answers .
-
my i phone 3gs seems to of crashed when i tried to restart it. the screen jus displays an apple i con in the middle of the screen and wont turn on or off. anyone know whats wrong with it or how to restore it?
-
Hi Friends, I want to change my apex admin superuser passwd because i forgot it. I run the "apxchpwd.sql" and it ask for the password of ADMIN. My question is, what WORkSPACE and USERNAME should I login to (assuming may password is PASSWD)? is it ADM