I am trying to port the Adblocker Genesis Plus extension from Google Chrome to Firefox, but the popup.html is showing big scrollbars (I am using it as a temporary extension through about:debugging). How do I make it look the way it does in Chrome?
I tried defining the width and height with css but the scrollbars were still there.
Here is the popup.html (not my code, this is copied from the Chrome version)
<!DOCTYPE html>
<html id="uBO-popup-panel">
<head>
<meta name="viewport" content="width=470"> <meta charset="UTF-8"><!-- When showing as a tab in fennec, scale to full size (150px + 320px) -->
<meta charset="utf-8">
<link rel="stylesheet" href="css/common.css" type="text/css">
<link rel="stylesheet" href="css/popup.css" type="text/css">
<title>uBlock</title>
</head>
<body>
<span id="appname"> </span> <span id="version"> </span><span class="fa"></span>
<div id="panes">
<div class="tooltipContainer">
<p id="switch" data-i18n-tip="popupPowerSwitchInfo" data-tip-position="under"><span class="fa"></span></p>
<h2 id="dfToggler" data-i18n="popupBlockedRequestPrompt"> </h2>
<p class="statName">
<span data-i18n="popupBlockedOnThisPagePrompt"> </span>
<span id="gotoPick" class="fa tool" data-i18n-tip="popupTipPicker"></span>
</p>
<p class="statValue" id="page-blocked">?</p>
<div id="refresh" class="fa"></div>
<p class="statName">
<span data-i18n="popupBlockedSinceInstallPrompt"> </span>
</p>
<p class="statValue" id="total-blocked">?</p>
<h2 data-i18n="popupHitDomainCountPrompt"> </h2>
<p class="statValue" id="popupHitDomainCount"> </p>
<div id="extraTools">
<span id="no-popups" class="hnSwitch fa" data-i18n-tip="popupTipNoPopups"><span class="badge"></span><span></span></span>
<span id="no-large-media" class="hnSwitch fa" data-i18n-tip="popupTipNoLargeMedia"><span class="badge"></span><span></span></span>
<span id="no-cosmetic-filtering" class="hnSwitch fa" data-i18n-tip="popupTipNoCosmeticFiltering"><span class="badge"></span><span></span></span>
<span id="no-remote-fonts" class="hnSwitch fa" data-i18n-tip="popupTipNoRemoteFonts"><span class="badge"></span><span></span></span>
</div>
</div><!-- DO NOT REMOVE --><div class="tooltipContainer">
<div id="firewallContainer" class="minimized">
<div><span data-i18n="popupAnyRulePrompt"></span><span data-src="/" data-des="*" data-type="*" data-i18n-tip="popupTipGlobalRules" data-tip-position="under"> </span><span data-src="." data-des="*" data-type="*" data-i18n-tip="popupTipLocalRules" data-tip-position="under"> </span></div>
<div><span data-i18n="popupImageRulePrompt"></span><span data-src="/" data-des="*" data-type="image"> </span><span data-src="." data-des="*" data-type="image"> </span></div>
<div><span data-i18n="popup3pAnyRulePrompt"></span><span data-src="/" data-des="*" data-type="3p"> </span><span data-src="." data-des="*" data-type="3p"> </span></div>
<div><span data-i18n="popupInlineScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="inline-script"> </span><span data-src="." data-des="*" data-type="inline-script"> </span></div>
<div><span data-i18n="popup1pScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="1p-script"> </span><span data-src="." data-des="*" data-type="1p-script"> </span></div>
<div><span data-i18n="popup3pScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="3p-script"> </span><span data-src="." data-des="*" data-type="3p-script"> </span></div>
<div><span data-i18n="popup3pFrameRulePrompt"></span><span data-src="/" data-des="*" data-type="3p-frame"> </span><span data-src="." data-des="*" data-type="3p-frame"> </span></div>
</div><div id="rulesetTools"><span id="saveRules" class="fa" data-i18n-tip="popupTipSaveRules" data-tip-position="under"></span><span id="revertRules" class="fa" data-i18n-tip="popupTipRevertRules" data-tip-position="under"></span></div>
</div>
</div>
<div id="templates" style="display: none">
<div><span></span><span data-src="/" data-des="" data-type="*"></span><span data-src="." data-des="" data-type="*"></span><span data-src="." data-des="" data-type="*"></span></div>
<div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span></div>
<div id="hotspotTip"></div>
<div id="tooltip"></div>
</div>
<script src="lib/punycode.js"></script>
<script src="js/vapi-common.js"></script>
<script src="js/vapi-client.js"></script>
<script src="js/udom.js"></script>
<script src="js/i18n.js"></script>
<script src="js/popup.js"></script>
</body>
</html>
popup.css
body {
background-color: white;
border: 0;
float: left;
margin: 0;
opacity: 1;
overflow: hidden;
padding: 0;
white-space: nowrap;
}
body.fullsize {
overflow: auto;
}
body.mobile {
overflow-y: auto;
}
/**
https://github.com/gorhill/uBlock/issues/83
.portrait = portrait mode = width is constrained = optimize layout accordingly.
*/
body.portrait {
width: 100%;
}
h2 {
background-color: #eee;
border: 0;
color: #666;
cursor: pointer;
font-size: 100%;
font-weight: normal;
margin: 1em 0 0.8em 0;
padding: 0.2em;
text-align: center;
}
h2:nth-of-type(1) {
margin-top: 0;
}
a {
color: inherit;
text-decoration: none;
}
:focus {
outline: 0;
}
#gotoPrefs {
background-color: #444;
border: 0;
color: #bbb;
cursor: pointer;
display: block;
font-size: 85%;
line-height: 1.2;
margin: 0;
padding: calc(0.1em + 1px) 0;
position: relative;
text-align: center;
}
#version {
font-size: 90%;
font-weight: normal;
}
#gotoPrefs > span:nth-of-type(3) {
opacity: 0.5;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
body[dir="ltr"] #gotoPrefs > span:nth-of-type(3) {
left: 3px;
}
body[dir="rtl"] #gotoPrefs > span:nth-of-type(3) {
right: 3px;
}
body[dir="ltr"] #panes {
direction: rtl;
}
body[dir="rtl"] #panes {
direction: ltr;
}
body, #panes {
text-align: right; /* this helps the popup render better at "intermediate" widths */
}
#panes > div {
display: inline-block;
position: relative;
vertical-align: top;
}
body.portrait #panes > div {
display: block;
width: 100%;
}
body[dir="ltr"] #panes > div {
direction: ltr;
}
body[dir="rtl"] #panes > div {
direction: rtl;
}
#panes > div:nth-of-type(2) {
font-family: "Noto Sans", sans-serif;
overflow-y: auto;
overflow-x: hidden;
width: 24em;
}
/**
Scroll bar to the left.
*/
body[dir="ltr"] #panes > div:nth-of-type(2) {
direction: rtl;
margin-right: 1px;
}
/**
Scroll bar to the right.
Firefox bug: when popup is rendered inside hamburger menu panel, Firefox is
unable to render the scroll bar to the left.
Maybe <https://bugzilla.mozilla.org/show_bug.cgi?id=1139306>?
*/
body[dir="rtl"] #panes > div:nth-of-type(2),
body.portrait[dir="ltr"] #panes > div:nth-of-type(2) {
direction: ltr;
margin-left: 1px;
}
#panes:not(.dfEnabled) > div:nth-of-type(2) {
display: none;
}
#panes > div:nth-of-type(1) {
min-width: 11em;
padding: 0;
}
p {
text-align: center;
white-space: nowrap;
}
.fa {
font-size: 120%;
}
#switch {
margin: 8px 0;
}
#switch .fa {
color: #0046ff;
cursor: pointer;
font-size: 700%;
margin: 0;
}
#switch .fa:hover {
opacity: 0.9;
}
body.off #switch .fa {
color: #ccc;
}
#page-blocked {
font-size: 1.25em;
}
.statName {
color: #888;
font-size: 85%;
margin: 0.8em 0.2em 0.4em 0.2em;
text-align: center;
}
.statValue {
margin: 0;
text-align: center;
}
.tool {
color: #aaa;
cursor: pointer;
display: none;
unicode-bidi: embed;
}
.tool.enabled {
display: inline;
}
.tool:hover {
color: #444;
}
#extraTools {
background-color: #eee;
border: 0;
color: #aaa;
margin: 0.8em 0 0 0;
padding: 4px 0;
text-align: center;
}
#extraTools > span {
cursor: pointer;
font-size: 1.2em;
margin: 0 0.4em;
position: relative;
}
#extraTools > span > span.badge {
color: #222;
bottom: -1px;
font: x-small sans-serif;
position: absolute;
}
body[dir="ltr"] #extraTools > span > span.badge {
left: 100%;
}
body[dir="rtl"] #extraTools > span > span.badge {
right: 100%;
}
#extraTools > span.on > span:last-of-type {
color: #e00;
font-size: 1.1em;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
}
#extraTools > span.on > span:last-of-type:after {
content: '\2715';
}
#extraTools > span:hover {
color: #444;
}
#refresh {
background-color: #ffe;
border: 1px solid #ddc;
border-radius: 4px;
color: #888;
cursor: pointer;
display: none;
font-size: 3.5em;
left: 4px;
line-height: 1;
padding: 4px 8px;
position: absolute;
right: 4px;
text-align: center;
}
body.dirty #refresh {
display: block;
}
body.dirty #refresh:hover {
color: black;
}
#tooltip {
background-color: #ffffee;
border: 1px solid gray;
border-radius: 3px;
box-shadow: 1px 1px 3px gray;
box-sizing: border-box;
color: black;
cursor: pointer;
direction: ltr;
font: 12px sans-serif;
left: 5%;
line-height: 130%;
margin: 0.5em 0;
opacity: 0;
padding: 4px 6px;
pointer-events: none;
position: absolute;
text-align: center;
visibility: hidden;
white-space: pre-line;
width: 90%;
z-index: 100;
}
body[dir="rtl"] #tooltip {
direction: rtl;
}
#tooltip.show {
transition: opacity 0.15s 0.5s;
-webkit-transition: opacity 0.15s 0.5s;
visibility: visible;
opacity: 1;
}
#firewallContainer {
border: 0;
font-size: 85%;
margin: 0;
padding: 0;
text-align: right;
}
#firewallContainer > div {
background-color: #e6e6e6;
border: 0;
direction: ltr;
margin: 0;
padding: 0;
}
#firewallContainer > div:hover {
background-color: #f0f0f0;
}
#firewallContainer > div:first-child ~ div:not([class]) {
display: none;
}
#firewallContainer.minimized > div.isSubDomain {
display: none;
}
#firewallContainer > div > span {
background-color: transparent;
border: none;
border-bottom: 1px solid white;
box-sizing: border-box;
-moz-box-sizing: border-box;
color: #000;
display: inline-block;
height: 1.9em;
line-height: 1.9em;
overflow: hidden;
position: relative;
vertical-align: top;
}
#firewallContainer > div:nth-of-type(1) > span:nth-of-type(1) {
cursor: pointer;
}
#firewallContainer > div > span:nth-of-type(1) {
padding-right: 2px;
position: relative;
text-overflow: ellipsis;
width: calc(100% - 4em);
}
#firewallContainer > div > span:nth-of-type(2) {
display: none;
}
#firewallContainer > div > span:nth-of-type(1) ~ span {
border-left: 1px solid white;
width: 4em;
}
#firewallContainer > div > span:nth-of-type(3),
#firewallContainer > div > span:nth-of-type(4) {
color: #444;
text-align: center;
}
#firewallContainer > div > span:nth-of-type(4) {
display: none;
}
#firewallContainer > div.isDomain > span:nth-of-type(1) {
font-weight: bold;
}
#firewallContainer > div:nth-of-type(1) > span:nth-of-type(1):before {
color: #aaa;
content: '\2012';
padding-right: 0.25em;
}
#firewallContainer.minimized > div:nth-of-type(1) > span:nth-of-type(1):before {
content: '+';
}
#firewallContainer.minimized > div.isDomain > span:nth-of-type(3) {
display: none;
}
#firewallContainer.minimized > div.isDomain > span:nth-of-type(4) {
display: inline-block;
}
#firewallContainer > div > span[data-acount]:before,
#firewallContainer > div > span[data-bcount]:after {
position: absolute;
}
#firewallContainer > div > span[data-acount]:before {
left: 0.1em;
}
#firewallContainer > div > span[data-acount="1"]:before {
content: '+';
}
#firewallContainer > div > span[data-acount="2"]:before {
content: '++';
}
#firewallContainer > div > span[data-acount="3"]:before {
content: '+++';
}
#firewallContainer > div > span[data-bcount]:after {
right: 0.1em;
}
#firewallContainer > div > span[data-bcount="1"]:after {
content: '\2212';
}
#firewallContainer > div > span[data-bcount="2"]:after {
content: '\2212\2212';
}
#firewallContainer > div > span[data-bcount="3"]:after {
content: '\2212\2212\2212';
}
body.advancedUser #firewallContainer > div > span:nth-of-type(1) {
width: calc(100% - 8em);
}
body.advancedUser #firewallContainer > div > span:nth-of-type(2) {
display: inline-block;
}
body.advancedUser #firewallContainer > div:first-child ~ div:not([class]) {
display: block;
}
body.advancedUser #firewallContainer > div > span:nth-of-type(1) ~ span {
cursor: pointer;
}
/**
Small coloured label at the left of a row
*/
#firewallContainer > div.allowed > span:nth-of-type(1):before,
#firewallContainer > div.blocked > span:nth-of-type(1):before,
#firewallContainer.minimized > div.isDomain.totalAllowed > span:nth-of-type(1):before,
#firewallContainer.minimized > div.isDomain.totalBlocked > span:nth-of-type(1):before {
box-sizing: border-box;
content: '';
display: inline-block;
height: 100%;
left: 0;
opacity: 0.4;
position: absolute;
width: 7px;
}
/**
Source for color-blind color scheme from https://github.com/WyohKnott:
https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219
*/
#firewallContainer > div.allowed > span:nth-of-type(1):before,
#firewallContainer.minimized > div.isDomain.totalAllowed > span:nth-of-type(1):before {
background-color: rgb(0, 160, 0);
}
#firewallContainer.colorBlind > div.allowed > span:nth-of-type(1):before,
#firewallContainer.colorBlind.minimized > div.isDomain.totalAllowed > span:nth-of-type(1):before {
background-color: rgb(255, 194, 57);
}
#firewallContainer > div.blocked > span:nth-of-type(1):before,
#firewallContainer.minimized > div.isDomain.totalBlocked > span:nth-of-type(1):before {
background-color: rgb(192, 0, 0);
}
#firewallContainer.colorBlind > div.blocked > span:nth-of-type(1):before,
#firewallContainer.colorBlind.minimized > div.isDomain.totalBlocked > span:nth-of-type(1):before {
background-color: rgb(0, 19, 110);
}
#firewallContainer > div.allowed.blocked > span:nth-of-type(1):before,
#firewallContainer.minimized > div.isDomain.totalAllowed.totalBlocked > span:nth-of-type(1):before {
background-color: rgb(192, 160, 0);
}
/* Rule cells */
body.advancedUser #firewallContainer > div > span.aRule {
background-color: rgba(0, 160, 0, 0.3);
}
body.advancedUser #firewallContainer.colorBlind > div > span.aRule {
background-color: rgba(255, 194, 57, 0.4);
}
body.advancedUser #firewallContainer > div > span.bRule {
background-color: rgba(192, 0, 0, 0.3);
}
body.advancedUser #firewallContainer.colorBlind > div > span.bRule {
background-color: rgba(0, 19, 110, 0.4);
}
body.advancedUser #firewallContainer > div > span.nRule {
background-color: rgba(108, 108, 108, 0.3);
}
body.advancedUser #firewallContainer.colorBlind > div > span.nRule {
background-color: rgba(96, 96, 96, 0.4);
}
body.advancedUser #firewallContainer > div > span.ownRule {
color: white;
}
body.advancedUser #firewallContainer > div > span.aRule.ownRule {
background-color: rgba(0, 160, 0, 1);
}
body.advancedUser #firewallContainer.colorBlind > div > span.aRule.ownRule {
background-color: rgba(255, 194, 57, 1);
}
body.advancedUser #firewallContainer > div > span.bRule.ownRule {
background-color: rgba(192, 0, 0, 1);
}
body.advancedUser #firewallContainer.colorBlind > div > span.bRule.ownRule {
background-color: rgba(0, 19, 110, 1);
}
body.advancedUser #firewallContainer > div > span.nRule.ownRule {
background-color: rgba(108, 108, 108, 1);
}
#actionSelector {
bottom: 0;
left: 0;
position: absolute;
top: 0;
width: 4em;
z-index: 1;
}
#actionSelector > span {
display: inline-block;
height: 100%;
opacity: 0.2;
}
#actionSelector > span:nth-of-type(1) {
width: 33%;
}
#actionSelector > span:nth-of-type(2) {
width: 33.5%;
}
#actionSelector > span:nth-of-type(3) {
width: 33.5%;
}
#actionSelector > span:hover {
opacity: 0.75;
}
#actionSelector > span:nth-of-type(1) {
background-color: rgb(0, 160, 0);
}
#actionSelector.colorBlind > span:nth-of-type(1) {
background-color: rgb(255, 194, 57);
}
#actionSelector > span:nth-of-type(2) {
background-color: rgb(108, 108, 108);
}
#actionSelector > span:nth-of-type(3) {
background-color: rgb(192, 0, 0);
}
#actionSelector.colorBlind > span:nth-of-type(3) {
background-color: rgb(0, 19, 110);
}
#rulesetTools {
background-color: transparent;
border: 0;
color: #888;
display: none;
left: 4px;
padding: 0;
position: fixed;
top: 4px;
}
#rulesetTools > span {
background-color: #ffe;
border: 1px solid #ddc;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 1.8em;
line-height: 1.0;
margin: 0;
margin-right: 0.1em;
padding: 0.2em 0.4em;
text-align: center;
width: 1em;
}
#firewallContainer.dirty ~ #rulesetTools {
display: block;
}
#firewallContainer.dirty ~ #rulesetTools > span:hover {
color: black;
}
Here is a link to some screenshots (and the whole extension if the problem is somewhere else like the popup.js):
https://drive.google.com/drive/folders/1R3niphX6HxgT-MdbhzsRswGXMEV2VSRl?usp=sharing
I expect the Firefox popup to look like the Chrome one.
I was editing the wrong css file. Regular methods of hiding scrollbars are working now!
Related
I have problem with some parts of my spinning-wheel component in built-mode when I deploy my application to server.I have no issue if I run the code locally with "npm run dev", but the problems come when run the code with "npm run build" and "npm start".
Here is the snapshots of development mode (picture 1) and built mode (picture 2):
And this is the scss file I used :
.board-arisan-container {
--wheel-size: 300px;
--wheel-slice-spacing: 50px;
--wheel-border-size: 5px;
--wheel-color: #ffad00;
--neutral-color: #ffffff;
--PI: 3.60;
--nb-item: 0;
--item-nb: 0;
--selected-item: 0;
--nb-turn: 5;
--spinning-duration: 4s;
--reset-duration: 0.25s;
transform: rotate(-90deg);
.wheel-container {
display: block;
position: relative;
box-sizing: content-box;
width: calc(var(--wheel-size) + 2 * var(--wheel-border-size));
height: calc(var(--wheel-size) + 2 * var(--wheel-border-size));
padding: 3px;
margin: auto;
background-color: var(--neutral-color);
border: solid var(--wheel-color) 10px;
border-radius: 50%;
user-select: none;
}
.wheel-container::before,
.wheel-container::after {
content: "";
display: block;
position: absolute;
height: 0;
width: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
border: solid transparent 20px;
border-left-width: 0;
}
.wheel-container::before {
right: 0px;
border-right-color: var(--wheel-color);
}
.wheel-container::after {
right: -5px;
border-right-color: var(--neutral-color);
}
/* Roue */
.wheel {
display: block;
position: relative;
box-sizing: content-box;
margin: auto;
width: var(--wheel-size);
height: var(--wheel-size);
overflow: hidden;
border-radius: 50%;
border: solid var(--wheel-color) var(--wheel-border-size);
background-color: var(--wheel-color);
transition: transform var(--reset-duration);
transform: rotate(0deg);
cursor: pointer;
}
.wheel.spinning {
transition: transform var(--spinning-duration);
transform: rotate(calc(var(--nb-turn) * 360deg + (-360deg * var(--selected-item) / var(--nb-item, 1))));
}
.wheel::after {}
.wheel-item {
display: block;
position: absolute;
box-sizing: border-box;
/* position de l'item */
top: 50%;
left: 50%;
width: 50%;
transform-origin: center left;
transform: translateY(-50%) rotate(calc(var(--item-nb) * (360deg / var(--nb-item, 1))));
/* texte */
color: var(--neutral-color);
text-align: right;
padding: 0 50px 0 50px;
font-family: var(--wheel-font);
}
/* Background de l'élément = triangle rose plus clair */
.wheel-item:before {
content: " ";
display: block;
position: absolute;
box-sizing: border-box;
z-index: -1;
width: 0;
height: 0;
top: 50%;
left: 50%;
transform: translate(-47%, -50%);
padding-left: 0px;
--slice-max-width: calc(var(--PI) * var(--wheel-size) + var(--wheel-size) / 2);
--slice-width: calc((var(--slice-max-width) / var(--nb-item)) - var(--wheel-slice-spacing));
border: solid transparent calc(var(--slice-width) / 2);
border-left: solid transparent 0;
border-right: solid var(--neutral-color) calc(var(--wheel-size) / 2);
}
}
here is the the component code :
...
const wheelVars = {
'--nb-item': props.items.length,
'--selected-item': selectedItem,
}
const spinning = selectedItem !== null ? 'spinning' : '';
return( <div className="board-arisan-container">
<div className="wheel-container">
<div className={`wheel ${spinning}`} style={wheelVars} onClick={() => clearSelectedItem()}>
{props.items.map((item, index) => (
<div className="wheel-item" key={index} style={{
'--item-nb': index,
color: '#ffad00',
fontSize: 30,
fontWeight: 'bolder',
}}>
<span>{item}</span>
</div>
))}
</div>
</div>
</div>)
Thanks!
I am trying to get an overlay over some images I have tried so many ways and I can't seem to get it over the image. The overlay either goes above or below, but won't go over the image. any help would be awesome!
Here is my code:
.friend-profiles {
font-family: "Lora", serif;
width: 52%;
padding-top: 15px;
}
.title-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 0 10px;
text-align: center;
width: 100%;
border: 1px solid #dedede;
box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.1);
outline: none;
height: 35px;
}
.sort {
border: 1px solid #272727;
padding: 1px 10px;
font-size: 8px;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
border-radius: 0;
}
.sort:focus {
outline: none;
}
.friends-list{
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.friend-profilePic {
margin-bottom: 15px;
width: 200px;
height: 150px;
}
.box {
width: 200px;
height: 150px;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
margin:5% auto 0 auto;
background-size:cover;
overflow:hidden;
}
.overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;}
.box:hover .overlay {
opacity:1;}
<div class="friend-profiles">
<nav class="title-header">
<a ui-sref="friend-search"><img src="/images/Icons/Search.svg"></a>
<input class="search-friends" type="text" placeholder="Search For Friends" onfocus="this.placeholder=''" onblur="this.placeholder = 'Search For Friends'">
</nav>
<div class="friends-list">
<div ng-repeat="results in userResults">
<img ng-src="{{results.profileUrl}}" class="friend-profilePic">
<div class="box">
<div class="overlay">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
I have added some element and style, that .box position to absolute.
.friend-profiles {
font-family: "Lora", serif;
width: 52%;
padding-top: 15px;
}
.title-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 0 10px;
text-align: center;
width: 100%;
border: 1px solid #dedede;
box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.1);
outline: none;
height: 35px;
}
.sort {
border: 1px solid #272727;
padding: 1px 10px;
font-size: 8px;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
border-radius: 0;
}
.sort:focus {
outline: none;
}
.friends-list{
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.friend-profilePic {
width: 200px;
height: 150px;
}
.picture-wrapper {
position:relative;
overflow:hidden;
}
.box {
position:absolute;
top:0;left:0;
width: 100%;
height: 100%;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
background-size:cover;
overflow:hidden;
}
.overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
width:100%;height:100%;
}
.box:hover .overlay {
opacity:1;}
<div class="friend-profiles">
<nav class="title-header">
<a ui-sref="friend-search"><img src="/images/Icons/Search.svg"></a>
<input class="search-friends" type="text" placeholder="Search For Friends" onfocus="this.placeholder=''" onblur="this.placeholder = 'Search For Friends'">
</nav>
<div class="friends-list">
<div ng-repeat="results in userResults" class="picture-wrapper">
<img ng-src="{{results.profileUrl}}" class="friend-profilePic">
<div class="box">
<div class="overlay">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
Your question in confusing but As much as I understood you want to show text or another image on image hover
Here is the code:
If it's not what meant tell me.
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background-color: rgba(75,75,75,0.7);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(48, 152, 157, 0.4);
}
.hovereffect img {
display: block;
position: relative;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover h2 {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
margin: -52px 0 0 0;
padding: 62px 100px;
}
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
<div style="width:350px; height:200px;">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<h2>Hover effect</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
How can I add checkboxes to the options/dropdown list using customized Slick.Editor so that I am able to select multiple values from the dropdown list which is attached to click event on a column on grid?
/*
Dropdown with Multiple checkbox select with jQuery - May 27, 2013
(c) 2013 #ElmahdiMahmoud
license: http://www.opensource.org/licenses/mit-license.php
*/
$(".dropdown dt a").on('click', function() {
$(".dropdown dd ul").slideToggle('fast');
});
$(".dropdown dd ul li a").on('click', function() {
$(".dropdown dd ul").hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});
$('.mutliSelect input[type="checkbox"]').on('click', function() {
var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
title = $(this).val() + ",";
if ($(this).is(':checked')) {
var html = '<span title="' + title + '">' + title + '</span>';
$('.multiSel').append(html);
$(".hida").hide();
} else {
$('span[title="' + title + '"]').remove();
var ret = $(".hida");
$('.dropdown dt a').append(ret);
}
});
body {
font: normal 14px/100% "Andale Mono", AndaleMono, monospace;
color: #fff;
padding: 50px;
width: 300px;
margin: 0 auto;
background-color: #374954;
}
.dropdown {
position: absolute;
top:50%;
transform: translateY(-50%);
}
a {
color: #fff;
}
.dropdown dd,
.dropdown dt {
margin: 0px;
padding: 0px;
}
.dropdown ul {
margin: -1px 0 0 0;
}
.dropdown dd {
position: relative;
}
.dropdown a,
.dropdown a:visited {
color: #fff;
text-decoration: none;
outline: none;
font-size: 12px;
}
.dropdown dt a {
background-color: #4F6877;
display: block;
padding: 8px 20px 5px 10px;
min-height: 25px;
line-height: 24px;
overflow: hidden;
border: 0;
width: 272px;
}
.dropdown dt a span,
.multiSel span {
cursor: pointer;
display: inline-block;
padding: 0 3px 2px 0;
}
.dropdown dd ul {
background-color: #4F6877;
border: 0;
color: #fff;
display: none;
left: 0px;
padding: 2px 15px 2px 5px;
position: absolute;
top: 2px;
width: 280px;
list-style: none;
height: 100px;
overflow: auto;
}
.dropdown span.value {
display: none;
}
.dropdown dd ul li a {
padding: 5px;
display: block;
}
.dropdown dd ul li a:hover {
background-color: #fff;
}
button {
background-color: #6BBE92;
width: 302px;
border: 0;
padding: 10px 0;
margin: 5px 0;
text-align: center;
color: #fff;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="dropdown">
<dt>
<a href="#">
<span class="hida">Select</span>
<p class="multiSel"></p>
</a>
</dt>
<dd>
<div class="mutliSelect">
<ul>
<li>
<input type="checkbox" value="Apple" />Apple</li>
<li>
<input type="checkbox" value="Blackberry" />Blackberry</li>
<li>
<input type="checkbox" value="HTC" />HTC</li>
<li>
<input type="checkbox" value="Sony Ericson" />Sony Ericson</li>
<li>
<input type="checkbox" value="Motorola" />Motorola</li>
<li>
<input type="checkbox" value="Nokia" />Nokia</li>
</ul>
</div>
</dd>
<button>Filter</button>
</dl>
Are you looking for something like this
I have found a solution from http://codepen.io/SitePoint/pen/bNYBZX but it i incomplete.
<section class="image-grid">
<div class="image__cell is-collapsed">
<div class="image--basic">
<a href="#expand-jump-1">
<img id="expand-jump-1" class="basic__img" src="http://lorempixel.com/250/250/fashion/1" alt="Fashion 1" />
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<img class="image--large" src="http://lorempixel.com/400/400/fashion/1" alt="Fashion 1" />
</div>
</div>
</section>
I need to have a side gallery for images to load in the preview section on click just like google image search. Here is the image of what I want to do Google Image search layout preview
Thanks.
I Did a codepen with the solution I wanted. http://codepen.io/bahiirwa/pen/BKmmzm
HTML
<section class="image-grid">
<div class="image__cell is-collapsed">
<div class="image--basic">
<a href="#expand-jump-1">
<img id="expand-jump-1"
class="basic__img"
src="http://yourdigitalblend.com/wp-content/uploads/2016/03/DB_Team_Bio_jz.png" alt="Fashion 1">
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<img class="image--large"
src="http://yourdigitalblend.com/wp-content/uploads/2016/03/DB_Team_Bio_jz.png" alt="Fashion 1">
</div>
</div>
<div class="image__cell is-collapsed">
<div class="image--basic">
<a href="#expand-jump-2">
<img id="expand-jump-2"
class="basic__img"
src="http://yourdigitalblend.com/wp-content/uploads/2016/03/DB_Team_Bio-ed.jpg" alt="Fashion 1">
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<img class="image--large"
src="http://yourdigitalblend.com/wp-content/uploads/2016/03/DB_Team_Bio-ed.jpg" alt="Fashion 1">
</div>
</div>
...
</section>
CSS
html {box-sizing: border-box;}
*, *:before, *:after { box-sizing: inherit; }
.image-grid {
width: 100%;
max-width: 1310px;
margin: 0 auto;
overflow: hidden;
padding: 10px 5px 0;
}
.image__cell {
float: left;
position: relative;
width: 20%;
}
.image--basic {
padding: 0 5px;
}
.basic__img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.image__cell.is-collapsed .arrow--up {
display: block;
height: 10px;
width: 100%;
}
.image--large {
max-width: 100%;
height: auto;
display: block;
padding: 40px;
margin: 0 auto;
box-sizing: border-box;
}
.image__cell.is-collapsed .image--basic {
cursor: pointer;
}
.image__cell.is-expanded .image--expand {
max-height: 500px;
margin-bottom: 10px;
}
.image--expand {
position: relative;
left: -5px;
padding: 0 5px;
box-sizing: content-box;
overflow: hidden;
background: #222;
max-height: 0;
transition: max-height .3s ease-in-out,
margin-bottom .1s .2s;
width: 500%;
}
.image__cell:nth-of-type(5n+2) .image--expand {
margin-left: -100%;
}
.image__cell:nth-of-type(5n+3) .image--expand {
margin-left: -200%;
}
.image__cell:nth-of-type(5n+4) .image--expand {
margin-left: -300%;
}
.image__cell:nth-of-type(5n+5) .image--expand {
margin-left: -400%;
}
.image__cell:nth-of-type(5n+6) {
clear: left;
}
.image__cell.is-expanded .arrow--up {
display: block;
border-bottom: 8px solid #222;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
height: 0;
width: 0;
margin: 2px auto 0;
}
.expand__close {
position: absolute;
top: 10px;
right: 20px;
color: #454545;
font-size: 50px;
line-height: 50px;
text-decoration: none;
}
.expand__close:before {
content: '×';
}
.expand__close:hover {
color: #fff;
}
JS
var $cell = $('.image__cell');
$cell.find('.image--basic').click(function() {
var $thisCell = $(this).closest('.image__cell');
if ($thisCell.hasClass('is-collapsed')) {
$cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed');
$thisCell.removeClass('is-collapsed').addClass('is-expanded');
} else {
$thisCell.removeClass('is-expanded').addClass('is-collapsed');
}
});
$cell.find('.expand__close').click(function() {
var $thisCell = $(this).closest('.image__cell');
$thisCell.removeClass('is-expanded').addClass('is-collapsed');
});
Or you can query SerpAPI to get a JSON response.
Then you can easily loop over the images in the json.
https://serpapi.com/images-results
How to use images instead of text labels?
I need the menu to slide down when the .logo (bird) image button is clicked
How can I link text label with a logo image on the menu bar?
PS: the menu slides down when the .logo (bird) is clicked BUT there are two birds, I need the menu to slide down when the bird image sitting on the menu is clicked, AND yes I need only one bird image
/* ------------------------------------------ */
/* BASIC SETUP */
/* ------------------------------------------ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-wrap {
width: 1216px;
margin: 0 auto;
}
.row-basic {
max-width: 1216px;
}
html,
body {
text-align:justify
color: #fff;
font-size: 19px;
text-rendering: optimizeLegibility;
background: #333;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
/* ------------------------------------------ */
/* HEADER */
/* ------------------------------------------ */
header {
background-color: rgba(246, 149, 149, 0.06);
height: 81px;
width: auto;
padding-top: 24px;
margin-top: 26px;
margin-bottom: 0px;
display:flex;
justify-content: space-between;
}
/* ----- NAVIGATION -----*/
nav {
display:flex;
align-items: center;
}
nav ul {
display:flex;
}
.user-tools {
display:flex;
align-items: center;
}
.user-tools :focus {
outline:none;
}
/* ----- LOGO -----*/
.logo {
position: relative;
cursor: pointer;
height: 68px;
width: auto;
margin-right: 21px;
margin-left: 31px;
z-index: 1;
}
/* ----- MENU BUTTON -----*/
.mobile-nav-toggle {
height: 50px;
width: 35px;
margin-right: 31px;
display: flex;
align-items: center;
cursor: pointer;
}
.mobile-nav-toggle span,
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
border-radius: 2px;
content: "";
display: block;
height: 6px;
width: 100%;
background: #fff;
position: relative;
}
.mobile-nav-toggle span::before {
top: 11px;
}
.mobile-nav-toggle span::after {
bottom: 17px;
}
/* ------------------------------------------ */
/* PAGE CONTENT TOP BAR */
/* ------------------------------------------ */
.box1 {
height: 26px;
width: 300px;
background: #8242b1;
}
.box2 {
height: 26px;
width: 300px;
background: #b14242;
}
.box3 {
height: 26px;
width: 300px;
background: #424bb1;
}
.page-content {
display:flex;
justify-content: center;
transition: all 0.3s ease-in-out 0s;
position:relative;
margin-top: -260px;
z-index: 0; }
.toggle {
transition: all 0.3s ease-in-out 0s;
text-decoration: none;
font-size: 30px;
color: #eaeaea;
position:relative;
top: -225px;
left: 20px;
z-index: 1; }
.toggle:hover {
color:#cccccc; }
.topbar {
display:flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out 0s;
position: relative;
top: -220px;
bottom: 0px;
left: 0px;
height: 220px;
width: auto;
padding: 30px;
background: #333;
z-index: 1; }
.topbar li {
display:flex;
justify-content: center;
list-style: none;
color: rgba(255, 255, 255,0.8);
font-size: 16px;
margin-bottom: 16px;
cursor: pointer; }
.topbar li:hover {
color: rgba(255, 255, 255,1); }
#topbartoggler {
display: none; }
#topbartoggler:checked + .page-wrap .topbar {
top: -4px; }
#topbartoggler:checked + .page-wrap .toggle {
top: -5px; }
#topbartoggler:checked + .page-wrap .page-content {
padding-top: 220px; }
<body>
<input type="checkbox" id="topbartoggler" name="" value="">
<div class="page-wrap">
<div class="topbar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Clients</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>
<div class="page-content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<header class="row-basic">
<nav>
<img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">
</nav>
<div class="user-tools">
<div class="toggle"></div>
<div class="mobile-nav-toggle">
<span></span>
</div>
</div>
</header>
</div>
</body>
OK So I have found out all I needed to do was to replace
<img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">
with
<label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>
JSFiddle https://jsfiddle.net/heumnzLe/4/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-wrap {
width: 1216px;
margin: 0 auto;
}
.row-basic {
max-width: 1216px;
}
html,
body {
text-align:justify
color: #fff;
font-size: 19px;
text-rendering: optimizeLegibility;
background: #333;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
header {
background-color: rgba(246, 149, 149, 0.06);
height: 81px;
width: auto;
padding-top: 24px;
margin-top: 26px;
margin-bottom: 0px;
display:flex;
justify-content: space-between;
}
nav {
display:flex;
align-items: center;
}
nav ul {
display:flex;
}
.user-tools {
display:flex;
align-items: center;
}
.user-tools :focus {
outline:none;
}
.logo {
position: relative;
cursor: pointer;
height: 68px;
width: auto;
margin-right: 21px;
margin-left: 31px;
z-index: 1;
}
.mobile-nav-toggle {
height: 50px;
width: 35px;
margin-right: 31px;
display: flex;
align-items: center;
cursor: pointer;
}
.mobile-nav-toggle span,
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
border-radius: 2px;
content: "";
display: block;
height: 6px;
width: 100%;
background: #fff;
position: relative;
}
.mobile-nav-toggle span::before {
top: 11px;
}
.mobile-nav-toggle span::after {
bottom: 17px;
}
.box1 {
height: 26px;
width: 300px;
background: #8242b1;
}
.box2 {
height: 26px;
width: 300px;
background: #b14242;
}
.box3 {
height: 26px;
width: 300px;
background: #424bb1;
}
.page-content {
display:flex;
justify-content: center;
transition: all 0.3s ease-in-out 0s;
position:relative;
margin-top: -260px;
z-index: 0; }
.toggle {
transition: all 0.3s ease-in-out 0s;
text-decoration: none;
font-size: 30px;
color: #eaeaea;
position:relative;
top: -225px;
left: 20px;
z-index: 1; }
.toggle:hover {
color:#cccccc; }
.topbar {
display:flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out 0s;
position: relative;
top: -220px;
bottom: 0px;
left: 0px;
height: 220px;
width: auto;
padding: 30px;
background: #333;
z-index: 1; }
.topbar li {
display:flex;
justify-content: center;
list-style: none;
color: rgba(255, 255, 255,0.8);
font-size: 16px;
margin-bottom: 16px;
cursor: pointer; }
.topbar li:hover {
color: rgba(255, 255, 255,1); }
#topbartoggler {
display: none; }
#topbartoggler:checked + .page-wrap .topbar {
top: -4px; }
#topbartoggler:checked + .page-wrap .toggle {
top: -5px; }
#topbartoggler:checked + .page-wrap .page-content {
padding-top: 220px; }
<body>
<input type="checkbox" id="topbartoggler" name="" value="">
<div class="page-wrap">
<div class="topbar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Clients</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>
<div class="page-content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<header class="row-basic">
<nav>
<img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">
</nav>
<div class="user-tools">
<div class="toggle"></div>
<div class="mobile-nav-toggle">
<span></span>
</div>
</div>
</header>
</div>
</body>