Solved

dhtml slider

Posted on 2006-06-08
15
1,028 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
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!

 
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

Independent Software Vendors: 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

Suggested Solutions

Title # Comments Views Activity
How to escape unsafe HTML tags 4 36
Compute age Html 2 25
Echo'd values in dropdowns 6 29
Building JSON/JQuery Results Display 11 25
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 …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

749 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