Smooth Scroll to ID with jQuery

Here’s a quick snippet of jQuery code I use often when I need to smoothly scroll to an ID. Just change the 500 to whatever speed (in milliseconds) you want the page to scroll at.

#javascript #jquery

What is GEEK

Buddha Community

Jekyll-spaceship: Jekyll Plugin for Astronauts

 🚀 Jekyll Spaceship 🚀 

Jekyll plugin for Astronauts.

Spaceship is a minimalistic, powerful and extremely customizable Jekyll plugin. It combines everything you may need for convenient work, without unnecessary complications, like a real spaceship.

💡 Tip: I hope you enjoy using this plugin. If you like this project, a little star for it is your way make a clear statement: My work is valued. I would appreciate your support! Thank you!

Requirements

• Ruby >= 2.3.0

Installation

Add jekyll-spaceship plugin in your site's Gemfile, and run bundle install.

# If you have any plugins, put them here!
group :jekyll_plugins do
  gem 'jekyll-spaceship'
end

Or you better like to write in one line:

gem 'jekyll-spaceship', group: :jekyll_plugins

Add jekyll-spaceship to the plugins: section in your site's _config.yml.

plugins:
  - jekyll-spaceship

💡 Tip: Note that GitHub Pages runs in safe mode and only allows a set of whitelisted plugins. To use the gem in GitHub Pages, you need to build locally or use CI (e.g. travis, github workflow) and deploy to your gh-pages branch.

Additions for Unlimited GitHub Pages

• Here is a GitHub Action named jekyll-deploy-action for Jekyll site deployment conveniently. 👍
• Here is a Jekyll site using Travis to build and deploy to GitHub Pages for your references.

Configuration

This plugin runs with the following configuration options by default. Alternative settings for these options can be explicitly specified in the configuration file _config.yml.

# Where things are
jekyll-spaceship:
  # default enabled processors
  processors:
    - table-processor
    - mathjax-processor
    - plantuml-processor
    - mermaid-processor
    - polyfill-processor
    - media-processor
    - emoji-processor
    - element-processor
  mathjax-processor:
    src:
      - https://polyfill.io/v3/polyfill.min.js?features=es6
      - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
    config:
      tex:
        inlineMath:
          - ['$','$']
          - ['\(','\)']
        displayMath:
          - ['$$','$$']
          - ['\[','\]']
      svg:
        fontCache: 'global'
    optimize: # optimization on building stage to check and add mathjax scripts
      enabled: true # value `false` for adding to all pages
      include: []   # include patterns for math expressions checking (regexp)
      exclude: []   # exclude patterns for math expressions checking (regexp)
  plantuml-processor:
    mode: default  # mode value 'pre-fetch' for fetching image at building stage
    css:
      class: plantuml
    syntax:
      code: 'plantuml!'
      custom: ['@startuml', '@enduml']
    src: http://www.plantuml.com/plantuml/svg/
  mermaid-processor:
    mode: default  # mode value 'pre-fetch' for fetching image at building stage
    css:
      class: mermaid
    syntax:
      code: 'mermaid!'
      custom: ['@startmermaid', '@endmermaid']
    config:
      theme: default
    src: https://mermaid.ink/svg/
  media-processor:
    default:
      id: 'media-{id}'
      class: 'media'
      width: '100%'
      height: 350
      frameborder: 0
      style: 'max-width: 600px; outline: none;'
      allow: 'encrypted-media; picture-in-picture'
  emoji-processor:
    css:
      class: emoji
    src: https://github.githubassets.com/images/icons/emoji/

Usage

1. Table Usage

For now, these extended features are provided:

• Cells spanning multiple columns
• Cells spanning multiple rows
• Cells text align separately
• Table header not required
• Grouped table header rows or data rows

Noted that GitHub filters out style property, so the example displays with the obsolete align property. But in actual this plugin outputs style property with text-align CSS attribute.

Rowspan and Colspan

^^ in a cell indicates it should be merged with the cell above.
This feature is contributed by pmccloghrylaing.

|              Stage | Direct Products | ATP Yields |
| -----------------: | --------------: | ---------: |
|         Glycolysis |          2 ATP              ||
| ^^                 |          2 NADH |   3--5 ATP |
| Pyruvaye oxidation |          2 NADH |      5 ATP |
|  Citric acid cycle |          2 ATP              ||
| ^^                 |          6 NADH |     15 ATP |
| ^^                 |          2 FADH |      3 ATP |
|                               30--32 ATP        |||

Code above would be parsed as:

Stage	Direct Products	ATP Yields
Glycolysis	2 ATP
	2 NADH	3–5 ATP
Pyruvaye oxidation	2 NADH	5 ATP
Citric acid cycle	2 ATP
	6 NADH	15 ATP
	2 FADH2	3 ATP
30–32 ATP

Multiline

A backslash at end to join cell contents with the following lines.
This feature is contributed by Lucas-C.

| :    Easy Multiline   : |||
| :----- | :----- | :------ |
| Apple  | Banana | Orange  \
| Apple  | Banana | Orange  \
| Apple  | Banana | Orange
| Apple  | Banana | Orange  \
| Apple  | Banana | Orange  |
| Apple  | Banana | Orange  |

Code above would be parsed as:

Easy Multiline
Apple Apple Apple	Banana Banana Banana	Orange Orange Orange
Apple Apple	Banana Banana	Orange Orange
Apple	Banana	Orange

Headerless

Table header can be eliminated.

|--|--|--|--|--|--|--|--|
|♜| |♝|♛|♚|♝|♞|♜|
| |♟|♟|♟| |♟|♟|♟|
|♟| |♞| | | | | |
| |♗| | |♟| | | |
| | | | |♙| | | |
| | | | | |♘| | |
|♙|♙|♙|♙| |♙|♙|♙|
|♖|♘|♗|♕|♔| | |♖|

Code above would be parsed as:

♜		♝	♛	♚	♝	♞	♜
	♟	♟	♟		♟	♟	♟
♟		♞
	♗			♟
				♙
					♘
♙	♙	♙	♙		♙	♙	♙
♖	♘	♗	♕	♔			♖

Cell Alignment

Markdown table syntax use colons ":" for forcing column alignment.
Therefore, here we also use it for forcing cell alignment.

Table cell can be set alignment separately.

| :        Fruits \|\| Food       : |||
| :--------- | :-------- | :--------  |
| Apple      | : Apple : | Apple      \
| Banana     |   Banana  | Banana     \
| Orange     |   Orange  | Orange     |
| :   Rowspan is 4    : || How's it?  |
|^^    A. Peach         ||   1. Fine :|
|^^    B. Orange        ||^^ 2. Bad   |
|^^    C. Banana        ||  It's OK!  |

Code above would be parsed as:

Fruits || Food
Apple Banana Orange	Apple Banana Orange	Apple Banana Orange
Rowspan is 4  A. Peach  B. Orange  C. Banana
		How's it?
		1. Fine 2. Bad
		It' OK!

Cell Markdown

Sometimes we may need some abundant content (e.g., mathjax, image, video) in Markdown table
Therefore, here we also make markown syntax possible inside a cell.

| :                   MathJax \|\| Image                 : |||
| :------------ | :-------- | :----------------------------- |
| Apple         | : Apple : | Apple                          \
| Banana        | Banana    | Banana                         \
| Orange        | Orange    | Orange                         |
| :     Rowspan is 4     : || :        How's it?           : |
| ^^     A. Peach          ||    1. ![example][cell-image]   |
| ^^     B. Orange         || ^^ 2. $I = \int \rho R^{2} dV$ |
| ^^     C. Banana         || **It's OK!**                   |

[cell-image]: https://jekyllrb.com/img/octojekyll.png "An exemplary image"

Code above would be parsed as:

MathJax || Image
Apple Banana Orange	Apple Banana Orange	Apple Banana Orange
Rowspan is 4  A. Peach  B. Orange  C. Banana
		How's it?
		It' OK!

 

Cell Inline Attributes

This feature is very useful for custom cell such as using inline style. (e.g., background, color, font)
The idea and syntax comes from the Maruku package.

 

Following are some examples of attributes definitions (ALDs) and afterwards comes the syntax explanation:

{:ref-name: #id .cls1 .cls2}
{:second: ref-name #id-of-other title="hallo you"}
{:other: ref-name second}

An ALD line has the following structure:

• a left brace, optionally preceded by up to three spaces,
• followed by a colon, the id and another colon,
• followed by attribute definitions (allowed characters are backslash-escaped closing braces or any character except a not escaped closing brace),
• followed by a closing brace and optional spaces until the end of the line.

If there is more than one ALD with the same reference name, the attribute definitions of all the ALDs are processed like they are defined in one ALD.

An inline attribute list (IAL) is used to attach attributes to another element.
Here are some examples for span IALs:

{: #id .cls1 .cls2} <!-- #id <=> id="id", .cls1 .cls2 <=> class="cls1 cls2" -->
{: ref-name title="hallo you"}
{: ref-name class='.cls3' .cls4}

Here is an example for custom table cell with IAL:

{:color-style: style="background: black;"}
{:color-style: style="color: white;"}
{:text-style: style="font-weight: 800; text-decoration: underline;"}

|:             Here's an Inline Attribute Lists example                :||||
| ------- | ------------------ | -------------------- | ------------------ |
|:       :|:  <div style="color: red;"> &lt; Normal HTML Block > </div> :|||
| ^^      |   Red    {: .cls style="background: orange" }                |||
| ^^ IALs |   Green  {: #id style="background: green; color: white" }    |||
| ^^      |   Blue   {: style="background: blue; color: white" }         |||
| ^^      |   Black  {: color-style text-style }                         |||

Code above would be parsed as:

Additionally, here you can learn more details about IALs.

2. MathJax Usage

MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers.

Some of the main features of MathJax include:

• High-quality display of LaTeX, MathML, and AsciiMath notation in HTML pages
• Supported in most browsers with no plug-ins, extra fonts, or special setup for the reader
• Easy for authors, flexible for publishers, extensible for developers
• Supports math accessibility, cut-and-paste interoperability, and other advanced functionality
• Powerful API for integration with other web applications

2.1 Performance optimization

At building stage, the MathJax engine script will be added by automatically checking whether there is a math expression in the page, this feature can help you improve the page performance on loading speed.

2.2 How to use?

Put your math expression within $...$

$ a * b = c ^ b $

$ 2^{\frac{n-1}{3}} $

$ \int\_a^b f(x)\,dx. $

Code above would be parsed as:

3. PlantUML Usage

PlantUML is a component that allows to quickly write:

• sequence diagram,
• use case diagram,
• class diagram,
• activity diagram,
• component diagram,
• state diagram,
• object diagram

There are two ways to create a diagram in your Jekyll blog page:

```plantuml!
Bob -> Alice : hello world
```

or

@startuml
Bob -> Alice : hello
@enduml

Code above would be parsed as:

4. Mermaid Usage

Mermaid is a Javascript based diagramming and charting tool. It generates diagrams flowcharts and more, using markdown-inspired text for ease and speed.

It allows to quickly write:

• flow chart,
• pie chart,
• sequence diagram,
• class diagram,
• state diagram,
• entity relationship diagram,
• user journey,
• gantt

There are two ways to create a diagram in your Jekyll blog page:

```mermaid!
pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 35
```

or

@startmermaid
pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 35
@endmermaid

Code above would be parsed as:

5. Media Usage

How often did you find yourself googling "How to embed a video/audio in markdown?"

While its not possible to embed a video/audio in markdown, the best and easiest way is to extract a frame from the video/audio. To add videos/audios to your markdown files easier I developped this tool for you, and it will parse the video/audio link inside the image block automatically.

For now, these media links parsing are provided:

• Youtube
• Vimeo
• DailyMotion
• Spotify
• SoundCloud
• General Video ( mp4 | avi | ogg | ogv | webm | 3gp | flv | mov ... )
• General Audio ( mp3 | wav | ogg | mid | midi | aac | wma ... )

There are two ways to embed a video/audio in your Jekyll blog page:

Inline-style:

![]({media-link})

Reference-style:

![][{reference}]

[{reference}]: {media-link}

For configuring media attributes (e.g, width, height), just adding query string to the link as below:

![](https://www.youtube.com/watch?v=Ptk_1Dc2iPY?width=800&height=500)

![](https://www.dailymotion.com/video/x7tfyq3?width=100%&height=400&autoplay=1)

Youtube Usage

![](https://www.youtube.com/watch?v=Ptk_1Dc2iPY)

![](//www.youtube.com/watch?v=Ptk_1Dc2iPY?width=800&height=500)

Vimeo Usage

![](https://vimeo.com/263856289)

![](https://vimeo.com/263856289?width=500&height=320)

DailyMotion Usage

![](https://www.dailymotion.com/video/x7tfyq3)

![](https://dai.ly/x7tgcev?width=100%&height=400)

Spotify Usage

![](http://open.spotify.com/track/4Dg5moVCTqxAb7Wr8Dq2T5)

Spotify Podcast Usage

![](https://open.spotify.com/episode/31AxcwYdjsFtStds5JVWbT)

SoundCloud Usage

![](https://soundcloud.com/aviciiofficial/preview-avicii-vs-lenny)

General Video Usage

![](//www.html5rocks.com/en/tutorials/video/basics/devstories.webm)

![](//techslides.com/demos/sample-videos/small.ogv?allow=autoplay)

![](//techslides.com/demos/sample-videos/small.mp4?width=400)

General Audio Usage

![](//www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3)

![](//www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3?autoplay=1&loop=1)

6. Hybrid HTML with Markdown

As markdown is not only a lightweight markup language with plain-text-formatting syntax, but also an easy-to-read and easy-to-write plain text format, so writing a hybrid HTML with markdown is an awesome choice.

It's easy to write markdown inside HTML:

<script type="text/markdown">
# Hybrid HTML with Markdown is a not bad choice ^\_^

## Table Usage

| :        Fruits \|\| Food       : |||
| :--------- | :-------- | :--------  |
| Apple      | : Apple : | Apple      \
| Banana     |   Banana  | Banana     \
| Orange     |   Orange  | Orange     |
| :   Rowspan is 4    : || How's it?  |
|^^    A. Peach         ||   1. Fine :|
|^^    B. Orange        ||^^ 2. Bad   |
|^^    C. Banana        ||  It's OK!  |

## PlantUML Usage

@startuml
Bob -> Alice : hello
@enduml

## Video Usage

![](https://www.youtube.com/watch?v=Ptk_1Dc2iPY)
</script>

7. Markdown Polyfill

It allows us to polyfill features for extending markdown syntax.

For now, these polyfill features are provided:

• Escape ordered list

7.1 Escape Ordered List

A backslash at begin to escape the ordered list.

Normal:

1. List item Apple.
3. List item Banana.
10. List item Cafe.

Escaped:

\1. List item Apple.
\3. List item Banana.
\10. List item Cafe.

Code above would be parsed as:

Normal:

1. List item Apple.
2. List item Banana.
3. List item Cafe.

Escaped:

1. List item Apple.
3. List item Banana.
10. List item Cafe.

8. Emoji Usage

GitHub-flavored emoji images and names would allow emojifying content such as: it's raining :cat:s and :dog:s!

Noted that emoji images are served from the GitHub.com CDN, with a base URL of https://github.githubassets.com, which results in emoji image URLs like https://github.githubassets.com/images/icons/emoji/unicode/1f604.png.

In any page or post, use emoji as you would normally, e.g.

I give this plugin two :+1:!

Code above would be parsed as:

I give this plugin two :+1:!

8.1 Emoji Customizing

If you'd like to serve emoji images locally, or use a custom emoji source, you can specify so in your _config.yml file:

jekyll-spaceship:
  emoji-processor:
    src: "/assets/images/emoji"

See the Gemoji documentation for generating image files.

9. Modifying Element Usage

It allows us to modify elements via CSS3 selectors. Through it you can easily modify the attributes of an element tag, replace the children nodes and so on, it's very flexible, but here is example usage for modifying a document:

# Here is a comprehensive example
jekyll-spaceship:
  element-processor:
    css:
      - a: '<h1>Test</h1>'                     # Replace all `a` tags (String Style)
      - ['a.link1', 'a.link2']:                # Replace all `a.link1`, `a.link2` tags (Hash Style)
          name: img                            # Replace element tag name
          props:                               # Replace element properties
            title: Good image                  # Add a title attribute
            src: ['(^.*$)', '\0?a=123']        # Add query string to src attribute by regex pattern
            style:                             # Add style attribute (Hash Style)
              color: red
              font-size: '1.2em'
          children:                            # Add children to the element
            -                                  # First empty for adding after the last child node
            - "<span>Google</span>"            # First child node (String Style)
            -                                  # Middle empty for wrapping the children nodes
            - name: span                       # Second child node (Hash Style)
              props:
                prop1: "1"                     # Custom property1
                prop2: "2"                     # Custom property2
                prop3: "3"                     # Custom property3
              children:                        # Add nested chidren nodes
                - "<span>Jekyll</span>"        # First child node (String Style)
                - name: span                   # Second child node (Hash Style)
                  props:                       # Add attributes to child node (Hash Style)
                    prop1: "a"
                    prop2: "b"
                    prop3: "c"
                  children: "<b>Yap!</b>"      # Add children nodes (String Style)
            -                                  # Last empty for adding before the first child node
      - a.link: '<a href="//t.com">Link</a>'   # Replace all `a.link` tags (String Style)
      - 'h1#title':                            # Replace `h1#title` tags (Hash Style)
          children: I'm a title!               # Replace inner html to new text

Example 1

Automatically adds a target="_blank" rel="noopener noreferrer" attribute to all external links in Jekyll's content.

jekyll-spaceship:
  element-processor:
    css:
      - a:                                     # Replace all `a` tags
          props:
            class: ['(^.*$)', '\0 ext-link']   # Add `ext-link` to class by regex pattern
            target: _blank                     # Replace `target` value to `_blank`
            rel: noopener noreferrer           # Replace `rel` value to `noopener noreferrer`

Example 2

Automatically adds loading="lazy" to img and iframe tags to natively load lazily. Browser support is growing. If a browser does not support the loading attribute, it will load the resource just like it would normally.

jekyll-spaceship:
  element-processor:
    css:
      - a:                                     # Replace all `a` tags
          props:                               #
            loading: lazy                      # Replace `loading` value to `lazy`

In case you want to prevent loading some images/iframes lazily, add loading="eager" to their tags. This might be useful to prevent flickering of images during navigation (e.g. the site's logo).

See the following examples to prevent lazy loading.

jekyll-spaceship:
  element-processor:
    css:
      - a:                                     # Replace all `a` tags
          props:                               #
            loading: eager                     # Replace `loading` value to `eager`

There are three options when using this method to lazy load images. Here are the supported values for the loading attribute:

• auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.
• lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.
• eager: Load the resource immediately, regardless of where it’s located on the page.

Credits

• Jekyll - A blog-aware static site generator in Ruby.
• MultiMarkdown - Lightweight markup processor to produce HTML, LaTeX, and more.
• markdown-it-multimd-table - Multimarkdown table syntax plugin for markdown-it markdown parser.
• jmoji - GitHub-flavored emoji plugin for Jekyll.
• jekyll-target-blank - Automatically opens external links in a new browser for Jekyll Pages, Posts and Docs.
• jekyll-loading-lazy - Automatically adds loading="lazy" to img and iframe tags to natively load lazily.
• mermaid - Generation of diagram and flowchart from text in a similar manner as markdown.

Contributing

Issues and Pull Requests are greatly appreciated. If you've never contributed to an open source project before I'm more than happy to walk you through how to create a pull request.

You can start by opening an issue describing the problem that you're looking to resolve and we'll go from there.

Download Details:

Author: jeffreytse
Source Code: https://github.com/jeffreytse/jekyll-spaceship 
License: MIT license

#jekyll #music #emoji #html 

jQuery / Plugin / jQuery Smooth Scroll

jQuery Smooth Scroll

jQuery Smooth Scroll은 HTML 내에서 링크를 클릭하여 이동할 때, 부드럽게 이동하도록 만들어주는 플러그인입니다.

• GitHub : https://github.com/kswedberg/jquery-smooth-scroll
• Download : https://github.com/kswedberg/jquery-smooth-scroll/archive/master.zip

기본 사용법

• 다음처럼 문서 내에서 이동하는 링크를 가진 HTML 문서를 만듭니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>jQuery</title>
		<style>
			body { font-family: Consolas, sans-serif; }
			a { color: blue; }
			p { margin-bottom: 800px; }
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#ipsum">Ipsum</a></li>
			<li><a href="#dolor">Dolor</a></li>
		</ul>
		<h1>Lorem</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		<h1 id="ipsum">Ipsum</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		<h1 id="dolor">Dolor</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
	</body>
</html>

• HTML 문서에 다음 코드를 추가합니다. 보통 위 또는 위에 넣습니다.
• jquery.smooth-scroll.js의 경로는 적절히 수정하세요.

<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/jquery.smooth-scroll.js"></script>
<script>
	$( document ).ready( function() {
		$( 'a' ).smoothScroll();
	} );
</script>

• 이제 링크를 클릭하면 스르륵 그 위치로 이동합니다.

비디오 플레이어

00:00

00:08

특정 링크에만 적용시키는 방법

• 특정 링크에만 적용시키고 싶다면 선택자를 이용하세요. 다음은 ul 태그 안에 있는 링크에 대해서만 Smooth Scroll을 적용하는 예제입니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>jQuery</title>
		<style>
			body { font-family: Consolas, sans-serif; }
			a { color: blue; }
			p { margin-bottom: 800px; }
		</style>
		<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
		<script src="js/jquery.smooth-scroll.js"></script>
		<script>
			$( document ).ready( function() {
				$( 'ul a' ).smoothScroll();
			} );
		</script>
	</head>
	<body>
		<ul>
			<li><a href="#ipsum">Ipsum</a></li>
		</ul>
		<a href="#dolor">Dolor</a>
		<h1>Lorem</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		<h1 id="ipsum">Ipsum</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		<h1 id="dolor">Dolor</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
	</body>
</html>

• Ipsum을 클릭하면 부드럽게 이동하지만, Dolor를 클릭하면 바로 이동합니다.

비디오 플레이어

00:00

00:07

옵션

jQuery Smooth Scroll에는 여러 가지 옵션이 있습니다. 이동 속도를 조절하거나, 이동 방식을 변경하거나, 이동 전 또는 이동 후에 어떤 작업을 수행할 수 있습니다.

다음은 이동 위치를 조정하는 예제입니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>jQuery</title>
		<style>
			body { font-family: Consolas, sans-serif; }
			a { color: blue; }
			p { margin-bottom: 800px; }
		</style>
		<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
		<script src="js/jquery.smooth-scroll.js"></script>
		<script>
			$( document ).ready( function() {
				$( 'ul a' ).smoothScroll( {
					offset: -100
				} );
			} );
		</script>
	</head>
	<body>
		<ul>
			<li><a href="#ipsum">Ipsum</a></li>
			<li><a href="#dolor">Dolor</a></li>
		</ul>
		<h1>Lorem</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		<h1 id="ipsum">Ipsum</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
		<h1 id="dolor">Dolor</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
	</body>
</html>

비디오 플레이어

#jquery #plugin #jquery smooth #codingfactory

Hire Dedicated Jquery Developer

Are You Looking To Hire a jQuery Programmer?

HourlyDeveloper.io, a leading jQuery application development company, can help you build interactive front-end solutions to leapfrog the digital race. So in case, you plan to Hire Dedicated Jquery Developer, you just have to contact us.

For More Information:- https://bit.ly/3f9flt8

#hire dedicated jquery developer #jquery programmer #jquery application development company #jquery developer #jquery #jquerydevelopment

jQuery Ajax CRUD in ASP.NET Core MVC with Modal Popup

In this article, we’ll discuss how to use jQuery Ajax for ASP.NET Core MVC CRUD Operations using Bootstrap Modal. With jQuery Ajax, we can make HTTP request to controller action methods without reloading the entire page, like a single page application.

To demonstrate CRUD operations – insert, update, delete and retrieve, the project will be dealing with details of a normal bank transaction. GitHub repository for this demo project : https://bit.ly/33KTJAu.

Sub-topics discussed :

• Form design for insert and update operation.
• Display forms in modal popup dialog.
• Form post using jQuery Ajax.
• Implement MVC CRUD operations with jQuery Ajax.
• Loading spinner in .NET Core MVC.
• Prevent direct access to MVC action method.

Create ASP.NET Core MVC Project

In Visual Studio 2019, Go to File > New > Project (Ctrl + Shift + N).

From new project window, Select Asp.Net Core Web Application_._

Once you provide the project name and location. Select Web Application(Model-View-Controller) and uncheck HTTPS Configuration. Above steps will create a brand new ASP.NET Core MVC project.

Setup a Database

Let’s create a database for this application using Entity Framework Core. For that we’ve to install corresponding NuGet Packages. Right click on project from solution explorer, select Manage NuGet Packages_,_ From browse tab, install following 3 packages.

Now let’s define DB model class file – /Models/TransactionModel.cs.

public class TransactionModel
{
    [Key]
    public int TransactionId { get; set; }

    [Column(TypeName ="nvarchar(12)")]
    [DisplayName("Account Number")]
    [Required(ErrorMessage ="This Field is required.")]
    [MaxLength(12,ErrorMessage ="Maximum 12 characters only")]
    public string AccountNumber { get; set; }

    [Column(TypeName ="nvarchar(100)")]
    [DisplayName("Beneficiary Name")]
    [Required(ErrorMessage = "This Field is required.")]
    public string BeneficiaryName { get; set; }

    [Column(TypeName ="nvarchar(100)")]
    [DisplayName("Bank Name")]
    [Required(ErrorMessage = "This Field is required.")]
    public string BankName { get; set; }

    [Column(TypeName ="nvarchar(11)")]
    [DisplayName("SWIFT Code")]
    [Required(ErrorMessage = "This Field is required.")]
    [MaxLength(11)]
    public string SWIFTCode { get; set; }

    [DisplayName("Amount")]
    [Required(ErrorMessage = "This Field is required.")]
    public int Amount { get; set; }

    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
    public DateTime Date { get; set; }
}

C#Copy

Here we’ve defined model properties for the transaction with proper validation. Now let’s define  DbContextclass for EF Core.

#asp.net core article #asp.net core #add loading spinner in asp.net core #asp.net core crud without reloading #asp.net core jquery ajax form #asp.net core modal dialog #asp.net core mvc crud using jquery ajax #asp.net core mvc with jquery and ajax #asp.net core popup window #bootstrap modal popup in asp.net core mvc. bootstrap modal popup in asp.net core #delete and viewall in asp.net core #jquery ajax - insert #jquery ajax form post #modal popup dialog in asp.net core #no direct access action method #update #validation in modal popup

How To Check Password Strength Using JQuery

In this post I will show you how to check password strength using jQuery, here I will check whether password strength is fulfill min character requirement or not.

I will give you example how to check password size using javascript and jQuery password strength. password is most important part of authentication many times you can see error message like enter valid password or password must be at least 6 character etc. So, here we are check password using jquery.

How To Check Password Strength Using JQuery

https://websolutionstuff.com/post/how-to-check-password-strength-using-jquery

#jquery #how to check password strength using jquery #validation #how to check password size using javascript #jquery password strength #jquery password validation