jQuery wont load - jquery-plugins

Jquery wont load. I'm a noob, but have persisted, trawled this site & tried many things, permission settings, reloading java on my system & various syntax tweaks, but no joy. About to give up. Here's how it stands...
Using jquery on my hard drive, current version jquery-1.7.1 (also tried v1.7.1.min).
I have tried to use the following plugins - scrollTo-1.4.2-min, jqDock.min & jqDock, jtruncate (current) & jtruncate.pack. None work. I'm using IE8 and Chrome to check on local.
Debugging says...
(jquery-1.7.1.js) invalid character Line 1 (NB: line 1 is just the
beginning of the credit info greyed out text /*! )
(jquery.jtruncate.js) jQuery is undefined Line 1 (NB: line 1 is
(function(jQuery){ ) (my page name) Object doesnt support this
property or method Code 0 Line 17 Char 5 (NB: line 17 is $('').jTruncate({ )
My head code, (after meta's, UTF8 and title)...
$(document).ready(function(){
$('<div id="statement" />').jTruncate({
length: 200,
minTrail: 0,
moreText: "[more]",
lessText: "[less]",
ellipsisText: "(truncated)",
moreAni: "fast",
lessAni: 2000
});
});
Then theres some java generated by Dreamweaver, (Rollover image/swap image guff), then page specific CSS (see below) i also have site wide external css sheet.
#statement {
position:absolute;
left:285px;
right: 190px;
top:130px;
width: 607px;
height: 321px;
}
Then html body.
Can anyone help? Cress

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
$(document).ready(function(){
$('body').append('<div id="statement" />');
$('#statement').css({
length: 200,
minTrail: 0,
moreText: "[more]",
lessText: "[less]",
ellipsisText: "(truncated)",
moreAni: "fast",
lessAni: 2000
});
});

Related

Browser Print dialog not showing

I have print.min.js referenced in my angularjs project. I have it printing successfully (very simple!) for most of my needs. I have run into a case where the browser print dialog does not appear when a user presses my 'Print' button. The issue seems to be related to file size. I don't know the size threshold yet, but it seems after a few pages in length, the process hangs in print.min.js somewhere. Smaller files (2 - 3 pages or so) print without issue. Any thoughts?
Thanks!
Joe
By default, Print.js will process the computed styles for each html element. When printing large and / or complex html, this process may take a while. Specially on slower machines.
To prevent this, the library has a parameter scanStyles that can be set to false.
However, for this to work properly, you may want to style your html with css classes instead of inline style. Since the library isn't scanning the computed styles, it needs to receive the css you want to use when printing.
For example, when printing an element of id myElement on a page with two attached stylesheets, myStylesheet.css and vendor.css:
printJS(
{
printable: 'myElement',
type: 'html',
scanStyles: false,
css: ['myStyleSheet', 'vendor.css']
}
)
This supports css print media query as well.
You can also pass custom inline style if necessary:
printJS(
{
printable: 'myElement',
type: 'html',
scanStyles: false,
css: ['myStyleSheet', 'vendor.css'],
style: 'h1 { color: blue; }, someClass { font-size: 1rem; }'
}
)
http://printjs.crabbly.com/#configuration

Add dynamycli parametr in CKEDITOR

I use CKEDITOR 4, in my ls:
CKEDITOR.replace('ae-textarea-text', {
filebrowserImageUploadUrl: '/Sites/UploadImgToSite?Site=' + $("#SiteName").val(),
height: 850,
width: 800
});
When I upload a images, parametr Site=' + $("#SiteName").val() - is empty, because
1) page open
2) CKEDITOR init with $("#SiteName").val() (now it empty)
3) user fill texbox #SiteName....
That parameter has to be available before CKEditor creation code is executed because it is no longer possible to change that parameter dynamically afterwards. It can only be set once when editor is created.
In your case you could try opening the page, getting siteName from user and only then creating the editor.

CasperJS waitUntilVisible by Xpath

Just started working with CasperJS, writing a few sample tests. Everything works fine when using CSS Selectors, however I'm having trouble using Xpath. The only reason I want to use xpath is to create a more resilient locator, i.e.
'//a[text()="Office Building"]' versus the css version: #content > div > div > div > div:nth-child(1) > a
Here's what I've tried (Note: I have tested this xpath in the browser console):
Tried passing directly
casper.waitUntilVisible('//a[text()="Office Building"]');
Tried specifying the locator explicitly as Xpath:
casper.waitUntilVisible({
type: 'xpath',
path: '//a[text()="Office Building"]'
});
And tried requiring the helper selectXPath from the module as documented here:
var x = require('casper').selectXPath;
casper.waitUntilVisible(x('//a[text()="Office Building"]'))';
All of these result in a timeout error Wait timeout of 30000ms expired, exiting. because the element is never "found". Any ideas?
This could be a solution if you are only got text as identifier for waiting and clicking a link in casperjs without using xPath.
It's more simple to wait for the text and then use clickLabel (if the text is unique):
casper.start('http://yourTestUrl.com');
casper.then(function() {
casper.waitForText('Office Building');
});
casper.then(function() {
casper.clickLabel('Office Building');
});
casper.run();

How to add a warning or error notification to the ace editor

I'm using the ACE editor for interactive python editing, at the same time I have a python interpreter at the back end, which will parse the python code into results.
When the user submits the code to the backend, the python parser will parse the code into results, if errors happens, it will return the row and column, as well as the description of the error in JSON format
Now the problem is how can ACE display the error in certain position
You can use Annotations to display an error. The editors gutter shows the error and even warning or information with the error message.
var editor = ace.edit("editor");
editor.getSession().setAnnotations([{
row: 1,
column: 0,
text: "Error Message", // Or the Json reply from the parser
type: "error" // also "warning" and "information"
}]);
You can use editor.session.addMarker(Range, classname, type)
and add some css e.g. .classname{position:absolute; border-bottom: 1px solid green}
For a nice example of doing this see
https://github.com/c9/core/blob/a256cf12a06c8d18bd45f8797a23c507b313ab65/plugins/c9.ide.language.core/marker.js#L139

Set scrollLeft/scrollTop simultaneously does not work in Safari 6

When setting the scrollTop and scrollLeft parameters in Safari 6 simultaneously, only one of both gets executed, scrolling the page only over one axis. This happens both using native JavaScript, jQuery and the jquery.scrollTo plugin.
Example using jQuery's .animate():
$('body').animate({
'scrollLeft': 100,
'scrollTop': 100
}, {
'duration': 500,
'easing': 'swing'
});
I've set up a demo page here: http://nabble.nl/demo/safari6scrollto/
All examples work fine in all major browsers as expected, in Safari 6 only example no. 4, 6 and 7 work.
Somehow, when loading the demo page in an IFRAME (see bottom of demo page), everything works just fine.
Is this a bug in Safari? If so, how to work around this issue? If not, what is causing it and how can this be resolved?
Other related reports:
https://github.com/flesler/jquery.scrollTo/issues/9
http://forum.jquery.com/topic/scrolltop-scrollleft-not-working-in-safari-6
http://bugs.jquery.com/ticket/12588
I needed to get the jquery.scrollTo plugin working on OSX Mountain Lion, and since I couldn't find the specifics on what is causing this behaviour, I put together a rather ugly workaround. It uses window.scrollTo(x, y) in the step function of jQuery's .animate(), which gives no problems in Safari 6:
var left;
$(window).animate({
'pageXOffset': 100,
'pageYOffset': 100
}, {
duration: 500,
easing: 'swing',
step: function(now, fx) {
if (fx.prop == 'pageXOffset') {
left = now;
} else if (fx.prop == 'pageYOffset') {
window.scrollTo(left, now);
}
}
});
Please note that the step function is called for every animated property, for every element the animation is applied on (in our case just 1: window). Hence the intermediate variable to store the current X position in the animation.
It uses the pageXOffset and pageYOffset properties of the window object, so I don't know how suitable this workaround is for animating the scrollLeft and scrollTop properties of non-window objects.
Anyway, it works for scrolling the entire document, which was all I wanted, and does so very smooth in Safari 6, too!

Resources