SFS hover cross-browser testing

Developer
Harry Sadler
Size
4,153 Kb
Views
6,072
  1. SFS hover cross-browser testing Previews
  2. SFS hover cross-browser testing HTML Codes
  3. SFS hover cross-browser testing CSS Codes
  4. SFS hover cross-browser testing JS Codes

How do I make an sfs hover cross-browser testing?

Testing spin effect in multiple browsers.. What is a sfs hover cross-browser testing? How do you make a sfs hover cross-browser testing? This script and codes were developed by Harry Sadler on 29 November 2022, Tuesday.

SFS hover cross-browser testing Previews
IQ Test

SFS hover cross-browser testing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SFS hover cross-browser testing </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div id="mainContainer"> <div class="spacerContainer"> <!--all items are generated by jscript--> <!--their info comes from the ssItems array--> </div> <div id="itemContainer"></div> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SFS hover cross-browser testing - Script Codes CSS Codes

body { background-color: DarkBlue;
}
#mainContainer { margin: 25px auto; padding: 0; width: 690px; height: auto; background: white
}
.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; -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; 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
}
.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: 55px 0 auto 0; color: white; font-family: arial; font-weight: bold; font-size: 13px; float: initial; line-height: 18px; text-align: center; padding: 6px; overflow: hidden;
}
.itemButton { font-weight: bold; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 16px; background-color: #fbca0e; border-bottom: 1px solid #000; border-right: 1px solid #000; padding: 4px 8px; float: initial; height: 19px; width: auto; margin: 28px 35px auto 35px; text-transform: uppercase; cursor: pointer
}
.newItem { background-color: #248F24
}
.moreInfoDiv { background-color: LightGray; font-family: arial; font-weight: bold; font-size: 13px; max-height: 160px; width: auto; clear: both; margin: 0 0 0 0; overflow: hidden; -moz-transition: max-height 0.5s; -o-transition: max-height 0.5s; -webkit-transition: max-height 0.5s; transition: max-height 0.5s; -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
}
.infoText { 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;
}
/*CURRENTLY BROKEN IN CHROME
/*.spinImage { -moz-transform: rotatey(90deg); -ms-transform: rotatey(90deg); -webkit-transform: rotatey(90deg); -o-transform: rotatey(90deg); transform: rotatey(90deg);
}*/

SFS hover cross-browser testing - Script Codes JS Codes

var ssItems = [ { itemNumber: '1', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/04/Mock-Logo_forHoverDesign_200x200.jpg', squareColor: 'green', info_1: 'info for the first item', info_2: 'more info for the first item', }, { itemNumber: '2', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/04/Mock-Logo_forHoverDesign_200x200.jpg', squareColor: 'red', info_1: 'info item 2', info_2: 'item number 2 has more info as well', }, { itemNumber: '3', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/04/Mock-Logo_forHoverDesign_200x200.jpg', squareColor: 'blue', info_1: '3rd item information', info_2: '#3\'s additional info is right here', }, { itemNumber: '4', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/04/Mock-Logo_forHoverDesign_200x200.jpg', squareColor: 'brown', info_1: 'info for the fourth item', info_2: 'more info for the fourth item', }, { itemNumber: '5', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/04/Mock-Logo_forHoverDesign_200x200.jpg', squareColor: 'orange', info_1: 'info item 5', info_2: 'item number 5 has more info as well', }, { itemNumber: '6', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/04/Mock-Logo_forHoverDesign_200x200.jpg', squareColor: 'HotPink', info_1: '6rd item information', info_2: '#6\'s additional info is right here', }, { itemNumber: '7', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/04/Mock-Logo_forHoverDesign_200x200.jpg', squareColor: 'SlateGray', info_1: 'info for the seventh item', info_2: 'more info for the seventh item', }, { itemNumber: '8', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/04/Mock-Logo_forHoverDesign_200x200.jpg', squareColor: 'DarkMagenta', info_1: 'info item 8', info_2: 'item number 8 has more info as well', }, { itemNumber: '9', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/04/Mock-Logo_forHoverDesign_200x200.jpg', squareColor: 'MidnightBlue', info_1: '9rd item information', info_2: '#9\'s additional info is right here', }, { itemNumber: '10', logoImage: 'http://www.harrysadlermusic.com/wp-content/uploads/2014/04/Mock-Logo_forHoverDesign_200x200.jpg', squareColor: 'DarkGoldenRod', info_1: 'info for the tenth item', info_2: 'more info for the tenth item', },
]; // item maker function makeItem(i) { return '\ <div class="behindItem">\ <div class="item spinImage" id="ssItem_'+(i+1)+'" style="background: url('+ ssItems[i].logoImage +');">\ <div class="overlay" style="background-color: '+ ssItems[i].squareColor +'">\ <div class="itemInfoContainer">\ <div class="itemInfo">'+ ssItems[i].info_1 +'</div>\ <div onClick="moreItemInfo('+i+')" class="itemButton">learn more</div>\ </div></div></div></div>';
}
// more info maker
function makeMoreInfo(j) { return '\ <div class="moreInfoDiv zeroHeight" id="moreInfo_'+(j+1)+'">\ <div onClick="closeItemInfo()" class="xCloseInfo">X</div>\ <p class="infoText" id="infoText_'+(j+1)+'">' + ssItems[j].info_2 + '</p>\ </div>';
}
function addSpacer() { ssItemsStringHolder.push('<div class="spacerContainer"></div>');
}
// items put to HTML
var itemContainer = document.getElementById('itemContainer');
var ssItemsLength = ssItems.length;
var ssItemsStringHolder = [];
var all_ssItems = '';
var j = 0;
//function for string handling
function joinSsItemsAndPut() { all_ssItems = ssItemsStringHolder.join(""); itemContainer.innerHTML = all_ssItems;
}
//sequencing the HTML
function addInfosAndSpacer() { for (x = 0; x < 3; x++) { ssItemsStringHolder.push(makeMoreInfo(j)); if (j === (ssItemsLength-1)) { break; } j++; } addSpacer();
}
function placeMoreInfo() { if ( (i+1) % 3 === 0 ) { addInfosAndSpacer(); }
}
for (i = 0; i < ssItemsLength ; i++) { ssItemsStringHolder.push(makeItem(i)); placeMoreInfo();
}
//non-multiple of 3 exception here
if (ssItemsLength % 3 !== 0) { addInfosAndSpacer();
}
joinSsItemsAndPut();
//SPIN STUFF HERE
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; }
}
spinAllImages();
// button onclick functions
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);
}
function closeItemInfo() { $('.moreInfoDiv').addClass("zeroHeight");
}
//JQUERY DOC READY STUFF
$(document).ready(function(){ //square slide $(".item") .mouseenter(function() { $(this).children('.overlay').addClass('itemSlide'); $(".item").not(this).children('.overlay').removeClass('keepSlide'); }) .mouseleave(function() { $(this).children('.overlay').removeClass('itemSlide'); }); //keep overlay up if more info clicked $(".item") .click(function() { $(this).children('.overlay').addClass('keepSlide'); }); //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'); } } });
});
SFS hover cross-browser testing - Script Codes
SFS hover cross-browser testing - Script Codes
Home Page Home
Developer Harry Sadler
Username harrysadlermusic
Uploaded November 29, 2022
Rating 3
Size 4,153 Kb
Views 6,072
Do you need developer help for SFS hover cross-browser testing?

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
Name
Simple Javascript Quiz
A hover effect
Audio Button example
JS for card game
Item design 2
Change Table Cells with Slider
SFS Secret Store
Secret Store - item filter v2
Symphony Style Quiz
Memory Game
Create amazing captions 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!