Release Notes Table

PHOTO

Wed Jun 30 2021 06:53:11 GMT+0000 (UTC)

Saved by @TumbleCub #html

<table align="left">
	<tbody>
		<tr>
			<td colspan="2" style="border:solid windowtext 1.0pt; background:#81cfd6; width:100.0%; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="100%">
			<p><b>FIELD TITLE</b></p>
			</td>
		</tr>
		<tr>
			<td style="border:solid windowtext 1.0pt; background:#f6a4b5; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="48%">
			<p><b>What happened previously</b></p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; background:#f6a4b5; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="51%">
			<p><b>What has changed</b></p>
			</td>
		</tr>
		<tr style="height:325.4pt">
			<td rowspan="2" style="border:solid windowtext 1.0pt; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="48%">
			<p>DESCRIPTION TEXT</p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="51%">
			<ul>
				<li>POINT ONE</li>
				<li>POINT TWO</li>
				<li>POINT THREE</li>
			</ul>
			</td>
		</tr>
		<tr style="height:19.15pt">
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:19.15pt" valign="top" width="51%">
			<p>PMT: RELATED TICKET</p>
			</td>
		</tr>

				<tr>
			<td colspan="2" style="border:solid windowtext 1.0pt; background:#81cfd6; width:100.0%; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="100%">
			<p><b>FIELD TITLE</b></p>
			</td>
		</tr>
		<tr>
			<td style="border:solid windowtext 1.0pt; background:#f6a4b5; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="48%">
			<p><b>What happened previously</b></p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; background:#f6a4b5; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="51%">
			<p><b>What has changed</b></p>
			</td>
		</tr>
		<tr style="height:325.4pt">
			<td rowspan="2" style="border:solid windowtext 1.0pt; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="48%">
			<p>DESCRIPTION TEXT</p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="51%">
			<ul>
				<li>POINT ONE</li>
				<li>POINT TWO</li>
				<li>POINT THREE</li>
			</ul>
			</td>
		</tr>
		<tr style="height:19.15pt">
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:19.15pt" valign="top" width="51%">
			<p>PMT: RELATED TICKET</p>
			</td>
		</tr>
        		<tr>
			<td colspan="2" style="border:solid windowtext 1.0pt; background:#81cfd6; width:100.0%; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="100%">
			<p><b>FIELD TITLE</b></p>
			</td>
		</tr>
		<tr>
			<td style="border:solid windowtext 1.0pt; background:#f6a4b5; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="48%">
			<p><b>What happened previously</b></p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; background:#f6a4b5; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt" valign="top" width="51%">
			<p><b>What has changed</b></p>
			</td>
		</tr>
		<tr style="height:325.4pt">
			<td rowspan="2" style="border:solid windowtext 1.0pt; width:48.7%; border-top:none; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="48%">
			<p>DESCRIPTION TEXT</p>
			</td>
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:325.4pt" valign="top" width="51%">
			<ul>
				<li>POINT ONE</li>
				<li>POINT TWO</li>
				<li>POINT THREE</li>
			</ul>
			</td>
		</tr>
		<tr style="height:19.15pt">
			<td style="border-bottom:solid windowtext 1.0pt; width:51.3%; border-top:none; border-left:none; border-right:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt; height:19.15pt" valign="top" width="51%">
			<p>PMT: RELATED TICKET</p>
			</td>
		</tr>
</table>

Website Release Notes table

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

Website

@TumbleCub

Release Notes Table Coloured box

#html #javascript #nodejs

How to Save HTML Form Data in JSON - Express

<form action="/new" method="post">
 
  <input name="title" type="text">
  <input name="description" type="text">
  <button type="submit">Submit Form</button>
 
</form>

> More steps

#html #javascript #jsfunctions #dom #dommanipulation

getAttribute() - how to get the value of any attribute of HTML element

<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>

#html #javascript

Stop YouTube Embedded Video from Playing with Javascript

<main>
	<iframe src="https://www.youtube.com/embed/KQetemT1sWc"></iframe>   
    <a href="#!" onclick="stopThis()">Stop Playing</a>
</main>

<script>
  function stopThis(){
      var iframe = container.getElementsByTagName("iframe")[0];
      var url = iframe.getAttribute('src');
      iframe.setAttribute('src', '');
      iframe.setAttribute('src', url);
  }
</script>

Background Image That Doesn't Scroll on Webpage

body{
    background-image: url("img_tree.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Bootstrap Starter Template

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

#javascript #eventos #mouse #css #html

mover un elemento junto al mouse, dentro de un div (eventos de mouse)

let hijo = document.querySelector('.hijo');
let etiqueta = document.querySelectorAll('.etiqueta');
//El metodo .getBoundingClientRect() nos da 
//la posicion de un elemento con respecto al viewport(en numeros).
// tomare la posicion constante del elemento .hijo 
const coords = hijo.getBoundingClientRect();
const j = coords.top; // estamos obteniendo la posicion top en numero
const k = coords.left;

// se aplica forEach para obtener posicion de cada movimiento del mouse
etiqueta.forEach(link => {
// se obtiene la posicion del mouse con la funcion  mover(e)
    function mover(e){
// se calcula la posicion top y left del mouse al cual le restamos
// la posicion del elemento "hijo"; resultado: mouse e "hijo" juntos 
	 let m = e.pageY ;
	 let n = e.pageX ;

	 let t = m - j;
	 let l = n - k;
	 hijo.style.top = t + "px"; // agregando px a los numeros
	 hijo.style.left = l + "px";
    };
// mouseover dice que entro en elemento etiqueta
    link.addEventListener("mouseover",() => {
	hijo.classList.add("edd1");// solo agrega un class que le da color red

	 window.addEventListener("mousemove",mover);// agrega el evento junto a la funcion 
    });

    link.addEventListener("mouseleave",() => {// mouseleave dice que salio del elemento etiqueta
	hijo.classList.remove("edd1"); // le quita un class, que le quita color red
	 window.removeEventListener("mousemove", mover);// remuev el evento
    });
});

/* Simples estilos para delimitar los div*/
.box{
width: 300px;
height: 300px;
border: solid 1px black;
}
.etiqueta{
width:100px;
height:100px;
position: absolute;
left:50px;
top:50px;
background: green;
overflow: hidden;
position:relative;
}
.hijo{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
transform: scale(0); /*desaparece el elemento hijo*/
}
.edd1{
background-color: red;
transform: scale(1); /*reaparece el elemento hijo con el mause al centro*/
} 

// un ejemplo con html
<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div>

#html #alpinejs

Set boolean to true after scrolling on page using Alpine.js

<div
    class="justify-between py-6 md:flex"
    x-data="{
        open: false,
        hasScrolled: false,
        reactOnScroll() {
            if (this.$el.getBoundingClientRect().top < 120 && window.scrollY > 120) {
                this.hasScrolled = true;
            } else {
                this.hasScrolled = false;
            }
        } 
    }"
    x-init="reactOnScroll()"
    @scroll.window="reactOnScroll()"
>

#html #snipet #sublime

@extend Wrapper aka Mixtend | CSS-Tricks - CSS-Tricks

<snippet>
    <content><![CDATA[
@mixin ${1:mixtend}(\$extend: true) {
  @if $extend {
    @extend %${1:mixtend};
  } @else {
    ${2}
  }
}

%${1:mixtend} {
  @include ${1:mixtend}(\$extend: false);
}
]]></content>
    <tabTrigger>mixtend</tabTrigger>
    <scope>source.scss</scope>
</snippet>

How To Make Coupon Code Web Design | Click To Copy Coupon Using HTML CSS JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="coupon-card">
            <img src="google.png" alt="" class="logo">
            <h3>20% Flat off on all ride with in the city using <br> HDFC Credit Card </h>

                <div class="coupon-row">
                    <span id="cpncode">STEALDEAL20</span>
                    <span id="cpnbtn">Copy CODE</span>
                </div>
                <p>Valid Till:20-11-2022</p>
                <div class="circle1"></div>
                <div class="circle2"></div>

        </div>
    </div>
    <script>
        var cpnbtn = document.getElementById("cpnbtn")
        var cpncode = document.getElementById("cpncode")
        
        
        cpnbtn.onclick = function(){
            navigator.clipboard.writeText(cpncode.innerHTML);
            cpnbtn.innerHTML = "COPIED";
            setTimeout(function(){
                cpnbtn.innerHTML = "COPY";
        
            }, 3000); 
        }
    </script>
</body>

</html>

#css #html #z-index

Efecto de transición de background(transition, opacity)

<div class="skt-hero"> <!--Inicia contenedor -->
<div class="columnas z1" style="--backgroundImg: url(https://cdn.thecoolist.com/wp-content/uploads/2016/05/Japanese-Cherry-beautiful-tree.jpg)">1ahola</div>
<div class="columnas z2" style="--backgroundImg: url(https://wallpaperstock.net/wonderful-trees-path-sun-light-wallpapers_47680_1920x1200.jpg)">2a</div>
<div class="columnas z3" style="--backgroundImg: url(https://img.culturacolectiva.com/featured_image/2018/10/04/1538678265674/deforestacion-del-bosque-amazonico-diecisiete-por-ciento.jpg)" >3a</div>
<div class="columnas z4" style="--backgroundImg: url(https://st.depositphotos.com/1012061/4434/i/600/depositphotos_44342021-stock-photo-sun-rays-inside-coconut-palms.jpg)">4a</div>
</div> <!-- Fin del contenedor -->

// css 

body{
z-index: -10:
} /* para asegurar que nadie este por debajo de body*/
.skt-hero {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    background-image: url(https://haciendofotos.com/wp-content/uploads/las-mejores-fotos-de-paisajes-2020.jpg);
    background-size: cover;
}
.skt-hero:hover{
    z-index:-3;
}
.columnas {
    width: 25%;
    height: 100%;
    border: 1px solid gray;
    background-color: transparent;
    position:absolute;
    opacity: 0.05;
    transition: opacity 2s ease;
}
.columnas:hover {
    height: 100%;
    width:100vw;
    background-image: var(--backgroundImg);
    position: ;
    z-index: -1;
    background-size: cover;
    opacity: 1;
}
.z1{
left:0%;
}
.z1:hover{
left:0%;
}
.z2{
left:25%;
}
.z2:hover{
left:0%;
}
.z3{
left:50%;
}
.z3:hover{
left:0%;
}
.z4{
left:75%;
}
.z4:hover{
left:0%;
}

#javascript #jquery #php #html

Ajax Filtering of Custom Post Types

// THE HTML/PHP

// Categories Nav START
<? $terms = get_terms( array(
    'taxonomy' => 'category-name', // <-- update this
    'orderby' => 'ID',
  )); 
  if ( $terms && !is_wp_error( $terms ) ){ ?>
   <ul class="CHANGEME-categories-nav">
      <? foreach( $terms as $term ) { ?>
        <li id="cat-<?php echo $term->term_id; ?>">
           <a href="#" class="<?= $term->slug; ?> ajax" data-term-number="<?= $term->term_id; ?>" title="<?= $term->name;?>"><?= $term->name; ?></a>
        </li>
      <? } ?>
   </ul>
<? } ?>
// Categories Nav END
                                       
// Results Container START
<div id="CHANGEME-results-container" class="CHANGEME-filter-result">
   <? // post query
     $query = new WP_Query( array(
        'post_type' => 'post-name', // <-- update this
        'posts_per_page' => -1,
      ) ); 
   if( $query->have_posts() ): while( $query->have_posts()): $query->the_post(); ?>
    
      // POST TEMPLATE HERE
    
   <? endwhile; endif; wp_reset_query(); ?>
</div>                      
// Results Container END

// The onpage JS for the page template
<script>
(function($) {
        'use strict';
        function cat_ajax_get(catID) {
            jQuery.ajax({
                type: 'POST',
                url: raindrop_localize.ajaxurl,
                data: {"action": "filter", cat: catID },
                success: function(response) {
                    jQuery("#CHANGEME-results-container").html(response);
                    return false;
                }
            });
        }
        $( ".CHANGEME-categories-nav a.ajax" ).click(function(e) {
            e.preventDefault();
            $("a.ajax").removeClass("current");
            $(this).addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
            var catnumber = $(this).attr('data-term-number');
            cat_ajax_get(catnumber);
        });

    })(jQuery);
</script>
                                       
// Callback function for functions.php or some other functions specific php file like theme.php
// Aside from the inital add actions and a few other things, the actual query and post template should be the same as what is on the page.
                                       
add_action( 'wp_ajax_nopriv_filter', 'CHANGEME_cat_posts' );
add_action( 'wp_ajax_filter', 'CHANGEME_cat_posts' );
                                       
function CHANGEME_cat_posts () {
    $cat_id = $_POST[ 'cat' ];
    $args = array (
	  'tax_query' => array(
		    array(
		      'taxonomy' => 'category-name', // <-- update this
		      'field' => 'term_id',
		      'terms' => array( $cat_id )
		    )
		  ),
	    'post_type' => 'post-name', // <-- update this
	    'posts_per_page' => -1,
	  );
	global $post;
    $posts = get_posts( $args );
    ob_start ();
    foreach ( $posts as $post ) { 
	    setup_postdata($post); ?>

	    // POST TEMPLATE HERE

   <?php } wp_reset_postdata();
   $response = ob_get_contents();
   ob_end_clean();
   echo $response;
   die(1);
}

Bootstrap Fixed Floating Buttons

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
  <a class="btn-floating btn-lg red">
    <i class="fas fa-pencil-alt"></i>
  </a>

  <ul class="list-unstyled">
    <li><a class="btn-floating red"><i class="fas fa-star"></i></a></li>
    <li><a class="btn-floating yellow darken-1"><i class="fas fa-user"></i></a></li>
    <li><a class="btn-floating green"><i class="fas fa-envelope"></i></a></li>
    <li><a class="btn-floating blue"><i class="fas fa-shopping-cart"></i></a></li>
  </ul>
</div>

javascript - jQuery load more data on scroll - Stack Overflow

<!DOCTYPE html>
<html>
<head>
    <title>Demo: Lazy Loader</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style>
        #myScroll {
            border: 1px solid #999;
        }

        p {
            border: 1px solid #ccc;
            padding: 50px;
            text-align: center;
        }

        .loading {
            color: red;
        }
        .dynamic {
            background-color:#ccc;
            color:#000;
        }
    </style>
    <script>
		var counter=0;
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height() && counter < 2) {
                appendData();
            }
        });
        function appendData() {
            var html = '';
            for (i = 0; i < 10; i++) {
                html += '<p class="dynamic">Dynamic Data :  This is test data.<br />Next line.</p>';
            }
            $('#myScroll').append(html);
			counter++;
			
			if(counter==2)
			$('#myScroll').append('<button id="uniqueButton" style="margin-left: 50%; background-color: powderblue;">Click</button><br /><br />');
        }
    </script>
</head>
<body>
    <div id="myScroll">
        <p>
            Contents will load here!!!.<br />
        </p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
    </div>
</body>
</html>

Navbar: Bootstrap 4 Reference

<!--logo and text (title) -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/assets/startupcache_logo.svg" width="90" height="90" class="d-inline-block align-top" alt="">
    Startup Cache
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
  	<ul class="navbar-nav">
    	<li class="nav-item active">
        	<a class="nav-link" id="about-link" href="/templates/about.html">About</a>
        </li>
    </ul>
  </div>
</nav>

https://madeusblack.github.io/projects/Library-js/index.html

Browse more snippets >>