MyBB Community Forums

let's take an example of a box. You want it to remain open by default but if the user closes it, it should remain close after refreshing.

Note: make sure you have included jQuery and jQuery cookies in your page
And if it's mybb, make sure you have this code before any jQuery code

jQuery.noConflict();

^this prevents the jQuery conflict with prototype

Tip: never use the jquery shorthand "$" in your jQuery codes. Always use 'jQuery'

---

In this example, we will have a box and two buttons open/close
all the three explain themselves fully so i don't think i need to.

Markup : a simple box, an opened sate and a closed state button

<a href="#" id="button_open">Open</a>
<a href="#" id="button_close">Close</a>
<div id="box">this is a box. </div>

jQuery('#button_open').hide(); //initially we keep the open button hidden

// this code defines what happens when we click the close button

jQuery('#button_close').click(function () {
      jQuery(this).hide(); //this hides the close button as the box is now closed
      jQuery('#box').slideUp('fast'); //hides the box
      jQuery('#button_open').show(); //shows the open button
      jQuery.cookie("openclose","closed", {expires: 365}); // sets cookie
      return false;
    });

// this code defines what happens when we click the open button

jQuery("#button_open").click(function () {
      jQuery(this).hide(); //hides the open button as the box is now open
      jQuery('#box').slideDown('fast'); //shows the box
      jQuery('#button_close').show(); //shows the close button
      jQuery.cookie("openclose","open", {expires: 365}); //sets cookie
      return false;
    });

//the code below checks if the cookie named 'openclose' has the value 'closed'. If yes, it hides the close button + the box and shows the open button.

    if(jQuery.cookie("openclose") == "closed") {
        jQuery("#button_close").hide();
        jQuery("#button_open").show();
        jQuery('#box').hide();
    };

A working example. - http://jsfiddle.net/hKe4p/
Close the box and then hit 'run' again.

Doesn't really need all that code and markup imo:

<a href="#" id="button">Open</a>
<div id="box">this is a box. </div>

jQuery.noConflict();
if(jQuery.cookie("openclose") !== "closed") {
   jQuery('#button').text("Close");
} else {
   jQuery('#button').text("Open");
   jQuery('#box').hide();
}  jQuery('#button').click(function() {
if(jQuery('#button').text() == "Open") {
   jQuery('#button').text("Close");
   jQuery('#box').slideDown('fast');
   jQuery.cookie("openclose","open", {expires: 365});
   return false;
} else {
   jQuery('#button').text("Open");
   jQuery('#box').slideUp('fast');
   jQuery.cookie("openclose","closed", {expires: 365});
   return false;
}});

Does the same thing.

(Blame jsfiddle for the weird ordering of stuff, it kept trying to throw tabs and spacing in everywhere, so I gave up fixing it)

(2012-06-07, 02:16 PM)pixelmonkey Wrote: [ -> ]Tip: never use the jquery shorthand "$" in your jQuery codes. Always use 'jQuery'

Just calling you out on this part. Not true. I do the same on every jQuery tutorial it seems. Use the following code instead so you can use $ as it was supposed to be used:

jQuery.noConflict();

jQuery(document).ready(function($) {
// Now use $ as you would usually with jQuery without mucking about. Far easier
});

Other than that, nice guide. I've only had a quick scan but the above leapt out at me

---

Also, after having had another look. .click()? Really? In this day and age, make use of .on('click') (As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers):

$("#button_open").on('click', function(event) {
    event.preventDefault();
    $(this).hide(); //hides the open button as the box is now open
    $('#box').slideDown('fast'); //shows the box
    $('#button_close').show(); //shows the close button
    $.cookie("openclose","open", {expires: 365}); //sets cookie
});

Much neater and easier to understand IMO.

Yeah, not really required to have jQuery instead of $, like euantor said.

(2012-06-07, 03:24 PM)euantor Wrote: [ -> ]Also, after having had another look. .click()? Really? In this day and age, make use of .on('click') (As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers)

not really necessary .click() is not obsolete and not a bit harder to understand. it's just coder's opinion as in php echo and print

I guess, though I prefer to use .on seeing as it works when elements have been added after the DOM was rendered (like when added via an AJAX request - just like the .live() method of old did).

i like to use this jquery to add hidden button for my advertisement in header .

would you please help me to add correct code for my adv. this is my adv code :

<div id="box">
<tr>
<td><a href="http://www.r30.ir/thread-1122.html" target="_blank"><img src="images/pronavy/tabligh/riazi.gif" style="width: 468px; height: 60px" > </a> </td>
<td> <a href="http://www.emdadrccar.ir" target="_blank"><img src="images/pronavy/tabligh/shakeri.gif" style="width: 468px; height: 60px" ></a> </td>
</tr>
<tr>
<td><a href="http://www.motrolflymideast.com/fpv.html" target="_blank"><img src="images/pronavy/tabligh/motofly.gif" style="width: 468px; height: 60px" ></a></td>
<td><a href="http://grcg.ir" target="_blank"><img src="images/pronavy/tabligh/grcg.gif" style="width: 468px; height: 60px" ></a></td>
</tr></div>

(2012-06-07, 03:24 PM)Eric J. Wrote: [ -> ]Doesn't really need all that code and markup imo:

<a href="#" id="button">Open</a>
<div id="box">this is a box. </div>

jQuery.noConflict();
if(jQuery.cookie("openclose") !== "closed") {
   jQuery('#button').text("Close");
} else {
   jQuery('#button').text("Open");
   jQuery('#box').hide();
}  jQuery('#button').click(function() {
if(jQuery('#button').text() == "Open") {
   jQuery('#button').text("Close");
   jQuery('#box').slideDown('fast');
   jQuery.cookie("openclose","open", {expires: 365});
   return false;
} else {
   jQuery('#button').text("Open");
   jQuery('#box').slideUp('fast');
   jQuery.cookie("openclose","closed", {expires: 365});
   return false;
}});

Does the same thing.

(Blame jsfiddle for the weird ordering of stuff, it kept trying to throw tabs and spacing in everywhere, so I gave up fixing it)

Your code does it good. But it uses text. While mine uses images
But i'm pretty sure we can change your code to use images

(2012-07-16, 10:47 AM)heavaz60 Wrote: [ -> ]i like to use this jquery to add hidden button for my advertisement in header .

would you please help me to add correct code for my adv. this is my adv code :

<div id="box">
<tr>
<td><a href="http://www.r30.ir/thread-1122.html" target="_blank"><img src="images/pronavy/tabligh/riazi.gif" style="width: 468px; height: 60px" > </a> </td>
<td> <a href="http://www.emdadrccar.ir" target="_blank"><img src="images/pronavy/tabligh/shakeri.gif" style="width: 468px; height: 60px" ></a> </td>
</tr>
<tr>
<td><a href="http://www.motrolflymideast.com/fpv.html" target="_blank"><img src="images/pronavy/tabligh/motofly.gif" style="width: 468px; height: 60px" ></a></td>
<td><a href="http://grcg.ir" target="_blank"><img src="images/pronavy/tabligh/grcg.gif" style="width: 468px; height: 60px" ></a></td>
</tr></div>

could some one help me
i use both of code but somethings was wrong .

you want a button to hide the whole box or individual ads?