FineUploader div will not display class - javascript

Here's a snippet of code into a :
<div id="manual-fine-uploader"></div>
<div id="triggerUpload" class="button" style="margin-top: 10px;">Save</div>
<script type="text/javascript" src="~/js/fineuploader/fineuploader-3.5.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var manualuploader = new qq.FineUploader({
element: $('#manual-fine-uploader')[0],
request: {
endpoint: 'server/handleUploads'
},
autoUpload: false,
text: {
uploadButton: 'Select Files'
}
});
$('#triggerUpload').click(function () {
manualuploader.uploadStoredFiles();
});
});
</script>
As background, I'm using V3.5.0 of FineUploader, and I am using the standalone dependency free version. I've literally just copied this example for the FineUploader dev. I changed the second div to say class="button" (a CSS style I use everywhere in my application). However, no styling occurs. Also where would I put a reference to one of my styles to custom style uploadButton in the javascript?
Thanks.

As you mentioned in the comments, you want to style the "save" button (which you have created) and the "select files" button (which Fine Uploader creates).
As far as the "Save" button is concerned, that is not related to Fine Uploader at all. You have created this button, and it is not a part of Fine Uploader. You can style it however you like via CSS.
Regarding the "Select files" button, you have three options:
Create your own div/anchor/etc element, and pass it to Fine Uploader via the button option. Fine Uploader will add an opaque file input element as a child of this button element. Style your element however you like using CSS.
Create your own CSS (file), targeting the default button created by Fine Uploader's UI module. There are numerous ways to ensure your CSS properties "win", but that is strictly a CSS question, and out of scope here really.
Override the template option. I recommend not going this route. Fine Uploader's template options are brittle and need to be improved in a later version. You can read more about overriding the templates in the first half of the styling readme but, again, I suggest you not do this.
Of the three options above, the first option is the easiest and the one I personally recommend.
It also sounds like you are simply not importing the CSS file that ships with Fine Uploader properly. This is covered in the very first example "Setup" on the demo page/website.

Related

Autosize height on multiline asp.net textbox "readonly" when data bound

I have a databound asp.net textbox "readonly" that I want the height to autosize based on the text coming from a database.
I have tried several of the posts but can't get any of them to work correctly.
Autosize Text Area (Multiline asp:TextBox)
The line counting is not clean at all and when I try to use JQuery http://plugins.jquery.com/autogrow/ I get "Object doesn't support property or method 'autogrow'"
I have also tried http://www.jacklmoore.com/autosize/
but I still get the "Object doesn't support property or method 'autosize'"
I have also tried http://www.jscripts.info/jtextarea.php
but I still get the "Object doesn't support property or method 'jtextarea'"
The following code gets me very close but it adds one extra row.
http://geekswithblogs.net/dotNETvinz/archive/2009/02/17/automatically-adjust-the-hieght-of-the-textbox-based-on-its.aspx
I almost feel that I am doing something wrong when trying to import the javascript files.
Here is how I tried to use the js files.
Download the *.js file into my web project / scripts folder.
Right click on the file in VS and set "Build Action = Content" and "Copy to Output Directory = Do not copy".
Open TestPage.aspx then add the following into the "head"..
Add script into the body like
<script type="text/javascript">
$(document).ready(function () {
$('textarea').autogrow();
});
</script>
Add SOME LONG TEXT... into the body
Replace "autosize" with any of the javascript files and functions I have tried and I still get the same problem.
I need help... It can be in CSS, JavaScript, JQuery, .NET codebehind... I just need something that works.
And NO I can't just use a label. "textbox is a requirement".

Codemirror doesn't work with different Id's

I'd like to use CodeMirror for two pages on my website. The first is a Code snippet uploading page, the second is a page to view code snippets. On the second page I'd like to make CodeMirror ReadOnly, obviously to not allow users to change its content.
So, the first page (the upload page) works flawlessly, it displays the plugin like it should, and works like it should.
Here's an image of it:
Here's its javascript: (it's an external script file)
var UploadPageCodeMirror = CodeMirror.fromTextArea(document.getElementById('CodeSnippetBody'), { mode: "javascript", theme: "default", lineNumbers: true });
HTML:
<textarea rows="15" cols="70" name="CodeSnippetBody" id="CodeSnippetBody" #Validation.For("CodeSnippetBody")></textarea>
The problem only persist on the second page, where the user can view uploaded snippets. For some reason it won't work with a different textarea ID, though I referenced it right. If I change the ID of this textarea to the one on the upload page (CodeSnippetBody) for some reason it works, but I can't change attributes of it.
Here is the js: (the same external script file)
var ReadOnlyCodeMirror = CodeMirror.fromTextArea(document.getElementById('CodeSnippetBodyReadOnly'), { mode: "javascript", theme: "default", lineNumbers: true });
And here's the HTML:
<textarea id="CodeSnippetBodyReadOnly">#code["CodeSnippetBody"]</textarea>
It displays like this:
As you can see the plugin won't initalize
If I change the ID of this textarea to CodeSnippetBody, so it matches the upload page's id it works:
<textarea id="CodeSnippetBody">#code["CodeSnippetBody"]</textarea>
Displays like this:
The problem with this, as I stated before, is that I can't change its attribute to ReadOnly.
What am I doing wrong?
I hope I gave you enough info, if you need more, please ask, I will provide. Thank you!

jQuery call function when language in selectbox is changed

I have the following problem.
To translate a website, I'm using the jQuery Localize plugin.
This works fine. However, I want a CSS styled selectbox with flags and languages, and when a different option is selected the call to $("[data-localize]").localize("example", { language: $(this).attr('value') should be made to translate the page.
This code I'm currenly using, and it works fine for a plain, not-styled selectbox.
<script type="text/javascript">
$(function() {
$('#polyglot-language-options').change(function() {
if ($(this).attr('value') == "en") {
$("[data-localize]").localize("example", {
language: $(this).attr('value')
});
}
else if ($(this).attr('value') == "nl") {
location.reload();
}
});
});
</script>
But I want to style it, so I tried to integrate the "polyglot" language switcher. However, the current code doesn't work.
How can I integrate the $("[data.localize]").localize(); function in this code:
$('#polyglotLanguageSwitcher').polyglotLanguageSwitcher({
effect: 'fade'
});
This plugin (source code) does not follow the guidelines for jQuery plugin design. The bugs I found quickly:
It does not allow chaining, because it does not return this
It works only on one element at a time (does not use each())
It has a queer element hierarchy. It seems to require an element with an id, containing a form containing a select (as in the demo). In my opinion, such a plugin should be called on the language select element only.
It seems to navigate automatically, wanting to be configured with the page structure. Each of the li items in that fancy box contains a link to the respective page.
Therefore, it does neither trigger the form it live in or fire the change event you want to listen to.
As it stands, you can't use this particular plugin as you want to. If you want to fix all the bugs, I wish you a happy time :-) Nonetheless it might be possible to manipulate the plugin code, to let you register callbacks on select events (where you can invoke the localisation plugin). Otherwise, you will need to choose an other select plugin (or build one yourself from scratch, adapting the existing code)

Where to put custom JavaScript/Prototype code for an ActiveScaffold form?

I have a Select dropdown on the form of an ActiveScaffold. I am trying to hide some of the fields on the form if a particular value is selected.
A [similar question][1] was posted to the ActiveScaffold Google Group, and the supplied Prototype code looks to do what I need, however I don't know where I need to add this.
--
I tried taking a copy of -horizontal-subform-header.html.erb from Vendor/plugins/
active_scaffold/frontends/default/views, placing it in views folder of my controller, and then adding my script into it:
<script type="text/javascript">
document.observe('dom:loaded', function() { //do it once everything's loaded
//grab all the product-input classes and call 'observe' on them :
$$('.product-input').invoke('observe', 'change', function(e) {
this.up('td').next('td').down('input').hide();
});
});
</script>
... but that doesn't seem to work properly. It works if I use a URL to go direct to the form (i.e. http://localhost:3000/sales/20/edit?_method=get). But when I test it with the main list view (i.e. http://localhost:3000/sales/) and opening the form via Ajax, then it doesn't work. Looking at the HTML source the just does not appear.
The common place for adding JavaScript is application.js found in public/javascripts. I'm a jQuery guy myself, however I'm sure you can hook up to the onchange event in application.js with prototype. A quick search looks like Event.observe should do the trick.

Connect links inside an dijit.dialog

i have some trouble to connect an link inside an dijit.dialog.
Iam calling an "other" html file inside the Dialog (dialog.href="xxx.html") inside this file iam trying to connect some links by id, to fire an alert box. But nothing happens ? Possible that this isnt possible ??
Thats the part from my xxx.html file..
<script type="text/javascript">
dojo.addOnLoad(function( ) {
dojo.connect(dojo.byId('testLink'), 'onClick', alert('xx'));
}); </script>
TEST
Dialog is extended from ContentPane so it supports all the same parameters (href, etc.). With that said, when a page is included via the href property any <script> tags are not evaluated they are just added to the DOM. This leaves you with two choices:
refactor xxx.html, so the script can be run by the dialog's onLoad handler
embed the event handlers into the html tags; i.e. <input type="button" onClick="alert('xx');" />
Another option would be to use dojox.layout.ContentPane. It'll parse <script> tags. It's in dojox though so it's liable to change in future version. And another downside is that this would require creating your own Dialog class that's a subclass of dojox.layout.ContentPane.
There's also an article on dojocampus about executing javascript in content panes which talks a little bit about using dojox.layout.ContentPane to roll your own Dialog widgets.

Categories

Resources