The Joomla! Forum ™



Forum rules


Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.



Post new topic Reply to topic  [ 31 posts ]  Go to page 1, 2  Next
Author Message
PostPosted: Sat Dec 19, 2009 10:16 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Tue May 13, 2008 1:12 pm
Posts: 4
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


Top
 Profile  
 
PostPosted: Sat Dec 19, 2009 5:22 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Oct 01, 2009 2:38 pm
Posts: 21
Iam looking familiar solution what can fade-in and fade-out system messages (timed fade-out).

Any ideas? anyone? :pop


Top
 Profile  
 
PostPosted: Sat Dec 19, 2009 5:49 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Oct 01, 2009 2:38 pm
Posts: 21
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:

<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?


Top
 Profile  
 
PostPosted: Sun Dec 20, 2009 8:19 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Tue May 13, 2008 1:12 pm
Posts: 4
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


Top
 Profile  
 
PostPosted: Sun Dec 20, 2009 8:23 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Tue May 13, 2008 1:12 pm
Posts: 4
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


Top
 Profile  
 
PostPosted: Mon Jan 04, 2010 8:19 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Dec 06, 2009 9:24 pm
Posts: 16
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


Top
 Profile  
 
PostPosted: Tue Jan 05, 2010 12:51 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Dec 16, 2006 3:02 pm
Posts: 18
Hello,

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

Code:
<?php
JHTML::_('behavior.mootools');
JHTML::_('behavior.modal');
php?>


Then have your head tag includes the following:

Code:
<?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:
<div style="display:none;">
<div id="error_info"><jdoc:include type="message" />
</div>
</div>


I am sure this will do the trick.


Top
 Profile  
 
PostPosted: Tue Jan 05, 2010 12:22 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Dec 06, 2009 9:24 pm
Posts: 16
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


Top
 Profile  
 
PostPosted: Wed Jan 06, 2010 2:04 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Dec 16, 2006 3:02 pm
Posts: 18
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


Top
 Profile  
 
PostPosted: Fri Jan 08, 2010 9:27 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Dec 06, 2009 9:24 pm
Posts: 16
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


Top
 Profile  
 
PostPosted: Sat Jan 09, 2010 12:31 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Dec 16, 2006 3:02 pm
Posts: 18
Try using
Code:
<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?


Top
 Profile  
 
PostPosted: Wed Apr 28, 2010 9:58 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Apr 28, 2010 4:56 am
Posts: 11
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....


Top
 Profile  
 
PostPosted: Thu Apr 29, 2010 6:07 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Apr 28, 2010 4:56 am
Posts: 11
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.


Top
 Profile  
 
PostPosted: Mon Jul 12, 2010 11:36 am 
Joomla! Explorer
Joomla! Explorer

Joined: Sat Apr 10, 2010 9:48 pm
Posts: 274
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 ;)


Top
 Profile  
 
PostPosted: Sat Aug 21, 2010 12:54 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Feb 16, 2006 1:43 pm
Posts: 33
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:
<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.


Top
 Profile  
 
PostPosted: Fri Oct 29, 2010 11:35 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue May 12, 2009 4:03 am
Posts: 11
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


Top
 Profile  
 
PostPosted: Tue Nov 02, 2010 9:13 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Oct 30, 2010 12:53 pm
Posts: 26
Yes your code is nice.
thanks.


Top
 Profile  
 
PostPosted: Tue Nov 02, 2010 10:54 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Feb 16, 2006 1:43 pm
Posts: 33
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:
<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:
<div id="systmsg" onclick="javascript:this.style.display='none';">
  <jdoc:include type="message" />
</div>   


Witch will produce:
Code:
<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


Top
 Profile  
 
PostPosted: Wed Dec 08, 2010 6:04 am 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Jun 30, 2010 3:09 am
Posts: 33
Great Job It works very good.


Top
 Profile  
 
PostPosted: Sun Dec 12, 2010 9:00 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Nov 10, 2005 6:11 am
Posts: 21
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


Top
 Profile  
 
PostPosted: Mon Dec 13, 2010 12:40 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Mon Dec 13, 2010 12:37 am
Posts: 2
Location: Santa Barbara, CA
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.


Top
 Profile  
 
PostPosted: Wed Dec 15, 2010 5:52 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Nov 10, 2005 6:11 am
Posts: 21
sbcarlos, many thanks! That got me on the path!

~Mark


Top
 Profile  
 
PostPosted: Thu Dec 16, 2010 7:53 am 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Jun 30, 2010 3:09 am
Posts: 33
I have some problems with the style. How can I make the message to be like yours.
www.grupoquetzal.com
Thanks.


Top
 Profile  
 
PostPosted: Fri Mar 25, 2011 7:35 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Mar 06, 2011 11:44 pm
Posts: 18
http://extensions.joomla.org/extensions ... ames/10999

it really works great! may solve all your problem


Top
 Profile  
 
PostPosted: Wed Sep 14, 2011 9:36 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Feb 24, 2008 4:19 pm
Posts: 27
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


Top
 Profile  
 
PostPosted: Tue Oct 18, 2011 4:41 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Feb 24, 2008 4:19 pm
Posts: 27
Bump - any module you know of guys ???


Top
 Profile  
 
PostPosted: Sat Nov 05, 2011 6:41 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Oct 15, 2011 3:11 am
Posts: 8
Location: Philippines
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:
<div d="systmsg" onclick="javascript:this.style.display='none';"><jdoc:include type="message" /></div>

thank's for your code.. it works very good! ;)


Top
 Profile  
 
PostPosted: Sat Nov 05, 2011 6:45 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Oct 15, 2011 3:11 am
Posts: 8
Location: Philippines
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:
<div d="systmsg" onclick="javascript:this.style.display='none';"><jdoc:include type="message" /></div>

Thank's esperado... it works very good!!! :)
-jane ;)


Top
 Profile  
 
PostPosted: Wed Jan 11, 2012 10:30 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Dec 20, 2011 4:27 am
Posts: 7
thanks deperado, thanks sbcarlos...
anyone know how to make it auto close, with simple code


Top
 Profile  
 
PostPosted: Mon Jan 16, 2012 9:20 am 
Joomla! Intern
Joomla! Intern

Joined: Mon Jul 13, 2009 8:20 am
Posts: 77
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:
<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.

_________________
http://www.mallustube.tv


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 31 posts ]  Go to page 1, 2  Next



Who is online

Users browsing this forum: No registered users and 22 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group