jquery and css: hide a div - Why it's not working?

[flapane]

I'm trying to use jquery-cookie ( [github.com...] ) to deal with the recent EU cookie laws. Everything is working good, however I'd like to display different cookie "warning" messages according to different devices.

<div class="cookiepopup mobile_no">
 <p>Questo sito utilizza i cookie, per garantire una migliore esperienza di navigazione. Continuando, ne accetti l'utilizzo.<br /> 
 This website uses cookies to improve your user experience. By continuing to browse the site you are agreeing to our use of cookies.<br />
 <a href="/foo" target="_blank"><b>(Dettagli / Details)</b></a> <input type="submit" class="cookieclose" value="Accetto / Continue" /></p>
 </div>

 <div class="cookiepopup mobile_yes">
 <p>Questo sito utilizza i cookie. Continuando, ne accetti l'utilizzo. 
 This website uses cookies. By continuing to browse the site you are agreeing to our use of cookies.<br />
 <a href="/foo" target="_blank"><b>(Dettagli / Details)</b></a> <input type="submit" class="cookieclose" value="Accetto / Continue" /></p>
 </div>

In style.css

.mobile_yes{ display:none } <--- normal behaviour
.mobile_no{ display:none } <---- it goes under a specific css media query for smartphones

Speaking in general terms and without considering the css media queries, I can't hide any of the divs. Whatever I do, .mobile_no div is always showed.

/* COOKIE POPUP */
.cookiepopup {
display:none;
background: #eee; border-top:1px solid #ddd; color:#555; 
bottom: 0;
padding: 5px 2% 10px;
position: fixed;
width: 96%;
z-index: 10; 
font-size:0.8em; 
}

.cookiepopup p {
width:90%; margin:0 auto; max-width: 970px;
}

.mobile_no{ display:none }

JS file:

$(document).ready(function(){

 check_cookie_for_cookiepopup();

});/*ready*/

var cookiepopup_cookie_name = "cookiepopup" ;
var cookiepopup_duration = 60 ; //scadenza in giorni
var show_cookiepopup = '';

function check_cookie_for_cookiepopup()
{ 
 show_cookiepopup = $.cookie( cookiepopup_cookie_name ); 
 if (show_cookiepopup == 'noshow') {

 } else {
 setTimeout(function(){ cookiepopup_show(); },1000);
 }
}

function cookiepopup_show() {
 $('.cookiepopup').show();
 $('.cookiepopup').find('.cookieclose').unbind('click').click(function(){
 $('.cookiepopup').hide();
 show_cookiepopup = 'noshow';
 $.cookie(cookiepopup_cookie_name, show_cookiepopup, { expires: cookiepopup_duration, path: '/' });
 return false;
 });
}

function set_cookie ( cookie_name, cookie_value,
 lifespan_in_days, valid_domain )
{
 // http://www.thesitewizard.com/javascripts/cookies.shtml
 var domain_string = valid_domain ?
 ("; domain=" + valid_domain) : '' ; 
 document.cookie = cookie_name +
 "=" + encodeURIComponent( cookie_value ) +
 "; max-age=" + 60 * 60 *
 24 * lifespan_in_days +
 "; " ;

}

<rv link>

I'm sure I'm missing something. I wonder if it's something related to function cookiepopup_show().
Any help would be much appreciated.

[edited by: whoisgregg at 1:46 pm (utc) on Sep 16, 2013]
[edit reason] rv link, please see sticky mail :) [/edit]

[Fotiman]

1st time through, check_cookie_for_cookiepopup() will call
show_cookiepopup = $.cookie( cookiepopup_cookie_name );
in an attempt to read the cookie "cookiepopup" and put the value in show_cookiepopup.

Next, it will call this:
setTimeout(function(){ cookiepopup_show(); },1000);

Which in turn will call this:
$('.cookiepopup').show();

That's saying "get all elements with class cookiepopup and show them (set display to block)". This will result in an inline style that will take precedence over the styles defined in your CSS, and thus both .mobile_no and .mobile_yes blocks will be shown.

[flapane]

Thanks for your answer. It's just what I feared, cookiepopup_show() will have precedence over CSS.

Clearly, a !important in the CSS stylesheet fixed the issue, but I don't feel like it's the most "polite" way to deal with it. Do I have a better alternative?
Not that italian laws are currently punishing websites who don't follow the EU cookie law (99% of the websites), but it's better to be safe than sorry.
Thanks in advance

[JD_Toims]

If you're using a responsive design [or even if you're not] you should be able to detect the UA in the .js file also and then use that as a conditional to switch between mobile_yes and mobile_no showing. (I don't have time to code it all out, but I'm thinking along the lines of the following.)

var user_agent = // user-agent detection here
var user_agent_type = // run a check to determine mobile or non-mobile
var type;

if(user_agent_type=='non-mobile') { to_show=1; }
else { to_show=2; }

$('.cookiepopup:nth-of-type('+to_show+')').show();
$('.cookiepopup:nth-of-type('+to_show+')').find('.cookieclose').unbind('click').click(function(){
$('.cookiepopup:nth-of-type('+to_show+')').hide();

[Fotiman]

What if instead of having 2 .cookiepopup containers, you only had 1, and inside that were your 2 cookie messages, hidden according to media queries? For example:

<div class="cookiepopup">
 <div class="mobile_no">
  <p>Questo sito utilizza i cookie, per garantire una migliore esperienza di 
   navigazione. Continuando, ne accetti l'utilizzo.<br /> 
   This website uses cookies to improve your user experience. By continuing
   to browse the site you are agreeing to our use of cookies.<br />
   <a href="/foo" target="_blank"><b>(Dettagli / Details)</b></a> 
   <input type="submit" class="cookieclose" value="Accetto / Continue" />
  </p>
 </div>
 <div class="mobile_yes">
  <p>Questo sito utilizza i cookie. Continuando, ne accetti l'utilizzo. 
   This website uses cookies. By continuing to browse the site you are 
   agreeing to our use of cookies.<br />
   <a href="/foo" target="_blank"><b>(Dettagli / Details)</b></a> 
   <input type="submit" class="cookieclose" value="Accetto / Continue" />
  </p>
 </div> 
</div>

Then you show the container (cookiepopup), and whichever sub element is hidden will remain hidden.

[lucy24]

Clearly, a !important in the CSS stylesheet fixed the issue, but I don't feel like it's the most "polite" way to deal with it. Do I have a better alternative?

There's always an alternative to !important. You need to hunt down the rule that overrides your non-important style, and fine-tune it.

Simple example:
p.foobar {color: red;}
div.widget p {color: blue;}

If <p class = "foobar"> comes inside <div class = "widget">, it will be blue-- at least in some browsers-- or its color will depend on the order of rules in your CSS. If you say

div.widget p.foobar {color: red;}
or even
div[class] p.foobar {color: red;}

then it will always be red. The same applies to other nesting situations, such as styles within @media rules. Always set things up so the browser has no opportunity to make decisions or exercise its own judgement, because you may not agree with what the browser decides ;)

[Fotiman]

You need to hunt down the rule that overrides your non-important style

I think you missed the part of the conversation where this was the result of calling jQuery's hide method, which sets the style directly on the element. In other words, there's no "rule" that's overriding the style, it's the result of an inline style overriding the rules in a class.

[lucy24]

Whoops! Yup, inline overrides everything. But inline styles are themselves a last resort :)

[flapane]

Thanks for all your answers.
I eventually followed Fotiman's suggestion, and switched to a single .cookiepopup container. In this way it's easier to use media queries, and hide one of the two .mobile_foo messages.