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>

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>

#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 #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>

#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);
}

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

#html #javascript #jsfunctions #dom #dommanipulation

How to change any attribute of a HTML element

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

    document.getElementById("contact").attribute = "phone";
	
    //ALTERNATIVE METHOD TO CHANGE
    document.getElementById("contact").setAttribute('name', 'phone');	

  </script>

</html>

#html #basics #htmltags #seo

HTML Heading Tags <h1> to <h6>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

#html #javascript #howto

How to dynamically update your site's copyright year

<p id="copyrightyear"></p>

<script>
   document.getElementById('copyrightyear').innerHTML
</script>

#html #javascript

Display Date Objects in Shorter Format - MMM DD YYY HH:MM

<p id="date-stamp">Sat Dec 14 2019 16:58:20 GMT+0500 (Pakistan Standard Time)</p>

<script>
        var dateStamp = document.getElementById("date-stamp");
        var date = dateStamp.innerHTML;
        var date2 = date.substr(4, 17);
        dateStamp.innerHTML = date2;
    
</script>

Browse more snippets >>