Currently using following code found on web:
(using jq instead of $ sign)
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.lazyload.mini.js"></script>
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(function() {
jq("img").lazyload({
placeholder : "template/eis_d25_022/common/grey.gif",
effect : "fadeIn"
});
});</script>
The above code just auto "Lazyload" everything in my forum without changing image class or image src etc. However some image with specific class doesn't load sometimes and sometimes it works:
<img src="straightlogo/what.png" class="vm" alt=" " original="straightlogo/what.png">
How to avoid Lazyload effect on vm class's image?? or how to make this vm class works??
You can exclude elements with .not() selector.
jq("img").not(".vm").lazyload({ ... });
However it would be easier if you just specify class of images which you want to be lazyloaded. For example you can use class lazy. Also note that with current version of the plugin you define the placeholder in src attribute and real image in data-original attribute. For example:
<img class="lazy" data-original=“img/example.jpg” src=“img/grey.gif” width=“640” height=“480”>
Then you could do something like:
jq("img.lazy").lazyload({ ... });
Related
I don't know how to solve the following: I'd like to let my Model generate real javascript dynamically based on some model logic.
This final piece of javascript code then should be added inside the $(document).ready { } part of my html page.
The thing is: If I use inline="javascript", the code gets quoted as my getter is a String (that is how it is mentioned in the Thymeleaf doc but it's not what I need ;-)
If I use inline="text" in is not quoted but all quotes are escaped instead ;-) - also nice but unusable 8)
If I try inline="none" nothing happens.
Here are the examples
My model getter created the following Javascript code.
PageHelper class
public String documentReady() {
// do some database operations to get the numbers 8,5,3,2
return "PhotoGallery.load(8,5,3,2).loadTheme(name='basic')";
}
So if I now try inline="javascript"
<script th:inline="javascript">
/*<![CDATA[*/
jQuery().ready(function(){
/*[[${pageHelper.documentReady}]]*/
});
/*]]>*/
</script>
it will be rendered to
<script>
/*<![CDATA[*/
jQuery().ready(function(){
'PhotoGallery.load(8,5,3,2).loadTheme(name=\'basic\')'
});
/*]]>*/
</script>
Which doesn't help as it is a String literal, nothing more (this is how Thymeleaf deals with it).
So if I try inline="text" instead
<script>
/*<![CDATA[*/
jQuery().ready(function(){
PhotoGallery.load(8,5,3,2).loadTheme(name='basic')
});
/*]]>*/
</script>
Which escapes the quotes.
inline="none" I do not really understand, as it does nothing
<script>
/*<![CDATA[*/
jQuery().ready(function(){
[[${pageHelper.documentReady}]]
});
/*]]>*/
</script>
To be honest I have no idea how to solve this issue and hopefully anybody out there knows how to deal with this.
Many thanks in advance
Cheers
John
I would change the approach.
Thymeleaf easily allows you to add model variables in your templates to be used in Javascript. In my implementations, I usually put those variables somewhere before the closing header tag; to ensure they're on the page once the JS loads.
I let the template decide what exactly to load, of course. If you're displaying a gallery, then render it as you would and use data attributes to define the gallery that relates to some JS code. Then write yourself a nice jQuery plugin to handle your gallery.
A relatively basic example:
Default Layout Decorator: layout/default.html
<!doctype html>
<html xmlns:layout="http://www.thymeleaf.org" xmlns:th="http://www.thymeleaf.org">
<head>
<title>My Example App</title>
<object th:remove="tag" th:include="fragments/scripts :: header" />
</head>
<body>
<div layout:fragment="content"></div>
<div th:remove="tag" th:replace="fragments/scripts :: footer"></div>
<div th:remove="tag" layout:fragment="footer-scripts"></div>
</body>
</html>
The thing to notice here is the inclusion of the generic footer scripts and then a layout:fragment div defined. This layout div is what we're going to use to include our jQuery plugin needed for the gallery.
File with general scripts: fragments/scripts.html
<div th:fragment="header" xmlns:th="http://www.thymeleaf.org">
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var MY_APP = {
contextPath: /*[[#{/}]]*/,
defaultTheme: /*[[${theme == null} ? null : ${theme}]]*/,
gallery: {
theme: /*[[${gallery == null} ? null : ${gallery.theme}]]*/,
images: /*[[${gallery == null} ? null : ${gallery.images}]]*/,
names: /*[[${gallery == null} ? null : ${gallery.names}]]*/
}
};
/*]]>*/
</script>
</div>
<div th:fragment="footer" xmlns:th="http://www.thymeleaf.org">
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/my_app.js"></script>
</div>
In the scripts file, there are 2 fragments, which are included from the decorator. In the header fragment, a helpful context path is included for the JS layer, as well as a defaultTheme just for the hell of it. A gallery object is then defined and assigned from our model. The footer fragment loads the jQuery library and a main site JS file, again for purposes of this example.
A page with a lazy-loaded gallery: products.html
<html layout:decorator="layout/default" xmlns:layout="http://www.thymeleaf.org/" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Products Landing Page</title>
</head>
<body>
<div layout:fragment="content">
<h1>Products</h1>
<div data-gallery="lazyload"></div>
</div>
<div th:remove="tag" layout:fragment="footer-scripts">
<script type="text/javascript" src="/js/my_gallery.js"></script>
</div>
</body>
</html>
Our products page doesn't have much on it. Using the default decorator, this page overrides the page title in the head. Our content fragment includes a title in an h1 tag and an empty div with a data-gallery attribute. This attribute is what we'll use in our jQuery plugin to initialize the gallery.
The value is set to lazyload, so our plugin knows that we need to find the image IDs in some variable set somewhere. This could have easily been empty if the only thing our plugin supports is a lazyloaded gallery.
So the layout loads some default scripts and with cleverly placed layout:fragments, you allow certain sections of the site to load libraries independent of the rest.
Here's a basic Spring controller example, to work with our app: MyController.java
#Controller
public class MyController {
#RequestMapping("/products")
public String products(Model model) {
class Gallery {
public String theme;
public int[] images;
public String[] names;
public Gallery() {
this.theme = "basic";
this.images = new int[] {8,5,3,2};
this.names = new String[] {"Hey", "\"there's\"", "foo", "bar"};
}
}
model.addAttribute("gallery", new Gallery());
return "products";
}
}
The Gallery class was tossed inline in the products method, to simplify our example here. This could easily be a service or repository of some type that returns an array of identifiers, or whatever you need.
The jQuery plugin that we created, could look something like so: my_gallery.js
(function($) {
var MyGallery = function(element) {
this.$el = $(element);
this.type = this.$el.data('gallery');
if (this.type == 'lazyload') {
this.initLazyLoadedGallery();
}
};
MyGallery.prototype.initLazyLoadedGallery = function() {
// do some gallery loading magic here
// check the variables we loaded in our header
if (MY_APP.gallery.images.length) {
// we have images... sweet! let's fetch them and then do something cool.
PhotoGallery.load(MY_APP.gallery.images).loadTheme({
name: MY_APP.gallery.theme
});
// or if load() requires separate params
var imgs = MY_APP.gallery.images;
PhotoGallery.load(imgs[0],imgs[1],imgs[2],imgs[3]).loadTheme({
name: MY_APP.gallery.theme
});
}
};
// the plugin definition
$.fn.myGallery = function() {
return this.each(function() {
if (!$.data(this, 'myGallery')) {
$.data(this, 'myGallery', new MyGallery(this));
}
});
};
// initialize our gallery on all elements that have that data-gallery attribute
$('[data-gallery]').myGallery();
}(jQuery));
The final rendering of the products page would look like so:
<!doctype html>
<html>
<head>
<title>Products Landing Page</title>
<script type="text/javascript">
/*<![CDATA[*/
var MY_APP = {
contextPath: '/',
defaultTheme: null,
gallery: {
theme: 'basic',
images: [8,5,3,2],
names: ['Hey','\"there\'s\"','foo','bar']
}
};
/*]]>*/
</script>
</head>
<body>
<div>
<h1>Products</h1>
<div data-gallery="lazyload"></div>
</div>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/my_app.js"></script>
<script type="text/javascript" src="/js/my_gallery.js"></script>
</body>
</html>
As you can see, Thymeleaf does a pretty good job of translating your model to valid JS and actually adds the quotes where needed and escapes them as well. Once the page finishes rendering, with the jQuery plugin at the end of the file, everything needed to initialize the gallery should be loaded and ready to go.
This is not a perfect example, but I think it's a pretty straight-forward design pattern for a web app.
instead of ${pageHelper.documentReady} use ${pageHelper.documentReady}
I want to implement ckeditor in laravel 5. I have already installed IvoryCKEditorBundle. but for implementation the docs says to register a new form field type called ckeditor that extends the textarea.
How should I do that?
You shouldn't need a bundle to use CKEditor - you can download the whole package of js files from the ckeditor website. Once you have it, place the folder containing all the downloaded files inside of your js folder
In your view you can now reference the ckeditor.js file:
{{ HTML::script('assets/js/plugins/ckeditor/ckeditor.js') }}
Next include a short ckeditor script, which can include custom configuration (edit config in the js/plugins/ckeditor folder):
<script type="text/javascript">
CKEDITOR.replace( 'messageArea',
{
customConfig : 'config.js',
toolbar : 'simple'
})
</script>
add .ckeditor as a class in your textarea:
<textarea id="messageArea" name="messageArea" rows="7" class="form-control ckeditor" placeholder="Write your message.."></textarea>
if you are posting your content using ajax, use something like this to get the textarea value:
var message = CKEDITOR.instances.messageArea.getData();
Follow this you can do it by 1 minute.
https://github.com/UniSharp/laravel-ckeditor
Thanks.
You can get resources from //cdn.ckeditor.com/4.14.0/standard/ckeditor.js
Download from here and put /public/ckeditor/
<script src="{{ asset('ckeditor/ckeditor.js') }}"></script>
<script>
CKEDITOR.replace( 'summary-ckeditor' );
</script>
or If you want to use CDN then above code would be as follow:
<script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'summary-ckeditor' );
</script>
I'm trying to add language translations to my js files. So I've added this code to my view.html.php file in my component:
JText::script('COM_TEST_ENTER_LABEL');
If I look at the html source I now see this:
<script type="text/javascript">
(function() {
var strings = {"COM_TEST_ENTER_LABEL":"Enter a label"};
if (typeof Joomla == 'undefined') {
Joomla = {};
Joomla.JText = strings;
}
else {
Joomla.JText.load(strings);
}
})();
</script>
Now I try to add this to my js file:
alert(Joomla.JText._('COM_TEST_ENTER_LABEL'));
But I just get the error in firebug: TypeError: Joomla.JText._ is not a function
I'm wondering if it has something to do with jQuery. I have a bunch of jquery scripts in the code (view.html.php) that are added after:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.migrate/jquery-migrate-1.1.1.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" type="text/javascript"></script>
<script src="/components/com_test/js/cam.js" type="text/javascript"></script>
<script src="/js/jquery.noconflict.js" type="text/javascript"></script>
If you look at the html source this is before the JText::script stuff. Not sure if that is the cause? If it is I'm not sure what I can do about it? Joomla is ordering this by itself as my code tried to put it first.
Joomla.JText._ is a MooTools based function, so you'll need to allow MooTools to load in your template (if you're removing it, a lot of folks do).
You can access the strings using the following notation code.
alert(Joomla.JText.strings.COM_TEST_ENTER_LABEL);
This looks up the string COM_TEST_ENTER_LABEL in the string property of the JText property of the Joomla object.
Note that JText::_ is a PHP function.
Hope that helps..
Using the following:
LowEast = agent.get('https://rs.alarmnet.com/TotalConnectComfort/Device/Control/12345')
puts LowEast.parser.xpath("//script[#type='text/javascript']")
Returns what follows, which I have somewhat truncated for brevity. Specifically, I would like to extract the two pieces of information prior to each semicolon and then I'll figure out how to dump them into a log file. I haven't seen how to do this, but it seems like it shouldn't be to hard. If I've missed a similar question, I apologize.
<script type="text/javascript" src="/TotalConnectComfort/Scripts/Control/Control.Urls.js?v=1.5.46"></script>
<script type="text/javascript" src="/TotalConnectComfort/Scripts/Control/Control.Init.js?v=1.5.46"></script>
<script type="text/javascript">
$(document).ready(function()
{
///////////////////// pass model data to client-side logic /////////////////////
Control.Model.set(Control.Model.Property.batteryStatus, 0);
Control.Model.set(Control.Model.Property.commercial, false);
Control.Model.set(Control.Model.Property.communicationLost, false);
Control.Model.set(Control.Model.Property.coolLowerSetpLimit, 50.0000);
Control.Model.set(Control.Model.Property.coolNextPeriod, 88);
Control.Model.set(Control.Model.Property.coolSetpoint, 78.0000);
Control.Model.set(Control.Model.Property.coolUpperSetptLimit, 99.0000);
Control.Model.set(Control.Model.Property.deadband, 0.0000);
Just use scan:
text.scan /Control.Model.set\((.*), (.*)\);/
I'm using tinymce jquery plugin and trying to access the api after initializing an instance of tinymce over a textarea.
In this example, I have a hide button, which when clicked on is supposed to hide the tinymce editor, but instead I get an error.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tinymce/jquery.tinymce.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<div><textarea id="textEditor" class="tinymce" disabled="disabled"></textarea></div>
<input type ="button" id="hide" value="Hide tinymce">
</body>
</html>
$(document).ready(function(){
//textEditor
$("#textEditor")
.tinymce({
// Location of TinyMCE script
script_url : 'js/tinymce/tiny_mce.js',
theme : "advanced",
theme_advanced_buttons1 : "bold,italic,underline,",
theme_advanced_resizing : false
})
//... see below ...//
});
Update: I have 2 versions now, one that works by wrapping the $("#textEditor").tinymce().hide(); line in a click function, and one that gives me tinyMCE not defined with just the line itself.
Works:
$("#hide").click(function(){
$("#textEditor").tinymce().hide();
})
Doesn't work:
$("#textEditor").tinymce().hide(); //error tinyMCE is not defined
You could try
tinymce.get("textEditor").hide();
To verify if you are useing the correct tinymce id can alert all tinymce ids present at your page using
for (var i = 0; i < tinymce.editors.length; i++) {
alert(tinymce.editors[i].id);
}
EDIT:
This:
/** Option Block A error **/
// $("#textEditor").tinymce().hide(); //error tinyMCE is not defined
/** Option Block A error **/
does not work because it will get called before the tinymce editor is initialized. At this point there is no tinymce.get("textEditor").
I think that the path to your jquery plugin is not correct, because, the $.tinymce() method is provided there. If the file is not to be found, so is this method.
Also you should ensure that the path specified inside the *script_url* field is valid, as the plugin will try to load it on the fly.