Solved

dhtml slider

Posted on 2006-06-08
15
1,012 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
  • 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now