alright, seems i'm coming here because i'm missing stupid. class i'm attempting use javascript , jquery create slider fades out items above value specified slider, example if item cost 8 dollars , slider set 7, costs on 8 dollars fades out. here's code of entire page:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>the candy bar</title> <link href="candycss.css" rel="stylesheet" type="text/css"> <link href="range.css" rel="stylesheet" type="text/css"> <!--the following script tag downloads font adobe edge web fonts server use within web page. recommend not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/aguafina-script:n4:default;alegreya:n4,i4,n7:default.js" type="text/javascript"></script> <script src="scripts/jquery.ndd.js" type="text/javascript"></script> <script src="scripts/dragdrop.js" type="text/javascript"></script> <script> function printvalue(sliderid, textbox) { var x = document.getelementbyid(textbox); var y = document.getelementbyid(sliderid); x.value = y.value; } window.onload = function() { printvalue('slider', 'rangevalue') } </script> <script> // set price data candy $('#candy1').data({ id:1, price:1 }); $('#candy2').data({ id:2, price:2 }); $('#candy3').data({ id:3, price:3 }); $('#candy4').data({ id:4, price:4 }); $('#candy5').data({ id:5, price:5 }); $('#candy6').data({ id:6, price:6 }); $('#candy7').data({ id:7, price:7 }); $('#candy8').data({ id:8, price:8 }); // link range candy $(document).ready(function () { var thevalue; $("#slider").change(function (){ thevalue = $('#rangevalue').val(); filteritems(thevalue); }); }); function filteritems(pricecriteria){ $.each($('#gallery div'), function(i, item){ $item = $(item); itemdata = $item.data(); if(itemdata.price <= pricecriteria){ $item.animate({opacity: 1}); itemdata.matching = true; }else{ $item.animate({opacity: 0.5}); itemdata.matching = false; } }); } </script> </head> <body> <div id="wrapper"> <div id="banner"> <img src="images/candybarbanner.jpg" width="800" height="140" alt="the candy bar banner" id="hero"/> </div> <div id="content"> <p>here @ candy bar we're interested in providing highest quality candies. please @ our select gourmet pieces below, select favorites or see how want buy!</p> <article id="gallery" class="post"> <div id="candy1" class="candy" draggable="true"><img src="images/chocolatecaramel.jpg" width="100" height="124" alt="chocolate caramel bite" /> <figcaption>chocolate caramel<br /> <span class="price">$1</span></figcaption> </div> <div id="candy2" class="candy" draggable="true"><img src="images/gumdrops.jpg" width="156" height="125" alt="gum drops"/> <figcaption>gum drops<br /> <span class="price">$2</span></figcaption> </div> <div id="candy3" class="candy" draggable="true"><img src="images/truffles.jpg" width="156" height="125" alt="french truffles"/> <figcaption>french truffles<br /> <span class="price">$3</span></figcaption> </div> <div id="candy4" class="candy" draggable="true" style="clear: both"><img src="images/saltwatertaffy.jpg" width="148" height="150" alt=""/> <figcaption>saltwater taffy<br /> <span class="price">$4</span></figcaption> </div> <div id="candy5" class="candy" draggable="true"><img src="images/peanut-butter-cup.jpg" width="100" height="150" alt="peanut butter cups"/> <figcaption>peanut butter cups<br /> <span class="price">$5</span></figcaption> </div> <div id="candy6" class="candy" draggable="true"><img src="images/cinnamonbears.jpg" width="183" height="150" alt="cinnamon bears"/> <figcaption>cinnamon bears<br /> <span class="price">$6</span></figcaption> </div> <div id="candy7" class="candy" draggable="true" style="clear: both"><img src="images/toffee.jpg" width="170" height="150" alt="toffee"/> <figcaption>toffee<br /> <span class="price">$7</span></figcaption> </div> <div id="candy8" class="candy" draggable="true"><img src="images/peanutbrittle.jpg" width="195" height="150" alt="peanut brittle"/> <figcaption>peanut brittle<br /> <span class="price">$8</span></figcaption> </div> </article> <aside id="priceandfavorites"> <div id="sliderdiv"> price<br /> <div> <form name="form1" method="post" action=""> <input id="slider" type="range" min="1" max="10" step="1" value="10" onchange="printvalue('slider','rangevalue')" /> <br /> <input id="rangevalue" type="text" size="2" /> </form> </div> </div> <div id="favorites"> favorites <p>drag favorites here</p> <ul id="favs"> </ul> </div> </aside> </div> <footer><a href="##">home</a> | <a href="##">contact us</a></footer> </div> </body> </html> the areas i'm having problems are:
<script> // set price data candy $('#candy1').data({ id:1, price:1 }); $('#candy2').data({ id:2, price:2 }); $('#candy3').data({ id:3, price:3 }); $('#candy4').data({ id:4, price:4 }); $('#candy5').data({ id:5, price:5 }); $('#candy6').data({ id:6, price:6 }); $('#candy7').data({ id:7, price:7 }); $('#candy8').data({ id:8, price:8 }); // link range candy $(document).ready(function () { var thevalue; $("#slider").change(function (){ thevalue = $('#rangevalue').val(); filteritems(thevalue); }); }); function filteritems(pricecriteria){ $.each($('#gallery div'), function(i, item){ $item = $(item); itemdata = $item.data(); if(itemdata.price <= pricecriteria){ $item.animate({opacity: 1}); itemdata.matching = true; }else{ $item.animate({opacity: 0.5}); itemdata.matching = false; } }); } </script> and:
<article id="gallery" class="post"> <div id="candy1" class="candy" draggable="true"><img src="images/chocolatecaramel.jpg" width="100" height="124" alt="chocolate caramel bite" /> <figcaption>chocolate caramel<br /> <span class="price">$1</span></figcaption> </div> <div id="candy2" class="candy" draggable="true"><img src="images/gumdrops.jpg" width="156" height="125" alt="gum drops"/> <figcaption>gum drops<br /> <span class="price">$2</span></figcaption> </div> <div id="candy3" class="candy" draggable="true"><img src="images/truffles.jpg" width="156" height="125" alt="french truffles"/> <figcaption>french truffles<br /> <span class="price">$3</span></figcaption> </div> <div id="candy4" class="candy" draggable="true" style="clear: both"><img src="images/saltwatertaffy.jpg" width="148" height="150" alt=""/> <figcaption>saltwater taffy<br /> <span class="price">$4</span></figcaption> </div> <div id="candy5" class="candy" draggable="true"><img src="images/peanut-butter-cup.jpg" width="100" height="150" alt="peanut butter cups"/> <figcaption>peanut butter cups<br /> <span class="price">$5</span></figcaption> </div> <div id="candy6" class="candy" draggable="true"><img src="images/cinnamonbears.jpg" width="183" height="150" alt="cinnamon bears"/> <figcaption>cinnamon bears<br /> <span class="price">$6</span></figcaption> </div> <div id="candy7" class="candy" draggable="true" style="clear: both"><img src="images/toffee.jpg" width="170" height="150" alt="toffee"/> <figcaption>toffee<br /> <span class="price">$7</span></figcaption> </div> <div id="candy8" class="candy" draggable="true"><img src="images/peanutbrittle.jpg" width="195" height="150" alt="peanut brittle"/> <figcaption>peanut brittle<br /> <span class="price">$8</span></figcaption> </div> </article> any on might missing appreciated. thank you
edit:
as suggested tried moving data portion rest of function so:
<script> $(document).ready(function () { var thevalue; $('#candy1').data({ id:1, price:1 }); $('#candy2').data({ id:2, price:2 }); $('#candy3').data({ id:3, price:3 }); $('#candy4').data({ id:4, price:4 }); $('#candy5').data({ id:5, price:5 }); $('#candy6').data({ id:6, price:6 }); $('#candy7').data({ id:7, price:7 }); $('#candy8').data({ id:8, price:8 }); $("#slider").change(function (){ thevalue = $('#rangevalue').val(); filteritems(thevalue); }); }); function filteritems(pricecriteria){ $.each($('#gallery div'), function(i, item){ $item = $(item); itemdata = $item.data(); if(itemdata.price <= pricecriteria){ $item.animate({opacity: 1}); itemdata.matching = true; }else{ $item.animate({opacity: 0.5}); itemdata.matching = false; } }); } </script> unfortunately not appear fix anything.
edit 2:
i opened google's developers tool , it's telling me $ not defined, did forget note somewhere knows it's dealing jquery?
edit 3:
i figured stupid that, fixed it. thank help.
