JavaScript - Vertically Centering Collabsible Panels

Hi there!

I hope I posted this question in the right place. I've been working on a Spry Master/Detail region using Dreamweaver CS4 for months now and I just can't get it to work right. I know very little about coding Javascript; I'm altering a template from a tutorial book. Here's my problem:

I want at least 2 master/detail regions on a single page, each nested in a spry tabbed panel, and each filtered by a non-destructive filter. I'm having all kinds of trouble getting this accomplished.I did some troubleshooting and have pinpointed exactly where things go wrong.

First, I thought that the problem might be that both of my tables were on the same page as the master/detail regions, so I put them on their own pages. No problems there. Then I built one master/detail region, with selectable filter menu, in a spry tabbed panel. No problem. Then I started all over again, and built each master/detail region stepwise following the instructions in the book. The 2 master/detail regions, 1 in each tab, are no problem. Applying the non-destructive filter is where things get tricky for me.

When I apply the non-destructive filters, all of the data from the first table disappears! The table in the 2nd tab still works perfectly.

My 2 spry datasets are named rs_CasteAbilities and rs_ProfAbilities. Here's the code for just creating the 2 spry data sets:

[CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities");
var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE]

No problems there. When I apply the nondestructive filter to the first spry dataset the first dataset filters just as it is supposed to and the second one does nothing, just as its supposed to. It looks like this:

[CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities");
rs_CasteAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
{
if (row == rs_CasteAbilities.gallery) {
return row;
}
return null;
}
rs_CasteAbilities.filter(chooseSet);
var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE]

The problem is that when I apply the same filter to the 2nd spry dataset, the 2nd dataset filters, but the first dataset totally disappears when I view the page (firefox and safari)! I can post screenshots if needed. Here's the code I'm using:

[CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities");
rs_CasteAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
{
if (row == rs_CasteAbilities.gallery) {
return row;
}
return null;
}
rs_CasteAbilities.filter(chooseSet);
var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities");
rs_ProfAbility.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
{
if (row == rs_ProfAbility.gallery) {
return row;
}
return null;
}
rs_ProfAbility.filter(chooseSet); [CODE]

This problem has been stumping me for weeks and I'm getting to the point where I need to get this done. I hope that in my inexperience, I was able to communicate this problem articulately. Please somebody help!

Thanks so much to anyone who takes the time to help me out. The page itself, with nothing showing up in the first tab, can be viewed he

www.iotheatre.com/GoldenAgeAbilities.php

-Chris Blockus

Originally posted this in the CSS/HTML forum but I was recommended to posting it in here as it seems the solution I'm after would be JS based.

Here's the build site so far, a little messy but you should be able to see what I'm after. - http://www.kierangabriel.com/lvcrft/

When you click the SHOWS link, I have a scrollto that scrolls horizontally to another (unfinished) div. What I want is for the logo box & navigation box to scroll along with the page, fixed horizontally. But when the user scrolls vertically through content, such as the stuff on the home div, I don't want the logo & nav to scroll.

I found this http://stackoverflow.com/questions/1...not-vertically via googling, but I can't make much sense of it as I'm very much a JS noob. I've tried to change element id to that of mine but it didn't do anything.

Any ideas?

Many thanks.

Hi,


I bought this theme in themeforest. I want to vertically align middle #silhouette and #pages

the original developer gave this code

var margin=$(window).height() / 100 * 15;
$('#pages').css('margin-top',margin + 'px');
$('#silhouette').css('top',margin + 'px');

and asked to add in main.js in line 159

it still does'nt work perfectly and in higher or lower resolutions it does'nt get aligned in middle. Do i have to edit anything in CSS, can this JS code be optimised to work perfectly?

Thanks

Hi, I'm working on a blog design. (See code below.) I'd like to fix #title vertically so that when people scroll down the blog, it stays in view in the window.

I couldn't think of a CSS way to do it. Using position:fixed doesn't work because if someone is viewing the site from a netbook, or simply from a downsized browser on their normal computer, #title is either cut off -- if it's positioned relative to the left -- or it overlaps the blog content -- if it's positioned relative to the right.

I've read suggestions to use Javascript but my Javascript skills are practically non-existent. The suggestions were to use an onscroll handler, and to use scrollTop. This is what I wrote but (probably for obvious reasons) it isn't working:

Code:

window.onscroll = verticalFix();
function verticalFix() {
    var sidebar = document.getElementById("title");
    sidebar.style.top = .scrollTop(30);
}

Any advice? Also, .scrollTop is jQuery, right? So I have to link to jQuery? How do I do that, again?

Thanks for your help!

Here's my html and css:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<style type="text/css">
body,p,#title {
	padding:0;
	border:0;
	margin:0;
}
body {
	height:100%;
	background-color:#fdf5a2;
	min-width:1056px;
}
#content {
	width:700px;
	padding:15px;
	border:0;
	margin:0;
	margin-left:16px;
        background-color:white;
	background-image:url('');
        background-repeat:repeat-y;
}
#title {
	background-color:white;
	background-image:url('');
	background-repeat:no-repeat;
	position:absolute;
	left:755px;
	top:30px;
	height:151px;
	width:292px;
}
</style>
</head>
<body>
<a href=""><div id="title">&nbsp;</div></a>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a sem vel nibh interdum egestas sit amet eu tortor. Donec vitae enim risus, quis ultrices metus. Donec vitae mi nibh. Morbi sed placerat metus. Curabitur auctor eros eget odio fermentum et fringilla ante hendrerit. Fusce at tempor libero. Maecenas et iaculis velit. Nulla sit amet lacus enim, vitae hendrerit metus. Donec a risus nunc. Etiam accumsan, ligula sit amet molestie dictum, turpis orci blandit justo, nec porttitor dui ante bibendum risus. Praesent luctus luctus tortor posuere tincidunt. Phasellus ante elit, sollicitudin id dignissim id, bibendum vel nulla.<br /><br />Vivamus vitae elit sed quam consequat interdum sed sit amet ante. Aliquam euismod ipsum non elit sagittis vulputate. Praesent id libero est. Aliquam eget hendrerit nibh. Donec ut sapien massa, vitae consectetur odio. Nunc ut convallis mauris. Donec nisi neque, cursus vitae faucibus a, sagittis et ipsum. Fusce vitae felis augue. Sed eu venenatis enim. Sed pharetra elementum vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi tincidunt euismod vehicula. Sed facilisis imperdiet pellentesque. Suspendisse ac orci et odio dignissim sodales eget pharetra erat. Etiam arcu odio, adipiscing sed sollicitudin in, egestas et orci. Donec id diam eget libero ultrices tincidunt id et dolor. Etiam malesuada tortor in mi pretium ultricies. Sed faucibus, dolor aliquam pulvinar lobortis, nulla neque condimentum dolor, vel hendrerit lorem elit id ipsum.<br /><br />Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse fringilla luctus ipsum, a suscipit dolor volutpat vitae. Nunc feugiat magna quis lorem porttitor a accumsan mauris pharetra. Mauris eget lectus sit amet mauris tincidunt congue non vitae massa. Donec mi mi, iaculis ut congue ut, aliquam ut est. Ut varius ultricies vulputate. Proin aliquet massa ac nulla volutpat dictum. Donec aliquam diam vel odio rutrum vitae tincidu t felis dapibus. Donec diam velit, elementum eget rutrum sed, congue eget sapien. Integer aliquet cursus pulvinar. Sed varius diam rhoncus metus tristique semper. Donec mauris enim, porttitor a eleifend at, porttitor id nisl. Donec est tellus, pellentesque tempor egestas sed, eleifend id dui. Nulla euismod erat non tellus bibendum quis vehicula odio faucibus. Cras enim turpis, pulvinar ac facilisis sit amet, egestas eu metus. Fusce orci sapien, sagittis non iaculis pharetra, fermentum non augue. Aliquam velit erat, facilisis at faucibus ut, semper sed velit. Proin ac sapien magna.<br /><br />Duis vestibulum varius orci vel tempor. Maecenas id magna nibh, id aliquam mauris. Aliquam auctor metus eget metus hendrerit sed luctus nisi convallis. Mauris faucibus interdum felis ac vestibulum. Aenean ut quam quis velit imperdiet fringilla nec tempor magna. Nam vel neque a justo cursus varius. Nam in erat ante. In convallis mi in tellus tempus id mollis ipsum cursus. Nam a ultrices nulla. Nullam pellentesque interdum ligula, quis mattis ante pharetra et.<br /><br />Etiam nisi nibh, tempus eu tincidunt lobortis, cursus sed ligula. Nam vitae elit purus, id facilisis purus. Fusce lorem quam, porta eget sodales quis, luctus eget mi. Fusce scelerisque, justo vestibulum varius porta, tellus nulla bibendum mi, non adipiscing neque leo vitae mi. Donec posuere, lacus eu lobortis rutrum, eros nulla iaculis orci, sed mollis orci purus rhoncus sapien. Fusce ac enim diam, quis posuere enim. In faucibus, sem a tincidunt mollis, eros nisl faucibus diam, ut volutpat dolor arcu quis augue. Sed iaculis justo auctor nulla vestibulum congue. Cras venenatis, sem non ullamcorper eleifend, risus tellus semper sem, quis fermentum mi nulla id metus. Fusce at placerat lacus. Sed tristique, velit id ultrices sollicitudin, massa tellus vehicula neque, in dignissim sapien nisl a ante. Etiam varius tristique ante et eleifend. Aliquam erat volutpat. Mauris luctus tristique eros, vehicula pharetra purus convallis vitae. Suspendisse porta condimentum magna in luctus. Aliquam erat volutpat.<br /><br />In dui risus, consequat sed sagittis pretium, fringilla a est. Vivamus gravida, est vel cursus tristique, est est aliquet quam, quis fermentum quam neque et justo. Nulla eu urna eu sapien rutrum varius eget id odio. Sed lacinia tristique purus ac auctor. Nam ornare auctor mauris, ac pharetra nisl dignissim sed. In hac habitasse platea dictumst. Suspendisse potenti. Donec eleifend malesuada orci vitae posuere. Vivamus mattis vestibulum ante, mattis pellentesque magna sagittis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum congue nunc ac felis volutpat vel vestibulum libero pulvinar. Duis rutrum dui non libero mollis ultrices. Vestibulum et sapien ac justo tristique rutrum. Duis nec nibh eros, eu pretium mauris. Ut tristique eleifend elementum. Duis id leo id nisl commodo sagittis at a elit. Cras aliquet, nibh a bibendum ultricies, nisl nisl posuere justo, in feugiat enim nunc non eros. Pellentesque vitae dui eget metus molestie sodales. Aenean id augue leo, a bibendum felis.<br /><br />Donec tristique laoreet lobortis. Aenean vestibulum congue mauris vitae suscipit. Maecenas in euismod orci. Suspendisse vel egestas leo. Vestibulum faucibus vestibulum felis at interdum. Cras vestibulum, augue quis convallis laoreet, ligula est suscipit turpis, a sodales nunc orci vitae risus. Nam eu tristique dolor. Vivamus nec aliquam neque. Integer magna eros, mattis non cursus ut, hendrerit eu orci. Morbi eu felis metus. Vivamus eu malesuada tortor. Vivamus eget lectus sit amet magna mattis adipiscing eu non magna. Praesent pretium tincidunt enim vel consectetur. Sed dictum vestibulum ligula, non dictum quam vulputate quis. Aliquam erat volutpat. Maecenas iaculis pharetra iaculis.</p>
</div>
</body>
</html>

I was recommended to vertically align these list items using javascript. I am needing to vertically align the "identity" and "web presence" list items with each other: http://shilohcreative.gethifi.com/work#/esque

Thank you in advance!

I'm trying to make my sidebar show 3 images then scroll to the next 3 automatically every 3 seconds or so. (vertically)

Can anyone help me out with a reference I could look at how to do it or show a snippet of code?

I've looked up various scripts for scrolling the pictures I have on the right vertically, but I can't seem to implement any of the ones I've found. I'm not trying to ask for you to code it all for me (unless you really want to), but just need some help! Thanks!

Here's the site:
www.beunthinkable.org

hi guys,

I need to implement an inline calendar showing multiple months(suppose 6 months) starting from current month in my web application. It should be possible to move to the previous months and next months. Also it should be possible to retrieve the date when a user clicks (onclick event) on a particular date.

Is there any javascript source code available? could anyone please help me?

thanks in advance

This has probably been asked times before, but i've tried a few things and im struggling a little.

i just wanna center this slideshow which i got to code from http://www.javascriptkit.com

Im was just getting the hang of CSS after a little knowledge of using HTML back in the myspace days, but now Javascript is making it a bit more challenging.

I tried doing the < center > < / center > thing around it, which did move it but still kept a scroll bar at the bottom and was mroe right aligned if anything.

Its from big cartel. The code for the page is below and the link to the page is www.therobinsbobbin.com/welcome-page

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>{{ store.name }} &mdash; {{ page.name }}</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Language" content="en-us" />
  <meta name="description" content="{{ page.meta_description }}" />
  <meta name="keywords" content="{{ page.meta_keywords }}" />
  <link href="/products.rss" rel="alternate" title="Product RSS Feed" type="application/rss+xml" />
  <link href="{{ theme | theme_css_url }}" media="screen" rel="Stylesheet" type="text/css" />
  <script src="{{ 'prototype' | theme_js_url }}" type="text/javascript"></script>
  <script src="{{ 'store' | theme_js_url }}" type="text/javascript"></script>
  <div id='mydiv'>
  
    <script type="text/javascript">

// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 300+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

var ultimateshow=new Array()

   //ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]

    ultimateshow[0]=['http://img715.imageshack.us/img715/120/newslide1.png', 'http://www.therobinsbobbin.com/home']
ultimateshow[1]=['http://img214.imageshack.us/img214/3893/newslide2.png', 'http://www.therobinsbobbin.com/home']
ultimateshow[2]=['http://img268.imageshack.us/img268/9044/newslide3.png', 'http://www.therobinsbobbin.com/home']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth="300px" //set to width of LARGEST image in your slideshow
var slideheight="261px" //set to height of LARGEST iamge in your slideshow
var slidecycles="continous" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'

    

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=1500

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById
var curcycle=0

if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
 
    
    var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}

var currentslide=0

function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}

if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow

function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
    ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}

if (ie||dom)
window.onload=start_slider

  
  
  </script>
    </div>
  {{ head_content }}

  
  
  
  
  
  
  
  
  
  
  <html>

  
  
<body id="{{ page.permalink }}-page" class="{{ page.permalink }} {{ page.category }}">


  
  
  <div id="wrap">

    <noscript>
      <div class="error" id="error">
        <ul>
          <li>JavaScript must be enabled to use this store!</li>
        </ul>
      </div>
    </noscript>

    {% if errors != blank %}
    <div id="error" class="error">
      <ul>
        {% for error in errors %}<li>{{ error }}</li>{% endfor %}
      </ul>
    </div>
    {% endif %}

    {% if store.website != blank %}
    <div id="website">
      <a href="{{ store.website }}">Back to site</a>
    </div>
    {% endif %}

   
   
      <div id="main-content">
        {% if page.category == 'custom' %}
        {{ page_content | paragraphs }}
        {% else %}
        {{ page_content }}
        {% endif %}
      </div>

    </div>

    

      
      {% if theme.show_newest %}
      <div id="newest" class="pod">
        <h3 class="newest-title"><span>Newest Products</span></h3>
        <ul class="newest-list">
        {% get 5 products from products.all order:'newest' %}
          {% for product in products %}<li>{{ product | link_to }}</li>{% endfor %}
        {% endget %}
        </ul>
      </div>
      {% endif %}

      {% if theme.show_top_selling %}
      <div id="top-selling" class="pod">
        <h3 class="top-selling-title"><span>Top Selling</span></h3>
        <ul class="top-selling-list">
        {% get 5 products from products.all order:'sales' %}
          {% for product in products %}<li>{{ product | link_to }}</li>{% endfor %}
        {% endget %}
        </ul>
      </div>
      {% endif %}

      {% if theme.show_products_feed %}
      <div id="feed" class="pod">
        <h3 class="feed-title"><span>Feed</span></h3>
        <ul class="feed-list">
           <li class="li-1"><a href="/products.rss" title="Product RSS Feed"><span>Product RSS Feed</span></a></li>
        </ul>
      </div>
  {% endif %}

     
      

    <div id="footer"><span></span></div>

  </div>


  <div id="extra-1"><span></span></div>
  <div id="extra-2"><span></span></div>
  <div id="extra-3"><span></span></div>
  <div id="extra-4"><span></span></div>
  <div id="extra-5"><span></span></div>
  <div id="extra-6"><span></span></div>
  
  </div>


</body>
</html>

I'm trying to write a function to center a div within a parent div, and I'm having a little trouble. Horizontally, it works fine. Vertically, not so much. This is my function:

Code:

function centerObject(idName, idParent) {
var parentLeft = $(idParent).position().left;
var parentWidth = $(idParent).width();
var parentWCenter = parentWidth / 2;

var parentTop = $(idParent).position().top;
var parentHeight = $(idParent).height();
var parentHCenter = parentHeight / 2;

var objWidth = $(idName).width();
var objWCenter = parentLeft + parentWCenter - (objWidth / 2);

var objHeight = $(idName).height();
var objHCenter = Math.abs(parentTop + parentHCenter - (objHeight / 2) - 20);

$(idName).css({left:objWCenter,top:objHCenter});	

};

The line with the Math.abs call is necessary because without it, the given div ends up halfway off the page up at the top. At least this way it appears somewhere within the browser.

The divs in question are all set to position: absolute, but I've tried setting them to all the other possibilities without luck. Or maybe I missed something. This happens in any browser... IE, FF, Chrome, Safari, etc.

In any case, anybody have any ideas on where I went wrong?

Thanks!

Rob

Hey, ive been strugglng all day to centre a DIV with javascript in the centre of my page. Ive created a modal popup and id like it to stay in the screen even if the page has been scrolled down. And no matter what i try i cant get it to actually hit the centre of the screen. I should add that im totally new to javascript but decided i cant avoid learning javascript forever so here are my pathetic efforts..

Code:

function ShowPopup(hoveritem, thepopup, theimage)
{
popVar = document.getElementById(thepopup);

//document.getElementById('hoverpopup').style.paddingLeft = screen.width/2-250;
//document.getElementById("hoverpopup").style.paddingTop = screen.height/2;

// Set position of hover-over popup
//popVar.style.top = hoveritem.offsetTop + 50;
//popVar.style.left = hoveritem.offsetLeft + 100;

// Set popup to visible
popVar.style.visibility = "Visible";

}

Ive tried loads of other things too, whats commented out has been my last effort. Im doing other things too in the function in case you wondered.

But any ideas how i can do this, sorry if ive not been too clear!

I have a problem in centering my popup window. I want it centered in the page when it pops up. The problem is in the code that is red.

Here's a part of my script:

if (counter == 0)
{
var myRes = "<html><head>\n";
myRes += "<title>Popup Window</title>\n";
myRes += "</head><body>\n";
myRes += "<div style='text-align:center'>\n";
myRes += "<p>Search character '<b>" + searchChar + "</b>' not found in text string!</p>\n";
myRes += "<input type='button' value='Close Window' onclick='window.close()'>\n";
myRes += "</div>\n";
myRes += "</body>\n</html>";

var popup = window.open("", "Popup", "top=10,left=300,width=300,height=100");
popup.focus();
popup.document.write(myRes);
popup.document.close();

I have an issue with my div visibility toggling

Code:

 function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
		
    }

I call it from an image map he Code:

<area shape="rect" coords="234,-12,480,203" href="#peripherala"  onclick="toggle_visibility('peripherala');toggle_visibility('shadow');return false"/>

and I do the return false to stop the thing from jumping all over the place, but where i click next, the page scrolls down to center on that point, which is really annoying. How do I stop it?
Thanks for any help....

Hi all,

Here's the situation. A client has a 1440 wide flash move in .swf format that serves as in intro to the site. They want the flash movie centered on the screen even if the resolution is lower, at 1024 or whatever. At this point my idea is to wrap the flash object in a div and center that div using javascript so that it centers no matter the screen width, but I don't know exactly how to do this....any ideas? thanks very much.

Hi guys,

I don't know if this is possible at all, but I thought it was worth a shot asking.

http://www.applicate.com.au/home

I have a slideshow in a div that is 1800px wide, and a smaller content area which is 980px wide. Usually I would use a background image for this, but it needs to be a slideshow. It works great on larger screens, but not on small screens. I've removed the horizontal scrollbar, but when viewing on a small screen, obviously the content isn't in the center.

I know centering this isn't possible in CSS, is it possible in JavaScript?

Otherwise, I guess I'll look for a module that is a background image slideshow.

Thanks in advance for any suggestions (: