I'd like to be able to take any div, no matter it's background color and give it a slight change in color, either darker or lighter depending on my situation
Currently, I can do it with css but then I have to pick the color. I want it for an unknown colored or white or black button.
function theFunction(){
console.log("woho");
}
body {
display: flex;
gap: 5px;
align-items: center;
height: 100vh;
justify-content: center;
margin: 0; }
.button1 {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
border-radius: 130px;
cursor: pointer;
font-weight: 500;
font-size: 50px;
font-family: "Lexend", sans-serif;
user-select: none;
background-color: #0084ff;
transition: background-color 0.2s ease; }
.button1.selected {
background-color: #0077e6;
color: white; }
.button1:hover {
background-color: #006acc;
color: white; }
.button1:active {
background-color: #99ceff;
color: black; }
.text {
text-align: center; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Perfect Button</title>
<link rel="stylesheet" href="index.css" />
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght#100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet" />
</head>
<body>
<div class="button1" onclick="theFunction()">
<div class="text">Click Me</div>
</div>
<div class="button1 selected" onclick="theFunction()">
<div class="text">Click Me</div>
</div>
<script src="index.js"></script>
</body>
</html>
To do it for any background color of any div use:
$--color: #0084ff;
$--black: black;
$--white: white;
$--background-active: ligther($--color, 30%);
body {
display: flex;
gap: 5px;
align-items: center;
height: 100vh;
justify-content: center;
margin: 0;
}
#mixin backgroundLigthen($--color, $--percentage) {
background-color: lighten($--color, $--percentage);
$--background: lighten($--color, $--percentage);
#include adjust-text-color($--background);
}
#mixin backgroundDarken($--color, $--percentage) {
background-color: darken($--color, $--percentage);
$--background: darken($--color, $--percentage);
#include adjust-text-color($--background);
}
#mixin adjust-text-color($--background) {
#if (lightness($--background) < 50%) {
color: $--white;
} #else {
color: $--black;
}
}
.button1 {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
border-radius: 130px;
cursor: pointer;
font-weight: 500;
font-size: 50px;
font-family: "Lexend", sans-serif;
user-select: none;
background-color: $--color;
transition: background-color 0.2s ease;
#if (lightness($--color) > 50%) {
color: $--white;
}
&.selected {
#include backgroundDarken($--color, 5%);
}
&:hover {
#include backgroundDarken($--color, 10%);
}
&:active {
#include backgroundLigthen($--color, 30%);
}
}
.text {
text-align: center;
}
For a scss example: https://jsfiddle.net/gu2r4jqk/7/
Related
I am using laravel version 9 for doing my project. and there is a feature that needs to let the user export the event ticket. I try to use the package barryvdh/laravel-dompdf . right now I encounter the error of
Call a member function get_cellmap() on null
I tried to read others' posts with a similar issue, but I found out most of them are using the for the view so seems like the solution working for them is not appropriate for me.here is my code :
controller
public function GenerateTicket($id)
{
$tickets = GiftGivingBeneficiaries::where('gift_giving_id', $id)->get();
# Retrieve the last batch no. from the gift giving.
$batch_no = GiftGiving::findOrFail($id)->batch_no;
GiftGiving::findOrFail($id)->update([
'last_downloaded_by' => Auth::id(),
'batch_no' => $batch_no + 1,
]);
$pdf = PDF::loadView('charity.gifts.generate_ticket', compact('tickets'));
return $pdf->download('event_tickets.pdf');
}
View Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from bootdey.com #bootdey on twitter -->
<!-- All snippets are MIT license http://bootdey.com/license -->
<title>Genearate Ticket</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
<h1>Event Tickets</h1>
#foreach ($tickets as $key=> $ticket)
<table>
</table>
<div class="row">
<input type="hidden" value="{{$key + 1}} ">
<article class="card fl-left">
<section class="date">
<time datetime="23th feb">
<span>Ticket No.</span><br>
<span>{{ $ticket->ticket_no }}</span>
</time>
</section>
<section class="card-cont">
<small>Event Name:{{ $ticket->GiftGiving->name }}</small>
<h3>{{ $ticket->name }}</h3>
<div class="even-date">
<i class="fa fa-calendar"></i>
<time>
<span>{{ $ticket->GiftGiving->start_at }}</span>
</time>
</div>
<div class="even-info">
<i class="fa fa-map-marker"></i>
<p>
{{ $ticket->GiftGiving->venue }}
</p>
</div>
Batch No.{{ $ticket->GiftGiving->batch_no }}
</section>
</article>
</div>
#if ( $key == 5 )
<div style="page-break-before:always;"> </div>
#endif
#endforeach
</div>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Oswald');
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box
}
body {
background-color: #dadde6;
font-family: arial
}
.fl-left {
float: left
}
.fl-right {
float: right
}
h1 {
text-transform: uppercase;
font-weight: 900;
border-left: 10px solid #fec500;
padding-left: 10px;
margin-bottom: 30px
}
.row {
overflow: hidden
}
.card {
display: table-row;
width: 100%;
background-color: #fff;
color: #989898;
margin-bottom:20px;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
border-radius: 4px;
position: relative;
border: #2b2b2b 1px solid;
}
.card+.card {
margin-left: 2%
}
.date {
display: table-cell;
width: 45%;
position: relative;
text-align: center;
border-right: 2px dashed #dadde6
}
.date:before,
.date:after {
content: "";
display: block;
width: 30px;
height: 30px;
background-color: #DADDE6;
position: absolute;
top: -15px;
right: -15px;
z-index: 1;
border-radius: 50%
}
.date:after {
top: auto;
bottom: -15px
}
.date time {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.date time span {
display: block
}
.date time span:first-child {
color: #2b2b2b;
font-weight: 600;
font-size: 150%
}
.date time span:last-child {
text-transform: uppercase;
font-weight: 600;
margin-top: -10px
}
.card-cont {
display: table-cell;
width: 75%;
font-size: 100%;
padding: 10px 10px 30px 50px
}
.card-cont h3 {
color: #3C3C3C;
font-size: 130%
}
.row:last-child .card:last-of-type .card-cont h3 {
text-decoration: line-through
}
.card-cont>div {
display: table-row
}
.card-cont .even-date i,
.card-cont .even-info i,
.card-cont .even-date time,
.card-cont .even-info p {
display: table-cell
}
.card-cont .even-date i,
.card-cont .even-info i {
padding: 5% 5% 0 0
}
.card-cont .even-info p {
padding: 30px 50px 0 0
}
.card-cont .even-date time span {
display: block
}
.card-cont a {
display: block;
text-decoration: none;
width: 80px;
height: 30px;
background-color: #D8DDE0;
color: #fff;
text-align: center;
line-height: 30px;
border-radius: 2px;
position: absolute;
right: 10px;
bottom: 10px
}
.row:last-child .card:first-child .card-cont a {
background-color: #037FDD
}
.row:last-child .card:last-child .card-cont a {
background-color: #F8504C
}
#media screen and (max-width: 860px) {
.card {
display: block;
float: none;
width: 50%;
margin-bottom: 10px
}
.card+.card {
margin-left: 0
}
.card-cont .even-date,
.card-cont .even-info {
font-size: 75%
}
}
.page-break {
page-break-after: always;
}
</style>
<script type="text/javascript">
</script>
</body>
</html>
also, this is what my view looks like. Hope to know what part did I miss for it,every answer is highly appreciated.
Not sure if this will help but the way I execute this in my app is like so:
Maybe try storing it first then accessing it? Then delete them after 1 hour?
$pdf = PDF::setOptions(['isHtml5ParserEnabled' => true, 'isRemoteEnabled' => true])->loadView('charity.gifts.generate_ticket', compact('tickets'));
$pdf->setPaper('a4', 'landscape');
Storage::disk('reports')->put('tickets'. '.pdf', $pdf->output());
$url = Storage::disk('reports')->url('tickets'. '.pdf');
This one should make many scratch their head...
Could someone let me know why my <div> element (id 'container') is shifting down when the overflow-y is set to "scroll" in Microsoft Edge? Seems to work just fine in Firefox.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="UTF-8" />
<style>
body {
border: 3px dotted red;
position: fixed;
width: 100%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
overflow: hidden;
box-sizing: border-box;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="height: 95%; border: 2px dotted orange; background-color: blue; overflow: hidden;">
<div id="container" style="overflow-y: scroll; width: 60vmin; height: 95%; background-color: silver;"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
for (var i = 0; i < 500; i++) {
$('#container').append('<div style="border: 1px solid silver;">Hello World!</div>');
}
</script>
</body>
</html>
Here are the screenshots for both Firefox and Microsoft Edge:
Firefox:
Edge:
Try to modify your code as below(demo):
<style type="text/css">
body {
border: 3px dotted red;
position: fixed;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;
overflow: hidden;
box-sizing: border-box;
margin: 0;
padding: 0;
}
</style>
<div style="height: 95%; width: 60vmin; border: 2px dotted orange; background-color: blue; overflow: hidden; margin-right:20px ; margin-top:20px; float:right">
<div id="container" style="overflow-y: scroll; width: 60vmin; height: 100%; background-color: silver;"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function () {
for (var i = 0; i < 500; i++) {
$('#container').append('<div style="border: 1px solid silver;">Hello World!</div>');
}
});
</script>
The result in Microsoft Edge browser as below:
I recently began to learn sass and I'm having a problem with media query. Some classes works and others don't, like toggle class.
Here is the code I'm working on:
body {
font-family: sans-serif;
}
nav {
width: 100%;
background: #00316b;
}
nav ul {
width: 80%;
margin: 0 auto;
padding: 0;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 20px;
}
nav li:hover {
background: #e91e63;
}
nav a {
color: #fff;
text-decoration: none;
}
nav .toggle {
padding: 10px 20px;
box-sizing: border-box;
color: #f7f7f7;
font-size: 30px;
cursor: pointer;
width: 30px;
display: none;
}
nav .toggle:hover div {
width: 30px;
}
nav .toggle div {
height: 4px;
background: white;
margin: 5px 0;
border-radius: 25px;
transition: all 0.3s ease-in-out;
}
nav .toggle .one {
width: 30px;
}
nav .toggle .two {
width: 20px;
}
nav .toggle .three {
width: 25px;
}
#media (max-width: 768px) {
.toggle {
display: block;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<!-- font awesome -->
<script src="https://use.fontawesome.com/495f5a11b6.js"></script>
<title>Document</title>
</head>
<body>
<nav class='navigation'>
<div class="toggle">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
Put the media query inside your .toggle class by indenting 2 levels and remove the other .toggle from your query.
.toggle
// etc ...
#media (max-width: $breakpoint)
display: block
I forked your snippet here: https://codepen.io/anon/pen/ooqxyW
I'm making an image slider, and everything works so far but my previous and next buttons are not centering vertically on the main image. I'm trying to make it responsive as well.
I tried everything but I don't know what I'm missing. The absolute position with top: 50% doesn't seem to do the trick. Here's the codepen.
$('#imgDetail li img').click(function(){
$('#unidoor').attr('src',$(this).attr('src'));
});
$('#next').on('click',function(){
var imgSrc = $('#unidoor').attr('src');
var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').next().find('img').attr('src');
console.log(nextSrc);
nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:first').attr('src')): $('#unidoor').attr('src',nextSrc);
});
$('#prev').on('click',function(){
var imgSrc = $('#unidoor').attr('src');
var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').prev().find('img').attr('src');
console.log(nextSrc);
nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:last').attr('src')): $('#unidoor').attr('src',nextSrc);
});
* {
margin: 0;
padding: 0;
}
body{
margin: 0;
padding:0;
font-size: 100%;
/* line-height: 1.6; */
/* font-family: Arial, Helvetica, sans-serif; */
}
.header{
margin: 0 auto;
width: 100%;
background-color: #333;
padding: 30px 0 0 0;
}
.header h1{
margin: 0;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.header ul {
list-style-type: none;
margin: 0;
/* padding: 0; */
overflow: hidden;
padding: 20px 0px 30px 0;
text-align: center;
}
.header li {
display: block;
display: inline-block;
/* border-right: 1px solid #bbb; */
border-right: 1px solid #bbb;
height: 25px;
}
.header li:last-child{
border-right: none;
}
.header li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 0px 40px;
font-size: 1em;
}
.header li a:hover{
color: #7bbe9a;
/* color: #80b198; */
}
#green-room {
background: #333 !important;
}
#unidoor {
position: relative;
width: 90%;
margin: 0 auto;
display: block;
}
#prev {
position: absolute;
top: 50%;
left: 10%;
transform: translate(-10%, -50%);
}
#next {
position: absolute;
top: 50%;
right: 10%;
transform: translate(-10%, -50%);
}
/* .previous {left: 10%;}
.next {right: 10%;} */
/* .prev-next-button a {
position: absolute;
left: 20%;
top: 20%;
} */
#imgDetail ul {
margin: 0 auto;
display: block;
width: 50%;
}
.thumb {
width: 25%;
height: auto;
margin: 15px 5px 0 5px;
}
#imgDetail li {
display: inline; margin-right: 10px;
}
#imgDetail a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
#imgDetail a:hover {
background-color: #7bbe9a;
color: white;
opacity: 1;
}
.previous {
background-color: #fff;
opacity: 0.5;
color: black;
}
.next {
background-color: #fff;
opacity: 0.5;
color: black;
}
/* .round {
border-radius: 50%;
} */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body id="green-room">
<div class="header">
<div id="title"><h1>Lorem Ipsum 3D Online Portfolio</h1></div>
<nav id="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="imgDetail">
<br>
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" alt="" id="unidoor" />
‹
›
<ul>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="thumb" /></li>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="thumb" /></li>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="thumb" /></li>
</ul>
</div>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({reset: true});
sr.reveal('#unidoor');
</script>
</body>
</html>
Hello there you can wrap the <div id="imgDetail"> in an outer div class for instance <div class="slideshow-container"> and then add your CSS which would look like this:
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
You can get the changes on codepen. Happy coding :)
I put my callback call directly in the kendo datasource example and I am unable to get this to render. What am I missing?
The datasource will not load and I keep getting a type error. Any help would be appreciated.
This is the code that I entered into a kendo dojo.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/datasource/remote-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div class="demo-section k-header wide">
<div id="products"></div>
</div>
<script type="text/x-kendo-template" id="template">
<div class="product">
<img src="../content/web/foods/#= ImageURL #.jpg" alt="#: ProductName # image" />
<h3>#:Description#</h3>
<p>#:kendo.toString(CurPrice, "c")#</p>
</div>
</script>
<script>
$(function() {
var template = kendo.template($("#template").html());
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "//justclickzmedia.net/Search/Get/?callback=callback&query=coach+handbag",
dataType: "jsonp"
}
},
requestStart: function() {
kendo.ui.progress($("#products"), true);
},
requestEnd: function() {
kendo.ui.progress($("#products"), false);
},
change: function() {
$("#products").html(kendo.render(template, this.view()));
}
});
dataSource.read();
});
</script>
<style>
#products {
padding: 10px;
margin-bottom: -1px;
/* height: 510px;
overflow: auto;*/
}
.product {
float: left;
position: relative;
width: 111px;
height: 170px;
margin: 0;
padding: 0;
}
.product img {
width: 110px;
height: 110px;
}
.product h3 {
margin: 0;
padding: 3px 5px 0 0;
max-width: 96px;
overflow: hidden;
line-height: 1.1em;
font-size: .9em;
font-weight: normal;
text-transform: uppercase;
color: #999;
}
.product p {
visibility: hidden;
}
.product:hover p {
visibility: visible;
position: absolute;
width: 110px;
height: 110px;
top: 0;
margin: 0;
padding: 0;
line-height: 110px;
vertical-align: middle;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,0.75);
transition: background .2s linear, color .2s linear;
-moz-transition: background .2s linear, color .2s linear;
-webkit-transition: background .2s linear, color .2s linear;
-o-transition: background .2s linear, color .2s linear;
}
.k-listview:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</div>
</body>
</html>
This isn't an answer for the OP but in case someone comes here getting "TypeError - kendo.data.DataSource is not a constructor." check to see if you're accidentally including kendo.core.min.js instead of kendo.ui.core.min.js