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 responsive web layout | 1,840 Kb |
Item design 2 | 3,205 Kb |
JS for card game | 5,115 Kb |
Secret Store - item filter v2 | 5,651 Kb |
Symphony Style Quiz | 9,131 Kb |
Change Table Cells with Slider | 2,144 Kb |
Memory Game | 7,463 Kb |
Simple Javascript Quiz | 3,427 Kb |
Page layout | 1,862 Kb |
SFS hover effect v8 | 4,716 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 |
Importable Clearfix | Corysimmons | 1,411 Kb |
CSS Link Icons with jQuery Titles | Nicwinn | 2,312 Kb |
My Interests | Anshusaxenaarora | 2,015 Kb |
Custom Select Element | Agrayson | 3,616 Kb |
Fading Navigation Bar | J-w-v | 2,805 Kb |
A Pen by Shidhin | Shidhincr | 5,015 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
NgEasyModal | Lorenzodianni | 4,159 Kb |
Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 Kb |
CSS3 iPad | Vikvarg | 1,766 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!