Develop Reference

Custom JS files conflicting with eachother

Not exactly sure how to describe this properly, but I have a feeling that my two (custom) JS files are conflicting. When I enable them both, only one of them works. If I enable them seperatly, they work perfectly.
These are the files (wrapped in Drupal JS)
The first one makes sure my navbar (a vertical navbar at the left of the screen) can be scrolled on screens smaller than the navbar, but it will become fixed if the page is longer than the navbar.
/**
* #file
* A JavaScript file for the theme.
*
* In order for this JavaScript to be loaded on pages, see the instructions in
* the README.txt next to this file.
*/
// JavaScript should be made compatible with libraries other than jQuery by
// wrapping it with an "anonymous closure". See:
// - https://drupal.org/node/1446420
// - http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
(function ($, Drupal, window, document, undefined) {
// To understand behaviors, see https://drupal.org/node/756722#behaviors
Drupal.behaviors.my_custom_behavior = {
attach: function(context, settings) {
$( document ).ready(function() {
$(window).scroll(function(){
var navHeight = $('#left-bar').height() + 60;
var windowHeight = jQuery( window ).height();
var currentPosition = $('body').scrollTop();
console.log(currentPosition + ' ' + (navHeight - windowHeight));
if (currentPosition > (navHeight - windowHeight) - 1) {
$('#left-bar').css({'position': 'fixed', 'top': (windowHeight - navHeight)});
} else {
$('#left-bar').css({'position': 'relative', 'top': 0});
}
});
});
}
};
})(jQuery, Drupal, this, this.document);
The second one makes a certain div appear and fade out in random places on my page.
/**
* #file
* A JavaScript file for the theme.
*
* In order for this JavaScript to be loaded on pages, see the instructions in
* the README.txt next to this file.
*/
// JavaScript should be made compatible with libraries other than jQuery by
// wrapping it with an "anonymous closure". See:
// - https://drupal.org/node/1446420
// - http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
(function ($, Drupal, window, document, undefined) {
// To understand behaviors, see https://drupal.org/node/756722#behaviors
Drupal.behaviors.my_custom_behavior = {
attach: function(context, settings) {
$( document ).ready(function() {
showRandomQuote();
setInterval(swapQuotes, 5500);
});
function showRandomQuote() {
var numItems = $('.running-quote').length;
var randomNumber = randomNumberFromRange(0, numItems-1);
var quoteToDisplay = $( ".running-quote:eq(" + randomNumber + ")" );
quoteToDisplay.addClass('displayed-quote');
randomPlacement(quoteToDisplay);
quoteToDisplay.fadeIn(800);
}
function swapQuotes() {
var quoteToHide = $('.displayed-quote');
quoteToHide.removeClass('displayed-quote');
quoteToHide.fadeOut(800, showRandomQuote);
}
function randomPlacement(element) {
var parent = element.parent().parent().parent();
var parentWidth = parent.width();
var parentHeight = parent.height();
var randomWidth = randomNumberFromRange(200, 500);
var randomXPos = randomNumberFromRange(0, parentWidth - randomWidth - 80);
var randomYPos = randomNumberFromRange(0, parentHeight - element.height() - 60);
element.width(randomWidth);
element.css({"top": randomYPos, "left": randomXPos});
}
function randomNumberFromRange(min,max) {
var randomNumber = Math.floor(Math.random()*(max-min+1)+min);
return randomNumber;
}
}
};
})(jQuery, Drupal, this, this.document);
I have absolutely no clue what would cause one of them to break the other one.
Any clues?

As #Pointy stated, your behaviors must have unique names.
General code review:
your use of $( document ).ready(function() {, from the
documentation, the attach
function behaviors is called each time an element is refresh (either
by page load or ajax), so you do not need to use jQuery.ready
function.
showRandomQuote should be inlined

Placing a dot on an image - onClick

A user will be able to click on 3 points on an image, and i want to display a BLACK dot at those points. Then i will save these values in my database, and regenerate the image with those 3 points later on.
This is a 2 part question:
1.) In my code, i am not able to detect the onClick event when the image is clicked. Can someone look into this. Here's my code. JSFIDDLE
$(document).ready(function () {
$('body').click(function (ev) {
alert("d");
mouseX = ev.pageX;
mouseY = ev.pageY
alert(mouseX + ' ' + mouseY);
var color = '#000000';
var size = '1px';
$("body").append(
$('<div></div>')
.css('position', 'absolute')
.css('top', mouseY + 'px')
.css('left', mouseX + 'px')
.css('width', size)
.css('height', size)
.css('background-color', color));
});
});
HTML
<body background="http://www.craigjoneswildlifephotography.co.uk/blog/wp-content/uploads/2010/07/CMJ57311.jpg">
</body>
2.) Say that i have the X and Y coordinates of the points, and how can i regenerate the image with those points ?

Just use document instead of body (your body element has a calculated height of 0, but document is always the full size of the window):
http://jsfiddle.net/TrueBlueAussie/95vczfve/5/
$(document).ready(function () {
$(document).click(function (ev) {
mouseX = ev.pageX;
mouseY = ev.pageY
console.log(mouseX + ' ' + mouseY);
var color = '#000000';
var size = '1px';
$("body").append(
$('<div></div>')
.css('position', 'absolute')
.css('top', mouseY + 'px')
.css('left', mouseX + 'px')
.css('width', size)
.css('height', size)
.css('background-color', color));
});
});
As a side note: Your original JSFiddle is also a great example of why you should not connect delegated events to body instead of document. The body element can be styled out of existence (also document exists before the DOM is even loaded) :)
Or, as Brian provided, a reduced version http://jsfiddle.net/BrianDillingham/95vczfve/7/:
$(document).ready(function(){
$(document).click(function (ev) {
$("body").append(
$('<div></div>').css({
position: 'absolute',
top: ev.pageY + 'px',
left: ev.pageX + 'px',
width: '10px',
height: '10px',
background: '#000000'
})
);
});
});
And Brian's final update with limit of 3 dots: http://jsfiddle.net/BrianDillingham/95vczfve/8/

Your body has 0 height because it has 0 content.
Try adding this to your CSS:
html, body { height: 100%; margin: 0; }
Or try adding some content.
jsFiddle
On a side tip, a lot of things about your jQuery can be made cleaner/easier:
$(document).ready(function(){
// here I asign the event dynamically, not needed for 'body' as such tag should always be present,
// but something you should look into
// see also: http://api.jquery.com/on/
$(document).on('click', 'body', function(e) {
mouseX = e.pageX;
mouseY = e.pageY
// simply press F12 to look at your browsers console and see the results
console.log('Mouse Position:\t' + mouseX + '|' + mouseY);
// no need in JS to write var for every variable declartion,
// just seperate with a comma
var color = '#000000',
size = '5px'; // changed size to 5px from 1 just to make it easier to see what's going on for you
// No need to use $("body") since this event takes place on the body tag
// $(this), in an event, always equals the selector the event is tied to
$(this).append(
// making an element with jquery is simple
// no need to insert whole tag, all you need is tag name and a closer
// like so
$('<div />')
// easily tie all css together
.css({
// also, in jquery CSS, any css variable with a '-'
// can be renamed when assigning
// simply remove the '-' and capitilize the first letter of the second word
// like so, here in 'background-color'
backgroundColor: color,
height: size,
left: mouseX + 'px',
position: 'absolute',
top: mouseY + 'px',
width: size
})
);
})
});

Regarding part 2 of your question, my first thought is to include query params in the image URL, so that instead of http://www.example.com/thingies/someimage.jpg you get something like http://www.example.com/thingies/someimage.jpg?x0=10&y0=25&x1=30&y1=5. From there you would simply check if that string has query params with names matching what you're looking for (x0, y0, x1, etc...) and place points according to those.
Alternatively, you could also store the parameters in the URL for that web page, but that might lead to noisy URLs depending on what you're doing.
This depends on the server storing the coordinates, though.
My second thought is Local Storage, would store the points with the client, but that means that the points are not necessarily sent to the server, and are being read only from the client's browser. It also depends on the browser supporting that, and allowing that. Of course, since 3 coordinates is a rather small set of data, it could be stored in a browser cookie.

jQuery reload function

Here's what I'm trying to achieve:
Scrolling marquee content (with flexible length) makes a complete journey from right to left of the screen
Once it has disappeared off the screen, bring up some generic messages
In the background during generic messages, check for any new scrolling content and load it
Only when the generic messages have finished displaying, start scrolling again (if there is new content), otherwise repeat the generic messages
http://jsfiddle.net/Vbmm5/
(function($) {
$.fn.marquee = function(options) {
return this.each(function() {
var o = $.extend({}, $.fn.marquee.defaults, options),
$this = $(this),
$marqueeWrapper,
containerWidth,
animationCss,
elWidth;
o = $.extend({}, o, $this.data());
o.gap = o.duplicated ? o.gap : 0;
$this.wrapInner('<div class="js-marquee"></div>');
var $el = $this.find('.js-marquee').css({
'margin-right': o.gap,
'float':'left'
});
if(o.duplicated) {
$el.clone().appendTo($this);
}
$this.wrapInner('<div style="width:100000px" class="js-marquee-wrapper"></div>');
elWidth = $this.find('.js-marquee:first').width() + o.gap;
$marqueeWrapper = $this.find('.js-marquee-wrapper');
containerWidth = $this.width();
o.speed = ((parseInt(elWidth,10) + parseInt(containerWidth,10)) / parseInt(containerWidth,10)) * o.speed;
var animate = function() {
if(!o.duplicated) {
$marqueeWrapper.css('margin-left', o.direction == 'left' ? containerWidth : '-' + elWidth + 'px');
animationCss = { 'margin-left': o.direction == 'left' ? '-' + elWidth + 'px' : containerWidth };
}
else {
$marqueeWrapper.css('margin-left', o.direction == 'left' ? 0 : '-' + elWidth + 'px');
animationCss = { 'margin-left': o.direction == 'left' ? '-' + elWidth + 'px' : 0 };
}
$marqueeWrapper.animate(animationCss, o.speed , 'linear', function(){
getUpdates();
});
};
setTimeout(animate, o.delayBeforeStart);
});
};
})(jQuery);
$(function(){
$('#scrollerContent').marquee({
speed: 3000,
gap: 50,
delayBeforeStart: 0,
direction: 'right',
duplicated: false,
pauseOnHover: false,
});
});
function getUpdates()
{
alert("Hello"); // This is where the jQuery get function would be to update the text
alert("Show Details"); // This is where the generic details would be displayed
marquee();
}
The problem is the scrolling element requires a width, which obviously changes with every new 'load' of messages. I tried putting the getUpdates() function inside the main jQuery function, which does work almost perfectly but doesn't update the containerWidth variable, so messages longer than the original start half-way through, and shorter messages take ages to appear.
What I need is for the whole of the function to be re-run, including the re-setting of the width after the #scrollerText paragraph has been changed.
How do I do this?

If you had used console.log() instead of alert() you would have had the console open and seen
Uncaught ReferenceError: marquee is not defined
In getUpdates() you're calling a function marquee(); that does not exist. The script terminates there.
Go back a few steps (undoing what you've removed) and where the code triggers the animation, add the code to update the text before that, or if you're getting data you need to wrap that bit of code.
So, if you were getting data from the server, theurl.php would return text new text and nothing else. Move the code that triggers the animation to go again within the $.get callback function.
http://jsfiddle.net/Vbmm5/4/
$marqueeWrapper.animate(animationCss, o.speed , 'linear', function(){
// clear the text to prevent it from hanging at the end of the
// marquee while the script gets new data from the server
$this.find('#scrollerText').text('');
// get new text
$.get('theurl.php', function(response){
$this.find('#scrollerText').text(response);
// update the width
elWidth = $this.find('.js-marquee:first').width();
//fire event
$this.trigger('finished');
//animate again
if(o.pauseOnCycle) {
setTimeout(animate, o.delayBeforeStart);
}
else {
animate();
}
});
});
(the URL and post data in the example on jsfiddle is jsfiddle's way of returning html)
I've used $this.find('#scrollerText').text(response); even though there should be only one id and $('#scrollerText').text(response); would be fine. If you were to have multiple marquees you would target each marquee's text using $this.find, so if you want more than one use classes instead $this.find('.scrollerText').text(response);

Apply jQuery events to all class elements?

I have the following code which will allowed a user running iOS to move a <div> with the class .drag around on the page. This works fine when there is one istance of .drag, but fails to work when there are two instances of it. Is it possible to have the code find all of the <div>'s, then allow them to be draggable?
var drag = $(".drag")[0];
xPos = drag.offsetWidth / 2;
yPos = drag.offsetHeight / 2;
drag.addEventListener("touchmove", function() {
event.preventDefault();
$(this).css({
'left' : event.targetTouches[0].pageX - xPos + 'px',
'top' : event.targetTouches[0].pageY - yPos + 'px'
});
});

When you use $(selector)[0], you get the first DOM element that matches the selector. Use .each() instead to add the event listener to all elements that match the selector:
$(".drag").each(function () {
var drag = this;
xPos = drag.offsetWidth / 2;
yPos = drag.offsetHeight / 2;
drag.addEventListener("touchmove", function() {
event.preventDefault();
$(this).css({
'left' : event.targetTouches[0].pageX - xPos + 'px',
'top' : event.targetTouches[0].pageY - yPos + 'px'
});
});
});​

Yes, it's possible. But you are using a jQuery selector (which can select and return multiple elements) and then immediately unwrapping it to return the first element. You can modify your code to use jQuery functions throughout and avoid this.
// an array of all elements with class "drag"
// each element is wrapped
var drag = $(".drag");
// selects all matching elements, but then references
// the first raw DOM element in the array
var drag = $(".drag")[0];
Another way of looking at it:
var matches = $(".drag");
// each() executes a function for each matched element
matches.each(function () {
var drag = this; // raw dom element
// or, wrap to get jQuery object
// var drag = $(this);
});​
As I mentioned, you can also use jQuery functions throughout your code. Two quick examples I see are the x/y coordinate calculation and the event binding.

First, you declare that you want only the first element by using [0].
Second, you should use jQuery's on() method. Here's how I see you function:
var drag = $(".drag");
drag.on("touchmove", function(event) {
xPos = $(this).offsetWidth / 2;
yPos = $(this).offsetHeight / 2;
event.preventDefault(); // preventDefault is IE-specific, is it?
$(this).css({
'left' : event.targetTouches[0].pageX - xPos + 'px',
'top' : event.targetTouches[0].pageY - yPos + 'px'
});
});

This is probably obvious to most experienced devs, but could be helpful to some junior devs who like myself have had trouble getting jQuery to apply to multiple elements.
Today I learned that you have to make sure you’re loading your script outside the div itself.
I was mistakenly loading the script inside the first element, and wondering why the jQuery function wasn’t applying to the other div farther down the page.
Screenshot showing < script > inside parent < div >
^ I was doing it wrong

Resize handler works once, but not twice

I'm writing code that handles the resize event, and ran into some trouble.
Here is the code:
/*
Timeline.js
(Requires jquery, developed with jquery-1.4.4.min.js in mind)
*/
/*
Timeline's two major functions are setup and draw. After instantiating a
timeline object, the developer calls setup() to initialize the object. Later,
the developer repeatedly calls on draw() to animate the canvas.
In between, resizing the window may trigger the resize() function which
adjusts the timeline's dimensions and other settings.
*/
function Timeline(){
// constants
Timeline._BORDER_SIDES = 20; // The border on each side of the timeline,
// We'll need this value later when calculating back's top offset
Timeline._OFFSET_LEFT = '8px';
Timeline._OFFSET_TOP = '8px'; // top border, 8px seems to be chrome default
Timeline._BUTTON_WIDTH = 17; // The length of the back and forward buttons
Timeline._WIDTH_FACTOR = 2/3; // How much height timeline should take up
// variables
Timeline._id = 0; // An id wich is unique for each instance of Timeline
/* This function is called when the user clicks the back div*/
this._backHandler = function(){
alert('back clicked');
};
this._testResize = function(){
alert('resized');
};
/*
timeline.setup()
Create canvas, back and forward button, as well as slider for scale.
timeline_wrapper_id is the id of an element which is to contain this
specific timeline.
*/
this.setup = function(timeline_wrapper_id){
// add canvas
this._id = Timeline._id++; // get id, create next id for next instance
this._timeline_wrapper_id = timeline_wrapper_id;
this._canvas = document.createElement('canvas');
this._canvas.setAttribute('id', 'canvas' + this._id);
$('#' + timeline_wrapper_id).append(this._canvas);
// add back button
this._back = document.createElement('div');
this._back.setAttribute('id', 'back' + this._id);
// id's help us jquery stuff, ensuring their unique across instances
// lets us potentially put several instance on the same page.
this._back.onclick = this._backHandler; // set event handler: onclick
$('#' + timeline_wrapper_id).append(this._back);
this._resizeHandler = function(){
// First, we clear all style so as to prevent duplicates
$('#canvas' + this._id).removeAttr('style');
$('#back' + this._id).removeAttr('style');
// later we'll insert an empty style before modifying the style.
// set canvas attributes
// Width of canvas is window width, with space for borders either
// side.
var canvas_width = $(window).width() - Timeline._BORDER_SIDES*2;
var canvas_height = $(window).height() * Timeline._HEIGHT_FACTOR;
/* The core feature of this block is the z-index. Everything else
is there because otherwise I can't determine the z-index. At
least that's what I read somewhere.
The z-index determines how overlapping elements are drawn.
The higher the z-index, the "closer to the user" the element is.
In this case, we want to draw everything on top of the canvas,
hence the lowest z-index in our application: 0.
*/
$('#canvas'+this._id).attr('style', '');
// this undoes our removeAttr('style') from earlier
$('#canvas' + this._id).css({
width: canvas_width,
height: canvas_height,
border: '1px solid', // to see what's going on
position: 'relative', // "take canvas out of flow"-rough quote
top: Timeline._BORDER_TOP, // seems to be the chrome default
left: Timeline._BORDER_LEFT, // ditto
'z-index': 0
});
/* Here we define the back button's visual properties.
Where possible, we calculate them in terms of canvas attributes,
to achieve a consistent layout as the browser is resized.
*/
var back_left = $('#canvas' + this._id).css('left') + 'px';
// same distance from left timeline_wrapper as canvas
// This one is a little more difficult: An explanation will follow
// as soon as I've figured it out myself.
var back_top = ((-1)*$('#canvas' + this._id).height() - 6) + 'px';
$('#back' + this._id).attr('style', '');
$('#back' + this._id).css({
'background-color': '#336699',
width: Timeline._BUTTON_WIDTH,
height: $('#canvas' + this._id).height(), // fill canvas height
position: 'relative', // same reason as for canvas
left: back_left,
top: back_top,
'z-index': 1
});
};
this._resizeHandler();
$(window).resize(this._resizeHandler);
};
/*
timeline.draw()
Update (or set for the first time) the styles of back and forward button,
as well as the canvas.
Assumes setup has been called.
*/
this.draw = function(){
console.log('dummy');
};
}
The code calling Timeline.js is pretty simple:
<!doctype html>
<html>
<head>
<title>timeline-js</title>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="Timeline.js"></script>
</head>
<body>
<div id="timeline_wrapper"></div>
<script type="text/javascript">
var timeline = new Timeline();
timeline.setup('timeline_wrapper');
// timeline.draw();
//setInterval('timeline.draw()', 60);
</script>
</body>
</html>
The resize function doesn't throw any errors in Chrome, and works when called like so:
this._resizeHandler();
The error handler is called, I know that because setting window.onresize = this._testReszie works fine, too.
However, when I combine the two, the canvas doesn't resize with the window.
Can someone point me in the right direction here?

The problem is that, in your _resizeHandler function, this does not refer to your Timeline instance. Instead it refers to window since that's what the handler has been attached to.
On way of fixing it (and this is not the only way) is to redefine _resizeHandler so that it gets a reference to the Timeline instance.
this._resizeHandler = function(self){
...same code but with 'this' replaced by 'self'...
}
And then fix up the call sites:
this._resizeHandler(this);
var thisTimeline = this;
$(window).resize(function() { thisTimeline._resizeHandler(thisTimeline); });
};