Secret Store - item filter v3
How do I make an secret store - item filter v3?
Using yet another of the new item styles! Need to redo logo images to make space for the new item tabs.. What is a secret store - item filter v3? How do you make a secret store - item filter v3? This script and codes were developed by Harry Sadler on 29 November 2022, Tuesday.
Secret Store - item filter v3 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Secret Store - item filter v3</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 v3 - Script Codes CSS Codes
body { background-color: #390a20;
}
#mainContainer { 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);
}
.new-item { /*a marker for now*/
}
.overlay { height: 200px; width: 200px; overflow: hidden; -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;
}
.item-startPos { -moz-transform: translatey(200px); -ms-transform: translatey(200px); -o-transform: translatey(200px); -webkit-transform: translatey(200px); transform: translatey(200px);
}
.new-itemStartPos { -moz-transform: translatey(180px); -ms-transform: translatey(180px); -o-transform: translatey(180px); -webkit-transform: translatey(180px); transform: translatey(180px);
}
.new-itemTab { position: absolute; background-color: #f0a015; border-bottom:2px solid white; height:20px; width:200px;
}
.new-item-text { position: absolute; top: 2px; left: 42%; color:white; font-weight: bold; *font-style:italic; font-family: Arial, Helvetica, sans-serif; font-size: 13px; text-shadow: 0px 1px 1px rgba(0, 0, 0, .3);
}
.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;
}
.learn-more-text { 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: 45px; width: 95px; left:26%; bottom: 10%; padding: 0; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.info-arrow { position: absolute; bottom: 13%; left: 43%; width: 30px; height: 14px; background: url('https://i.imgur.com/e3zhsm5.png');
}
.moreInfoDiv { background-color: LightGray; max-height: 300px; width: 626px; clear: both; margin: 0 0 0 13px; 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 v3 - 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(37,154,207, .93)', 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(37,154,207, .93)', 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(37,154,207, .93)', 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(37,154,207, .93)', 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(37,154,207, .93)', 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(37,154,207, .93)', 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(37,154,207, .93)', 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(37,154,207, .93)', 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 = [];
//is item new?
function newItemLabel(item) { if (ssItems_all[item].newItem) { return "new-item"; } else { return ""; }
}
//----------------HTML MAKERS---------vv
// item maker
function makeItem(i, itemArray) { return '\
<div class="behindItem">\
<div class="item '+newItemLabel(i)+' 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="itemInfoContainer">\
<div class="itemInfo">'+ itemArray[i].info_1 +'</div>\
<div class="learn-more-text">learn more</div>\
<div class="info-arrow"></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; }
}
//--NEW ITEM STUFF HERE--//
function newItemStuff() { //add overlay start position class $('.item').children('.overlay').addClass("item-startPos"); //add alternate overlay start position class for "new" items $('.new-item').children('.overlay') .removeClass("item-startPos").addClass("new-itemStartPos"); //add "new" text to new items $('.new-item').children('.overlay') .prepend("<div class=\"new-itemTab\"><span class=\"new-item-text\">New!</span></div>");
}
//----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(); newItemStuff(); 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);
}
// "x to close" not used at the moment
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');
});
//when overlay clicked
$(document.body).on('click', ".overlay", function() { $(this).toggleClass('keepSlide'); //keep item open //flip arrow $(this).find('.info-arrow').css({ transformOrigin: '0 7px' }) .transition({ rotateX: '+=180deg' }); //closes items not clicked and initializes rotation of arrows $(".overlay").not(this).removeClass('keepSlide itemSlide'); $(".overlay").not(this).find('.info-arrow').transition({rotateX: '0deg'});
});
$('.filterButton').click(function() { $(this).addClass("filterButton-selected"); $('.filterButton').not(this).removeClass("filterButton-selected");
});
Developer | Harry Sadler |
Username | harrysadlermusic |
Uploaded | November 29, 2022 |
Rating | 3 |
Size | 5,675 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 |
Simple Javascript Quiz | 3,427 Kb |
Secret Store - item filter v3 | 5,675 Kb |
Symphony Style Quiz | 9,131 Kb |
SFS Secret Store | 11,361 Kb |
Change Table Cells with Slider | 2,144 Kb |
Secret Store - item filter v2 | 5,651 Kb |
Memory Game | 7,463 Kb |
Audio Button example | 1,631 Kb |
JS for card game | 5,115 Kb |
Simple responsive web layout | 1,840 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 |
Button fills | Zubfatal | 5,205 Kb |
Brent Burns Tribute Page | Nevada48 | 2,569 Kb |
TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
Subtle site navigation with description | Necks | 3,206 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
Pure CSS Menu | Bronsrobin | 3,321 Kb |
Price | Catcode | 2,623 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
Mario | Takaneichinose | 3,902 Kb |
3D flipping card | Ssaakkaa | 2,238 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!