I was trying to add JQuery UI functionality and styling but I'm having problems with the CSS file. I use to attach a lot of libraries to XSLTForms files, but I really can't make it load. I already put the and tags inside the CSS file, as I use to do with other CSS files, but with no success.
Any idea what could be wrong? Functionality is OK, because Y can make it appear a dialog, but with no style. I copied the source code in a new file and change it to html (replacing the XForms tahgs with HTML ones) and everything worked ok. So I think there is something with XSLTForms.
<xf:trigger id="showDialog">
<xf:label>Show dialog!</xf:label>
<xf:load ev:event="DOMActivate" resource="javascript:
var dialog = document.createElement('div');
dialog.innerHTML = 'Your modal dialog';
$(dialog).dialog({
autoOpen: true,
modal: true,
title: 'Attention',
open: function(){
$('.ui-widget-overlay').bind('click',function(){
$(dialog).dialog('close');
})
}
});
"/>
</xf:trigger>
I also unsuccessfully tryed to load this way:
<style type="text/css">
#import url('res/jquery-ui.css');
</style>
XSLTForms requires CSS files to be XML Well-formed.
This option can be disabled including this processing instruction in your XForms:
<?css-conversion no?>
Take a look to this XSLTForms Wikibook article
This particular file had something than others don't: CSS comments. Just remove comments or make it as in the XML way (<!-- A comment! -->).
But for some reason, any image referenced is not loaded...
Related
user3568918 has responded to the following question:
jQuery Mobile not working with Internet Explorer?
Dont forget to keep the right binding Order:
jquery mobile css
jquery script
jquery mobile script
My question is :
When I go to download page of jquery mobile
https:/ /jquerymobile.com/download/
I see two viable options for me :
Download the javascript, css and images :
https:/ /jquerymobile.com/resources/download/jquery.mobile-1.4.5.zip
Download the minified javascript :
http:/ /code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js
If I choose 1, two additional subfolders "demos" and "images" are created, which have their own sub-folders.
Do I have to reference all these subfolders in my html ?
If I choose 2, which is to download the minified javascript only, how do I reference the images that I want to use for icons?
Thanks a lot in advance.
Example: assuming your index.html is the root, you should reference:
<link rel="stylesheet" href="css/jquery.mobile.1.4.5.min.css" />
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
Then, the directory structure on your server shall be like this:
\index.html
-- All jQuery files shall be in \js subfolder and \css subfolder
\js\
----jquery-1.11.2.min.js
----jquery-1.11.2.min.map
----jquery.mobile-1.4.5.min.js
----jquery.mobile-1.4.5.min.map
(...other stuff)
\css\
-----jquery.mobile-1.4.5.min.css
-----jquery.mobile.external-png-1.4.5.min.css
-----jquery.mobile.icons-1.4.5.min.css
-----jquery.mobile.inline-png-1.4.5.min.css
-----jquery.mobile.inline-svg-1.4.5.min.css
(...other stuff)
\css\images\
------------ajax-loader.gif
------------icons-18-black.png
------------icons-18-white.png
(...other stuff)
\css\images\icons-png\
----------------------action-black.png
----------------------action-white.png
(...a lot of other stuff)
\css\images\icons-svg\
----------------------action-black.svg
----------------------action-white.svg
(...a lot of other stuff)
EDIT:
subfolders demos and images inside the zip file are ready for you if you need to have the JQM demos also available on your local site, there is also a custom css file special for the demos.
I think this will also clarify some aspect of your question: https://css-tricks.com/data-uris/
I use kss-node and trying out the simplest project. It just uses the example from the Quickstart guide.
The css is in source/style.css
// Hard rules
//
// Markup: <hr>
//
// Style guide: hard-rule
hr {
border-top: 5px solid #999;
}
I then run
npm-exec kss-node --source source --destination styleguide --css ../source/style.css
The first problem was that the --css option needs the relative path from where the styleguide later is.
But the hr element still looks the same and not 5px thick.
The file is included in the html but Dev Tools says "0 rules" are applied
Could it have something to do with the "//" comments you are using in the css file? Try using a preprocessor and a styles.scss file as the source and then include the styles.css file that sass generates which won't have invalid "//" comments in them.
This seems to working
`
/*
Hard rules
Markup:
Style guide: hard-rule
*/
`
https://github.com/rcaracaus/kss-test
I reread the the documentation to kss-node. The recommended way seems to create a kss template and add the stylesheet in there.
I took the repo of Robert and executed
npm-exec kss-node --init my-template
Then I added following line to my-template/index.html
<link rel="stylesheet" href="../source/styles.css">
Apparently the styles.css file won't be copied to the styleguide directory.
Although this doesn't answer my original question. I feel like it should work without a custom template.
But this works for me.
.I want to use jquery bubble popup to create a bubble.
I read that the folder “jquerybubblepopup-themes” should be copied in the root of my website.
Also, I have a jsp that isn't directly under the root of my website, but under "mywebsite/WEB-INF/jsp/admin/myfile.jsp". It contains this javascript code :
<script type="text/javascript">
$(document).ready(function(){
$('.infoTip').CreateBubblePopup({
themeName: 'black',
themePath: 'jquerybubblepopup-themes'
});
});
</script>
I read that in "themePath", the relative path of "jquerybubblepopup-themes" should be set.
In my case, "jquerybubblepopup-themes" can't be loaded, how could I modify themePath value so that the file "jquerybubblepopup-themes" will be loaded ?
Thanks in advance
You should see errors in the browser console, ther you can see where it is trying to search for the themes (path), and adjust the path accordingly
I'm using TinyMCE on my blog and it seems to be removing the code I'm trying to paste.
I want to add this:
<Files somefile.png>
DefaultType application/x-httpd-php
</Files>
(it's a .htaccess directive)
This gets saved ok (as < and > in the html), but when I reopen my form for editing, it gets transformed as :
DefaultType application/x-httpd-php
Edit : I'm using TinyMCE in a Symfony form, using sfFormExtraPlugin.
Edit 2 : I tried verify_html: false ....
now my code gets transformed as :
<p><files exec="" jpg=""><br /> DefaultType application/x-httpd-php<br /></files></p>
Edit 3: My tinyMCE config is :
tinyMCE.init({
mode: "exact",
elements: "content_contents",
theme: "advanced",
width: "500px",
height: "400px",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true
,
language : "fr",
convert_urls : false,
verify_html : false
});
I responded to this on the TinyMCE MoxieCode forums topic that was also opened by #Manu however I wanted to update this topic with my thoughts as well.
If I understand #Manu correctly, the problem is that the HTML source, while saving with < and > correctly is being interpreted as < and > when reloaded into TinyMCE.
If this is the case, then I believe the problem is that the Symphony plugin isn't encoding the HTML content prior to populating the TextArea that TinyMCE replaces. In other words, it leaves < when it should be loading &lt; so tinyMCE receives <
What are you doing to the input when putting it back in to TinyMCE? If you're converting it to HTML or anything TinyMCE will clean it up as it's invalid HTML.
As a work around/experiment you could add File in the custom_elements option in your init.
Update As you are accepting all sorts of code, you will probably have to turn off clean up altogether. Put cleanup: false in the config. If I were you I would implement your own custom formatting (like Stack/overflow does) and generate bold, underline, links etc formatting because it will give you a lot more control over the HTML generation, ie you could just print out everything exactly how it is (with escaping), and then turn the pre-defined symbols to <strong> tags, or what ever. This is be far the easiest way of generating safe, accurate HTML output, and in your case, probably the only way.
You would not want to use TinyMCE is this case...
That is because the invalid HTML gets removed (the tinymce cleanup functionality).
A workaround could be to initialize tinymce using the cleanup paramter:
cleanup: false,
I suggest you have a closer look at the tinymce initialization parameters
custom_elements
valid_elements
and
cleanup
replace your < and >
< becomes: <
> becomes: >
Try including
extended_valid_elements : "Files[]",
In your config. It's used to unlock certain html tags like iframe. In the brackets you usually put the allowed options for the tag (like [src|alt|id]) so I'm not sure what to put there for your example ...
the correct answer to your problem, tested by me and 100% working is to wrap your variable into htmlspecialchars in php like this example:
htmlspecialchars($myText)
I'm using "Jquery UI 1./Dan Wellman/Packt Publishing" to learn JQuery UI. I'm working on the 'Dialog widget' chapiter.
After I've completed a series of exercises in order to build a Dialog widget (using Google Chrome), I then tried my work with Internet Explorer and Firefox.
The result has been disappointing.
Chrome was perfet
With Internet Explorer, (1) the title of the Dialog widget did not appear, (2) The location of the dialog widget was not correct (given the position: ["center", "center"]). It was rather offset toward left.
With Firefox, the location was respected. However, only the outer container was visible. the content was missing, just a blank container.
Also using Option Show:true and Hide:true did only work with Chrome.
I wonder now if JQuery UI was meant to be used only with Google Chrome. I just think that I might be missing some directives to make it work with major browsers (as the author claimed in his book).
Here's the code. Since, I'm using ASP.NET MVC, certain codes, such as the element to the css, do not appear. But, for the rest, all the functioning code is bellow.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<p>
The goal of this tutorial is to explain one method of creating
model classes for an ASP.NET MVC application. In this tutorial,
you learn how to build model classes and perform database access
by taking advantage of Microsoft LINQ to SQL. In this tutorial,
we build a basic Movie database application. We start by creating
the Movie database application in the fastest and easiest way possible.
We perform all of our data access directly from our controller actions.
</p>
<div style = "font-size:.7em" id = "myDialog" title = "This is the title">
In this tutorial -- in order to illustrate how you can build model classes
-- we build a simple Movie database application.
The first step is to create a new database. Right-click the
App_Data folder in the Solution Explorer window and select the menu option
Add, New Item. Select the SQL Server Database template, give it the name
MoviesDB.mdf, and click the Add button (see Figure 1).
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent"
runat="server">
<script src="../../Content/development-bundle/jquery-1.3.2.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.core.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.dialog.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.draggable.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.resizable.js"
type="text/javascript"></script>
<script
src="../../Content/development-bundle/external/bgiframe/jquery.bgiframe.js"
type="text/javascript"></script>
<script type = "text/javascript">
$(function() {
var execute = function() { }
var cancel = function() { }
var dialogOpts = {
position: ["center", "center"],
title: '<a href="/Home/About">A link title!<a>',
modal: true,
minWidth: 500,
minHeight: 500,
buttons: {
"OK": execute,
"Cancel": cancel
},
show:true,
hide: true,
bgiframe:true
};
$("#myDialog").dialog(dialogOpts);
});
</script>
Thank for helping.
EDIT
I've re-done the same exercise yesterday. From the beginning to the end, each time I've introduced a behavior, I've tested my work in all 3 browsers (IE, Firefox, Chrome).
Everything works until I add option Show and Hide. Then only Chrome works.
If I remove Show and Hide, everything works again.
If I keep only Show and Hide, everything works perfectly
Maybe Show and Hide options for dialog widget do not mix up well with other options.
Thanks for helping.
No, jQuery UI works in any of those browsers. It's probably either the steps you're following don't work so well with the version you're using or the version you're using is old. I've used jQuery UI without issue on both browsers. If you don't believe me, then open this URL in your browser:
http://jqueryui.com/demos/dialog/
In Firefox 3.6, it loads just fine for me.
I'm not an expert on jQuery UI, but providing the code here might help.
jQuery supports all the major browsers however there are know issues with;
Firefox 1.0.x
Internet Explorer 1.0-5.x
Safari 1.0-2.0.1
Opera 1.0-8.x
Konqueror
We have successfully implemented a Dialog widget without major issues. We did have some problems making sure the correct versions of the libraries were created. I would suggest you build a custom file using the jQuery UI download tool. This will put all the necessary files in a single minified file.
If the Dialog examples don't help then posting code will be necessary to obtain further help.
EDIT:
I have anchors created with the classes dialogOpen and dialogClose and use the following code to utilise the created UI Dialog;
$(document).ready(function(){
var dialogOpts = {
autoOpen: false,
modal: true,
width: 840,
height: 560
};
$(".dialogOpen").click(function(){
$("#myDialog").dialog("open");
return false;
});
$(".dialogClose").click(function(){
$("#myDialog").dialog("close");
return false;
});
$("#myDialog").css('display','block').dialog(dialogOpts);
$(".ui-dialog-titlebar").hide();
});
NB: The use of the css function when creating the dialog stops the content appearing on the page before the Dialog is created. We needed this because our dialog has flash.
You may be missing something. It surely works in all major browsers.
jQuery is ment to be cross browser. Any errors with this can have to reasons
- Programmer's error
- Explicit incompatibilty
There are some explicit incompatibility's with IE5.5 and IE6 in jQuery. They are in the comments of jQuery and a good js compatible IDE like netbeans will allow targeting and warn you about it.
I never had any problems with the dialog widget positioning or contents.
jQuery UI is most definitly not designed to work with Google Chrome only.
I've successfully created applications using jQuery UI working on all major browser platforms.
jQuery UI (and jQuery) contain code to work around certain browser issues.
Of course there can be issues in jQuery UI which show on IE, like this one, but those are certainly not by design.