Cool Layout with Complex Chainable Animation

PHOTO

Fri Mar 29 2024 05:07:07 GMT+0000 (Coordinated Universal Time)

Saved by @Jondar #undefined

var $cont = document.querySelector(".cont");

var $elsArr = [].slice.call(document.querySelectorAll(".el"));

var $closeBtnsArr = [].slice.call(document.querySelectorAll(".el__close-btn"));



setTimeout(function () {

 $cont.classList.remove("s--inactive");

}, 0);



$elsArr.forEach(function ($el) {

 $el.addEventListener("click", function () {

  if (this.classList.contains("s--active")) return;

  $cont.classList.add("s--el-active");

  this.classList.add("s--active");

 });

});



$closeBtnsArr.forEach(function ($btn) {

 $btn.addEventListener("click", function (e) {

  e.stopPropagation();
20
  $cont.classList.remove("s--el-active");

  document.querySelector(".el.s--active").classList.remove("s--active");

 });

});

https://codepen.io/Jondar/pen/LYGKbBG/a87e75f9c27590e683578f712253bd29

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

codePen

@Jondar

Cool Layout with Complex Chainable Animation

add property to each object in array javascript using ".map()" Code Example

Results.map(obj=> ({ ...obj, Active: 'false' }))

second child element

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(2) {
  background: red;
}
</style>
</head>
<body>

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>

</body>
</html>

{

  queryArtists(byName:"Red Hot Chili Peppers") {

    name

    id

    image

  }

}

{

  queryArtists(byName:"Red Hot Chili Peppers") {

    name

    id

    image

    albums {

      id

    }

  }

}

full screen search box overlay

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  font-family: Arial;
}

* {
  box-sizing: border-box;
}

.openBtn {
  background: #f1f1f1;
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
}

.openBtn:hover {
  background: #bbb;
}

.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
}

.overlay-content {
  position: relative;
  top: 46%;

jQuery Validate - Radio button example

$(function()

  {

    $('#myform').validate(

      {

        rules:

        {

          Color:{ required:true }

        },

        messages:

        {

          Color:

          {

            required:"Please select a Color<br/>"

          }

        },

        errorPlacement: function(error, element) 

        {

            if ( element.is(":radio") ) 

            {

                error.appendTo( element.parents('.container') );

            }

            else 

            { // This is the default behavior 

                error.insertAfter( element );

Dynamically add input box to text

<!DOCTYPE html>
<html>
<body>

<p>Click the button to create a Text Field.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var x = document.createElement("INPUT");
  x.setAttribute("type", "text");
  x.setAttribute("value", "Hello World!");
  document.body.appendChild(x);
}
</script>

</body>
</html>

hello world C++

#include <iostream>
using namespace std;

int main() {
  cout << "Hello World!";
  return 0;
}

ES6 Console - try JavaScript compilers

fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(resultado => {
  	return resultado.json();
})
      .then(resultadoFinal => {
  	console.log(resultadoFinal)
});

.icon-interactive {
	fill: #6A6976;
	fill-rule: evenodd;
	height: 32px;
	width:32px;
	background:none;
	cursor:pointer;
}

.icon-interactive:hover {
	fill: #363545;
	height: 32px;
	width:32px;
	background:#e2e2e7;
	border-radius: 4px;
}

.icon-interactive:active {
	fill: #0D6AA8;
	height: 32px;
	width:32px;
	background:#CFE1EE;
	border-radius: 4px;
	
}

常用的 rclone 命令

rclone config - 以控制会话的形式添加rclone的配置，配置保存在.rclone.conf文件中。
rclone copy - 将文件从源复制到目的地址，跳过已复制完成的。
rclone sync - 将源数据同步到目的地址，只更新目的地址的数据。
rclone move - 将源数据移动到目的地址。
rclone delete - 删除指定路径下的文件内容。
rclone purge - 清空指定路径下所有文件数据。
rclone mkdir - 创建一个新目录。
rclone rmdir - 删除空目录。
rclone check - 检查源和目的地址数据是否匹配。
rclone ls - 列出指定路径下所有的文件以及文件大小和路径。
rclone lsd - 列出指定路径下所有的目录/容器/桶。
rclone lsl - 列出指定路径下所有文件以及修改时间、文件大小和路径。
rclone md5sum - 为指定路径下的所有文件产生一个md5sum文件。
rclone sha1sum - 为指定路径下的所有文件产生一个sha1sum文件。
rclone size - 获取指定路径下，文件内容的总大小。.
rclone version - 查看当前版本。
rclone cleanup - 清空remote。
rclone dedupe - 交互式查找重复文件，进行删除/重命名操作。
 
rclone move Gdrive1:/Private Gdrive2:/Private
or
rclone copy Gdrive1:/SFW Gdrive2:/SFW
or
rclone sync Gdrive1:/NSFW Gdrive2:/NSFW	
 

rclone copy        复制
rclone move        移动，如果要在移动后删除空源目录，加上 --delete-empty-src-dirs 参数
rclone sync        同步：将源目录同步到目标目录，只更改目标目录
rclone size        查看网盘文件占用大小
rclone delete        删除路径下的文件内容
rclone purge        删除路径及其所有文件内容
rclone mkdir        创建目录
rclone rmdir        删除目录
rclone rmdirs        删除指定环境下的空目录。如果加上 --leave-root 参数，则不会删除根目录
rclone check        检查源和目的地址数据是否匹配
rclone ls        列出指定路径下的所有的文件以及文件大小和路径
rclone lsl        比上面多一个显示上传时间
rclone lsd        列出指定路径下的目录
rclone lsf        列出指定路径下的目录和文件

# 复制到网盘，并显示实时传输进度，设置并行上传数为8
 
rclone copy -P /home/SunPma GD:/home/SunPma --transfers=8
 
# 如果需要服务端对服务端的传输可加以下参数（不消耗本地流量）
 
rclone copy 配置名称:网盘路径 配置名称:网盘路径 --drive-server-side-across-configs

rclone 有 4 个级别的日志记录，ERROR，NOTICE，INFO 和 DEBUG。默认情况下，rclone 将生成 ERROR 和 NOTICE 级别消息。

-q - rclone将仅生成 ERROR 消息。
-v - rclone将生成 ERROR，NOTICE 和 INFO 消息，推荐此项。
-vv - rclone 将生成 ERROR，NOTICE，INFO和 DEBUG 消息。
--log-level LEVEL - 标志控制日志级别。

return 2 objects from function typescript Code Example

//function that returns multiple values

function getTopTwoColors() {

    return ["blue", "pink"];

}

var topTwoColors=getTopTwoColors();

var firstValue=topTwoColors[0]; //get first return value

var secondValue=topTwoColors[1]; //get second return value

Damn simple blockquote

@import url(https://fonts.googleapis.com/css?family=Bitter);



* {

  box-sizing: border-box;

}



html {

  text-align: center;

  padding-top: 50px;

  background: url(https://dl.dropbox.com/s/mz2pjouq8xqw45k/wood_1.png?dl=1);

}



blockquote {

  position: relative;

  display: inline-block;

  background: #eee;

  padding: 40px 30px 30px 60px;

  border-radius: 10px;

  font-family: 'Bitter', serif;

  color: #333;

  text-align: left;

  

  box-shadow: 1px 1px 1px #999,

              2px 2px 1px #999,

              3px 3px 1px #999;

  transition-duration: .3s;

Insert Headers and Footers ‹ The edge to Freedom — WordPress

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '766974780896089');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=766974780896089&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Browse more snippets >>