Category: CSS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

In this article, we suggest you to get acquainted with the free editor of web languages – CodeLobster IDE. It is presented on the software market for a long time already, and it wins a lot of fans.

CodeLobster IDE allows you to edit PHP, HTML, CSS, JavaScript and TypeScript files, it highlights the syntax and gives hints for tags, functions and their parameters. This editor easily deals with those files that contain a mixed content.

If you insert PHP code in your HTML template, then the editor correctly highlights both HTML tags and PHP functions. The same applies to CSS and JavaScript/TypeScript code, which is contained in HTML files.

The program includes auto-completion function, which greatly speeds up the programmer’s work and eliminates the possibility of errors.

CodeLobster IDE provides contextual help on all supported programming languages, it uses the most up to date documentation at this moment, downloading it from official sites. So we can quickly get a description of any HTML tag, CSS attribute, PHP or JavaScript/TypeScript function by pressing the F1 key. 

The built-in PHP debugger allows you to execute PHP scripts step by step, sequentially moving through the lines of code. You can assign check points, view the process of the work of loops, and monitor the values of all variables during the execution of the script.

Other useful functions and features of the IDE:

  • A pair highlighting of parentheses and tags – you will never have to count parentheses or quotation marks, the editor will take care of it.
  • Highlighting of blocks, selection and collapsing of code snippets, bookmarks to facilitate navigation on the edited file, recognition and building of the complete structure of PHP projects – these functions ensure easy work with projects of any scale.
  • Support for 17 user interface languages, among them English, German, Russian, Spanish, French and others.
  • The program works on the following operation systems: Windows 7, Windows 8, Windows 10, Mac OS, Linux, Ubuntu, Fedora, Debian.

The professional version of CodeLobster IDE provides the programmer with even more features.

For example, you have an opportunity to work with projects on a remote server with use of the built-in FTP client. You can edit the selected files, preview the results and then synchronize the changes with the files on the hosting.

In addition the professional version includes an extensive set of plug-ins:

  • Fully implemented support for JavaScript (and TypeScript) libraries, such as jQuery, Node.js, AngularJS, AngularTS, BackboneJS, EmberJS, VueJS and MeteorJS.
  • A large set of extensions that help to work with PHP frameworks – CakePHP, CodeIgniter, Laravel, Phalcon, Smarty, Symfony, Twig and Yii plug-ins.
  • Plugins for working with the most popular CMS – Drupal, Joomla, Magento and WordPress.
  • Also CodeLobster IDE has special plug-in for Bootstrap.

We can download and install any framework directly from the program without being distracted from the main tasks.

In general, for a year of work, our team had no complaints against the editor. CodeLobster IDE works fast, does not hang and allows us to work even with large PHP projects.

You can download CodeLobster IDE from the original website http://www.codelobster.com/.

Deferring images for faster pages & Better Page Speed Score

1
2
3
4
5
6
7
8
9
10
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">
<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

This simple trick that I got from here helped me speed up the loading time of a page really nice…

I use this trick only on the hidden images that I call via JavaScript/jQuery or to the images that normally don’t show up on the main screen(located at the middle and the bottom of the page…

CSS & HTML Only – Responsive background image in panel heading & Profile Photo

I made a simple example of a beautiful, responsive and fast panel with a responsive cover photo and a circle photo, this type of design I use on my projects when I wand to represent the TEAM page or CONTACT person.

You can simply modify the size and style of the panel, also, you can add or remove the shadow around the profile photo, change the background cover and the cute cat profile photo.

Check the Source of the demo and give it a try, if you have any other questions, you can simply drop me a line via email…

DEMO

Cosmin

Real time display input value in div with jQuery

I used this simple trick to display the name of a person after he sends the form data via Ajax and I needed a different response(not from Ajax), so, I set the response message to display:none via css and get the name or other informations in real time… when the form is submitted… the div becomes visible and shows the result… like Thank you {Name} for sending us etc. …

1
2
3
$('#name_x').keyup(function () {
  $('#get_name').text($(this).val());
});
1
2
3
4
5
&lt;form>
&lt;input type="text" name="name" id="name_x" size="44" placeholder="Type here to see real time result in div..." style="padding:12px;border-radius:4px;border:1px solid grey" >
&lt;br>&lt;br>
&lt;div id="get_name">&lt;/div>
&lt;/form>

You can see a live demo here.

CSS & HTML click on links and text select bug

If you ever got in trouble with this problem… like… you can’t click on links because something else is covering them(invisible div or something like that)… you just need to add this simple CSS trick to the div via a class or id…

1
2
3
4
.my-class {
position: relative;
z-index: 1;
}

Send data to PHP via AJAX and get response

This is the simple script that I use every time I build one page sites… I use this code to update, delete, modify, add data to Mysql or other DB’s…

This code also get the class or id of the clicked link and can display a result there or in another div… this script can also be modified to play other important parts in the web app…

Hope it helps.

1
2
3
4
5
6
7
8
9
10
11
12
$('.get-delete').click(function() {
    var get_id = $(this).attr('id');
    $("#" + get_id ).toggle(400);
    $.ajax({
        type: 'POST',
        url: 'delete.php',
        data: { idx: get_id},
        success: function(response) {
            $('#result').html(response);
        }
    });
});

jQuery (Ajax) Contact form with all elements

This is my default CONTACT form built with jQuery and CSS.
The form uses a jQuery call to a PHP script that inserts data into a Mysql DB and sends two emails of confirmation, all this under the hood… meanwhile, there is a CSS only animation that displays a message that the data is been sent to the server and shows a positive message if that data was sent without errors and an error message if there was an error.

Ajax Call
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$(document).ready(function(){
 
var request;
 
$("#contact-form").submit(function(event){
 
    event.preventDefault();
 
    if (request) {
        request.abort();
    }
    var $form = $(this);
    var $inputs = $form.find("input, textarea");
    var serializedData = $form.serialize();
    $inputs.prop("disabled", true);
    request = $.ajax({
        url: "contact-form.php",
        type: "post",
        data: serializedData
    });
    request.done(function (response, textStatus, jqXHR){
        //console.log("Hooray, it worked!");
        $(".show-success").slideToggle();
        //$(".hide-contact").slideToggle();
    });
 
    request.fail(function (jqXHR, textStatus, errorThrown){
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
        $(".show-error").slideToggle();
 
    });
 
 
    request.always(function () {
        $inputs.prop("disabled", false);
    });
 
});
 
});

CSS Only Spinner and FORM STYLES
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<style>
.frm{padding:9px;border-radius: 3px;background:#ECEFF1;font-size: .8em; border:0px; width: 100%;font-weight: 300;box-sizing: border-box;}
.frb{background:#3498DB}
.pt-12{padding-top:12px}.small{font-size: .8em}
.hide{display:none}
.org-bg{background:#E74C3C;padding: 12px;border-radius: 3px;margin-bottom: 12px;color: #fff}.grn-bg{background:#52BE80;padding: 12px;border-radius: 3px;margin-bottom: 12px;}
.orange-bg{font-family:'Quicksand',sans-serif;font-weight:400;font-size:.8em;}
.fc{padding-bottom:12px;font-family:'Quicksand',sans-serif;font-weight:400;font-size:1.2em}
 
#loading{display:none}
 
.spinner {
  margin: 0px auto 0;
  width: 70px;
  text-align: center;
}
 
.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;
 
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
 
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
 
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
 
@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}
 
@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}
 
.trimit{background: rgba(149, 192, 234);padding: 12px; border-radius: 3px;margin-top:12px;font-family:'Quicksand',sans-serif;font-weight:400;font-size:.8em;}
</style>

HTML CONTACT FORM (with some FontAwesome icons)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!-- form ROW -->
<div class="row pt-12x">
 
<div id="loading">
<div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>
 
<div class="trimit"><i class="far fa-paper-plane fa-fw"></i> Se trimit datele...</div>
 
</div>
 
<!-- Error Handlers --><div id="show-success"></div>
<div class="grn-bg orange-bg list-font-1 hide show-success"><i class="fas fa-check-square fa-fw"></i> <b>Vă mulțumim!</b> Am primit mesajul dumneavoastră.</div>
<div class="org-bg orange-bg list-font-1 hide show-error"><i class="far fa-question-circle fa-fw"></i> <b>Eroare!</b> Mesajul nu a fost trimis.</div>
<!-- .Error Handlers -->
<!-- form --> <form id="contact-form">                        
  <div class="hide-contact">
<div class="fc"><i class="fas fa-user fa-fw brown"></i> Formular contact</div>
 
            <div>
              <input type="text" name="name" class="frm" placeholder="Nume" required="">
            </div>
            <div class="pt-12">
              <input type="text" name="email" class="frm" placeholder="Email@exemplu.com" required="">
            </div>
 
            <div class="pt-12">
              <input type="text" name="phone" class="frm" placeholder="Număr telefon" required="">
            </div>
 
            <div class="pt-12">
              <textarea name="message" class="frm" rows="6" placeholder="Mesaj..."></textarea><input type="text" name="city" value="" class="hide">
 
            </div>
 
<div class="pt-12 small"><i class="fas fa-lock fa-fw green"></i> Protecția datelor <small>(GDPR) (EU) 2016/679 <a href="https://en.wikipedia.org/wiki/General_Data_Protection_Regulation"><i class="fas fa-external-link-alt fa-fw"></i></a></small></div>
 
            <div class="pt-12">
              <button type="submit" class="frm frb dsblb"><i class="fas fa-paper-plane fa-fw"></i> Trimite</button>
            </div></form>
</form>
 
</div> <!-- ./hide-contact -->
          
 
 
</div>
<!-- ./form-ROW -->

PHP Script that handles the form data
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<?php
 
// v1.0 090318
 
if(isset($_POST['city']) && !empty($_POST['city'])) {
 
echo "Hello Robot!";
 
exit;
 
}
 
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) {
 
echo "Hello Robot 2!";
 
exit;
 
}
 
$today = date("d/m/Y - G:i ");
 
/////////////////////
///////////
/////////
///////
/////
//
 
 
 
include_once("_connect.php");
 
// _POST Vars...
 
$name     = htmlentities($_POST['name']);
$email     = htmlentities($_POST['email']);
$phone     = htmlentities($_POST['phone']);
 
$message1   = htmlentities($_POST['message']);
 
$data = time();
 
$sql = "INSERT INTO table_name
(name, email, phone, message, data)
VALUES
('$name', '$email', '$phone', '$message1', '$data')";
 
 
 
 
 
if ($conn->query($sql) === TRUE) {
 
//////
 
//////
 
 
 
///
 
// yeyy! Mail to owner...
 
 
 
 
 
$to_owner = "me@example.com";
$subject_owner = "New message from...";
 
$message_owner = "
<html>
<head>
<title>New message</title>
</head>
<body>
<p><h3>Mesaj nou pe site...</h3></p>
<p>Detalii mesaj:</p>
<ul>
<li>Name: $name</li>
<li>Phone: <a href=\"tel:$phone\">$phone</a></li>
<li>Email: $email</li>
<li>Data: $today</li>
<li>Message: $message1</li>
</ul>
</body>
</html>
";
 
// Always set content-type when sending HTML email
$headers_owner = "MIME-Version: 1.0" . "\r\n";
$headers_owner .= "Content-type:text/html;charset=UTF-8" . "\r\n";
 
// More headers
$headers_owner .= 'From: Name<contact@example>' . "\r\n" . "Reply-to: $email" . "\r\n";
$headers_owner .= 'Cc: carbon-copy@example.com' . "\r\n";
 
mail($to_owner, $subject_owner, $message_owner, $headers_owner);
 
 
 
 
 
 
 
/////////////////
/// +++++++++++++++++++++ /////
 
 
 
 
 
 
 
 
 
exit;
 
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
 
?>

jQuery + CSS – Activate DIV background colour and deactivate other DIV’s bg colour

This little code delivers all the magic, if you are into one page websites/apps like me, this short code will simply save you lots of time.
This code simply activates(changes the style) of an DIV that is clicked on and removes the same style applied to other DIV(active button) in case it has another active style applied to another DIV.
It can be combined with a little CSS code to display a beautiful color transition.
You can see the code running on this little jsFiddle I made: https://jsfiddle.net/cosminr/ampjtwjp/

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(function() {
 
$('body').on('click', '.section-white', function() {
     $('.section-white').removeClass('on-sel');
       $(this).addClass('on-sel');
});
 
});

CSS TRANSITION
CSS
1
2
3
4
5
6
.on-sel{    
background-color: #82E0AA;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

PHP & HTML – easy spam prevention using hidden form fields (sample code)

The easy and fast working method of securing your forms agains spam bots is as easy as a few lines of PHP and HTML code.

Spam bots, at least, most of them, crawl random websites and fill their forms with all kind of ads or unwanted content. There are a lot of alternatives to stop this, Google Captcha, reCaptcha, etc., I used all of this methods, they work pretty well but, sometimes, when you move your site to a new server or domain, you need to spend a lot of time working around this methods to make them work again.

I simply tried a really simple method that I found a few years ago, the method implies using simple PHP and HTML to trick the bot to fill a field that the user doesn’t see(hidden via CSS).

The code is pretty simple…

Here is the HTML…

HTML CODE
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form action="sample.php">
 
<input type="text" name="name" placeholder="Nume" required="">
<input type="text" name="email" placeholder="Email" required="">
<input type="text" name="phone" placeholder="Telefon" required="">
 
<input type="text" name="city" class="vho" id="send" placeholder="Paris">
 
<button type="submit">Submit</button>
</form>
 
<style>
.vho { display: none }
</style>

 

Here is the PHP…

PHP CODE...
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
 
if(isset($_POST['city']) && !empty($_POST['city'])) {
 
echo "Hello SPAM Robot!";
 
exit;
 
}
 
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['phone'])) {
 
echo "Hello SPAM Robot 2!";
 
exit;
 
}
 
?>