1

I've got a jQuery function that usually works on a Volusion page and for some reason now it's not working. The location.pathname.indexOf targets all pages that have that URL (the site uses GET variables to do searches on the SearchResults.asp page). I've changed the quotations from singles to doubles and I can't seem to figure out anything else to do test it. Does anyone see any syntax errors in this code? There shouldn't be any conflicts since it's only running jQuery (and nothing else like MooTools). I tried to also do an alert of 'Test' after document.ready but nothing happened on the screen. Thanks!

<script>
$(document).ready(function() {  
    if (location.pathname.indexOf('/SearchResults.asp') != -1 ) {
        $('div#content_area').css({'display','none !important'});         
    }
});
</script>
Improve this question
3
  • what if you try $(document).on('ready',function(){...});? Commented Apr 10, 2013 at 20:29
  • Are you getting any errors in your console? Have you set a breakpoint before the inside the ready function and/or inside the if block? If so, have the breakpoints been hit? Commented Apr 10, 2013 at 20:31
  • @Sharlike That will only work if the document isn't already ready and is recommended against in the api documentation. Commented Apr 10, 2013 at 20:49

2 Answers 2

Reset to default
8

You have a syntax error.

This:

$('div#content_area').css({'display', 'none !important'});

Should be this:

$('div#content_area').css({'display': 'none !important'});
//                                  ^
//                                  |
//                                  | look here

When using .css() you can use 2 variations.

You can either use it to update a single property which uses the , to separate the name of the CSS property and the value, similar to this:

$('div#content_area').css('display', 'none !important');

Or you can use the new variation, added in jQuery 1.9 which allows you specify multiple styles at once allowing you to specify property-value pairs, similar to this:

$('div#content_area').css({
    'display': 'none !important',
    'border' : 'solid 1px red'
});

css() and !important

There seems to be an issue when trying to apply a style using .css() and !important. there is a bug which was raised a long time ago: The Ticket #2066 which was closed and an alternative was shown in that ticked.

It mentions that as an alternative you can set the cssText similar to this when using the multi-style variation:

$('div#content_area').css({
    'cssText': 'display: none !important'
});

or this when using the single style variation:

$('div#content_area').css('cssText', 'display: none !important');

Though, as the ticked mentions, a word of caution:

You have to be careful setting cssText since it sets/clears everything in the css for that element.

Another alternative, which most likely is the safest given the side-effects of cssText, is to create a separate CSS class and apply that, similar to this:

.alwaysHide{
    display: none !important;
}

$('div#content_area').addClass('alwaysHide');

Hope this helps.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Dude, you've got some hawk eyes there!
@ShazboticusSShazbot No it wouldn't, because it's an object.
Sorry, deleted my comment... posting as an answer because there is some confusion
@MxmastaMills: It is the !important part which seems to throw it off. Have a look at this fiddle using your CSS. Without the !important it works but when you add it , it doesn't.
Perfect, that's a great answer but more importantly a great lesson in this jQuery's .css() function. I appreciate you digging around and uncovering these little quirks. This will definitely help me immensely moving forward!
|
4

You are trying to use 2 syntax styles.

Either, you need to do this:

<script>
    $(document).ready(function() {  
        if (location.pathname.indexOf('/SearchResults.asp') != -1 ) {
            $('div#content_area').css('display','none !important');         
        }
    });
    </script>

or you need to use this:

<script>
    $(document).ready(function() {  
        if (location.pathname.indexOf('/SearchResults.asp') != -1 ) {
            $('div#content_area').css({'display' : 'none !important'});         
        }
    });
    </script>
Improve this answer

7 Comments

Generally, I wouldn't use the object {} in this case because you're only setting 1 css style parameter.
Interesting suggestion... I ALWAYS use the object, particularly so that I don't run into the issue the OP is facing (different approaches for single vs multi assignments)
@Steve Let alone dealing with versioning changes when you add those brackets in the future if you will need to change multiple properties.
@Steve is can be quite useful if you are used to or like to use chaining methodology (D3.js is an example library that really pushes chaining). It won't be as pretty here in the comments section, but it is quite legible in text editors: $(".audioContainer").css("position","absolute").css("left", "200px").css("background-color", "#ff0").css("z-index", "1000"); //edited in: I can't do hard returns to break the chain structure in the comments section
Personally, I use "","" for when I want to only specify 1 css style attribute and I {:} for when I do multiple.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.