Download Latest Version: CSS & JavaScript Toolbox v0.8

• Format: zip file

• Title: css-javascript-toolbox.zip

• Size: 836KB

• Current Version: 0.8

• License: GNU GPL

CHANGELOG

Version 0.8

• Modifying template code
• Header and Footer hooks support: Select in which hook to output CSS/JS code
• Blocks can be reordered
• Blocks can be named
• New icons and improved UI
• Multilingual support: Only English translation is shipped with this version
• Style overriding: Blocks order allow later blocks styles to override former blocks
• Embedded Scripts: Embedded WordPress or Scripts that shipped out with CJToolbox Plugin by just checking them
• Backup and Restore blocks data
• Bug Fix: New blocks not toggling unless the page is refreshed
• Bug Fix: CSS/JS template extra slashes problem
• Bug Fix: Block deletion issues
• Bug Fix: Code is not applied to the URL list except the last URL
• Bug Fix: Cannot use string offset as array error
• Bug Fix: Invalid argument supplied foreach() error

Version 0.3     (Download Earlier Version: CSS & JavaScript Toolbox v0.3)

• Minor fixes

Version 0.2

• Several minor updates and refinements

Version 0.1

• HELLO! Base Version

The JavaScript Code

<script src="ENTER URL TO FILE jquery.ui.js" type="text/javascript"></script>
<script src="ENTER URL TO FILE jquery.alerts.js" type="text/javascript"></script>
<script src="ENTER URL TO FILE cookie.js" type="text/javascript"></script>
<script type="text/javascript">
    (function ($) {

        $.alerts.okButton = 'I accept';
        window.onload = function () {
            var cookie = readCookie('MyCookie')
            if (cookie) {
                return;
            } else jConfirm('To view this webpage, you must accept our <a href="ENTER TERMS & CONDITIONS URL" title="Terms and Conditions">Terms and Conditions</a> and <a href="ENTER PRIVACY POLICY URL" title="Privacy Policy">Privacy Policy</a>.', 'Please Accept', function (r) {
                if (r == true) {
                    createCookie('MyCookie', 'Accept', 1)
                    return false;
                } else {
                    location.href = 'ENTER REDIRECT URL WHEN CANCELLED';
                }
            });
        };
    })(jQuery);
</script>

The CSS Code

<style type="text/css">
#popup_container {
    font-family: Arial, sans-serif;
    font-size: 12px;
    min-width: 300px;
 /* Dialog will be no smaller than this */
    max-width: 600px;
 /* Dialog will wrap after this width */
    background: #fff;
    border: solid 5px #999;
    color: #000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
 
#popup_title {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 1.75em;
    color: #777;
    background: #ccc url() top repeat-x;
    border: solid 1px #fff;
    border-bottom: solid 1px #999;
    cursor: default;
    padding: 0em;
    margin: 0em;
}
 
#popup_content {
    background: 16px 16px no-repeat;
    padding: 1em 1.75em;
    margin: 0em;
}
 
#popup_content.alert {
    background-image: url();
}
 
#popup_content.confirm {
    //background-image: url();
    background-image: none;
}
 
#popup_content.prompt {
    background-image: url();
}
 
#popup_message {
    //    padding-left: 48px;
}
 
#popup_panel {
    text-align: center;
    margin: 1em 0em 0em 1em;
}
 
#popup_prompt {
    margin: .5em 0em;
}
</style>

The HTML Code

<div class="demo">
<p>Date: <input id="input_1_16" type="text"></p>

The jQuery Code

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">

<script type="text/javascript">
(function($){
natDays = [
[1, 26],
[2, 6],
[3, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29],
[4, 27],
[5, 15, 25],
[6, 6],
[7, 19],
[8, 27],
[9],
[10],
[11],
[12, 23, 24, 25, 30, 31]
];

function getMinDate() {
var now = new Date();

var monthnumber = now.getMonth();
var monthday = now.getDate();
var year = now.getFullYear();

//check if today is a holiday.
//by default do not skip any dates, allow user to select today.
var dayOffset = 0;

var date;
var currentDay = monthday;

var currentMonth = monthnumber;
for (var i = 0; i < natDays.length; i++) {
date = natDays[i];
//check month
if (date[0] == currentMonth + 1) {
for (var j = 1; j < date.length; j++) {
currentDay == 0;
while (date[j] == currentDay) {
dayOffset++;
currentDay++;
}
}
}
}

//calculate the new date.
now.setDate(now.getDate() + dayOffset);

return (now.getMonth() + 1) + '/' + now.getDate() + '/' + now.getFullYear();
}

function nationalDays(date) {
for (i = 0; i < natDays.length; i++) {
if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
return [false, natDays[i][2] + '_day'];
}
}
return [true, ''];
}

$("#input_1_16").val(getMinDate());
$("#input_1_16").datepicker({
beforeShowDay: nationalDays,
minDate: getMinDate(),
maxDate: "+4m"
});
})(jQuery);
</script>

The HTML Markup

<body onload="initialize()">
<div id="map_canvas" style="width:400px; height:400px"></div>

The JavaScript Code

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&test=test.js">
</script>

<script type="text/javascript">

var points = [
    ['name1', 59.9362384705039, 30.19232525792222, 12, 'www.google.com'],
    ['name2', 59.941412822085645, 30.263564729357767, 11, 'www.amazon.com'],
    ['name3', 59.939177197629455, 30.273554411974955, 10, 'www.stackoverflow.com']
];

function setMarkers(map, locations) {
    var shape = {
        coord: [1, 1, 1, 20, 18, 20, 18 , 1],
        type: 'poly'
    };
    for (var i = 0; i < locations.length; i++) {
        var flag = new google.maps.MarkerImage(
            'http://googlemaps.googlermania.com/google_maps_api_v3/en/Google_Maps_Marker.png',
            new google.maps.Size(37, 34),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 19)
        );
        var place = locations[i];
        var myLatLng = new google.maps.LatLng(place[1], place[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: flag,
            shape: shape,
            title: place[0],
            zIndex: place[3],
            url: place[4]
        });
        google.maps.event.addListener(marker, 'click', function() {
            alert('go to ' + this.url);
            //window.location.href = this.url;
        });
    }
}

function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(59.91823239768787, 30.243222856188822),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    setMarkers(map, points);
}
</script>

Click here to see this in action

The HTML Markup

<div class="eff">
<img src="http://wipeoutmedia.com/wp-content/uploads/2012/01/jQuery-Test.png" alt="Kezza bee" title="Kezza bee" height="250" width="250" />
     <div class="caption"><a href="mailto:info@wipeoutmedia.com?Subject=Image Box with Vertical Slider" class="header" rel="nofollow">Kezza bee jQuery</a><p>Welcome to the Kezza bee jQuery test using CSS & JavaScript Toolbox. Download It Now !!!
     </div>
</div>

The JavaScript Code

<script type="text/javascript"> 
 
(function($){
$(document).ready(function() {
 
	//if mouse over and mouse out
	$('.eff').hover(
	function () {
 
		value = $(this).find('img').outerHeight() * -1;
 
		//for left/right if you have different width and height, 
		//commented out because we are using up/down in this example
		//value = $(this).find('img').outerWidth() * -1); 
 
		//animate the image
		// you can change the sliding direction by changing bottom to left, right or top
		// if you changed this, you will have to change the position of the hover out as well
		$(this).find('img').stop().animate({bottom: value} ,{duration:500, easing: 'easeOutBounce'});	
 
	},
	function () {
 
		//reset the image
		// the position property (bottom), it must be same with the on in the mouseover
		$(this).find('img').stop().animate({bottom:0} ,{duration:500, easing: 'easeOutBounce'});	
 
	});
 
	//if user clicked on the thumbnail
	$('.eff').click(function () {	
		//grab and execute the first link in the thumbnail
		window.location = $(this).find('a:first').attr('href');
	});
});
})(jQuery);
</script>

The CSS Code

<style type="text/css">
body {
	font-family:arial;	
}
 
.eff {
	/* the image size is 250x250, it's adjusted to fit the border as well*/
	width:260px;
	height:260px;
 
	/* important, allow the children object to move inside its parent obj */
	position:relative;	
 
	/* important, it hides the moved image */
	overflow:hidden;
 
	/* with the clear class, make it into 3 x 3 layout */
	float:left;
 
	/* IE float bug fix */
	display:inline;
 
	/* styling */
	margin:8px;
	font-size:12px;
}
 
.eff img {
	display:block;
	width:250px;
	height:250px;
 
	/* styling */
	text-decoration:none;
	border:4px solid #25aae0;
	background:#ddd;
 
	/* important, it allows this obj to move by jquery */
	position:absolute;
 
	/* make sure it appears above the caption */
	z-index:500;
 
	cursor:pointer; cursor:hand;
}
 
.eff .caption {
	/* should be the same size with the image */
	width:250px;
	height:250px;
 
	/* styling */
	background:#333;
	border:4px solid #ccc;
	color:#eee;
 
	/* set the position to 0, 0 and appear under the image */
	position:absolute;
	top:0; left:0;
	z-index:0;
}
 
/* extra styling*/
.eff .caption a.header {
	margin:10px 5px 5px 5px;
	display:block;
	font-size:18px;	
	font-weight:700;
	color:#25aae0;
}
 
.eff .caption p {
        margin-top:10px;
	margin-left:4px;
        margin-right:4px;
        line-height: 18px;
        font-size:14px;	
}
 
.clear {clear:both}
</style>

Click here to see this in action

Download: Cloud Zoom

• Requirements: jQuery Framework (already included in WordPress)

• Format: zip file

• Title: cloud-zoom.zip

• Size: 12KB

• Version: 1.0.2

• License: MIT

Important: This is NOT a WordPress plugin and therefore will NOT work by uploading the zip file using the WordPress plugin installer. Instead add the script to the CSS & JavaScript Toolbox code blocks.

When using this script, you must adhere to the terms of the license agreement. You must also include the copyright notice and license agreement in the code header.

Click here to see this in action

The JavaScript Code

<script type='text/javascript'>
	alert("Thank you for installing CSS & JavaScript Toolbox.\nIf you find this plugin useful, please let us know at www.WipeoutMedia.com");
</script>

Wipeout Media and WordPress

The team at Wipeout Media specialises in CMS (Content Management System) websites, which are websites that allow you to add content yourself.  These websites have a dashboard ‘backend’ where you can easily add pages and blog posts, update page content, and upload images.  You don’t even need to learn website code!!  Only basic computer knowledge is needed to manage your website, therefore saving you a lot of money in the long term.  We develop websites using the WordPress platform, which is the most popular CMS platform of choice, with nearly 50 million WordPress websites worldwide.

Now if you have heard of WordPress, you may think that it is merely a blogging platform, allowing people to write blog posts and offering not much else.  Well that certainly was true when WordPress was conceived back in 2003 – a time when blogging was a growing culture.  These days however, WordPress websites allow for a huge array of features including: photo galleries, slideshows, contact forms, online shops, forums, booking systems, membership and newsletter distribution systems, statistics and SEO tools, social network integration, mobile device theming, and the list goes on.  :)

If you would like your own WordPress website that is themed to your business brand – including logos, graphics and colours, with features and functionality that compliments your business model and online marketing goals, then please contact the Wipeout Media team for more information.