Check & Uncheck All Checkboxs with Jquery

We often use Check and Uncheck All when creating programs for the back-end, usually used to select all posts or anything before they are deleted, or in a shopping cart on an e-commerce website, we also often encounter features to check and uncheck all existing items. in the shopping cart.

When we open the email, we can also find check and uncheck all facilities.

Check uncheck jquery

In this article we will try to make a check and uncheck using Jquery, hopefully it will be useful for those of you who are learning Jquery.

HTML Structure

Making Youtube Videos as Website Background

Making video as a website background has become a trend lately, many web designers have implemented it, and it is proven that the results are quite good and make websites look attractive.

Usually musician websites, movie promotion websites or personal websites related to music and movies are suitable for using this trick to support the appearance of their website.

Movie background
Image by Salon.com

In this article, tutorial-webdesign.com will give an example of its use, namely putting a video as a website background, here the video used is a YouTube video so it doesn’t take up hosting bandwidth.

Related previous articles

Play video on website with html5
Upload video files with codeigniter
Start With Equipment.
As usual, before starting we prepare the equipment that we will use.

Video from Youtube (Dear God by Avenged Sevenfold).
Google Webfont (Patrick Hand SC).
Jquery Tubular.
Creating HTML Structure.
After we have enough equipment, it’s time for us to create the HTML structure, actually to make a youtube video as a background we only need a div with ID #wrapper

Head

In the head and /head sections, we insert google web fonts, jquery and Jquery Tubular.
While in the body, we create the following structure.

Body

Make Youtube Video As Website Backgroundwebdesign

Video: Dear God by Avenged Sevenfold | back to tutorial

CSS
For the appearance of the website, you can insert css, please adjust this css according to your needs.

in this demo we are just trying to apply the video as a background and place other elements on it.

{ padding: 0;margins: 0; } a{ text-decoration: none; color: orange; } body{ font-family: ‘Patrick Hand SC’, cursive; overflow: hidden; / optional */
}

wrapper{

background: transparent url(img/pattern.png) repeat top left;
}
header{
padding: 10px 20px;
colors: #f4f4f4;
}
headers h2{
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 1px #fff;
}
header small{
font-size: 14px;
}
Javascript
To run a tubular jquery so that the video is played in the #wrapper div ID, we write the following javascript (jquery) script.
Place the following script just above /head.

$().ready(function() {
$(‘#wrapper’).tubular({videoId: ‘mzX0rhF8buo’, mute: false, ratio: 4/3}); // where idOfYourVideo is the YouTube ID.
});
To determine the youtube video you want to play, take the ID of the youtube video, for example this Avenged Sevenfold video: https://www.youtube.com/watch?v=mzX0rhF8buo
take the tablished ID and put it in the videoID section in the above javascript.

Other options that we can use for video settings with Jquery Tubular can be seen below.

ratio: 16/9 // usually either 4/3 or 16/9 — tweak as needed
videoId: ‘ZCAnLxRvNNc’ // toy robot in space is a good default, no?
mute: true
repeat: true
width: $(window).width() // no need to override
wrapperZIndex: 99
playButtonClass: ‘tubular-play’
pauseButtonClass: ‘tubular-pause’
muteButtonClass: ‘tubular-mute’
volumeUpClass: ‘tubular-volume-up’
volumeDownClass: ‘tubular-volume-down’
increaseVolumeBy: 10 // increment value; volume range is 1-100
start: 0 // starting position in seconds
Results

If the steps above are followed correctly then the video will appear like the following demo, and if you want to try it yourself you can download the script.

To run this script must be connected to the Internet because the video is on Youtube.

Creating a Loading Animation When You First Open a Website

Displaying a loading animation when you first open a website using Jquery is quite interesting to implement on our website, many people think that it’s cooler than loading animation.

Usually the websites that apply a lot are portfolio type websites, movie promotion websites, artist websites, media websites, and others. However, it is not suitable for websites that need quick access, such as news websites or news portals.

The loading animation will appear as long as the website is loaded / loaded everything, after everything is ready, then the page is displayed perfectly, this is usually what we often see on Flash-based websites. But here we make it with jquery.

So how to apply this? on this occasion tutorial-webdesign.com will try to discuss in a simple way, please follow the steps below.

Equipment:
Pattern for Background
jquery
Loading Animation (gif)
Image (image for demo taken from flickr.com)

  1. Create an HTML file with the name index.html then write the following script in body & /body.

Installing the Click & Drag Feature to Replace the Browser Scrollbar

Installing the Click & Drag feature to replace the browser scrollbar has become a current trend, especially with the increasing use of tablet PCs, this technique is growing and widely implemented in various websites.

A week ago, I redesigned the look of my personal site to be simpler, as well as added a blog. However, because it looks simple, I don’t want my site/blog to look “unfinished”.

That’s why I added some features. One of them is the click and drag feature to replace the browser scrollbar function. The click and drag feature of the system works the same as the swipe feature on touchscreen devices.

Interested to put it on your site / blog too? Follow this very easy tutorial.

Resources:
We will need the following resources:

jQuery. Download the latest version of jQuery Download
NiceScroll. Download from GitHub
File Cursor (we will hotlink from Google)
But before entering the tutorial, there are several points that I must mention, namely:

Especially for WordPress. NiceScroll should work in jQuery v.1.5 to v.1.9. But in practice, NiceScroll can’t work in jQuery v.1.8.3 built-in WordPress (v.3.5.1). I don’t recommend you to replace jQuery WordPress with jQuery v.1.9, because that will make a lot of WordPress functions and plugins unable to work. But if you are curious, please try to tinker yourself.
With the click and drag feature, text selection (text block) becomes impossible. So if your site/blog requires text selection, pass the “touchbehavior:true” parameter in this tutorial. Consequently, you will not get the click and drag feature, but your page scrolling will look smoother and more attractive.
Touch Screen
Image by Ebayink

HTML
Basically, it can be applied to any HTML document. Even what you have today (for site/blog owners). Just make sure there is no other jQuery to avoid clashing.

Paste the code to call jQuery into the HTML document, just above the /body tag.

Then for the parameters, use the following code:

$(document).ready(
function() {
$(“html”).niceScroll({touchbehavior:true});
}
);
The full parameters are on the developer’s site or you can download the file provided.

Cursor
Currently, your site/blog page already has a click and drag feature. However, there is one thing that bothers me, namely the cursor does not change to “grab” when we “drag” the page. For that, let’s add a cursor grab with CSS and javascript.

In your CSS file, insert the following stylesheet:

.hand {
cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
.grab {
cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}
Then in the HTML document, paste the following javascript into the body tag:

onmouseup=”this.className=’hand'” onmousedown=”this.className=’grab'”
And done. Please refresh your document, and enjoy the new features of your site/blog.

Results
Here is the result of the tutorial above.

Checking Element Availability With Jquery

When we create a website by using or including Javascript sometimes we need to know whether an element is present or not on our web page, then we can apply the next action to it.

jquery-selectors

If we use pure Javascript, we usually use document.getElementById.

How about using it like this

if(document.getElementById(‘box’)){
// statements here
}
If we use Jquery it will be easier, because it will shorten the writing of the code.

But yes, it becomes a bit heavy because we have to include the Jquery script. So please choose whether to use Jquery or not.

If using Jquery then to check if an element exists or not like this.

if($(‘#box’)){
// statements here
}
But the problem with the code above is that the response will always be considered TRUE, even if the div doesn’t exist.

Therefore we recommend using .length, as follows

if($(‘#box’).length){
// statements here
}
Using the .length command, the return response is how many divs are in our document.
With .length then if the result is 0 then the response is False.

Okay, so a few tips this time.
Walla web design Indonesia.

Share To Social Media

Tutorial on Making Infinite Scroll With PHP, MySQL, Jquery TWD Editorial

Infinite Scroll or website pages that when scrolled have no limit because they are made to automatically take (load) new data to be displayed on one page until all the data is downloaded. This infinite scroll replaces the paging function (page numbering) which we often see from the start on various websites.

Infinity Scroll

In this article, Tutorial-webdesign.com will discuss how to make a simple infinite scroll for your website, where we will try to make it in a simple gallery page.

As we know, several websites that apply this infinite scroll model are Twitter, Facebook, Pinterest, Mashable, etc.

First Step: Creating SQL Database

First we need to prepare a database, here as an example we only create one table to accommodate the names of the image files that we want to display, the database name is infinitescroll.

CREATE TABLE scroll_images (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(255) NOT NULL,
order int(11) NOT NULL,
PRIMARY KEY(id)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;
Creating Index.php Pages

On this index.php page, we don’t really need a lot of HTML tags, if we look at it we only need to create 3 divs with different IDs, of course with a standard HTML structure, put these divs in the body.

Loading More Content

No More Content

We will display 2 images on the index.php page by placing the PHP code for the following sql query at the very top of index.php

$con = mysql_connect(“localhost”, “username”, “password”);
mysql_select_db(“database_name”);

$result = mysql_query(“select SQL_CALC_FOUND_ROWS * from scroll_images order by id asc limit 2”);

$row_object = mysql_query(“Select Found_Rows() as rowcount”);
$row_object = mysql_fetch_object($row_object);
$actual_row_count = $row_object->rowcount;
Ajax with Jquery

Still in the index.php file, we will add Javascript / Ajax with the jquery framework to load other data after the 2 images that we load at the beginning of the website are run, this javascript script is placed in [head] and [/head], previously don’t forgot to include the jquery script which can be downloaded directly from the jquery.com website

varpage = 1;

$(window).scroll(function() {
$(‘#more’).hide();
$(‘#no-more’).hide();

if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
    $('#more').css("top","400");
    $('#more').show();
}
if($(window).scrollTop() + $(window).height() == $(document).height()) {

    $('#more').hide();
    $('#no-more').hide();

    page++;

    vardata = {
        page_num: page
    };

    var actual_count = "<?php echo $actual_row_count; ?>";

    if((page-1)* 2 > actual_count){
        $('#no-more').css("top","400");
        $('#no-more').show();
    }else{
        $.ajax({
            type: "POST",
            url: "data.php",
            data:data,
            success: function(res) {
                $("#result").append(res);
                console.log(res);
            }
        });
    }

}

});
There we can see that the script above is used to determine a page with a trigger, namely when the page has reached a certain position, with ajax we retrieve other image data that is processed in the data.php file, here is a php script to perform a sql query to retrieve the image data

7 WYSIWYG HTML Editors Free

WYSIWYG html editor is a text/content editor that usually exists on a dynamic website, usually wysiwyg html editor is located on the administrator page, wysiwyg html editor has features similar to microsoft word, where we can make text italic, bold, underlined , set paragraphs, make bullets & numbering, and others that are useful for managing website content.

Wysiwyg html editor the most famous is TinyMCE (even used by wordpress), Here are some other free wysiwyg editor that you can use for your website.

  1. Bootstrap-wysiwyg
    Wysiwyg is very small, the file size is only 5kb, and the source code is less than 200 lines.

jquery editor 1 bootstrap

  1. Froala
    Froala WYSIWYG web editor made with the latest technology for today’s website needs

jquery editor 2 Froala

  1. Trumbowyg
    Trumbowyg is a plugin that is quite lightweight, can be translated and adapted to your needs. It has a beautiful design, generates semantic code, accompanied by a powerful API.

jquery editor 3 Trumbowyg

  1. jQuery-Notebook
    Wysiwyg is a simple, clean & elegant web editor that is excellent for web applications that you are building.

jquery editor 4 Jquery notebook5. jquery.qeditor
Very simple WYSIWYG editor made with jquery

jquery editor 5 jquery.qeditor

  1. Morrigan
    Morrigan Editor is a jQuery WYSIWYG editor with predictable behavior, persistence and consistency.

Tutorial How to Create a Hidden Search Form With Jquery

Every dynamic website requires a search form, this search form is very useful to make it easier for visitors to find the writing they want quickly.

Every website has a unique and different design, there are times when a designer is confused about where to place the search form because of the lack of space or the absence of a suitable place to put fields to type keywords. So now it is very trending that the search form is hidden and only displays the search icon (magnifying glass). When the icon is clicked, the form will appear and visitors can type keywords there.

expanding dropdown form search

In this tutorial we will try to model a search form like that.

Creating HTML Structure
First we will create the HTML structure first, here I will only write the header section so you don’t get confused, because the other parts are only complementary.

TWD

Web Design & Development Indonesia

Menu and Form
There we can see that we use the fa-search fa-4x class to display the search icon, which is wrapped in a div with the ID #searchtoggl. In order for the icon to appear, we must first include the css code from the awesome font in the head section of the website. You can read about the use of this awesome font briefly in the article Writing Icons for Website Design.

Beautify With CSS
So that the display looks attractive, we certainly need a css script, here we will only highlight code snippets from the search form and menu, because that is the most important part to form the appearance of the hidden search form.

10 Best Syntax Highlighters for Writing Code on Websites

Sometimes we need to write snippets of program code on the website we are making so that other people can read it. This usually needs to be done by a website whose content is in the form of tutorials on making programs or websites.

The above also occurs on the tutorial-webdesign.com website that you are reading, where we also need to display snippets of program code from the tutorial that we describe. You can read how we display program code snippets in the Migration article from SyntaxHighlighter, where you can find out what plugins are used on the TWD website.

There are lots of jquery plugins that you can use to display code snippets, with the syntax highlighter plugin the program snippets written will look neat, will adjust to the width of your layout, and will not be executed by the website itself.

Here we inform you of 10 jQuery syntax highlighters that you can use on your website.

  1. Highlight.js
    Hihglight.js can be used for 112 languages ​​and has 49 styles, it will automatically detect the language used, supports more than one language usage, can be used for node.js and is also compatible with most javascript frameworks.
  2. Jush JavaScript Syntax Highlighter
    This JavaScript Syntax Highlighter can be used as a client-side syntax highlighter for the following programming languages: HTML, CSS, JavaScript, PHP, SQL, HTTP and SMTP protocol, php.ini and Apache config.
  3. Beauty of Code
    Beauty of code is a syntax highlighter that is also often used by developers, you can check directly on the website for more info about this plugin.
  4. Google Code Prettify
    Google Code Prettify is a javascript module and css file that allows you to write code from source code that you have in web pages.

Google Code Prettify

  1. Lighter for MooTools
    Lighter is a syntax highlight class developed for MooTools. Made with MooTools developer with references to some of the framework’s features.
  2. Syntax Highlighter
    SyntaxHighlighter was created by Alex Gorbatchev, and it seems that this is the most widely used website to display program code snippets.

Trixy: Free Mobile Version Website Template with jQuery

Free mobile version website template with jQuery | Creating a mobile version of the website is now quite necessary, because almost most internet users use cellphones or smartphones to access the internet.

jquery mobile templates

So it is necessary to pay attention to website owners to immediately accommodate visitors who come using the smaller screen.

If you are someone who is looking for a mobile version of a website template made with HTML, CSS and coupled with the powerful capabilities of jQuery, then this Trixy template can be the solution to your problem.

Trixy is made with HTML and CSS, and spiced with jQuery to create various transition effects especially when switching pages.

– Also read: 10 Free jQuery Mobile Themes

It is suitable for personal or corporate websites. Accompanied by various sample pages such as Home, About, Contact, Gallery, Video, and others pages. If interested you can download at the link below.

Templates Details | DEMO | DOWNLOAD

Hopefully it will be useful to support your work as well as for those who want to learn to make a website with jQuery.