x This domain is for sale. If you intrested, Please contact : webspeckle@gmail.com

How to create blinking effect in JQuery?

Here we created a simple function "Blink". It required two parameters. One is the element object and other is the blinking speed. You will have to include jQuery library. In this example the blink() function is used for to blink the span element. jQuery animate() method is the main part of this function.

<script>
function Blink(Element,Speed)
{
    Element.animate({opacity: 0.2},Speed,function()
    {
    Element.animate({opacity: 1.0},Speed,function()
        {
        Blink(Element,Speed);
        });
});
}
$(document).ready(function()
{
Blink($(".Warning"),200); //400 = Blinking Speed
});
</script>
Final code and demo is here


Demo

window.location.search vs window.location.href

window.location.href
The href property sets or returns the entire URL of the current page.

window.location.search
The search property sets or returns the querystring part of a URL, including the question mark (?).

Suppose  our current page url is "http://www.webspeckle.com/p/online-html-editor?demoid=4545454545"
window.location.href is "http://www.webspeckle.com/p/online-html-editor?demoid=4545454545"
window.location.search is "?demoid=4545454545"


Demo

How to select all text in a DIV?

Here we are showing a simple demo for select all text in a DIV by using JavaScript.


Demo

How to store data in a web browser by using web storage?

Web storage is used for storing data in a web browser. Web storage supports persistent data storage, similar to cookies but with a greatly enhanced capacity and no information stored in the HTTP request header. There are two main web storage types: local storage and session storage, behaving similarly to persistent cookies and session cookies respectively.

Web storage can be viewed simplistically as an improvement on cookies. However, it differs from cookies in some key ways.

Storage size

Web storage provides far greater storage capacity (5 MB per origin in Google Chrome, Mozilla Firefox, and Opera; 10 MB per storage area in Internet Explorer; 25MB per origin on BlackBerry 10 devices) compared to 4 kB (around 1000 times less space) available to cookies.

Client-side interface

Unlike cookies, which can be accessed by both the server and client side, web storage falls exclusively under the purview of client-side scripting.

Web storage data is not automatically transmitted to the server in every HTTP request, and a web server can't directly write to Web storage. However, either of these effects can be achieved with explicit client-side scripts, allowing for fine-tuning of the desired interaction with the server.

Local and session storage

Web storage offers two different storage areas—local storage and session storage—which differ in scope and lifetime. Data placed in local storage is per origin (the combination of protocol, hostname, and port number as defined in the same-origin policy) (the data is available to all scripts loaded from pages from the same origin that previously stored the data) and persists after the browser is closed. Session storage is per-origin-per-window-or-tab and is limited to the lifetime of the window. Session storage is intended to allow separate instances of the same web application to run in different windows without interfering with each other, a use case that's not well supported by cookies.

Interface and data model

Web storage currently provides a better programmatic interface than cookies because it exposes an associative array data model where the keys and values are both strings.

Browsers that support web storage have the global variables sessionStorage and localStorage declared at the window level. The following JavaScript code can be used on these browsers to trigger web storage behaviour:

sessionStorage
// Store value on browser for duration of the session
sessionStorage.setItem('key', 'value');

// Retrieve value (gets deleted when browser is closed and re-opened) ...
alert(sessionStorage.getItem('key'));
localStorage
// Store value on the browser beyond the duration of the session
localStorage.setItem('key', 'value');

// Retrieve value (persists even after closing and re-opening the browser)
alert(localStorage.getItem('key'));
Only strings can be stored via the Storage API. Attempting to store a different data type will result in an automatic conversion into a string in most browsers. Conversion into JSON (JavaScript Object Notation), however, allows for effective storage of JavaScript objects.

// Store an object instead of a string
localStorage.setItem('key', {name: 'value'});
alert(typeof localStorage.getItem('key')); // string

// Store an integer instead of a string
localStorage.setItem('key', 1);
alert(typeof localStorage.getItem('key')); // string

// Store an object using JSON
localStorage.setItem('key', JSON.stringify({name: 'value'}));
alert(JSON.parse(localStorage.getItem('key')).name); // value

Properties

Storage.length
Returns an integer representing the number of data items stored in the Storage object.

Methods

Storage.key()
When passed a number n, this method will return the name of the nth key in the storage.

Storage.getItem()
When passed a key name, will return that key's value.

Storage.setItem()
When passed a key name and value, will add that key to the storage, or update that key's value if it already exists.

Storage.removeItem()
When passed a key name, will remove that key from the storage.

Storage.clear()
When invoked, will empty all keys out of the storage.

What is cookie?

An HTTP cookie (also called web cookie, Internet cookie, browser cookie, or simply cookie) is a small piece of data sent from a website and stored on the user's computer by the user's web browser while the user is browsing. Cookies were designed to be a reliable mechanism for websites to remember stateful information (such as items added in the shopping cart in an online store) or to record the user's browsing activity (including clicking particular buttons, logging in, or recording which pages were visited in the past). They can also be used to remember arbitrary pieces of information that the user previously entered into form fields such as names, addresses, passwords, and credit card numbers.

Other kinds of cookies perform essential functions in the modern web. Perhaps most importantly, authentication cookies are the most common method used by web servers to know whether the user is logged in or not, and which account they are logged in with. Without such a mechanism, the site would not know whether to send a page containing sensitive information, or require the user to authenticate themselves by logging in. The security of an authentication cookie generally depends on the security of the issuing website and the user's web browser, and on whether the cookie data is encrypted. Security vulnerabilities may allow a cookie's data to be read by a hacker, used to gain access to user data, or used to gain access (with the user's credentials) to the website to which the cookie belongs (see cross-site scripting and cross-site request forgery for examples)


A cookie consists of the following components

  1. Name
  2. Value
  3. Zero or more attributes (name/value pairs). Attributes store information such as the cookie’s expiration, domain, and flags (such as Secure and HttpOnly).

Session cookie

A session cookie, also known as an in-memory cookie or transient cookie, exists only in temporary memory while the user navigates the website. Web browsers normally delete session cookies when the user closes the browser. Unlike other cookies, session cookies do not have an expiration date assigned to them, which is how the browser knows to treat them as session cookies.

Persistent cookie

Instead of expiring when the web browser is closed as session cookies do, a persistent cookie expires at a specific date or after a specific length of time. This means that, for the cookie's entire lifespan (which can be as long or as short as its creators want), its information will be transmitted to the server every time the user visits the website that it belongs to, or every time the user views a resource belonging to that website from another website (such as an advertisement).

For this reason, persistent cookies are sometimes referred to as tracking cookies because they can be used by advertisers to record information about a user's web browsing habits over an extended period of time. However, they are also used for "legitimate" reasons (such as keeping users logged into their accounts on websites, to avoid re-entering login credentials at every visit).

These cookies are however reset if the expiration time is reached or the user manually deletes the cookie.

Secure cookie

A secure cookie can only be transmitted over an encrypted connection (i.e. HTTPS). They cannot be transmitted over unencrypted connections (i.e. HTTP). This makes the cookie less likely to be exposed to cookie theft via eavesdropping. A cookie is made secure by adding the Secure flag to the cookie.

HttpOnly cookie

An HttpOnly cookie cannot be accessed by client-side APIs, such as JavaScript. This restriction eliminates the threat of cookie theft via cross-site scripting (XSS). However, the cookie remains vulnerable to cross-site tracing (XST) and cross-site request forgery (XSRF) attacks. A cookie is given this characteristic by adding the HttpOnly flag to the cookie.

SameSite cookie

Google Chrome recently introduced a new kind of cookie which can only be sent in requests originating from the same origin as the target domain. This restriction mitigates attacks such as cross-site request forgery (XSRF).

Third-party cookie

Normally, a cookie's domain attribute will match the domain that is shown in the web browser's address bar. This is called a first-party cookie. A third-party cookie, however, belongs to a domain different from the one shown in the address bar. This sort of cookie typically appears when web pages feature content from external websites, such as banner advertisements. This opens up the potential for tracking the user's browsing history, and is often used by advertisers in an effort to serve relevant advertisements to each user.

As an example, suppose a user visits www.example.org. This web site contains an advertisement from ad.foxytracking.com, which, when downloaded, sets a cookie belonging to the advertisement's domain (ad.foxytracking.com). Then, the user visits another website, www.foo.com, which also contains an advertisement from ad.foxytracking.com, and which also sets a cookie belonging to that domain (ad.foxytracking.com). Eventually, both of these cookies will be sent to the advertiser when loading their advertisements or visiting their website. The advertiser can then use these cookies to build up a browsing history of the user across all the websites that have ads from this advertiser.

Most modern web browsers contain privacy settings that can block third-party cookies.

Supercookie

A supercookie is a cookie with an origin of a top-level domain (such as .com) or a public suffix (such as .co.uk). Ordinary cookies, by contrast, have an origin of a specific domain name, such as example.com.

Supercookies can be a potential security concern and are therefore often blocked by web browsers. If unblocked by the browser, an attacker in control of a malicious website could set a supercookie and potentially disrupt or impersonate legitimate user requests to another website that shares the same top-level domain or public suffix as the malicious website. For example, a supercookie with an origin of .com, could maliciously affect a request made to example.com, even if the cookie did not originate from example.com. This can be used to fake logins or change user information.

The term "supercookie" is sometimes used for tracking technologies that do not rely on HTTP cookies.

Zombie cookie

A zombie cookie is a cookie that is automatically recreated after being deleted. This is accomplished by storing the cookie's content in multiple locations, such as Flash Local shared object, HTML5 Web storage, and other client-side and even server-side locations. When the cookie's absence is detected, the cookie is recreated using the data stored in these locations.

How to show bootstrap popover one at a time?

First you call the popover plugin with the selector

$('[data-toggle="popover"]').popover(options);
You must be set the "trigger" option to "manual" for showing one popover at a time.

$('[data-toggle="popover"]').popover({'trigger': 'manual'});
Then you should catch the click event. Show the current popover and hide others

$('[data-toggle="popover"]').on('click', function (e)
{
    $(this).popover('show');
    $('[data-toggle="popover"]').not(this).popover('hide');
});
The final code & demo is here


Demo

How to Generate Random Colors in JavaScript?

Random is an action that happens without order or reason. In some cases we need random values. JavaScript provides a function for generating random values

i.e.
Math.random()
The random() method returns a random number from 0 (inclusive) up to but not including 1 (exclusive).

In our case we need six digit random hexadecimal color. i.e #FF0000 represent the "RED" color. Read more about Hex colors.
For example in dynamic pie or bar chart view, we need random colors. Here we explain how to generate random colors in javascript.

function GetRandomHexColor()
{
    var AllowedLetters = '0123456789ABCDEF';
    var Color = '#';
    for (var i = 0; i < 6; i++ )
    {
        Color += AllowedLetters[Math.floor(Math.random() * 16)];
    }
    return Color;
}
A demo for changing the border color and text color of a div by using JQuery.


Demo

How to close a database connection in Qt?

In most cases a warning "QSqlDatabasePrivate::addDatabase: duplicate connection name 'qt_sql_default_connection', old connection removed" occurred while adding or closing database in Qt.

How to solve this problem?

// WRONG
QSqlDatabase db = QSqlDatabase::database("mydb");
QSqlQuery query("SELECT ...", db);
QSqlDatabase::removeDatabase("mydb"); // will output the above warning
//Closing database connection in  CORRECT way
db.close();
db =  QSqlDatabase();
QSqlDatabase::removeDatabase("mydb");
And also you can check the database connection is empty or not.

if(db.connectionName().isEmpty())
{
       //Add database.
}

First character of each word to uppercase in JavaScript

Here we introducing a function 'ucwords'. Which is used for convert the first character of each word to uppercase in JavaScript. In PHP a built-in function named 'ucwords' is used to uppercase the first character of each word in a string. But in JavaScript there is no equivalent built-in function.

function ucwords(str)
{
    return str === null ? "" : str.toLowerCase().replace(/^(.)|\s+(.)/g, function ($1)
    {
        return $1.toUpperCase();
    });
}
Eg:
ucwords("CONVERT the fIRst character of each word to uppercase in javascript");
ucwords("convert the first character of each word to uppercase in javascript");
ucwords("CONVERT THE FIRST CHARACTER OF EACH WORD TO UPPERCASE IN JAVASCRIPT");
ucwords("Convert the first character of each word to uppercase in javascript");

The above all sentences are converted to
"Convert The First Character Of Each Word To Uppercase In Javascript"

What is Spring Boot?

Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that you can “just run”. We take an opinionated view of the Spring platform and third-party libraries so you can get started with minimum fuss. Most Spring Boot applications need very little Spring configuration. You can use Spring Boot to create Java applications that can be started using java -jar or more traditional war deployments. We also provide a command line tool that runs “spring scripts”.

Most Spring Boot applications need very little Spring configuration. The most important feature of Spring Framework is Dependency Injection.

Features

  • Create stand-alone Spring applications
  • Embed Tomcat, Jetty or Undertow directly (no need to deploy WAR files)
  • Provide opinionated 'starter' POMs to simplify your Maven configuration
  • Automatically configure Spring whenever possible
  • Provide production-ready features such as metrics, health checks and externalized configuration
  • Absolutely no code generation and no requirement for XML configuration

Spring Boot auto-configuration attempts to automatically configure your Spring application based on the jar dependencies that you have added. For example, If HSQLDB is on your classpath, and you have not manually configured any database connection beans, then we will auto-configure an in-memory database.

One of the biggest advantages of packaging your application as jar and using an embedded HTTP server is that you can run your application as you would any other. Debugging Spring Boot applications is also easy; you don’t need any special IDE plugins or extensions. SpringApplication will load properties from application.properties files.

Spring Boot uses Commons Logging for all internal logging, but leaves the underlying log implementation open. Default configurations are provided for Java Util Logging, Log4J2 and Logback. In each case loggers are pre-configured to use console output with optional file output also available.

By default, If you use the ‘Starters’, Logback will be used for logging. Appropriate Logback routing is also included to ensure that dependent libraries that use Java Util Logging, Commons Logging, Log4J or SLF4J will all work correctly.

Spring Boot is well suited for web application development. You can easily create a self-contained HTTP server using embedded Tomcat, Jetty, or Undertow. Most web applications will use the spring-boot-starter-web module to get up and running quickly.

As well as REST web services, you can also use Spring MVC to serve dynamic HTML content. Spring MVC supports a variety of templating technologies including Thymeleaf, FreeMarker and JSPs. Many other templating engines also ship their own Spring MVC integrations.

Spring Boot includes auto-configuration support for the following templating engines:
  1. FreeMarker
  2. Groovy
  3. Thymeleaf
  4. Mustache

JSPs should be avoided if possible, there are several known limitations when using them with embedded servlet containers.

Spring Boot provides an /error mapping by default that handles all errors in a sensible way, and it is registered as a ‘global’ error page in the servlet container. For machine clients it will produce a JSON response with details of the error, the HTTP status and the exception message. For browser clients there is a ‘whitelabel’ error view that renders the same data in HTML format (to customize it just add a View that resolves to ‘error’). To replace the default behaviour completely you can implement ErrorController and register a bean definition of that type, or simply add a bean of type ErrorAttributes to use the existing mechanism but replace the contents.

If you want to display a custom HTML error page for a given status code, you add a file to an /error folder. Error pages can either be static HTML (i.e. added under any of the static resource folders) or built using templates. The name of the file should be the exact status code or a series mask.


How to use marker clusters on a Google map?

This tutorial shows you how to use marker clusters to display a large number of markers on a map. You can use the MarkerClusterer library in combination with the Google Maps JavaScript API to combine markers of close proximity into clusters, and simplify the display of markers on the map.

The MarkerClusterer library uses the grid-based clustering technique that divides the map into squares of a certain size (the size changes at each zoom level), and groups the markers into each square grid. It creates a cluster at a particular marker, and adds markers that are in its bounds to the cluster. It repeats this process until all markers are allocated to the closest grid-based marker clusters based on the map's zoom level. If markers are in the bounds of more than one existing cluster, the Maps JavaScript API determines the marker's distance from each cluster, and adds it to the closest cluster.

You can set a MarkerClusterer option to adjust the cluster position to reflect the average distance between all the markers that are contained within it. You can also customize the MarkerClusterer to modify other parameters like the grid size, the cluster icon, cluster text, among others.



As a simple illustration, this tutorial adds a set of markers to the map using the locations array. You can use other sources to get markers for your map.

Adding a marker clusterer
Follow the steps below to add a marker clusterer:

1) Get the marker clustering library and images from GitHub, and store them on a server accessible to your app.
The JavaScript library and image files for the MarkerClusterer are available in the Google Maps repo on GitHub. Download or copy the following files from GitHub to a location accessible to your app:
markerclusterer.js
m1.png
m2.png
m3.png
m4.png
m5.png

2) Add the marker clustering library to your page.
In the code for this tutorial, the script below specifies the location of the markerclusterer.js library file on https://developers.google.com.

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
Change the path to specify the location where you have saved the same file.

3) Add a marker clusterer in your app.
The code below adds a marker clusterer to the map.

var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
This sample passes the markers array to the MarkerClusterer. It also specifies the location of all five image files in the imagePath parameter. Replace this with the path to the location where you have saved the same image files.

Demo

What is CodeMirror?

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.CodeMirror is an open-source project shared under an MIT license

A rich programming API and a CSS theming system are available for customizing CodeMirror to fit your application, and extending it with new functionality.The desktop versions of the following browsers, in standards mode (HTML5 <!doctype html> recommended) are supported: Firefox (version 4 >=), Chrome,  Safari (5.2 >=),  Internet Explorer (8 >=),  Opera (9  >=). Recent versions of the iOS browser and Chrome on Android should work pretty well.

Features

  1. Support for over 100 languages out of the box
  2. A powerful, composable language mode system
  3. Autocompletion (XML)
  4. Code folding
  5. Configurable keybindings
  6. Vim, Emacs, and Sublime Text bindings
  7. Search and replace interface
  8. Bracket and tag matching
  9. Support for split views
  10. Linter integration
  11. Mixing font sizes and styles
  12. Various themes
  13. Able to resize to fit content
  14. Inline and block widgets
  15. Programmable gutters
  16. Making ranges of text styled, read-only, or atomic
  17. Bi-directional text support 


What is Hex Triplet?

A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications to represent colors. The bytes represent the red, green and blue components of the color. One byte represents a number in the range 00 to FF (in hexadecimal notation), or 0 to 255 in decimal notation. This represents the least (0) to the most (255) intensity of each of the color components. Thus web colors specify colors in the True Color (24-bit RGB) color scheme. The hex triplet is formed by concatenating three bytes in hexadecimal notation, in the following order:

Byte 1: red value (color type red)
Byte 2: green value (color type green)
Byte 3: blue value (color type blue)

RedGreenBlue

For example, consider the color where the red/green/blue values are decimal numbers: red=36, green=104, blue=160 (a grayish-blue color). The decimal numbers 36, 104 and 160 are equivalent to the hexadecimal numbers 24, 68 and A0 respectively. The hex triplet is obtained by concatenating the 6 hexadecimal digits together, 2468A0 in this example.
If any one of the three color values is less than 16 (hex) or 10 (decimal), it must be represented with a leading zero so that the triplet always has exactly six digits. For example, the decimal triplet 4, 8, 16 would be represented by the hex digits 04, 08, 10, forming the hex triplet 040810.

The number of colors that can be represented by this system is 2563 or 224 or 166 = 16,777,216

Shorthand hexadecimal form

An abbreviated, three (hexadecimal)-digit form is used.[4] Expanding this form to the six-digit form is as simple as doubling each digit: 09C becomes 0099CC as presented on the following CSS example:

.threedigit { color: #09C;    }
.sixdigit   { color: #0099CC; } /* same color as above */

The three-digit form is described in the CSS specification, not in HTML. As a result, the three-digit form in an attribute other than "style" is not interpreted as a valid color in some browsers.

This shorthand form reduces the palette to 4,096 colors, equivalent of 12-bit color as opposed to 24-bit color using the whole six-digit form (16,777,216 colors), this limitation is sufficient for many text based documents.

How to empty an array in JavaScript?

JavaScript arrays are used to store multiple values in a single variable.An array is a special variable, which can hold more than one value at a time.

Here we have an array
Eg:
var Arr = [1,2,3,4,5];
4 ways to empty this array

Method 1:

Arr = [];

Method 2:

Arr.length = 0;

Method 3:

Arr.splice(0,Arr.length)

Method 4:

while(Arr.length > 0)
    Arr.pop();
}

Clearing object array

var website = {url:"http://www.webspeckle.com", type:"blog"};
console.log(website); //{ url:"http://www.webspeckle.com", type:"blog"}
var websiteData = null;
for(websiteData in website)
{
    website[websiteData] = null;
}
console.log(website); //{ url:null, type:null}

URL Slug vs Permalink URL

Permalink: A permalink or permanent link is a URL that is intended to remain unchanged for many years into the future, yielding a hyperlink that is less susceptible to link rot. Permalinks are often rendered simply, that is, as friendly URLs, so as to be easy for people to type and remember. Most modern blogging and content-syndication software systems support such links. Sometimes URL shortening is used to create them.

A permalink is a type of persistent identifier and the word permalink is sometimes used as a synonym of persistent identifier. More often, though, permalink is applied to persistent identifiers which are generated by a content management system for pages served by that system. This usage is especially common in the blogosphere. Such links are not maintained by an outside authority, and their persistence is dependent on the durability of the content management system itself.

Slug: Slug as the part of a URL that identifies a page in human-readable keywords. It is usually the end part of the URL, which can be interpreted as the name of the resource, similar to the basename in a filename or the title of a page. The name is based on the use of the word slug in the news media to indicate a short name given to an article for internal use.

Slugs are typically generated automatically from a page title but can also be entered or altered manually, so that while the page title remains designed for display and human readability, its slug may be optimized for brevity or for consumption by search engines. Long page titles may also be truncated to keep the final URL to a reasonable length.

Slugs are generally entirely lowercase, with accented characters replaced by letters from the English alphabet and whitespace characters replaced by a dash or an underscore to avoid being encoded. Punctuation marks are generally removed, and some also remove short, common words such as conjunctions. For example:

Original title: This, That and the Other! An Outré Collection
Generated slug: this-that-other-outre-collection

Remove all child elements of a parent by using JavaScript or JQuery

Here we explaining how to remove all HTML DOM child elements of a parent by using JavaScript or JQuery.

Eg:
<div id="Parent">
<span>This is some text in the div.</span>
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
<input type="text" value="webspeckle.com"/>
</div>
In the above example div is the parent element because 'div' tag is wrapped the other HTML DOM (Document Object Model) elements. Here the parent has four child elements. i.e span,p,input.

We can remove the elements by two way.

1) Remove the parent element and its child elements.
2) Remove only the child elements.

In JQuery it is very easy
Catch the parent element. Remove the parent element & its child or Delete all child elements.

$("#Parent").remove(); //Removes the selected element (and its child elements)
$("#Parent").empty(); //Removes the child elements from the selected element
In JavasCript
Remove all child elements
var Parent = document.getElementById("Parent");
while (Parent.hasChildNodes())
{
   Parent.removeChild(Parent.firstChild);
}
Remove parent and its child elements
var Parent = document.getElementById("Parent");
var ParentWrapper = Parent.parentNode;
while (ParentWrapper.hasChildNodes())
{
   ParentWrapper.removeChild(ParentWrapper.firstChild);
}

How can i access blogger variable in JavaScript?

Sometime we need to access blogger variable through javascript. You can easily get the the value in JavaScript by two methods

1) Direct access from JavaScript.
<script>
var blogURL = '<data:blog.url/>';
</script>
2) Set the value in an html element. Then access from JavaScript.
<div id="blogURL" data-blog-url="<data:blog.url/>"></div>
<script>
var blogURL = document.getElementById("blogURL").getAttribute("data-blog-url");
</script>
or

<input id="blogURL" type="hidden" value="<data:blog.url/>"/>
<script>
var blogURL = document.getElementById("blogURL").value;
</script>

Remove google ads from blogger post preview page

Today i got a warning from Google Adsense "There are unauthorized sites that have displayed ads using your AdSense publisher ID within the last week. Please click here..." etc.

I have added all my websites in my adsense authorization page & currently site authorization is active.

In the adsense pageview page, finally i got the url like
https://4492560067822442951_160e48051667999.blogspot.com

'4492560067822442951_160e48051667999' is equalant of my blogger subdomain.i.e
https://4492560067822442951_160e48051667999.blogspot.com = example.blogspot.com

I have a blogger blog with a custom domain. Before publish the post i click on the preview button, it open new tab & show the post preview.

The preview url is like this "https://4492560067822442951_160e48051667999.blogspot.com/b/post-preview?token=3f6aj1fsdfwBAAA.OWl1PrgJZ9iqxEsdfstTU1BW_o8AyE74KVOyWmRglY4gv4FQY_1NyNWdqorJqaSEDaIKvsw7BhLgz2JpAJc7f23_Tw.T3lperu4WH_zIQFxVgfEpA&postId=60302242414450751984379&type=POST"

I think this is the reason for adsense warning.

I had tried to add this domain 4492560067822442951_160e1667999.blogspot.com in adsense authorization page. But invalid url error occured.

How can i solve this problem?
Please take your blogger backup before doing this step.

Solution:

Check if your url contain 'post-preview', the just remove all the google adsense code by using JavaScript or JQuery

Add a div as a wrapper for Google ad code
Eg:
<div class='GoogleAdsWrapper'>
<!-- Add your adsense code here -->
</div>
1) By using JQuery
Add JQuery API. If already added in your blogger ignore it
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Find '$( document ).ready(function() '. If it is found, then add the below lines into it
var CurrentURL = window.location.href;
if(CurrentURL.search(/.blogspot./i) >= 0 && CurrentURL.search(/post-preview/i) >= 0)
{
    $(".adsbygoogle").closest(".GoogleAdsWrapper").remove();
}
If it is not found add the below lines just before '</head>' tag.
$( document ).ready(function()
{
    var CurrentURL = window.location.href;
    if(CurrentURL.search(/.blogspot./i) >= 0 && CurrentURL.search(/post-preview/i) >= 0)
    {
        $(".adsbygoogle").closest(".GoogleAdsWrapper").remove();
    }
});
2) By using JavaScript
Add the below lines just before '</head>' tag.
var child = document.getElementsByClassName("adsbygoogle");
var Parent = child.parentNode;
while (Parent.hasChildNodes())
{
    Parent.removeChild(Parent.firstChild);
}
Done! 

How do i get the current URL in JavaScript?

The window.location object can be used to get the current page URL and also we can use to redirect the browser to a new page.

The window.location.href property returns the URL of the current page.
Eg:
<script>
Console.log("The curret page URL is: " + window.location.href);
</script>
window.location.href returns the href (URL) of the current page
window.location.hostname returns the domain name of the web host
window.location.pathname returns the path and filename of the current page
window.location.protocol returns the web protocol used (http: or https:)
window.location.assign loads a new document

How to perform a case-insensitive search in JavaScript?

The search() method searches a string for a specified value, and returns the position of the first occurrence of the specified searchvalue, or -1 if no match is founds.
The search value can be string or a regular expression.

Eg:
Case sensitive search
var str = "WELCOME to WebSpeckle.com";
var n = str.search("COM");
Output is: 3 //Found in third position
var str = "Welcome to WebSpeckle.com";
var n = str.search("COM");
Output is: -1 //Not found
Case insensitive search
var str = "Welcome to WebSpeckle.com";
var n = str.search(/COM/i); Output is: 3 //Found in third position

How to create a simple JavaScript chart in div?

Here we are creating a simple JavaScript line chart in div using chart.js. In this chart required X & Y axis data. Here we are using some sample data. You can replace with your own data.

1) You can download the latest version of Chart.js from the GitHub releases or use a Chart.js CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
Add a '<div>' element to your html page.

<div class="Chart">
After that we should use the chart api.

The final code & demo is here


Demo

How to create a simple JavaScript chart in html5 canvas?

Here we are creating a simple JavaScript line chart in html5 canvas by using chart.js. In this chart required X & Y axis data. Here we are using some sample data. You can replace with your own data.

You can download the latest version of Chart.js from the GitHub releases or use a Chart.js CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
Add a '<canvas>' element to your html page.

<canvas id="myChart" width="400" height="400"></canvas>
After that we should use the chart api.

The final code & demo is here


Demo

Multiple markers with infowindows in Google map API


  • Add a div tag to your html file and give an id like "GoogleMap" for the div.
  • Crate a Google map variable and assign the google map object to it.
  • For example, We have an array of 5 sample latitude and longitude values with location name.
  • After creating the google map object, then create the marker and infowindow for each latlong.
  • Finally an additional checking for open an infowindow at a time.


Demo

How do I know if a variable is an array?

Creating a sample array.
var fruits = ["Banana", "Orange", "Apple", "Mango"];

Method 1:

Array.isArray(fruits);     // returns true

NB: THis method not supported in older browsers.

Method 2:

To overcome the method 1, Cretae an isArray() function
function isArray(x)
{
    return x.constructor.toString().indexOf("Array") > -1;
}

The function above always returns true if the argument is an array.

Or more precisely: it returns true if the object prototype contains the word "Array".

Method 3:

The instanceof operator returns true if an object is created by a given constructor:
fruits instanceof Array     // returns true

How to declare an array in javascript?

JavaScript arrays are used to store multiple values in a single variable. An array is a special variable, which can hold more than one value at a time.

Method 1:

var cars = new Array("Saab", "Volvo", "BMW");

Access the Elements of an Array
var name = cars[0];//Saab
This statement modifies the first element in cars:
cars[0] = "Opel";

'Saab' is replaced by 'Opel'.

Method 2:

var cars = ["Saab", "Volvo", "BMW"];

Method 3:

var person = [];

Eg:
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length will return 3
var y = person[0];             // person[0] will return "John"

Method 4:

var person = {firstName:"John", lastName:"Doe", age:46};

In this example, person.firstName returns 'John'

What is a Media Query?

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). It became a W3C recommended standard in June 2012, and is a cornerstone technology of Responsive web design.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Eg:
If the browser window is smaller than 500px, the css code executed within the bracket.
@media screen and (max-width:500px) { ... }

A media type can be declared in the head of an HTML document using the "media" attribute inside of a <link> element.

How to fill json data to select element using jquery

Here we explain how to fill json data to select element/html combo box using jquery.

Suppose the json output is like
[
     {
          "Value":"1",
          "Text":"C"
     },
     {
          "Value":"2",
          "Text":"C++"
     },
     {
          "Value":"3",
          "Text":"PHP"
     },
     {
          "Value":"4",
          "Text":"JAVA"
     },
     {
          "Value":"5",
          "Text":"JAVASCRIPT"
     },
     {
          "Value":"6",
          "Text":"JSP"
     }
]


Then fill the above json data to the select element.

HTML code:
<select name="Languages"></select>

Javascript code:
var LanguagesJSON = [
     {
          "Value":"1",
          "Text":"C"
     },
     {
          "Value":"2",
          "Text":"C++"
     },
     {
          "Value":"3",
          "Text":"PHP"
     },
     {
          "Value":"4",
          "Text":"JAVA"
     },
     {
          "Value":"5",
          "Text":"JAVASCRIPT"
     },
     {
          "Value":"6",
          "Text":"JSP"
     }
]
var Languages = jQuery.parseJSON(LanguagesJSON);
for(var i=0;i<Languages.length;i++)
{
    var Option = "<option "+(i === 1 ? "selected" : "" )+ " value='"+Languages[i].Value+"'> "+Languages[i].Text+" </option>";
    $("select[name='Languages']").append(Option);
}


Output is:
<select name="Languages">
<option value="1">C</option>
<option value="2">C++</option>
<option value="3">PHP</option>
<option value="4">JAVA</option>
<option value="5">JAVASCRIPT</option>
<option value="6">JSP</option>
</select>