How to Embed a YouTube Video with Autoplay and Sound Muted

This tutorial explains how you can embed a YouTube video that will automatically play when the web page is loaded but with muted audio by Embed code.

EMBED YOUTUBE PLAYER WITH AUTOPLAY AND SOUND MUTED

This is easy. Go the YouTube video page and note down the ID of the video from the URL. For instance, if the YouTube video link is http://youtube.com/watch?v=xyz-123, the video id is xyz-123. Once you have the ID, all you have to do is replace YOUR_VIDEO_ID in the following code with that string.

We should need to add two query string in embed video url for autoplay and mute.

&mute=1   For sound mute

&autoplay=1   For autoplay

 

1
<iframe src="https://www.youtube.com/embed/VIDEO_ID?rel=0&mute=1&amp;autoplay=1" frameborder="0" allowfullscreen=""></iframe>

How to get Page url with java script

JavaScript Window Location

The window.location object can be used to get the current page address (URL) and to redirect the browser to a new page.
Some examples:

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

1
2
3
4
5
6
7
8
if (window.location.pathname == '/xyz.php') {
$("#button1").click(function(){'
//do something
})
}else if(window.location.pathname == '/xyz1.php'){
$("#mytextfield").hover(){
alert('message');
}

jQuery smooth scroll to anchor #id

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- SMOOTH SCROLL -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top-150
        }, 1000);
        return false;
      }
    }
  });
});
</script>
<!-- End of SMOOTH SCROLL -->

A Simple Way to Protect Images from ‘Casual Copying’

If you don’t want other people to download images from your website, don’t put them online because – the way the web works – it is almost impossible to prevent someone from copying or saving your images.

However there’s one little trick that may discourage the less-technical people from casually copying, or even hot-linking, to your web images. To give you an example, try saving the following image to your computer using the standard “save as” option.

The “save picture” option under right-click is still available for the above image but instead of downloading the actual photograph, all it would save is a blank image. Also, the URL for the image (under Properties) would appear as some junk characters (it’s called a data URI) and thus would deter the non-techies from hotlinking to that image.
Here’s how you may implement something similar for your own images:
The standard embed code for an image looks something like this:

1
<img src="photograph.jpg" alt="" width="500" height="250" />

What you need to do is change the value of the src attribute to point to a blank image and then add a new style attribute to render the actual image. Also make sure that the value of the height and the width parameters are exactly the same as the actual image.

1
<img style="background-image: url('photograph.jpg');" src="data:image/gif;base64, R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" width="500" height="250" />

This is like overlaying a completely transparent screen over your photograph and anyone trying to save the image will end up downloading that screen instead of the image.

Obviously, there are simple workarounds to get around the above method. For instance, a copy of the full image will still be available in your browser’s cache. You may look at the HTML source or may even save the image using screen capture but again, these techniques may not always be known to the non-technical users of your website.

Google Map from Address

Generate google map from address.

It is possible and very easy! Just add one or more

tags with your addresses. The jQuery function will automatically turn the

element into a Google map in your html webpage. Check it out.

Instructions for how to dynamically generate google map from address:

Just add the following html and jQuery code into your html document. Make sure you have included the basic jQuery library inside the of your html document to get the jQuery to work. Change the iframe width or height to suit your needs.

HTML:

1
<address>Mystreet 123</address>

Jquery Script:

1
2
3
4
5
6
$(document).ready(function(){
$("address").each(function(){
var embed ="<iframe width='425' height='350' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q="+ encodeURIComponent( $(this).text() ) +"&amp;output=embed'></iframe>";
$(this).html(embed);
});
});

Jquery, checking if a value exists in array or not


Deprecated: Function create_function() is deprecated in /home/ursaftwz/public_html/myscripthub.com/wp-content/plugins/codecolorer/lib/geshi.php on line 4698

You can also do this by using .map() or just want to know how it works you can do it like this:

1
2
3
4
5
6
7
8
9
10
var added=false;
$.map(arr, function(elementOfArray, indexInArray) {
if (elementOfArray.id == productID) {
elementOfArray.price = productPrice;
added = true;
}
}
if (!added) {
arr.push({id: productID, price: productPrice})
}

XP style left panel

Define panels

<div style="width:200px;height:auto;background:#7190E0;padding:5px;">
<div title="Picture Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">
View as a slide show<br/>
Order prints online<br/>
Print pictures
</div>
<br/>
<div title="File and Folder Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">
Make a new folder<br/>
Publish this folder to the Web<br/>
Share this folder
</div>
<br/>
<div title="Other Places" collapsible="true" collapsed="true" style="width:200px;height:auto;padding:10px;">
New York<br/>
My Pictures<br/>
My Computer<br/>
My Network Places
</div>
<br/>
<div title="Details" collapsible="true" style="width:200px;height:auto;padding:10px;">
My documents<br/>
File folder<br/><br/>
Date modified: Oct.3rd 2010
</div>
</div>

Css Apply

<style>
.panel-body{
background:#f0f0f0;
}
.panel-header{
background:#fff url('images/panel_header_bg.gif') no-repeat top right;
}
.panel-tool-collapse{
background:url('images/arrow_up.gif') no-repeat 0px -3px;
}
.panel-tool-expand{
background:url('images/arrow_down.gif') no-repeat 0px -3px;
}
</style>

 

Sexy Alert Box – Alert your visitors with Style!

 

How To Use Sexy Alert

1. Add this code between <head></head> tags:

1
2
3
4
5
6
7
 <code><script src="mootools.js" type="text/javascript"></script>
<script src="sexyalertbox.v1.js" type="text/javascript"></script>
<link rel="stylesheet" href="sexyalertbox.css" type="text/css" media="all" /><code><script type="text/javascript">
window.addEvent('domready', function() {
Sexy = new SexyAlertBox();
});
</script></code>

2. To display a Sexy Alert Message you have to add this simple code where you want to display the link to open it:

1
onclick="Sexy.alert('Your message!'); return false;"

Download Demo source code

/code

jQuery .inArray() always true?

If you are facing problem in jquery .inArray() function giving always true then use below code:

1
2
3
4
5
if( $.inArray('Aqua', arrVals) > -1 ) {

or this:

if( $.inArray('Aqua', arrVals) !== -1 ) {

The $.inArray() method returns the 0 based index of the item. If there’s no item, it returns -1, which the if() statement will consider as true.