Advanced Search

Results 1 to 4 of 4

Thread: Help with my site not centering in all browsers

  1. #1
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default Help with my site not centering in all browsers

    Not sure where this should go. HTML or CSS so I put it in both

    Hi,

    Beginner here. Making this site for friends and it looks perfectly centered on my mac with FF and SAFARI. Tried on a PC machine in the office and on both browsers it isn't centered on the page.
    http://test.afwa-phila.org/

    What am I missing?

    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,684
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    Looks centered here on my Win 7 PC (latest of: Opera, Firefox, IE, Chrome). What browser, browser version, and OS are you having the problem in?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Defender90 (05-20-2013)

  4. #3
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    Thanks,
    I figured it out.

    One question I have I took the code for the image fade from online and need to stop the fading after the third picture. Not sure what version this is so could use your help.
    Thanks

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,684
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    You should consider updating to the most recent version of the script:

    http://www.dynamicdrive.com/dynamici...nslideshow.htm

    where a simple addition to the on page init can do that.

    With the current version that you're using, switch to this code:

    Code:
    <script type="text/javascript">
    /***********************************************
    * Ultimate Fade-In Slideshow (v1.5): (c) Dynamic Drive (http://www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    * Updated for better Safari & Opera 9+ Compliance,
    * and a times through option.
    * by jscheuer1 in http://www.dynamicdrive.com/forums
    ***********************************************/
    
    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
    fadeimages[1]=["photo2.jpg", "", ""] //plain image syntax
    fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
    fadeimages[3]=["photo4.jpg", "", ""] //plain image syntax
    fadeimages[4]=["photo5.jpg", "", ""] //plain image syntax
    
     
    var fadebgcolor="white"
     
    ////NO need to edit beyond here/////////////
     
    var fadearray=new Array() //array to cache fadeshow instances
    var fadeclear=new Array() //array to cache corresponding clearinterval pointers
     
    var dom=(document.getElementById) //modern dom browsers
    var iebrowser=document.all
     
    function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, times, displayorder){
    this.flag=0
    this.times=times
    this.pausecheck=pause
    this.mouseovercheck=0
    this.delay=delay
    this.degree=0 //initial opacity degree (10%)
    this.curimageindex=0
    this.nextimageindex=1
    fadearray[fadearray.length]=this
    this.slideshowid=fadearray.length-1
    this.canvasbase="canvas"+this.slideshowid
    this.curcanvas=this.canvasbase+"_0"
    if (typeof displayorder!="undefined")
    theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
    this.theimages=theimages
    this.imageborder=parseInt(borderwidth)
    this.postimages=new Array() //preload images
    for (var p=0;p<theimages.length;p++){
    this.postimages[p]=new Image()
    this.postimages[p].src=theimages[p][0]
    }
     
    var fadewidth=fadewidth+this.imageborder*2
    var fadeheight=fadeheight+this.imageborder*2
     
    if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
    document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:10;-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:10;-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
    else
    document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
     
    if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
    this.startit()
    else{
    this.curimageindex++
    setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
    }
    }
    
    function fadepic(obj){
    if (obj.degree<100){
    obj.degree+=10
    if (obj.tempobj.style.opacity&&typeof addEventListener !== 'undefined')
    obj.tempobj.style.opacity=obj.degree/101
    else if (obj.tempobj.filters&&obj.tempobj.filters[0]){
    if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
    obj.tempobj.filters[0].opacity=obj.degree
    else //else if IE5.5-
    obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
    }
    else if (obj.tempobj.style.MozOpacity)
    obj.tempobj.style.MozOpacity=obj.degree/101
    else if (obj.tempobj.style.KhtmlOpacity)
    obj.tempobj.style.KhtmlOpacity=obj.degree/100
    }
    else{
    clearInterval(fadeclear[obj.slideshowid])
    obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
    obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
    if(obj.times && obj.flag == obj.times){
    return;
    }
    if(obj.nextimageindex==obj.postimages.length-1)
    ++obj.flag
    obj.populateslide(obj.tempobj, obj.nextimageindex)
    obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
    setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
    }
    }
      
    fadeshow.prototype.populateslide=function(picobj, picindex){
    var slideHTML=""
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
    slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML+='</a>'
    picobj.innerHTML=slideHTML
    }
     
     
    fadeshow.prototype.rotateimage=function(){
    if (this.pausecheck==1) //if pause onMouseover enabled, cache object
    var cacheobj=this
    if (this.mouseovercheck==1)
    setTimeout(function(){cacheobj.rotateimage()}, 100)
    else if (iebrowser&&dom||dom){
    this.resetit()
    var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    crossobj.style.zIndex++
    fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",75)
    this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
    }
    else{
    var ns4imgobj=document.images['defaultslide'+this.slideshowid]
    ns4imgobj.src=this.postimages[this.curimageindex].src
    }
    this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
    }
     
    fadeshow.prototype.resetit=function(){
    this.degree=10
    var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    if (crossobj.style.opacity&&typeof addEventListener !== 'undefined')
    crossobj.style.opacity=this.degree/101
    else if (crossobj.filters&&crossobj.filters[0]){
    if (typeof crossobj.filters[0].opacity=="number") //if IE6+
    crossobj.filters(0).opacity=this.degree
    else //else if IE5.5-
    crossobj.style.filter="alpha(opacity="+this.degree+")"
    }
    else if (crossobj.style.MozOpacity)
    crossobj.style.MozOpacity=this.degree/101
    else if (crossobj.style.KhtmlOpacity)
    crossobj.style.KhtmlOpacity=this.degree/100
    } 
     
    fadeshow.prototype.startit=function(){
    var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    this.populateslide(crossobj, this.curimageindex)
    if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
    var cacheobj=this
    var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
    crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
    crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
    }
    this.rotateimage()
    }
     
    </script>
    Use your images in place of the ones at the top there. What this code does is add a times through option. You can use that here in the body where you have:

    Code:
     <script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause, optionalRandomOrder)
    new fadeshow(fadeimages, 633, 503, 0, 4400, 15)
        </script>
    make that:

    Code:
    <script type="text/javascript">
    //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), times_only (0 continuous, 1 to whatever), optionalRandomOrder)
    new fadeshow(fadeimages, 633, 503, 0, 4400, 1, 1)
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Centering site logo in Header
    By igotregistered in forum HTML
    Replies: 2
    Last Post: 04-22-2010, 11:45 AM
  2. Replies: 2
    Last Post: 09-12-2008, 05:03 AM
  3. Replies: 2
    Last Post: 03-29-2007, 06:31 AM
  4. Centering a script for the site.
    By Ubernoober in forum JavaScript
    Replies: 2
    Last Post: 08-13-2005, 07:12 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •