• Skip to main content

Uly.me

cloud engineer

  • Home
  • About
  • Archives

HTML

Open Browser in Bash

November 30, 2022

Here’s a nice little command to open a browser from Bash.

#!/bin/bash
open https://domain.com/path/to/web/page/index.html

#!/bin/bash open https://domain.com/path/to/web/page/index.html

You can use this command to open a web page from your script.

Filed Under: HTML, Linux Tagged With: bash, browser, open

Ajax Live Search

May 22, 2022

Just implemented an Ajax live search on a website.

Here’s the search page. Results are displayed in div output.

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#search").keyup(function(){
        var query = $(this).val();
        if (query != "") {
        $.ajax({
            url: 'links-ajax.php',
            method: 'POST',
            data: {query:query},
            success: function(data){
            $('#output').html(data);
            $('#output').css('display', 'block');
            $("#output a").on("click", function(){
                $("#output").val($(this).html());
            });
            $("#search").focusout(function(){
                window.setTimeout(function() {
                $('#output').css('display', 'none');
                }, 500);
            });
            $("#search").focusin(function(){
                $('#output').css('display', 'block');
            });
            }
        });
        } else {
        $('#output').css('display', 'none');
    }
    });
});
</script>
 
<div class="form-row">
    <div class="col">
        <input type="text" name="search" id="search" autocomplete="off" placeholder="Search here...." class="form-control form-control-success">
    </div>
</div>
<div id="output"></div>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#search").keyup(function(){ var query = $(this).val(); if (query != "") { $.ajax({ url: 'links-ajax.php', method: 'POST', data: {query:query}, success: function(data){ $('#output').html(data); $('#output').css('display', 'block'); $("#output a").on("click", function(){ $("#output").val($(this).html()); }); $("#search").focusout(function(){ window.setTimeout(function() { $('#output').css('display', 'none'); }, 500); }); $("#search").focusin(function(){ $('#output').css('display', 'block'); }); } }); } else { $('#output').css('display', 'none'); } }); }); </script> <div class="form-row"> <div class="col"> <input type="text" name="search" id="search" autocomplete="off" placeholder="Search here...." class="form-control form-control-success"> </div> </div> <div id="output"></div>

Here’s the links-ajax.php which display the search results with links.

<?php
$servername='localhost';
$username='';
$password='';
$dbname = "";
$conn=mysqli_connect($servername,$username,$password,"$dbname");
if(!$conn) { die('Could not Connect MySql Server:' .mysql_error()); }
if (isset($_POST['query'])) {
    $query = <<<"SQL
                 SELECT * FROM links WHERE `name` LIKE '%{$_POST['query']}%' 
                 OR `url` LIKE '%{$_POST['query']}%' 
                 OR `tag` LIKE '%{$_POST['query']}%' 
                 ORDER BY name ASC, url ASC"
             SQL;
    $result = mysqli_query($conn, $query);
    if (mysqli_num_rows($result) > 0) {
        while ($user = mysqli_fetch_array($result)) {
            echo "<a target='_blank' rel="noopener">".$user['name']."</a><br/>";
        }
    } else {
        echo "<p style='color:red'>No results found...</p>";
    }
}
?>

<?php $servername='localhost'; $username=''; $password=''; $dbname = ""; $conn=mysqli_connect($servername,$username,$password,"$dbname"); if(!$conn) { die('Could not Connect MySql Server:' .mysql_error()); } if (isset($_POST['query'])) { $query = <<<"SQL SELECT * FROM links WHERE `name` LIKE '%{$_POST['query']}%' OR `url` LIKE '%{$_POST['query']}%' OR `tag` LIKE '%{$_POST['query']}%' ORDER BY name ASC, url ASC" SQL; $result = mysqli_query($conn, $query); if (mysqli_num_rows($result) > 0) { while ($user = mysqli_fetch_array($result)) { echo "<a target='_blank' rel="noopener">".$user['name']."</a><br/>"; } } else { echo "<p style='color:red'>No results found...</p>"; } } ?>

I couldn’t get the links working, until I added the 500ms of timeout in .focusout.

Filed Under: HTML, PHP Tagged With: ajax, live, search, web

Markdown Language

August 5, 2021

Style your text using markdown. If you use GitHub, markdown will come in handy.

Examples:

# This is an <h1> tag
## This is an <h2> tag
###### This is an <h6> tag

# This is an <h1> tag ## This is an <h2> tag ###### This is an <h6> tag

Here are more markdown examples.

Filed Under: HTML Tagged With: github, markdown

Gutenberg Youtube Embed

January 20, 2019

The Gutenberg Youtube embed lacks a few things. The alignment doesn’t seem to be working, at least in the theme I’m using. I’m using Generate-Pro, a Genesis child theme. By default, it’s left-aligned. I have to add this div to make it centered.

<div style="text-align:center">
</div>

<div style="text-align:center"> </div>

If you want right aligned, use this div.

<div style="text-align:right">
</div>

<div style="text-align:right"> </div>

Filed Under: HTML Tagged With: centered, embed, gutenberg, text-align, youtube

TLK.IO Embed

December 2, 2018

tlk.io is a simple chat page that you can embed on your site. If all you are seeing is a blank screen, I may have a fix for it. I don’t think it’s documented anywhere. I did not see it on tlk.io’s website. Here’s the code that they want you to embed. Of course, you have to use your own data-channel instead of the default “hey.”

<div id="tlkio" data-channel="hey" style="width:100%;height:400px;"></div>
<script async="" src="http://tlk.io/embed.js" type="text/javascript"></script>

<div id="tlkio" data-channel="hey" style="width:100%;height:400px;"></div> <script async="" src="http://tlk.io/embed.js" type="text/javascript"></script>

The above code will not work if your site is secured via SSL. You’ll need to change the embed.js reference to https. In this case, it would be something like this. 

<div id="tlkio" data-channel="hey" style="width:100%;height:400px;"></div>
<script async="" src="https://tlk.io/embed.js" type="text/javascript"></script>

<div id="tlkio" data-channel="hey" style="width:100%;height:400px;"></div> <script async="" src="https://tlk.io/embed.js" type="text/javascript"></script>

The code will work in WordPress as well.

Filed Under: HTML, WP Tagged With: chat, secure, ssl, tlk.io

URL Encode

August 2, 2018

If you need to special characters encoded in a URL, these sites really come handy. Why is there a need to encode? URLs accepts only alphanumeric characters and a limited number of special characters. For example, : and / are common characters you’ll find in URLs. Meanwhile spaces are not allowed, but instead are represented as %20 when encoded. There are other special characters that will need to be encoded.

Here are a couple of sites to help you encode:

https://www.urlencoder.org/
https://www.url-encode-decode.com/

Filed Under: HTML Tagged With: encode, url

Implementing Surfcali.com

November 6, 2016

I have a website called Surfcali.com. It’s a website that provides tide table information for select California beaches. The tide information on the website is auto-generated by the xtide program which is available on most Linux distributions.

You can install xtide on Ubuntu by typing this command from the Terminal.

sudo apt-get install xtide

sudo apt-get install xtide

Instead of explaining how the website is implemented using lots of words, it’s probably much easier to explain it via video.

So, here’s a short video of how Surfcali.com was put together.

Video

Filed Under: CSS, HTML, PHP Tagged With: bash, cron, surfcali.com, tide table, xtide

How to Zebra Stripe a Table

September 18, 2016

A HTML table can be difficult to read, especially if there are hundreds of rows. Reading across a row can sometimes be a challenge. One way of making the table more legible is to alternate the background color of each row. By the way, the plugin used on this blog to display code uses zebra stripes. Zebra stripping can be done by toggling a variable and alternately displaying an odd or even CSS class as it goes through the loop.

The Code:

// set variable initially to "odd."
// loop 4 times for demo purposes.
// toggle CSS classes while in a loop.
$c = "odd";
$count = 0;
echo "<table>";
while ($count < 4) :
  if ($c == "even") : echo "<tr class='even'>"; $c="odd"; else : echo "<tr class='odd'>"; $c="even"; endif;
  echo "<td>Data</td>";
  echo "</tr>";
  $count++;
endwhile;
echo "</table>";

// set variable initially to "odd." // loop 4 times for demo purposes. // toggle CSS classes while in a loop. $c = "odd"; $count = 0; echo "<table>"; while ($count < 4) : if ($c == "even") : echo "<tr class='even'>"; $c="odd"; else : echo "<tr class='odd'>"; $c="even"; endif; echo "<td>Data</td>"; echo "</tr>"; $count++; endwhile; echo "</table>";

The Result:

<table>
<tr class='odd'><td>Data</td></tr>
<tr class='even'><td>Data</td></tr>
<tr class='odd'><td>Data</td></tr>
<tr class='even'><td>Data</td></tr>
</table>

<table> <tr class='odd'><td>Data</td></tr> <tr class='even'><td>Data</td></tr> <tr class='odd'><td>Data</td></tr> <tr class='even'><td>Data</td></tr> </table>

The Style:

.odd { background-color: #fff; }
.even { background-color: #eee; }

.odd { background-color: #fff; } .even { background-color: #eee; }

To see it in action, visit CodePad.

Filed Under: CSS, HTML, PHP Tagged With: table, zebra strip

  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Interim pages omitted …
  • Go to page 6
  • Go to Next Page »
  • Home
  • About
  • Archives

Copyright © 2023