Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Looking for a script similar to Isotope

    I'm looking for a script similar to Isotope (http://isotope.metafizzy.co/index.html) but instead of moving stuff around, they would stay in place but become transparent instead. Any ideas?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    Easiest thing would be to study that Isotope code and then modify it. Why start all over?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Easiest thing would be to study that Isotope code and then modify it. Why start all over?
    Yeah that is what I am going to try and do now. I don't know js/jquery so hopefully we'll see if there's enough there for me.

  • #4
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Any tips on where to start? I could figure out stuff if it was straightforward, but this seems a little out of my league.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    you can just apply overlapping classes to do that, you don't need a framework.

    if you assign several classes to each item, you can define a few CSS rules to show/hide entire groups of elements at once. You can even fade them in/out, all in CSS.

    The only JS you need to to toggle a class or two on <body> that you use to steer your CSS rules.

    for example:
    items:
    Code:
    <img class='green big cheap' />
    <img class='red small cheap' />
    <img class='green big expensive' />
    <img class='blue big cheap' />

    css:
    Code:
    body.big .small { opacity: 0.1; }
    body.cheap .expensive { opacity: 0.1; }
    body.expensive  .cheap{ opacity: 0.1; }
    changing the class of body to "cheap" or "big" can now allow you to independently select the different "categories" of items you made in CSS.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #6
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    you can just apply overlapping classes to do that, you don't need a framework.

    if you assign several classes to each item, you can define a few CSS rules to show/hide entire groups of elements at once. You can even fade them in/out, all in CSS.

    The only JS you need to to toggle a class or two on <body> that you use to steer your CSS rules.

    for example:
    items:
    Code:
    <img class='green big cheap' />
    <img class='red small cheap' />
    <img class='green big expensive' />
    <img class='blue big cheap' />

    css:
    Code:
    body.big .small { opacity: 0.1; }
    body.cheap .expensive { opacity: 0.1; }
    body.expensive  .cheap{ opacity: 0.1; }
    changing the class of body to "cheap" or "big" can now allow you to independently select the different "categories" of items you made in CSS.
    That makes sense and seems much easier than toying around with a framework, but I'll need an onClick function, right? I want certain images to show depending on which category the user chooses.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by Vytfla View Post
    That makes sense and seems much easier than toying around with a framework, but I'll need an onClick function, right? I want certain images to show depending on which category the user chooses.
    it's probably simplest to go ahead and use jQuery for this.

    all you need to do is add and remove class names on <body>


    if you only show one cat at a time, you don't need any jQuery, it's dead-simple.

    you can use clones of
    Code:
    <input type=button className=cat1 value="Show Catergory 1"
        onclick="document.body.className=this.className"  />
    if you want to support multiple categories at once, the classes must be toggled.



    Code:
    <input type=button className=cat1 value="Toggle Catergory 1"
        onclick="jQuery('body').toggleClass(this.className)"  />
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #8
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    it's probably simplest to go ahead and use jQuery for this.

    all you need to do is add and remove class names on <body>


    if you only show one cat at a time, you don't need any jQuery, it's dead-simple.

    you can use clones of
    Code:
    <input type=button className=cat1 value="Show Catergory 1"
        onclick="document.body.className=this.className"  />
    if you want to support multiple categories at once, the classes must be toggled.



    Code:
    <input type=button className=cat1 value="Toggle Catergory 1"
        onclick="jQuery('body').toggleClass(this.className)"  />
    Sorry, let me get more precise. I don't mean show, I meant make opaque; when the user clicks on 1 of 4 links on the page, the images corresponding to that link will not change, while all the other images will, say, get 50% opaque. Right now I've set up my HTML as:

    Code:
    <ul id="filter">
                    <li><a href="#" data-filter=".all">ALL</a></li>
                    <li><a href="#" data-filter=".ed">ED</a></li>
                    <li><a href="#" data-filter=".pr">PR</a></li>
                    <li><a href="#" data-filter=".cr">CR</a></li>
                </ul>
    So, when the user clicks CR, all the ED and PR images will become semi-opaque.

  • #9
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    But you can do that. I'm in a hurry because I have to get to a meeting, so there is *a lot* of room for improvement, but just a quick example: http://jsfiddle.net/wUQsc/

    Edit: This will also work if you add several categories to a panel. It's just not very flexible yet, so as I said: go improve it. It should be a good pointer to start with.
    Last edited by Airblader; 02-25-2013 at 11:19 AM.

  • #10
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Airblader View Post
    But you can do that. I'm in a hurry because I have to get to a meeting, so there is *a lot* of room for improvement, but just a quick example: http://jsfiddle.net/wUQsc/

    Edit: This will also work if you add several categories to a panel. It's just not very flexible yet, so as I said: go improve it. It should be a good pointer to start with.
    Okay, I believe I see what you're doing there. However, my example doesn't use a buttons but instead uses links. I can't assign a value to them then, correct?

    Code:
    <ul id="filter">
                    <li><a href="#" data-filter="all">ALL</a></li>
                    <li><a href="#" data-filter="ed">ED</a></li>
                    <li><a href="#" data-filter="pr">PR</a></li>
                    <li><a href="#" data-filter="cr">CR</a></li>
                </ul>

  • #11
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Why shouldn't that work? Again, here's an example. It needs a lot of improvement (cross-browser css transition support, …) and has flaws (only supports one category at a time right now), it also uses jQuery which of course isn't needed. But just to show you that it is possible:

    http://jsfiddle.net/Sy7EP/ (the nice transitions only work in webkit browsers because I didn't include all the vendor prefixes...)

    You really should be able to get somewhere from there.

  • Users who have thanked Airblader for this post:

    Vytfla (02-28-2013)

  • #12
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Airblader View Post
    Why shouldn't that work? Again, here's an example. It needs a lot of improvement (cross-browser css transition support, …) and has flaws (only supports one category at a time right now), it also uses jQuery which of course isn't needed. But just to show you that it is possible:

    http://jsfiddle.net/Sy7EP/ (the nice transitions only work in webkit browsers because I didn't include all the vendor prefixes...)

    You really should be able to get somewhere from there.
    Thanks, I understand what the code is trying to accomplish, but I am still unable to implement it myself. I think I am adding the scripts wrong? Code:

    HEAD
    Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    HTML
    Code:
    div id="content" role="main">
                <div id="category">
                    <div id="all-div">
                        <a href="#" data-filter="all"><h2>ALL</h2></a>
                    </div>
                    <div id="ed-div">
                        <a href="#" data-filter="ed"><h2>EDITORIAL</h2></a>
                    </div>
                    <div id="pr-div">
                        <a href="#" data-filter="pr"><h2>PR</h2></a>
                    </div>
                    <div id="cr-div">
                        <a href="#" data-filter="cr"><h2>CREATIVE</h2></a>
                    </div>
                </div>
                
                <div id="image-wrapper">
                    <div class="panel all">Panel 1</div>
                    <div class="panel ed">Panel 2</div>
                    <div class="panel pr">Panel 3</div>
                    <div class="panel cr">Panel 4</div>
                </div>
            </div> <!-- end #CONTENT -->
    CSS
    Code:
    #content, 
    #category {
        overflow: hidden;
        clear: both;
    }
    
    #category > div {
        float: left;
        margin: 40px 0 0 0;
        height: 100px;
        width: 240px;
        background-color: #F5F5F5;
    }
    
    #content a {
        color: #000000;   
    }
    #content a:hover {
        color: #ffffff;
    }
    
    /*           IMAGE WRAPPER      */
    #image-wrapper {
        overflow: hidden;
        margin: 40px 0 0 0;
    }
    
    .panel {
        float: left;
        clear: none;
        height: 100px;
        width: 100px;
        margin: 0 10px 0 0;
        background-color: red;
        opacity: 0.1;
        
        -webkit-transition: opacity 1s;
    }
    
    .active {
        opacity: 1.0 !important;
    }
    And I have this right about my closing body tag
    Code:
    <script>
            var $panels = $( '#image-wrapper .panel' );
    
            $( '#category > a' ).on( 'click', function (event) {
                event.preventDefault();
                
                var categoryToShow = $( this ).data( 'filter' );
                $panels.removeClass( 'active' ).filter( '.' + categoryToShow ).addClass( 'active' );
            } );
    	</script>
    I feel like I am missing something silly at this point...

  • #13
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Code:
    $( '#category > a' )
    This doesn't work and should – for example – be

    Code:
    $( '#category > div > a' )
    Please do remember what I said about adding the other vendor-prefixed css transition commands if you'd like to use css transitions.
    Last edited by Airblader; 02-27-2013 at 09:22 AM.

  • #14
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Airblader View Post
    Code:
    $( '#category > a' )
    This doesn't work and should – for example – be

    Code:
    $( '#category > div > a' )
    Please do remember what I said about adding the other vendor-prefixed css transition commands if you'd like to use css transitions.
    So my problem was that I didn't include https: before //ajax.googeapis... Wow. Anyway thank you so much for your help.

  • #15
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    So get more use out of this script, I'm trying to have one div already focused when the page loads with its own styling; I am also trying to have it so that when the link is clicked, the div/link styling will move from the current to the clicked link and stay there until a new link is clicked, at which point it'll change again. Is this new line I added in the script close?

    HTML
    Code:
    <div id="category">
                    <div class="all-div current-div">
                        <a href="#" data-filter="all"><h2>ALL</h2></a>
                    </div>
                    <div class="ed-div current-div">
                        <a href="#" data-filter="ed"><h2>EDITORIAL</h2></a>
                    </div>
                    <div class="pr-div current-div">
                        <a href="#" data-filter="pr"><h2>PR</h2></a>
                    </div>
                    <div class="cr-div current-div">
                        <a href="#" data-filter="cr"><h2>CREATIVE</h2></a>
                    </div>
                </div>
    CSS
    Code:
    #category .all-div {          /* current active styling */
        background-color: #000000;
    }
    #category .all-div a {            /* current active styling */
        color: #ffffff;   
    }
    
    .active-color {
        color: #000000;
        background-color: green;
    }
    /*.active-bg {
        background-color: green;
    }*/
    SCRIPT
    Code:
    $(function () {
                var $panels = $( '#image-wrapper .panel' );
        
                $( '#category > div > a' ).on( 'click', function (event) {
                    event.preventDefault();
                    
                    var categoryToShow = $( this ).data( 'filter' );
                    $panels.addClass( 'active' ).filter( '.' + categoryToShow ).removeClass( 'active' );
                    $("a, #category > .current-div").addClass("active-color").not(this).removeClass("active-color");
                    /*$("#category .current-div").addClass("active-bg").not(this).removeClass("active-bg");*/
                } );
            });
    As of now just the link color changes, which is 1/2 off what I am trying to accomplish; I can't figure out how to target the div.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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