jQuery Hide

[Omar G.]

So I have the following code:

<div class="ougc_annbars_{$bar['style']}" id="ougc_annbars_{$key}">
	<div class="float_right"><img src="{$theme['imgdir']}/dismiss_notice.png" alt="{$lang->dismiss_notice}" title="{$lang->dismiss_notice}" /></div>
	<div>{$bar['content']}</div>
</div><br/>

I want it so that everytime an user clicks the image the complete code to disappear (<br /> may not). I have the following in footer:

<script type="text/javascript">
	$('.ougc_annbars_dismiss').click(function () {
       $(this).remove();
	});
</script>

(ougc_annbars_dismiss class needs to be added to the first div)

Alright it works, but how do I keep it closed after a refresh?

I would like to use jQuery for this instead of the in-build expander code.

[Johnny S]

Try with this:

 
$("div[class*='ougc_annbars_'] .float_right img").click(function () {
        //Hide oguc_annbars
        $(this).parents("div[class*='ougc_annbars_']").addClass("ougc_annbars_dismiss");
        //Set cookie
        $.cookie('oguc_annbars', "hidden", { expires: 365});
});

	 
if ($.cookie("oguc_annbars") == "hidden") {
   $("div[class*='ougc_annbars_']").addClass("ougc_annbars_dismiss");
}

Regarding cookie you'll need jquery cookie plugin in order to read / write / set cookies.

[Omar G.]

Does your code takes into account that there may be multiple instances of the code? Hence the id in the first div. When the user clicks the image the whole div should disappear but no others (:

[effone]

Pass the identifier through parameter and catch in function.

Code will be something like:

<div class="ougc_annbars_{$bar['style']}" id="ougc_annbars_{$key}" onClick="dismissFunction({$key}}); return false;">
    <div class="float_right"><img src="{$theme['imgdir']}/dismiss_notice.png" alt="{$lang->dismiss_notice}" title="{$lang->dismiss_notice}" /></div>
    <div>{$bar['content']}</div>
</div><br/>

jQ Function:

<script type="text/javascript">
function dismissFunction(n){
       $('#ougc_annbars_'+n).remove();
       $.cookie('oguc_annbars_'+n, "hidden", { expires: 365});
});
</script>

Combine the trick with Johnny's code for loading state with cookies.

[Omar G.]

Right, I got this HTML:

<div class="ougc_annbars_{$bar['style']}" id="ougc_annbars_{$key}">
	<div class="float_right"><img src="{$theme['imgdir']}/dismiss_notice.png" alt="{$lang->dismiss_notice}" title="{$lang->dismiss_notice}" onclick="dismissFunction('{$key}'); return false;" /></div>
	<div>{$bar['content']}</div>
</div><br/>

And this is the script:

<script type="text/javascript">
function dismissFunction(aid){
       $('#ougc_annbars_' + aid).remove();
  Cookie.set('oguc_annbars_' + aid, 'hidden');
  return true;
};
if(Cookie.get('oguc_annbars_1') == 'hidden') {
   $('#ougc_annbars_' + aid).remove();
}
</script>

Hiding the div has never been an issue, it is the cookie what doesn't want to work. Now, reading the official page it seems the cookie plugin is not even widely supported..

The plugin should be loaded seems it is used by MyBB 1.8..

[Omar G.]

Never mind, got it working. Template:

<div class="ougc_annbars_{$bar['style']}" id="ougc_annbars_{$key}">
	<div class="float_right"><img src="{$theme['imgdir']}/dismiss_notice.png" alt="{$lang->dismiss_notice}" title="{$lang->dismiss_notice}" onclick="dismissFunction('{$key}'); return false;" /></div>
	<div>{$bar['content']}</div>
</div><br id="ougc_annbars_{$key}_br"/>

Footer script:

<script type="text/javascript">
function dismissFunction(aid){
		 $('#ougc_annbars_' + aid).toggle('fast');
       $('#ougc_annbars_' + aid + '_br').remove();
  Cookie.unset('oguc_annbars_' + aid);
  Cookie.unset('oguc_annbars_' + aid + '_br');
  Cookie.set('oguc_annbars_' + aid, true);
  Cookie.set('oguc_annbars_' + aid + '_br', true);
  return true;
};
if(Cookie.get('oguc_annbars_1') || Cookie.get('oguc_annbars_1_br')) {
   $('#ougc_annbars_1').hide();
   $('#ougc_annbars_1_br').hide();
}
</script>

Thanks!

[effone]

Doesn't matter, but I guess you should use .hide(); everywhere instead of .remove() so that it can be revoked any point of time rather than reconstruct; if required.

[Eric]

Here's another potential one:

$(document).ready(function() {
    $("div[class*='ougc_annbars_'] img").on('click', function() {
        $(this).parent().parent().slideUp().next().hide();
        var id = $(this).attr('id');
        Cookie.set(id, true);
    });
});

[Omar G.]

Anyway to minify the following:

if(Cookie.get('oguc_annbars_1') || Cookie.get('oguc_annbars_1_br')) {
  $('#ougc_annbars_1').hide();
  $('#ougc_annbars_1_br').hide();
}

I can do that with PHP but the should be some:

var cookies = Cookie.get();

foreach (cookies as cookie)
{
  if(my_srtpos(cookie, 'oguc_annbars_') !== false)
  {
    $(cookie).hide();
  }
  
}

Or else xD

[Eric]

if(Cookie.get('oguc_annbars_1') || Cookie.get('oguc_annbars_1_br')) {
  $('#ougc_annbars_1, #ougc_annbars_1_br').hide();
}

That's about as short as it will go.

Nvm, I see you mean checking cookies.