We are using ckeditor inline edit in our asp.net mvc application. It removes the script tag when rendering the content. Following is the script we are trying to add in the source mode and save it to the database:
<script type="text/javascript" language="javascript">
$(function() {
document.oncontextmenu = function() { alert('Right click disabled for security reasons!!') ;return false;}
});
</script>
It adds fine to the database and when rendering the content back to the webpage, it removes the script tag.
Below is the image where I was able to add the script and save:
Below is the image where it removed the script when rendering back the page after save:
Following is the code i am using in my page to render the saved content:
<div id="content_editable" contenteditable="true">#Html.Raw(Model.PageContent.ToString())</div>
When i remove Html.Raw, it displays the script as the text in the page, but I need to have the script only in the source mode. I also have allowedContent = true in my config.js of ckeditor.
Please suggest how to handle this?
Related
I am making a rails app where I want a fullscreen video in the background. Should I use html5 or .js to do this? If I'm going to use .js, is bigvideo.js any good even though there is no gem for it yet?
Add the jquery plugin Bigvideo.js to your JS folder.
require the plugin in your application.js file
call the plugin at the bottom of your <body> tag. This should prepare the page for the js, and then fire the function upon loading the page.
<script type="text/javascript">
$( document ).ready(function() {
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('http://wherevideoislocated.mp4');
});
});
</script>
.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 am using Xcode 4 with PhoneGap (Cordova 1.6) and ChildBrowser. I've used SiteCrawler on OSX to successfully download a website and localize it, and it is fully browsable locally with images, PDFs, etc. I have moved all the localized site files into the PhoneGap www folder and the app test builds fine - the site is fully browse able.
I want the PDFs on the site to open in their own window, and ChildBrowser does this perfectly as far as my needs. Using http://blog.digitalbackcountry.com/2012/03/installing-the-childbrowser-plugin-for-ios-with-phonegapcordova-1-5/ I was able to get ChildBrowser installed and working - I have PDF files opening in the ChildBrowser.
My problem is that using the link above, I have to add ontouchstart="loadChildBrowser('/path/to/file.pdf'); return false;" to every PDF link on the site. Since we use a CMS, this isn't much of a problem - the bulk of PDFs are called from a template with data filled in from the CMS and they are fine. But there are some pages in the site where the client has added a link to an uploaded PDF into the content of the page. In this case, there is no easy way to add the above code to the inline link.
I figured that I can use jQuery to look at each a tag on the page when clicked and if clicked, run the ChildBroswer instance, and this would cover both types of PDF links, but I can't seem to get it to work. Here is what I have:
<script type="text/javascript" src="/a/js/cordova-1.6.0.js"></script>
<script type="text/javascript" src="/a/js/ChildBrowser.js"></script>
<script>
// install ChildBrowser
var cb = ChildBrowser.install();
//loading a web page in ChildBrowser
$('a[href$=pdf]').click(function() {
var href = $(this).attr('href');
cb.showWebPage(encodeURI(href));
return false;
});
</script>
Using the above with no inline link javascript, the PDF opens on its own, without child browser.
Using the below along with ontouchstart="loadChildBrowser('/path/to/file.pdf'); return false;", child browser will open, and for some links shows the PDF, and for others just says loading. I figure this is just tweaking for paths, but I think the above would be most universal if it can be made to work.
<script type="text/javascript" src="/a/js/cordova-1.6.0.js"></script>
<script type="text/javascript" src="/a/js/ChildBrowser.js"></script>
<script>
// install ChildBrowser
var cb = ChildBrowser.install();
//loading a web page in ChildBrowser
function loadChildBrowser(file) {
cb.showWebPage(encodeURI(file));
}
</script>
Through trial and error I was able to get this working for the most part. I'm still hitting a couple of unrelated bugs (well, related to Childbrowser but not the loading go local PDF files).
So, using ontouchstart="loadChildBrowser('/path/to/file.pdf'); return false;" on all links to PDFs on the site is still the way to go. What changed was the JS function I am using to determine the path to the PDFs and launch ChildBrowser. I had to do this:
<script type="text/javascript" src="/a/js/cordova-1.6.0.js"></script>
<script type="text/javascript" src="/a/js/ChildBrowser.js"></script>
<script>
// install ChildBrowser
var cb = ChildBrowser.install();
//loading a web page in ChildBrowser
function loadChildBrowser(file) {
var path = location.pathname+file;
var len = path.length;
var locleft = path.indexOf('/www/')+4;
var trim = len-locleft;
var left = path.slice(0,-trim);
var locright = path.indexOf('/assets/');
var trim = len-locright;
var right = path.slice(-trim);
var finalPath = left+right;
cb.showWebPage(encodeURI(finalPath));
}
</script>
in my included header file (so it lives in the head of every page on the site). The problem was that when ChildBrowser pulled up the path to the file, it was appending the part below the normal site's web root (/assets/documents/xxx.pdf) to the full path to the page being viewed in the app at the time, so I ended up with:
/var/users/name/blah/blah/www/page.html/assets/documents/xxx.pdf
when we wanted:
/var/users/name/blah/blah/www/assets/documents/xxx.pdf
The script above prepends location.pathname to the file var passed from the function (ontouch start) that calls ChildBrowser so that we end up with
/var/users/name/blah/blah/www/page.html/assets/documents/xxx.pdf (not correct)
It then splits it into a left section (everything before /www) and a right section (everything including and after /assets/) and then concatenates them (effectively removing all the site directory and html file information) and then calls ChildBrowser with that finalPath. Working for me.
I have followed all the instructions to get the back button to appear but it's not working.
Here is what I'm following:
*The auto-generated Back button feature is off by default.
To activate auto generated back buttons on specific pages, simply add the data-add-back-btn="true" attribute on the page container and the magic will be back. To activate this globally, set the addBackBtn option in the page plugin to true. Here is an example of how to set this:
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
Note: You must include this script before the jQuery Mobile library is referenced in the head of your page for this to work. The mobileinit event is triggered immediately upon execution, so you need to bind event handlers before jQuery Mobile is loaded. Learn more about setting global config options.*
I've also cleared the cache and I still don't get the back button...
I'm I missing something new?
OK I found the solution.
I've decided to post it here for anyone who might have the same problem.
The code must be instead in a specific order.
After the jquery library but before the jqm library...
Make sure that this snippet is AFTER jQuery library loads but BEFORE jQueryMobile library is loaded... so:
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script type="text/javascript" src="jquery.mobile-1.0b1.js"></script>
Solution found here:
http://forum.jquery.com/topic/i-need-back-button-back
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.