www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to display:none a div based on being outside date range slider?

  1. #1
    Join Date
    May 2014
    Posts
    3

    How to display:none a div based on being outside date range slider?

    Here is my problem: my resume is too long. Different recruiters want to see back different lengths of time. One cares about the last 5 years, another 10 years, another still all the experience. Why not give them a slider so they can do that for themselves?

    I am filling the class of each div with the range of possible dates. I could not figure out how to have an id range. I had some luck by running the class numbers in reverse chronological order, but only the divs with dates matching the range limits actually showed. I scrapped that. I am using http://jqueryui.com/slider/ and have set the min at 1995, the max at 2014. The intent is that if they set the slider from 2004 to 2014 (inclusive), they are only interested in seeing the last 10 years of work. The jobs from 1995 to 2003 (out of range) will become display:none.

    Here is a ficticious resume, my resume is much longer and has more positions: A recruiter may set the slider from 2014 to 2011, and they would see every job that class = 2014, 2013, 2012, or 2011, according to the slider.

    <div class="2014 2013 2012">
    <p>Job title stuff</p>
    <p>Description. I held this job in 2012 to 2014.</p>
    </div>

    <div class="2011 2010 2009 2008 2007 2006 2005 2004 2003">
    <p>Job title stuff</p>
    <p>Description. I held this job in 2003 to 2011.</p>
    </div>

    <div class="2002 2001 2000 1999 1998 1997 1996 1995">
    <p>Job title stuff</p>
    <p>Description. I held this job from 1995 to 2002.</p>
    </div>

  2. #2
    Join Date
    Nov 2010
    Posts
    1,085
    Simple enough, but what happens if they set the min to 2008? Does the div spanning 2003 to 2011 get shown or hidden?

  3. #3
    Join Date
    May 2014
    Posts
    3
    If any year listed in the class is min/max/in-range, it is shown. 2008 would be shown.

  4. #4
    Join Date
    Nov 2010
    Posts
    1,085
    so in that case (if I understand) all you need to worry about is the year that you finished the particular job, and check if the slider value is higher than that. Try this:
    Code:
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title></title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    
    
    </head>
    <body>
    <div id="slider"></div>
    <div id="info"></div>
     <div class="job" data-min="2014">
    <p>Job title stuff</p>
    <p>Description. I held this job in 2012 to 2014.</p>
    </div>
    
    <div class="job" data-min="2011">
    <p>Job title stuff</p>
    <p>Description. I held this job in 2003 to 2011.</p>
    </div>
    
    <div class="job" data-min="2002">
    <p>Job title stuff</p>
    <p>Description. I held this job from 1995 to 2002.</p>
    </div>
    
    
      <script>
      $(function () {
        $("#slider").slider({
            min: 1995,
            max: 2013,
            change: function (event, ui) {
                $(".job").each(function () {
                    if (ui.value > $(this).data("min")) {
                        $(this).hide();
                    } else {
                        $(this).show()
                    }
                })
                $("#info").html("Showing jobs from " + ui.value + " onwards")
            }
        });
    });
      </script> 
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles