I'm trying to open the Dropzone upload control inside a jQuery dialog, it is showing the form but I can't drop any images in it.
This is the code for the dropzone control:
<link rel="stylesheet" type="text/css" href="../../Content/dropzone.css" media="screen" />
<script type="text/javascript" src="<%= Url.Content("~/Scripts/dropzone.js") %>\"></script>
<form action='/file-upload' class='dropzone' id='my-awesome-dropzone'></form>
And the code that builds the jQuery dialog:
dialogObj = $("#_dialogPanel").dialog({
autoOpen: false,
resizeable: true,
position: { my: "center-100 bottom-40", at: "center center" },
stack: true,
height: 'auto',
width: 'auto',
modal: true
});
The control is assigned to the dialog using the .html() property
Have you added
$('#my-awesome-dropzone').dropzone({ previewsContainer: "#_dialogPanel" //or whatever the css selector is for your preview area })
If you are doing a lot of events and callbacks, I would ignore the jQuery invocation and go for:
var myAwesomeDropzone = new Dropzone("#my-awesome-dropzone", { previewsContainer: "#_dialogPanel"});
That way you can easily add events such as
myAwesomeDropzone.on("thumbnail", function(file,fileurl) {
/* Add a nice green good file tick or whatever else you want to do */
});
Related
Has anybody used the Easy Split Layout Plugin For jQuery as shown here?
The ondrag, ondragstart, and ondragend events only fire once when the plugin is initialized. After that, nothing.
Here is my code:
function setSplitters() {
$('#widget').width(1500).height(768).split({ //left container
orientation: 'vertical',
limit: 150,
position: '20%',
onDrag: console.log("dragging..."),
onDragStart: console.log("dragging has started"),
onDragEnd: console.log("dragging has ended")
});
When I refresh the browser (chrome), I see the three console.log outputs but when I drag the splitter bar, nothing.
Here are the dependencies:
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.splitter.js"></script>
Any ideas?
That works in fiddle:
I used:
https://cdn.jsdelivr.net/npm/jquery.splitter#0.28.5/js/jquery.splitter.min.js
https://cdn.jsdelivr.net/npm/jquery.splitter#0.28.5/css/jquery.splitter.css
and
JQuery 3.4.1
HTML
<div id="widget">
<div id="leftPane">Foo</div>
<div id="rightPane">Bar</div>
</div>
Jquery
function setSplitters() {
var splitter = $('#widget').width(1500).height(768).split({
orientation: 'vertical',
limit: 150,
position: '20%',
onDrag: function(event) {
console.log(splitter.position());
},
onDragStart: console.log("dragging has started"),
onDragEnd: console.log("dragging has ended")
});
}
setSplitters();
Gives the position in console.log if you drag the divider
I started using animsition today and everything looked simple at first. However, when I used it on my html code, the animsition wouldn't work and it kept on preloading.
Html body
<div class="panel1">
<div class="tex">text</div><div class="t">t</div>
<div class="animsition head">
<h2>Something</h2>
</div>
</div>
JS
$(".animsition").animsition({
inClass: 'fade-in-up',
outClass: 'fade-out-up',
inDuration: 1500,
outDuration: 800,
linkElement: '.animsition-link',
// e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
loading: true,
loadingParentElement: 'body', //animsition wrapper element
loadingClass: 'animsition-loading',
loadingInner: '', // e.g '<img src="loading.svg" />'
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: [ 'animation-duration', '-webkit-animation-duration'],
// "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
// The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
overlay : false,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'body',
transition: function(url){ window.location.href = url; }
});
And the browser displays a preloader which never completes loading.
Found it!
Animsition doesn't work with the latest version of jquery(3.1.1). So beware, animsition users.
Basically I am i need of an Ext.Panel which contains an XML-Editor together with syntax-highlighting, line numbers and editing.
I have searched through the web and found the Javascript API CodeMirror.
I have implemented something, but the alignment of the CodeMirror-object-Textfield does not adjust itself to the Top/left of the Ext.Panel and also no line-numbers are seen:
<!DOCTYPE html>
<html>
<head>
<!-- ext imports -->
<script type="text/javascript" language="javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<!-- codemirror imports -->
<script type="text/javascript" language="javascript" src="/CodeMirror-master/lib/codemirror.js"></script>
<link rel="stylesheet" href="/CodeMirror-master/lib/codemirror.css">
<script type="text/javascript" src="/CodeMirror-master/mode/xml/xml.js"></script>
<script type ="text/javascript">
Ext.onReady(function(){
var panel_1 = Ext.create('Ext.panel.Panel', {
frame:true,
id: 'panel_1_id',
title: 'panel_1',
padding: '10 10 10 10',
margin: '10 10 10 10',
autoScroll: true
});
var vp = new Ext.Viewport({
layout: 'fit',
items: [panel_1],
autoScroll: true,
renderTo : Ext.getBody()
});
var myCodeMirror = CodeMirror(panel_1.body, {
value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>"
});
});
</script>
</head>
<body>
</body>
</html>
So the following questions arise:
1.) I thought about extending Ext.Component and somehow pack the CodeMirror object inside it?
Is this possible?
2.) Is it possible to adapt my little codeexample from above to align it correctly?
This can be solved with a few slight tweaks to your code.
The key point here is that the behaviour of CodeMirror will vary depending on the type of the first parameter you pass to the CodeMirror constructor. Passing a HTML element (as in your example) will result in the HTML DOM function appendChild() being called. And this is why there is a large space before your new element, because it is being appended after the body of the panel.
If you pass in a function (acting as a callback) to the CodeMirror constructor then you will be returned with the HTML element that is the CodeMirror. Constructing the element this way enables you to replace the body element of the panel with the new HTML element (rather than appending).
This can be achieved by creating a simple function. The code changes you require are as follows....
Create a function to pass to CodeMirror constructor
var codeMirrorCallbackFunction = function(codeMirrorEl) {
var panelDom = panel_1.el.dom;
// the node at index 1 is the body (index 0 is panel header)
panelDom.replaceChild(codeMirrorEl, panelDom.childNodes[1]);
};
Create the CodeMirror object passing the function as 1st parameter
var myCodeMirror = CodeMirror(codeMirrorCallbackFunction, {
value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>"
});
Update the padding of the Panel
// without this change the panel header and codemirror html overlap
padding: '25 10 10 10'
You are doing good, you only need to add a property like
var myCodeMirror = CodeMirror(panel.body, {
value: "<XXX><YYY><AAA>foo1</AAA></YYY><ZZZ>foo2</ZZZ></XXX>",
lineNumbers: true
});
I'm using threesixty plugin (jQuery) to display an 360 degrees view of an car.
<div class="threesixty" data-path="img/volvo/test/car{index}.jpg" data-count="6"></div>
</div>
<script type="text/javascript">
var $threeSixty = $('.threesixty');
$threeSixty.threeSixty({
dragDirection: 'horizontal',
useKeys: false,
draggable: true
});
</script>
I want to use select boxes to change the car shown, so users can pick their own car they want to see.
I tried to use the .change function to call a .data function to change the path.
<script type="text/javascript">
var $threeSixty = $('.threesixty');
$threeSixty.threeSixty({
dragDirection: 'horizontal',
useKeys: false,
draggable: true
});
$( "select" ).change(function() {
$('.threesixty').data('path', 'img/bmw/test/car{index}.jpg');
});
</script>
It does not seem to change anything.
When I use:
$( "select" ).change(function() {
$('.threesixty').attr('data-path', 'img/bmw/test/car{index}.jpg');
});
It does change the path but still does not show the new set of images.
Any help please?
I'm trying to create a simple function, but at runtime firebug says the function does not exist.
Here's the function code:
<script type="text/javascript">
function load_qtip(apply_qtip_to) {
$(apply_qtip_to).each(function(){
$(this).qtip(
{
content: {
// Set the text to an image HTML string with the correct src URL to the loading image you want to use
text: '<img class="throbber" src="/projects/qtip/images/throbber.gif" alt="Loading..." />',
url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load
title: {
text: 'Nieuwsbladshop.be - ' + $(this).attr('tooltip'), // Give the tooltip a title using each elements text
//button: 'Sluiten' // Show a close link in the title
}
},
position: {
corner: {
target: 'bottomMiddle', // Position the tooltip above the link
tooltip: 'topMiddle'
},
adjust: {
screen: true // Keep the tooltip on-screen at all times
}
},
show: {
when: 'mouseover',
solo: true // Only show one tooltip at a time
},
hide: 'mouseout',
style: {
tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
border: {
width: 0,
radius: 4
},
name: 'light', // Use the default light style
width: 250 // Set the tooltip width
}
})
}
}
</script>
And I'm trying to call it here:
<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function()
{
load_qtip('#shopcarousel a[rel]');
// Use the each() method to gain access to each elements attributes
});
</script>
What am I doing wrong?
You are missing a ), closing the each call.
Change last line in the function declaration to
);}
For similar problems in the future, try pasting your code into http://www.jslint.com/