Cookies & Smileys & Tabs

[Alanna 🥀🖤]

trinityblair-test.boards.net/

I would love to be able to add cookies to my toggle sidebar I have going on above but of course- I have no idea how. 

Also, the smiley's pop-up on the shoutbox is behind the navigation bar but even if I increase the z-index on it and lower the z-index on the navigation-bar, nothing... ideas?

Lastly, I am using a tabs script on this page. When you first load the page, ALL the tabs are loaded for some reason until you click on one and then it fixes itself. Why is this? I'm dumb.

Brian , Tumbleweed

[Tumbleweed]

May 5, 2017 14:48:46 GMT -8 @khristian said:

trinityblair-test.boards.net/

I would love to be able to add cookies to my toggle sidebar I have going on above but of course- I have no idea how. 

Also, the smiley's pop-up on the shoutbox is behind the navigation bar but even if I increase the z-index on it and lower the z-index on the navigation-bar, nothing... ideas?

Lastly, I am using a tabs script on this page. When you first load the page, ALL the tabs are loaded for some reason until you click on one and then it fixes itself. Why is this?

Brian , Tumbleweed

I can't help you with the cookies although I could probably go digging here on ProBoards and find some old sample coding that used cookies. But for your tab content showing, shouldn't all the divides but the one you want to display upon arriving to the page to be display:none; ?

[Alanna 🥀🖤]

May 5, 2017 22:16:27 GMT -8 Tumbleweed said:

May 5, 2017 14:48:46 GMT -8 @khristian said:

trinityblair-test.boards.net/

I would love to be able to add cookies to my toggle sidebar I have going on above but of course- I have no idea how. 

Also, the smiley's pop-up on the shoutbox is behind the navigation bar but even if I increase the z-index on it and lower the z-index on the navigation-bar, nothing... ideas?

Lastly, I am using a tabs script on this page. When you first load the page, ALL the tabs are loaded for some reason until you click on one and then it fixes itself. Why is this?

Brian , Tumbleweed

I can't help you with the cookies although I could probably go digging here on ProBoards and find some old sample coding that used cookies. But for your tab content showing, shouldn't all the divides but the one you want to display upon arriving to the page to be display:none; ?

Thank you.

[Alanna 🥀🖤]

Still need help on the cookies and the smileys!

[tules]

I coded a cookie to change the position of the cbox on my forum from hovering to static at the bottom using js cookie. You can see it in action here (click "toggle cbox" and the star in the menu). I coded two separate cookies, I think; one to move the cbox and one to hide the box that it would be contained in at the bottom. You only need one, so you could probably just chop the code in half. I don't really remember what goes where with it, but if you need help decipering it, lmk! The really annoying thing with coding cookies is that you have to go into your browser settings and clear them every time you make a change to the code, otherwise it'll just pile up a bunch of cookies that confuses your browser. All in all, 0/10, very annoying to use. Here's the code I used:

<script type="text/javascript" src="https://files.catbox.moe/php7xx.js"></script><!-- jscookie -->
<script>
$(document).ready(function() {
// replace the classes from the cookies    
$(".cbox").attr('class', $.cookie('class_cbox'));
$(".wrapper2").attr('class', $.cookie('class_wrapper2'));

// bind the click event
$("#togglecbox").click(function(){
$(".cbox").toggleClass("cbox2");
$(".wrapper2").toggleClass("wrapper3");

// replace the cookie values
$.cookie('class_cbox', $(".cbox").attr('class'), {path: '/'});
$.cookie('class_wrapper2', $(".wrapper2").attr('class'), {path: '/'});

});
$(".togglestuff").attr('class', $.cookie('class_togglestuff'));

// bind the click event
$(".togglebottom").click(function(){
$(".togglestuff").toggleClass("toggled");

// replace the cookie values
$.cookie('class_togglestuff', $(".togglestuff").attr('class'), {path: '/'});

});
});
</script>

[Alanna 🥀🖤]

Not sure if we are on the same page, all I am looking for is cookies so that when the page is refreshed, the browser remembers if the shoutbox was opened or closed(so I don't have to close it each time I load a new page)- I don't want to move the shoutbox anywhere from where I currently have it.

[tules]

It doesn't matter what you're using the cookie for, the coding is the same and all you need to do is change it so it matches your code, so I thought I would share the code that worked for me for you to modify. The rest was just an example that it worked and some tips for working with it, because I learned a lot from figuring it out and figured I could offer something from my experience. Without knowing what you're doing to show/hide your shoutbox, I don't really know what else to do but give you what I did. If you want to shoot me the code your using to toggle your cbox, I could probably put it together for you, or I could try to make an explanation of what my code does.

[Alanna 🥀🖤]

tules , I am terrible at scripts... so honestly I'm not sure what to do with the code you provided especially because I have no idea how cookies even work. This is all I'm using for the toggle side-bar:

<script>
       $(document).ready(function(){
           $("#hide").click(function(){
               $(".side_bar").hide();
               $('.side_bar_buttons').addClass('hidden');
               $('#show').show();
               $('#hide').hide();
           });
           $("#show").click(function(){
               $(".side_bar").show();
               $('.side_bar_buttons').removeClass('hidden');
               $('#show').hide();
               $('#hide').show();
           });
       });
</script>

[tules]

It's okay I feel it. Me too... me too...

I consolidated what you have a bit to make it easier. Try this:

<script type="text/javascript" src="https://files.catbox.moe/php7xx.js"></script><!-- jscookie -->
<script>
$(document).ready(function() {
// replace the classes from the cookies
$(".side_bar").attr('style', $.cookie('side-bar'));
$(".side_bar_buttons").attr('class', $.cookie('side-bar-buttons'));

// bind the click event
$("#hide").click(function(){
$(".side_bar").toggle();
$(".side_bar_buttons").toggleClass('hidden');

// replace the cookie values
$.cookie('side-bar', $(".side_bar").attr('style'), {path: '/'});
$.cookie('side-bar-buttons', $(".side_bar_buttons").attr('class'), {path: '/'});
});
});
</script>

[Alanna 🥀🖤]

Before I try this, I thought it might make a difference that I also have the footer and wrapper changing depending on if the shoutbox is hidden or shown. I removed them in the preview code because I didn't think it would relate- but now I feel like it would and would also need to be included? Here is the full script I wrote for the toggle side bar- would the #wrapper and #footer also need to be included within the cookies for it to work properly?

<script>
       $(document).ready(function(){
           $("#hide").click(function(){
               $(".side_bar").hide();
               $('#wrapper').addClass('side_bar_hidden');
               $('#footer').addClass('side_bar_hidden_footer');
               $('.side_bar_buttons').addClass('hidden');
               $('#show').show();
               $('#hide').hide();
           });
           $("#show").click(function(){
               $(".side_bar").show();
               $('#wrapper').removeClass('side_bar_hidden');
               $('#footer').removeClass('side_bar_hidden_footer');
               $('.side_bar_buttons').removeClass('hidden');
               $('#show').hide();
               $('#hide').show();
           });
       });
   </script>

[tules]

I haven't tested this, but you can see if this works. Javascript cookies can only have one value each, which is why it's better to change all the add/removes into toggles. There are probably better ways to do this (JSON I think?) but that's beyond me.

<script type="text/javascript" src="https://files.catbox.moe/php7xx.js"></script><!-- jscookie -->
<script>
$(document).ready(function() {

// replace the classes from the cookies
$(".side_bar").attr('style', $.cookie('side-bar'));
$(".side_bar_buttons").attr('class', $.cookie('side-bar-buttons'));
$("#wrapper").attr('class', $.cookie('side-bar-hidden'));
$("footer").attr('class',$.cookie('side-bar-hidden-footer'));

// bind the click event
$("#hide").click(function(){
$(".side_bar").toggle();
$("#wrapper").toggleClass('side_bar_hidden');
$("#footer").toggleClass('side_bar_hidden_footer');
$(".side_bar_buttons").toggleClass('hidden');

// replace the cookie values
$.cookie('side-bar', $(".side_bar").attr('style'), {path: '/'});
$.cookie('side-bar-buttons', $(".side_bar_buttons").attr('class'), {path: '/'});
$.cookie('side-bar-hidden', $("#wrapper").attr('class'), {path: '/'});
$.cookie('side-bar-hidden-footer', $("#footer").attr('class'), {path: '/'});
});
});
</script>

[Alanna 🥀🖤]

No cigar. I have it on the forum though so you can view it.

[tules]

$("footer").attr('class',$.cookie('side-bar-hidden-footer'));

i missed a # in front of footer.

it should be

$("#footer").attr('class',$.cookie('side-bar-hidden-footer'));

[Alanna 🥀🖤]

May 6, 2017 22:13:27 GMT -8 tules said:

$("footer").attr('class',$.cookie('side-bar-hidden-footer'));

i missed a # in front of footer.

it should be

$("#footer").attr('class',$.cookie('side-bar-hidden-footer'));

Huzzah! Thank you!

You seem to have a good understanding of this crap. XD Would it be too much trouble to PM me in explaining it a bit?

[tules]

I'll try my best LOL