Java Qui Nhon: tháng 7 2022

Make bootstrap navbar fixed on scroll (sticky top)

https://bootstrap-menu.com/detail-fixed-onscroll.html

There are multiple ways to fix navbar or header on top of page to stay always visible. In this example we illustrate how to add fixed-top class when page scolled. To see the difference between normal and fixed top navigation menu, just scroll. Keep in mind, This will work only for desktop screens. But still you can customize our code example.

Steps to make bootstrap nav fixed top after scroll

Create navbar on top of page
Now check if window scrolled window.addEventListener('scroll', function() { ... }
Check if scrolled more than x amount of px if (window.scrollY > 50) { ... }
Select navbar element and add function classList.add('fixed-top'); to fix on top
Remove class fixed-top when page scrolled back to top

Here are basic code snippets

<header>
<div class="bg-warning py-2"> 
 Some top header info 
</div>

<nav id="navbar_top" class="navbar navbar-expand-lg navbar-dark bg-primary">
 <div class="container">
 	 <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="main_nav">
	<ul class="navbar-nav ms-auto">
		<li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
		<li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
    <li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
	</ul>
  </div> <!-- navbar-collapse.// -->
 </div> <!-- container-fluid.// -->
</nav>
</header>

view raw code.html hosted with ❤ by GitHub

document.addEventListener("DOMContentLoaded", function(){
  window.addEventListener('scroll', function() {
      if (window.scrollY > 50) {
        document.getElementById('navbar_top').classList.add('fixed-top');
        // add padding top to show content behind navbar
        navbar_height = document.querySelector('.navbar').offsetHeight;
        document.body.style.paddingTop = navbar_height + 'px';
      } else {
        document.getElementById('navbar_top').classList.remove('fixed-top');
         // remove padding top from body
        document.body.style.paddingTop = '0';
      } 
  });
}); 
// DOMContentLoaded  end

view raw script.js hosted with ❤ by GitHub

Another simple solution with CSS:

There is more simple way also to do that, just add class name sticky-top to your navbar. But keep in mind, your navbar element must be direct child of body. If you wrap your navbar with some other div it will not work.

Combining a class selector and an attribute selector with jQuery

https://stackoverflow.com/questions/6246683/combining-a-class-selector-and-an-attribute-selector-with-jquery

Combine them. Literally combine them; attach them together without any punctuation.

$('.myclass[reference="12345"]')

Your first selector looks for elements with the attribute value, contained in elements with the class.
The space is being interpreted as the descendant selector.

Your second selector, like you said, looks for elements with either the attribute value, or the class, or both.
The comma is being interpreted as the multiple selector operator — whatever that means (CSS selectors don't have a notion of "operators"; the comma is probably more accurately known as a delimiter).

This code works too:

$("input[reference=12345].myclass").css('border', '#000 solid 1px');

CNAME Records

https://support.dnsimple.com/articles/cname-record/

What’s a CNAME record?

CNAME records can be used to alias one name to another. CNAME stands for Canonical Name.

A common example is when you have both example.com and www.example.com pointing to the same application and hosted by the same server. To avoid maintaining two different records, it’s common to create:

An A record for example.com pointing to the server IP address
A CNAME record for www.example.com pointing to example.com

As a result, example.com points to the server IP address, and www.example.com points to the same address via example.com. If the IP address changes, you only need to update it in one place: just edit the A record for example.com, and www.example.com automatically inherits the changes.

A CNAME record must always point to another domain name, never directly to an IP address. DNSimple’s record editor will warn you if you try to point a CNAME record to an IP address. The sidebar to the right of editing the CNAME encourages you to visit the support article to learn the difference between A, CNAME, ALIAS, and URL records. It also warns you that CNAMEs must be unique to other records.

The DNS A record is specified by RFC 1035.

Restrictions

A CNAME record must always point to another domain name and never directly to an IP address.
A CNAME record cannot co-exist with another record for the same name. It’s not possible to have both a CNAME and TXT record for www.example.com.
A CNAME can point to another CNAME, although this configuration is generally not recommended for performance reasons. When applicable, the CNAME should point as closely as possible to the target name in order to avoid unnecessary performance overheads.

CNAME record format

The structure of a CNAME record follows the standard top-level format definition defined RFC 1035. The RDATA section is composed of one single element:

Element	Description
domain-name	A domain name which specifies the canonical or primary name for the record.

The canonical representation is:

CNAME <domain-name>

where <domain-name> is a fully-qualified domain name such as example.com.

In DNSimple, the CNAME record is represented by the following customizable elements:

Element	Description
Name	The host name for the record, without the domain name. This is generally referred to as “subdomain”. We automatically append the domain name.
TTL	The time-to-live in seconds. This is the amount of time the record is allowed to be cached by a resolver.
Content	The domain-name the CNAME maps to.

CNAME and Redirect

The CNAME record is sometimes improperly referred to as redirect, generally in the context of web (HTTP) redirects.

There’s no direct correlation between a CNAME and an HTTP redirect, nor does configuring CNAME automatically result in any HTTP redirect.
To perform an HTTP redirect, the server responding to the HTTP request must be configured to return an appropriate HTTP response. This is not directly achievable using a CNAME.

You can learn more by reading the differences between the A, CNAME, ALIAS and URL records. DNSimple provides a special URL record that can be used to configure an HTTP redirect.

Querying CNAME records

You can use dig in your terminal to determine the CNAME record associated to a domain name. The result contained in the ANSWER section has the fully-qualified domain name (FQDN), the remaining time-to-live (TTL), and the domain-name.

$ dig CNAME www.dnsimple.com

; <<>> DiG 9.10.6 <<>> CNAME www.dnsimple.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 5274
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 512
;; QUESTION SECTION:
;www.dnsimple.com.		IN	CNAME

;; ANSWER SECTION:
www.dnsimple.com.	3599	IN	CNAME	dnsimple.com.

;; Query time: 52 msec
;; SERVER: 8.8.8.8#53(8.8.8.8)
;; WHEN: Fri Nov 02 20:33:09 CET 2018
;; MSG SIZE  rcvd: 59

Java Qui Nhon