0

I have a site that uses jQuery to hide or display content in response to pressed buttons, so people can find the content they are looking for more quickly. However, I would like to be able to link targeted users to the page with particular types of content already displayed.

In simplest terms, the page is structured as follows:

<!DOCTYPE html>
<html>
    <script src="jquery-1.8.3.js"></script>

    <script type="text/javascript">
        $(window).load(function(){
            $("#b1").click(function(){
                $(".type1").show(); 
                $(".type2").hide();
            });
            $("#b2").click(function(){
                $(".type1").hide(); 
                $(".type2").show();
            });

            $(".type1").hide(); 
            $(".type2").hide(); 
        })
    </script>

    <body>
        <button id="b1">1</button>
        <button id="b2">2</button>
        <div class="type1">This content is shown when button 1 is pressed.</div>
        <div class="type2">When button 2 is pressed this content is shown.</div>
    </body>
</html>

If I want to be able to send Person A a link to the site with the "type1" div initially displayed, and Person B a link to the same site with the "type2" div initially displayed, what is the most practical solution?

Please note: I am self taught programmer, and while I have done a lot of searching on this site, this is my first time asking a question. So I apologize in advance if there is anything wrong or odd with my question or formatting that I might otherwise be aware of.

Kevin Mackey
  • 3
  • 1
  • 1
    tell me what are you doing to recognize a user in your program??? cookies or session. What language are you working in--php/asp.net etc.??? – Abhishek Singh May 26 '16 at 03:46
  • As far as "recognizing" a user it is not necessary for anything to be stored. This is only about first impressions, what will show up first when someone receives the link. After that they can click on other categories. I was initially considering using php but I left the question open because I didn't want to limit other solutions. – Kevin Mackey May 26 '16 at 03:55
  • you could always use hash's and css's `:target` psuedo operator? – Jhecht May 26 '16 at 04:12
  • please check my edit – Abhishek Singh May 26 '16 at 04:18

3 Answers3

0

If I could tell you, the best solution would be:

  1. Send someone a url of type: http://www.example.com?view=1 or http://www.example.com?view=2

  2. Then collect the data by using this in your webpage (in case of PHP):

      if($_GET["view"]) {
     echo "<script>var v=". $_GET['view']. "</script>";
  }

  3. Then in javascript use:

    $(document).ready(function(){
  if(v==1){
    $(".type2").hide(); 
    $(".type1").show(); 
  }
  else if(v==2){
    $(".type1").hide(); 
    $(".type2").show(); 
  }
});
$("#b1").click(function(){
  $(".type1").show(); 
  $(".type2").hide();
});
$("#b2").click(function(){
  $(".type1").hide(); 
  $(".type2").show();
});
Abhishek Singh
  • 369
  • 2
  • 17
  • Okay, I see. Yes, very simple and efficient! – Kevin Mackey May 26 '16 at 16:47
  • I'm torn because this is a good answer, possibly the best one, but I think I will actually end up using Guruprasads. I have upvoted you both (it doesn't show yet because I'm still new). I will decide shortly which answer to accept. – Kevin Mackey May 26 '16 at 17:50
0

I assume that the way you are giving your site link to Person A and Person B are www.yoursite.com/Anypage?type=PersonA and www.yoursite.com/Anypage?type=PersonB respectively. So Basically, you would be trying to pass this identifier as parameters to your url. You can fetch the parameters of the url, identify what person is visiting and accordingly show/hide respective div. Consider below example.

JS

The below function from this answer originally, fetches URL Parameter values.

function getURLparam( name) {
  url = location.href;
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( url );
  return results == null ? null : results[1];
}

Use the above function to fetch URL values.

$(document).ready(function(){
    var type=getURLParam('type'); //Passing the parameter key
    //type variable will have either PersonA or PersonB
    if(type=="PersonA"){
        $(".type1").show();
    }
    else{
        if(type=="PersonB"){
            $(".type1").show();
        }
    }

    $("#b1").click(function(){
         $(".type1").show(); 
         $(".type2").hide();
    });
    $("#b2").click(function(){
         $(".type1").hide(); 
         $(".type2").show();
    });
    /*$(".type1").hide(); 
    $(".type2").hide();*/
    //instead of this you can add css `display:none` for both the `class`
})

CSS

.type1,.type2{
   display:none;
}
Community
  • 1
  • 1
Guruprasad J Rao
  • 29,410
  • 14
  • 101
  • 200
0

Here is another suggestion:

  1. Make links like: http://example.com/#type1 and http://example.com/#type2

  2. Make it more flexible, so you can add more types later without changing JS code:

    • To each element with type1, type2, add another class type
    • To each element with ID b1, b2, add a data attribute like ex. data-toggle="type2" (You can then remove the id if you don't need it elsewhere)

Then Javascript:

function toggleType(type) {
    $('.type').hide().filter('.'+type).show();
}

var initialType = location.hash && location.hash.substring(1) || 'type1';

toggleType(initialType);

$('[data-toggle]').click(function () {
    toggleType($(this).data('toggle'));
});
Rudi
  • 2,987
  • 1
  • 12
  • 18
  • Yes, this is closer to what I will actually be using. I just wanted to put my original question in simplest terms. Thank you for the starter code though! – Kevin Mackey May 26 '16 at 16:48