Develop Reference

How to get my function to increase variable "_time"

// videogame.js
// don't forget to validate at jslint.com
/*jslint devel: true, browser: true */
/*global $*/
$(function () {
"use strict";
// global functions
function boundaryCheck(element_selector) {
var element = $(element_selector);
var universe = $("#universe");
var p = element.position();
if (p.left < 0) {
element.css("left", "0px");
}
if (p.top < 0) {
element.css("top", "0px");
}
if (p.left + element.width() > universe.width()) {
element.css("left", (universe.width() - element.width()) + "px");
}
if (p.top + element.height() > universe.height()) {
element.css("top", (universe.height() - element.height()) + "px");
}
}
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
// Constructor for Player Ship object
function PlayerShip() {
var my = {};
$("#universe").append($("<div>").attr("id", "player"));
my.navigate = function (keys) {
var RIGHTARROW_KEYCODE = 39;
var LEFTARROW_KEYCODE = 37;
var UPARROW_KEYCODE = 38;
var DOWNARROW_KEYCODE = 40;
if (keys === RIGHTARROW_KEYCODE) {
$("#player").css("left", "+=10px");
}
if (keys === LEFTARROW_KEYCODE) {
$("#player").css("left", "-=10px");
}
if (keys === UPARROW_KEYCODE) {
$("#player").css("top", "-=10px");
}
if (keys === DOWNARROW_KEYCODE) {
$("#player").css("top", "+=10px");
}
boundaryCheck("#player");
};
return my;
}
// Constructor for Enemy Ship object
function EnemyShip() {
var my = {};
$("#universe").append($("<div>").attr("id", "enemy"));
my.move = function (paused) {
if (!paused) {
var left = Boolean(getRandomInt(0, 2));
var top = Boolean(getRandomInt(0, 2));
if (left) {
$("#enemy").css("left", "-=" + getRandomInt(1, 10) + "px");
} else {
$("#enemy").css("left", "+=" + getRandomInt(1, 10) + "px");
}
if (top) {
$("#enemy").css("top", "-=" + getRandomInt(1, 10) + "px");
} else {
$("#enemy").css("top", "+=" + getRandomInt(1, 10) + "px");
}
boundaryCheck("#enemy");
}
};
return my;
}
// this might make an asteroid happen, maybe. I don't know if it will work.
function Asteroid() {
var my = {};
$("#universe").append($("<div>").attr("id", "asteroid"));
my.move = function (paused) {
if (!paused) {
var left = Boolean(getRandomInt(0, 2));
var top = Boolean(getRandomInt(0, 2));
if (left) {
$("#asteroid").css("left", "-=" + getRandomInt(1, 10) + "px");
} else {
$("#asteroid").css("left", "+=" + getRandomInt(1, 10) + "px");
}
if (top) {
$("#asteroid").css("top", "-=" + getRandomInt(1, 10) + "px");
} else {
$("#asteroid").css("top", "+=" + getRandomInt(1, 10) + "px");
}
boundaryCheck("#asteroid");
}
};
return my;
}
// Constructor for Game object
function Game() {
// total points
var _health = 1000;
var _time = 0;
// is the game paused?
var _game_paused = false;
// speed of background animation in ms (larger = slower)
var _background_speed = 100;
// player ship
var _player_ship = new PlayerShip();
// enemy ship
var _enemy_ship = new EnemyShip();
var _asteroid = new Asteroid(); //make this an actual thing
var my = {
health: _health,
time: _time,
game_paused: _game_paused,
background_speed: _background_speed,
player_ship: _player_ship,
enemy_ship: _enemy_ship,
asteroid: _asteroid
};
$("#universe").append($("<div>").attr("id", "results"));
$("#results").append($("<h1>"));
$("#universe").append($("<div>").attr("id", "results2"));
$("#results2").append($("<h1>"));
my.health = function (value) {
if (value === undefined) {
return _health;
}
_health = value;
return my;
};
my.time = function (value) {
if (value === undefined) {
return _time;
}
_time = value;
return my;
};
my.game_paused = function (value) {
if (value === undefined) {
return _game_paused;
}
_game_paused = value;
return my;
};
my.background_speed = function (value) {
if (value === undefined) {
return _background_speed;
}
_background_speed = value;
return my;
};
my.player_ship = function (value) {
if (value === undefined) {
return _player_ship;
}
_player_ship = value;
return my;
};
function runtimer() {
_time++;
};
my.enemy_ship = function (value) {
if (value === undefined) {
return _enemy_ship;
}
_enemy_ship = value;
return my;
};
my.asteroid = function (value) {
if (value === undefined) {
return _asteroid;
}
_asteroid = value;
return my;
};
// METHODS
// display total points
my.displayHealth = function () {
$("#results h1").html("Health: " + _health);
};
my.increaseTime = function () {
setInterval(function(){ runTimer() }, 1000)
}
my.displayTimer = function () {
$("#results2 h1").html("Time: "+ _time);
};
my.moveBackground = function () {
if (!_game_paused) {
var background_position = $("#universe")
.css("backgroundPosition")
.split(" ");
var current_x = parseInt(background_position[0], 10);
var current_y = parseInt(background_position[1], 10);
var new_x = current_x - 1;
var new_y = current_y;
$("#universe").css({
"background-position": new_x + "px " + new_y + "px"
});
}
};
my.checkKeys = function () {
var ESCAPE_KEYCODE = 27;
$(document).keydown(function (key_event) {
if (key_event.which === ESCAPE_KEYCODE) {
if (_game_paused) {
_game_paused = false;
$("#pause").remove();
} else {
_game_paused = true;
var pause = $("<div>", {id: "pause"});
$("body").prepend(pause);
}
} else {
_player_ship.navigate(key_event.which);
}
});
};
my.checkCollisions = function (paused) {
var p = $("#player");
var e = $("#enemy");
var ppos = p.position();
var epos = e.position();
if (!paused) {
if (
(
(ppos.left + p.width() < epos.left) ||
(ppos.left > epos.left + e.width())
) ||
(
(ppos.top + p.height() < epos.top) ||
(ppos.top > epos.top + e.height())
)
) {
return false;
} else {
return true;
}
}
};
my.checkAsteroid = function (paused) {
var p = $("#player");
var a = $("#asteroid");
var ppos = p.position();
var apos = a.position();
if (!paused) {
if (
(
(ppos.left + p.width() < apos.left) ||
(ppos.left > apos.left + a.width())
) ||
(
(ppos.top + p.height() < apos.top) ||
(ppos.top > apos.top + a.height())
)
) {
return false;
} else {
return true;
}
}
};
my.play = function () {
_enemy_ship.move(_game_paused);
_asteroid.move(_game_paused);
if (my.checkCollisions(_game_paused)) {
_health --;
my.displayHealth();
} else if (
my.checkAsteroid(_game_paused)) {
_health --;
my.displayHealth();
}
};
return my;
}
var game = new Game();
game.checkKeys();
game.displayHealth();
game.displayTimer();
game.increaseTime();
setInterval(game.moveBackground, game.background_speed);
setInterval(game.play, game.background_speed);
});
I'm relatively new to programming. I took a class in high school, which was very mediocre. I'm now taking some starter courses in college, and my assignment is to improve a generic space game (which I have already started doing). I have a div for the timer, but for some reason, I can't get any functions to increase the _time variable. It's almost as though they're not allowed to access it. I have a function called "runTimer", which is supposed to increase "_time" by one every time it is run. I have another function called "increaseTime", which is supposed to run "runTimer" every 1000 milliseconds. The variable never seems to increase though. This hasn't been my first spaghetti code implementation of a timer, since I've tried various things over the past few hours. I just can't understand why the variable won't increase.

This is a big hunk of code. As RobG pointed out, try to work on paring back your question to the minimal, complete, and verifiable example you can.
That said, at a glance, it would appear that your timer probably is updating. At least _time is.
The problem is likely you are never re-drawing your div, so it isn't showing the updated value. You need to call game.displayTimer() every time _time updates.
Probably the easiest place to add it would be in your setInterval() in increaseTime():
my.increaseTime = function () {
setInterval(function(){
runTimer();
my.displayTime();
}, 1000)
}

Sometimes white background goes transparent on whole page

I wanted to use this kind of Photo Collage on my Website: Seamless Photo Collage by AutomaticImageMontage
so I downloaded it and pasted the code to my Website..
it works but sometimes when the page loads the white background goes transparent on the whole page transperent background
I'm using Parallax and Bootstrap, sometimes the parallax isn't working properly too.
I have tried to set the background to white in CSS but nothing.. sometimes it loads normally but sometimes goes transparent,
I have checked the console too but it showes only
jquery.montage.min.js:1 Uncaught TypeError: Cannot read property 'apply' of undefined
now i really dont have any idea how to fix it.
please help :(
Javascript CSS and HTML
(function(window, $, undefined) {
Array.max = function(array) {
return Math.max.apply(Math, array)
};
Array.min = function(array) {
return Math.min.apply(Math, array)
};
var $event = $.event,
resizeTimeout;
$event.special.smartresize = {
setup: function() {
$(this).bind("resize", $event.special.smartresize.handler)
},
teardown: function() {
$(this).unbind("resize", $event.special.smartresize.handler)
},
handler: function(event, execAsap) {
var context = this,
args = arguments;
event.type = "smartresize";
if (resizeTimeout) {
clearTimeout(resizeTimeout)
}
resizeTimeout = setTimeout(function() {
jQuery.event.handle.apply(context, args)
}, execAsap === "execAsap" ? 0 : 50)
}
};
$.fn.smartresize = function(fn) {
return fn ? this.bind("smartresize", fn) : this.trigger("smartresize", ["execAsap"])
};
$.fn.imagesLoaded = function(callback) {
var $images = this.find('img'),
len = $images.length,
_this = this,
blank = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
function triggerCallback() {
callback.call(_this, $images)
}
function imgLoaded() {
if (--len <= 0 && this.src !== blank) {
setTimeout(triggerCallback);
$images.unbind('load error', imgLoaded)
}
}
if (!len) {
triggerCallback()
}
$images.bind('load error', imgLoaded).each(function() {
if (this.complete || this.complete === undefined) {
var src = this.src;
this.src = blank;
this.src = src
}
});
return this
};
$.Montage = function(options, element) {
this.element = $(element).show();
this.cache = {};
this.heights = new Array();
this._create(options)
};
$.Montage.defaults = {
liquid: true,
margin: 1,
minw: 70,
minh: 20,
maxh: 250,
alternateHeight: false,
alternateHeightRange: {
min: 100,
max: 300
},
fixedHeight: null,
minsize: false,
fillLastRow: false
};
$.Montage.prototype = {
_getImageWidth: function($img, h) {
var i_w = $img.width(),
i_h = $img.height(),
r_i = i_h / i_w;
return Math.ceil(h / r_i)
},
_getImageHeight: function($img, w) {
var i_w = $img.width(),
i_h = $img.height(),
r_i = i_h / i_w;
return Math.ceil(r_i * w)
},
_chooseHeight: function() {
if (this.options.minsize) {
return Array.min(this.heights)
}
var result = {},
max = 0,
res, val, min;
for (var i = 0, total = this.heights.length; i < total; ++i) {
var val = this.heights[i],
inc = (result[val] || 0) + 1;
if (val < this.options.minh || val > this.options.maxh) continue;
result[val] = inc;
if (inc >= max) {
max = inc;
res = val
}
}
for (var i in result) {
if (result[i] === max) {
val = i;
min = min || val;
if (min < this.options.minh) min = null;
else if (min > val) min = val;
if (min === null) min = val
}
}
if (min === undefined) min = this.heights[0];
res = min;
return res
},
_stretchImage: function($img) {
var prevWrapper_w = $img.parent().width(),
new_w = prevWrapper_w + this.cache.space_w_left,
crop = {
x: new_w,
y: this.theHeight
};
var new_image_w = $img.width() + this.cache.space_w_left,
new_image_h = this._getImageHeight($img, new_image_w);
this._cropImage($img, new_image_w, new_image_h, crop);
this.cache.space_w_left = this.cache.container_w;
if (this.options.alternateHeight) this.theHeight = Math.floor(Math.random() * (this.options.alternateHeightRange.max - this.options.alternateHeightRange.min + 1) + this.options.alternateHeightRange.min)
},
_updatePrevImage: function($nextimg) {
var $prevImage = this.element.find('img.montage:last');
this._stretchImage($prevImage);
this._insertImage($nextimg)
},
_insertImage: function($img) {
var new_w = this._getImageWidth($img, this.theHeight);
if (this.options.minsize && !this.options.alternateHeight) {
if (this.cache.space_w_left <= this.options.margin * 2) {
this._updatePrevImage($img)
} else {
if (new_w > this.cache.space_w_left) {
var crop = {
x: this.cache.space_w_left,
y: this.theHeight
};
this._cropImage($img, new_w, this.theHeight, crop);
this.cache.space_w_left = this.cache.container_w;
$img.addClass('montage')
} else {
var crop = {
x: new_w,
y: this.theHeight
};
this._cropImage($img, new_w, this.theHeight, crop);
this.cache.space_w_left -= new_w;
$img.addClass('montage')
}
}
} else {
if (new_w < this.options.minw) {
if (this.options.minw > this.cache.space_w_left) {
this._updatePrevImage($img)
} else {
var new_w = this.options.minw,
new_h = this._getImageHeight($img, new_w),
crop = {
x: new_w,
y: this.theHeight
};
this._cropImage($img, new_w, new_h, crop);
this.cache.space_w_left -= new_w;
$img.addClass('montage')
}
} else {
if (new_w > this.cache.space_w_left && this.cache.space_w_left < this.options.minw) {
this._updatePrevImage($img)
} else if (new_w > this.cache.space_w_left && this.cache.space_w_left >= this.options.minw) {
var crop = {
x: this.cache.space_w_left,
y: this.theHeight
};
this._cropImage($img, new_w, this.theHeight, crop);
this.cache.space_w_left = this.cache.container_w;
if (this.options.alternateHeight) this.theHeight = Math.floor(Math.random() * (this.options.alternateHeightRange.max - this.options.alternateHeightRange.min + 1) + this.options.alternateHeightRange.min);
$img.addClass('montage')
} else {
var crop = {
x: new_w,
y: this.theHeight
};
this._cropImage($img, new_w, this.theHeight, crop);
this.cache.space_w_left -= new_w;
$img.addClass('montage')
}
}
}
},
_cropImage: function($img, w, h, cropParam) {
var dec = this.options.margin * 2;
var $wrapper = $img.parent('a');
this._resizeImage($img, w, h);
$img.css({
left: -(w - cropParam.x) / 2 + 'px',
top: -(h - cropParam.y) / 2 + 'px'
});
$wrapper.addClass('am-wrapper').css({
width: cropParam.x - dec + 'px',
height: cropParam.y + 'px',
margin: this.options.margin
})
},
_resizeImage: function($img, w, h) {
$img.css({
width: w + 'px',
height: h + 'px'
})
},
_reload: function() {
var new_el_w = this.element.width();
if (new_el_w !== this.cache.container_w) {
this.element.hide();
this.cache.container_w = new_el_w;
this.cache.space_w_left = new_el_w;
var instance = this;
instance.$imgs.removeClass('montage').each(function(i) {
instance._insertImage($(this))
});
if (instance.options.fillLastRow && instance.cache.space_w_left !== instance.cache.container_w) {
instance._stretchImage(instance.$imgs.eq(instance.totalImages - 1))
}
instance.element.show()
}
},
_create: function(options) {
this.options = $.extend(true, {}, $.Montage.defaults, options);
var instance = this,
el_w = instance.element.width();
instance.$imgs = instance.element.find('img');
instance.totalImages = instance.$imgs.length;
if (instance.options.liquid) $('html').css('overflow-y', 'scroll');
if (!instance.options.fixedHeight) {
instance.$imgs.each(function(i) {
var $img = $(this),
img_w = $img.width();
if (img_w < instance.options.minw && !instance.options.minsize) {
var new_h = instance._getImageHeight($img, instance.options.minw);
instance.heights.push(new_h)
} else {
instance.heights.push($img.height())
}
})
}
instance.theHeight = (!instance.options.fixedHeight && !instance.options.alternateHeight) ? instance._chooseHeight() : instance.options.fixedHeight;
if (instance.options.alternateHeight) instance.theHeight = Math.floor(Math.random() * (instance.options.alternateHeightRange.max - instance.options.alternateHeightRange.min + 1) + instance.options.alternateHeightRange.min);
instance.cache.container_w = el_w;
instance.cache.space_w_left = el_w;
instance.$imgs.each(function(i) {
instance._insertImage($(this))
});
if (instance.options.fillLastRow && instance.cache.space_w_left !== instance.cache.container_w) {
instance._stretchImage(instance.$imgs.eq(instance.totalImages - 1))
}
$(window).bind('smartresize.montage', function() {
instance._reload()
})
},
add: function($images, callback) {
var $images_stripped = $images.find('img');
this.$imgs = this.$imgs.add($images_stripped);
this.totalImages = this.$imgs.length;
this._add($images, callback)
},
_add: function($images, callback) {
var instance = this;
$images.find('img').each(function(i) {
instance._insertImage($(this))
});
if (instance.options.fillLastRow && instance.cache.space_w_left !== instance.cache.container_w) instance._stretchImage(instance.$imgs.eq(instance.totalImages - 1));
if (callback) callback.call($images)
},
destroy: function(callback) {
this._destroy(callback)
},
_destroy: function(callback) {
this.$imgs.removeClass('montage').css({
position: '',
width: '',
height: '',
left: '',
top: ''
}).unwrap();
if (this.options.liquid) $('html').css('overflow', '');
this.element.unbind('.montage').removeData('montage');
$(window).unbind('.montage');
if (callback) callback.call()
},
option: function(key, value) {
if ($.isPlainObject(key)) {
this.options = $.extend(true, this.options, key)
}
}
};
var logError = function(message) {
if (this.console) {
console.error(message)
}
};
$.fn.montage = function(options) {
if (typeof options === 'string') {
var args = Array.prototype.slice.call(arguments, 1);
this.each(function() {
var instance = $.data(this, 'montage');
if (!instance) {
logError("cannot call methods on montage prior to initialization; " + "attempted to call method '" + options + "'");
return
}
if (!$.isFunction(instance[options]) || options.charAt(0) === "_") {
logError("no such method '" + options + "' for montage instance");
return
}
instance[options].apply(instance, args)
})
} else {
this.each(function() {
var instance = $.data(this, 'montage');
if (instance) {
instance.option(options || {});
instance._reload()
} else {
$.data(this, 'montage', new $.Montage(options, this))
}
})
}
return this
}
})(window, jQuery);
.am-wrapper{
float:left;
position:relative;
overflow:hidden;
}
.am-wrapper img{
position:absolute;
outline:none;
}
<div class="container">
<div id="am-container" class="am-container"><img src="images/1.jpg"><img src="images/2.jpg"><img src="images/3.jpg"><img src="images/4.jpg"><img src="images/5.jpg"><img src="images/6.jpg"><img src="images/7.jpg"><img src="images/8.jpg"><img src="images/9.jpg"><img src="images/10.jpg"><img src="images/11.jpg"><img src="images/12.jpg"><img src="images/13.jpg"><img src="images/14.jpg"><img src="images/15.jpg"><img src="images/16.jpg"><img src="images/17.jpg"><img src="images/18.jpg"><img src="images/19.jpg">
</div>
</div>
<script type="text/javascript">
$(function() {
var $container = $('#am-container'),
$imgs = $container.find('img').hide(),
totalImgs = $imgs.length,
cnt = 0;
$imgs.each(function(i) {
var $img = $(this);
$('<img/>').load(function() {
++cnt;
if( cnt === totalImgs ) {
$imgs.show();
$container.montage({
fillLastRow : false,
alternateHeight : false,
alternateHeightRange : {
min : 90,
max : 100
}
});
}
}).attr('src',$img.attr('src'));
});
});
</script>

Get or set variable from another function

I am using this custom JavaScript range slider, and I want to be able to get and set the sliders value. I already implemented the set function. (If you have a better way of doing it, please let me know.) I'm having trouble implementing the getValue function
I tried doing the following:
function getValue() {
if (value) {
return value;
}
return;
}
And when I call that function, I get the following error:
Uncaught ReferenceError: getValue is not defined
Creating a global variable, is not an option. How can I get the sliders value?
To set or get the sliders value, I want to be able to do the following:
mySlider.Value = 17; // Set Value
var currentValue = mySlider.Value // Get Value
JSFiddle
function rangeSlider(elem, config, update) {
if (typeof update != "undefined" && update) {
var dragger = elem.getElementsByTagName('span')[0];
var range = elem.getElementsByTagName('div')[0];
var isVertical = config.vertical;
var rangeWidth = range[!isVertical ? 'offsetWidth' : 'offsetHeight'];
var rangeOffset = range[!isVertical ? 'offsetLeft' : 'offsetTop'];
var draggerWidth = dragger[!isVertical ? 'offsetWidth' : 'offsetHeight'];
dragger.style[!isVertical ? 'left' : 'top'] = (config.value / 100 * rangeWidth - (draggerWidth / 2)) + 'px';
return;
}
function getValue() {
if (value) {
return value;
}
return;
}
var html = document.documentElement,
range = document.createElement('div'),
dragger = document.createElement('span'),
down = false,
rangeWidth, rangeOffset, draggerWidth, cachePosition;
var defaults = {
value: 0, // set default value on initiation from `0` to `100` (percentage based)
vertical: false, // vertical or horizontal?
rangeClass: "", // add extra custom class for the range slider track
draggerClass: "", // add extra custom class for the range slider dragger
drag: function(v) { /* console.log(v); */ } // function to return the range slider value into something
};
for (var i in defaults) {
if (typeof config[i] == "undefined") config[i] = defaults[i];
}
function addEventTo(el, ev, fn) {
if (el.addEventListener) {
el.addEventListener(ev, fn, false);
} else if (el.attachEvent) {
el.attachEvent('on' + ev, fn);
} else {
el['on' + ev] = fn;
}
}
var isVertical = config.vertical;
elem.className = (elem.className + ' range-slider ' + (isVertical ? 'range-slider-vertical' : 'range-slider-horizontal')).replace(/^ +/, "");
range.className = ('range-slider-track ' + config.rangeClass).replace(/ +$/, "");
dragger.className = ('dragger ' + config.draggerClass).replace(/ +$/, "");
addEventTo(range, "mousedown", function(e) {
html.className = (html.className + ' no-select').replace(/^ +/, "");
rangeWidth = range[!isVertical ? 'offsetWidth' : 'offsetHeight'];
rangeOffset = range[!isVertical ? 'offsetLeft' : 'offsetTop'];
draggerWidth = dragger[!isVertical ? 'offsetWidth' : 'offsetHeight'];
down = true;
updateDragger(e);
return false;
});
addEventTo(document, "mousemove", function(e) {
updateDragger(e);
});
addEventTo(document, "mouseup", function(e) {
html.className = html.className.replace(/(^| )no-select( |$)/g, "");
down = false;
});
addEventTo(window, "resize", function(e) {
var woh = dragger[!isVertical ? 'offsetWidth' : 'offsetHeight'];
dragger.style[!isVertical ? 'left' : 'top'] = (((cachePosition / 100) * range[!isVertical ? 'offsetWidth' : 'offsetHeight']) - (woh / 2)) + 'px';
down = false;
});
function updateDragger(e) {
e = e || window.event;
var pos = !isVertical ? e.pageX : e.pageY;
if (!pos) {
pos = !isVertical ? e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft : e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
if (down && pos >= rangeOffset && pos <= (rangeOffset + rangeWidth)) {
dragger.style[!isVertical ? 'left' : 'top'] = (pos - rangeOffset - (draggerWidth / 2)) + 'px';
cachePosition = Math.round(((pos - rangeOffset) / rangeWidth) * 100);
config.drag(cachePosition);
}
}
function initDragger() {
var woh = dragger[!isVertical ? 'offsetWidth' : 'offsetHeight'];
cachePosition = ((config.value / 100) * range[!isVertical ? 'offsetWidth' : 'offsetHeight']);
dragger.style[!isVertical ? 'left' : 'top'] = (cachePosition - (woh / 2)) + 'px';
config.drag(config.value);
}
range.appendChild(dragger);
elem.appendChild(range);
initDragger();
}
var slid1 = document.getElementById('range-slider-1');
var btn = document.getElementById('btn');
var anotherBtn = document.getElementById('anotherBtn');
var resultP = document.getElementById('results');
rangeSlider(slid1, {
value: 10,
});
btn.onclick = function() {
rangeSlider(slid1, {
value: 50
}, 1);
}
anotherBtn.onclick = function() {
document.getElementById('results').innerHTML = "Your Current Value is: " + getValue();
}
.range-slider-track {
height: 20px;
}
.range-slider-track:before {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: black;
}
.range-slider-track .dragger {
display: block;
width: 10px;
height: inherit;
position: relative;
background-color: red;
}
<div id="range-slider-1"></div>
<button id="btn">Set Value</button>
<button id="anotherBtn">Get Value</button>
<p id="results"></p>

The function "rangeSlider()" should be handled as an object, not as a function...
You have to create an object:
var mySlider = new rangeSlider(slid1, { value: 10,});
And you can obtain its value as:
mySlider.getValue()
Take a look at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new

Paste this javascript into the original fiddle and sett it working:
function rangeSlider(elem, config, update) {
var this_ = this;
this.setValue = function(value) {
var dragger = this.config.elem.getElementsByTagName('span')[0];
var range = this.config.elem.getElementsByTagName('div')[0];
var rangeWidth = range[!this.config.vertical ? 'offsetWidth' : 'offsetHeight'];
var draggerWidth = dragger[!this.config.vertical ? 'offsetWidth' : 'offsetHeight'];
dragger.style[!this.config.vertical ? 'left' : 'top'] = (value / 100 * rangeWidth - (draggerWidth / 2)) + 'px';
this.config.value = value;
};
this.getValue = function() {
return this.config.value;
};
var html = document.documentElement,
range = document.createElement('div'),
dragger = document.createElement('span'),
down = false,
rangeWidth, rangeOffset, draggerWidth, cachePosition;
this.config = {
value: (config.value || 0), // set default value on initiation from `0` to `100` (percentage based)
vertical: (config.vertical || false), // vertical or horizontal?
rangeClass: "", // add extra custom class for the range slider track
draggerClass: "", // add extra custom class for the range slider dragger
drag: function(v) { /* console.log(v); */ }, // function to return the range slider value into something
elem: elem
};
addEventTo = function(el, ev, fn) {
if (el.addEventListener) {
el.addEventListener(ev, fn, false);
} else if (el.attachEvent) {
el.attachEvent('on' + ev, fn);
} else {
el['on' + ev] = fn;
}
}
elem.className = (elem.className + ' range-slider ' + (this.config.vertical ? 'range-slider-vertical' : 'range-slider-horizontal')).replace(/^ +/, "");
range.className = ('range-slider-track ' + config.rangeClass).replace(/ +$/, "");
dragger.className = ('dragger ' + config.draggerClass).replace(/ +$/, "");
addEventTo(range, "mousedown", function(e) {
html.className = (html.className + ' no-select').replace(/^ +/, "");
rangeWidth = range[!this_.config.vertical ? 'offsetWidth' : 'offsetHeight'];
rangeOffset = range[!this_.config.vertical ? 'offsetLeft' : 'offsetTop'];
draggerWidth = dragger[!this_.config.vertical ? 'offsetWidth' : 'offsetHeight'];
down = true;
updateDragger(e);
return false;
});
addEventTo(document, "mousemove", function(e) {
updateDragger(e);
});
addEventTo(document, "mouseup", function(e) {
html.className = html.className.replace(/(^| )no-select( |$)/g, "");
down = false;
});
addEventTo(window, "resize", function(e) {
var woh = dragger[!this.config.vertical ? 'offsetWidth' : 'offsetHeight'];
dragger.style[!this.config.vertical ? 'left' : 'top'] = (((cachePosition / 100) * range[!this.config.vertical ? 'offsetWidth' : 'offsetHeight']) - (woh / 2)) + 'px';
down = false;
});
function updateDragger(e) {
e = e || window.event;
var pos = !this_.config.vertical ? e.pageX : e.pageY;
if (!pos) {
pos = !this_.config.vertical ? e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft : e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
if (down && pos >= rangeOffset && pos <= (rangeOffset + rangeWidth)) {
dragger.style[!this_.config.vertical ? 'left' : 'top'] = (pos - rangeOffset - (draggerWidth / 2)) + 'px';
cachePosition = Math.round(((pos - rangeOffset) / rangeWidth) * 100);
this_.config.value = cachePosition;
this_.config.drag(cachePosition);
}
};
this.initDragger = function() {
var woh = dragger[!this.config.vertical ? 'offsetWidth' : 'offsetHeight'];
cachePosition = ((config.value / 100) * range[!this.config.vertical ? 'offsetWidth' : 'offsetHeight']);
dragger.style[!this.config.vertical ? 'left' : 'top'] = (cachePosition - (woh / 2)) + 'px';
this.config.drag(this.config.value);
};
range.appendChild(dragger);
elem.appendChild(range);
this.initDragger();
}
var slid1 = document.getElementById('range-slider-1');
var btn = document.getElementById('btn');
var anotherBtn = document.getElementById('anotherBtn');
var resultP = document.getElementById('results');
var rs = new rangeSlider(slid1, {
value: 10,
});
var slid2 = document.getElementById('range-slider-2');
var rs2 = new rangeSlider(slid2, {
value: 20,
});
btn.onclick = function() {
rs.setValue(50);
}
anotherBtn.onclick = function() {
document.getElementById('results').innerHTML = "Range 1: " + rs.getValue() + '<br/>Range2: ' + rs2.getValue();
}
And this html also:
<div id="range-slider-1"></div>
<button id="btn">Set Value</button>
<button id="anotherBtn">Get Value</button>
<div id="range-slider-2"></div>
<p id="results"></p>
Like some of the other posters said, you need to fix your function a bit.
I don't have time to clean up the new code, but I'm sure you'll get the idea.
Here are a few things to keep in mind:
You want to create a new object by calling new rangeSlider.
You can assign the new object to a variable so you can use that variable to set or get values.
Notice the var this_ = this statement so we'll have access to the object instance even certain events, because the this in those events may be the actual elements in the DOM.
This new approach supports the multiple sliders in the document, as with your original code, but it is a lot more simpler and cleaner to get and set values.
I'm sure we can clean this code a lot more, so enjoy.

Directive is unable to resize font-size of text inside div

I have a plugin which re-sizes text to fit to <div>.
I have a directive which tell div inside div to change color and font-size. But, it can only change color, not font-size.
My Question is: How to override font-size of this plugin?
I couldn't import ng-fi-text plugin. So, I put it in the Javascript snippet.
The actual code is inside html.
/*! ng-fi-text v0.1.0 - 2014-11-10
* License: MIT
* Author: Leandro Bessone */
angular.module('ng-fi-text', [])
.directive('ngFiText', ['$window',
function($window) {
"use strict";
return {
restrict: 'A',
scope: {
ngFiText: '#',
ngFiTextHtml: '#'
},
link: function postLink(scope, element, attrs) {
if (!window.jQuery) {
console.error('ng-fi-text needs jQuery to work. Sory :(');
return;
}
// Options
var rotate = attrs.ngFiTextRotate || false;
var maxFontSize = attrs.ngFiTextMaxFontSize || false;
// var minFontSize = attrs.ngFiTextMinFontSize || false;
//var lineHeightMultiplier = attrs.ngFiTextLineHeightMultiplier || false;
var implementationType = attrs.hasOwnProperty('ngFiTextHtml') ? 'html' : 'text';
// Internal Options
var heightTolerance = 3;
var fontSize = 10;
var loopLimiter = 25; // higher is more accurate but increases process. Min 5~6
var executionOdometer = 0;
// Creating the element
var rotateToAdd = rotate ? ' rotate(' + rotate + 'deg) ' : '';
var textElem = angular.element('<div />').attr('style',
'word-wrap: break-word;' +
'line-height: normal;' +
'margin: 0px;' +
//'padding: 0px;'+
'position: absolute; ' +
'left:0px;' +
'right: 0px;' +
'top: 50%;' +
'-webkit-transform: translate(0%,-50%) ' + rotateToAdd + ';' +
'-moz-transform: translate(0%,-50%) ' + rotateToAdd + ';' +
'-ms-transform: translate(0%,-50%) ' + rotateToAdd + ';' +
'transform: translate(0%,-50%) ' + rotateToAdd + ';'
);
element.html(textElem);
function contentFilling(callback) {
var text = '';
if (implementationType === 'html') {
text = attrs.ngFiTextHtml || element.html() || '';
} else {
text = attrs.ngFiText || element.text() || '';
}
// Populating the DOM
textElem[implementationType](text);
if (callback)
callback();
} // contentFilling
function executeMagic() {
onStarted();
executionOdometer++;
var elementParent = textElem.parent();
var elemParentHeight = elementParent.height();
//var elemParentWidth = elementParent.width();
var elemHeight;
var heightDiff;
var baseCorrection = 10;
var definitiveCorrection;
var direction;
var prevDirection = false;
var currLoop = 1;
var currXLoop = 0;
var correctionMultiplier = 1;
var newFontSize = fontSize;
heightDiff = elemParentHeight - elemHeight;
var lastSameDirectionDiff = '',
preLastSameDirectionDiff = '';
var lesserDiff = false;
var lesserSize = false;
function grossCorrection(executionNumber) {
if (currLoop > loopLimiter) {
//console.log('no more loops :(');
//console.log('----------------------------------------- no + loops');
onFinished(newFontSize);
return;
}
onLoopStarted();
textElem.css('font-size', newFontSize + 'px');
if (implementationType === 'html') {
textElem.children().css('font-size', newFontSize + 'px');
}
window.setTimeout(function() {
if (executionNumber !== executionOdometer) {
return;
}
elemHeight = textElem.height();
heightDiff = elemParentHeight - elemHeight;
if (heightDiff >= 0 && (heightDiff < lesserDiff || !lesserDiff)) {
lesserDiff = heightDiff;
lesserSize = newFontSize;
}
direction = heightDiff >= 0 ? 1 : -1;
if (prevDirection && prevDirection !== direction) {
if (preLastSameDirectionDiff === heightDiff) {
//console.log('------------------ deberia parar -----------');
if (newFontSize !== lesserSize) {
textElem.css('font-size', lesserSize + 'px');
if (implementationType === 'html') {
textElem.children().css('font-size', lesserSize + 'px');
}
}
//console.log('----------------------------------------- dp');
onFinished(newFontSize);
return;
}
preLastSameDirectionDiff = lastSameDirectionDiff;
lastSameDirectionDiff = heightDiff;
currXLoop++;
correctionMultiplier = correctionMultiplier * (1 - 0.25 * currXLoop);
correctionMultiplier = correctionMultiplier < 0.05 ? 0.05 : correctionMultiplier;
}
prevDirection = direction;
definitiveCorrection = baseCorrection * correctionMultiplier * direction;
newFontSize = newFontSize + definitiveCorrection;
/*
console.log(
'l'+currLoop +
' | LSD:'+lastSameDirectionDiff+
' | ldif:'+lesserDiff+
' | elHght:'+elemHeight +
' | hDiff:'+heightDiff +
' | cx:'+correctionMultiplier+
' | def_corr:'+definitiveCorrection +
' | newFontSize:'+newFontSize +
'');
*/
currLoop++;
if (Math.abs(heightDiff) > heightTolerance) {
grossCorrection(executionOdometer);
} else {
//console.log('-----------------------------------------end');
onFinished(newFontSize);
}
}, 0);
} //gross
grossCorrection(executionOdometer);
} // executeMagic
function onStarted() {
textElem.css('visibility', 'hidden');
}
function onLoopStarted() {
}
function onFinished(finalFontSize) {
if (maxFontSize && finalFontSize > maxFontSize) {
textElem.css('font-size', maxFontSize + 'px');
}
textElem.css('visibility', 'visible');
}
function onResizeStarted() {
textElem.css('visibility', 'hidden');
}
// window resizing responsivenes
var timeoutHolder;
angular.element($window).bind('resize', function() {
window.clearTimeout(timeoutHolder);
onResizeStarted();
timeoutHolder = window.setTimeout(executeMagic, 150);
});
// update on values changing
scope.$watchGroup(['ngFiText', 'ngFiTextHtml'], function(newValue, oldValue) {
contentFilling(executeMagic);
});
// Staring the magic...
contentFilling(executeMagic);
}
};
}
]);
.myDiv {
width: 270px;
height: 70px;
border: solid orange;
position: absolute;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.4.2/angular.js"></script>
</head>
<body>
<div class='myDiv' resize-text ng-fi-text ng-fi-text-html='1234'></div>
</body>
</html>
<script>
var app = angular.module('plunker', ['ng-fi-text']);
app.directive('resizeText', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var text_len = element.text().length;
if (text_len < 15) {
element.css('font-size', '10px');
element.css('color', 'red');
}
}
}
})
</script>

Just found a solution:
element.addClass('small');
and style it:
<style>
.small > div
{
font-size: 10px !important;
}
</style>

jQuery Taggd plugin (Edit mode) get back value in input fields

Im using the jQuery taggd plugin, so far so good.
I modified a small bit, im using it in edit mode. So when a user types in a value in the textbox it checks if it is a URL or or string, if its a URL it runs a ajax call to a php file which scrapes some data from the url. Url title, description and image. I have created 3 hidden input fields which get populated once the ajax call is finished. Once you click on the SAVE icon it saves the data to the DOM. But i want it to display again once a user clicks on the tag again. At the moment its only displaying the value of the standard input field.
This is the taggd plugin with some small modifications:
/*!
* jQuery Taggd
* A helpful plugin that helps you adding 'tags' on images.
*
* License: MIT
*/
(function($) {
'use strict';
var defaults = {
edit: false,
align: {
x: 'center',
y: 'center'
},
handlers: {},
offset: {
left: 0,
top: 0
},
strings: {
save: '✓',
delete: '×'
}
};
var methods = {
show: function() {
var $this = $(this),
$label = $this.next();
$this.addClass('active');
$label.addClass('show').find('input').focus();
},
hide: function() {
var $this = $(this);
$this.removeClass('active');
$this.next().removeClass('show');
},
toggle: function() {
var $hover = $(this).next();
if($hover.hasClass('show')) {
methods.hide.call(this);
} else {
methods.show.call(this);
}
}
};
/****************************************************************
* TAGGD
****************************************************************/
var Taggd = function(element, options, data) {
var _this = this;
if(options.edit) {
options.handlers = {
click: function() {
_this.hide();
methods.show.call(this);
}
};
}
this.element = $(element);
this.options = $.extend(true, {}, defaults, options);
this.data = data;
this.initialized = false;
if(!this.element.height() || !this.element.width()) {
this.element.on('load', _this.initialize.bind(this));
} else this.initialize();
};
/****************************************************************
* INITIALISATION
****************************************************************/
Taggd.prototype.initialize = function() {
var _this = this;
this.initialized = true;
this.initWrapper();
this.addDOM();
if(this.options.edit) {
this.element.on('click', function(e) {
var poffset = $(this).parent().offset(),
x = (e.pageX - poffset.left) / _this.element.width(),
y = (e.pageY - poffset.top) / _this.element.height();
_this.addData({
x: x,
y: y,
text: '',
url: '',
url_title: '',
url_description: '',
url_image: ''
});
_this.show(_this.data.length - 1);
});
}
$(window).resize(function() {
_this.updateDOM();
});
};
Taggd.prototype.initWrapper = function() {
var wrapper = $('<div class="taggd-wrapper" />');
this.element.wrap(wrapper);
this.wrapper = this.element.parent('.taggd-wrapper');
};
Taggd.prototype.alterDOM = function() {
var _this = this;
this.wrapper.find('.taggd-item-hover').each(function() {
var $e = $(this),
$input = $('<input id="url" type="text" size="16" />')
.val($e.text()),
$url_title = $('<input type="text" id="url_title" class="url_title" />'),
$button_ok = $('<button />')
.html(_this.options.strings.save),
$url_description = $('<input type="text" class="url_description" id="url_description" />'),
$url_image = $('<input type="text" class="url_img" id="url_img" />'),
$url_preview = $('<div id="content"></div>'),
$button_delete = $('<button />')
.html(_this.options.strings.delete);
$button_delete.on('click', function() {
var x = $e.attr('data-x'),
y = $e.attr('data-y');
_this.data = $.grep(_this.data, function(v) {
return v.x != x || v.y != y;
});
_this.addDOM();
_this.element.triggerHandler('change');
});
// Typing URL timer
var typingTimer;
var doneTypingInterval = 2000;
$input.keyup(function() {
clearTimeout(typingTimer);
typingTimer = setTimeout(doneTyping, doneTypingInterval);
});
$input.keydown(function() {
clearTimeout(typingTimer);
$url_preview.empty();
});
// Process URL scrape request
function doneTyping() {
var getUrl = $input.val();
if(isURL(getUrl)) {
console.log('Typed text is a URL');
$url_preview.append('<img src="images/loader.gif" style="width:24px; padding-top:10px; height:24px; margin:0 auto;">');
// Get url data by ajax
$.post('ajax/Crawl.php', {
'url' : getUrl
},function(data) {
$url_preview.empty();
var content = '<h3 class="url_title">' + data.title + '</h3><p class="url_description" style="font-size:11px;">' + data.description + '</p><img class="url_image" src="' + data.images + '" style="width:100%; height:auto;">';
$url_preview.append(content);
$url_title.val(data.title);
$url_description.val(data.description);
$url_image.val(data.images);
console.log(content);
}, 'json');
} else {
console.log('Typed text is a string');
}
};
function isURL(url) {
var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
'(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
'(\\#[-a-z\\d_]*)?$','i'); // fragment locator
if(!pattern.test(url)) {
return false;
} else {
if(!/^(https?|ftp):\/\//i.test(url)) {
url = 'http://'+url;
$input.val(url);
}
return true;
}
};
$button_ok.on('click', function() {
var x = $e.attr('data-x'),
y = $e.attr('data-y'),
item = $.grep(_this.data, function(v) {
return v.x == x && v.y == y;
}).pop();
if(item) item.text = $input.val();
if(isURL(item.text)) {
if(item) item.url = item.text;
} else {
if(item) item.url = null;
}
if(item) item.url_title = $url_title.val();
if(item) item.url_description = $url_description.val();
if(item) item.url_image = $url_image.val();
_this.addDOM();
_this.element.triggerHandler('change');
//_this.hide();
});
/*$input.on('change', function() {
var x = $e.attr('data-x'),
y = $e.attr('data-y'),
item = $.grep(_this.data, function(v) {
return v.x == x && v.y == y;
}).pop();
if(item) item.text = $input.val();
_this.addDOM();
_this.element.triggerHandler('change');
});
*/
$e.empty().append($input, $button_ok, $button_delete, $url_preview, $url_title, $url_description, $url_image);
});
_this.updateDOM();
};
/****************************************************************
* DATA MANAGEMENT
****************************************************************/
Taggd.prototype.addData = function(data) {
if($.isArray(data)) {
this.data = $.merge(this.data, data);
} else {
this.data.push(data);
}
if(this.initialized) {
this.addDOM();
this.element.triggerHandler('change');
}
};
Taggd.prototype.setData = function(data) {
this.data = data;
if(this.initialized) {
this.addDOM();
}
};
Taggd.prototype.clear = function() {
if(!this.initialized) return;
this.wrapper.find('.taggd-item, .taggd-item-hover').remove();
};
/****************************************************************
* EVENTS
****************************************************************/
Taggd.prototype.on = function(event, handler) {
if(
typeof event !== 'string' ||
typeof handler !== 'function'
) return;
this.element.on(event, handler);
};
/****************************************************************
* TAGS MANAGEMENT
****************************************************************/
Taggd.prototype.iterateTags = function(a, yep) {
var func;
if($.isNumeric(a)) {
func = function(i, e) { return a === i; };
} else if(typeof a === 'string') {
func = function(i, e) { return $(e).is(a); }
} else if($.isArray(a)) {
func = function(i, e) {
var $e = $(e);
var result = false;
$.each(a, function(ai, ae) {
if(
i === ai ||
e === ae ||
$e.is(ae)
) {
result = true;
return false;
}
});
return result;
}
} else if(typeof a === 'object') {
func = function(i, e) {
var $e = $(e);
return $e.is(a);
};
} else if($.isFunction(a)) {
func = a;
} else if(!a) {
func = function() { return true; }
} else return this;
this.wrapper.find('.taggd-item').each(function(i, e) {
if(typeof yep === 'function' && func.call(this, i, e)) {
yep.call(this, i, e);
}
});
return this;
};
Taggd.prototype.show = function(a) {
return this.iterateTags(a, methods.show);
};
Taggd.prototype.hide = function(a) {
return this.iterateTags(a, methods.hide);
};
Taggd.prototype.toggle = function(a) {
return this.iterateTags(a, methods.toggle);
};
/****************************************************************
* CLEANING UP
****************************************************************/
Taggd.prototype.dispose = function() {
this.clear();
this.element.unwrap(this.wrapper);
};
/****************************************************************
* SEMI-PRIVATE
****************************************************************/
Taggd.prototype.addDOM = function() {
var _this = this;
this.clear();
this.element.css({ height: 'auto', width: 'auto' });
var height = this.element.height();
var width = this.element.width();
$.each(this.data, function(i, v) {
var $item = $('<span />');
var $hover;
if(
v.x > 1 && v.x % 1 === 0 &&
v.y > 1 && v.y % 1 === 0
) {
v.x = v.x / width;
v.y = v.y / height;
}
if(typeof v.attributes === 'object') {
$item.attr(v.attributes);
}
$item.attr({
'data-x': v.x,
'data-y': v.y
});
$item.css('position', 'absolute');
$item.addClass('taggd-item');
_this.wrapper.append($item);
if(typeof v.text === 'string' && (v.text.length > 0 || _this.options.edit)) {
$hover = $('<span class="taggd-item-hover" style="position: absolute;" />').html(v.text);
$hover.attr({
'data-x': v.x,
'data-y': v.y
});
_this.wrapper.append($hover);
}
if(typeof _this.options.handlers === 'object') {
$.each(_this.options.handlers, function(event, func) {
var handler;
if(typeof func === 'string' && methods[func]) {
handler = methods[func];
} else if(typeof func === 'function') {
handler = func;
}
$item.on(event, function(e) {
if(!handler) return;
handler.call($item, e, _this.data[i]);
});
});
}
});
this.element.removeAttr('style');
if(this.options.edit) {
this.alterDOM();
}
this.updateDOM();
};
Taggd.prototype.updateDOM = function() {
var _this = this;
this.wrapper.removeAttr('style').css({
height: this.element.height(),
width: this.element.width()
});
this.wrapper.find('span').each(function(i, e) {
var $el = $(e);
var left = $el.attr('data-x') * _this.element.width();
var top = $el.attr('data-y') * _this.element.height();
if($el.hasClass('taggd-item')) {
$el.css({
left: left - $el.outerWidth(true) / 2,
top: top - $el.outerHeight(true) / 2
});
} else if($el.hasClass('taggd-item-hover')) {
if(_this.options.align.x === 'center') {
left -= $el.outerWidth(true) / 2;
} else if(_this.options.align.x === 'right') {
left -= $el.outerWidth(true);
}
if(_this.options.align.y === 'center') {
top -= $el.outerHeight(true) / 2;
} else if(_this.options.align.y === 'bottom') {
top -= $el.outerHeight(true);
}
$el.attr('data-align', $el.outerWidth(true));
$el.css({
left: left + _this.options.offset.left,
top: top + _this.options.offset.top
});
}
});
};
/****************************************************************
* JQUERY LINK
****************************************************************/
$.fn.taggd = function(options, data) {
return new Taggd(this, options, data);
};
})(jQuery);
I thought this would do what i want, since it works with the standard text input box, using .val($e.text()), works fine but as soon as i do the same to the url_title box, for example .val($e.url_title()), i get the error below.
$input = $('<input id="url" type="text" size="16" />')
.val($e.text()),
$url_title = $('<input type="text" id="url_title" class="url_title" />'),
$button_ok = $('<button />')
.html(_this.options.strings.save),
$url_description = $('<input type="text" class="url_description" id="url_description" />'),
$url_image = $('<input type="text" class="url_img" id="url_img" />'),
$url_preview = $('<div id="content"></div>'),
$button_delete = $('<button />')
.html(_this.options.strings.delete);
But if for example i change the $url_title to
$url_title = $('<input type="text" id="url_title" class="url_title" />').val($e.url_title()),
I get a error back in the console:
Uncaught TypeError: undefined is not a function
This is the init code on the main page:
$(document).ready(function() {
var options = {
edit: true,
align: {
y: 'top'
},
offset: {
top: 15
},
handlers: {
//mouseenter: 'show',
click: 'toggle'
}
};
/*var data = [
{ x: 0.22870478413068845, y: 0.41821946169772256, text: 'Eye' },
{ x: 0.51, y: 0.5, text: 'Bird' },
{ x: 0.40, y: 0.3, text: 'Water, obviously' }
];*/
var data = [];
var taggd = $('.taggd').taggd( options, data );
taggd.on('change', function() {
console.log(taggd.data);
});
});
In the console log it logs the values fine:
[Object]0: Objecttext: "http://stackoverflow.com"url: "http://stackoverflow.com"url_description: "Q&A for professional and enthusiast programmers"url_image: "http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon#2.png?v=ea71a5211a91&a"url_title: "Stack Overflow"x: 0.41141586360266863y: 0.19444444444444445
I hope someone can shine a light on it and point me in the right direction of what i'm doing wrong.
To simplify it, i want to be able to have a title input and a description input for my tags, how would i achieve this?
Thank you.

I suspect $e.url_title() is causing the error, as far as I know, url_title() isn't a method you can call on jQuery instances.
Presumably you meant to access a variable instead.
I couldn’t find an issue in your scripts, other than the undefined function call, so I basically rewrote the whole thing myself, which seems to work: http://jsbin.com/nexujuhefo/2/edit?js,console,output
I think the problem is Taggd weird logic ;)
Fields now remember data: http://jsbin.com/hosipiyuqa/1/edit?js,console,output