"Infobulle" in event

[dusty35]

Hello,

I would like to insert “infobulle” (picture onmouseover) into event but I can’t.

Here is my html code:

[code]

@import url(http://192.168.1.10/css/module/main_modules.css);

[/code]

And here a part of the javascript code:

[code]function montre(img,type) {

if (w3c||ie){
	laBulle =document.getElementById("bulle")
	if(laBulle){
		laBulle.innerHTML = "<img src='"+img+"'/>"; 
		laBulle.style.visibility = "visible"; 
		affiche= "affiche"+type
	}
}

}

function cache(type) {
if (w3c||ie){
if(type){
affiche= “affiche”+type
}
affiche=false;
laBulle.style.visibility=“hidden”
laBulle.style.top = ‘-1000px’
laBulle.style.backgroundColor = ‘’
laBulle.style.width = ‘’
}
}[/code]
It doesn’t work at all. Maybe because I write an div in a div? And will the “infobulle” be over all the scheduler?

One thing more: Into event, when I write that: " or that: " it’s replaced by that: " or that:’
Maybe this is my mistake?

Thank you very much and one more time: nice scheduler!

[Stanislav]

Maybe this is my mistake?
Check your server side settings. In case of PHP it can be caused by enabling “magic quotes”.

As for custom tooltip-like image. You can try to use something similar to the next

scheduler.attachEvent("onMouseMove",function(id,e){ if (id){ ... here some code, which will show popup for event ... } })

[dusty35]

I’m gonna look at this “magic quotes” tonight but there is not PHP, this is only html .
I’m not sure to understand, I have to insert all? my popup code at the place where you wrote " … here some code, which…" ?

Thank you for your help!

[Stanislav]

I’m gonna look at this “magic quotes” tonight but there is not PHP, this is only html.

Client side part of scheduler doesn’t change code in any way, so its quite strange if you have such behavior with static HTML. The common reason of similar problem id data saving script, which can escape special chars during saving in DB.

I have to insert all? my popup code at the place where you wrote

You need to call the “montre” method with necessary parameters. Basically this code will be called when mouse is moved over any event. So it is the place to show custom tooltips or something similar.

[dusty35]

You were right, “magic quotes” were enable. I turned it off into php.ini. I meant that there were no php code into the event but I save my data into SQL DB. Sorry, I’m newbie

So, that’s work sometimes, I don’t know why, it’s looks like my event color “problem”, I have to click on my event and (sometimes) after, it works but popup is totaly out of the presumed area: Event on the left= popup at ~100px of it; Event on the middle= popup at ~500px of it;Event on the right= popup is out of my screen.

Another thing: I wrote the following code to show new fields into event:

{return event.text+"<br>"+"<br>"+event.act1+"<br>"+event.prix1+" &euro"+"<br>" .....

This for make appear the symbols € or $ after my text. When I make a new event, there is only these symbols but sometimes, I don’t write anything before it. Do you have an idea for fix it?

After these problems, I’m on the good way for ending my project.

[Stanislav]

 I have to click on my event and (sometimes) after, it works but popup is totaly out of the presumed area

Do you mean lightbox or your custom popup code?

When I make a new event, there is only these symbols but sometimes

You can add any logic in the template

{ var text = event.prix1?(event.prix1+" &euro"):""; return event.text+"<br>"+"<br>"+event.act1+"<br>"+text+"<br>" .....

[dusty35]

Hi Stanislav,

Sorry for this late reply.

My problem with symbols $ € is now solved, Thanks.

ABout my Tooltip (Infobulle), I tryed a lot of things but nothing works great
Here is the code I wrote into description (into lightbox)

[code]

img{ border:none;} #bulle { position: absolute; visibility: hidden; font-size:12px;} .info{ border:1px solid #666666; padding: 7px; color:#666666; background-color:#FFFFFF; font-family:"trebuchet MS";}

[/code]

That’s looks like this in firefox (in a simple html file) :

In scheduler:

In this case, the event is on the left of the screen, but if I put in the middle, the popup is totally out on the right.

I don’t understand why this js works great into an html file but into event it don’t. Maybe there’s some conflicts with differents DIV?

Thank you again for your help.

[Stanislav]

Problem can be caused by complex html layout of scheduler ( it uses absolute and relative position blocks, which can confuse you custom logic )

Can you provide a sample with all involved js and html files, where problem can be reconstructed?

As for rendering below events - just add

z-index:1000;

to the #bulle css class.

[dusty35]

Ok for rendering below event

Can you provide a sample with all involved js and html files, where problem can be reconstructed?

In fact, In my “real” project, I write in event the part between tags. I have CSS and JS files but If you copy/paste the code I wrote in my last reply (with CSS & JS included), you’ll see this example and it’s works great. I tested this code into your live demo and the problem is the same, can you try it?

Thx Stanislav

[Stanislav]

Check the attached sample.
1277730101.zip (48.7 KB)

[dusty35]

Oh yes that’s works perfect!

Now, I can’t see exactly how it works (maybe tonight I’ll be available) but could I write in each event the picture I want (everytime different)? I’m working with sql DB.

I’m gonna see it later, thank you very much.

PS:reassure me, it’s your job or just a hobby?

[Stanislav]

but could I write in each event the picture I want (everytime different)?
Sure, you can load path to image as some event property and use code similar to next in your template.

…src=""+ev.image_source +""…

[dusty35]

Everything works fine with my DB!

Another thing (should I open a new topic?):
I have a lot of text field in the lightbox, most of them contains small text (for a price for example) and I would like to know where could I change the width of them and the layout (3 by ligne for example and not only one) for having more space.
Thanks.

[Stanislav]

Check
docs.dhtmlx.com/doku.php?id=dhtm … tails_form

It shows how custom form section can be implemented. In case of custom section you have full control over inputs layout.

[dusty35]

Hi,

Few days ago, I installed Scheduler on Joomla!, very nice implementation and it’s easier for me (access rights, custom fields, etc.).

I wrote the code that we spoke about before (from your sample)'return "<a onmouseover= \"showTooltip('<div class=\\'info\\'><img id=\\'big\\' src= ...into scheduler.templates.event_text=function(start,end,event){ in Joomla! administrations. The tooltip (infobulle) seems to work great (I wrote an alert to check the “onmouseover”) but nothing happening into the event when my mouse is on (exept my alert ). I tried lots of stuff: changing css, replace the js by my “old” js but that’s not OK. The problem is the same

I think that the layout & display in Joomla are blocking the “onmouseover” (but why my alert works?). Do you have an idea?

(PS: exactly the same code works in a independant html file)
Thanks.

[Stanislav]

scheduler assigns very high z-index value for main html element of scheduler ( necessary for some joomla themes ) , so in your case infobulle can be shown, but rendered behind the scheduler

You can try to locate and decrease the next rule in dhtmlxscheduler.css

.dhx_cal_container{
z-index:999;
}

[dusty35]

My problem is solved, I tried to remove lots of lines in my “works fine file” to create the same bug, and the missing code was:

<div id="bulle" style="z-index:1000"></div> 
[/code]behind[code]
<body onload="init();">

I just had to put it into dhtmlxSchedulerConfigurator.php (line 542).

It’s hard to be a newbie but I’m happy now

Thank you.