Category: HTML

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

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