Solved

dhtml slider

Posted on 2006-06-08
15
1,038 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

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 …
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses

635 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