Solved

dhtml slider

Posted on 2006-06-08
15
1,033 Views
Last Modified: 2008-01-09
I came across a slider on the following page: http://carpe.ambiprospect.com/slider/

I was playing with it and I got it to work (easy part), but I am having issues trying to position it. I would like it in the center of my page (with text on either side), but no matter what I do, it stays on the left.

Any ideas?

Thanks,

Ed
0
Comment
Question by:kawas
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
15 Comments
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16866618

You can try wrapping it in a div that centers with css:

<div style="margin-left:auto;margin-right:auto"> ... </div>
0
 
LVL 13

Author Comment

by:kawas
ID: 16866639
that didnt work.

0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16866698

You would probably have to dump the code then. :)
0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 13

Author Comment

by:kawas
ID: 16866715
THe code is available from the link. All i did was follow the directions on the site.

Of course, i tried adding your suggestion to the code as well.

But just to be sure, my html is below (modify the localhost part as appropriate):
<!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>
<script
    language="JavaScript"
    src="http://localhost/slider.js" type="text/javascript" >
</script>
<link
    href="http:/localhost/default.css"
    rel="stylesheet"
    type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<p>Slider</p>
<div style="margin-left:auto;margin-right:auto"> <div align="center" class="carpe_horizontal_slider_track">
  <div class="carpe_slider_slit">&nbsp;</div>
  <div class="carpe_slider"
        id="your_slider_id"
        orientation="horizontal"
        distance="100"
        display="your_display_id"
        style="left: 0px;">&nbsp;</div>
  <div class="carpe_slider_display_holder" >
    <input class="carpe_slider_display"
        id="your_display_id"
        name="your_var_name"
        type="text"
        from="0"
        to="284"
        valuecount="284"
        value="50"
        readonly="true" />
  </div>
</div>
</div>
</body>
</html>
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16866739

It appears centered in IE and FF...  i ididn't do anything to this code but add borders...

<!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>
<script
    language="JavaScript"
    src="http://localhost/slider.js" type="text/javascript" >
</script>
<link
    href="http:/localhost/default.css"
    rel="stylesheet"
    type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<p>Slider</p>
<div style="margin-left:auto;margin-right:auto; border:1px solid red;">
      <div align="center" class="carpe_horizontal_slider_track"  style="border:1px solid red;">      
            <div class="carpe_slider_slit">&nbsp;</div>
            
            <div class="carpe_slider"
                              id="your_slider_id"
                              orientation="horizontal"
                              distance="100"
                              display="your_display_id"
                              style="left: 0px;">&nbsp;</div>
                              
            <div class="carpe_slider_display_holder" >
                  <input class="carpe_slider_display"
                              id="your_display_id"
                              name="your_var_name"
                              type="text"
                              from="0"
                              to="284"
                              valuecount="284"
                              value="50"
                              readonly="true" />
            </div>
            
      </div>
</div>
</body>
</html>
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16866741


can you send the css?
0
 
LVL 13

Author Comment

by:kawas
ID: 16866777
/*      Default stylesheet for the Carpe Slider
      By Tom Hermansson Snickars                
      2005-12-17 version 1.5
      Copyright CARPE Design                    
      carpe.ambiprospect.com
*/
*.carpe_horizontal_slider_display_combo {
      clear: left;
      margin: 0;
}
*.carpe_vertical_slider_display_combo {
      float: left;
      margin: 0;
}
*.carpe_horizontal_slider_track {
      background-color: #bbb;
      color: #333;
      width: 120px;
      float: left;
      margin: 0;
      line-height: 0px;
      font-size: 0px;
      text-align: left;
      padding: 4px;
      border: 1px solid;
      border-color: #ddd #999 #999 #ddd;
}
*.carpe_vertical_slider_track {
      background-color: #bbb;
      color: #333;
      padding: 3px 6px 15px 6px;
      width: 24px;
      height: 100px;
      border: 1px solid;
      border-color: #ddd #999 #999 #ddd;
}
*.carpe_horizontal_slider_track *.carpe_slider_slit {
      background-color: #333;
      color: #ccc;
      width: 110px;
      height: 2px;
      margin: 4px 4px 2px 4px;
      line-height: 0px;
      position: absolute;
      z-index: 1;
      border: 1px solid;
      border-color: #999 #ddd #ddd #999;
}
*.carpe_vertical_slider_track *.carpe_slider_slit {
      background-color: #000;
      color: #333;
      width: 2px;
      height: 100px;
      position: absolute;
      margin: 4px 10px 4px 10px;
      padding: 4px 0 1px 0;
      line-height: 0px;
      font-size: 0;
      border: 1px solid;
      border-color: #666 #ccc #ccc #666;
}
*.carpe_horizontal_slider_track *.carpe_slider {
      width: 16px;
      background-color: #666;
      color: #333;
      position: relative;
      margin: 0;
      height: 8px;
      z-index: 1;
      line-height: 0px;
      font-size: 0px;
      text-align: left;
      border: 2px solid;
      border-color: #999 #333 #333 #999;
}
*.carpe_vertical_slider_track *.carpe_slider {
      width: 20px;
      background-color: #666;
      color: #333;
      position: relative;
      margin: 0;
      height: 8px;
      z-index: 1;
      line-height: 0px;
      font-size: 0px;
      text-align: left;
      border: 2px solid;
      border-color: #999 #333 #333 #999;
}
*.carpe_slider_display_holder {
      background-color: #bbb;
      color: #333;
      width: 34px;
      margin: 0;
      float: left;
      padding: 0 2px 0 0;
      height: 20px;
      text-align: right;
      border: 1px solid;
      border-color: #ddd #999 #999 #ddd;
}
.carpe_slider_display {
      background-color: #bbb;
      color: #333;
      padding: 3px 1px 0 0;
      width: 30px;
      text-align: right;
      font-size: 11px;
      line-height: 10px;
      font-family: verdana, arial, helvetica, sans-serif;
      font-weight: bold;
      border: 0;
      cursor: default;
}

0
 
LVL 13

Author Comment

by:kawas
ID: 16866796
I should mention that i am using firefox (dont care about ie).

It still doesnt render properly.

Thanks for you help by the way
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16866817

looks like if you give that outside div a width it centers ok...

<div style="width:150px;margin-left:auto;margin-right:auto; border:1px solid red;">
      <div align="center" class="carpe_horizontal_slider_track"  style="border:1px solid red;">      
            <div class="carpe_slider_slit">&nbsp;</div>
            
            <div class="carpe_slider"
                              id="your_slider_id"
                              orientation="horizontal"
                              distance="100"
                              display="your_display_id"
                              style="left: 0px;">&nbsp;</div>
                              
            <div class="carpe_slider_display_holder" >
                  <input class="carpe_slider_display"
                              id="your_display_id"
                              name="your_var_name"
                              type="text"
                              from="0"
                              to="284"
                              valuecount="284"
                              value="50"
                              readonly="true" />
            </div>
            
      </div>
</div>
0
 
LVL 13

Author Comment

by:kawas
ID: 16866878
Cool, it is centered. Now the layout is wonkey. Everything is supposed to be on a single line (if that makes sense).
0
 
LVL 13

Author Comment

by:kawas
ID: 16866978
Sorry to be persistent, but using the following as a template, could you center it?
I cant using the style from above. SOrry for being so thick.
____________________________________________________________

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script
    language="JavaScript"
    src="http://carpe.ambiprospect.com/slider/scripts/slider.js" type="text/javascript" >
</script>
<link
    href="http://carpe.ambiprospect.com/slider/styles/default.css"
    rel="stylesheet"
    type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div class="carpe_horizontal_slider_track">
    <div class="carpe_slider_slit">&nbsp;</div>
    <div class="carpe_slider"
        id="your_slider_id"
        orientation="horizontal"
        distance="100"
        display="your_display_id"
        style="left: 0px;">&nbsp;</div>
</div>
              <div class="carpe_slider_display_holder" >
    <input class="carpe_slider_display"
        id="your_display_id"
        name="your_var_name"
        type="text"
        from="0"
        to="100"
        valuecount="101"
        value="0"
        typelock="off" /></div>
</body>
</html>
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16867004

this fixes the wonkieness:

<div style="width:200px;margin-left:auto;margin-right:auto;">

<div class="carpe_horizontal_slider_display_combo" >

     <div align="center" class="carpe_horizontal_slider_track" >     
          <div class="carpe_slider_slit">&nbsp;</div>
         
          <div class="carpe_slider"
                         id="your_slider_id"
                         orientation="horizontal"
                         distance="100"
                         display="your_display_id"
                         style="left: 0px;">&nbsp;</div>
 </div>                        
          <div class="carpe_slider_display_holder" >
               <input class="carpe_slider_display"
                         id="your_display_id"
                         name="your_var_name"
                         type="text"
                         from="0"
                         to="284"
                         valuecount="284"
                         value="50"
                         readonly="true" />
          </div>
         
     </div>
             
</div>
0
 
LVL 10

Accepted Solution

by:
0h4crying0utloud earned 350 total points
ID: 16867008


like this?

<div style="width:200px;margin-left:auto;margin-right:auto;">

<div class="carpe_horizontal_slider_track">
    <div class="carpe_slider_slit">&nbsp;</div>
    <div class="carpe_slider"
        id="your_slider_id"
        orientation="horizontal"
        distance="100"
        display="your_display_id"
        style="left: 0px;">&nbsp;</div>
</div>
            <div class="carpe_slider_display_holder" >
    <input class="carpe_slider_display"
        id="your_display_id"
        name="your_var_name"
        type="text"
        from="0"
        to="100"
        valuecount="101"
        value="0"
        typelock="off" /></div>

</div>
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16867010


That's it, I  quit!   hehe  :)  seems to work ok


0
 
LVL 13

Author Comment

by:kawas
ID: 16869990
Thanks!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question