Show system-messages in lightbox or module

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Neighbour
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Tue May 13, 2008 1:12 pm

Show system-messages in lightbox or module

Post by Neighbour » Sat Dec 19, 2009 10:16 am

Hi there,

Is it possible to display the system messages (displayed by <jdoc:include type="message"> in the template) in a lightbox or a specific module? I do not really like the standard position above or under the main content.

Martijn Buurman

Tuuni
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Thu Oct 01, 2009 2:38 pm

Re: Show system-messages in lightbox or module

Post by Tuuni » Sat Dec 19, 2009 5:22 pm

Iam looking familiar solution what can fade-in and fade-out system messages (timed fade-out).

Any ideas? anyone? :pop

Tuuni
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Thu Oct 01, 2009 2:38 pm

Re: Show system-messages in lightbox or module

Post by Tuuni » Sat Dec 19, 2009 5:49 pm

Tuuni wrote:Iam looking familiar solution what can fade-in and fade-out system messages (timed fade-out).

Any ideas? anyone? :pop
I found one solution with mootools.

Add this script to page head after where mootools script is loaded:

Code: Select all


<script type="text/javascript" >
 var tmjmosmsg,fx;
 function pload(){
 tmjmosmsg=$$('dl#system-message');
 if($type(tmjmosmsg[0])=='element'){
 var el=tmjmosmsg[0];
 el.setStyle('overflow','hidden');
 var h=el.getSize().size.y;
 fx = new Fx.Styles(el, {duration:900, wait:false});
 //scrol to message
 winScroller = new Fx.Scroll(window);
 winScroller.toElement($('header'));
 //delayed start, then remove the html element upon completion
 
(function(){
 
fx.start({
 
'margin-top':-1*h.toInt(),
 
opacity:0
 
 
}).chain(function(){el.remove();});
}).delay(2500);
 
 }
 
 };
 
 window.addEvent('load',function(){
 pload();
 }
 
 );
 </script>


Works with Joomla 1.5.
If you have joomla 1.0 then change the 3rd line to tmjmosmsg=$$('div.message');

It is almoust perfect to me cuz i don't want my page refresh.

Any ideas how to do it with ajax?

Neighbour
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Tue May 13, 2008 1:12 pm

Re: Show system-messages in lightbox or module

Post by Neighbour » Sun Dec 20, 2009 8:19 am

I tried to put the code in my template HTML between the <head> tags: no result. Is this the right place to put the code? Any other idea's?

Thanx in advance..

Martijn

Neighbour
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Tue May 13, 2008 1:12 pm

Re: Show system-messages in lightbox or module

Post by Neighbour » Sun Dec 20, 2009 8:23 am

Sorry, it does work and it works fine! I put <jdoc:include type="message"> instead of <jdoc:include type="message" /> in my template. After I fixed this it works like a charm.

Thanx!

Martijn

fronsky
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Sun Dec 06, 2009 9:24 pm

Re: Show system-messages in lightbox or module

Post by fronsky » Mon Jan 04, 2010 8:19 pm

Has anybody already found a solution for the original question of having the message in a (fading) lightbox/popup?

This would help me a lot.
Rgds,
Fronsky

xenous
Joomla! Apprentice
Joomla! Apprentice
Posts: 18
Joined: Sat Dec 16, 2006 3:02 pm
Contact:

Re: Show system-messages in lightbox or module

Post by xenous » Tue Jan 05, 2010 12:51 am

Hello,

I have a solution with modal box.
First of all make sure your template calls mootools and Modal Box

Code: Select all

<?php 
JHTML::_('behavior.mootools');
JHTML::_('behavior.modal');
php?>
Then have your head tag includes the following:

Code: Select all

<?php
if ($this->getBuffer('message')) : ?>
<script type="text/javascript">
window.addEvent('domready', function() {
var myel = new Element('a',{'href':'#error_info'});
SqueezeBox.fromElement(myel,{
handler:'adopt',
adopt:'error_info',
});
});
</script>
<?php endif; ?>
In template have your error messages put in a div which is hidden and another div to call the adopt:

Code: Select all

<div style="display:none;">
<div id="error_info"><jdoc:include type="message" />
</div>
</div>
I am sure this will do the trick.

fronsky
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Sun Dec 06, 2009 9:24 pm

Re: Show system-messages in lightbox or module

Post by fronsky » Tue Jan 05, 2010 12:22 pm

Thank you very much! Looks promising, but seems to need some adjustment (I'm probably doing something wrong..)

When testing it actually shows an modal window, but this window is empty and still the normal messages are shown on the main screen.

Can you give me another hint?
Rgds,
Fronsky

xenous
Joomla! Apprentice
Joomla! Apprentice
Posts: 18
Joined: Sat Dec 16, 2006 3:02 pm
Contact:

Re: Show system-messages in lightbox or module

Post by xenous » Wed Jan 06, 2010 2:04 am

fronsky wrote:Thank you very much! Looks promising, but seems to need some adjustment (I'm probably doing something wrong..)

When testing it actually shows an modal window, but this window is empty and still the normal messages are shown on the main screen.

Can you give me another hint?
Hi,

If you see the 3rd part of solution my error messages are in a hidden div. Which makes sure its not visible in site content. I think your div id's etc are not correct if you use them as same with mine then it will be OK or change the id of the div to yours in the 2nd part of code.

Cheers
Onur Demir

fronsky
Joomla! Apprentice
Joomla! Apprentice
Posts: 16
Joined: Sun Dec 06, 2009 9:24 pm

Re: Show system-messages in lightbox or module

Post by fronsky » Fri Jan 08, 2010 9:27 pm

Still no success. Sorry I'm not a real PHP/HTML expert.

The problem is problably the way the template JA Purity II is constructed. It uses various tag types.

Underneath part of a firebug examination of the presented HTML and after that part of the source:

<div id="ja-container" class="wrap ja-r1">
<div class="main clearfix">
<div id="ja-mainbody" style="width: 80%;">
<div id="ja-main" style="width: 100%;">
<div class="inner clearfix">
<dl id="system-message">
<dt class="message">Bericht</dt>
<dd class="message message fade">
<ul>
<li>Error saving item</li>
</ul>
</dd>
</dl>


Related source in template where I replaced the original jdoc:

<!-- CONTENT -->
<div id="ja-main" style="width:<?php echo $this->getColumnWidth('m') ?>%">
<div class="inner clearfix">

<!-- <jdoc:include type="message" /> -->
<!-- start hzw -->
<div style="display:none;">
<div id="error_info"><jdoc:include type="message" />
</div>
</div>
<!-- end hzw -->
Rgds,
Fronsky

xenous
Joomla! Apprentice
Joomla! Apprentice
Posts: 18
Joined: Sat Dec 16, 2006 3:02 pm
Contact:

Re: Show system-messages in lightbox or module

Post by xenous » Sat Jan 09, 2010 12:31 pm

Try using

Code: Select all

<div style="display:none;">
<div id="error_info"><jdoc:include type="message" />
</div>
</div>
right after <body> tag And are you sure you included head parts?

evis
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Wed Apr 28, 2010 4:56 am

Re: Show system-messages in lightbox or module

Post by evis » Wed Apr 28, 2010 9:58 am

when I'm using in my template(rocketheme quative) this line <jdoc:include type="message" /> I got system messages twise in very top out of content and in very top in content.

Can everyone tell me were to find solution, for system messages popup and some styling???

PLEEAAAS HELP. my site with those ugly messages looks like dark hole....

evis
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Wed Apr 28, 2010 4:56 am

Re: Show system-messages in lightbox or module

Post by evis » Thu Apr 29, 2010 6:07 am

Hi guys!!

This is solution what I needed:
http://extensions.joomla.org/extensions ... ames/10999

Many thanks to ALEX (http://extensions.joomla.org/extensions ... I7fQ%3D%3D) for the help.

ampz21
Joomla! Explorer
Joomla! Explorer
Posts: 274
Joined: Sat Apr 10, 2010 9:48 pm

Re: Show system-messages in lightbox or module

Post by ampz21 » Mon Jul 12, 2010 11:36 am

evis wrote:Hi guys!!

This is solution what I needed:
http://extensions.joomla.org/extensions ... ames/10999

Many thanks to ALEX (http://extensions.joomla.org/extensions ... I7fQ%3D%3D) for the help.
Hi Evis, how did you get this to work then? I've tried the links and installed it, but it only shows the backend messages in a popup? What about the frontend messages?

Thanks ;)

esperado
Joomla! Apprentice
Joomla! Apprentice
Posts: 33
Joined: Thu Feb 16, 2006 1:43 pm

Re: Show system-messages in lightbox or module

Post by esperado » Sat Aug 21, 2010 12:54 am

Lightbox os squeezebox is a very heavy and complicated solution just to show sometimes system messages. My proposal is more simple and stable and do the same.
Put your system message code in a div with a little javascript in the index.php of your template.

Code: Select all

<div d="systmsg" onclick="javascript:this.style.display='none';"><jdoc:include type="message" /></div>
You will need a little CSS formating in order to achieve what you want to do.
css for #systmsg:
position:absolute;
text-align:center;
width:100%;
top:300px (what you want)

And the #system-message need to be set as :
display:block;
width:(what you want);
max-height:(what you want);
margin-left:auto;
margin-right:auto;
z-index: 100;

Do not forget the 'DD.message ul li' for the content formating.)
That-is-it. and the messages appears like that on my site:Image
When you click on the "X" (or inside the message) the message simply disappear.

waltea
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Tue May 12, 2009 4:03 am

Re: Show system-messages in lightbox or module

Post by waltea » Fri Oct 29, 2010 11:35 pm

Esperado, I am really interested in your solution but cannot get it to work. Would you be willing to share the code that has it working on your site?

Andrew

sunilsinghgaur
Joomla! Apprentice
Joomla! Apprentice
Posts: 26
Joined: Sat Oct 30, 2010 12:53 pm

Re: Show system-messages in lightbox or module

Post by sunilsinghgaur » Tue Nov 02, 2010 9:13 am

Yes your code is nice.
thanks.

esperado
Joomla! Apprentice
Joomla! Apprentice
Posts: 33
Joined: Thu Feb 16, 2006 1:43 pm

Re: Show system-messages in lightbox or module

Post by esperado » Tue Nov 02, 2010 10:54 am

waltea wrote:Esperado, I am really interested in your solution but cannot get it to work. Would you be willing to share the code that has it working on your site?Andrew
I do nor understand: all the code is here. Is-it the typo :"<div d="systmsg" witch, of course has to be :

Code: Select all

<div id="systmsg"
?
Of course the CCS class names can change depending on your template.
The idea is very simple: The error message has to be included in a div over the others (declared in last position in HTML, positioned in absolute in CSS, do you need some higher Z-index ?).

The little javascript :
onclick="javascript:this.style.display='none';"
just hide this div when you click on it.

Of course, too, you will have to design this div according to your needs. On my site, a liitle gif background image with the the X button to look just like a modal box.

This is the code in my template:

Code: Select all

<div id="systmsg" onclick="javascript:this.style.display='none';">
  <jdoc:include type="message" />
</div>	
Witch will produce:

Code: Select all

<div onclick="javascript:this.style.display='none';" id="systmsg">
  <dl id="system-message">
    <dt class="message">Message</dt>
      <dd class="message message fade">
	<ul>
		<li>here will be the warning</li>
	</ul>
     </dd>
  </dl>
</div> 
I used a little trick in order to have my box adjusted in height to the contents: the image is high enough(400px), with top and side borders in it, transparent outside the borders, set as a background for the dl. The border-bottom is in the css of the DD with an overflow:auto.
As simple than that.

Regards

User avatar
loboche
Joomla! Apprentice
Joomla! Apprentice
Posts: 33
Joined: Wed Jun 30, 2010 3:09 am

Re: Show system-messages in lightbox or module

Post by loboche » Wed Dec 08, 2010 6:04 am

Great Job It works very good.

ceinstaller
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Thu Nov 10, 2005 6:11 am

Re: Show system-messages in lightbox or module

Post by ceinstaller » Sun Dec 12, 2010 9:00 pm

Hey all! Esperado, I've used your Javascript technique to create a box for system message and have it working. What I'm having problems with is formatting the actual box to look how I'd like it to look. (I apologize, I'm not a CSS hotshot.) Right now the message text appears and I can click on it to close the message, but it's just red text floating over the main content pane.

Can I trouble you (or someone else) to point me in the direction of formatting the actual box? I'm pretty sure the answer is updates to the template CSS file, but I can't quite figure out how to do it. I've tried to add a border around the text by adding a 'border: 1px solid #000000' to the systmsg and system-message classes, with no luck. You mentioned the ul and li tags, but I can't figure out how to get them customized for the message class.

Hopefully you or some other kind soul can point me in the right direction.

Thanks in advance,

~Mark

sbcarlos
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Mon Dec 13, 2010 12:37 am
Location: Santa Barbara, CA
Contact:

Re: Show system-messages in lightbox or module

Post by sbcarlos » Mon Dec 13, 2010 12:40 am

I used icons in the box to make it look better.

The code I used is this:

#systmsg{
position:absolute;
text-align:center;
width:100%;
top:100px;
z-index: 1000;
}
#system-message{
display:block;
width:300px;
max-height:200px;
margin-left:auto;
margin-right:auto;
z-index: 1000;
background:#fff;
border:1px solid #999;
-moz-border-radius:7px;
-webkit-border-radius:7px;
padding: 20px 0 20px 24px;
}
.message{
font-size:20px;
color:#09f;
margin-bottom:6px;
}
.message.fade{
color:#000;
font-size:12px;}

#system-message ul li {
padding:0 28px;
}
#system-message dd.error ul {
background:transparent url(../images/Red1.png) no-repeat scroll 0 center;
}
#system-message dd.notice {
background:transparent url(../images/Attention.png) no-repeat scroll 0 center;
}
#system-message dd.message {
padding:6px 0;
background:transparent url(../images/Blue.png) no-repeat scroll 0 center;
}
You do not have the required permissions to view the files attached to this post.

ceinstaller
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Thu Nov 10, 2005 6:11 am

Re: Show system-messages in lightbox or module

Post by ceinstaller » Wed Dec 15, 2010 5:52 am

sbcarlos, many thanks! That got me on the path!

~Mark

User avatar
loboche
Joomla! Apprentice
Joomla! Apprentice
Posts: 33
Joined: Wed Jun 30, 2010 3:09 am

Re: Show system-messages in lightbox or module

Post by loboche » Thu Dec 16, 2010 7:53 am

I have some problems with the style. How can I make the message to be like yours.
www.grupoquetzal.com
Thanks.

fordiy
Joomla! Apprentice
Joomla! Apprentice
Posts: 18
Joined: Sun Mar 06, 2011 11:44 pm

Re: Show system-messages in lightbox or module

Post by fordiy » Fri Mar 25, 2011 7:35 am

http://extensions.joomla.org/extensions ... ames/10999

it really works great! may solve all your problem

mjh2000
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Sun Feb 24, 2008 4:19 pm

Re: Show system-messages in lightbox or module

Post by mjh2000 » Wed Sep 14, 2011 9:36 pm

is there a lightbox for system messeges module in joomla 1.7 ???
I tried the one called DVMesseges in 1.7 - it took down my site.
thanks

mjh2000
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Sun Feb 24, 2008 4:19 pm

Re: Show system-messages in lightbox or module

Post by mjh2000 » Tue Oct 18, 2011 4:41 pm

Bump - any module you know of guys ???

planetjane414
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Sat Oct 15, 2011 3:11 am
Location: Philippines

Re: Show system-messages in lightbox or module

Post by planetjane414 » Sat Nov 05, 2011 6:41 am

esperado wrote:Lightbox os squeezebox is a very heavy and complicated solution just to show sometimes system messages. My proposal is more simple and stable and do the same.
Put your system message code in a div with a little javascript in the index.php of your template.

Code: Select all

<div d="systmsg" onclick="javascript:this.style.display='none';"><jdoc:include type="message" /></div>
thank's for your code.. it works very good! ;)

planetjane414
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Sat Oct 15, 2011 3:11 am
Location: Philippines

Re: Show system-messages in lightbox or module

Post by planetjane414 » Sat Nov 05, 2011 6:45 am

esperado wrote:Lightbox os squeezebox is a very heavy and complicated solution just to show sometimes system messages. My proposal is more simple and stable and do the same.
Put your system message code in a div with a little javascript in the index.php of your template.

Code: Select all

<div d="systmsg" onclick="javascript:this.style.display='none';"><jdoc:include type="message" /></div>
Thank's esperado... it works very good!!! :)
-jane ;)

agusdwi
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Tue Dec 20, 2011 4:27 am

Re: Show system-messages in lightbox or module

Post by agusdwi » Wed Jan 11, 2012 10:30 am

thanks deperado, thanks sbcarlos...
anyone know how to make it auto close, with simple code

picdome
Joomla! Intern
Joomla! Intern
Posts: 77
Joined: Mon Jul 13, 2009 8:20 am
Contact:

Re: Show system-messages in lightbox or module

Post by picdome » Mon Jan 16, 2012 9:20 am

am trying your solution for joomla 1.7 i had made my own css script to make the system error message showing in a modal window, but am not able to close it.

i tried your div and javascript
<div id="systmsg" onclick="javascript:this.style.display='none';">
<jdoc:include type="message" />
</div>
i placed this code in the index.php file of my template. (above the <?php code)

but this is giving me a full width modal div above my whole site content when the site load.



esperado wrote:Lightbox os squeezebox is a very heavy and complicated solution just to show sometimes system messages. My proposal is more simple and stable and do the same.
Put your system message code in a div with a little javascript in the index.php of your template.

Code: Select all

<div d="systmsg" onclick="javascript:this.style.display='none';"><jdoc:include type="message" /></div>
You will need a little CSS formating in order to achieve what you want to do.
css for #systmsg:
position:absolute;
text-align:center;
width:100%;
top:300px (what you want)

And the #system-message need to be set as :
display:block;
width:(what you want);
max-height:(what you want);
margin-left:auto;
margin-right:auto;
z-index: 100;

Do not forget the 'DD.message ul li' for the content formating.)
That-is-it. and the messages appears like that on my site:Image
When you click on the "X" (or inside the message) the message simply disappear.


Locked

Return to “Templates for Joomla! 1.5”