We Keep Coding

Custom cursor effect on Wordpress Theme

I am trying to add a custom cursor effect similar to below that is in Javascript to a Wordpress theme I am working on. I am new to creating my own theme and I am not sure where to apply the code. Should it go in functions.php or should I first create a sort of custom_script.js file and add the code in there?
Not sure which direction I should go into so any help would be appreciated.
(function fairyDustCursor() {
var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
var width = window.innerWidth;
var height = window.innerHeight;
var cursor = {
x: width / 2,
y: width / 2
};
var particles = [];
function init() {
bindEvents();
loop();
}
// Bind events that are needed
function bindEvents() {
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('touchmove', onTouchMove);
document.addEventListener('touchstart', onTouchMove);
window.addEventListener('resize', onWindowResize);
}
function onWindowResize(e) {
width = window.innerWidth;
height = window.innerHeight;
}
function onTouchMove(e) {
if (e.touches.length > 0) {
for (var i = 0; i < e.touches.length; i++) {
addParticle(e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
}
}
}
function onMouseMove(e) {
cursor.x = e.clientX;
cursor.y = e.clientY;
addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
}
function addParticle(x, y, color) {
var particle = new Particle();
particle.init(x, y, color);
particles.push(particle);
}
function updateParticles() {
// Updated
for (var i = 0; i < particles.length; i++) {
particles[i].update();
}
// Remove dead particles
for (var i = particles.length - 1; i >= 0; i--) {
if (particles[i].lifeSpan < 0) {
particles[i].die();
particles.splice(i, 1);
}
}
}
function loop() {
requestAnimationFrame(loop);
updateParticles();
}
/**
* Particles
*/
function Particle() {
this.character = "*";
this.lifeSpan = 120; //ms
this.initialStyles = {
"position": "absolute",
"display": "block",
"pointerEvents": "none",
"z-index": "10000000",
"fontSize": "16px",
"will-change": "transform"
};
// Init, and set properties
this.init = function(x, y, color) {
this.velocity = {
x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
y: 1
};
this.position = {
x: x - 10,
y: y - 20
};
this.initialStyles.color = color;
console.log(color);
this.element = document.createElement('span');
this.element.innerHTML = this.character;
applyProperties(this.element, this.initialStyles);
this.update();
document.body.appendChild(this.element);
};
this.update = function() {
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;
this.lifeSpan--;
this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")";
}
this.die = function() {
this.element.parentNode.removeChild(this.element);
}
}
/**
* Utils
*/
// Applies css `properties` to an element.
function applyProperties(target, properties) {
for (var key in properties) {
target.style[key] = properties[key];
}
}
init();
})();

The most typical and correct way to execute JavaScript code is to put it into *.js file, then register this file as a part of your theme and then call it in any template you need. Technically:
Create a custom-cursor.js file in your theme and put your code there. (The js folder is usually a nice place to keep javascript files, so we assume your realtive path is js/custom-cursor.js).
Open your functions.php and register your script:
// This function will register your frontend scripts
// to let WordPress handle their loading
function rhonda_frontend_scripts() {
// We shouldn't call frontend scripts on admin side, so...
if ( ! is_admin() ) {
// Ok, let's register a script
wp_register_script(
// Set a script name (unique handler) to call it later
'custom-cursor',
// Specify a path to your javascipt file
get_template_directory_uri() . '/js/theme.min.js',
// Leave dependencies array blank (your code doesn't require any other scripts)
array(),
// Don't specify a version (you can read about this later)
false,
// Yes, call this script in the footer
// after the main content (for performance reasons)
true
);
// After the registration, you are able to load the script
// from any template using it's handler
// And since your cursor should be probably loaded on every page,
// you can load it just once right here in functions.php instead.
wp_enqueue_style( 'custom-cursor' );
// Ok, now you can add one more script if you wish.
}
}
// But don't forget that we need to call our registration function right in time,
// before the template is displayed, so we should use a hook.
// There is a special hook for this purpose: 'wp_enqueue_scripts'
add_action( 'wp_enqueue_scripts', 'rhonda_frontend_scripts' );
// Done :)
(3. Optional) If you need to load the script only in a special template, you neead to call wp_enqueue_style( 'custom-cursor' ); right from its body. For example, you can open single.php and put this code there (before get_header(), this is important):
// This function will inject your scripts in the header/footer
// of any page, which uses this .php template file
function rhonda_single_template_scripts() {
wp_enqueue_script( 'custom-cursor' );
}
// Don't forget to call it via special hook 'wp_enqueue_scripts'.
add_action( 'wp_enqueue_scripts', 'rhonda_single_template_scripts' );
// ...
// get_header();
Summary:
The basics: "Using_Javascript" (Codex)
Reference: wp_register_script()
Reference: wp_enqueue_script()
Hope this helps.

How to avoid PhotoSwipe zoomed to image original size in SmartSevice?

I use PhotoSwipe with angularJS to display image.But when I click the image in SmartDevice, the default mode is set to 'zoomIn' which is too big to see the image.
I mean, when I click an image like this
It became this:
but I want it to become this for default:
this is the html :
<a ng-click="showZoom(page.page);">
<img ng-src="{{page.imageUrl}}" >
</a>
this is the javascript:
$scope.showZoom = function (pageNo) {
var items = new Array();
items.push(
{
src: $scope.pages[0].imageUrl,
w: 1400,
h: 700
});
var currentIndex = 0;
if (pageNo === 1)
currentIndex = 1;
if (pageNo >= 2)
currentIndex = pageNo / 2 + 1;
//オプションの設定
var options = {
history: false,
focus: false,
index: currentIndex,
showAnimationDuration: 0,
hideAnimationDuration: 0,
};
var pswpElement = document.querySelectorAll('.pswp')[0];
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
}

I resolved this problerm.
It's because i use 'ngTouch' which cause the 'ng-click' fired twice that is like a double-click.
in PhotoSwipe, a double-click means zoomIn, so.....
I remove the 'ngTouch' and get resolved.

Unexpected token ILLEGAL when mixing classic javascript with AngularJS

I have this javascript code which ran fine so far :
<div id="freewall" class="free-wall"></div>
<script type="text/javascript">
var temp = "<a class='fancybox' rel='group' href='graphics/tattoos/hd/{index}.jpg'>
<div class='brick' style='width:{width}px;'>
<img src='graphics/tattoos/sd/{index}.jpg' width='100%'>
</div>
</a>";
var w = 1, h = 1, html = '', limitItem = 5;
for (var i = 0; i < limitItem; ++i) {
w = 1 + 3 * Math.random() << 0;
html += temp.replace(/\{width\}/g, w*150).replace(/{index}/g, i + 1);
}
$("#freewall").html(html);
var wall = new Freewall("#freewall");
wall.reset({
selector: '.brick',
animate: true,
cellW: 150,
cellH: 'auto',
onResize: function() {
wall.fitWidth();
}
});
var images = wall.container.find('.brick');
images.find('img').load(function() {
wall.fitWidth();
});
</script>
var wall = new Freewall("#freewall");
wall.reset({
selector: '.brick',
animate: true,
cellW: 150,
cellH: 'auto',
onResize: function() {
wall.fitWidth();
}
});
var images = wall.container.find('.brick');
images.find('img').load(function() {
wall.fitWidth();
});
</script>
You can see the result at : http://rimetattoo.com/index.php?p=tattoos
I am rewriting this website using AngularJS (mostly for training), and put the same code in a template being used as a view. When I run the app in Chrome, I get an exception "Unexpected token ILLEGAL" in angular.js:12330.
I am pretty new to Angular and I am supposing that something must be wrong in the syntax I am using there, because when I remove this script, everything is okay.
Can somebody give me a heads up on what is going on there ?
Thanks a lot !

Image gallery with href tag

I have a question
I have this code. The code used to display a gallery, and it works perfect. I want now that when you click on any picture I show it in bigger resolution. But when I put the href tag, the images not appear, if the link appears, but the images not appear.
<div class="container">
<div id="freewall" class="free-wall"></div>
<script type="text/javascript">
var temp = "<div class='brick' style='width:{width}px;'><img src='img/col1/{index}.jpg' width='100%'></div>";
var w = 1, h = 1, html = '', limitItem = 24;
for (var i = 0; i < limitItem; ++i) {
w = 1 + 3 * Math.random() << 0;
html += temp.replace(/\{width\}/g, w*150).replace("{index}", i + 1);
}
$("#freewall").html(html);
var wall = new Freewall("#freewall");
wall.reset({
selector: '.brick',
animate: true,
cellW: 150,
cellH: 'auto',
onResize: function() {
wall.fitWidth();
}
});
var images = wall.container.find('.brick');
images.find('img').load(function() {
wall.fitWidth();
});
</script>
</div>
Images may not appear when I put the tag href
var temp = "<div class='brick' style='width:{width}px;'><a href='img/col1/{index}.jpg'><img src='img/col1/{index}.jpg' width='100%'></a></div>";
Appears the link, but not the images.
Any help I'm appreciate. Thanks

I think more easily you can do is.
.style1{
display:block;
width:100%;
}
add this class to your a tag
<a class="style1" href='img/col1/{index}.jpg'>
Hope that helps
Edited:
The problem seems here.
.replace("{index}", i + 1);
use this.
.replace("/{index}/g", i + 1);

Javascript debugging in IE

Although I found several questions regarding this topic, I'm not finding any luck solving my own issue. My lack of javascript knowledge is most likely the cause of that. Anyway, it would be great if someone could help me with this.
I've implemented several javascripts in the html. They all seemed to work but somehow in the end it didn't when I fired up IE again to test it. I ran a debugging test on IE and this was warning came up: 'nodeType' is null or not an object. I'm not totally sure which part of the script to post so below is the entire script part of the html:
HEAD
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
var $jq = jQuery.noConflict();
</script>
<script type="text/javascript" src="jquery.twitter.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$jq(document).ready(function() {
$jq("#twitter").getTwitter({
userName: "ronnsono",
numTweets: 2,
loaderText: "Loading tweets...",
slideIn: false,
showHeading:false,
headingText: "Latest Tweets",
showProfileLink: false
});
});
//--><!]]>
</script>
BODY
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="js/jquery.transform-0.9.3.min_.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
var $menu = $('#mb_menu'),
$menuItems = $menu.children('a'),
$mbWrapper = $('#mb_content_wrapper'),
$mbClose = $mbWrapper.children('.mb_close'),
$mbContentItems = $mbWrapper.children('.mb_content'),
$mbContentInnerItems= $mbContentItems.children('.mb_content_inner');
$mbPattern = $('#mb_pattern'),
$works = $('#mb_imagelist > li'),
$mb_bgimage = $('#mb_background > img'),
Menu = (function(){
var init = function() {
preloadImages();
initPlugins();
initPattern();
initEventsHandler();
},
//preloads the images for the work area (data-bgimg attr)
preloadImages = function() {
$works.each(function(i) {
$('<img/>').attr('src' , $(this).children('img').data('bgimg'));
});
},
//initialise the jScollPane (scroll plugin)
initPlugins = function() {
$mbContentInnerItems.jScrollPane({
verticalDragMinHeight: 40,
verticalDragMaxHeight: 40
});
},
/*
draws 16 boxes on a specific area of the page.
we randomly calculate the top, left, and rotation angle for each one of them
*/
initPattern = function() {
for(var i = 0; i < 16 ; ++i) {
//random opacity, top, left and angle
var o = 0.1,
t = Math.floor(Math.random()*196) + 5, // between 5 and 200
l = Math.floor(Math.random()*696) + 5, // between 5 and 700
a = Math.floor(Math.random()*101) - 50; // between -50 and 50
$el = $('<div>').css({
opacity : o,
top : t + 'px',
left : l + 'px'
});
if (!$.browser.msie)
$el.transform({'rotate' : a + 'deg'});
$el.appendTo($mbPattern);
}
$mbPattern.children().draggable(); //just for fun
},
/*
when the User closes a content item, we move the boxes back to the original place,
with new random values for top, left and angle though
*/
disperse = function() {
$mbPattern.children().each(function(i) {
//random opacity, top, left and angle
var o = 0.1,
t = Math.floor(Math.random()*196) + 5, // between 5 and 200
l = Math.floor(Math.random()*696) + 5, // between 5 and 700
a = Math.floor(Math.random()*101) - 50; // between -50 and 50
$el = $(this),
param = {
width : '50px',
height : '50px',
opacity : o,
top : t + 'px',
left : l + 'px'
};
if (!$.browser.msie)
param.rotate = a + 'deg';
$el.animate(param, 1000, 'easeOutExpo');
});
},
initEventsHandler = function() {
/*
click a link in the menu
*/
$menuItems.bind('click', function(e) {
var $this = $(this),
pos = $this.index(),
speed = $this.data('speed'),
easing = $this.data('easing');
//if an item is not yet shown
if(!$menu.data('open')){
//if current animating return
if($menu.data('moving')) return false;
$menu.data('moving', true);
$.when(openItem(pos, speed, easing)).done(function(){
$menu.data({
open : true,
moving : false
});
showContentItem(pos);
$mbPattern.children().fadeOut(500);
});
}
else
showContentItem(pos);
return false;
});
/*
click close makes the boxes animate to the top of the page
*/
$mbClose.bind('click', function(e) {
$menu.data('open', false);
/*
if we would want to show the default image when we close:
changeBGImage('images/default.jpg');
*/
$mbPattern.children().fadeIn(500, function() {
$mbContentItems.hide();
$mbWrapper.hide();
});
disperse();
return false;
});
/*
click an image from "Works" content item,
displays the image on the background
*/
$works.bind('click', function(e) {
var source = $(this).children('img').data('bgimg');
changeBGImage(source);
return false;
});
},
/*
changes the background image
*/
changeBGImage = function(img) {
//if its the current one return
if($mb_bgimage.attr('src') === img || $mb_bgimage.siblings('img').length > 0)
return false;
var $itemImage = $('<img src="'+img+'" alt="Background" class="mb_bgimage" style="display:none;"/>');
$itemImage.insertBefore($mb_bgimage);
$mb_bgimage.fadeOut(1000, function() {
$(this).remove();
$mb_bgimage = $itemImage;
});
$itemImage.fadeIn(1000);
},
/*
This shows a content item when there is already one shown:
*/
showContentItem = function(pos) {
$mbContentItems.hide();
$mbWrapper.show();
$mbContentItems.eq(pos).show().children('.mb_content_inner').jScrollPane();
},
/*
moves the boxes from the top to the center of the page,
and shows the respective content item
*/
openItem = function(pos, speed, easing) {
return $.Deferred(
function(dfd) {
$mbPattern.children().each(function(i) {
var $el = $(this),
param = {
width : '100px',
height : '100px',
top : 154 + 100 * Math.floor(i/4),
left : 200 + 100 * (i%4),
opacity : 1
};
if (!$.browser.msie)
param.rotate = '0deg';
$el.animate(param, speed, easing, dfd.resolve);
});
}
).promise();
};
return {
init : init
};
})();
/*
call the init method of Menu
*/
Menu.init();
});
</script>

I had the same problem in IE8 with 'nodeType' is null or not an object. The solution which I found to update your jQuery with latest version.