CodeKeep JavaScript Feed

JavaScript Popup Window with content

Mon, 21 Jan 2013 13:24:07 GMT

Description: JavaScript Popup Window with content using DIV

Link: http://www.codekeep.net/snippets/80573aab-9f61-4053-a053-b929884f5401.aspx

<script type="text/javascript">
var popup2 = new Popup();
popup2.autoHide = false;
popup2.content = 'This DIV will not close automatically!<br><br><a href="#" onclick="'+popup2.ref+'.hide();return false;">Click here to close</a>';
popup2.width=200;
popup2.height=200;
popup2.style = {'border':'3px solid black','backgroundColor':'yellow'};
</script>

<a href="#" onclick="popup2.show();return false;">Click Here To Show Popup Object</a>

Array push / pop example

Fri, 04 Jan 2013 03:41:04 GMT

Description: Array push / pop example

Link: http://www.codekeep.net/snippets/18e8dbc1-0765-48ab-8b3b-5c4660ab4f6f.aspx

var mack = ["Mack"]
mack.push("the")
mack.push("Knife")
show(mack)
show("after poping last val")
mack.pop()
show(mack)

String.slice

Fri, 04 Jan 2013 03:38:05 GMT

Description: slice is used to get a substring from a string

Link: http://www.codekeep.net/snippets/a31ed81a-3aaf-4e86-b8c7-9a775075b801.aspx

function startsWith(string, pattern) {
  return string.slice(0, pattern.length) == pattern;
}

show(startsWith("rotation", "rot"));

Watch Box Office Movies Streaming THIS IS 40 without downloading

Tue, 01 Jan 2013 03:32:04 GMT

Description: Watch online movie THIS IS 40 full HD quality Genre(s): Comedy Run Time: 134min Release Date: 12/21/2012 Distributor(s):

Link: http://www.codekeep.net/snippets/d8278ebf-d7da-4a99-bb3b-c8f70bcbd3ad.aspx

Download THIS IS 40 movie online, watch THIS IS 40 free movie, download 2012 movie THIS IS 40, free film THIS IS 40, Watch THIS IS 40 online movie, Watch 2012 latest movie THIS IS 40, download THIS IS 40 movie, free online THIS IS 40 movie to download, THIS IS 40 film download, THIS IS 40 movie download, free movie THIS IS 40, watch film THIS IS 40, watch THIS IS 40 movie online, stream download THIS IS 40 movie 2012, free online THIS IS 40 movie full length, free full length THIS IS 40 movie online, Watch THIS IS 40 movie without downloading, download THIS IS 40 movie full in all formats quality, download THIS IS 40 movie full in HD DVD DiVx IPOD quality, watch tv, tv shows, tv series, free online Watch THIS IS 40 movie full length, free full length download THIS IS 40 movie online

Email Validation in JavaScript

Sun, 11 Nov 2012 15:32:27 GMT

Description: One of the important things about user input is to verify that the user has supplied the email that you have requested. The function below allows you to verify email address with easy.

Link: http://www.codekeep.net/snippets/b1028cde-aa4e-4774-b194-d3c2e151fece.aspx

    <script type="text/javascript">  
    function check_email(email){  
        var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if(reg.test(email)){
            return true;
        }else{  
            return false;
        }  
    }  
    </script>  
     
    <input type="text" id="email">
    <button onclick="alert(check_email(document.getElementById('email').value))">Validate</button>

Toggling Elements with JavaScript

Sun, 11 Nov 2012 15:30:08 GMT

Description: This function allows you to pass two variables that represent ID of two elements on your page. What you click on one of them it hide it and shows another one.

Link: http://www.codekeep.net/snippets/52bbc79b-242e-4baa-a384-86f8ba76c5c7.aspx

    <script type="text/javascript">
    function toggle(id, id2){  
        var toggle_one = document.getElementById(id);  
        var toggle_two = document.getElementById(id2);  
        if(toggle_one.style.display == "block"){  
            toggle_one.style.display = "none";  
            toggle_two.innerHTML = "Show";  
        }else{  
            toggle_one.style.display = "block";  
            toggle_two.innerHTML = "Hide";  
        }  
    }
    </script>
     
    <a href="#" id="tlink" onclick="toggle('comments', 'tlink');">Show</a> Comments<br><br>  
    <div id="comments" style="display:none;padding 10px;">Now you can see the comments</div>

jQuery Ajax

Fri, 02 Nov 2012 08:51:55 GMT

Description: Simple json ajax template

Link: http://www.codekeep.net/snippets/590ad866-cb1a-4af9-9931-e354fab1b8b0.aspx

        $.ajax({
            url: 'your/url',
            type: 'POST', // default is GET
            contentType: 'application/json; charset=utf-8;',
            data: yourData,
            dataType: 'json',
            success: function (msg) {
            },
            failure: function(){
            }
        });

test

Fri, 20 Jul 2012 07:55:54 GMT

Description: test

Link: http://www.codekeep.net/snippets/afc42330-fda4-4983-b782-317bf36f6323.aspx

function test() {
    alert('test');
}

jQuery CDN fallback

Thu, 19 Jul 2012 03:33:40 GMT

Description: When the CDN provider is unavailable fall back to local copy

Link: http://www.codekeep.net/snippets/01952159-273f-4fde-b49a-f9ca5c1a70b0.aspx

if (typeof jQuery == 'undefined') {
    document.write(unescape("%C3script type='text/javascript' src='/Scripts/jquery-1.7.1.min.js'%3E%3C/script%3E"));
}

Birthday Generator - Javascript

Sat, 16 Jun 2012 00:08:10 GMT

Description: This simple script will generate birthday day/month/year. All the data is stored into variable which could be used wherever you want.

Link: http://www.codekeep.net/snippets/b191cb8c-62f0-4951-b326-6ce929504f44.aspx

//************************************************************
// Generates Birthday Day/Month/Year                         *
// There's no check for the day/month relationship,          *
// so the birthday can't be 29,39,31                         *
// to prevent nonsense like 31.02 (February 31th)            *
//************************************************************
function bnum (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
var bday=bnum(1,29)
var bmonth=bnum(1,12)
var byear=bnum(1980, 1995)
alert(bday);
alert(bmonth);
alert(byear);

Create Add to Favorites/Bookmark button in Javascript

Fri, 08 Jun 2012 07:52:00 GMT

Description: Most today's web browsers like Firefox (Ctrl+D), Opera (Ctrl+T) and IE (Ctrl+D) provide a keyboard shortcuts to enable users bookmark their favorite pages. But if you want to provide your visitors with a "Bookmark this page" link.

Link: http://www.codekeep.net/snippets/7a7c72a6-741e-4cba-bd92-dc75c68ce85b.aspx

<script type="text/javascript">
    function CreateBookmarkLink(){
        var title = document.title;
        var url = document.location.href;
     
        if(window.sidebar){
            /* Mozilla Firefox Bookmark */
            window.sidebar.addPanel(title, url, "");
        }else if(window.external){
            /* IE Favorite */
            window.external.AddFavorite(url, title);
        }else if(window.opera && window.print) {
            /* Opera Hotlist */
            alert("Press Control + D to bookmark");
            return true;
        }else{
            /* Other */
            alert("Press Control + D to bookmark");
        }
    }
    </script>
     
    <a href="javascript:CreateBookmarkLink();">Add to Favorites/Bookmark</a>

Redirect with a Timer

Fri, 08 Jun 2012 07:50:52 GMT

Description: You can use JavaScript window.location to redirect a visitor to a required page. You may have seen this feature used by sites with full page ads, or to redirect visitors to the site's new domain name.

Link: http://www.codekeep.net/snippets/b70fdb7e-136d-45e4-b501-6d61913f31c8.aspx

<script type="text/javascript">
    var count = 6;
    var redirect = "http://www.apphp.com";
     
    function countDown(){
        var timer = document.getElementById("timer");
        if(count > 0){
            count--;
            timer.innerHTML = "This page will redirect in "+count+" seconds.";
            setTimeout("countDown()", 1000);
        }else{
            window.location.href = redirect;
        }
    }
    </script>
     
    Our webpage has beed moved. Please update your bookmarks for the new site.
    <br>
     
    <span id="timer">
    <script type="text/javascript">countDown();</script>
    </span>

Copy Selected Text in JavaScript

Fri, 08 Jun 2012 07:49:13 GMT

Description: Sometimes you have some information on your page and your visitors might want to copy it. The easiest way is to provide a mechanism that allows them to simply click a button to do so. You have to paste this code into the head of your web page:

Link: http://www.codekeep.net/snippets/4fc9306a-649e-4bec-83d0-52ed8157ee26.aspx

<script language="javascript">
    function CopyText(el){
        var selectedText = "";
        if(window.getSelection){
            selectedText = window.getSelection();
        }else if (document.getSelection){
            selectedText = document.getSelection();
        }else if (document.selection){
            selectedText = document.selection.createRange().text;
        }
        if(selectedText != ""){
            selectedText = selectedText.toString();
            el.focus();
            el.value = selectedText;
            }else {
            alert("Select a text in the page and then press this button!");
        }
    }
    </script>
     
    Select any part of this text to copy it...
    <form name="frmCopyText">
    <textarea name="txtSelect" rows="4" cols="45"></textarea><br>
    <input onclick="CopyText(this.form.txtSelect)"
           type="button"
           value="Press to copy the highlighted text"
           name="btnCopy">
    </form>

Create Back Button with JavaScript

Fri, 08 Jun 2012 07:48:23 GMT

Description: You may create a back button like your browser has. The following script allows the visitor to press a button and returns the him to the previous page.

Link: http://www.codekeep.net/snippets/9ad7e53b-5cdb-433d-a763-c502845a7e28.aspx

<form>
    <input type="button" value="Previous Page" onclick="history.go(-1)">
    </form>

jQuery UI queue effects

Fri, 01 Jun 2012 06:58:36 GMT

Description: Queue effects on a selector

Link: http://www.codekeep.net/snippets/72c7efb6-4918-46a3-a68a-2e5deed526a9.aspx

var s = $("#selector");

i.queue("q", function (next) {
    $(this).effect("shake");
    next(); // Dequeue next
});

i.delay(1000, "q"); // Add a delay between effects

i.queue("q", function () {
    $(this).effect("pulsate", { times: 8, mode: "show" }, 150);
    next(); // Dequeue next
});

i.dequeue("q"); // Start

console

Fri, 27 Apr 2012 08:32:46 GMT

Description: test

Link: http://www.codekeep.net/snippets/46166b69-e6ca-456a-8fce-296d7d04adf4.aspx

console.log('hello world')

Cross browser attach event

Wed, 11 Apr 2012 11:01:21 GMT

Description: Cross browser attach event

Link: http://www.codekeep.net/snippets/45abacd7-7510-486e-bf69-32a3f1b71d4f.aspx

function XBrowserAddHandler(target, eventName, handlerName) {
    if (target.addEventListener)
        target.addEventListener(eventName, handlerName, false);
    else if (target.attachEvent)
        target.attachEvent(eventName, handlerName);
    else
        target["on" + eventName] = handlerName;
}

jQuery Tooltip

Fri, 16 Mar 2012 13:44:19 GMT

Description: Jquery tooltip

Link: http://www.codekeep.net/snippets/88ae9dd1-c513-4f95-b1ee-7b8bee43c793.aspx

$(document).ready(function () {
       //Tooltips
       $(".tip_trigger").hover(function () {
           tip = $(this).find('.tip');
           tip.show(); //Show tooltip
       }, function () {
           tip.hide(); //Hide tooltip
       }).mousemove(function (e) {
           var mousex = e.pageX + 20; //Get X coodrinates
           var mousey = e.pageY + 20; //Get Y coordinates
           var tipWidth = tip.width(); //Find width of tooltip
           var tipHeight = tip.height(); //Find height of tooltip

           //Distance of element from the right edge of viewport
           var tipVisX = $(window).width() - (mousex + tipWidth);
           //Distance of element from the bottom of viewport
           var tipVisY = $(window).height() - (mousey + tipHeight);

           if (tipVisX < 20) { //If tooltip exceeds the X coordinate
of viewport
               mousex = e.pageX - tipWidth - 20;
           } if (tipVisY < 20) { //If tooltip exceeds the Y
coordinate of viewport
               mousey = e.pageY - tipHeight - 20;
           }
           tip.css({ top: mousey, left: mousex });
       });
   });


<style type="text/css">

img {border: none;}
h1 {
   font: 4em normal Georgia, 'Times New Roman', Times, serif;
   padding: 10px 0;
   color: #aaa;
   text-align: center;
}
h1 span { color: #666; }
h1 small{
   font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
   text-transform:uppercase;
   letter-spacing: 0.65em;
   display: block;
   color: #666;
}
h1 a {text-decoration: none;}
a {color: #d60000; text-decoration: none;}

 
.tip {
   color: #fff;
   background:#1d1d1d;
   display:none;  
   padding:10px;
   position:absolute;  z-index:1000;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
}
 
</style>

Add String.trim extension method

Thu, 05 Jan 2012 08:33:33 GMT

Description: if the String class does not have a trim function in the current browser, add it.

Link: http://www.codekeep.net/snippets/809b6691-ec7b-48df-b813-e2fcc6b5da41.aspx

// if trim is not already defined add it
if (typeof "test".trim != 'function') {
    //javascript extenstion method
    String.prototype.trim = function () { // this trim was suggested by Tobias Hinnerup
        return (this.replace(/^\s+/, '').replace(/\s+$/, ''));
    }
}

scroll to bottom in html

Tue, 29 Nov 2011 08:08:14 GMT

Description: scroll to bottom of a list, panel, etc. sencha touch, extjs, etc.

Link: http://www.codekeep.net/snippets/15962097-5ffc-43bc-b1e7-0b5dd50ae4b6.aspx

var el = list.getEl();
el.dom.scrollTop = el.dom.scrollHeight;

Show Hide table data

Fri, 11 Nov 2011 14:26:36 GMT

Description: Show Hide table data uses href, anchors, div tags, and javascript to toggle between showing and hiding a table on the html page.

Link: http://www.codekeep.net/snippets/8d00ff04-c48a-461f-9ccf-9ca92063fbc1.aspx

<script type="text/javascript">
<!--
function switchView(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != "none" ) {
		el.style.display = 'none';
	}
	else {
		el.style.display = '';
	}
}
//-->
</script>


<table>
<tr>
            <td width="30%" align="right" valign="top"><a href="##GotoMyControlName" onClick="switchView('MyControlName'); return false;">My Heading Text:</a></td>
            <td width="1%">&nbsp;</td>
            <td>
<!-- BEGIN section of page that will toggle between show/hide by clicking link in cell above. -->
                <div id="MyControlName" style="display:none">
                    <table border="0" cellpadding="3" cellspacing="0" >
                    <tr >
                    <td><span class="cPreReq">MyOUTPUTgoesHere</span>&nbsp;</td>
                    </tr>
                    </table>
                </div>
<!-- END section of page that will toggle between show/hide -->
            </td>
          </tr>

</table>

Cross-Browser event triggering

Thu, 13 Oct 2011 23:40:58 GMT

Description: A browser friendly way to trigger an event on an element.

Link: http://www.codekeep.net/snippets/28e75842-cb23-45df-abb0-04b39d2c8d79.aspx

/*
This is just a simple snippet which doesn't really explain the detailed contents 
of an event object, but it gives an idea of the differences between specific 
browsers. This function will fire the onChange event for an element passed to 
it (say...a checkbox).
*/

function FireOnChange(element) {
  if (element.onchange) {
      var e = null;
      if (document.createEventObject) {
          //ie
          e = document.createEventObject();                    
          element.fireEvent('onchange', e);
      }
      else {
          //others
          e = document.createEvent('HTMLEvents');
          e.initEvent('change', true, true);
          element.dispatchEvent(e);
      }
   }
}

Centralise

Thu, 06 Oct 2011 04:47:38 GMT

Description: Will centre a

element to half of the screen width creating the central column effect.

Link: http://www.codekeep.net/snippets/c1791c4e-90d2-4809-b656-2aba0f3c038b.aspx

function setMainWidth() {

    // This value extends the <div> width
    var extend = 800;
    //-----------------------------------
    // Set the name of the <div> ID
    var elementId = "mainPage";
    //-----------------------------------


    var pageWidth = 0;

    if (self.innerWidth) {
        pageWidth = self.innerWidth;
    }
    else if ((document.documentElement) && (document.documentElement.clientWidth)) {
        pageWidth = document.documentElement.clientWidth;
    }
    else if (document.body) {
        pageWidth = document.body;    
    }

    var e = document.getElementById(elementId);
    if (e) {
        pageWidth += extend;
        e.style.width = (pageWidth / 2) + "px";
        e.style.position = "absolute";
        e.style.left = "50%";
        e.style.marginLeft = "-" + (pageWidth / 4) + "px";
    }
}

Valores dos checkbox com jquery

Mon, 03 Oct 2011 07:50:20 GMT

Description: Pegar os valores dos checkbox com jquery

Link: http://www.codekeep.net/snippets/115bc561-e0b8-4139-b614-6e346d4dfc60.aspx

$(function(){
  $('#btnClick').click(function(){
    var val = [];
    $(':checkbox:checked').each(function(i){
      val[i] = $(this).val();
    });
  });
});

Run jQuery in asp.net

Mon, 05 Sep 2011 08:01:33 GMT

Description: I found that jQuery was firing on a page load but not when an update panel was refreshed, this catches the partial load event as well and runs my jQuery. it might not be the right way of doing it but it works well for me.

Link: http://www.codekeep.net/snippets/74439ab2-63a1-49c9-ad1d-c733b9be3139.aspx

<script language="javascript" type="text/javascript">

   
    $(document).ready(function () {
        injectJQUERY();
    });

    function pageLoad(sender, args) {
        if (args.get_isPartialLoad()) {
            injectJQUERY();
        }
    }

    function injectJQUERY() {
        $(document).ready(function () {

    }

</script>