Image input is allowing to upload images without displaying the name of the file. I want to be able to see the file name when I upload an image; how can I make this possible? Could it be something to do with my script?
function readURL(input) {
if (input.files && input.files[0]) {
console.log("Reading File.");
var reader = new FileReader();
reader.addEventListener("load", function(e) {
if (jQuery("#preview-gallery li").length == 3) {
input.value = "";
return false;
}
var $imgP = jQuery("<img>", {
class: "uploaded-image icon",
src: reader.result
});
var $item = jQuery("<li>", {
class: "ui-widget-content ui-corner-all hidden"
});
$item.append($imgP).append("<a href='#' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>");
$item.appendTo(jQuery("#preview-gallery")).show("slow");
makeDrag($item);
updatePreviewCount();
});
if (input.files[0]) {
reader.readAsDataURL(input.files[0]);
} else {
console.log(" Reader: File Not found.");
}
input.value = "";
}
}
function renderContent() {
html2canvas(jQuery("#firstshirt"), {
allowTaint: true,
logging: true
}).then(function(canvas) {
jQuery("#previewImage").append(canvas);
jQuery("#download").css("display", "inline");
jQuery("#download").attr("href", jQuery("#previewImage")[0].children[0].toDataURL());
});
}
function makeDrag(o) {
o.draggable({
helper: "original",
revert: "invalid",
zIndex: 999
});
}
function makeResize(o) {
o.resizable();
}
function addImage($item, $pos) {
console.log(" Fade Item Out");
$item.fadeOut();
var $img = $item.find("img");
$img.css("width", "80px").css("height", "80px");
$item.remove();
updatePreviewCount();
console.log(" Making new Wrap");
var $drop = jQuery("<div>", {
class: "dragbal deleteme",
style: "position: absolute; top: 100px; left: 100px;"
});
$drop.append($img);
console.log($drop);
console.log(" Appending to #boxes");
$drop.appendTo(jQuery("#boxes")).fadeIn();
$drop.draggable({
containment: "#boxes"
});
makeResize($drop.find("img"));
}
function updatePreviewCount() {
var cnt = jQuery("#preview-gallery li").length;
jQuery(".upPreview span").html(cnt + "/3");
}
jQuery(download).ready(function() {
// Setup
jQuery(".file-upload-wrapper").hide();
jQuery(".out-put-img").hide();
jQuery('.smallimages').hide();
makeDrag(jQuery("[id$='-gallery'] ul li"));
jQuery("#boxes").droppable({
accept: ".gallery > li",
drop: function(e, ui) {
console.log("Drop Pos:", ui.offset);
addImage(ui.helper, ui.position);
}
});
// Events
jQuery("#btn-Preview-Image").click(function(e) {
e.preventDefault();
renderContent();
jQuery("#download").removeClass("disabled");
});
jQuery("#download").click(function(e) {
e.preventDefault();
return jQuery(this).hasClass("disabled");
});
jQuery("#imajes45").change(function() {
if (jQuery('#imajes45').val() == "new-upload") {
jQuery(".file-upload-wrapper").show();
jQuery(".file-select").hide();
} else {
jQuery(".file-upload-wrapper").hide();
jQuery(".file-select").show();
}
});
jQuery(".file-select").change(function() {
jQuery(".upPreview").hide();
jQuery("#" + jQuery(this).val() + "-gallery").show();
})
jQuery(".upload-img").change(function() {
readURL(this);
});
});
var myform = document.getElementById('myform');
if (myform != undefined) {
myform.onsubmit = function(e) { /* do some validation on event here */ };
}
$("#wrapper").hover(function() {
$("#boxes").css("border-color", "red");
},
function() {
$("#boxes").css("border-color", "transparent");
});
$(document).ready(function() {
$(".container").on("dblclick", ".deleteme", function() {
console.log('clicked delete')
$(this).remove();
});
<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> <script src="https://files.codepedia.info/uploads/iScripts/html2canvas.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <link href='https://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
<select id="imajes45">
<option value="">Choose upload</option>
<option value="new-upload">Upload Images</option>
</select>
<div class="file-upload-wrapper" id="draggableHelper" style="display: none;">
<div>
<input type="file" class="upload-img" name="file1" id="file1" onchange="readURL(this);" /><span id='contactus_file1_errorloc' class='error'></span>
</div>
<div>
<input type="file" class="upload-img2" name="file2" id="file2" onchange="readURL(this);" /><span id='contactus_file2_errorloc' class='error'></span>
</div>
<div>
<input type="file" class="upload-img3" name="file4" id="file4" onchange="readURL(this);" /><span id='contactus_file4_errorloc' class='error'></span>
</div>
<div id="upload-preview" class="small upPreview">
<span>0/3</span>
<ul id="preview-gallery" class="gallery ui-helper-reset ui-helper-clearfix">
</ul>
</div>
</div>
here is the prevent default
jQuery("#btn-Preview-Image").click(function(e) {
e.preventDefault();
renderContent();
jQuery("#download").removeClass("disabled");
});
jQuery("#download").click(function(e) {
e.preventDefault();
return jQuery(this).hasClass("disabled");
});
Related
i have a small problem - i can add a file on click. only the dropzone dont work.
If I drag and drop the file in the browser, will be displayed and not uploaded.
$('#trigger-attachment').click(function(event) {
if ($('#attachment-1').val() == '') {
console.log('trigger 1')
$('#attachment-1').click();
$('.not-needed-if-pdf-provided').remove();
} else if ($('#attachment-2').val() == '') {
console.log('trigger 2')
$('#attachment-2').click();
$('.not-needed-if-pdf-provided').remove();
console.log('trigger 2')
} else if ($('#attachment-3').val() == '') {
console.log('trigger 3')
$('#attachment-3').click();
$('.not-needed-if-pdf-provided').remove();
} else {
alert('Maximal 3 Dokumente auswählbar. Entfernen Sie zunächst eines um ein anderes auszuwählen. Tipp: Fügen Sie mehrere Dateien zu einem PDF zusammen.');
}
});
$('#trigger-attachment').on('dragenter', function() { if ($('input.attachment.active').length > 0) $(this).addClass('dragging'); });
$('#trigger-attachment').on('drop', function() { $(this).removeClass('dragging'); });
$('#trigger-attachment').on('dragleave', function() { $(this).removeClass('dragging'); });
$('#trigger-attachment').on('dragexit', function() { $(this).removeClass('dragging'); });
$('#trigger-attachment').on('dragend', function() { $(this).removeClass('dragging'); });
$('input.attachment').click(function(event) {
event.stopImmediatePropagation();
console.log('click ' + $(this).attr('id'));
});
$('input.attachment').change(function() {
console.log('change');
$(this).removeClass('active');
var number = $(this).data('no');
var displayElement = $('#display-attachment-' + number);
if ($(this).val() == "") {
$(this).addClass('active');
displayElement.empty();
} else {
var file = this.files[0];
displayElement.html('<div onclick="$(\'#attachment-'+number+'\').val(\'\').addClass(\'active\');$(\'#display-attachment-'+number+'\').empty();">× '+file.name+'</div>');
}
});
#################### Here is the HTML INPUT ->
<div class="col-sm-12 col-md-12 col-lg-8 offset-lg-2">
<div id="trigger-attachment" class="text-center">
<img src="https://d17blcsvifkhsu.cloudfront.net/sites/5b056e1c85cde904fb840d8f/theme/images/share.svg?1540384342" style="max-width:40px;">
<p class="green-label">
(optional)<br>
</p>
<input class="attachment active" id="attachment-3" name="content[attachment_3]" data-no="3" type="file">
<input class="attachment active" id="attachment-2" name="content[attachment_2]" data-no="2" type="file">
<input class="attachment active" id="attachment-1" name="content[attachment_1]" data-no="1" type="file">
</div>
<div id="display-attachments">
<div id="display-attachment-1" class="display-attachment"></div>
<div id="display-attachment-2" class="display-attachment"></div>
<div id="display-attachment-3" class="display-attachment"></div>
</div>
</div>
##### this class should just hide another one
<div class="row pb-3 not-needed-if-pdf-provided">
I've created a menu with javascript. The user needs to click on the hamburger menu icon to open it. Once open, there's an accordion menu with various options. I'm using the jscrollpane jquery plugin for the scrollbar styling, because I want to be able to control the style in MS Edge.
The problem I'm having is that when I click on an accordion item with many list items (Class A or Class B in my menu), as you scroll down the menu always bounces back up to the top. It doesn't just rest at the bottom of the list of items. I believe this is being introduced by the jscrollpane plugin, but I'm not sure. I've spent hours making changes, and just can't fix it. Any help greatly appreciated.
Here is a plunker with all of the code, where you can see how it's functioning:
https://plnkr.co/edit/uPh87hA7r3HlsL2DYBAO
Here's the main index file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<link rel="stylesheet" href="css/jquery.jscrollpane.css">
<script src="js/menu.js"></script>
<link media="all" href="css/style.css" rel="stylesheet">
</head>
<body>
<nav id="menu"></nav>
<div id="datas">
<div id="nav" class="open-close">
<div id="navtitle">MENU</div>
<span>menu</span>
<ul class="slide">
<li id="itemdialog" class="nolink">Select item</li>
<div id="accordion">
<h3>Class A</h3>
<div>
<div class="item aush"><div class="itemname">Aush</div><div class="scientificname">Puffinus lherminieri</div></div>
<div class="item blra"><div class="itemname">Blra</div><div class="scientificname">Laterallus jamaicensis</div></div>
<div class="item blsk"><div class="itemname">Blsk</div><div class="scientificname">Rynchops niger</div></div>
<div class="item bwha"><div class="itemname">Bwha</div><div class="scientificname">Buteo platypterus</div></div>
<div class="item cw"><div class="itemname">Cw</div><div class="scientificname">Setophaga cerulea</div></div>
<div class="item osp"><div class="itemname">Osp</div><div class="scientificname">Pandion haliaetus</div></div>
<div class="item redh"><div class="itemname">Redh</div><div class="scientificname">Aythya americana</div></div>
<div class="item whcr"><div class="itemname">Whcr</div><div class="scientificname">Grus americana</div></div>
<div class="item wt"><div class="itemname">Wt</div><div class="scientificname">Hylocichla mustelina</div></div>
</div>
<h3>Class B</h3>
<div>
<div class="item tarpon"><div class="itemname">Tarpon</div><div class="scientificname">Megalops atlanticus</div></div>
<div class="item bm"><div class="itemname">Blm</div><div class="scientificname">Makaira nigricans</div></div>
<div class="item bft"><div class="itemname">Bft</div><div class="scientificname">Thunnus thynnus</div></div>
<div class="item bus"><div class="itemname">Bus</div><div class="scientificname">Carcharhinus leucas</div></div>
<div class="item df"><div class="itemname">Df</div><div class="scientificname">Coryphaena hippurus</div></div>
<div class="item gagg"><div class="itemname">Gagg</div><div class="scientificname">Mycteroperca microlepis</div></div>
<div class="item gulfm"><div class="itemname">Gulfm</div><div class="scientificname">Brevoortia patronus</div></div>
<div class="item gulfs"><div class="itemname">Gulfsn</div><div class="scientificname">Acipenser oxyrinchus</div></div>
<div class="item mutts"><div class="itemname">Mutts</div><div class="scientificname">Lutjanus analis</div></div>
<div class="item sb"><div class="itemname">Sb</div><div class="scientificname">Morone saxatilis</div></div>
<div class="item ws"><div class="itemname">Ws</div><div class="scientificname">Rhincodon typus</div></div>
</div>
<h3>Class C</h3>
<div>
<div class="item sw"><div class="itemname">Sw</div><div class="scientificname">Physeter macrocephalus</div></div>
<div class="item man"><div class="itemname">Man</div><div class="scientificname">Trichechus manatus</div></div>
</div>
<h3>Class D</h3>
<div>
<div class="item gst"><div class="itemname">Gst</div><div class="scientificname">Chelonia mydas</div></div>
<div class="item kemps"><div class="itemname">Kemps</div><div class="scientificname">Lepidochelys kempii</div></div>
<div class="item lbst"><div class="itemname">Lbst</div><div class="scientificname">Dermochelys coriacea</div></div>
<div class="item lst"><div class="itemname">Lst</div><div class="scientificname">Caretta caretta</div></div>
</div>
</div>
<li id="aboutdialog">A Link</li>
<li id="clearall">Another Link</li>
</ul>
</div>
</div>
<script>
$(function(){
$('#nav > ul.slide').jScrollPane();
});
</script>
</body>
</html>
Here's the menu.js file:
// main menu
jQuery(function(){
$('nav ul').addClass('slide js-slide-hidden');
$('li.dropdown a').attr('data-toggle', 'none');
initOpenClose();
});
// open-close init
function initOpenClose() {
jQuery('.open-close').openClose({
activeClass: 'active',
opener: '.opener',
slider: '.slide',
animSpeed: 400,
effect: 'slide'
});
}
/*
* jQuery Open/Close plugin
*/
;(function($) {
function OpenClose(options) {
this.options = $.extend({
addClassBeforeAnimation: true,
hideOnClickOutside: true,
activeClass:'active',
opener:'.opener',
slider:'.slide',
animSpeed: 400,
effect:'fade',
event:'click'
}, options);
this.init();
}
OpenClose.prototype = {
init: function() {
if(this.options.holder) {
this.findElements();
this.attachEvents();
this.makeCallback('onInit');
}
},
findElements: function() {
this.holder = $(this.options.holder);
this.opener = this.holder.find(this.options.opener);
this.slider = this.holder.find(this.options.slider);
},
attachEvents: function() {
// add handler
var self = this;
this.eventHandler = function(e) {
e.preventDefault();
if (self.slider.hasClass(slideHiddenClass)) {
self.showSlide();
} else {
self.hideSlide();
}
};
self.opener.bind(self.options.event, this.eventHandler);
// hover mode handler
if(self.options.event === 'over') {
self.opener.bind('mouseenter', function() {
self.showSlide();
});
self.holder.bind('mouseleave', function() {
self.hideSlide();
});
}
// outside click handler
self.outsideClickHandler = function(e) {
if(self.options.hideOnClickOutside) {
var target = $(e.target);
if (!target.is(self.holder) && !target.closest(self.holder).length) {
self.hideSlide();
}
}
};
// set initial styles
if (this.holder.hasClass(this.options.activeClass)) {
$(document).bind('click touchstart', self.outsideClickHandler);
} else {
this.slider.addClass(slideHiddenClass);
}
},
showSlide: function() {
$('#pane').removeClass('hide');
$('#pane').addClass('show');
var self = this;
if (self.options.addClassBeforeAnimation) {
self.holder.addClass(self.options.activeClass);
}
self.slider.removeClass(slideHiddenClass);
$(document).bind('click touchstart', self.outsideClickHandler);
self.makeCallback('animStart', true);
toggleEffects[self.options.effect].show({
box: self.slider,
speed: self.options.animSpeed,
complete: function() {
if (!self.options.addClassBeforeAnimation) {
self.holder.addClass(self.options.activeClass);
}
self.makeCallback('animEnd', true);
}
});
},
hideSlide: function() {
$('#pane').removeClass('show');
$('#pane').addClass('hide');
var self = this;
if (self.options.addClassBeforeAnimation) {
self.holder.removeClass(self.options.activeClass);
}
$(document).unbind('click touchstart', self.outsideClickHandler);
self.makeCallback('animStart', false);
toggleEffects[self.options.effect].hide({
box: self.slider,
speed: self.options.animSpeed,
complete: function() {
if (!self.options.addClassBeforeAnimation) {
self.holder.removeClass(self.options.activeClass);
}
self.slider.addClass(slideHiddenClass);
self.makeCallback('animEnd', false);
}
});
},
destroy: function() {
this.slider.removeClass(slideHiddenClass).css({display:''});
this.opener.unbind(this.options.event, this.eventHandler);
this.holder.removeClass(this.options.activeClass).removeData('OpenClose');
$(document).unbind('click touchstart', this.outsideClickHandler);
},
makeCallback: function(name) {
if(typeof this.options[name] === 'function') {
var args = Array.prototype.slice.call(arguments);
args.shift();
this.options[name].apply(this, args);
}
}
};
// add stylesheet for slide on DOMReady
var slideHiddenClass = 'js-slide-hidden';
$(function() {
var tabStyleSheet = $('<style type="text/css">')[0];
var tabStyleRule = '.' + slideHiddenClass;
tabStyleRule += '{position:absolute !important;left:-9999px !important;top:-9999px !important;display:block !important}';
if (tabStyleSheet.styleSheet) {
tabStyleSheet.styleSheet.cssText = tabStyleRule;
} else {
tabStyleSheet.appendChild(document.createTextNode(tabStyleRule));
}
$('head').append(tabStyleSheet);
});
// animation effects
var toggleEffects = {
slide: {
show: function(o) {
o.box.stop(true).hide().slideDown(o.speed, o.complete);
},
hide: function(o) {
o.box.stop(true).slideUp(o.speed, o.complete);
}
},
fade: {
show: function(o) {
o.box.stop(true).hide().fadeIn(o.speed, o.complete);
},
hide: function(o) {
o.box.stop(true).fadeOut(o.speed, o.complete);
}
},
none: {
show: function(o) {
o.box.hide().show(0, o.complete);
},
hide: function(o) {
o.box.hide(0, o.complete);
}
}
};
// jQuery plugin interface
$.fn.openClose = function(opt) {
return this.each(function() {
jQuery(this).data('OpenClose', new OpenClose($.extend(opt, {holder: this})));
});
};
//ACCORDION
$( function() {
// allow more than one group to be open at once
$( "#accordion" ).accordion({
collapsible: true,
active: 'none'
});
// JSCROLLPANE
//init menu height
$('#nav > ul.slide').css('height', '270px');
var width = window.innerWidth,
height = window.innerHeight;
var calc = height - 140 + "px";
if (height >= 740){
$('h3#ui-id-1, h3#ui-id-3, h3#ui-id-5, h3#ui-id-7').click( function(){
if($(this).hasClass('ui-accordion-header-active')){
}else{
$('#nav > ul.slide, .jspContainer, .jspTrack, .jspDrag').css('height', '270px');
}
});
}else{
$('h3#ui-id-1, h3#ui-id-3, h3#ui-id-5, h3#ui-id-7').click( function(){
if($(this).hasClass('ui-accordion-header-active')){
$('#nav > ul.slide, .jspContainer, .jspTrack, .jspDrag').css('height', calc);
$('.jspContainer, .jspTrack, .jspDrag').css('overflow-y', 'scroll');
}else{
$('#nav > ul.slide, .jspContainer, .jspTrack, .jspDrag').css('height', '270px');
}
});
};
});
}(jQuery));
This is the jscrollpane plugin: http://jscrollpane.kelvinluck.com/
i would like to know how i can prevent two containers from canceling. the codes are almost the same i just changed a few things it doesn't mater which one i put first but the second one is not working if i switched them around the one that i put first works but not the second one. I'm using toggle to display one at a time. I'm just going to post a small part of my code.
JavaScript for first part
<script>
var z = 1; //value to make div overlappable
$('#addText').click(function (e) {
/** Make div draggable **/
$('<div />', {
class: 'ui-widget-content',
appendTo: '.container',
draggable: {
containment: 'parent',
start: function( event, ui ) {
$(this).css('z-index', ++z);
}
}
});
});
$(document).on("dblclick", '.text', function()
{
$(this).hide(); $(this).closest('.item').find('.edit_text').val($(this).text()).show();
});
$(document).on("click", ".edit_text", function()
{
return false;
});
$(document).on("click", function()
{
var editingText = $('.edit_text:visible');
if (editingText.length)
{
editingText.hide();
editingText.closest('.item').find('.text').text($(editingText).val()).show();
}
});
var count = 1;
var selectedDraggable;
ko.bindingHandlers.draggable={
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).draggable();
$(element).addClass('item' + count);
count++;
$(element).on('click', function () {
selectedDraggable = $(this);
})
}
};
var vm=function(){
var self=this;
self.items=ko.observableArray();
self.textContent = ko.observable('');
self.init=function(){
self.items([]);
}
self.remove=function(item){
console.log(item);
self.items.remove(item);
}
self.addNew = function() {
self.items.push( self.textContent() );
self.textContent('');
}
self.init();
}
ko.applyBindings(new vm());
JavaScript for second part
var z = 1; //value to make div overlappable
$('#addText').click(function (e) {
/** Make div draggable **/
$('<div />', {
class: 'ui-widget-content',
appendTo: '.container4',
draggable: {
containment: 'parent',
start: function( event, ui ) {
$(this).css('z-index', ++z);
}
}
});
});
$(document).on("dblclick", '.text1', function()
{
$(this).hide(); $(this).closest('.item1').find('.edit_text1').val($(this).text()).show();
});
$(document).on("click", ".edit_text1", function()
{
return false;
});
$(document).on("click", function()
{
var editingText = $('.edit_text1:visible');
if (editingText.length)
{
editingText.hide();
editingText.closest('.item1').find('.text1').text($(editingText).val()).show();
}
});
var count = 1;
var selectedDraggable;
ko.bindingHandlers.draggable={
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).draggable();
$(element).addClass('item1' + count);
count++;
$(element).on('click', function () {
selectedDraggable = $(this);
})
}
};
var vm=function(){
var self=this;
self.items1=ko.observableArray();
self.textContent1 = ko.observable('');
self.init=function(){
self.items1([]);
}
self.remove=function(item){
console.log(item);
self.items1.remove(item);
}
self.addNew1 = function() {
self.items1.push( self.textContent1() );
self.textContent1('');
}
self.init();
}
ko.applyBindings(new vm());
toggle
$("#show_first").click(function(){
$(".firstdiv").toggle();
$(".seconddiv").hide();
});
$("#show_second").click(function(){
$(".secoddiv").toggle();
$(".firstdiv").hide();
});
HTML for toggle
<button type="button" id="show_first">Display Front</button>
<button type="button" id="show_second">Display Back</button>
HTML for container and input text (first)
<div class="firstdiv"><center>Front</center>
<div class="container1" style=" float: left;" >
<p align="center"><textarea data-bind="value: textContent" Placeholder="Type text to append" rows="4" cols="21"></textarea>
<button type="button" data-bind="click: addNew">Create</button></p>
<div id="box" class="container" style="float:left;">
<div data-bind="foreach:items" class="fix_backround">
<div class="item" data-bind="draggable:true,droppable:true">
<center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center></div></div></div></div></div>
HTML for container and input text (second)
<div class="seconddiv"><center>second</center>
<div class="container3" style=" float: left;" >
<p align="center"><textarea data-bind="value: textContent1" Placeholder="Type text to append" rows="4" cols="21"></textarea>
<button type="button" data-bind="click: addNew1">Create</button></p></div>
<div id="box1" class="container4" style="float:left;">
<div data-bind="foreach:items1" class="fix_backround1">
<div class="item1" data-bind="draggable:true,droppable:true">
<center><span class="text1" data-bind="text:$data"></span><input class="edit_text1"/></center></div></div></div></div></div>
Script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<link rel="stylesheet"href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
You are including jQuery, Knockout, and jQuery-UI each twice. That's probably not the problem, but it's not good.
You're using jQuery to control which block displays, and that's a Knockout no-no. It is Knockout's job to manipulate the DOM. Have a look at Knockout templates, or the if binding for ways of controlling what displays.
It looks like you have a typo in your toggle js for the seconddiv class. You're missing an 'n' in your jquery call for it: secoddiv. If this code is straight from the source that may be the problem.
The first button onclick works, but when the onclick is set to stopChrono() instead of chrono(), the stopChrono() doesn't work. This only happens in Chrome, because in Mozilla and Edge, works perfectly.
This is the code of the web:
https://jsbin.com/mononohute/edit?html,js,output
P.S: This post isn't the same as the other "Onclick doesn't work in Chrome" because the circunstances are totally diferent.
I restructured the click event handler.
$('#start').on('click', function(e) {
$(this).attr('value', function(_, text) {
if (text === 'Stop!') {
$(this).attr('class', 'w3-btn w3-green');
stopChrono();
return 'Start!';
} else {
$(this).attr('class', 'w3-btn w3-red');
chrono();
return 'Stop!';
}
});
});
While the original was this:
$('#start').on('click', function(e) {
$(this).attr('value', function(_, text) {
$(this).attr("class", "w3-btn w3-red")
return text === 'Stop!' ? 'Start!' : 'Stop!';
})
if ($(this).attr('onclick') == 'chrono()') {
$(this).attr('onclick', 'stopChrono()')
} else {
$(this).attr('onclick', 'chrono()')
$(this).attr('class', 'w3-btn w3-green')
}
});
It works now. I removed the html onclick handler because else chrono() fired twice.
var start = document.getElementById('start'),
reset = document.getElementById('reset'),
counter = document.getElementById('counter'),
sCounter = 0,
mCounter = 0,
hCounter = 0,
displayChrono = function() {
if (sCounter < 10) {
sCounter = "0" + sCounter;
}
if (mCounter < 10) {
mCounter = "0" + mCounter;
}
if (hCounter < 10) {
hCounter = "0" + hCounter;
}
counter.value = hCounter + ":" + mCounter + ":" + sCounter;
},
chronometer,
openchrono = document.getElementById('openchrono'),
chronowinin = document.getElementById('chronowinin');
function chrono() {
chronometer = setInterval(function() {
mCounter = +mCounter;
hCounter = +hCounter;
sCounter = +sCounter;
sCounter++;
if (sCounter == 60) {
mCounter++;
sCounter = 0;
}
displayChrono();
}, 1000);
}
function resetChrono() {
sCounter = 0;
mCounter = 0;
hCounter = 0;
displayChrono();
}
function stopChrono() {
clearInterval(chronometer);
}
$('#openchrono').click(function() {
if ($(this).attr('value') == '+') {
$(this).attr('value', '-');
$('#chronowinin').slideDown();
} else {
$(this).attr('value', '+');
$('#chronowinin').slideUp();
}
});
$('#start').on('click', function(e) {
$(this).attr('value', function(_, text) {
if (text === 'Stop!') {
$(this).attr('class', 'w3-btn w3-green');
stopChrono();
return 'Start!';
} else {
$(this).attr("class", "w3-btn w3-red");
chrono();
return 'Stop!';
}
});
});
//
// $('#start').click(function() {
// if ($(this).attr('value') == 'Start!') {
// $(this).attr('value', 'Stop!');
// $(this).attr('class', 'w3-btn w3-red')
// $('#start').click(stopChrono());
// }});
//else {
// $(this).attr('value', 'Start!');
// $(this).attr('class', 'w3-btn w3-green');
// $('#start').click(stopChrono()
// // function() {
// // function stopChrono() {
// // clearInterval(chronometer);
// // }
// //}
// );
// }});
//
//
// openchrono.addEventListener("click", function() {
// chronowinin.className = "w3-container w3-row";
// openchrono.innerHTML = "-";
// openchrono.id = "closechrono"
//
// closechrono.addEventListener("click", function() {
// var closechrono = document.getElementById('closechrono');
// chronowinin.className = "w3-container w3-row hidden";
// openchrono.innerHTML = "+";
// closechrono.id = "openchrono"
// });
// });
// )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Everything - everything you'll want is here.</title>
</head>
<body>
<div class="w3-row w3-container">
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
<div class="w3-col m6 w3-center w3-text-white w3-xxlarge">
<p>
<i>Everything you want is here.</i>
</p>
</div>
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
</div>
<div id="chronowin" class="w3-container w3-row">
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
<div class="w3-col m6 w3-center w3-xlarge w3-white w3-text-red showhover">
<p>
Chronometer
<input type="button" value="+" id="openchrono" class="w3-btn-floating w3-red" style="right:5%; float:right; border:none"></input>
</p>
</div>
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
</div>
<div id="chronowinin" class="w3-container w3-row" style="display: none">
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
<div class="w3-col s 12 m6 w3-center w3-white w3-text-grey">
<p></p>
<input id="counter" type="text" name="name" value="00:00:00" readonly="readonly" class="w3-text-grey w3-center">
<br>
<p></p>
<input id="start" type="button" name="name" value="Start!" class="w3-btn w3-green">
<!-- <input type="button" name="name" value="Stop!" class="w3-btn w3-red" onclick="stopChrono()"> -->
<input id="reset" type="button" name="name" value="Reset!" class="w3-btn w3-blue" onclick="resetChrono()">
<p></p>
</div>
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
</div>
<script src="js/jquery.js" charset="utf-8"></script>
<script src="js/chronometer.js" charset="utf-8"></script>
</body>
</html>
jQuery conveniently stores event listeners, so if you define them in separate functions, you can easily remove them:
function stopChrono() {
clearInterval(chronometer);
$(this).attr('class', 'w3-btn w3-green')
$('#start').off('click', stopChrono)
$('#start').on('click', startChrono)
}
function startChrono(e) {
$(this).attr('value', function (_, text) {
$(this).attr("class", "w3-btn w3-red")
return text === 'Stop!' ? 'Start!' : 'Stop!';
})
$('#start').off('click', startChrono)
$('#start').on('click', stopChrono)
}
$('#start').on('click', startCrono);
Once the chrono is started, I removed the 'click' event listener because the next click should not start the chrono. I also added the stopChrono 'click' event listener because it should stop the chrono.
The reverse is true for stopChrono(): the 'click' listener is disconnected from stopChrono, and reconnected to startChrono.
Now you should be able to go back and forth.
i want fileuploader to call another event/function on fileuploader file selection and remove rewriting codes for each uploader
css codes
#panel,#flip,#panel1,#panel2
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
#panel1
{
padding:50px;
display:none;
}
#panel2
{
padding:50px;
display:none;
}
html codes
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style> <html xmlns="http://www.w3.org/1999/xhtml">
<form id="form1" runat="server" >
<div id="flip">
<input id="fileupload" type="file" />
</div>
<div id="panel">
<input id="fileupload1" type="file" />
</div>
<div id="panel1">
<input id="fileupload2" type="file" />
</div>
<div id="panel2">
<input id="fileupload3" type="file" />
</div>**
jquery codes
codes for fileuploader file selection event where i am selecting file i want next file uploader to appear
<script language="javascript" type="text/javascript">
$(function () {
$("#fileupload").change(function () {
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(this).val().toLowerCase())) {
if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
$("#panel").show();
// $("#dvPreview")
[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
}
else {
if (typeof (FileReader) != "undefined") {
$("#panel").show();
var reader = new FileReader();
reader.onload = function (e) {
}
} else {
alert("This browser does not support FileReader.");
}
}
} else {
alert("Please upload a valid image file.");
}
});
});
</script>
<script language="javascript" type="text/javascript">
$(function () {
$("#fileupload1").change(function () {
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(this).val().toLowerCase())) {
if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
$("#panel1").show();
// $("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
}
else {
if (typeof (FileReader) != "undefined") {
$("#panel1").show();
var reader = new FileReader();
reader.onload = function (e) {
}
} else {
alert("This browser does not support FileReader.");
}
}
} else {
alert("Please upload a valid image file.");
}
});
});
</script>
<script language="javascript" type="text/javascript">
$(function () {
$("#fileupload2").change(function () {
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(this).val().toLowerCase())) {
if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
$("#panel2").show();
// $("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
}
else {
if (typeof (FileReader) != "undefined") {
$("#panel2").show();
var reader = new FileReader();
reader.onload = function (e) {
}
} else {
alert("This browser does not support FileReader.");
}
}
} else {
alert("Please upload a valid image file.");
}
});
});
</script>
</body>
</html>
Hope the following JS code will help you . Modified the JS and used your HTML and CSS with few modification.
JS
function validate_file()
{
if($("input[type^=file]").val() == '' || $("input[type^=file]").val() == null )
{
alert("Please upload file");
return false;
}
else
{
var count = $("input[type^=file]").length;
var fileName = $('input[type^=file]:visible').val();
alert($("input[type^=file]")[0].files[0].name);
if($('input[type^=file]:visible').val() != '' || $('input[type^=file]:visible').val() != null)
{
var ext = fileName.substr((fileName.lastIndexOf('.') + 1));
alert(ext);
if(ext == 'jpg' || ext == 'bmp' || ext == 'png')
{
alert("Valid file");
$("div[id^=panel]:visible").next().css('display','block');
}
else
{
alert("Uploaded file is invalid");
return false;
}
}
else
{
alert('please select file to upload');
return false;
}
}
return false;
}
$(document).ready(function() {
$("input[type^=file]").change(function(){
validate_file();
});
});
</script>
HTML
<form id="form1" >
<div id="panel1" class="panel">
<input type="file" id="fileupload1"/>
</div>
<div id="panel2" class="panel">
<input type="file" id="fileupload2"/>
</div>
<div id="panel3" class="panel">
<input type="file" id="fileupload3"/>
</div>
<div id="panel4" class="panel">
<input type="file" id="fileupload4"/>
</div>
</form>
CSS
<style type="text/css">
#panel1,#panel2,#panel3,#panel4
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel2
{
padding:50px;
display:none;
}
#panel3
{
padding:50px;
display:none;
}
#panel4
{
padding:50px;
display:none;
}
</style>