How to show DIV on first visit and not any visit after until browser is closed

Question

I have the following script which slides in/slide out a DIV from the right:

// jQuery 1.9 > Toggle Event dep 1.8
$('#slideClick').click(function () {
    var it = $(this).data('it') || 1;
    switch (it) {
        case 1:
            $(this).parent().animate({ right: '-290px' }, { queue: false, duration: 500 });
            $("#imgArrow").attr("src", "../theImages/arrow_expand.png");
            break;
        case 2:
            $(this).parent().animate({ right: '-0px' }, { queue: false, duration: 500 });
            $("#imgArrow").attr("src", "../theImages/arrow_collapse.png");
            break;
    }
    it++;
    if (it > 2) it = 1;
    $(this).data('it', it);
});

The HTML code in the MasterPage which corresponds to the above script is:

<div id="slideOut" class="clearfix">
    <div id="slideContent">
        <div style="width: 98%; margin: 0 auto; padding: 5px;">
            <div id="dvImpMsgs" style="padding-left: 10px; padding-right: 10px;">
                <asp:UpdatePanel runat="server" ID="upMessage" ClientIDMode="Static" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:Label ID="lblMessage" Font-Size="x-small" runat="server" Text="" ClientIDMode="Static"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </div>
    </div>
    <div id="slideClick">
        <div style="padding: 0; margin: 0 auto; width: 100%; height: 100%; text-align: center;">
            <div class="arrowMsg">
                <img src="../theImages/arrow_collapse.png" id="imgArrow" style="width: 12px; height: 18px; border: 0; vertical-align: middle;" />
            </div>
            <div style="width: 80px; height: 50px; float: right; margin: 0; padding: 0;">
                <div style="width: 80px; height: 30px; text-align: center; line-height: 30px; vertical-align: middle;" class="brClear">
                    <img src="../theImages/iMsg.png" style="width: 30px; height: 30px; border: 0" />
                </div>
                <div style="color: #FFFFFF; width: 80px; height: 20px; text-align: center; line-height: 20px; vertical-align: middle; font-size: 10px;" class="brClear">
                    MESSAGES
                </div>
            </div>
        </div>
    </div>
</div>

Everytime a user visits the page the slide-out is true which forces the user to click the slideclick DIV to close it, which can get a unfriendly to the user.

How can I use a cookie or session so the following can happen:

The first time a user visits show the DIV in slide-out position, once they click the slideclick DIV to hide. It will continue to remain hidden from the user until the browser is closed, in which case once the user re-opens the browser again, the DIV should be in slide-out position until the user click the slideclick DIV to hide, and so forth.

slide-out position:

enter image description here

hide position:

enter image description here

Gary Storey · Accepted Answer · 2014-09-08T18:20:36.800

2

UPDATED ANSWER PER COMMENTS

If you know your browsers support it, you can use sessionStorage instead of the data element. Also to make it more DRY I have added additional functions. You would use it something like this:

$(function() {
  function showContent(dir) {
    var pxVal = '0px', img='arrow-collapse';
    if (dir === 'close') {
        pxVal = '-290px';
        img = 'arrow-expand';
    }
    $('#slideOut').animate({ right: pxVal }, { queue: false, duration: 500 });
    $("#imgArrow").attr("src", "../theImages/"+img+".png");
  }

  function showHideContent () {
    var currVal = sessionStorage.getItem('showSlideArea');  
    if (currVal === 'false') {
        showContent( 'close');
        currVal='true';
    } else {
        showContent( 'open');
        currVal='false';
    }
    sessionStorage.setItem('showSlideArea', currVal);
  }

  $('#slideClick').on('click', showHideContent);

  var currVal = sessionStorage.getItem('showSlideArea');  
  if (currVal === 'true') {
    showContent('close');
  }
});

edited Sep 08 '14 at 18:20

answered Sep 08 '14 at 14:32

Gary Storey

1,779
2
14
19

This will persist for the entire session while the user is on the site. Once their session has expired so will the storage item. – Gary Storey Sep 08 '14 at 14:35
`sessionStorage` is until the browser is closed I am guessing? I will be using IE 9/10 and Chrome and is `sessionStorage` supported? How do I force clear `sessionStorage`? – SearchForKnowledge Sep 08 '14 at 14:36
Thank you but that didn't work for me. Once the code has been edited, the `slideContent` does not close anymore :/ – SearchForKnowledge Sep 08 '14 at 14:47
Updated fiddle : http://jsfiddle.net/7yruxdeq/1/ IE9/10 and Chrome all support sessionStorage. It lasts until browser is closed OR the session expires (which is determined by the server configuration). There is not need to "clear" it. You can change the value at any time using "setItem" and get the value at any time with "getItem". – Gary Storey Sep 08 '14 at 15:18
What is happening is, the first time it is open by default. I click on it to close and visit another content page and click on the box again, nothing happens, click on it again, nothing happens and on the third click it opens and same goes for closing. – SearchForKnowledge Sep 08 '14 at 16:41
Thank you for the edit and it is working like it should except the first visit click, nothing happens and anytime after that is fine :/ – SearchForKnowledge Sep 08 '14 at 18:39
Since there is no value the first time through it will be a false-y value. You can adjust the logic accordingly and it should work out exactly the way you want. – Gary Storey Sep 08 '14 at 18:49
Thank you. I will do some thorough testing. – SearchForKnowledge Sep 08 '14 at 19:06

Mhmd · Answer 2 · 2014-09-08T15:13:10.380

1

In asp.net code

make variable called ex. requestNumber and store it in session

assign a value to +1 in every request

Div "slideClick" add class with requestNumber ex slideClick.Attributes["class","request_"+requestNumber]

In css

slideClick{display:hidden;} slideClick.request_1{display:block;}

UPDATE 1

you may also use

Request.UrlReferrer

if visitor come from website not yours or null, then assign class to appear

after click in any link inside website, UrlReferrer will be your website, then not assign class to appear.

Finally

add class to div you want to appear/disappear according to value get from UrlReferrer, cookie or session as explained above

UPDATE 2

If you insist on your scope, try this

var it = sessionStorage.getItem('it') || 1;
if(it > 1) {
    $('#slideClick').parent().animate({ right: '-290px' }, { queue: false, duration: 0 });
    $("#imgArrow").attr("src", "../theImages/arrow_expand.png");
}

//var it = $('#slideClick').data('it') || 1;
alert(it);
// jQuery 1.9 > Toggle Event dep 1.8
    $('#slideClick').click(function () {

        alert(it);
        switch (it) {
            case 1:
                $(this).parent().animate({ right: '-290px' }, { queue: false, duration: 500 });
                $("#imgArrow").attr("src", "../theImages/arrow_expand.png");
                break;
            case 2:
                $(this).parent().animate({ right: '-0px' }, { queue: false, duration: 500 });
                $("#imgArrow").attr("src", "../theImages/arrow_collapse.png");
                break;
        }
        it++;
        if (it > 2) it = 1;
        sessionStorage.setItem('it', it);
    });

The idea here is to check for the value onload not to wait to click.

Regards

edited Sep 08 '14 at 15:13

answered Sep 08 '14 at 14:15

Mhmd

4,989
3
22
29

`slideClick` is the orange section the user clicks to open the `slideContent` – SearchForKnowledge Sep 08 '14 at 14:26
what I see always in all website is slideContent is always appear by default especially for SEO, and slideClick appear above all content, and you close it to see all content inside, so do not make you content depend on javascript to be more friendly to search engines. – Mhmd Sep 08 '14 at 14:40
I completely agree with you and it is doing it and I want to keep the same functionality. What I am looking to do is display on first visit and continue to display it until I hide it. After that, every time I visit the page it will continue to hide it until I open it again. – SearchForKnowledge Sep 08 '14 at 14:46
Looks like it is working :) I will do a test first. Thank you – SearchForKnowledge Sep 08 '14 at 15:59
It is working with a minor bug... When I first visit the page, I click on `slideClick` to close the dIV and when I go to another page the DIV stays hidden but now I have to click on `slideClick` three times for it to open and vice versa. Any idea how to resolve that? – SearchForKnowledge Sep 08 '14 at 16:18
I thought it was just my implementation here: jsfiddle.net/fss48nts but it seems like your updated JSFiddle is also doing it. If you click on `slideClick` to close it and refresh the JSFiddle, you have to click on `slideClick` three times to open it back again and same goes for closing it. – SearchForKnowledge Sep 08 '14 at 16:52

score 1 · Answer 3 · edited May 23 '17 at 12:29

1

Set a cookie via jquery.

check this answer: https://stackoverflow.com/a/8213459/4016757

Or go directly to the plugin: https://github.com/carhartl/jquery-cookie

edited May 23 '17 at 12:29

Community

1
1

answered Sep 08 '14 at 14:18

Pero

75
1
7

How to show DIV on first visit and not any visit after until browser is closed

3 Answers3

Linked