I have already installed vuetify and use the its font-weight- class
Here is my code below:
<template>
<v-app>
<p class="font-weight-black">Black text.</p>
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-medium">Medium weight text.</p>
<p class="font-weight-regular">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-thin">Thin weight text.</p>
<p class="font-italic">Italic text.</p>
</v-app>
</template>
My question is why medium, normal, light, and thin were all same font-weight (see picture below) compare to its example from vuetify font-weight. Anybody knows how to fix this?
I found the solution by importing fonts to my app.scss
#import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
Or just append the code below on html file
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
helpful link1, link2
Related
I'm obviously doing something wrong but this is my Day 2 with Bootstrap. I have a fluid container with two rows. On the first row I've got a title and an image. That image - even though I reduced the height and have it set to responsive, causes that second column in the first row to basically extend to almost the whole page. When I remove the image, the world makes sense. When I put the image back, the container blows up. Happens with any image so it isn't the image, it is my bad bootstrap.
`<!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>A basic website with Bootstrap #1</title>
<!-- Including Bootstrap here-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid bg-secondary">
<div class="row">
<div class="col">
<h1 class="title-text text-light">Welcome to this Bootstrap Site #1</h1>
</div>
<div class="col">
<img src="masterchef.png" class="img-responsive h-25" alt="">
</div>
</div>
<div class="row">
<div class="col">
<h2 class="subtitle-text text-light">A site to learn Bootstrap well</h2>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>`
Tried using the thumbnail class, tried looking through Bootstrap docs, tried reordering to see if that helps. Did not help.
To fix these kinds of errors you need to learn how columns work in bootstrap:
You can read more about the columns here
The bootstrap columns are divided in this way, currently in your code you have entered only col which means they are columns that do not specify their size but fit the next columns;
Instead, in this example, the columns are expressed and you can command the display from mobile to desktop:
<!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>A basic website with Bootstrap #1</title>
<!-- Including Bootstrap here-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid bg-secondary">
<div class="row">
<div class="col-6 col-md-12">
<h1 class="title-text text-light">Welcome to this Bootstrap Site #1</h1>
</div>
<div class="col-6 col-md-12">
<img src="https://e7.pngegg.com/pngimages/526/683/png-clipart-take-out-chef-s-uniform-cafe-yuva-indian-cuisine-master-chef-thumbnail.png" class="img-responsive" alt="">
</div>
</div>
<div class="row">
<div class="col-12">
<!--col-12 means that on all devices it will be 100% width magnitude-->
<h2 class="subtitle-text text-light">A site to learn Bootstrap well</h2>
</div>
</div>
</div>
<!--<div class="container-fluid menu-options">
<div class="col">
<button type = "button" class="btn mx-1 btn-primary">Home</button>
<button type = "button" class="btn mx-1 btn-primary">Men's</button>
<button type = "button" class="btn mx-1 btn-primary">Women's</button>
<button type = "button" class="btn mx-1 btn-primary">Clearance</button>
</div>
</div>
-->
</body>
</html>
(Did you see that? with the simple addition of the md class, but there are many others!)
In this case I inserted two columns in the row, so that from mobile the view would be split in two and after the tablet (md) would display
read more about bootstrap breakpoints
I got help offline. The main issue isn’t with Bootstrap, but with how percentages work. I had the h-25 class on the element. The h-25 class attempts to set the height of an element to 25% of its parent. However, percentages only work properly when the parent has a well-defined/fixed height. When the parent doesn’t have a well-defined height, the browser enters a kind of feedback loop as it tries to adjust the set the height to a percentage while also adjusting the parent height to contain it.
Solutions
The easiest solution is to remove “h-25” and set a fixed height on the
Another option is to set a fixed height on the parent so that the percentage can be calculated definitively.
I went with the first option as putting a size on the image made it responsive where it doesn't overflow the container on smaller viewports.
I am converting div element to image or screenshot. I've search throughout the internet and found out about html2canvas. I tried using it but no luck. Is there anyone who knows how to make it work? Here is my source code.
<html>
<head>
<title> Screenshot </title>
</head>
<body>
<div id="container">
<h1> Screen shot me </h1>
</div>
<button onclick = "screenshot()"> Capture </button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script>
function screenshot(){
html2canvas(document.getElementById('container')).then(function(canvas){
document.body.appendChild(canvas);
})
}
</script>
</html>
My error keeps saying
Uncaught TypeError: html2canvas(...).then is not a function
at screenshot
at HTMLButtonElement.onclick. Did I miss something?
Im using Laravel 5.6 with NPM. Thankyou in advance!
Tested Chrome, Firefox ok, IE 11 needs adding 2 extra js library to support promise.
function takeSnapShot() {
html2canvas(document.querySelector("#capture")).then(function(canvas) {
document.querySelector("#newCanvas").appendChild(canvas);
});
}
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.auto.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; "> Screen shot me </h4>
</div>
<input type="button" value="Capture" onclick="takeSnapShot()"/>
<div id="newCanvas"></div>
</html>
I have the following files:
foo.blade.php
<html>
<head>
</head>
<body>
<h1>Foo Template</h1>
#yield('content')
</body>
</html>
bar.blade.php
<h2>Bar Template</h2>
<div class="bar-content">
#yield('bar-content')
</div>
I want to create another file that is able to extend both the above templates. e.g something like this:
#extends('foo')
#section('content')
<p>Hello World</p>
#extends('bar')
#section('bar-content')
<p>This is in div.bar-content</p>
#endsection
#endsection
To give:
<html>
<head>
</head>
<body>
<h1>Foo Template</h1>
<p>Hello World</p>
<h2>Bar Template</h2>
<div class="bar-content">
<p>This is in div.bar-content</p>
</div>
</body>
</html>
How can I do this?
Use multiple files.
for eg;
layout.blade.php:
#include('header')
#yield('layout_content')
#include('footer')
second.blade.php
#extends('layout')
#section('layout_content')
<div>
#yield('second_content')
</div>
#stop
third.blade.php
#extends('second.blade.php')
#section('second_content')
<h1>Hello World!</h1>
#stop
You can include #yield in any of the parent files and can be used in the child
I would recommend using components. Here is an example.
It seems to me layout/include has a weird logic when there are many of them and you start nesting them. Components are pretty straight forward. For these nested structures you are building there, components also have slots.
I think it's not possible to do what you want here, at least without extending Blade:
https://laravel.com/docs/5.1/blade#extending-blade
If I were you, I'd rearchitectured my views hierarchy to keep things simple.
I do not know if this will work, but try #include instead of #extends for your bar template. The put your section for bar below the other section (not nested). I did not tested this, so I hope it works ;)
// EDIT:
Try it with an if-statement in your foo file:
<html>
<head>
</head>
<body>
<h1>Foo Template</h1>
#yield('content')
#if(isset($displayBar) && $displayBar == true)
#include('dashboard.test.bar')
#endif
</body>
</html>
And now the child view:
#extends('dashboard.test.foo')
#section('content')
<p>Hello World</p>
#endsection
<?php $displayBar = true ?>
#section('bar-content')
<p>This is in div.bar-content</p>
#endsection
#php
$ext = '';
#endphp
#if (Request::segment(1)=='explications')
#php
$ext = '_explications'
#endphp
#endif
#extends('pages_templates/template_page_fluid'.$ext)
I know 'primaryImageOfPage' is a property of WebPage.
But 'primaryImageOfPage' isn't a property of Article.
For this code:
<html itemscope itemtype="http://schema.org/webpage">
<head>
<meta itemprop="name" content="webpage"/>
</head>
<body>
<p itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Article">
<img src"example1.png" itemprop="image"/>
<img src"example2.png" itemprop="image"/>
<img src"example3.png" itemprop="image"/>
<img src"example4.png" itemprop="image"/>
</p>
</body>
</html>
How can I choice Primaery picture for Article?
Dose Article inherits from Webpage?
FOr example:
<html itemscope itemtype="http://schema.org/webpage">
<head>
<meta itemprop="name" content="webpage"/>
</head>
<body>
<p itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Article">
<img src"example1.png" itemprop="primaryImageOfPage"/>
<img src"example2.png" itemprop="image"/>
<img src"example3.png" itemprop="image"/>
<img src"example4.png" itemprop="image"/>
</p>
</body>
</html>
Does Article inherit from WebPage?
No. You can’t use primaryImageOfPage for Article.
While it makes sense to specify the main content/image of a WebPage, would it also make sense to specify this for an Article? I’d say that an Article should only contain main content/images in the first place.
If there is an image the whole Article is about, you could use the about property. Example: interpretation of a painting. If this image is from a different source, you could use the citation property in addition.
For images being part of the Article, there is the associatedMedia property. While its description is somewhat confusing, it got discussed that this property could be used for linking images (or other media) that belong to or are part of the Article (currently, it has the synonym encoding, which they planned to remove; I don’t know why that did not happen yet).
Note that I wouldn’t use the image property for all images that are part of the Article. I think this property should only be used for images of the Article itself, i.e., images representing this whole Article. This could be a screenshot of the Article, a thumbnail, maybe a lead picture.
So, you could use associatedMedia for the main image(s) and no property for secondary images:
<article itemscope itemtype="http://schema.org/Article">
<span itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<img itemprop="contentUrl" src"main-image.png" alt="…" />
</span>
<img src"secondary-image-1.png" alt="…" />
<img src"secondary-image-2.png" alt="…" />
<img src"secondary-image-3.png" alt="…" />
</article>
Does anyone know of a jquery plugin that has a background slide show and a gallery that changes background images every time someone opens the site or every hour or so?
There are lot of jQuery slideshow plugins. I would recommend you to look at the following:
Slide JS - http://www.slidesjs.com/
<head>
<title>Title</title>
<style type="text/css" media="screen">
.slides_container {
width:570px;
height:270px;
}
.slides_container div {
width:570px;
height:270px;
display:block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="slides.js"></script>
<script>
$(function(){
$("#slides").slides();
});
</script>
</head>
<body>
<div id="slides">
<div class="slides_container">
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
</div>
</div>
</body>
Also, check some good slideshow plugins here