The simplest way to show alert while deleting your record using anchor tag is
<a href="/userProfile/{{$userinfo->id}}/del" onclick="return confirm('Are you sure?')" class="user-delete"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a>
Background image and providing padding to it
I have a select input and i want to put small image icon at the right of it with some padding on it. For this the easy solution is
My input
<select placeholder="Filter By" class="searchuser userddl">
<option>Filter By</option>
<option>Recently Updated</option>
<option>Recently Deleted</option>
</select>
And the css to give background image along with some padding is:
select.searchuser.userddl {
background: #000 url('/images/down-arrow.png');
background-position: right 7px top 6px;
background-repeat: no-repeat;
}
And the output appears as
Preview Image before it is uploaded
Today we are going to learn about Image preview before it is uploaded.
In your php file, you have code as shown below:
<form id="form1" runat="server">
<input type='file' id="uploadFile" />
<img id="imagePreview" src="#" alt="your image" />
<script type="text/javascript" src="js/imagePreview.js"></script>
</form>
Include your script file in your header or footer, and you have js file with the name imagePreview as shown below:
$(function() {
$("#uploadFile").on("change", function()
{
$( "#imagePreview" ).addClass( "giveImgStyle" );
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background of div
$("#imagePreview").css("background-image", "url("+this.result+")");
}
}
else{
alert('Please Select Image');
}
});
});
Then in your style sheet, add the style for giveImgStyle
.giveImgStyle{
width: 180px;
height: 180px;
background-position: center center;
background-size: cover;
display: inline-block;
}
Then you are done. you get imagepreview as shown below
Enable user register even after login laravel 5
In order to enable user register even after logging in laravel, you can do following simple step:
1. Go to your RegisterController.php which is inside controllers followed by Auth.
There you get code as shown below
public function __construct()
{
$this->middleware('guest');
}
You can remove the $this->middleware() line entirely to prevent the middleware being applied to all your login and register routes.
This will enable you to register user even after login.
Laravel 5 Class ‘form’ not found
When i was trying to run my laravel application with form tags like:
{!! Form::label('featured_image','Select Featured Image',array('id'=>'','class'=>'')) !!}
{!! Form::file('image',array('class'=>'imageUpload','id'=>'uploadFile')) !!}
I got an error with Laravel 5 Class ‘form’ not found
With some research, i found a solution for it. Here are some steps to solve it.
1. Go to your composer.json file
2. Include “laravelcollective/html”: “^5.2.0” within require
3. then update your composer using a command in your terminal :\> composer update
Once the composer is updated
4. Now go to your app.php file within config folder
5. In providers add following code
Collective\Html\HtmlServiceProvider::class,
6. then go to alias section and add below code
'Form' => Collective\Html\FormFacade::class, 'Html' => Collective\Html\HtmlFacade::class,
Now run your application and you are free of error.
Implement Font Awesome icon inside submit button
If you want to place font awesome icon inside a submit button, first of all you cannot use
<input type="submit" value="Submit">
but instead, you need to use as shown below:
<button type="submit" class="btn btn-danger">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
List of mostly used media queries
Last time we had discussed most appropriate and easy media queries for your site.I feel those media query itself is enough to make your site responsive. But If you want more detailed media queries that fit almost all varieties of mobiles, desktops, iPads, tablets, and laptops, you can use following media queries.
/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4. Comma can be used to apply same rules to multiple media queries. */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
}
/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
}
/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
}
/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
}
/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){
}
/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){
}
/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){
}
Implement Google and other fonts in your site style sheet
Provided you have downloaded fonts which need to get implemented in the site, do following stuff
Method 1
1. Create a separate folder fonts parallel to your other folder,
2. if you have all the formats of font, then paste all of them inside folder,
3. if you dont have all formats, go to the font generator eg: https://www.web-font-generator.com/
4. upload any of the format you have and generate all other formats like .eot, .woff, .svg, .ttf, .otf
5. Then as told earlier, copy those files inside your fonts folder,
6. then paste below code in the style sheet. please make sure your font path is correct along with correct font name.
@font-face {
font-family: 'Oswald-Bold';
src: url('fonts/Oswald-Bold.eot');
src: url('fonts/Oswald-Bold.otf');
src: url('fonts/Oswald-Bold.woff') format('woff'), url('fonts/Oswald-Bold.ttf') format('truetype'), url('fonts/Oswald-Bold.svg') format('svg');
}
then in your css you can use as:
.h4{
font-family:Oswald-Bold;
}
Method 2
Before taking all these tensions to implement your font, you first check if the font is available in google fonts
1. First go to google fonts if the font you require is available or not.ie : https://fonts.google.com/
2. search your required font
3. Click plus icon to add font in your list as shown below
4. then you place your link inside tag of your site header as
<head> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> </head>
then use font as
.h4{
font-family:Roboto;
}
Complete Media query to make your site responsive
The code below helps your site to fit in different screen sizes. we can find various media queries when we google it, among all those codes i feel these to be the most appropriate and easy to use.
//for larger screen ie large desktops
@media only screen and (min-width: 1200px) and (max-width: 1440px) {
}
//for medium screen 15inch laptops
@media only screen and ( min-width: 992px) and (max-width: 1024px) {
}
//for small size laptops ie 13inch laptops
@media only screen and ( max-width: 960px ) {
}
//for ipad and tablets
@media only screen and ( min-width: 768px ) and ( max-width: 960px ) {
}
//for mobiles either horizontal orientation or large size mobiles
@media only screen and ( max-width: 767px ) {
}
//for mobiles or vertical orientation
@media only screen and ( max-width: 479px ) {
}
How to change color of placeholder
Here is the code to change the color of placeholder for you inputs
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}
How to redirect to thank you page from contact form 7 after form submission
Here is a short way to do that.
1. First create thank you page
2. Go to the contact form
3. In the additional settings add
on_sent_ok: “location = ‘/thank-you/’;”
That’s it, then you are good to go.
Easy Codes 