#1
  1. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,689
    Rep Power
    171

    Java script slider adds CSS, as a result my class doesn't work!


    Hi;

    I use this code to create a slider and filter the results by price range. It is on the right column on this page.

    On the other hand I have a few other components that I need to implement. For example I need to make "Show More Results" button working.

    What it does it checks to see if the div is within first 8 divs of the results, then adds a class "hidden_hotels"
    PHP Code:
    if($hotel_counter>8)
        {
            $display_none = "hidden_hotels";    
        }
    else
        {
            $display_none = "";        
        }
        ?>
       <div class="listing <?php echo $display_none;?>" data-price="<?php echo $row['total'];?>" >
    And using this Jquery I remove the class on clicking the show more button.
    Code:
    function show_hotels()
    	{
    		$(".hidden_hotels").removeClass("hidden_hotels");
    	}
    Ufortunately the slider adds some inline CSS style="display: block;" and so I cannot use the jquery to remove the class hidden_hotels.

    Slider Code
    Code:
    function showProducts(minPrice, maxPrice) {
            $("#products div").hide().filter(function() {
                var price = parseInt($(this).data("price"), 10);
                return price >= minPrice && price <= maxPrice;
            }).show();
        }
    
        $(function() {
            var options = {
                range: true,
                min: <?php echo min($values);?>,
                max: <?php echo $slider_total;?>,
                values: [0, <?php echo $slider_total;?>],
                slide: function(event, ui) {
                    var min = ui.values[0],
                        max = ui.values[1];
    
                    $("#amount").val("$" + min + " - $" + max);
                    showProducts(min, max);
                }
            }, min, max;
    
            $("#slider-range").slider(options);
    
            min = $("#slider-range").slider("values", 0);
            max = $("#slider-range").slider("values", 1);
    
            $("#amount").val("$" + min + " - $" + max);
    
            showProducts(min, max);
        });
    What is the fix to this?

    Thanks
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    Can you post the rest of it, including the slider code section where it adds the inline CSS, please.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  4. #3
  5. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,689
    Rep Power
    171
    Originally Posted by Winters
    Can you post the rest of it, including the slider code section where it adds the inline CSS, please.
    Hi;

    Did you see the page?

    What you mentioned above is the part I can't figure out.

    Thanks
  6. #4
  7. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    Sorry, I missed the link in the OP. Have you tried this? jQuery is not my strong point.
    Javascript Code:
    $(".hidden_hotels").css('display', 'none');
    There is also a discussion here regarding a very similar issue.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  8. #5
  9. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,689
    Rep Power
    171
    Originally Posted by Winters
    Sorry, I missed the link in the OP. Have you tried this? jQuery is not my strong point.
    Javascript Code:
    $(".hidden_hotels").css('display', 'none');
    There is also a discussion here regarding a very similar issue.
    Hi;
    I used the code below and it works but as soon as I use the slider it screws everything (adds the display block to all divs and as a result all divs show and view more buton willbe pointless).
    Code:
    $(".hidden_hotels").css('display', '');
    What would you do?

    Thank you.
    Last edited by zxcvbnm; June 19th, 2013 at 09:45 PM.
  10. #6
  11. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    You could do something messy like placing the CSS code at the end of the "showProducts" function but you will most likely end up with a transition flash. I would place an if/else clause in the function, checking if the element has a class of "hidden_hotels".
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  12. #7
  13. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,689
    Rep Power
    171
    Originally Posted by Winters
    You could do something messy like placing the CSS code at the end of the "showProducts" function but you will most likely end up with a transition flash. I would place an if/else clause in the function, checking if the element has a class of "hidden_hotels".
    Didnt work !
  14. #8
  15. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    Post it please. I'll modify it.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  16. #9
  17. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,689
    Rep Power
    171
    Originally Posted by Winters
    Post it please. I'll modify it.
    Ok, here is the slider JS:
    Code:
    <script type="text/javascript">
    function showProducts(minPrice, maxPrice) {
            $("#products div").hide().filter(function() {
                var price = parseInt($(this).data("price"), 10);
                return price >= minPrice && price <= maxPrice;
            }).show();
        }
    
        $(function() {
            var options = {
                range: true,
                min: <?php echo min($values);?>,
                max: <?php echo $slider_total;?>,
                values: [0, <?php echo $slider_total;?>],
                slide: function(event, ui) {
                    var min = ui.values[0],
                        max = ui.values[1];
    
                    $("#amount").val("$" + min + " - $" + max);
                    showProducts(min, max);
                }
            }, min, max;
    
            $("#slider-range").slider(options);
    
            min = $("#slider-range").slider("values", 0);
            max = $("#slider-range").slider("values", 1);
    
            $("#amount").val("$" + min + " - $" + max);
    
            showProducts(min, max);
    		$(".hidden_hotels").css('display', ''); 
        });
    </script>
    And here is where I put each div with property in it:
    Code:
    <div class="listing <?php echo $display_none;?>" data-price="<?php echo $row['total'];?>" >
    Site
  18. #10
  19. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    Sorry, I was not around on the weekend. So, these look like the offending lines.
    Javascript Code:
    function showstuff(boxid){
    document.getElementById(boxid).style.display="block";
    }
    function hidestuff(boxid){
    document.getElementById(boxid).style.display="none";
    }

    Try changing it to the following.
    Javascript Code:
    function showstuff(boxid){
    	$(".hidden_hotels").removeClass("hidden_hotels");
    }
    function hidestuff(boxid){
    	$(".hidden_hotels").addClass("hidden_hotels");
    }
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  20. #11
  21. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,689
    Rep Power
    171
    Originally Posted by Winters
    Sorry, I was not around on the weekend. So, these look like the offending lines.
    Javascript Code:
    function showstuff(boxid){
    document.getElementById(boxid).style.display="block";
    }
    function hidestuff(boxid){
    document.getElementById(boxid).style.display="none";
    }

    Try changing it to the following.
    Javascript Code:
    function showstuff(boxid){
    	$(".hidden_hotels").removeClass("hidden_hotels");
    }
    function hidestuff(boxid){
    	$(".hidden_hotels").addClass("hidden_hotels");
    }
    Hi;

    But I use these functions elsewhere (on the pilldown menue).

    Code:
     onclick=" ; showstuff('loader_gif'); hidestuff('submit_search'); close_it(); set_city_val('<?php echo $row['destinationname'];?>','destination','<?php echo $row['DID'];?>'); formSubmit('form')"
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    7
    Rep Power
    0
    try with jquery it reduces much complexity & mistakes
    Last edited by Winters; June 24th, 2013 at 09:56 AM. Reason: Removed fake sig
  24. #13
  25. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    The problem then is that you have multiple functions performing conflicting CSS assignments, at different stages. You know this of course.

    There is not going to be a drop-in fix for this. My suggestion would be an array which contains the state of each div element, updated as and when the user interacts with the website. The various scripts and functions would need to reference the array before performing their actions.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.

IMN logo majestic logo threadwatch logo seochat tools logo