PDA

View Full Version : Centering Problem with Ajax XML Ticker Script



gkornbluth
12-17-2010, 11:24 PM
1) Script Title: Ajax XML Ticker

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/ajaxticker.htm

3) Describe problem:

Hi All,

This oneís a little strange.

Iím combining a method of "supersizing" a background image, some static footer text that stays pinned to the bottom center of the screen, and the Ajax XML Ticker script that I want to appear centered above the static footer text, on this page: http://www.jkwebdesigns.com/marie3.php

Try as I might, I canít get both the static footer and the ticker (900px wide) to be centered at the bottom of the page. (The footer text is centered, but the ticker is pinned to the left.)

Iíve tried putting both elements in one ďfooterĒ div, but that didnít work. I ended up (not too elegantly) putting in 2 footer divs and some <br>s to separate the elements. Not the way to go, but Iím at a loss for a better approach.

Hope someone can spot something that can help.

Thanks,

Jerry Kornbluth

Hereís the active code on the page:


<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<title>Centering Test</title>

<!-- ajaxticker script -->
<script src="scripts/ajaxticker.js" type="text/javascript">

/***********************************************
* Ajax Ticker script (txt file source)- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<style type="text/css">

/* CSS for Ajax ticker*/

#ajaxticker1{
width: 900px;
height: 100px;
border: 1px ridge black;
padding: 5px;
background-color: #DAF7D9;
text-align: center;
}

#ajaxticker1 div{ /*IE6 bug fix when text is bold and fade effect (alpha filter) is enabled. Style inner DIV with same color as outer DIV*/
background-color: #DAF7D9;
}

.someclass{ //class to apply to your scroller(s) if desired
}
/* CSS for pinning footer to bottom of screen */
#footer {
position: absolute;
bottom: 0;
width: 100%;
font-size: 1.1em;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
/* CSS for supersizing the background image */
* { margin: 0; padding: 0; }

#bg { position: fixed; top: 0; left: 0;}
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

#page-wrap { position: relative; width: 100%; background: none; }

/* CSS for scroll text */
.scroll {
font-size: .7em; font-family: Arial, Helvetica, sans-serif; color:#000000;
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">

</script>

<!-- Supersized script -->
<script>
$(function() {

var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();

function resizeBg() {

if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}

}

theWindow.resize(function() {
resizeBg();
}).trigger("resize");

});
</script>
</head>
<body >

<img src="marieimages/bg2.jpg" id="bg" alt="supersized background image">

<div align="center" id="page-wrap">
<br /> <img src="marieimages/aranmore-logo.png" width="576" height="158" alt="Aranmore School of Irish Dance"><br />

<br /></div>
<div id="footer"><script type="text/javascript">

var xmlfile="tickercontent.txt" //path to ticker txt file on your server.

//ajax_ticker(xmlfile, divId, divClass, delay, optionalfadeornot)
new ajax_ticker(xmlfile, "ajaxticker1", "someclass", [3500], "fade")
</script><br><br><br></div>
<div id="footer">Classes in Broward and Palm Beach County Florida.<br />Call us at (561) 123 4567
<br></div>

</body>
</html>

liamallan
12-18-2010, 12:00 AM
try this, find the css for the ticker

/* CSS for Ajax ticker*/

#ajaxticker1{
width: 900px;
height: 100px;
border: 1px ridge black;
padding: 5px;
background-color: #DAF7D9;
text-align: center;
}

and add:

float:center;

hope this helps