Classie js, How to use it

Example of codes


function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = jQuery('#header').height(),
            header = document.querySelector("body");
        if (distanceY > shrinkOn) {
            classie.add(header,"sticky-header");
        } else {
            if (classie.has(header,"sticky-header")) {
                classie.remove(header,"sticky-header");
            }
        }
    });
}
window.onload = init();



body.sticky-header div#main-nav {
    position: fixed;
    top: 0;
}


Source : https://brentstromberg.com/sticky-header-classie-js/


window.pageYOffset : https://www.w3schools.com/jsref/prop_win_pagexoffset.asp
var x = window.scrollX;
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_pagexoffset


<br />
<div id="foo\bar">
</div>
<div id="foo:bar">
</div>
<script>
  console.log('#foo\bar');               // "#fooar" (\b is the backspace control character)
  document.querySelector('#foo\bar');    // Does not match anything

  console.log('#foo\\bar');              // "#foo\bar"
  console.log('#foo\\\\bar');            // "#foo\\bar"
  document.querySelector('#foo\\bar'); // Match the first div

  document.querySelector('#foo:bar');    // Does not match anything
  document.querySelector('#foo\\:bar');  // Match the second div
</script>



https://www.w3schools.com/jsref/met_document_queryselector.asp

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_queryselector_class

Accessing The Current URL

Illuminate\Routing\UrlGenerator // Get the current URL without the query string... echo url()->current(); // Get the current URL including the query string... echo url()->full(); // Get the full URL for the previous request... echo url()->previous();

Url generation

Basic url generation $post = App\Post::find(1); echo url("/posts/{$post->id}");

Basic to complex request method in laravel

Basic request $name = $request->input('name');

 Different method public function update(Request $request, $id) { // }

 Accessing The Request Via Route Closures Need to use the illuminate command, via route closures 

use Illuminate\Http\Request;

 Route::get('/', function (Request $request) { // });

 if ($request->is('admin/*')) { // }

 // Without Query String...
$url = $request->url(); //

With Query String...

$url = $request->fullUrl();

 Retrieving the method

 $method = $request->method();

 if ($request->isMethod('post')) { // }

 Has clause if ($request->has('name')) { // }

 Flashing Input Then Redirecting Lot to learn:

 return redirect('form')->withInput();

 return redirect('form')->withInput( $request->except('password') ); <input name="username" type="text" value="{{ old('username') }}" />

Need to memorize this

Lot to learn....

Request::fullUrl()
// Returns: http://laravel.dev/test?test=1
Request::url()
// Returns: http://laravel.dev/test
Request::path()
// Returns: test
Request::root()
// Returns: http://laravel.dev 

Components & Slots

Components & Slots

Components and slots provide similar benefits to sections and layouts; however, some may find the mental model of components and slots easier to understand. First, let's imagine a reusable "alert" component we would like to reuse throughout our application:

<!-- /resources/views/alert.blade.php -->

<div class="alert alert-danger">
    {{ $slot }}
</div>

The {{ $slot }} variable will contain the content we wish to inject into the component. Now, to construct this component, we can use the @component Blade directive:

@component('alert')
    <strong>Whoops!</strong> Something went wrong!
@endcomponent

To instruct Laravel to load the first view that exists from a given array of possible views for the component, you may use the componentFirst directive:

@componentFirst(['custom.alert', 'alert'])
    <strong>Whoops!</strong> Something went wrong!
@endcomponent

Sometimes it is helpful to define multiple slots for a component. Let's modify our alert component to allow for the injection of a "title". Named slots may be displayed by "echoing" the variable that matches their name:

<!-- /resources/views/alert.blade.php -->

<div class="alert alert-danger">
    <div class="alert-title">{{ $title }}</div>

    {{ $slot }}
</div>

Now, we can inject content into the named slot using the @slot directive. Any content not within a @slot directive will be passed to the component in the $slot variable:

@component('alert')
    @slot('title')
        Forbidden
    @endslot

    You are not allowed to access this resource!
@endcomponent

Adding Additional Constraints

Adding Additional Constraints

The Eloquent all method will return all of the results in the model's table. Since each Eloquent model serves as a query builder, you may also add constraints to queries, and then use the get method to retrieve the results:

$flights = App\Flight::where('active', 1)
               ->orderBy('name', 'desc')
               ->take(10)
               ->get();