homepage Welcome to WebmasterWorld Guest from 23.20.28.193
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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




msg:4609828
 10:41 pm on Sep 14, 2013 (gmt 0)

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




msg:4610117
 4:49 pm on Sep 16, 2013 (gmt 0)

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




msg:4610172
 8:30 pm on Sep 16, 2013 (gmt 0)

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




msg:4610173
 8:56 pm on Sep 16, 2013 (gmt 0)

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




msg:4610176
 9:02 pm on Sep 16, 2013 (gmt 0)

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




msg:4610184
 9:31 pm on Sep 16, 2013 (gmt 0)

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




msg:4610195
 10:51 pm on Sep 16, 2013 (gmt 0)


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




msg:4610202
 11:19 pm on Sep 16, 2013 (gmt 0)

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

flapane




msg:4610271
 8:42 am on Sep 17, 2013 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved