Multiple ckeditor on the same page with same ID - ckeditor

I would like to be able to replace multiple text area by ckeditor, but they will all have the same ID. Do you know how to do, because now, after loading one editor, it stops.
The actual JavaScript code:
<script>
CKEDITOR.replace( 'advance_editor' );
</script>
Thank you !

Related

How to add HTML textarea tag into ckeditor widget?

I have HTML textarea. I want to add this HTML tag into ckeditor textarea.
How to add textarea tag into ckeditor widget?
Your question is not fully understandable. From my understanding, I guess you are trying to make your text area into CKEDITOR.
You can use CKEDITOR in different ways. Check the link to get their JS to implement
it.
To make a text area into CKEDITOR simply use this code.
//how you r calling your ckeditor js depends on you. here i am using their cdn.
//and yeah height is optional.
<script src="https://cdn.ckeditor.com/4.10.1/standard/ckeditor.js"></script>
<script type="text/javascript">
CKEDITOR.replace('id_of_textarea', {height: 150});
</script>

ckeditor display <p>Text</p> instead of displaying HTML

Ck-editor is not displaying my content as HTML instead it displaying with HTML tags.
I have initialize ck-editor by below code:
$(document).ready(function() {
CKEDITOR.replace('long_description');
});
Please check form_helper file. May be html_escape will be problematic. Please try by removing this html_escape and let me know if it works.

jquery plugin conflict - display none becomes the default option on hard refresh but not by default

I am using two jquery plugins:
hero carousel and content hover.
Initially when I load the page the content hover works correctly, however when I carry out a hard refresh on the page it seems to default to display:none.
I have tried disabling the hero carousel plugin and this resolves the problem but I have no idea where the conflict may be between the two plugins.
I would paste all the code but that would mean pasting two huge chunks of jquery, the site in its current state can be found here the content hover plugin is currently on the bottom left image under the slider.
Thanks.
Take these two scripts:
<script>
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
easing: 'easeOutExpo',
css3pieFix: true
});
});
</script>
<script>
$('#d1').contenthover({
overlay_background:'#F25342',
overlay_opacity:0.8
});
</script>
And put them together like this:
<script>
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
easing: 'easeOutExpo',
css3pieFix: true
});
$('#d1').contenthover({
overlay_background:'#F25342',
overlay_opacity:0.8
});
});
</script>
I do not see any script binding your second carousel function. I also do not see the easing library which is available here: http://gsgd.co.uk/sandbox/jquery/easing/ You'll need that because you are using easing in your carousel function above.

Add Infinity Scroll Down in Joomla

How do I integrate Jquery code for Infinity/Autopager Scroll down in Joomla. And If possible the scroller to work on Chosen Articles.
if you want to add jQuery into your joomla made site then it is easy to load a jquery file like:
Add the following codes into your index.php file you will find this file in your template directory like : joomla/templates/rhuk_milkyway/index.php now simple open it and add the following code after <link> tab
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
now before starting your own jquery codes it is must to make your codes without conflicting with mootools and other, and for this just simple add jQuery.noConflict(); and place jQuery instead of $ for example:
<script>
jQuery.noConflict();
// now your codes like
jQuery('#someid').each(function(i, e){});
</script>

Is there a way of making normal links automatically load through ajax, rather than normally?

I haven't explained this well.
But what i mean is, if I have an ajax script that loads the content of a page in a DIV element, through the function 'loadpage('whatever.php');, instead of going around manually doing this to all links, is there a way of having a script that automatically makes all regular links load through that ajax function?
Like on Facebook, your profile loads through ajax, yet if you look at their code, they just have a regular link to the profile.
Cheers!
Sure, you can do it with jQuery.
This script goes through the document, finds every anchor element and binds an event handler to the click event of each. When the anchor element is clicked, the event handler finds the href attribute and loads that page into #targetDiv (you can call this div whatever you want, of course).
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("#targetDiv").load(($(this).attr("href") + " body");
return false;
});
});
</script>
...
<!-- In your document body, this is the div you'd load the pages into. -->
<div id="targetDiv"></div>
You can use JQuery for this (if I understand your question right).
First you can make the function loadpage() as follows:
function loadpage(divId, url) {
$('#' + divId).load(url);
return false;
}
.load() isn't supported by all browsers though. If you want to do this without .load() then you can check out .get(). For more info on .load(), take a look at http://docs.jquery.com/Ajax/load
I'm assuming it would go something like this:
$(document).ready(function(){
$("a").click(function(){
$("body").load($(this).attr("href") + " body");
return false;
});
});
This would make all <a> tags on the page call a function that downloads a HTML document from the href attribute of the tag, strip out it's body tag, and replace the contents of the current page's body tag with the contents of the new body tag. This way, it's easier to work this with no JavaScript, as well as integrate it into an existing site.
To use it, you place this into a <script> tag in the head of your main page, or in an external JS file.
Please note, however, that this code only updates the contents of the <body> tag, the head (including the title tag) remains untouched. You may need to add extra code to update things like this.
Simple and Nice. Check this out:
Bjax
Usage:
<script src="bjax.min.js" type="text/javascript"></script>
<link href="bjax.min.css" rel="stylesheet" type="text/css" />
Finally, include this in the HEAD of your html:
$('a').bjax();
For more settings, checkout demo here:
Bjax Demo

Resources