views:

72

answers:

3

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

+1  A: 

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
tarnfeld
@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
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
@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
@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
@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
@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
Well its now fixed, well the thing that were broken, the 7 errors showing up aren't even there108: <p class="bottom">First Mattress</p>It's telling me its this<p class="bottom>First Mattress</p>
tarnfeld
@Rosdi I use safari debbugging console and profiler FTW
tarnfeld
+2  A: 

Your HTML does not validate. See here,

http://validator.w3.org/check?uri=http%3A%2F%2Fbed-adjustable.co.uk%2Fbuild-a-bed%2F&amp;charset=%28detect+automatically%29&amp;doctype=Inline&amp;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
**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
Changed to data-cost and will go through and check all validator points
tarnfeld
@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
tarnfeld
I also just tried setting it to 4.01 doctype and that didn't help the situation in FF either
tarnfeld
@tarnfeld then the validator is probably wrong, btw I still think it is too early to work with html5. Why not xhtml strict?
Rosdi
data-cost is html5
tarnfeld
@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
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
@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
ok, well w.e the tidy thing did its now passing as valid html5 and looks ok :)
tarnfeld
With a few issues, but im about to test FF
tarnfeld
Well what do you know, BOOM :) Works!HAHAHAHAHAI feel like an idiot...
tarnfeld
@tarnfeld: Result! (Er, it working, I mean; not you feeling like an idiot.)
T.J. Crowder
@TJ haha yeah :) But the way it was built, badly i admit, the css has gone a little weird because i css'd nested <p>'s inside <labels> but other than that which can easily be fixed, its cooool
tarnfeld
So it is a typo error then.. lucky we have validator!
Rosdi
A: 

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

Peeter
-1 How is this different from Rosdi's answer from much earlier? Also, he's using HTML5, not XHTML.
T.J. Crowder
Simply didn't notice his reply.
Peeter