Computer Forums
Page 14 of 14 « First 41213 14
Show 40 post(s) from this thread on one page

Computer Forums (http://www.geekboards.com/forums/index.php)
-   Building Websites (http://www.geekboards.com/forums/forumdisplay.php?f=3)
-   -   JavaScript codes for Web DEV (http://www.geekboards.com/forums/showthread.php?t=15045)

JavaScriptBank 05-13-2013 05:12 AM
More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites
 
More than 2 years ago, JavaScriptBank.com had presented to you a list of detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 05-21-2013 12:37 AM
Javascript Countdown Timer redirecting Affiliate Links
 
With this simple JavaScript countdown timer, you will easily notice to visitors that the link will be redirected. This JavaScript script is quite short and very easy to modify as you want; so this cod... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Place CSS below in your HEAD section
CSS
Code:
<style type="text/css">
/*
    This script downloaded from www.JavaScriptBank.com
    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

body {
  color: black;
  background: white;
  font: bold 18pt Verdana, Arial, Helvetica, sans-serif;
  text-align: center;
}

span.counter {
  color: red;
  cursor: default;
  font-size: larger;
}

div.info {
  margin: 0 auto;
  text-align: left;
  font-size: smaller;
  width: 80%;
  margin-top: 2em;
}
</style>
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script name="countdownRedirect.js" type="text/javascript">
/*
    This script downloaded from www.JavaScriptBank.com
    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

/**
 * Copyright (C) 2006-2009, QuietAffiliate.com. All rights reserved.
 *
 * Script Name: Countdown Redirect
 *
 * THIS SOURCE CODE MAY BE USED FREELY PROVIDED THAT
 * YOU DO NOT REMOVE THIS MESSAGE.
 *
 * You can obtain this script at http://www.QuietAffiliate.com
 */

function countdownRedirect(url, msg)
{
  var TARG_ID = "COUNTDOWN_REDIRECT";
  var DEF_MSG = "Redirecting...";

  if( ! msg )
  {
      msg = DEF_MSG;
  }

  if( ! url )
  {
      throw new Error('You didn\'t include the "url" parameter');
  }


  var e = document.getElementById(TARG_ID);

  if( ! e )
  {
      throw new Error('"COUNTDOWN_REDIRECT" element id not found');
  }

  var cTicks = parseInt(e.innerHTML);

  var timer = setInterval(function()
  {
      if( cTicks )
      {
        e.innerHTML = --cTicks;
      }
      else
      {
        clearInterval(timer);
        document.body.innerHTML = msg;
        location = url;         
      }

  }, 1000);
}

window.onload = function() {
        countdownRedirect("http://www.javascriptbank.com", "Thanks For Visiting")
}
</script>
Step 3: Place HTML below in your BODY section
HTML
Code:
<div class="info">This is a demo page of the redirect script in action, code and instructions can be found at <strong>QuietAffiliate.com</strong><br /><br /><center>You will automatically be redirected in <span class="counter" id="COUNTDOWN_REDIRECT">10</span> seconds.</center>
</div>

JavaScriptBank 05-27-2013 10:13 PM
HTML Button with CSS3: Tiny & Helpful Demo plus Tutorial
 
If you're a senior web developer, you know that on the big web projects, you have to encounter a situation where you need a coherent set of detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 06-21-2013 10:38 PM
Single Responsive Photo Gallery plus Slideshow
 
Currently, there are many JavaScript photo slideshow scripts, detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Use CSS code below for styling the script
CSS
Code:
<link rel="stylesheet" type="text/css" href="srpgs.css"/>
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="srpgs.js"></script>
<script type="text/javascript">
/*
* Project        :        Single Responsive Photo Gallery plus Slideshow
* Author        :        Phong Thai (http://www.javascriptbank.com/)
* Support        :        http://www.javascriptbank.com/
* Version        :        1.0
*/

/*
        You are free to use this plugin in any personal, commercial project without my permission.
        But please help me by leaving the Copyright sign, it just occupies about 10 pixels,
        otherwise please help me with a milk coffee (paypal) to remove this sign.
*/

var srpgs_slideshowSpeed = 5000,        // speed of the automatic slideshow
        srpgs_scroll_delay = 700,                // speed of the scrolling controls
        srpgs_path_pics = 'pics/';                // path to large photos
        srpgs_path_thumb = 'pics/thumbnails/';

var srpgs_photos = [ {
                "image" : "srpgs-01.jpg"
        }, {
                "image" : "srpgs-02.jpg"
        }, {
                "image" : "srpgs-03.jpg"
        }, {
                "title" : "Title of Photo #04",
                "image" : "srpgs-04.jpg",
                "url" : "http://www.yoursite.com/photo-set-01/",
                "subject" : "#04 in Subject of Set #1"
        }, {
                "title" : "Title of Photo #05",
                "image" : "srpgs-05.jpg",
                "url" : "http://www.yoursite.com/photo-set-01/",
                "subject" : "#05 in Subject of Set #1"
        }, {
                "title" : "Title of Photo #06",
                "image" : "srpgs-06.jpg",
                "url" : "http://www.yoursite.com/photo-set-02/",
                "subject" : "Subject of Set #2: Photo #06"
        }, {
                "title" : "",
                "image" : "srpgs-07.jpg",
                "url" : "",
                "subject" : ""
        }, {
                "title" : "Title of Photo #08",
                "image" : "srpgs-08.jpg",
                "url" : "http://www.yoursite.com/photo-set-02/",
                "subject" : "Subject of Set #2: Photo #08"
        }, {
                "image" : "srpgs-09.jpg"
        }, {
                "image" : "srpgs-10.jpg"
        }, {
                "image" : "srpgs-11.jpg"
        }, {
                "image" : "srpgs-12.jpg"
        }, {
                "image" : "srpgs-13.jpg"
        }, {
                "image" : "srpgs-14.jpg"
        }, {
                "image" : "srpgs-15.jpg"
        }, {
                "image" : "srpgs-16.jpg"
        }, {
                "image" : "srpgs-17.jpg"
        }, {
                "image" : "srpgs-18.jpg"
        }
];
</script>
Step 3: Place HTML below in your BODY section
HTML
Code:
<div class="srpgs-container">
        <!-- Photo placeholders -->
        <div id="srpgs-slideshow">
                <div id="srpgs-rotate-1" class="srpgs-holder"><img src="" /></div>
                <div id="srpgs-rotate-2" class="srpgs-holder"><img src="" /></div>
        </div>
       
        <!-- Photo slideshow controls -->
        <div id="srpgs-control">
                <div class="srpgs-thumbs-nav copyright"><a href="http://www.javascriptbank.com" title="Copyright 2013">+</a></div>
                <div class="srpgs-thumbs-nav up"></div>
                <div id="srpgs-thumbs-gallery"></div>
                <div class="srpgs-thumbs-nav down"></div>
                <div id="srpgs-control-btns">
                        <div id="srpgs-control-back"></div>
                        <div id="srpgs-control-play-pause"></div>
                        <div id="srpgs-control-next"></div>
                </div>
        </div>
       
        <!-- Titles and subjects of the photos -->
        <div id="srpgs-picture">
                <span id="srpgs-picture-title"></span>
                <p class="srpgs-picture-link">
                        In: <a href="#" id="srpgs-picture-url"></a>
                </p>
        </div>
</div>


All times are GMT -5. The time now is 11:25 AM.
Page 14 of 14 « First 41213 14
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
HTML Help provided by HTML Help Central.