Develop Reference

Adding new thumbnails to dropzone.js after initialization

I have a web page that uses dropzone.js. My web page lets people choose their profile picture. If they have already set it, I want to show their picture, but allow them to change it. In an attempt to do this, I'm using the following dropzone code:
var currentPicture = null;
function removeCurrentPicture() {
try {
if (dropzone) {
for (var i = 1; i < dropzone.files.length; i++) {
dropzone.removeFile(dropzone.files[i-1]);
}
}
} catch (ex1) {
console.log(ex1);
}
return false;
}
function setThumbnailWidths() {
var thumbnails = $("*[data-dz-thumbnail]");
for (var i=0; i<thumbnails.length; i++) {
$(thumbnails[i]).css('max-width', '150px');
}
}
var pictureDropZone = new Dropzone("#myPicture", {
url: "/profile/picture/",
maxFilesize: 5,
clickable: true,
uploadMultiple: false,
previewTemplate: previewTemplate,
previewsContainer: "#previews",
init: function () {
dropzone = this;
// add picture if it exists
var pictureUrl = 'DYNAMICALLY POPULATED FROM SERVER';
if (pictureUrl) {
var pictureSize = // POPULATED FROM SERVER;
var pictureFileName = // POPULATED FROM SERVER;
var pictureMimeType = 'img/png';
var currentPicture = { name: pictureFileName, size: pictureSize, type: pictureMimeType };
this.addFile.call(this, currentPicture);
this.options.thumbnail.call(this, currentPicture, pictureUrl);
this.files.push(currentPicture);
$('#picturePrompt').hide();
}
this.on('addedfile', function (file) {
if (dropzone.files.length > 1) {
removeCurrentPicture();
}
$('#picturePrompt').hide();
$("#errorMessage").hide();
});
this.on('removedfile', function (file) {
$('#picturePrompt').show();
});
this.on('success', function (file, res) {
setThumbnailWidths();
});
this.on('error', function (e, m) {
$("#previews").hide();
$("#errorMessage").html('An unknown error has happened. Please try again.');
$("#errorMessage").show();
});
}
});
The HTML that complements this dropzone looks like this:
<div id="myPicture" style="padding:40px; cursor:pointer;">
<div id="picturePrompt">Drop a picture here or just click</div>
<div id="errorMessage" class="error" style="display:none; margin-bottom:8px;"></div>
<div class="files" id="previews">
<div id="template" class="file-row">
<ul class="list-inline">
<li>
<span class="preview" style="width:350px;"><img data-dz-thumbnail /></span>
<p class="size" data-dz-size></p>
</li>
<li style="vertical-align:top;">
<button data-dz-remove class="btn btn-danger" style="margin-top:8px;">
<i class="glyphicon glyphicon-trash pull-left"></i>
<span class="pull-left">Delete</span>
</button>
</li>
</ul>
</div>
</div>
</div>
This code works unless a picture is loaded from the server when the page loads. In the event that pictureUrl is set, the picture renders fine. I can "delete" it. However, if I try to add a new picture, the new thumbnail does not appear. The size of the file does. But the thumbnail does not show.
What am I doing wrong?

My simple slider is repeat

First sorry for my english :(
I created simple slider, it's working,
But when double my slider is repeat,
See example for double slider
Click on next button or prev button, it's working, but all slider change images,
I used HTML ID,
See my html code:
<div class="slider_wrap">
<div class="slider_content">
<ul id="the_slider" class="slider_images">
<li>
<img src="slider_images/i5.jpg">
<p class="caption">Slider</p>
</li>
<li>
<img src="slider_images/i2.jpg">
<p class="caption">Slider is free</p>
</li>
<li>
<img src="slider_images/i3.jpg">
<p class="caption">Slider is free</p>
</li>
<li>
<img src="slider_images/i4.jpg">
<p class="caption">Slider is free</p>
</li>
</ul>
<i class="slider_next"></i>
<i class="slider_prev"></i>
</div>
</div>
See my jquery code:
jQuery(window).load(function() {
jQuery('#the_slider li:first-child').addClass('slider_moving');
jQuery('#the_slider li').addClass('animated');
var $first = $('#the_slider li:first-child'),
$last = $('#the_slider li:last-child');
$(".slider_next").click(function () {
var $next,
$slider_moving = $(".slider_moving");
$next = $slider_moving.next('li').length ? $slider_moving.next('li') : $first;
$slider_moving.removeClass("fadeInLeft fadeInRight");
$slider_moving.removeClass("slider_moving").fadeOut(500);
$next.addClass('fadeInRight');
$next.addClass('slider_moving').fadeIn(500);
});
$(".slider_prev").click(function () {
var $prev,
$slider_moving = $(".slider_moving");
$prev = $slider_moving.prev('li').length ? $slider_moving.prev('li') : $last;
$slider_moving.removeClass("fadeInRight fadeInLeft");
$slider_moving.removeClass("slider_moving").fadeOut(500);
$prev.addClass('fadeInLeft');
$prev.addClass('slider_moving').fadeIn(500);
});
});

The problem is that on the prev and next click events you are using classes to select the slider, and thus, you are selecting both sliders.
What you'd like to do is traverse the dom to find the parent slider element, that way you will be working only with a particular slider.
$nextButton = $(this);
$sliderContainer = $nextButton.closest('.perso_slider_content');
EDIT: As per your request here is your js code edited:
jQuery(window).load(function() {
jQuery('#the_slider li:first-child').addClass('perso_slider_moving');
jQuery('#the_slider li').addClass('animated');
$(".perso_slider_next").click(function () {
var $nextButton = $(this);
var $sliderContainer = $nextButton.closest('.perso_slider_content');
var $first = $sliderContainer.find('li:first-child');
var $next,
$perso_slider_moving = $sliderContainer.find('.perso_slider_moving');
$next = $perso_slider_moving.next('li').length ? $perso_slider_moving.next('li') : $first;
$perso_slider_moving.removeClass("fadeInLeft fadeInRight");
$perso_slider_moving.removeClass("perso_slider_moving").fadeOut(500);
$next.addClass('fadeInRight');
$next.addClass('perso_slider_moving').fadeIn(500);
});
$(".perso_slider_prev").click(function () {
var $prevButton = $(this);
var $sliderContainer = $prevButton.closest('.perso_slider_content');
var $last = $sliderContainer.find('li:last-child');
var $prev,
$perso_slider_moving = $sliderContainer.find(".perso_slider_moving");
$prev = $perso_slider_moving.prev('li').length ? $perso_slider_moving.prev('li') : $last;
$perso_slider_moving.removeClass("fadeInRight fadeInLeft");
$perso_slider_moving.removeClass("perso_slider_moving").fadeOut(500);
$prev.addClass('fadeInLeft');
$prev.addClass('perso_slider_moving').fadeIn(500);
});
});

KNOCKOUT JS observableArray duplicate

My html page is :
<div data-role="content">
<div id="menu">
<ul id="menu" data-role="listview" class="ui-listview "
data-bind="foreach: menu">
<li>
<a data-bind="text:name, attr: {href: urlmenu}"></a>
<a href="#" data-bind="{ click: $parent.remove }"
data-role="button" data-icon="delete"></a>
</li>
</ul>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul id="footer">
<li>Home</li>
<li>Asignaturas</li>
<li>Mensajes</li>
</ul>
</div>
</div>
And my JS code is :
$( document ).on( "pagebeforechange" , function(e, data) {
var toPage = data.toPage[0].id;
if( toPage == "home"){
ko.cleanNode(document.getElementById('menu'));
menu();
}
});
function menuViewModel(){
var self = this;
self.menu = ko.observableArray([]);
self.menu.removeAll();
self.menu = ko.observableArray([
new EditMenuViewModel("Perfil"),
new EditMenuViewModel("Asignaturas")
]);
}
function EditMenuViewModel(name) {
this.name = ko.observable(name);
this.urlmenu = ko.observable("#"+name);
};
function menu(){
var menuviewModel = new menuViewModel();
ko.applyBindings(menuviewModel, document.getElementById('menu'));
}
When I load my page for the first time everything works fine, but when I click on link footer home, the array content is duplicated.
Example is here:
Any idea?
Thanks

You have two DOM elements with id=menu, a div and a ul.
<div id="menu"> <!-- <-- change this id for example -->
<ul id="menu" data-role="listview" class="ui-listview "
data-bind="foreach: menu">
...
</ul>
</div>
Ids should be unique, you need to change the id on one of your elements, hopefully this will also solve your problem.
Update
As you can read in this thread, ko.cleanNode will not remove items created using foreach binding.
You need to change your approach.
Here is a jsFiddle that reproduces your problem.
What you can do is stop cleaning+applying bindings, and update your observableArray instead:
$( document ).on( "pagebeforechange" , function(e, data) {
var toPage = data.toPage[0].id;
if( toPage == "home"){
menuviewModel.menu.removeAll(); //clear menu
//add whatever menu item you need
menuviewModel.menu.push(new EditMenuViewModel("New Menu1 " + (new Date()).getTime()));
menuviewModel.menu.push(new EditMenuViewModel("New Menu2 " + (new Date()).getTime()));
}
});
function menuViewModel(){
var self = this;
self.menu = ko.observableArray([]);
self.menu.removeAll();
self.menu = ko.observableArray([
new EditMenuViewModel("Perfil"),
new EditMenuViewModel("Asignaturas")
]);
}
function EditMenuViewModel(name) {
this.name = ko.observable(name);
this.urlmenu = ko.observable("#"+name);
};
//bind only once
var menuviewModel = new menuViewModel();
ko.applyBindings(menuviewModel, document.getElementById('menu'));
Here is an example

This is old thread, but I've found a (ugly) way to overcome it:
before the cleaning, I'm caching the observable array values and set it with only 1 value. After the rebind, I'm restoring the cached values. Something like this:
var self = this;
self.myArray = ko.observableArray(['val1', 'val2']);
var tempArray = [];
self.BeforeCleaning = function () {
tempArray = self.myArray()
self.myArray(['temp value']);
};
self.AfterRebinding = function () {
self.myArray(tempArray);
};
horrible, but works for me.

jquery trouble - onclick for gallery

I am trying to use image gallery for my website that I found here. I want to add one more functionality to this gallery.. I want a large image to be linked and when clicked on it to open in new tab url that is defined in code.
I have included the full code here:
<script type="text/javascript">
$(document).ready(function()
{
/*Your ShineTime Welcome Image*/
var default_image = 'images/large/default.jpg';
var default_caption = 'Welcome to my portfolio';
/*Load The Default Image*/
loadPhoto(default_image, default_caption);
function loadPhoto($url, $caption)
{
/*Image pre-loader*/
showPreloader();
var img = new Image();
jQuery(img).load( function()
{
jQuery(img).hide();
hidePreloader();
}).attr({ "src": $url });
$('#largephoto').css('background-image','url("' + $url + '")');
$('#largephoto').data('caption', $caption);
}
/* When a thumbnail is clicked*/
$('.thumb_container').click(function()
{
var handler = $(this).find('.large_image');
var newsrc = handler.attr('src');
var newcaption = handler.attr('rel');
loadPhoto(newsrc, newcaption);
});
/*When the main photo is hovered over*/
$('#largephoto').hover(function()
{
var currentCaption = ($(this).data('caption'));
var largeCaption = $(this).find('#largecaption');
largeCaption.stop();
largeCaption.css('opacity','0.9');
largeCaption.find('.captionContent').html(currentCaption);
largeCaption.fadeIn()
largeCaption.find('.captionShine').stop();
largeCaption.find('.captionShine').css("background-position","-550px 0");
largeCaption.find('.captionShine').animate({backgroundPosition: '550px 0'},700);
Cufon.replace('.captionContent');
},
function()
{
var largeCaption = $(this).find('#largecaption');
largeCaption.find('.captionContent').html('');
largeCaption.fadeOut();
});
/* When a thumbnail is hovered over*/
$('.thumb_container').hover(function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:-7, marginTop:-7},200);
$(this).find(".large_thumb_shine").stop();
$(this).find(".large_thumb_shine").css("background-position","-99px 0");
$(this).find(".large_thumb_shine").animate({backgroundPosition: '99px 0'},700);
}, function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:0, marginTop:0},200);
});
function showPreloader()
{
$('#loader').css('background-image','url("images/interface/loader.gif")');
}
function hidePreloader()
{
$('#loader').css('background-image','url("")');
}
});
</script>
And I have 15 thumbnails/photos like this:
<div class="thumbnails">
<br><br><br>
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample1.jpg" class="large_thumb_image" alt="thumb">
<img alt="" src="images/large/sample1.jpg" class="large_image" rel="Image Sample">
<div class="large_thumb_border"> </div>
<div class="large_thumb_shine"> </div>
</div>
</div>
</div>
<!-- end entry-->
</div>
Any help? Thanks.

This should work, all you have to do is add data-large attributes to each image and on hover it displays a tooltip with the large image inside.
http://jsfiddle.net/DSjLk/

How can I go to the Next and Previous value in a json array?

I've been beating my head against the wall with this one for days now. I have a list of items that when clicked, will move that indivual item to a div. Based on which item is clicked, I'm trying to go the the Next and Previous items in my list (json).
I'm kind of new to this and I just can't quite get this to work no matter what I try.
Here is the jsfiddle code. Thanks!
HTML:
<audio id="audio-player" name="audio-player" src="" ></audio>
<a id="next-bt" href="#">
<div class="player-musicnav-ff-column3">
<ul class="musicnav-ff">
<li class="ff">NEXT</li>
</ul>
</div>
</a>
<a id="prev-bt" href="#">
<div class="player-musicnav-ff-column3">
<ul class="musicnav-ff">
<li class="ff">PREV</li>
</ul>
</div>
</a>
<br/>
<br/>
<div id="player-digital-title">
</div>
<br/>
<br/>
<a href="#" id='player-handwriting-title'></a>​​
Javascript an Jquery:
$(document).ready(function(){
var treeObj = {"root":[{"id":"1","trackName":"Whippin Post"},{"id":"2","trackName":"Sweet Caroline"},{"id":"3","trackName":"Tears in Heaven"},{"id":"4","trackName":"Ain't She Sweet"},{"id":"5","trackName":"Octopus' Garden"},{"id":"6","trackName":"Teen Spirit"},{"id":"7","trackName":"Knockin on Heaven's Door"}]};
var $ul = $("<ul></ul>");
$.each(treeObj.root,function(i,v) {
$ul.append(
$("<li></li>").append( $("<a></a>")
.attr({"href":v.id,"data-file":v.trackFile})
.html(v.trackName)
)
);
});
$("#player-handwriting-title").empty().append($ul);
$("#player-handwriting-title a").click(function() {
var name = $(this).html(),
filename = $(this).attr("data-file");
filename2 = "upload-form/upload/" + filename;
$('#player-digital-title').html($(this).html());
document.getElementById('audio-player').src = filename2;
$("#audio-player")[0].play();
return false;
});
var myID = 0;
$("#next-bt").click(function() {
document.getElementById('player-digital-title').innerHTML = treeObj.root[++myID].trackName ;
});
var mylease = 6;
$("#prev-bt").click(function() {
document.getElementById('player-digital-title').innerHTML = treeObj.root[--mylease].trackName ;
});
});
​

Added a fiddle
http://jsfiddle.net/kabichill/JzL97/
check out..Hope its wat u expected...

try something like
var myID = 0;
$("#next-bt").click(function() {
myID++;
if(myID > treeObj.root.length) { myID = 0; }
document.getElementById('player-digital-title').innerHTML = treeObj.root[++myID].trackName ;
});
var mylease = 6;
$("#prev-bt").click(function() {
myID--;
if(myID < 0) { myID = treeObj.root.length; }
document.getElementById('player-digital-title').innerHTML = treeObj.root[--mylease].trackName ;
});