Topnew CSS v 2023 JS related

6 - Javascript related

There are a list of CSS class binded with jQuery

6.1 span of any width / height

class=span data-w=300px class=span data-w=30% data-h=100px

6.2 confirm - js effect on click

Click here to confirm, class=confirm, data-confirm=msg to confirm

6.3 dollar / number - js effect on change

class=dollar, format input as dollar eg 1,234.56

class=number, format input as number eg 1,234.567

6.4 pop - popup a modal

Click here to pop up Example 2

6.5 open - open one child at a time

1- open
This is the details of 1
2- wiki
Brief wiki of "open"
You have a list of siblines of eg divs one after another, click on one open the next and close all others

Code example
<ul class="open"> <li>1- open</li> <li>This is the details of 1</li> <li>2- wiki</li> <li>This is the details of 2</li> <li>3- others</li> <li>This is the details of 3</li> </ul>
3- the third headline
More text for the 3rd

6.6 tabs - open one tab at a time

1 - tabs
2 - wiki
3 - other

This is the first tab text ...

Here is some brief wiki of class="tabs"

There are exactly 2 kids inside tabs

The 1st kid is the headlines to click, add class="on" to the active one

The 2nd kid is the text of 1st kid, add class="on" to the active one

<div class="tabs">
    <ol>
        <li class="on">1 - tabs</li>
        <li>2 - wiki</li>
        <li>3 - other</li>
    </ol>
    <div>
        <div class="on">This is the first tab text ...</div>
        <div>This is the 2nd</div>
        <div>This is the 3rd tab text</div>
    </div>
</div>

This is the 3rd tab text

6.7 tree - click to open/close a tree menu

The tree look nested, however the code [div] not nested, instead they are siblines. The ids of the divs look like nested kids.

This is a demo of class="tree"

1. id = abc

2. id = xyz

2.1 id = xyz-123

2.1.1 id = xyz-123-cat ... some text

2.2.2 id = xyz-123-dog ... some text

2.2 id = xyz-888

2.2.1 id = xyz-888-cat ... some text

2.2.2 id = xyz-888-dog

6.8 show - click to open/close anything

class="show" data-src="target"; target can be anything eg html tag, id, class, etc

The following is a list of controllers, please click to see the effect

class="show" data-src="#showID" src=".showDemo" src="#showDemo b" defa next Im next

The following is a list of targets, which will demo talking to above controllers.

id="showID" class="showDemo" Im b inside #showDemo

show can also close parents -- click here to reset the box below:

Im in box 1 class="abc"

Im in box 2

Im in box 3

Im in box 4
close parent data-p="p" i.e box 4 data-p="pp" i.e box 3 data-p="ppp" i.e box 2 data-p="div.abc" i.e box 1

6.8 js-kid

class="js-kid" data-kid="css1 css2"

copy classes in data-kid to all it's kid elements

class="js-kid" data-kid="bg rc green" abc

class="js-kid" data-src="src or int" data-css="css"

copy data-css (if no css then "on") to children(src), if src is int, then :nth() kid

class="js-kid" data-kid="bg rc" data-src="2" data-css="blue"

6.9 formH

Imagine you have a horizontal form-group of label and input in each line:

<form>
    <div class="line">
        <label class="cell-4">Label</label>
        <input type="text" class="cell-8">
    </div>
    <div class="line">
        <label class="cell-4">Label</label>
        <input type="text" class="cell-8">
    </div>
    ...
</form>

You can use formH to push all class to each kid and kid.label and kid.input etc

<form class="formH cell-6 bg rc" data-box="line-s" data-label="cell-4" data-kid="cell-8">
    <div>
        <label>Label</label>
        <input type="text">
    </div>
    <div>
        <label>Label</label>
        <input type="text">
    </div>
</form>

Here is the result of above

If a form without label, it's more simple just use js-kid

<form class="js-kid cell-6 line-s" data-kid="cell-3">
    <input type="text">
    <input type="text">
    <select></select>
    <select></select>
    <input type="text">
    <label class="pl-2"><input type="checkbox"> cbox</label>
    <select></select>
    <input type="submit" value="Search">
</form>

And here is the result of above code:

6.10 pgno - pagination

6.10.1 - pgno with direct link eg a href="?page=2&key=var" (class=pgno + data-url and/or data-param)

Example 1 - url = /some-page/p/xxx?key=var&a=123
<ol class="pgno rc bg" data-url="?p=" data-param="&key=var&a=123">
    <li data-pgno="1">First</li>
    <li>...</li>
    <li>18</li>
    <li class="off">19</li>
    <li>20</li>
    <li>...</li>
    <li data-pgno="300">Last</li>
</ol>

And here is the result of above example

First
...
18
19
20
...
Last

Example 2 - url with no param, or url contains param
<ol class="pgno rc bg-gold" data-url="?a=1&b=xyz&pgno=">
    <li data-pgno="1">First</li>
    <li>...</li>
    <li>18</li>
    <li class="off">19</li>
    <li>20</li>
    <li>...</li>
    <li data-pgno="300">Last</li>
</ol>

And here is the result of above example

First
...
18
19
20
...
Last

6.10.2 - pgno on click to send a form (class=pgno + data-id)

<form action="?" method="get" class="bg rc">
  <input name="name" value="Topnew">
  <input type="hidden" name="pgno" id="pgno">
</form>
<ol class="pgno rc b-grey" data-id="pgno">
    <li data-pgno="1">First</li>
    <li>...</li>
    <li>18</li>
    <li class="off">19</li>
    <li>20</li>
    <li>...</li>
    <li data-pgno="300">Last</li>
</ol>

And here is the result of above example

First
...
18
19
20
...
Last

6.11 youtube - shorthand for youtube videos

[div class="youtube"]youtube-id[/div] will become the following:

BS1VJjw_eh0

6.12 slide

<div class="slide rc bg hand">
    <div>This is page one - click to slide to next</div>
    <div>This is page two</div>
    <div class="bg-red rc">This is page three</div>
</div>

This is page one - click to slide to next

This is page two

This is page three

6.13 ajax

6.13.1 ajax (default cmd = on change)

eg If you change the country to CN, it will get data from /api?country=CN and populate content for select name="state" accordingly

<input id="country">
<select name="state" class="ajax" data-src="#country" data-url="/api?country="></select>

6.13.2 ajax (cmd = on click)

eg on click, it will get data from data-url, then update the html code for data-src accordingly

<b id="result"></b>
<b class="ajax" data-cmd="click" data-url="api.php?key=123" data-src="#result">Click me</b>

eg on click, it will get data from data-url, then update the html code for self if no data-src specified

<b class="ajax" data-cmd="click" data-url="api.php?key=123">Click me and change me</b>

6.14 file upload: input type="file" class="upload"

Dev note: .upload position seems buggy once you put it inside a cell, not not clickable, but position is misleading (still clickable, but hard to find where to click)

6.15 #backTop - click to scroll back to page top

6.16 lazy load img when screen visible

[img class="load-img" data-src="url-of-img"]