SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Doctype + Ajax + FF = ...

    Hi - the best way to describe this is if you open the link below in both FF and IE/Opera
    If I'm honest not much of a web coder (my expertise lies in databases) although I'm always keen to learn.

    I commissioned a site which seemed to work fine but since I added a DOCTYPE (i needed to do this for some superficial changes made) one of the javascript elements of the page stopped working but only in Firefox not IE or Opera.

    You can see the problem for yourself if you visit
    http://camchooser.com/index.php?module=search

    If you open it in IE/Opera you can see 3 "sliders" e.g. "Price" that you can drag to set the max and min values.

    If you look at this in Firefox you can't see the sliders moving even though it has the correct effect.

    Looking at the FF error console it seems to be related to a warning that says:
    Error in parsing value for property 'padding-left'. Declaration dropped.
    The associated code seems to be:
    HTML Code:
    <div style="padding-left: 0pt;" id="left_slider_stripe1" class="left_slider_stripe"> <img id="handle_left1" class="handle_left" src="images/sliderhandle-left.gif" onmouseover="set_slider(slider1, 'handle_left1');"> </div>
    Any advice on what I might do or whre I should look would be gratefully received!!
    Last edited by pmjoyce; Jan 7, 2007 at 11:40. Reason: misspelling

  2. #2
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In function slider2.js should be somewhere +'px' to work with doctype, I dont see it there.

  3. #3
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Mirek - as I mentioned this is not my area of expertise - any further guidance would be really helpful as I'm not sure what I should do here!

    In other words where should i put the +'px'?

    Cheers!
    Last edited by pmjoyce; Jan 7, 2007 at 12:58. Reason: clarification

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have a DOCTYPE declaration, then anytime you use javascript to style an html element, e.g. to set its position, FF requires that you specify the units of measurement, e.g. "300px". Note that the value is a string and not a number.

    In your code, you have statements like this:
    Code:
    pLeft = Math.round((value - minValue)/(maxValue - minValue) * sliderWidth);
    document.getElementById(leftHandlePName).style.paddingLeft = pLeft;
    The second line sets the paddingLeft to a numeric quantity calculated in the first line--but no unit of measurement is specified. FF does not allow that, while IE defaults to "px". The solution is to add a string indicating the unit of measurement to the numeric quantitiy, e.g.:
    Code:
    document.getElementById(leftHandlePName).style.paddingLeft = pLeft + "px";
    When you add a string to a numeric quantity, js automatically converts the result to a string, which then can be legally assigned to a style property.

    You have to go through your code and find all the lines where a style is set and the style requires a unit of measurement.
    Last edited by 7stud; Jan 7, 2007 at 18:27.

  5. #5
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Much obliged - I will do this today and let you know how it goes.

  6. #6
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed!

    This worked like a charm - many thanks to you both for helping me arrive at the answer, it greatly appreciated!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •