Category: HTML

automatic close open HTML tags in a string using php

In sometime in your string close tag missing in this case it need to close tag. This function help you

<?php

function closetags($html) {
    preg_match_all('#<(?!meta|img|br|hr|input\b)\b([a-z]+)(?: .*)?(?<![/|/ ])>#iU', $html, $result);
    $openedtags = $result[1];
    preg_match_all('#</([a-z]+)>#iU', $html, $result);
    $closedtags = $result[1];
    $len_opened = count($openedtags);
    if (count($closedtags) == $len_opened) {
        return $html;
    }
    $openedtags = array_reverse($openedtags);
    for ($i=0; $i < $len_opened; $i++) {
        if (!in_array($openedtags[$i], $closedtags)) {
            $html .= '</'.$openedtags[$i].'>';
        } else {
            unset($closedtags[array_search($openedtags[$i], $closedtags)]);
        }
    }
    return $html;
}

$str = '<div>This is some text<p> and here is a <strong>bold text then the post stop here....';
echo closetags($str);

This is result :

Normal text with missing close tag :
<div>This is some text<p> and here is a <strong>bold text then the post stop here....

Then result is :
<div>This is some text<p> and here is a <strong>bold text then the post stop here....</strong></p></div>

so this function automatic close tag.

Resource from :
https://stackoverflow.com/questions/3810230/close-open-html-tags-in-a-string

if you face any problem then please inform me.

Comment

Get information from the web server automatically

Server-sent events is a technology for where a browser gets automatic updates from a server via HTTP connection. The Server-Sent Events EventSource API is standardized as part of HTML5[1] by the W3C.

Server-Sent Events (SSE) is a standard describing how servers can initiate data transmission towards clients once an initial client connection has been established. They are commonly used to send message updates or continuous data streams to a browser client and designed to enhance native, cross-browser streaming through a JavaScript API called EventSource, through which a client requests a particular URL in order to receive an event stream. First create a simple html page which call php file and get result from this file

<!DOCTYPE html>
<html>
<body>
<h1>Getting server updates</h1>
<div id="result"></div>

<script>
    if(typeof(EventSource)!=="undefined")
    {
        var source=new EventSource("http://localhost/result.php");
        source.onmessage=function(event)
        {
            document.getElementById("result").innerHTML+=event.data + "<br>";
        };
    }
    else
    {
        document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
    }
</script>

</body>
</html>

then create result.php

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

Then you can see the result, without page refresh time will update

This is simple demo result

If you face any problem then please inform me. I will try to help you.

Comment

How to checked checkbox is checked or not using PHP?

If you want to check that which checkbox checked and which not checked using php . Then you can check this simple code which give you this option.

<?php
if(isset($_POST['submit']))
{
  if(isset($_POST['submit']))
    {
       // $x = cout($_POST['checkbox']);
        for($x = 0;$x <= 4;$x++)
        {
            if(strlen($_POST['checkbox'][$x])>1)
            {
                echo "Checkbox is cheked<br>";
            }
            else{
                echo "Checkbox not checked<br>";
            }
        }
    }
 
 
}
 
 
?>

This is html code

<html>
<head>
 
</head>
<body>
<form enctype="multipart/form-data" action="" method="POST">
    <div id="text">
        <input type="checkbox" name="checkbox[0]"  />Checkbox1<br>
        <input type="checkbox" name="checkbox[1]"  />Checkbox2<br>
        <input type="checkbox" name="checkbox[2]"  />Checkbox3<br>
        <input type="checkbox" name="checkbox[3]"  />Checkbox4<br>
        <input type="checkbox" name="checkbox[4]"  />Checkbox5<br>
 
    </div>
    <input type="submit" value="Submit" name="submit" id="submit" />
</form>
</body>
</html>

Hope it will help you. If you find any problem then please inform me. i will try to help you

Comment

How to change css for mobile ?

If you want to change css for specific device then you can use this code. This is simple code.

Option 1:

var window_weight = $(window).width();
    // change weight as your wish
    if (window_weight <= 600) {
        //$('.text-class').removeClass('mobile');
        $('.text-class').css('weight','100px');
    }

Option 2:


if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
            || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) {

        //$('.text-class').removeClass('mobile');
        $('.text-class').css('weight','100px');
    }

if you face any problem then please inform me, i will try to help you.

Comment

Get the max height from a set of elements using jQuery.

In various design section we need to match height for list for look better. In this case need to determine max height of some element and then set this height for all other element .In this case you can do it easily using normal jquery map function. Here is simple code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div class="testdiv">
        Line 1<br>
        Line 2
    </div>
    <div class="testdiv">
        Line 1<br>
        Line 2<br>
        Line 3<br>
        Line 4
    </div>
    <div class="testdiv">
        Line 1
    </div>
    <div class="testdiv">
        Line 1<br>
        Line 2
    </div>
</div>

From this element we need to determine max height then add some style . This is simle jQuery code

<script>
    var highest = null;
    var hi = 0;
    $(".testdiv").each(function () {
        var h = $(this).height();
        if (h > hi) {
            hi = h;

            highest = $(this);
        }
    });
    alert(hi)
    highest.css("background-color", "red");

</script>

In this case this code get max height then you can set other element same height and also some style

If you need any help or face any problem then please inform me, i will try to help you.

Comment

how to set class to selected “li” dynamically using jQuery?

If you want to add class in click li and remove all other class from all li then you can use simple jQuery code. Sometime we need to set active class for menu or other in this case this code is very helpful. This is simple code which set new class and remove all class from li.

$(document).ready(function(){
        $('.list li').click(function() {
             $( '.list li' ).removeClass( "active" ); // remove active class from all li 
            $(this).addClass('active'); // add active class for click li
        });
    });

then this is html code

active {
color:red;
}
   li {
   cursor: pointer;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
            <li>Test 5</li>
            <li>Test 6 </li>
            <li>Test 7</li>
        </ul>

When you click any li then remove all class and add active class , i also add a css which color is red then easily can understand it.
If you face any problem then please inform me. I will try to help you.

Comment