This is pure.css framework (https://purecss.io/). I'm trying to copy a menu from their examples.
Documentation (and a working example): https://purecss.io/layouts/tucked-menu-vertical/
html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://unpkg.com/purecss#2.0.3/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
<link rel="stylesheet" href="src/css/custom.css">
<title>Hello, world!</title>
</head>
<body>
<div class="custom-wrapper pure-g" id="menu">
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu">
Brand
<s class="bar"></s><s class="bar"></s>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-can-transform">
<ul class="pure-menu-list">
<li class="pure-menu-item">Home</li>
<li class="pure-menu-item">About</li>
<li class="pure-menu-item">Contact</li>
</ul>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
<ul class="pure-menu-list">
<li class="pure-menu-item">Yahoo</li>
<li class="pure-menu-item">W3C</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="src/js/main.js"></script>
</body>
</html>
css
.custom-wrapper {
background-color: #ffd390;
margin-bottom: 1em;
-webkit-font-smoothing: antialiased;
height: 2.1em;
overflow: hidden;
-webkit-transition: height 0.5s;
transition: height 0.5s;
}
.custom-wrapper.open {
height: 14em;
}
.custom-menu-3 {
text-align: right;
}
.custom-toggle {
width: 34px;
height: 34px;
position: absolute;
top: 0;
right: 0;
display: none;
}
.custom-toggle .bar {
background-color: #777;
display: block;
width: 20px;
height: 2px;
border-radius: 100px;
position: absolute;
top: 18px;
right: 7px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.custom-toggle .bar:first-child {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
.custom-toggle.x .bar {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.custom-toggle.x .bar:first-child {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#media (max-width: 47.999em) {
.custom-menu-3 {
text-align: left;
}
.custom-toggle {
display: block;
}
}
/*# sourceMappingURL=custom.css.map */
JS
(function (window, document) {
var menu = document.getElementById('menu'),
rollback,
WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
function toggleHorizontal() {
menu.classList.remove('closing');
[].forEach.call(
document.getElementById('menu').querySelectorAll('.custom-can-transform'),
function(el){
el.classList.toggle('pure-menu-horizontal');
}
);
};
function toggleMenu() {
// set timeout so that the panel has a chance to roll up
// before the menu switches states
if (menu.classList.contains('open')) {
menu.classList.add('closing');
rollBack = setTimeout(toggleHorizontal, 500);
}
else {
if (menu.classList.contains('closing')) {
clearTimeout(rollBack);
} else {
toggleHorizontal();
}
}
menu.classList.toggle('open');
document.getElementById('toggle').classList.toggle('x');
};
function closeMenu() {
if (menu.classList.contains('open')) {
toggleMenu();
}
}
document.getElementById('toggle').addEventListener('click', function (e) {
toggleMenu();
e.preventDefault();
});
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);
Codepen: https://codepen.io/Kifsif/pen/xxwMQpd
The problem is that menu items on large screens are not shown.
Remove overflow: hidden; property from custom-wrapper class and it will be shown. Although I am not sure if menu on large screen is positioned well but that is another problem.
.custom-wrapper {
background-color: #ffd390;
margin-bottom: 1em;
-webkit-font-smoothing: antialiased;
height: 2.1em;
-webkit-transition: height 0.5s;
transition: height 0.5s;
}
Related
please i need help
i have my html code which working very fine ,and trying to loadview it as pdf stream
but the output pdf file , not same as html , and text not above image , but get below it
my controller code
public function pdfdownload($id)
{
$id = Crypt::decrypt($id);
$course = Course::where('id', $id)->first();
$orders = Order::where('course_id', $id)->first();
$progress = CourseProgress::where('course_id', $course->id)->where('user_id', Auth::user()->id)->first();
$pdf = PDF::loadView('front.certificate.download', compact('course', 'progress'), [],
[
'title' => 'Certificate',
'orientation' => 'L'
]);
// return $pdf->download('certificate.pdf');
return $pdf->stream('certificate.pdf');
}
my html code
<!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>Document</title>
<style type="text/css" media="all">
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body{
margin: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1,h2,h3,h4,h5,h6{
margin: 0 0 15px;
}
.certificate-wrapper{
max-width: 910px;
border: 1px solid #007B83;
}
.certificate-wraper img {
max-width: 100%;
}
/* certificate Antipasto Pro */
.certificate_content {
position: absolute;
top: 182px;
right: 29px;
width: 480px;
}
.certificate_content h2 {
font-size: 29px;
text-transform: uppercase;
color: #29AFA7;
margin-top: 10px;
}
.certificate_content h3 {
text-transform: uppercase;
color: #29AFA7;
font-size: 21px;
}
.certificate_content span {
text-transform: uppercase;
}
.prisciples {
font-size: 25px;
margin-top: 39px;
}
.credit {
margin-top: 27px;
}
.prof {
margin-top: 28px;
}
.date_time {
display: block;
margin-top: 66px;
margin-left: 99px;
color: #000;
font-size: 18px;
}
.code {
margin-top: 22px;
display: block;
margin-left: 83px;
font-size: 14px;
}
/* certificate-end */
.position-relative{
position: relative;
}
</style>
</head>
<body>
<div class="certificate-wrapper">
<div class="certificate-wraper position-relative certificater-img">
<img src="certi-main-bg.png" alt="">
<div class="certificate_content">
<h2>Basma sherif abd alwahab</h2>
<h3 class="prisciples">Principles of Dento-alveolar Surgery
with Live Demo on Suture Techniques</h3>
<h3 class="credit">2 creidt hours</h3>
<h3 class="prof">Prof.Ahmed Elsharkawy</h3>
<div class="certi_abs_content">
<span class="date_time"> april</span>
<span class="code">code</span>
</div>
</div>
</div>
</div>
</body>
</html>
that how img show in html page
html view
that's how pdf stream output looks like
pdf stream
please i would really appreciates any help
, how to solve that
and why pdf not view same as html >?
I think your main issue is that laravel-pdf is a wrapper for mPDF which does not support flex.
See this list for css that is supported: https://mpdf.github.io/css-stylesheets/supported-css.html
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
at the moment i get in touch with laravel. i tried to create a page who scan qr codes.
i created a normal project with laravel (composer create-project laravel/laravel testqrinstascan) and tried to implement step by step instascan.
I wanna use this library instascan -> https://github.com/schmich/instascan
But i get everytime the error "Laden fehlgeschlagen für das mit der Quelle "http://localhost:8000/instascan.min.js"."
but the file is in the same directory
It means loading script with source .... not possible -> https://imgur.com/a/SKang
This is my welcome.blade.php------------------------------------------------------------------------
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<script type="text/javascript" src="instascan.min.js"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
<div class="content">
<div class="links">
<video id="preview"></video>
Hello World
<script type="text/javascript">
let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
scanner.addListener('scan', function (content) {
console.log(content);
});
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 0) {
scanner.start(cameras[0]);
} else {
console.error('No cameras found.');
}
}).catch(function (e) {
console.error(e);
});
</script>
</div>
</div>
</div>
</body>
In the following example I want to sort the inner lists and not the other list. In my live example the lists are generated by the grouped list functionality, so I can't give each list an id and create a separate sortable object. How do I create a sortable set of inner lists using kendo native listview grouping?
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Unable to sort inner list in kendo nested list">
<base href="http://demos.telerik.com/kendo-ui/sortable/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<ul class="playlist" kendo-sortable k-placeholder="placeholder" k-hint="hint">
<li>Happy
<ul>
<li>Papercut <span>3:04</span></li>
<li>One Step Closer <span>2:35</span></li>
<li>With You <span>3:23</span></li>
<li>Points of Authority <span>3:20</span></li>
<li>Crawling <span>3:29</span></li>
</ul>
</li>
<li>Sad
<ul>
<li>Runaway <span>3:03</span></li>
<li>By Myself <span>3:09</span></li>
<li>In the End <span>3:36</span></li>
<li>A Place for My Head <span>3:04</span></li>
<li>Forgotten <span>3:14</span></li>
<li>Cure for the Itch <span>2:37</span></li>
<li>Pushing Me Away <span>3:11</span></li>
</ul>
</li>
</ul>
</div>
<style>
.playlist {
margin: 30px auto;
padding: 10px;
width: 300px;
background-color: #f3f5f7;
border-radius: 4px;
border: 1px solid rgba(0,0,0,.1);
}
.playlist li {
list-style-type: none;
position: relative;
padding: 6px 8px;
margin: 0;
color: #666;
font-size: 1.2em;
cursor: move;
}
.playlist li:hover {
background-color: #dceffd;
}
.playlist li span {
position: absolute;
right: 5px;
}
li.hint {
display: block;
padding: 10px;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:last-child {
border-radius: 4px;
}
li.hint span {
color: #fff;
}
li.placeholder {
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
</style>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.placeholder = function(element) {
return element.clone().addClass("placeholder").text("drop here");
};
$scope.hint = function(element) {
return element.clone().addClass("hint");
};
})
</script>
</body>
</html>
http://jsbin.com/qubuguh/edit?html,output
This can be done by using a filter that describes the child li elements. For example:
<ul class="playlist" kendo-sortable k-filter="'ul>li'" k-placeholder="placeholder" k-hint="hint">
I'm using a Nivo Slider in a website that uses Ajax to load its content. It saves the user from loading new pages every time they click on a link.
My problem is that when I load the home page initially, the slider works fine; but if I navigate away from that page then back to it, it just has the loading gif on a loop. Can anyone help?
My index.php is this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>I.C.T - St. Patrick's Academy, Lisburn</title>
<script type="text/javascript" src="assets/js/jqmin.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/style.css" media="all" />
<script type="text/javascript" src="assets/js/js.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/nivo.css" media="all" />
<script type="text/javascript" src="assets/js/sliderpack.js"></script>
<script type="text/javascript" src="assets/js/slide.js"></script>
</head>
<body>
<div id="wrap">
<div id="head">
<div id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Learn</li>
</ul>
</div>
<img src="assets/images/logo.png" alt="logo" />
</div>
<div id="screen">
<div id="pad"></div>
<div id="cont_wrap">
<div id="cont">
<h2>Home</h2>
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="assets/images/slide1.jpg" alt="1" />
<img src="assets/images/slide2.jpg" alt="2" />
<img src="assets/images/slide3.jpg" alt="3" />
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<p align="center"><i>Copyright 2013 - Finbar Maginn - St. Patrick's Academy, Lisburn</i></p>
</div>
</div>
</body>
</html>
(Note that my Nivo Slider initialization is inside slide.js and looks like this:)
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 16, // For slice animations
boxCols: 6, // For box animations
boxRows: 3, // For box animations
animSpeed: 1000, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: false, // Next & Prev navigation
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: false, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
The Ajax jQuery file I'm using is this:
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#links li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-3)){
var toLoad = hash+'.php #cont';
$('#cont').load(toLoad)
}
});
$('#links li a').click(function(){
var toLoad = $(this).attr('href')+' #cont';
$('#cont').fadeOut('fast',loadContent);
$('#load').remove();
$('#wrap').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('fast');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
function loadContent() {
$('#cont').load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#cont').fadeIn('fast',hideLoader('fast'));
}
function hideLoader() {
$('#load').fadeOut('fast');
}
return false;
});
});
And here is my CSS:
body {
font-size:95%;
font-family:georgia;
line-height:1.576;
}
h2 {
padding:0;
margin:0;
}
#wrap {
margin:0 auto;
width:784px;
}
#head {
width:100%;
height:175px;
}
#links {
width:300px;
height:30px;
padding:140px 0 0 0;
float:right;
text-align:right;
}
#links ul {
margin:0;
padding:0;
}
#links ul li {
display:inline;
margin:0 -2px 0 -2px;
}
#links ul li a {
font-size:1em;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-ms-transition: 0.1s;
-o-transition: 0.1s;
text-decoration:none;
color:black;
background:-webkit-linear-gradient(bottom, white, #74b998);
background:-o-linear-gradient(bottom, white, #74b998);
background:-ms-linear-gradient(bottom, white, #74b998);
background:-moz-linear-gradient(bottom, white, #74b998);
padding:3px 5px 3px 5px;
}
#links ul li a:hover {
background:-webkit-linear-gradient(top, white, #74b998);
background:-o-linear-gradient(top, white, #74b998);
background:-ms-linear-gradient(top, white, #74b998);
background:-moz-linear-gradient(top, white, #74b998);
padding:7px 5px 7px 5px;
}
.left {
border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-bottom-left-radius:10px;
-ms-border-bottom-left-radius:10px;
-o-border-bottom-left-radius:10px;
border-top-left-radius:10px;
-webkit-border-top-left-radius:10px;
-moz-border-top-left-radius:10px;
-ms-border-top-left-radius:10px;
-o-border-top-left-radius:10px;
}
.right {
border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-bottom-right-radius:10px;
-ms-border-bottom-right-radius:10px;
-o-border-bottom-right-radius:10px;
border-top-right-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-top-right-radius:10px;
-ms-border-top-right-radius:10px;
-o-border-top-right-radius:10px;
}
.radius {
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
}
#screen {
width:100%;
height:480px;
background-image:url(../images/bckgrnd.png);
}
#pad {
width:100%;
height:29px;
}
#cont_wrap {
overflow:auto;
margin:0 auto;
width:724px;
height:335px;
padding: 0 0 0 6px;
}
#load {
display: none;
position: absolute;
top: 150px;
left: 950px;
text-indent: -9999em;
width: 16px;
height: 16px;
background: url(../images/load.gif) no-repeat;
}
#cont {
}
#foot {
width: 100%;
font-size:90%;
color:gray;
}
#slider {
margin: 0 auto;
width: 700px;
height: 273px;
}
.nivoSlider {
position: relative;
background: url(../images/load.gif) no-repeat 50% 50%;
}
.nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
display: none;
}
.nivoSlider a {
border: 0;
display: block;
}