I'm trying to integrate CKEditor in a page of a SPA (Single Page Application).
CKEditor behaves correctly within the SPA page on the first visit, but not on next visits. For example, when pressing the backward browser arrow (to display the previous SPA page) and then the forward arrow (to display again the SPA page with CKEditor), CKEditor appears but the content has been erased and it's not reacting anymore. There is no carret when cliking on the text area. Also all API calls (such as setData() or resize()) have no effect anymore (whereas they were working on fist visit).
I presume CKEditor doesn't like its element to be removed from the DOM (that's what happens when switching to another page) and then be re-added to the DOM (that's what happens when visiting the page again).
EDIT ON July 5 2017
Thanks for your proposition to destroy CKEditor when leaving the page and to recreate it when navigating back, but this causes the lost of the editor state such as the the scrollbar position, the caret position, text selection, etc...
Ideally I would like to make it possible for a user to visit another page while he is in the middle of writing something in the editor (for example to check an information or copy a content from another page) and then to continue exactly where he was (no change on scrollbar, caret, selection,...) when he navigates back to the editor.
Is is possible?
Removing CKEditor just by removing its parent container like in your fiddle is not a good solution as CKEditor attaches some listeners to the DOM and by removing the container you are detaching those listeners which are not reattached then.
You should destroy the editor before removing from DOM and then recreate it. Remember that destroying happens in an async manner so to know when it is finished you may listen to destroy event.
Here is modified fiddle using destroy method (without handling destroy event which should be added).
EDIT ON July 10 2017
To preserve the state of the editor (scrollbar position, text selection, etc) between destroy - recreate, state of all this elements should be retained before destroying editor and then set after recreating it. It is doable, but requires some work and quite a lot of custom code.
Ideally I would like to make it possible for a user to visit another page while he is in the middle of writing something in the editor
Since you are creating a SPA application, for the above the better solution will be to use some floating/fixed container in which CKEditor is placed and which does not reload with rest of the page upon navigation (e.g. the same as Facebook chat works).
Also remember that recreating CKEditor takes some time (very short, but it may be still visible) so on every page navigation it will be visible for the user that something is happening with the editor even though its state does not changed.
Today i updated my firefox to the latest version and one big feature is the reader view for desktop. We launched a webshop two weeks ago and now there is this tiny "reader view" icon. When i click on it i get an error-message. My team-leader wants me to remove this feature when visiting this site.
is it possible to remove or hide the "reader view" feature from firefox when visiting my site?
There is currently no legit way of disabling Reader View for your website. Reader View is supposed to automatically detect on what pages it should be available and on what pages it should not.
If there is an issue with your website, your best option is probably to report it there: https://github.com/mozilla/readability/issues
You can also find more info about the issues affecting Reader View in Firefox there: https://wiki.mozilla.org/QA/Reader_view
Although I would not recommend it, there might be a way to fool Reader View into thinking it should not parse your website, if you really need to. A quick look at the source code reveals that it will not parse certain type of documents, certain URIs and malformed URLs. You would need to dig in the source to understand how/if your site can safely be adapted to avoid being parsed. The Reader View source code can be found here: https://mxr.mozilla.org/mozilla-release/source/toolkit/components/reader/ReaderMode.jsm or
https://dxr.mozilla.org/mozilla-release/source/toolkit/components/reader/ReaderMode.jsm
This Question shows how to Optimize website to show reader view in Firefox. So you have to ensure that your site is not optimized for the Reader View.
Don't use formatting options that are favoured for the Reader View and so on.
I guess this will suffice:
Don't use the <p> Tag
write all Textblocks in small portions
Here are some more details about the mechanism
Replace p tags with div tags in your page. It worked for me, even when I have div tags with pre tags (preformatted text) on the same page.
There is no way of forcing disabling the Reader View to the user, But if it is important to your site, you can notify the user to disable or not use the reader feature of firefox.
This would be the way to Disable the Reader on the users browser
in the Enter about:config in browser address bar
click the "I'll be careful I promise" box
search for reader.parse-on-load.enabled
toggle preference to false (right click > toggle to false )
close the about:config page > refresh browser > reader view icon has gone
put this code on your css code and you are done !
/* CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,
p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,
img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,
dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,
thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,
footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,
audio,video,adnav,adheader{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
I'm really quite new to Joomla and I've encountered a problem. On my homepage the article is showing just fine, but all the other modules (except for the menu bar) disappear when I switch to a smaller screen size. On my other pages the article doesn't even show anymore, just the menu bar. I'm using the purity III template. I have no idea what's going on since the settings in the layout of the template indicate that all modules that are showing on a desktop should also be displayed on a mobile device, and I've found no difference in settings in the articles itself. My site.
Thanks for your help!
It sounds like the responsive design hides them on purpose.
Just from a quick peek at your code using inspect element I can see that the class "slideshow hidden-xs" gets a display:none on smaller screen sizes and all of your main content is wrapped in that element. If all of your content is not supposed to be wrapped in that element (which I'm guessing it's not) you're most likely missing a closing tag on a div or something.
Find the missing closing tag (ie: /div, /a, etc) and it will probably solve your problem.
You can update the latest version of Joomla and check again that some problem is coming or not. I yes then download new theme for your website which is compatible with your theme.
I have a quite large app build using phonegap and jQuery mobile. I have about 5 pages withing the one HTML page (as per jQuery mobiles navigation system) all sharing one main JS file, which has 3400 lines of JS code.
The app has ran slower over the development period, and I Was wondering if it would make a difference splitting the app up into seperate HTML files and having them load into the DOM?
And secondly, would it also be worth splitting the javascript up so only javascript needed on the page is currently loaded with the page?
Like shall I have the whole 3400 lines of code loaded on device ready? or inject needed JS along with the page?
Yep as Nathan said I think you already know the answer.
I'd definitely recommend splitting your application into separate HTML pages and JavaScript, and loading the JavaScript only as and when you need it. I've heard people recommend a single-page architecture approach, although the difference there is that the HTML pages and JavaScript are injected in and loaded as and when they are needed.
See part 4 here in this PhoneGap tutorial for more information on properly implementing a single-page architecture.
It's not a good idea to load everything into memory at the start... it's an inefficient use of resources - as you can see from the slow performance.
And having separate HTML and JavaScript files should also be a lot easier to manage and understand as well.
After loading the too much data ~(250 records in listview) in jquery mobile page DOM. The navigation sytem transits very slow. I have tried verious tricks but unsuccessful. finally, I got the exceptable performance of navigation by applying below tricks.
Try to remove/hide the populated data from DOM when trying to change page.
when come back to page. repopulate it.
I want to a html page inside a dynamically created silverlight child window without telerik control.
The telerik control isn't doing anything you can't do yourself with enough effort - it's all just transparent user code.
So, you could create <div> and position it carefully just like the telerik control does - but of course this can be a lot of work (that's why folks would want to pay for their control).
This also only works when the plugin is windowless, which has lots of trade-offs (see MSDN - for example, accessibility support is greatly reduced or gone entirely, I can't recall which).
In out-of-browser mode, you can use the WebBrowser control, in case that helps should you wish to make your app available OOB later.
try one of these links:
1. http://forums.silverlight.net/forums/t/51784.aspx or
2. http://weblogs.asp.net/dwahlin/archive/2010/05/10/integrating-html-into-silverlight-applications.aspx
It can help