Secret Store - item filter v2
How do I make an secret store - item filter v2?
Using one of the new item styles!. What is a secret store - item filter v2? How do you make a secret store - item filter v2? This script and codes were developed by Harry Sadler on 29 November 2022, Tuesday.
Secret Store - item filter v2 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Secret Store - item filter v2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<body> <div id="mainContainer"> <!--new item tester--> <div id="filterButtonWrapper"> <div class="filterButton" onclick="sequenceItems(ssItems_all)"> all items </div> <div class="filterButton" onclick="sequenceItems(ssItems_newDeals)"> new items </div> <div class="filterButton" onclick="sequenceItems(ssItems_oldDeals)"> old items </div> </div> <div class="spacerContainer"></div> <div id="itemContainer"> <!--all items are generated by jscript--> <!--their info comes from the ssItems array--> </div> </div>
</body> <script src="js/index.js"></script>
</body>
</html>
Secret Store - item filter v2 - Script Codes CSS Codes
{border:1px dotted green;}
body { background-color: #390a20;
}
#mainContainer { *border: 1px dotted blue; margin: 25px auto; padding: 0; width: 690px; min-height: 900px; height: auto; background: white
}
#filterButtonWrapper { height: 45px; width: auto; margin: 10px 5px 5px 24px; padding:5px auto;
}
.filterButton { display: inline-block; background-color: DimGray; color:white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; width:auto; height:auto; cursor: pointer; margin: 20px 5px 5px 10px; padding: 10px 15px 10px 15px;
}
.filterButton:hover { background-color: rgb(233,68,22);
}
.filterButton-selected { background-color: Silver;
}
.spacerContainer { padding: 0; margin: 0; width: auto; height: 20px; overflow: hidden;
}
#itemContainer { background-color: white; margin: 30px 20px 0 20px; width: 650px; height: auto; overflow: hidden;
}
.behindItem { display: inline-block; height: 200px; width: 200px; margin: 0 0 20px 13px; padding: 0; background-color: white; float: left; overflow: hidden;
}
.item { display: inline-block; height: 200px; width: 200px; padding: 0; float: left; overflow: hidden; cursor: pointer; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 700ms; -moz-transition: all 700ms ; -o-transition: all 700ms ; transition: all 700ms ; -webkit-transition-timing-function: cubic-bezier(0.200, 0.540, 0.095, 0.995); -moz-transition-timing-function: cubic-bezier(0.200, 0.540, 0.095, 0.995); -o-transition-timing-function: cubic-bezier(0.200, 0.540, 0.095, 0.995); transition-timing-function: cubic-bezier(0.200, 0.540, 0.095, 0.995);
}
.overlay { height: 200px; width: 200px; background-color:rgba(103,15,17, .9); overflow: hidden; -moz-transform: translatey(200px); -ms-transform: translatey(200px); -o-transform: translatey(200px); -webkit-transform: translatey(200px); transform: translatey(200px); -moz-transition: -moz-transform 0.3s; -o-transition: -o-transform 0.3s; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s
}
.solidColorDiv { background-color:rgb(159,32,38); height: 200px; width: 200px; position: absolute; z-index:-1; overflow: hidden;
}
.itemSlide { -moz-transform: translatey(0); -ms-transform: translatey(0); -o-transform: translatey(0); -webkit-transform: translatey(0); transform: translatey(0)
}
.keepSlide { -moz-transform: translatey(0); -ms-transform: translatey(0); -o-transform: translatey(0); -webkit-transform: translatey(0); transform: translatey(0)
}
.itemInfoContainer { height: 200px; width: 200px; float: left; overflow: hidden;
}
.itemInfo { height: 45px; margin: 50px 0 auto 0; color: white; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 15px; text-shadow: 1px 1px 1px rgba(0, 0, 0, .4); float: initial; line-height: 20px; text-align: center; padding: 6px; overflow: hidden;
}
.itemButton { background-color: transparent; border-radius: 50%; float: initial; height: 35px; width: 35px; margin: 14px auto auto auto;
}
.more-info-plus { position:absolute; background-color: transparent; color: white; font-weight: initial; font-family: Arial, Helvetica, sans-serif; font-size: 13px; text-transform: uppercase; text-align: center; float: initial; height: 35px; width: 95px; left:26%; bottom: 16%; padding: 0; cursor: pointer; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.arrow-flip-down { position:absolute; text-align: center; left:45%; bottom: 47px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 16px solid white; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.moreInfoDiv { background-color: LightGray; max-height: 300px; width: auto; clear: both; margin: 0 0 0 0; overflow: hidden; -moz-transition: max-height 0.6s; -o-transition: max-height 0.6s; -webkit-transition: max-height 0.6s; transition: max-height 0.6s; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; -webkit-transition-timing-function: ease; transition-timing-function: ease; -moz-transition-delay: 0s; -o-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s
}
.moreInfoText { color: black; font-family: Arial, Helvetica, sans-serif; font-size: 13px; padding: 10px 20px 10px 20px; display: block; overflow: hidden;
}
.xCloseInfo { position: relative; height: 28px; width: 32px; text-align: center; padding: 3px 0 0 0; font-family: arial; float: right; font-weight: bold; color: Gray; font-size: 14px; margin: 0 -5px 0 0; cursor: pointer
}
.zeroHeight { max-height: 0
}
.hide { display: none
}
.hideSpecial { display: none;
}
.spinImage { -moz-transform: rotatey(90deg); -ms-transform: rotatey(90deg); -webkit-transform: rotatey(90deg); -o-transform: rotatey(90deg); transform: rotatey(90deg);
Secret Store - item filter v2 - Script Codes JS Codes
var ssItems_all = [ { itemNumber: '1', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/05/SStore_Studiomix_200x200.jpg', squareColor: 'rgba(171,10,9, .9)', info_1: '40% off<br>one month membership', info_2: '<p>item 1 info. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>', newItem: true, }, { itemNumber: '2', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/05/SStore_Azil_200x200.jpg', squareColor: 'rgba(171,10,9, .9)', info_1: 'info item 2', info_2: '<p>item number 2 has more info as well. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>', newItem: false, }, { itemNumber: '3', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/05/SStore_Farmgirl_200x200.jpg', squareColor: 'rgba(171,10,9, .9)', info_1: '3rd item information', info_2: '<p>#3\'s additional info is right here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>', newItem: true, }, { itemNumber: '4', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/05/SStore_Indigo_200x200.jpg', squareColor: 'rgba(171,10,9, .9)', info_1: 'info for the fourth item', info_2: '<p>more info for the fourth item. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>', newItem: false, }, { itemNumber: '5', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/05/SStore_Urbansitter_200x200.jpg', squareColor: 'rgba(171,10,9, .9)', info_1: 'info item 5', info_2: '<p>item number 5 has more info as well. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>', newItem: false, }, { itemNumber: '6', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/05/SStore_Studiomix_200x200.jpg', squareColor: 'rgba(171,10,9, .9)', info_1: '6rd item information', info_2: '<p>#6\'s additional info is right here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>', newItem: true, }, { itemNumber: '7', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/05/SStore_Farmgirl_200x200.jpg', squareColor: 'rgba(171,10,9, .9)', info_1: 'info for the seventh item', info_2: '<p>more info for the seventh item. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>', newItem: true, }, { itemNumber: '8', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/05/SStore_Azil_200x200.jpg', squareColor: 'rgba(171,10,9, .9)', info_1: 'info item 8', info_2: '<p>item number 8 has more info as well. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>', newItem: false, }, ]; //more arrays for item filter var ssItems_newDeals = []; var ssItems_oldDeals = [];
//----------------HTML MAKERS---------vv
// item maker
function makeItem(i, itemArray) { return '\
<div class="behindItem">\
<div class="item spinImage" id="ssItem_'+(i+1)+'"\ style="background: url('+ itemArray[i].logoImage +');">\
<div class="overlay" onclick="moreItemInfo('+i+')"\ style="background-color: '+ itemArray[i].squareColor +'">\
<div class="solidColorDiv"></div>\
<div class="itemInfoContainer">\
<div class="itemInfo">'+ itemArray[i].info_1 +'</div>\
<div class="itemButton">\
<div class="arrow-flip-down"></div>\
<div class="more-info-plus">learn more</div>\
</div></div></div></div></div>';
}
// more info maker
function makeMoreInfo(j, itemArray) { return '\
<div class="moreInfoDiv zeroHeight" id="moreInfo_'+(j+1)+'">\
<div onclick="closeItemInfo()" class="xCloseInfo"></div>\
<div class="moreInfoText" id="infoText_'+(j+1)+'">' + itemArray[j].info_2 + '</div>\
</div>';
}
function addSpacer() { ssItemsStringHolder.push('<div class="spacerContainer"></div>');
}
//--------------end html makers-------^^
//variables
var itemContainer = document.getElementById('itemContainer');
var ssItemsLength = 0;
var ssItemsStringHolder = [];
var all_ssItems = '';
var j = 0;
//new deals array maker
function getNewDealItems(ssItems_all) { for(i = 0; i < ssItems_all.length; i++) { if(ssItems_all[i].newItem) { ssItems_newDeals.push(ssItems_all[i]); } }
}
//old deal array maker
function getOldDealItems(ssItems_all) { for(i = 0; i < ssItems_all.length; i++) { if(!ssItems_all[i].newItem) { ssItems_oldDeals.push(ssItems_all[i]); } }
}
//make new and old deal items arrays
getNewDealItems(ssItems_all);
getOldDealItems(ssItems_all);
//calculate length of array being used
function numberOfItems(itemArray) { return itemArray.length;
}
//CREATE ITEM LIST FUNCTIONS-----vv
//function for handling html strings
function joinSsItemsAndPut() { all_ssItems = ''; all_ssItems = ssItemsStringHolder.join(""); itemContainer.innerHTML = all_ssItems;
}
//sequencing HTML
function addInfosAndSpacer(itemArray) { for (x = 0; x < 3; x++) { ssItemsStringHolder.push(makeMoreInfo(j, itemArray)); if (j === (ssItemsLength-1)) { break; } j++; } addSpacer();
}
function placeMoreInfo(itemArray) { if ( (i+1) % 3 === 0 ) { addInfosAndSpacer(itemArray); }
}
//SPIN STUFF HERE----------------vv
function spinImage(i) { $('#ssItem_'+(i+1)).removeClass("spinImage");
}
function cascadeSpinItems(i, waitTime) { window.setTimeout(function() { spinImage(i); }, waitTime);
}
function spinAllImages() { var spinWaitTime = 400; for (i = 0; i < ssItemsLength ; i++) { cascadeSpinItems(i, spinWaitTime); spinWaitTime += 40; }
}
//----MAIN ITEM FUNCTION----vv
//sequence items and put to page---------vv
function sequenceItems (itemArray) { //initialize variables ssItemsLength = 0; j = 0; //separate counter ssItemsStringHolder = []; ssItemsLength = numberOfItems(itemArray); for (i = 0; i < ssItemsLength ; i++) { ssItemsStringHolder.push(makeItem(i, itemArray)); placeMoreInfo(itemArray); } //non-multiple of 3 moreinfo exception here if (ssItemsLength % 3 !== 0) { addInfosAndSpacer(itemArray); } joinSsItemsAndPut(); spinAllImages();
}
//show all items on pageload
sequenceItems(ssItems_all);
// button onclick functions
//(replace this with jquery .click) .. maybe not..
function showMoreInfo(itemNum) { for (i = 0; i < ssItemsLength ; i++) { if (itemNum === i && $('#moreInfo_'+(i+1)).hasClass("zeroHeight")) { $('#moreInfo_'+(i+1)).removeClass("zeroHeight"); break; } else if (itemNum === i) { $('#moreInfo_'+(i+1)).addClass("zeroHeight"); } }
}
function hideNotClickedInfo(itemNum) { for (i = 0; i < ssItemsLength ; i++) { if(itemNum !== i) { $('#moreInfo_'+(i+1)).addClass("zeroHeight"); } }
}
// more info button onclick MAIN FUNCTION //
function moreItemInfo(itemNum) { showMoreInfo(itemNum); hideNotClickedInfo(itemNum);
}
// not used atm
function closeItemInfo() { $('.moreInfoDiv').addClass("zeroHeight"); $('.overlay').removeClass('itemSlide'); $('.overlay').removeClass('keepSlide');
}
//square slide
$(document.body)
.on('mouseenter', ".item", function() { $(this).children('.overlay').addClass('itemSlide');
})
.on('mouseleave', ".item", function() { $(this).children('.overlay').removeClass('itemSlide');
});
//arrows start in flipped up position
$('.arrow-flip-down').transition({rotateX: '180deg'});
//arrows in flipped up pos when filter buttons are clicked
$(document.body).on('click', ".filterButton", function () { $('.arrow-flip-down').transition({rotateX: '180deg'});
});
//make overlay transparent and flip arrow down on click
$(document.body).on('click', ".overlay", function () { $(this).children('.itemInfoContainer').children('.itemButton') .children('div').css({ transformOrigin: '0 9px' }) .transition({ rotateX: '+=90deg' }); $(this).children('.itemInfoContainer') .siblings('.solidColorDiv').fadeToggle("fast", 0);
});
//keep overlay up if clicked and close others
$(document.body).on('click', ".overlay", function() { $(this).toggleClass('keepSlide'); $(".overlay").not(this).removeClass('keepSlide').removeClass('itemSlide'); //initialize opaque div, rotation of arrows, and "learn more" of items not clicked $(".overlay").not(this).find('.arrow-flip-down').transition({rotateX: '180deg'}); $(".overlay").not(this).find('.more-info-plus').transition({rotateX: '0deg'}); $(".overlay").not(this).find('.solidColorDiv').fadeIn("fast");
});
$('.filterButton').click(function() { $(this).addClass("filterButton-selected"); $('.filterButton').not(this).removeClass("filterButton-selected");
});
//BONEYARD-----------------------------------------vv
//close moreInfo if different item
/*$(".item").mouseenter(function() { for (i = 0; i < ssItemsLength ; i++) { if(!$(this).is('#ssItem_'+(i+1))) { $('#moreInfo_'+(i+1)).addClass('zeroHeight'); } }
});*/
Developer | Harry Sadler |
Username | harrysadlermusic |
Uploaded | November 29, 2022 |
Rating | 3 |
Size | 5,651 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Secret Store - item filter v3 | 5,675 Kb |
Forked to learn rotateY | 2,189 Kb |
Change Table Cells with Slider | 2,144 Kb |
SFS hover cross-browser testing | 4,153 Kb |
Simple Javascript Quiz | 3,427 Kb |
SFS Secret Store | 11,361 Kb |
A hover effect | 2,142 Kb |
Audio Button example | 1,631 Kb |
Simple responsive web layout | 1,840 Kb |
Symphony Style Quiz | 9,131 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
Horizontal scroll fixed element | HerrSerker | 0 Kb |
Segments mouse following | Nosir | 2,909 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
Angular Sandbox | Alexgurrola | 1,616 Kb |
Shopping List | Markmurray | 6,015 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Scifi-style Radio-based Tab | Aaronchuo | 4,427 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!