Secret Store - item filter v3

Developer
Size
5,675 Kb
Views
6,072

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 Previews

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");
});
Secret Store - item filter v3 - Script Codes
Secret Store - item filter v3 - Script Codes
Home Page Home
Developer Harry Sadler
Username harrysadlermusic
Uploaded November 29, 2022
Rating 3
Size 5,675 Kb
Views 6,072
Do you need developer help for Secret Store - item filter v3?

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!

Harry Sadler (harrysadlermusic) Script Codes
Create amazing SEO content with AI!

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!