Show system-messages in lightbox or module
Moderator: General Support Moderators
Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
-
- Joomla! Fledgling
- Posts: 4
- Joined: Tue May 13, 2008 1:12 pm
Show system-messages in lightbox or module
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
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
-
- Joomla! Apprentice
- Posts: 21
- Joined: Thu Oct 01, 2009 2:38 pm
Re: Show system-messages in lightbox or module
Iam looking familiar solution what can fade-in and fade-out system messages (timed fade-out).
Any ideas? anyone?
Any ideas? anyone?
-
- Joomla! Apprentice
- Posts: 21
- Joined: Thu Oct 01, 2009 2:38 pm
Re: Show system-messages in lightbox or module
I found one solution with mootools.Tuuni wrote:Iam looking familiar solution what can fade-in and fade-out system messages (timed fade-out).
Any ideas? anyone?
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>
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?
-
- Joomla! Fledgling
- Posts: 4
- Joined: Tue May 13, 2008 1:12 pm
Re: Show system-messages in lightbox or module
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
Thanx in advance..
Martijn
-
- Joomla! Fledgling
- Posts: 4
- Joined: Tue May 13, 2008 1:12 pm
Re: Show system-messages in lightbox or module
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
Thanx!
Martijn
-
- Joomla! Apprentice
- Posts: 16
- Joined: Sun Dec 06, 2009 9:24 pm
Re: Show system-messages in lightbox or module
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.
This would help me a lot.
Rgds,
Fronsky
Fronsky
-
- Joomla! Apprentice
- Posts: 18
- Joined: Sat Dec 16, 2006 3:02 pm
- Contact:
Re: Show system-messages in lightbox or module
Hello,
I have a solution with modal box.
First of all make sure your template calls mootools and Modal Box
Then have your head tag includes the following:
In template have your error messages put in a div which is hidden and another div to call the adopt:
I am sure this will do the trick.
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?>
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; ?>
Code: Select all
<div style="display:none;">
<div id="error_info"><jdoc:include type="message" />
</div>
</div>
-
- Joomla! Apprentice
- Posts: 16
- Joined: Sun Dec 06, 2009 9:24 pm
Re: Show system-messages in lightbox or module
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?
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
Fronsky
-
- Joomla! Apprentice
- Posts: 18
- Joined: Sat Dec 16, 2006 3:02 pm
- Contact:
Re: Show system-messages in lightbox or module
Hi,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?
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
-
- Joomla! Apprentice
- Posts: 16
- Joined: Sun Dec 06, 2009 9:24 pm
Re: Show system-messages in lightbox or module
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 -->
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
Fronsky
-
- Joomla! Apprentice
- Posts: 18
- Joined: Sat Dec 16, 2006 3:02 pm
- Contact:
Re: Show system-messages in lightbox or module
Try using
right after <body> tag And are you sure you included head parts?
Code: Select all
<div style="display:none;">
<div id="error_info"><jdoc:include type="message" />
</div>
</div>
-
- Joomla! Apprentice
- Posts: 11
- Joined: Wed Apr 28, 2010 4:56 am
Re: Show system-messages in lightbox or module
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....
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....
-
- Joomla! Apprentice
- Posts: 11
- Joined: Wed Apr 28, 2010 4:56 am
Re: Show system-messages in lightbox or module
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.
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.
-
- Joomla! Explorer
- Posts: 274
- Joined: Sat Apr 10, 2010 9:48 pm
Re: Show system-messages in lightbox or module
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?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.
Thanks
-
- Joomla! Apprentice
- Posts: 33
- Joined: Thu Feb 16, 2006 1:43 pm
Re: Show system-messages in lightbox or module
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.
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:
When you click on the "X" (or inside the message) the message simply disappear.
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>
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:
When you click on the "X" (or inside the message) the message simply disappear.
-
- Joomla! Apprentice
- Posts: 11
- Joined: Tue May 12, 2009 4:03 am
Re: Show system-messages in lightbox or module
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
Andrew
-
- Joomla! Apprentice
- Posts: 26
- Joined: Sat Oct 30, 2010 12:53 pm
Re: Show system-messages in lightbox or module
Yes your code is nice.
thanks.
thanks.
-
- Joomla! Apprentice
- Posts: 33
- Joined: Thu Feb 16, 2006 1:43 pm
Re: Show system-messages in lightbox or module
I do nor understand: all the code is here. Is-it the typo :"<div d="systmsg" witch, of course has to be :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
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>
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>
As simple than that.
Regards
- loboche
- Joomla! Apprentice
- Posts: 33
- Joined: Wed Jun 30, 2010 3:09 am
Re: Show system-messages in lightbox or module
Great Job It works very good.
-
- Joomla! Apprentice
- Posts: 21
- Joined: Thu Nov 10, 2005 6:11 am
Re: Show system-messages in lightbox or module
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
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
-
- 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
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;
}
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.
-
- Joomla! Apprentice
- Posts: 21
- Joined: Thu Nov 10, 2005 6:11 am
Re: Show system-messages in lightbox or module
sbcarlos, many thanks! That got me on the path!
~Mark
~Mark
- loboche
- Joomla! Apprentice
- Posts: 33
- Joined: Wed Jun 30, 2010 3:09 am
Re: Show system-messages in lightbox or module
I have some problems with the style. How can I make the message to be like yours.
www.grupoquetzal.com
Thanks.
www.grupoquetzal.com
Thanks.
-
- Joomla! Apprentice
- Posts: 18
- Joined: Sun Mar 06, 2011 11:44 pm
Re: Show system-messages in lightbox or module
http://extensions.joomla.org/extensions ... ames/10999
it really works great! may solve all your problem
it really works great! may solve all your problem
-
- Joomla! Apprentice
- Posts: 27
- Joined: Sun Feb 24, 2008 4:19 pm
Re: Show system-messages in lightbox or module
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
I tried the one called DVMesseges in 1.7 - it took down my site.
thanks
-
- Joomla! Apprentice
- Posts: 27
- Joined: Sun Feb 24, 2008 4:19 pm
Re: Show system-messages in lightbox or module
Bump - any module you know of guys
-
- Joomla! Apprentice
- Posts: 8
- Joined: Sat Oct 15, 2011 3:11 am
- Location: Philippines
Re: Show system-messages in lightbox or module
thank's for your code.. it works very good!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>
-
- Joomla! Apprentice
- Posts: 8
- Joined: Sat Oct 15, 2011 3:11 am
- Location: Philippines
Re: Show system-messages in lightbox or module
Thank's esperado... it works very good!!!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>
-jane
-
- Joomla! Apprentice
- Posts: 7
- Joined: Tue Dec 20, 2011 4:27 am
Re: Show system-messages in lightbox or module
thanks deperado, thanks sbcarlos...
anyone know how to make it auto close, with simple code
anyone know how to make it auto close, with simple code
-
- Joomla! Intern
- Posts: 77
- Joined: Mon Jul 13, 2009 8:20 am
- Contact:
Re: Show system-messages in lightbox or module
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.
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.You will need a little CSS formating in order to achieve what you want to do.Code: Select all
<div d="systmsg" onclick="javascript:this.style.display='none';"><jdoc:include type="message" /></div>
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:
When you click on the "X" (or inside the message) the message simply disappear.