Disappearing div using JQuery - how do I stop it from reloading next time a page is opened


Tags: php,jquery,html,css,wordpress

Problem :

I've got a div that disappears using jquery+css. It works beautifully, but I am running into a problem. How do I get that div to not reload the next time a user opens a page on same wordpress site. Because the div exists in header.php, everytime a new page is called so is the div, even if the user dismissed it before.

Is there a way to make sure that the banner is only loaded once per visit using the existing infrastructure I've got going? I feel like there must be some way to do this, especially since wordpress is run on php, but I am a bit out of my depth.

This is the website that I'm currently editing, and here is the code related to the banner.

HTML:

<div id="greenbanner">
<img src="<?php bloginfo('template_directory'); ?>/Devices.png" id="devices">
<img src="<?php bloginfo('template_directory'); ?>/bigx.png" id="bigx">
<div id="bannertext">Spundge lets you discover, <br />curate, and create better content. <br /><br />
<div id="jointhedarkside"><a style="color:#ffffff;" href="https://www.spundge.com/account/signup/">Get Started - It's Free</a></div>
</div>
</div>  

JQUERY:

$(document).ready(function(){
$("#headershadow").hide();
$("#bigx").click(function(){
  $("#greenbanner").hide(1000);
  $("#headershadow").show();
});
});

CSS:

#greenbanner {
    width: 100%;
    height: 200px;
    background-color: #ffffff;
    background: rgba(248,80,50,1);
    background: -moz-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(82,133,48,1) 0%, rgba(241,111,92,1) 0%, rgba(82,133,48,1) 0%, rgba(87,219,0,1) 0%, rgba(76,140,30,1) 83%, rgba(76,140,30,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(248,80,50,1)), color-stop(0%, rgba(82,133,48,1)), color-stop(0%, rgba(241,111,92,1)), color-stop(0%, rgba(82,133,48,1)), color-stop(0%, rgba(87,219,0,1)), color-stop(83%, rgba(76,140,30,1)), color-stop(100%, rgba(76,140,30,1)));
    background: -webkit-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(82,133,48,1) 0%, rgba(241,111,92,1) 0%, rgba(82,133,48,1) 0%, rgba(87,219,0,1) 0%, rgba(76,140,30,1) 83%, rgba(76,140,30,1) 100%);
    background: -o-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(82,133,48,1) 0%, rgba(241,111,92,1) 0%, rgba(82,133,48,1) 0%, rgba(87,219,0,1) 0%, rgba(76,140,30,1) 83%, rgba(76,140,30,1) 100%);
    background: -ms-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(82,133,48,1) 0%, rgba(241,111,92,1) 0%, rgba(82,133,48,1) 0%, rgba(87,219,0,1) 0%, rgba(76,140,30,1) 83%, rgba(76,140,30,1) 100%);
    background: linear-gradient(to bottom, rgba(248,80,50,1) 0%, rgba(82,133,48,1) 0%, rgba(241,111,92,1) 0%, rgba(82,133,48,1) 0%, rgba(87,219,0,1) 0%, rgba(76,140,30,1) 83%, rgba(76,140,30,1) 100%);
    margin-top: 5px;
}

#devices {
    height: 200px;
    margin-left: 5%;
}

#bigx {
    float: right;
    margin-bottom: 260px;
    margin-top: 10px;
    margin-right: 20px;
}
#bigx:hover {
    opacity: 0.4;
    filter:alpha(opacity=40);
    cursor: pointer;
}

#jointhedarkside {
    font-family: Geogrotesque, Lucida Sans Unicode, sans-serif;
    font-weight: 500;
    color: #ffffff;
    background-color: #57db00;
    border-radius: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 18px;
    letter-spacing: normal;
    text-transform: uppercase;
    display: block; 
    float: left;
    line-height: 17px;
}
#jointhedarkside:hover {
    cursor: pointer;
    background-color: #46ab00;
}

    #bannertext {
        font-family: Geogrotesque, Lucida Sans Unicode, sans-serif;
        font-weight: 100;
        color: #ffffff;
        padding-top: 50px;
        margin-left: 80px;
        padding-right: 25px;
        padding-left: 5px;
        font-size: 30px;
        letter-spacing: normal;
        text-transform: uppercase;
        display: block; 
        float: left;
    }


Solution :

You'd set a cookie, and probably not even render the box in your PHP if it was found.


    CSS Howto..

    How to make css two borders?

    how to apply css style only to homepage

    CSS how to make special div shape

    HTML5 Modal Dialog is showing shortly on page load, how can i stop this?

    how to style in css: product…(price)?

    How to increase height of footer's div when browser window is resized?

    How to avoid an hover on a menu item to affect the menu items on the right

    How to apply global styles with CSS modules in a react app?

    How to animate CSS Translate

    How to slide a div from bottom using pure css or pure javascript

    How do I prevent child affected for transform scale in css3?

    how to get a div to randomly move around a page (using jQuery or CSS)

    CSS background color show another color

    How to align elements properly using CSS

    How to use css to keep horizontal visible when vertical is auto?

    How to set a background-color to element which has the same id with anchor of url?

    How to make two tooltip ids independently close, and remember cookie?

    How to strike through obliquely with css showing the text on top of the strike through

    How to change the position of Dynamic View's Search bar to the left (CSS CODE)

    How can I centralize this jquery styling colors into css?

    CSS: How to make the border of a

    tag to be 100 percent on the div tag?

    D3 Line Chart Show/Hide Element, Variable Not Defined Error?

    How to change order of divs in HTML code, for 3-column CSS Layout?

    How to Align CSS form

    How to detect redraw rate (fps) of a css animation?

    How to fade CSS sprite images using CSS background-position with jQuery?

    How to remove the border on the hover element in nvd3

    How to edit the CSS of a div that does not contain a H1 tag?

    css/javascript - How to achieve these unusual design requirements? [closed]

    How to remove a div with fade out effect in JavaScript?