0

For some odd reason the part where objects are shown and hidden in my script doesn't seem to be working. I'm not sure if its the fact firefox doesn't like that or whether its the function-based code I have (to save duplicating lines of code)?

There is a working example here and the javascript is here

** Here is the jquery **

$(document).ready(function(){

totUpPrices();
checkBedType();
checkHeadboardOption();

$('.bedtype_price').click(function()
{
    checkBedType(); 
});

$('.headboard_option').click(function()
{
    checkHeadboardOption();
});

$('#bed-floater').scrollFollow({ offset:10 });
$('.texture').click(function()
{

    $('.texture').removeClass("checked");
    $('.texture').children("input").attr("checked","");

    $(this).addClass("checked");
    $(this).children("input").attr("checked","checked");

});

$('.pricechanger_auto').change(function()
{
    totUpPrices();
});

$('.bed-width-single').change(function()
{
    if($(this).val()=="2' 6\"" || $(this).val()=="3'")
    {
        $('.pocketmatic-mattress').attr("disabled","");
    }
    else
    {
        $('.pocketmatic-mattress').attr("disabled","disabled");
        if($('.pocketmatic-mattress').parent("select").val()=="Pocketmatic")
        {
            $('.pocketmatic-mattress').parent("select").children("option[value='']").attr("selected","selected");
        }
    }
});

$('.bed-width-twin').change(function()
{
    if($(this).val()=="4' 6\"" || $(this).val()=="6'")
    {
        $('.pocketmatic-mattress').attr("disabled","");
    }
    else
    {
        $('.pocketmatic-mattress').attr("disabled","disabled");
        if($('.pocketmatic-mattress').parent("select").val()=="Pocketmatic")
        {
            $('.pocketmatic-mattress').parent("select").children("option[value='']").attr("selected","selected");
        }
    }
});

function totUpPrices()
{

    var totalprice = 0;

    // Check Type of bed prices
    var objs = $('.bedtype_price');
    $.each(objs, function(index, value) {

        if($(value).attr("checked"))
        {
            totalprice = totalprice + parseInt($(value).attr("cost"));
        }

    });

    // Check Delivery Options
    var objs = $('.deliveryoptions_price');
    $.each(objs, function(index, value) {

        if($(value).attr("checked"))
        {
            totalprice = totalprice + parseInt($(value).attr("cost"));
        }

    });

    // Check Dropdown Prices
    var objs = $('.select_price');
    $.each(objs, function(index, value) {

        newvalue = $(value).attr("value");
        $.each($(value).children("option"), function(i, l){
            if($(this).attr("value")==newvalue)
            {
                totalprice = totalprice + parseInt($(this).attr("cost"));
            }

        });

    });
    $('#totalincvat').text(totalprice);
}

function checkBedType()
{
    var objs = $('.bedtype_price');
    var checkedType = '';
    $.each(objs, function(index, value) {

        if($(value).attr("checked"))
        {
            checkedType = $(value).val();
        }

    });
    if(checkedType == "Single Bed")
    {
        $('.show_with_single').show();
        $('.show_with_twin').hide();
        $('.changeOnTwin').text("Would you like a headboard?");
    }
    else
    {
        $('.show_with_twin').show();
        $('.show_with_single').hide();
        $('.changeOnTwin').text("Would you like headboards?");
    }
}

function checkHeadboardOption()
{
    var objs = $('.headboard_option');
    var checkedType = '';
    $.each(objs, function(index, value) {

        if($(value).attr("checked"))
        {
            checkedType = $(value).val();
        }

    });
    if(checkedType == "Yes")
    {
        $('.headboard-options').show();
    }
    else
    {
        $('.headboard-options').hide();
    }
}

});

All help appreciated

Marek Grzenkowicz
  • 17,024
  • 9
  • 81
  • 111
tarnfeld
  • 25,992
  • 41
  • 111
  • 146

3 Answers3

2

Your HTML does not validate. See here,

http://validator.w3.org/check?uri=http%3A%2F%2Fbed-adjustable.co.uk%2Fbuild-a-bed%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

The very first line of your html is already invalid.

Sorry your first line is ok, I didnt know that was HTML5, though it is pretty early to do HTML5.

Rosdi Kasim
  • 24,267
  • 23
  • 130
  • 154
  • **VERY** good point and good thing to check. @tarnfeld: You can change your `cost` attribute to `data-cost` and make it valid HTML5. (Using `cost` as you are now is invalid, but mostly harmless.) What *isn't* harmless is that the validator is reporting several attributes with missing close-quotes and such, that almost certainly plays into the problem. – T.J. Crowder Apr 15 '10 at 09:48
  • Changed to data-cost and will go through and check all validator points – tarnfeld Apr 15 '10 at 09:53
  • @tarnfeld: Once you've cleaned up the ones flagged by the HTML5 validator, I find it useful to revalidate telling it to override the doctype and using HTML 4.01 transitional instead, since the HTML5 validator is still "experimental" and unfortunately does miss things, although it's a *lot* better than it was. – T.J. Crowder Apr 15 '10 at 09:57
  • Yeah like http://validator.w3.org/check?uri=http%3A%2F%2Fbed-adjustable.co.uk%2Fbuild-a-bed%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 ok now wtf, these things left aren't even wrong... in the code it doesnt look like that – tarnfeld Apr 15 '10 at 09:58
  • I also just tried setting it to 4.01 doctype and that didn't help the situation in FF either – tarnfeld Apr 15 '10 at 10:02
  • @tarnfeld then the validator is probably wrong, btw I still think it is too early to work with html5. Why not xhtml strict? – Rosdi Kasim Apr 15 '10 at 10:03
  • @Rosdi: It's not too early to work with HTML5, lots of us do ("us" including, amongst other people, Google - http://www.google.com). You do have to remember that a lot of browsers will treat it like HTML 5.01 transitional for now, but other than that, go for it. – T.J. Crowder Apr 15 '10 at 10:11
  • Well I just used the tidy function on the validator and it now vailidates, just tabbing out my code so its easy to read then ill try it again, it now passes inspection with html5 – tarnfeld Apr 15 '10 at 10:12
  • @tarnfeld: Yes, as I said, the HTML5 validator is experimental and has issues. The HTML 4.01 transitional validator reports that error differently, saying you can't have a `p` inside a `label`, which is indeed true. `label` can only contain phrasing content, not flow content. More here: http://www.w3.org/TR/html5/index.html#elements-1 – T.J. Crowder Apr 15 '10 at 10:14
  • ok, well w.e the tidy thing did its now passing as valid html5 and looks ok :) – tarnfeld Apr 15 '10 at 10:15
  • With a few issues, but im about to test FF – tarnfeld Apr 15 '10 at 10:15
  • @tarnfeld: Result! (Er, it working, I mean; not you feeling like an idiot.) – T.J. Crowder Apr 15 '10 at 10:21
  • @TJ haha yeah :) But the way it was built, badly i admit, the css has gone a little weird because i css'd nested

    's inside but other than that which can easily be fixed, its cooool

    – tarnfeld Apr 15 '10 at 10:26
1

I didn't follow your links (see my comment on your question), but fundamentally, Firefox has no issue with jQuery's show and hide or setting display: none in CSS, so it is a code problem.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • What gets me, Safari 3 & 4 and IE 6 through 8 all work? :S Even opera! – tarnfeld Apr 15 '10 at 09:37
  • @tarnfeld: That's certainly unusual. :-) Have you tried walking through the code with Firebug (http://getfirebug.com/) to find out where it's going wrong? – T.J. Crowder Apr 15 '10 at 09:39
  • Firebug returns nothing, plus I'm not really a firefox user - it's just for cross browser. Nothing against FF but it seems to be getting worse :/ – tarnfeld Apr 15 '10 at 09:40
  • @tarnfeld: (I'm with you on FF getting worse lately.) It's probably completely off-topic, but I don't think the selector `option[value='']` is correct (unless you're *really* testing for the string `''`, but I'm guessing you're testing for an empty value). See the selector syntax (http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#attribute-representation), but there are no quotes on the value. Just `option[value=]` should be correct. Again, may be completely unrelated. – T.J. Crowder Apr 15 '10 at 09:44
  • @tarnfled: But even not as a FF user, if you hae Firebug, you can put breakpoints in and see what's happening. I'm not an IE user, but I still delve into the IE debuggers when I have an IE-specific problem. :-) – T.J. Crowder Apr 15 '10 at 09:46
  • @tarnfeld, If you are not using firefox/firebug to debug/validate your html/css/jquery, they why are you doing web coding at all? – Rosdi Kasim Apr 15 '10 at 09:46
  • @Rosdi: He said he is using Firebug, just apparently not walking through the code with it. Not that it probably matters, though, I wouldn't be at all surprised if fixing the validation errors fixed the problem. – T.J. Crowder Apr 15 '10 at 09:49
  • Well its now fixed, well the thing that were broken, the 7 errors showing up aren't even there 108:

    First Mattress

    It's telling me its this

    – tarnfeld Apr 15 '10 at 10:00
0

Could start with validating your XHTML, http://validator.w3.org/check?uri=http://bed-adjustable.co.uk/build-a-bed/&charset=(detect+automatically)&doctype=Inline&group=0

Peeter
  • 9,282
  • 5
  • 36
  • 53