Image Slide In Moves Entire Page Contents

Hello,
I'm having an issue with a lightbulb image I want to make slide down on page load (using Spry effect "slide"). After it slides in, I want to have it swap to a "lit" lightbulb image when moused over. I currently have the image swap working correctly in IE 7, Firefox, and Chrome. BUT instead of just the bulb sliding in, the entire page is sliding in.
I do have several different position declarations for different page elements, so perhaps I just have too much going on!
Here's the webpage: http://www.artistnatalieblake.com/daubie/index.html
Here's my CSS for positioning of all the page elements:
#background {      position:fixed;      top:0;      left:0;      height:100%;      width:100%; } #btns {      float:left;      margin:10px 0;      width:650px; } #bulb { } #bulbslide {      display:none;      float:left;      position:absolute;      margin:-100px 0 0 -10px; } #content {      position:fixed;      z-index:0; } #footer {      color:#ccc;      font-family:'HandelGothicDMedium';      font-size:.8em;      letter-spacing:.1em;      padding:10px 0;      text-align:center;      width:600px; } #info {      color:white;      float:left;      font-family:'HandelGothicDMedium';      text-align:center;      width:500px; } #logo {      margin-top:15px;      vertical-align:top; } #main {      margin-left:175px; } #pagelabel {      float:left;      left:131px;      position:absolute;      top:400px; } #textpane {      background: transparent url(images/white75.png);      float:left;      padding:25px;      width:600px; } #textpane p {      position:relative;      z-index:1;      zoom:1; }
Here is my relevant scripting created by Dreamweaver:
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_effectSlide(targetElement, duration, from, to, toggle)
     Spry.Effect.DoSlide(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
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_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
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_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
And relevant HTML:
<body onLoad="MM_preloadImages('images/bulb.png','images/bulblit.png');MM_effectSlide('bulbslid e', 4000, '0%', '100%', false)"> <div id="bulbslide" onmouseover="MM_swapImage('bulb','','images/bulblit.png',1)" onmouseout="MM_swapImgRestore()"> <img id="bulb" src="images/bulb.png" alt="lightbulb" width="193" height="489" id="bulb" /> </div>
Thanks for any suggestions!

This is one of those times when I have to say, "just because you CAN do something, doesn't mean you should."
If you disable CSS in your browsers, the bulb image swap behavior works just fine. The various other problems with your page layout stem from trying to be too cute for cute's sake.
Do not use positioning for primary layouts. Stick with plain old default CSS positioning (unspecified or static) for 98% of your layouts. When you start messing around with Fixed and Absolute positioning without a complete understanding of what they do, you will invariably create problems where none should exist.
For the time being, revert your CSS to default (no positioning, no z-indexes). When you get the layout to work in all browsers, then you can start introducing other advanced features one at a time.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

How do I fit a background image to fill the entire page?

Hi,
could anyone please tell me how I use e.g. a jpeg image as a background image that fits the entire page without getting horizontal or vertical scroll bars?
Thanks

Hi Pziecina and Nancy O.,
thank you so much for your mails. However, I'm still trying to figure this out.
@ Pziecina...I studied the source code of your webpage and tried to insert parts of it into my own page in different variations. The solution to my problem must have something to do with CSS and img src height and width. All I get is a white page. I found out that an image size set in Photoshop apparently doesn't have any effect on whether the image fills the browser 100% or not.
@ Nancy O. What I'm trying to do is to use one single image as background for a single page on the website, I'd like to construct. An image that opens up to the entire width of the screen...not just the browser. I imagine this with layers of transparent/solid color for text fields. I studied the website page, you suggested and a repeat action is not what I aim for. And I realize that maybe I'm thinking too much in Photoshop terms...thinking I can do similar actions in Dreamweaver. I'm well aware of the whole thing being 'too much' in terms of design and usability but if you check out www.frauhaus.dk I think that works beautifully, although it doesn't open up to the entire screen. I'd like to see if that design concept will work for my own website or if it's going to be too confusing.
And to both of you I really appreciate your time and input, thanks. Even though I'm still getting grey hairs as a beginner I keep thinking that there's got to be a solution to this.
Best regards from MissRaspberryDream

How can I email a web page. The older version would enable you to email an entire page contents, but Mavericks does not

When I try to email a Safari web page with Mavericks, some times it does not allow me to send the actual page and its contents. Instead it offers
you to email as a web page, link or PDF file. However, when you send the page, the images do not show up in the email.

Hi,
You can try to right-click on the page and '''Send Link'''.
You can also install [https://addons.mozilla.org/en-US/firefox/addon/add-on-compatibility-reporter/?src=search Addon Compatibility Reporter] and try to '''Enable''' the said extension in '''Tools''' ('''Alt''' + '''T''') > '''Addons'''. Hopefully this will restore at least partial functionality. You may also be able to find alternatives via the search box on the top right of the Addons page, or [https://addons.mozilla.org/ AMO].

Looking for a way to move entire pages from one photo book into another photo book.

I haven't found out how to move pages from one photo book into another. Surely this is possible?
Also on the subject of photo books: it seems that it is not possible to enlarge the size of a text box. Or has anyone found a way to accomodate more than 1 line of text on a photo book page?

You can look through some of the different Layouts available.
Select your page.
Click the "Layout" icon on the lower right hand of the application window.
Above it will appear a "BACKGROUND" section and a "LAYOUT" section.
Immediately below the "LAYOUT" is a drop down menu which will show you all the different options.

Can you tell an image not to move despite page scrolling?

Can I place an image (either in a div or not) that will
remain where I
placed it despite page scrolling? Say I want it at 0,0 but
the page scrolls
up and I want it to remain in that top left corner like a
fixed background.
Except it has to be without using a body background (that's
already in use).

"Mick White" <[email protected]> wrote in
message
news:eva8gd$4sa$[email protected]..
> R.J. wrote:
>
>> Can I place an image (either in a div or not) that
will remain where I
>> placed it despite page scrolling? Say I want it at
0,0 but the page
>> scrolls up and I want it to remain in that top left
corner like a fixed
>> background.
>>
>> Except it has to be without using a body background
(that's already in
>> use).
>>
> CSS
> position:fixed
>
> Not <= IE6, though.
> Mick
Thanks Mick, but for some reason this fills the area around
the image with
white up until the end of the viewport. You can scroll the
white off,
however -- and the image remains fixed -- so it looks fine
once you scroll a
whole screenful down. But that initialy screen doesn't show
the background
underneath -- it shows white; on both IE7 and FF2. :(
(the image is a png)

Entire page becomes visually degraded after inserting an image

This is a weird one. A picture is worth a thousand words, so please see the attached PNGs.
I'm making a portfolio book. Most page are images with text on the side. In some cases, when I drag an image (All images are JPEGs), the entire page becomes visually degraded - the images color become washed out and the font becomes thin, even if its set to bold.
I thought it involves CMYK/RGB conversions but everything I tried failed, including changing the color space to every profile I found. The real weird thing is that some JPEGs I can drag and it doesn't change the page graphics, while others cause the weird effect. I looked inside the meta-data, there is nothing different between two JPEGs, yet one will cause the page to degrade and the other wont.
Any help would be appreciated.

It appears that it happens whenever there is ANY effect applied to any layer on the page. Transparency, drop shadow, the whole list. I put the objects on different layers, it didn't help.
I put the images on imageshack:
before drag - http://img269.imageshack.us/img269/5116/beforedrag.png
after drag - http://img41.imageshack.us/img41/5844/afterdrag.png

How do you get iWeb not to reload my entire page?

How do you get iWeb not to reload my entire page content when clocking on internal links? Sometimes I just want to change one picture from one page to the next and want the remaining aspects of the site to stay as is so that your web browser essentially only loads one image and keeps the other stuff. I have seen this on basically all pro websites. THANKS!
Joel

What version of iWeb are you using? Also what system? What are you using to upload the site files to the server?
OT

Image slider not loading

Hi,
The image slider on the home page of a bc site I administer is not loading properly.
If you click on the business logo to refresh then it appears. However the client is not happy that it is not working when a customer lands on the homepage.
Has anyone had this problem and if so how did they fix it?
Thanks for any advice.

Hi Liam,
Yeh it is a template site. I modified the Tribeca home page and it has been working fine, my client wanted ad banners on the home page so I put an ad rotator module above the image slider. I have removed these now in case that was the problem, but a few visitors are giving feedback that the image slider is not showing. The Link is www.w-o-o.me.
Thanks
update - I looked at the html on the home page and noticed the line of code referring to the first image of the slider was different to the rest, so i copied and pasted a line from the other images and swapped it out and that has seemed to fix it.

Center PDF Page Content Using JS?

Hi all,
I have many many pages of PDFs where the content for the page has been aligned to the top left corner of the page.
Is there a way using the JavaScript API that I can "move" the page content so that it is more centered vertically/horizontally on the page.
I have done some searches and have tried using the get/set PageBoxes method, I think I am on the right path but I just can't figure it out.
Any advice would be greatly appreciated.
Thank you!

Thanks George.
I must have stumbled upon that idea right when you were typing your response to me.
If you change the Media box and the immediately change the Crop box you can then see the "shift" on the page.
Code below for fellow developers:
// Get the media box for the page
var arrMedia = this.getPageBox({cBox:"Media", nPage:0});
// Set the new media area of the box (in pixels)
arrMedia[0] -= 90; // Adjust Left Side - this moves it out 1.25 inches
arrMedia[1] += 108; // Adjust Top Side - this moves it up 1.5 inches
arrMedia[2] += 0; // Adjust Right Side
arrMedia[3] += 0; // Adjust Bottom Side
// Apply the new area to the media box of all the pages
this.setPageBoxes({cBox:"Media", nStart:0, nEnd:this.numPages-1, rBox:arrMedia});
// Get the crop box for the page
var arrCrop = this.getPageBox({cBox:"Crop", nPage:0});
// Set the new crop area of the box (in pixels)
arrCrop[0] -= 90; // Adjust Left Side - this moves it out 1.25 inches
arrCrop[1] += 108; // Adjust Top Side - this moves it up 1.5 inches
arrCrop[2] -= 90; // Adjust Right Side - this moves it in 1.25 inches
arrCrop[3] += 108; // Adjust Bottom Side - this moves it up 1.5 inches
// We are doing the opposite on the right and bottom so that we
// still maintain an 8.5 x 11 sheet of paper in the end
// Apply the new crop area to the crop box of all the pages
this.setPageBoxes({cBox:"Crop", nStart:0, nEnd:this.numPages-1, rBox:arrCrop});
Thanks again George!

How to make totally customisable jqueary image slider

Hi, I'm designing a new site and I need an image slider on the home page. I don't want some off the shelf image slider as I want to control every element so it looks like the attached screenshot. I would like the choice of six images to slide, with a button either end to manually slide the images left and right as well as 6 small boxes underneath that can be clicked in order to jump to an image. Does anyone know of a tutorial I could follow to help me build such a thing from scratch? I'm not a coder and I've only got back into this a year ago after a 10 year break so it needs to be simple to follow. Any help would be appreciated as it would be great to get it working.
Jack

Check the source code here and see if it helps lead you in the right direction
http://www.cleverlycreated.com/

Is there a way to make the spell check work on the entire web page without making the content editable? Or at least those boxes that appear when you enable spell check on the entire page, can you make them disappear?

I found an addon that allows you to spell check on the webpage but it make the entire page editable and these boxes appear on everything i highlight. Can i get rid of the boxes?

I had thought this situation was solved but it just got worse. In addition to being without service for several days I am now being charged a cancellation fee for a broadband service that BT disconnected in error. BT Vision was also terminated by BT but the set up charges are still in place. Does anyone know who the relevant Ombudsman is? I called BT from America on Friday - for an hour - while someone called Aruj sorted out why there is an order 'in progress' that I didn't initiate; why I have fees relating to a problem created by BT and why there are references to a house move that didn't take place and a BT Vision service I no longer have but didn't cancel myself. He assured me it would be rectified and my bill would be reduced by 139 pounds and we would get confirmation of this later that day. I asked him what chance there was that this would not actually happen - he said no chance at all; my new bill would be 23.50.
There was no text message. An online chat person today told me there had been a fee reduction request which had been declined and there was nothing else he could help me with as he dealt only with broadband. But he would get BT Vision to email me. They always seem so helpful.............
I'm sure I'm listed somewhere as 'a problem', there's no other explanation for why I get the runaround

Using Site Content and Structure unable to move documents,pages and getting weird error message

Hi ,
earlier we are moving a page ,document from one site to another sub site with in the Site Collection.
Now,we are getting a un-readable format error.
After selecting the destination we are getting the error.
and the file can't move.
What might me be the error.
Expecting answers related to my question.
1.As we can do using Internet Explorer,
2. Using Send To also we can move.
Using this Site Content and structure we can maintain Versoining also.
If any one face the same issue then we can easily find out the solution.
Regards ,
Prathap
SP Developer
Specify the destination to move the items you selected.

Hi,
Using Site Content and Structure unable to move documents,pages and getting weird error message
We are getting Below error:
When Moving Document items from one site to another site in the same site collection using Site content and structure(But it's working in same site,we can move documents from one library to another library)
1576|/wEWwwECuLLErw0Cy+nFYwK84baBAgK6zNqsAgLs0Le0BQK1s8uaCAL5qrm3CAKk7K6pDwKo9a0GArm+xr4NApKe9KUKAoajpK4CAqqU/2sChJXBtAIC052rYQKS+LTPAgLe+7uQAwLO0re/BwLgoaw2AojAlIMOApSO4JoNAuvW7MoKAojz2P4OAuOMt9EGAv/ns1wC64qI7gEC0LymmAcCro3lnQkCj7viwAsC8Met9QEC3a/DHALg4ZO6AQKAn8ebCALvr72DAwKm/NGmAgKN4aayCQLmmczsCgL+46qSAQKH7paCDgLouOHjDwKGuNCBCQKwuob2CQKP78n3BwLQ7vSYCALxlcvIBALRuajXAwK6/vr4AwKx8YasCQLti5igAQKay7JZAta625IFAuTy6rUKAvnC7eQKApvB3ugPAoTBua8BAoyajvgMAsGdloEJAvH+2KECAua7k9AGAv3Lzd8HAtPD3ocOAuX7hM4GAqO1g9sIAtn65sgFAuDkr9QEAt7I1KkMAryhltsIAtizx/kBAvzS7IcBAr+YhK4PAsO3rtADAvea+sADAsvc4IgKAp/1vIoMApelp3ICl+PqiwwC/KX1gwUC3fv58gIC7ZG/pwIC4cnupQgCq7mdlgYCjciR+AwC8/ue4gkC4YWJywUCs+rviAECpuyJigECkfr5rgkC08rHoQ0C+erayQUCjMqStQkCpIuKtwEC+dG5ngICoZ3/og0CspXoxwwC+pzgmwwCkoD5mAYCn/qH2AcC/N/pvAcCv5OtwAICuZquqgcC0/OFnwkC2/2wzQMCrJrO9woC69G52ggC64nunggCtLOIsQEC9LyC7gUC0ry/zgIC1ZDvgQ0C98OfMgL4kaj3CQKXhebCCwKi3bjPBQKYuojTCAKc4+fxCAKyjLfoBALVxO8SAsXSyuQLAqyvkNIPApDV5PgDAtufwJwEAu2BsoYLAs3Oqd8PAo6i+YMDAsy706oCAsLjx7kLApu3+9gKAuLnvMoIAtWywo8OAv6MjvIHAtSDhJwNArXRmL0LAraZvUcC5cGygQoCz5HN7A0C+YzY9AMCmtWQ6AUC/oHF8w4CxeTgmg8CgszujQECss22vgYCp6HBuggCkfm+FAKngqb5BgKkuIzAAQKPspKCCQLu+eDvCwKf5YrEBQKl0M3ACgKm85DvDALCu/nfCwLbwO38DgLoz5eyDQLfr9XLCwL20/eUDgL7hpr3DAKh1tfbCgL48OuNBwK4tuKaCALpgbn5CgLC4dKvBgKKlu76CwKfhKLJAQLurPTIAwLG0o+hAgKI5Y6dDALq+OOlCQKxjuuICAK8yrLHBwLcrOSSAwLoiJfQCwKKyvrtBALXkbCBCgKt4bG9BQLr6qnxCwLC2pz2DQKQ7OuZBALt7t+DDAKR47b8CAKi6pPGCQKLl4r3CQK5yfj+AwLgzYvjDwKUjerODQK7mOPTCQL9qP3qBgKYiOL9AgLA8pSaBwKay8fBDQLqw93DCgKkjpf/CwLsyquQCwKtpbGsDALMtKmxBwKPpvCmBOAFHtmBuG3iNmIT9fQ8Z1TWMpjZ122|cccccccccnncnnnnn|

HP5510 All-In-One won't scan entire page image

Is there a setting or something that I'm missing when it comes to scanning with my 5510 All-In-One? I'm scanning to my MacBook using OS X. And yes, I'm placing my document in the appropriate corner, but I'm only getting a small portion of the 8 1/2x11 page instead of the entire page. I turn it every possible direction and it's still not scanning the entire page. Suggestions?

Hi @bonbon2D,
I see by your post that you are unable to scan the full image on the Mac. I can help you with this.
I have provided a document for how to scan and change the scan settings.
Scan.
Check the driver name that is installed for the printer. The Airprint driver might be installed instead of the Printer's driver. (usually defaults to Airprint)
Click the Apple menu and then click System Preferences. Click Printers & Scanners, highlight the printer name on the left side and on the right side of the screen should show the name.
If the printer name shows Airprint, then that is the Apple drivers. Delete it and add the printer name back in from the list. Click the - sign to delete the driver and then click the + sign to add the driver, might have to click the drop down to select the printer's name to add it in.
What operating system are you using? Mac OS X: How Do I Find Which Mac OS X Version Is on My Computer?
What application are you trying to scan with?
How is the printer connected? (USB/Ethernet/Wireless)
If you need further assistance, just let me know.
Have a nice day!
Thank You.
Please click “Accept as Solution ” if you feel my post solved your issue, it will help others find the solution.
Click the “Kudos Thumbs Up" on the right to say “Thanks” for helping!
Gemini02
I work on behalf of HP

Having a problem: Placing image or putting drop shadow on rectangle causing entire page to lighten up.

I don't know how to word this properly, so I'm sorry if I'm doing this all wrong! I'm having a problem with my document in indesign. I have placed a jped image on the page to serve as the background image. I did this on the master page. I first noticed this problem when I was trying to put a .psd image onto the page. When I did, it would cause the entire page to dramatically brighten! I finally gave up and moved on, and now I ran into the problem again when I created a new rectangle box. I put a drop shadow effect on the box and when I did this, it also made the entire page lighten up. Any suggestions on how to fix this problem??
Thanks so much!

Whenever you add a transparency effect such as drop shadow over another image, especially a grayscale image, InDesign changes how the page is rendered to reflect what it will look like when printed. As I understand it, nothing has changed but the display. Choose View > Overprint Preview to avoid such surprises and get a more accurate representation of what you'll see when printed when colors are separated. If your document is going to be output to PDF or SWF, choose Edit > Transparency Blend Space > Document RGB instead of Document CMYK.

Anyway to delete the middle section of a page so that the rest of the page content moves up?

Hi, I'm new and in need of help
I want to delete the middle 3"s of a PDF page so that the rest of the page content (pics/text) moves up? Would Acrobat Pro let me do this?
TIA!

First thing to know is Acrobat is not a word processor or page layout program. While it has many editing capabilities heavy text or layout editing should always take place in the documents' parent application (i.e. Word, InDesign, Quark, FrameMaker, Apple Pages, OpenOffice, etc...)

Image Slide In Moves Entire Page Contents

Similar Messages

Maybe you are looking for