Placed in: Home
mfDropCaps: Add your own drop caps to your Joomla articles

mfDropCaps A drop cap is an effective way to jazz up articles on your website. It'll make your site look a bit more professional. There are several CSS techniques to achieve this, but some are not cross-browser compatible and it doesn't support every font.

mfDropCaps replaces every first character of your article or paragraph with a beautiful drop cap by showing an image of the character. This technique is SEO-proof and you can create your own font by changing the images provided by mfDropCaps

mfDropCaps works with jQuery.

Example article

Example Article

Single mfDropCaps

Example Article

Multi mfDropCaps

Example Article

Install for Joomla 1.0.x

  1. Log in to your back-end of the site
  2. Go to "Installers", "Mambots"
  3. Click on "Browse" and navigate to the downloaded ZIP archive
  4. Press "Upload File & Install"
  5. Go to "Mambots", "Site Mambots"
  6. Search for mfDropCaps
  7. Publish the mambot

Install for Joomla 1.5

  1. Log in to your back-end of the site
  2. Go to "Extensions", "Install/Uninstall"
  3. Click on "Browse" and navigate to the downloaded ZIP archive
  4. Press "Upload File & Install"
  5. Go to "Extensions", "Plugin Manager"
  6. Search for mfDropCaps
  7. Publish the plugin

Download

Attribution-Share Alike 3.0

This plugin is based on the Multiple Fancy Drop Caps and uses a font from Moorstation.

Feel free to give feedback about this mambot/plugin. Enjoy using it!


Tags:  mambot free plugin joomla webdesign

Interested in this topic? You might enjoy another article I've written called

Comments
Add NewSearchRSS
Rade - Not Working on Joomla 1.5.2   2008-04-13 22:19:17
Gravatar image Sorry to inform you, but your plugin does not working in Joomla 1.5.2
Simply nothing appears. No change at all.
You should think also about blog front-page layout. It would be very inappropriate to have lots of these stuff on frontpage.
Reply | Quote
Mike - Not installing on 1.0.15   2008-04-14 18:04:32
Gravatar image I tried installing your plugin on our newspaper website but was unable. I tried both installs and got the same error on both. Is the Joomla 1.0x version accidently the 1.5x version?
Reply | Quote
Marco - Strange   2008-04-14 19:12:47
Gravatar image Rade, Mike, thanks for your replies.

It's pretty strange, but I tried installing it here (again) and they're working fine (both for J! 1.0.x and J! 1.5.x).

@Rade: Thanks for the feedback, I'll think about it in a later version.

@Mike: What is the error you're getting? Please contact me through the contact form and I'll help you over there.
Reply | Quote
Wendell - Joomla 1.5.3   2008-07-29 16:40:48
Gravatar image Marco, I'm trying to use your plugin, but i've got the same problem. Nothing happens when I turn on the plugin.
Thanks,

Wendell.
Reply | Quote
Mike - Error message   2008-04-14 19:47:15
Gravatar image Thanx for the quick reply Marco.

When I try installing either of the plugins on Joomla 1.0.15 I get the following error:

Upload module - Upload Failed
Unrecoverable error "PCLZIP_ERR_BAD_FORMAT (-10)"

Upload module - Failed
Installation file not found:
Reply | Quote
Marco - Repack - Try again   2008-04-15 09:12:07
Gravatar image Hi,

Try unpacking the ZIP file on your local machine. Than ZIP the files again, so you would create your own ZIP file.

Upload that file. It should work, good luck!
Reply | Quote
francesco - J1.5.2 Confirm: didn't work   2008-04-18 19:13:51
Gravatar image exactly as above the plugin install, configure, save and publish, but nothing happend... bah!

Ah, if someone know where can i download beauty dropcaps... simply tell here!
Reply | Quote
clientsolutionspro.com - found an error... with firebug..   2008-06-06 19:54:54
Gravatar image [Break on this error] var first_letter = text.substr(0,1);
mfdropca...single.js (line 18)

text is null
[Break on this error] var first_letter = text.substr(0,1);

it could be a conflict in JS.. causing it...
Reply | Quote
Bruno Levy - Bugfix   2008-08-03 15:27:10
Gravatar image Hi there,

Thank you for this nice plugin.

I may have a bugfix for your plugin:
when accessing nodes that do not have
the nodeValue attribute, it stops inserting
the dropCaps. Here is a suggestion of modification
to fix this. In addition, I'm using a "visited" class
to avoid visiting the same node twice.

Regards,

-- Bruno


/**
* mfdropcaps_multi.js,v 1.0
* @copyright (C) 2008 Marcofolio.net
* http://www.marcofolio.net/
*/

$(document).ready(function(){
swap_letter();
});
function swap_letter() {

$("table.contentpaneopen p:not(.visited)";).addClass("visited";).each(function(index) {
var node = this ;
while (node.childNodes.length) {
node = node.firstChild;
}

if(node.nodeValue != null && node.nodeValue.length > 0) {
var first_letter = node.nodeValue.substr(0,1) ;
var match = /[a-zA-Z]/.test(first_letter);
if(match) {
node.nodeValue = node.nodeValue.slice(1);

$('')
.attr('src','plugins/system/mfdropcaps/alphabet/' + first_letter.toLowerCase() + '.gif')
.attr('alt',first_letter)
.addClass('mfdropcaps')
.prependTo( this );

}
}
});
}
Reply | Quote
Bruno Levy - Bugfix (cntd)   2008-08-03 15:42:03
Gravatar image Ooops, forgot to put that in a "code"
block, sorry about that, here it is.

(note: I do not know exactly what I am
doing, but all I can say is that this
fixed the problem for me)

-- Bruno


Code:


/**

* mfdrop_multi.js,v 1.0

* @copyright (C) 2008 Marcofolio.net

* http://www.marcofolio.net/

*/



$(document).ready(function(){

  swap_letter();

});

function swap_letter() {



  $("table.contentpaneopen p:not(.visited)";).addClass("visited";).each(function(index) {

    var node = this ;

    while (node.childNodes.length) {

        node = node.firstChild;

    }



    if(node.nodeValue != null && node.nodeValue.length > 0) {

       var first_letter = node.nodeValue.substr(0,1) ;

       var match = /[a-zA-Z]/.test(first_letter);

       if(match) {

          node.nodeValue = node.nodeValue.slice(1);



          $('')

                  .attr('src','plugins/system/mfdropcaps/alphabet/' + first_letter.toLowerCase() + '.gi$

                  .attr('alt',first_letter)

                  .addClass('mfdropcaps')

                  .prependTo( this );



       }

    }

  });

}
Reply | Quote
Fieke - Javascript alle garbled   2008-09-23 20:45:38
Gravatar image Hi,

I believe it's not working in J1.5 because the file jquery-1.2.3.min.js is completely scrambled, at least it is in Notepad++ which is considered a very good code editor, so that wouldn't wreck it. besides, i openend that file with Extplorer from within Joomla and it was all messed up there, in the first place. Perhaps something went wrong when you packaged it?

It looks like this...to my knowledge, this should look a lot cleaner...

[code]/*
* jQuery 1.2.3 - New Wave Javascript
*
* Copyright (c) 2008 John Resig (jquery.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* $Date: 2008-02-06 00:18:25 -0500 (Wed, 06 Feb 2008) $
* $Rev: 4660 $
*/
(function(){if(window.jQuery)var _jQuery=window.jQuery;var jQuery=window.jQuery=function(selector,context){return new jQuery.prototype.init(selector,context);};if(window.$)var _$=window.$;window.$=jQuery;var quickExpr=/^[^]*$|^#(\w+)$/;var isSimple=/^.[^:#\[\.]*$/;jQuery.fn=jQuery.prototype={init:function(selector,context){selector=selector||document;if(selector.nodeType){this[0]=selector;this.length=1;return this;}else if(typeof selector=="string";){var match=quickExpr.exec(selector);if(match&&(match[1]||!context)){if(match[1])selector=jQuery.clean([match[1]],context);else{var elem=document.getElementById(match[3]);if(elem)if(elem.id!=match[3])return jQuery().find(selector);else{this[0]=elem;this.length=1;return this;}else
selector=[];}}else
return new jQuery(context).find(selector);}else if(jQuery.isFunction(selector))return new jQuery(document)[jQuery.fn.ready?"ready":"load"](selector);return this.setArray(selector.constructor==Array&&selector||(selector.jquery||selector.length&&selector!=window&&!selector.nodeType&&selector[0]!=undefined&&selector[0].nodeType)&&jQuery.makeArray(selector)||[selector]);},jquery:"1.2.3",size:function(){return this.length;},length:0,get:function(num){return num==undefined?jQuery.makeArray(this):this[num];},pushStack:function(elems){var ret=jQuery(elems);ret.prevObject=this;return ret;},setArray:function(elems){this.length=0;Array.prototype.push.apply(this,elems);return this;},each:function(callback,args){return jQuery.each(this,callback,args);},index:function(elem){var ret=-1;this.each(function(i){if(this==elem)ret=i;});return ret;},attr:function(name,value,type){var options=name;if(name.constructor==String)if(value==undefined)return this.length&&jQuery[type||"attr"](this[0],name)||undefined;else{options={};options[name]=value;}return this.each(function(i){for(name in options)jQuery.attr(type?this.style:this,name,jQuery.prop(this,options[name],type,i,name));});},css:function(key,value){if((key=='width'||key=='height')&&parseFloat(value)] [^+>]/.test(selector)||selector.indexOf("..";)>-1?jQuery.unique(elems):elems);},clone:function(events){var ret=this.map(function(){if(jQuery.browser.msie&&!jQuery.isXMLDoc(this)){var clone=this.cloneNode(true),container=document.createElement("div";);container.appendChild(clone);return jQuery.clean([container.innerHTML])[0];}else
return this.cloneNode(true);});var clone=ret.find("*";).andSelf().each(function(){if(this[expando]!=undefined)this[expando]=null;});if(events===true)this.find("*";).andSelf().each(function(i){if(this.nodeType==3)return;var events=jQuery.data(this,"events";);for(var type in events)for(var handler in events[type])jQuery.event.add(clone[i],type,events[type][handler],events[type][handler].data);});return ret;},filter:function(selector){return this.pushStack(jQuery.isFunction(selector)&&jQuery.grep(this,function(elem,i){return selector.call(elem,i);})||jQuery.multiFilter(selector,this));},not:function(selector){if(selector.constructor==String)if(isSimple.test(selector))return this.pushStack(jQuery.multiFilter(selector,this,true));else
selector=jQuery.multiFilter(selector,this);var isArrayLike=selector.length&&selector[selector.length-1]!==undefined&&!selector.nodeType;return this.filter(function(){return isArrayLike?jQuery.inArray(this,selector)0:false;},hasClass:function(selector){return this.is("."+selector);},val:function(value){if(value==undefined){if(this.length){var elem=this[0];if(jQuery.nodeName(elem,"select";)){var index=elem.selectedIndex,values=[],options=elem.options,one=elem.type=="select-one";if(index=0);else if(jQuery.nodeName(this,"select";)){var values=value.constructor==Array?value:[value];jQuery("option",this).each(function(){this.selected=(jQuery.inArray(this.value,values)>=0||jQuery.inArray(this.text,values)>=0);});if(!values.length)this.selectedIndex=-1;}else
this.value=value;});},html:function(value){return value==undefined?(this.length?this[0].innerHTML:null):this.empty().append(value);},replaceWith:function(value){return this.after(value).remove();},eq:function(i){return this.slice(i,i+1);},slice:function(){return this.pushStack(Array.prototype.slice.apply(this,arguments));},map:function(callback){return this.pushStack(jQuery.map(this,function(elem,i){return callback.call(elem,i,elem);}));},andSelf:function(){return this.add(this.prevObject);},data:function(key,value){var parts=key.split(".";);parts[1]=parts[1]?"."+parts[1]:"";if(value==null){var data=this.triggerHandler("getData"+parts[1]+"!",[parts[0]]);if(data==undefined&&this.length)data=jQuery.data(this[0],key);return data==null&&parts[1]?this.data(parts[0]):data;}else
return this.trigger("setData"+parts[1]+"!",[parts[0],value]).each(function(){jQuery.data(this,key,value);});},removeData:function(key){return this.each(function(){jQuery.removeData(this,key);});},domManip:function(args,table,reverse,callback){var clone=this.length>1,elems;return this.each(function(){if(!elems){elems=jQuery.clean(args,this.ownerDocument);if(reverse)elems.reverse();}var obj=this;if(table&&jQuery.nodeName(this,"table";)&&jQuery.nodeName(elems[0],"tr";))obj=this.getElementsByTagName("tbody";)[0]||this.appendChild(this.ownerDocument.createElement("tbody";));var scripts=jQuery([]);jQuery.each(elems,function(){var elem=clone?jQuery(this).clone(true)[0]:this;if(jQuery.nodeName(elem,"script";)){scripts=scripts.add(elem);}else{if(elem.nodeType==1)scripts=scripts.add(jQuery("script",elem).remove());callback.call(obj,elem);}});scripts.each(evalScript);});}};jQuery.prototype.init.prototype=jQuery.prototype;function evalScript(i,elem){if(elem.src)jQuery.ajax({url:elem.src,async:false,dataType:"script"});else
jQuery.globalEval(elem.text||elem.textContent||elem.innerHTML||"";);if(elem.parentNode)elem.parentNode.removeChild(elem);}jQuery.extend=jQuery.fn.extend=function(){var target=arguments[0]||{},i=1,length=arguments.length,deep=false,options;if(target.constructor==Boolean){deep=target;target=arguments[1]||{};i=2;}if(typeof target!="object"&&typeof target!="function";)target={};if(length==1){target=this;i=0;}for(;i
Reply | Quote
Keri   2008-09-27 01:48:33
Gravatar image I installed mfdropcaps but the dropcaps keep disappearing. Sometimes they are there and then they are gone. What can I do? What is happening?
Reply | Quote
Vario   2009-01-24 21:57:37
Gravatar image B) what are you talking about, guys? all is working without any problem on my 1.5.9 Joomla. Did you enabled plugin?

Marco... what about Joomfish support? can You make something with that issue? I mean let plugin to change Cap image depending on language of the page.
Reply | Quote
some dude - error   2009-02-12 12:49:38
Gravatar image ok..well...it worked..but instead of changing the first letter of the first paragraph of an article it changed the very first word that appears on every page of my website which happens to not be in any article.....so...yah...
Reply | Quote
Gerharft   2009-04-13 22:46:30
Gravatar image I couldn't get it to work either in Joomla 1.5.9. It also made the the template for the site act differently.
Reply | Quote
ABTOP   2009-11-05 11:13:42
Gravatar image Why couldn't you write a single word of documentation on how to use this? Am I expected to sift though the code to figure out how to use it? Pathetic.
Reply | Quote
hair loss cure guide - hair loss cure guide   2011-06-09 05:32:33
Gravatar image I am very glad to post a comment on your blog as I really enjoyed reading your posts.
Reply | Quote
drugs pharmacy journal - drugs pharmacy journal   2011-06-09 05:33:07
Gravatar image The information provided was extremely useful and informative. Thanks a lot for useful stuff.
Reply | Quote
drug store blog - drug store blog   2011-06-09 05:33:38
Gravatar image This article is so interesting I am completely engrossed. Really I appreciate the efforts you take for making these posts. Thanks for sharing with us such useful information.
Reply | Quote
hair weight loss pills - hair weight loss pills   2011-06-09 05:34:20
Gravatar image I really enjoy reading your well written articles. I think you spend numerous effort and time in posting the blog. I have bookmarked it and I am looking ahead to reading new articles. Keep up the good articles!
Reply | Quote
diabetes pills bar - diabetes pills bar   2011-06-09 05:34:57
Gravatar image You are awesome people and bring great info; I definitely look forward for your work as I am a regular visitor of your site. Thanks a lot, superb work!!!!!
Reply | Quote
diabetiedtes pills tips - diabetiedtes pills tips   2011-06-09 05:35:32
Gravatar image I am strongly associated with this site. As this site has inspired me a lot always in a new way and made my work easy by every time highlighting on the new issue and make me pleased. Thanks you people rock!!!!!!
Reply | Quote
hot pharmacy diary - hot pharmacy diary   2011-06-09 05:36:08
Gravatar image I am frequent reader of the articles and new knowledgeable post about new things always and would be searching new stuff for that. And I really thank you people for providing us new articles and post. Thanks a lot!
Reply | Quote
overweight pill - overweight pill   2011-06-09 05:36:46
Gravatar image It was really surprising to see such a wonderful post that is inspiring and informative and caught the attention of many people. I am a regular visitor of the blog and love the work of these people.
Reply | Quote
pharmacy club - pharmacy club   2011-06-09 05:37:19
Gravatar image This is a wonderful website that has great info and is helpful for one and all. I always look forward for your website to gather any kind of information. Hope you people do like this only wonderful job. Cheers
Reply | Quote
best pharmacy online guide - best pharmacy online guide   2011-06-09 05:38:13
Gravatar image I often like surfing on net and find info on new things and this time I got a new website which has great info and is quite brilliantly written. Am just thrilled and excited to see this and hope to see more work of you people in future.
Reply | Quote
online birth control pills hub - online birth control pills hub   2011-06-09 05:40:15
Gravatar image I often like surfing on net and find info on new things and this time I got a new website which has great info and is quite brilliantly written. Am just thrilled and excited to see this and hope to see more work of you people in future.
Reply | Quote
best pharmacy plus online - best pharmacy plus online   2011-06-09 05:41:54
Gravatar image You guys are really wonderful who search and bring such a wonderful info, I am glad to see this time also a useful stuff that had inspired me. Thanks a lot do keep giving us genuine stuff
Reply | Quote
herbal hair style loss - herbal hair style loss   2011-06-09 05:42:35
Gravatar image I enjoy reading the post and have become a great fan of yours. Keep up with the good job and please provide us with great blogs. I really appreciate the research you people take for the posts.
Reply | Quote
natural anti smoking pills gui - natural anti smoking pills guide   2011-06-09 05:43:09
Gravatar image It was perfect collection of such useful information. This was a helpful post foe me. Thanks for sharing such nice information. Thanks a lot!
Reply | Quote
online pharmacyt ips - online pharmacyt ips   2011-06-09 05:43:43
Gravatar image I was a great experience to read your post. I found your site from Google and thank a lot for this nice and wonderful information. The information posted was useful and interesting.
Reply | Quote
hirmani80   2011-08-02 06:50:41
Gravatar image Wow, this is display the nice info in this blog and the great technology is visible in this blog. I am very much satisfied by the info in this blog. Thanks a lot for providing the nice info in this blog.
Reply | Quote
casino euro dansk - casino euro dansk   2011-08-04 07:38:41
Gravatar image This is very much interesting info in this blog and I was searching for something info in this website and the great technology is visible in this blog. Thank you very much for providing the nice info in this blog.
Reply | Quote
Lia - MfDropCaps   2011-09-26 03:21:25
Gravatar image Hello,

I just downloaded the MfDropCaps for use on a client's site and enabled it. Nothing's showing. How do you configure this plugin? How do you enable it for certain articles and not others? Thanks! I'm using Joomla 1.5.2
Reply | Quote
Read more...
Name:
Email:
  Gravatar enabled.
Website:
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Security Image
Please input the anti-spam code that you can read in the image.
Unsubscribe from e-mail notifications.
 
< Prev   Next >
[ Back ]
Subscribe

Subscribe to Marcofolio