Jumi - the set of custom code extensions

HandP · Post by **HandP** » Tue Jan 06, 2009 9:05 pm

Yes, thank you very much! The squeezebox even looks a lot better than the ordinary popup

.

The problem with the SEF URL's had a simple solution: Using http://mysitename.nl/folder/filename.php instead of href='../folder/filename.php.

Peter

MarHaj wrote:Well, as to the modal box I have found this usefull links
http://www.kirbymixedmedia.com/hacks-mainmenu-30/16-joomla/36-load-mootools-modal-window-immediately-in-joomla
http://www.scribd.com/doc/2299973/Joomla-v-15-Squeezebox-in-your-Joomla-Website
http://www.theartofjoomla.com/magazine/article/26-perfect-popups.html

firstrincewind · Post by **firstrincewind** » Tue Jan 06, 2009 11:23 pm

Hello,
i have a problem with jumi( I am a beginner with this); i can use it for a php script on all my joomlasites(1.5) with:
{jumi [scripte/days_images.php] [1.235][<em class="info">This is info</em>]}

But when i try to insert it on my templatepage index.php it does not work, i only see the text.
anyone know what is to do?

computerbarry · Post by **computerbarry** » Wed Jan 07, 2009 2:23 am

My Problem - .htaccess issue - Novice/New User

I've installed the Jumi extension and been using it ok, just a couple of problems with the components:

1. I have a .htaccess from my old site which took care of all my url's, but now I'm using Jumi the url looks like: http://www.example.com/component/jumi/photos it should be http://www.example.com/photos how do I remove "component/jumi/" hide the jumi code all together?

My old site basically had photos/venue/12-01-2008 which linked to photo/12010801
(show the photos then link to the photo), but now jumi is involved it's messing up the url's ??

Update:
Been at this for 2 hours now, just don't understand how Hello Jumi! is in the main_menu and links to a jumi application, just can't get anything to work. If I create a new jumi link along side Hello Jumi I dont have any option to change the link to my own application and how do I get the link to the component?

and Hello Jumi! works perfect for the seo url - http://www.example.com/hello-jumi
am I missing something here?

Seems like a lot of hard work to get some basic PHP code running... PLEASE HELP!

------------------------------------------------

2. And is it ok to alter the master .htaccess file, most templates seem to have a lot of default settings in this file? can I add to it? or does everything get taken care off automatically?

3. Most of the time my php code is placed before the first <html> tag, how do I place the code there instead of the Jumi component on the page layout?

Cheers a lot of question very new to joomla thanks

dimpal · Post by **dimpal** » Wed Jan 07, 2009 6:53 am

hi frnds...
i m new for joomla as well as for jumi...
i have added one php file in jumi.. which display list of data fetched from database and images....
but images are not visible...and i wann onclick event on image.
reply me urgenty plzzzzz.
thanx

MarHaj · Post by **MarHaj** » Wed Jan 07, 2009 9:06 am

How do I create another "article" similar to the "Hello Jumi" article? For some reason, each time I click "New" I receive the following message on my machine: Server Error 500 - Internal server error.

Charlie,
something is going wrong with the server. Have you got access to log messages?
There are too many possible reasons between the click and the error.
What Jumi, Joomla, php and MySQL versions do you use?
First thing I would try is reinstalling Jumi.

MarHaj · Post by **MarHaj** » Wed Jan 07, 2009 9:59 am

computerbarry,
I will try to answer your questions.
1. rewriting URL
please see .htaccess mod_rewrite manual or tips. There are really a lot of them on internet.
2.

just don't understand how Hello Jumi! is in the main_menu and links to a jumi application, just can't get anything to work.

It is exactly the same proces as creating any new menu item.
a) create Jumi component item - an application. Lets say its name is AAA
b) then go to the menus and choose e.g. main menu.
c) click new on the top right
d) you will see "Select Menu Item Type" list. Select Jumi.
e) int he right column there is "parameter basic". From the list select AAA.
f) then in the left column make appropriate standard changes. Save.
Done.
3.

And is it ok to alter the master .htaccess file, most templates seem to have a lot of default settings in this file? can I add to it? or does everything get taken care off automatically?

I do not understand the question. I do not thing templates have settings in .htaccess. Can you give me an example?
4.

Most of the time my php code is placed before the first <html> tag, how do I place the code there instead of the Jumi component on the page layout?

Jumi inserts the code into some positions defined by a template. Jumi module can insert the code into module positions while Jumi component creates content into a component position.
These positions are defined by Joomla template by <jdoc:include type="module" name="xxxxx" /> and <jdoc:include type="component" />. So it was theory. Now practice>
If you want some standard php code in the <head> throughout all Joomla pages then modify a template manually.
If you just want to modify <head> sometimes it is better to modify $document object by Jumi code. See $document and it properties in Joomla documentations.

MarHaj · Post by **MarHaj** » Wed Jan 07, 2009 10:05 am

jumi [scripte/days_images.php] [1.235][<em class="info">This is info</em>]}
But when i try to insert it on my templatepage index.php it does not work, i only see the text.

Well, the {jumi ...} code does not run from template. You have to write {jumi ...} into Joomla article.

Nevertheless if you need to include a php file into the template just include it by direct php statement> include or include_once (the latter is better for templates). Without jumi.

ghazal · Post by **ghazal** » Wed Jan 07, 2009 11:06 am

[Modal Popup - Suggestion of a Tutorial]
This tuto is inspired by the JavaScript Chapter graciously offered by Joe Leblanc on his blog (http://www.designvsdevelop.com/using-mo ... in-joomla/), an excerpt of his book "Learning Joomla! Extension Development" (Second Edition).
It makes use of Jumi and Joomla API.
It gives control over the content inside the modal window (here HTML).
It could be used to implement more complex actions, I guess.

1- in Jumi component/New
insert this :

Code: Select all

<?php
 JHTML::_('behavior.modal', 'a.popup');  
    ?>   
<a rel="{handler: 'iframe', size: {x: 350, y: 250}}" href="index.php?option=com_jumimodal&task=insideModal&format=raw" class="popup">Link to a modal window</a>

where we use Joomla API with 'behavior.modal' and Joomla CSS with 'a.popup'.
This will settle the modal window size : {handler: 'iframe', size: {x: 350, y: 250}
This will avoid the downloading of the joomla template : format=raw

Save while noting the ID (here id4)

2 - In /components
* create a folder named com_jumimodal
* inside this folder, create a file named jumimodal.php
* fill it with this code :

Code: Select all

<?php
defined( '_JEXEC' ) or die( 'Restricted access' ); 
?>
	<style type="text/css">
.modpop{margin: 30px;}
			
	</style>
<div class="modpop">
        <h1>I like :</h1> 
        <ul> 
            <li>Joomla</li> 
            <li>Mootools</li> 
            <li>Open Source</li>
            <li>My beloved MacMini</li> 
        </ul> 
</div>

3 - Create an article
Insert {jumi [*4]}

4- test the link in your article, you should have a link to a fully functional modal window with HTML in it without adding any JavaScript.

In view of the articles about modal popups mentioned by Mr MarHaj, why use Jumi ?
Firstly, it is not that easy to implement html in modal window through the methods explained.
Then, I think this method opens avenues to more complex procedures based on Joomla API.
Lastly, it is not based on templates modifications, it can be used whatever the template.

Hope you will enjoy.

@Mr MarHaj, thanks for your positive words about my previous post.

cvharrison · Post by **cvharrison** » Wed Jan 07, 2009 2:20 pm

MarHaj wrote:
How do I create another "article" similar to the "Hello Jumi" article? For some reason, each time I click "New" I receive the following message on my machine: Server Error 500 - Internal server error.
Charlie,
something is going wrong with the server. Have you got access to log messages?
There are too many possible reasons between the click and the error.
What Jumi, Joomla, php and MySQL versions do you use?
First thing I would try is reinstalling Jumi.

Thanks for the quick reply MarHarj:

Here are a few things you requests....

* Jumi - "Jumi pack for Joomla! 1.5" contains Component, Module, and Plugin (after installation I enabled both the Module and Plugin)
* Joomla - Joomla! 1.5.8 Production/Stable [ Wohnaiki ] 10-November-2008 23:00 GMT
* php - 5.2.6
* MySQL - 5.0.26-community-nt

I tried uninstalling Jumi and reinstalling it multiple time in hopes of solving the problem, but it didn't work. Please let me know if I can provide you with more information. I'd love to get this working, it's just what I was looking for!

I'm using on a shared server... How do I get access to log messages?

Thanks,

Charlie

computerbarry · Post by **computerbarry** » Wed Jan 07, 2009 3:10 pm

Thanks a lot for the quick reply MarHaj

ok my main problem is the below, been at this for two nights

t is exactly the same proces as creating any new menu item.
a) create Jumi component item - an application. Lets say its name is AAA
b) then go to the menus and choose e.g. main menu.
c) click new on the top right
d) you will see "Select Menu Item Type" list. Select Jumi.
e) int he right column there is "parameter basic". From the list select AAA.
f) then in the left column make appropriate standard changes. Save.
Done.

Yes exactly what I thought nice and simple, but the problem is after I've created a new jumi component then create a new jumi menu link, the box to the right (Parameters (Basic)) has one dropdown called file, but no files are there, just a yellow BG but no files to link to?

and again why does:
Hello Jumi! work perfect for the seo url - http://www.example.com/hello-jumi
but any other component shows - http://www.example.com/component/jumi/test

Ill get back to the other problems later, my main concern at the minute is the jumi components.

Thanks again for the time MarHaj

lobosan · Post by **lobosan** » Thu Jan 08, 2009 4:31 am

Hello everybody... i hope you can help me
I'm trying to have an image map with clickable areas and i'm using a javascript code that works perfectly out of joomla and i included that javascript in the php file and it`s inserted in an article using jumi but it doesn't work
And the way I use the javascript code in my map is just writing class="mapper", like this:

Code: Select all

<img src="..." class="mapper" usemap="..." />

Thanks in advance

Here is the javascript file

Code: Select all

/**
 * mapper.js 2.2 (10-Jun-2008)
 * (c) by Christian Effenberger 
 * All Rights Reserved
 * Source: mapper.netzgesta.de
 * Distributed under Netzgestade Software License Agreement
 * http://www.netzgesta.de/cvi/LICENSE.txt
 * License permits free of charge
 * use on non-commercial and 
 * private web sites only 
**/

var canvascheck = document.createElement('canvas');
var isIE = window.navigator.systemLanguage?1:0;
var isVM = document.namespaces?1:0; var isJG = 0;
var isCV = canvascheck.getContext?1:0; var jg = new Array();

if(isVM) {
	if(document.namespaces['v'] == null) {
		var stl = document.createStyleSheet();
		stl.addRule("v\\:*", "behavior: url(#default#VML); antialias: true;"); 
		document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); 
	}
}

function showCoords(map,ele,x,y,w,h) {}

function getClasses(classes,string){
	var temp = '';
	for (var j=0;j<classes.length;j++) {
		if (classes[j] != string) {
			if (temp) {temp += ' '; }
			temp += classes[j];
		}
	}
	return temp;
}
function getClassValue(classes,string){
	var temp = 0; var pos = string.length;
	for (var j=0;j<classes.length;j++) {
		if (classes[j].indexOf(string) == 0) {
			temp = Math.min(classes[j].substring(pos),100);
			break;
		}
	}
	return Math.max(0,temp);
}
function getClassRGBColor(classes,string,color){
	var temp, val = color, pos = string.length;
	for (var j=0;j<classes.length;j++) {
		if (classes[j].indexOf(string) == 0) {
			temp = classes[j].substring(pos);
			val = temp.toLowerCase();
			break;
		}
	}
	if(!val.match(/^[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i)) {val = color||'000000'; }
	if(!isCV) {return val; }else {
		function hex2dec(hex){return(Math.max(0,Math.min(parseInt(hex,16),255)));}
		var cr=hex2dec(val.substr(0,2)),cg=hex2dec(val.substr(2,2)),cb=hex2dec(val.substr(4,2));
		return cr+','+cg+','+cb;
	}
}
function getClassAttribute(classes,string){
	var temp = 0; var pos = string.length;
	for (var j=0;j<classes.length;j++) {
		if (classes[j].indexOf(string) == 0) {
			temp = 1; break;
		}
	}
	return temp;
}
function getMaps(className){
	var children = document.getElementsByTagName('img'); 
	var elements = new Array(); var i = 0; var mapname = '';
	var child; var classNames; var j = 0; var mapid = '';
	for(i=0;i<children.length;i++) {
		child = children[i]; classNames = child.className.split(' ');
		for(j=0;j<classNames.length;j++) {
			if(classNames[j]==className) {
				mapname = child.useMap.split("#");
				if(mapname[1]!=''&&mapname[1].length>=1) {
					mapid = document.getElementsByName(mapname[1]);
					if(mapid) {elements.push(child); break;}
				}
			}
		}
	}
	return elements;
}
function fadeCanvas(id,opac) {
	var obj = document.getElementById(id);
    if(obj.fading==1 && opac<=100) {
		obj.style.opacity = opac/100; opac += 10;
		window.setTimeout("fadeCanvas('"+id+"',"+opac+")",10);
	}
}
function setAreaOver(obj,id,bd,co,op,nb,f,z) {
	var a, i, j, d, c, o, b, n, l, r, v, u, x, y, p, k = 0, t = '', r = obj.getAttribute('rel'), context, canvas = document.getElementById(id);
	if(r!=null) {d = r.split(","); v = d.unshift(obj.id); }else {d = new Array(obj.id); }
	function setAttr() {
		if(l.indexOf('forcegroup')!=-1) {k = getClassAttribute(u,"forcegroup");}else {k=0;}
		if(l.indexOf('iopacity')!=-1) {o = getClassValue(u,"iopacity")/100;}else {o=op;}	
		if(l.indexOf('iborder')!=-1) {b = getClassRGBColor(u,"iborder",bd);}else {b=bd;}
		if(l.indexOf('icolor')!=-1) {c = getClassRGBColor(u,"icolor",co);}else {c=co;}
		if(l.indexOf('noborder')!=-1) {n = getClassAttribute(u,"noborder");}else {n=nb;}
	}
	if(isVM) {
		for(a=0;a<d.length;a++) {
			obj = document.getElementById(d[a]); p = '', l = obj.className, u = l.split(" "), v = obj.coords.split(",");
			if(k==0) {setAttr();} 
			if(obj.shape.toLowerCase()=='rect') {
				t += '<v:rect strokeweight="1" filled="t" stroked="'+(n<1?"t":"f")+'" strokecolor="#'+b+'" style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+parseInt(v[0])+'px;top:'+parseInt(v[1])+'px;width:'+parseInt(v[2]-v[0])+'px;height:'+parseInt(v[3]-v[1])+'px;"><v:fill color="#'+c+'" opacity="'+o+'" /></v:rect>';
			}else if(obj.shape.toLowerCase()=='circle') {
				t += '<v:oval strokeweight="1" filled="t" stroked="'+(n<1?"t":"f")+'" strokecolor="#'+b+'" style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+parseInt(v[0]-v[2])+'px;top:'+parseInt(v[1]-v[2])+'px;width:'+(parseInt(v[2])*2)+'px;height:'+(parseInt(v[2])*2)+'px;"><v:fill color="#'+c+'" opacity="'+o+'" /></v:oval>';
			}else {
				for(j=2;j<v.length;j+=2) {p += parseInt(v[j])+','+parseInt(v[j+1])+',';}
				t += '<v:shape strokeweight="1" filled="t" stroked="'+(n<1?"t":"f")+'" strokecolor="#'+b+'" coordorigin="0,0" coordsize="'+canvas.width+','+canvas.height+'" path="m '+parseInt(v[0])+','+parseInt(v[1])+' l '+p+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+canvas.width+'px;height:'+canvas.height+'px;"><v:fill color="#'+c+'" opacity="'+o+'" /></v:shape>'; 
			}
		} canvas.innerHTML = t;
	}else if(isCV) {
		if(f<1) {canvas.fading = 0; canvas.style.opacity = 0;}
		context = canvas.getContext("2d");
		for(a=0;a<d.length;a++) {
			obj = document.getElementById(d[a]); l = obj.className, u = l.split(" "), v = obj.coords.split(",");
			if(k==0) {setAttr();} context.beginPath();
			if(obj.shape.toLowerCase()=='rect') {
				context.rect(0.5+parseInt(v[0]),0.5+parseInt(v[1]),parseInt(v[2]-v[0]),parseInt(v[3]-v[1])); context.closePath();
			}else if(obj.shape.toLowerCase()=='circle') {
				context.arc(0.5+parseInt(v[0]),0.5+parseInt(v[1]),parseInt(v[2]),0,(Math.PI/180)*360,false);		
			}else {
				context.moveTo(parseInt(v[0]),parseInt(v[1])); for(j=2;j<v.length;j+=2) {context.lineTo(parseInt(v[j]),parseInt(v[j+1]));} context.closePath();
			} context.fillStyle = 'rgba('+c+','+o+')'; context.strokeStyle = 'rgba('+b+',1)'; context.fill(); if(n<1) {context.stroke();}
		} if(f<1) {canvas.fading = 1; fadeCanvas(id,0);}
	}else {
		o = op; l = obj.className; u = l.split(" ");
		if(l.indexOf('forcegroup')!=-1) { k = getClassAttribute(u,"forcegroup");
		if(k!=0) {if(l.indexOf('iopacity')!=-1) {o = getClassValue(u,"iopacity")/100; k=0;}}}
		if(isIE) {canvas.style.filter = "Alpha(opacity="+(o*100)+")";
		}else {canvas.style.opacity = o; canvas.style.MozOpacity = o; canvas.style.KhtmlOpacity = o;}
		for(a=0;a<d.length;a++) {
			obj = document.getElementById(d[a]); l = obj.className, u = l.split(" "), v = obj.coords.split(",");
			if(k==0) {
				if(l.indexOf('forcegroup')!=-1) {k = getClassAttribute(u,"forcegroup");}else {k=0;}
				if(l.indexOf('icolor')!=-1) {c = getClassRGBColor(u,"icolor",co);}else {c=co;}
			} jg[z].setColor("#"+c);
			if(obj.shape.toLowerCase()=='rect') {
				jg[z].fillRect(parseInt(v[0]),parseInt(v[1]),parseInt(v[2]-v[0])+1,parseInt(v[3]-v[1])+1);
			}else if(obj.shape.toLowerCase()=='circle') {
				jg[z].fillEllipse(parseInt(v[0]-v[2]),parseInt(v[1]-v[2]),parseInt(v[2])*2+1,parseInt(v[2])*2+1);
			}else {x = new Array(); y = new Array(); i = 0; for(j=0;j<v.length;j+=2) {x[i] = parseInt(v[j]); y[i] = parseInt(v[j+1]); i++;} jg[z].fillPolygon(x,y);
			} jg[z].paint();
		}
	}
}
function setAreaOut(obj,id,f,z) {
	var canvas = document.getElementById(id);
	if(isVM) {canvas.innerHTML = '';}else 
	if(isJG) {jg[z].clear();}else if(isCV) {
		var context = canvas.getContext("2d");
		context.clearRect(0,0,canvas.width,canvas.height);
	}
}
function getCoords(e,n,a,i,x,y,w,h,pw,ph) {
	var t, o, ox, oy, ex, ey, cx, cy, px=0, py=0;
	if (!e) {e = window.event; }
	if (e.pageX || e.pageY) {px = e.pageX; py = e.pageY;}
	ex = e.clientX; ey = e.clientY;
	if(self.pageXOffset||self.pageYOffset) {
		ox = self.pageXOffset; if(ox>0 && px==ex) {ex -= ox; }
		oy = self.pageYOffset; if(oy>0 && py==ey) {ey -= oy; }
	}else if(document.documentElement) {
		ox = document.documentElement.scrollLeft; 
		oy = document.documentElement.scrollTop;
	}else if(document.body) {
		ox = document.body.scrollLeft; oy = document.body.scrollTop;
	} 
	if(document.body.scrollHeight!=ph||document.body.scrollWidth!=pw) {
		var o = document.getElementById(i);
		var t = findPosXY(o); x = t.x; y = t.y;
	}
	cx = Math.min(Math.max(ex+ox-x,0),w); 
	cy = Math.min(Math.max(ey+oy-y,0),h);
	showCoords(n,a,cx,cy,w,h);
}
function findPosXY(ele) {
	var t; var d = {x:ele.offsetLeft, y:ele.offsetTop };
	if(ele.offsetParent) { t = findPosXY(ele.offsetParent); d.x += t.x; d.y += t.y;}
	return d;
}
function roundedRect(ctx,x,y,width,height,radius,nopath){
	if (!nopath) ctx.beginPath();
	ctx.moveTo(x,y+radius);
	ctx.lineTo(x,y+height-radius);
	ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
	ctx.lineTo(x+width-radius,y+height);
	ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
	ctx.lineTo(x+width,y+radius);
	ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
	ctx.lineTo(x+radius,y);
	ctx.quadraticCurveTo(x,y,x,y+radius);
	if (!nopath) ctx.closePath();
}
function getRadius(radius,width,height){
	var part = (Math.min(width,height)/100);
	radius = Math.max(Math.min(100,radius/part),0);
	return radius + '%';
}
function addMapper() {
	var themaps = getMaps('mapper');
	var image, object, bgrnd, canvas, blind, context, mapid, mname, ele, atr; 
	var classes = '', newClasses = '', func = '', tmp, i, j, o, b, c, d, r, t, n, f, x, y, w, h, pw, ph;
	for(i=0;i<themaps.length;i++) {
		image = themaps[i]; object = image.parentNode;
		if(image.id=='') {image.id = "gmipam_"+i;}
		object.style.position = (object.style.position=='static'||object.style.position==''?'relative':object.style.position);
		object.style.height = image.height+'px';
		object.style.width = image.width+'px';
		object.style.padding = 0+'px';
		object.style.MozUserSelect = "none";
		object.style.KhtmlUserSelect = "none"; 
		object.unselectable = "on";
		r = 0; n = 0; f = 0; b = '0000ff'; c = '000000'; o = 33;
		if(isCV) {canvas = document.createElement('canvas');}else if(isVM) {
		canvas = document.createElement(['<var style="zoom:1;overflow:hidden;display:block;width:'+image.width+'px;height:'+image.height+'px;padding:0;">'].join(''));
		}else {canvas = document.createElement('div');}
		canvas.id = image.id+'_canvas';
		classes = image.className.split(' '); 
		r = getClassValue(classes,"iradius");
		o = getClassValue(classes,"iopacity");
		b = getClassRGBColor(classes,"iborder",'0000ff');
		c = getClassRGBColor(classes,"icolor",'000000');
		n = getClassAttribute(classes,"noborder");
		f = getClassAttribute(classes,"nofade");
		d = getClassAttribute(classes,"showcoords");
		o = o==0?0.33:o/100; r = parseInt(Math.min(Math.min(image.width/4,image.height/4),r));
		newClasses = getClasses(classes,"mapper");
		image.className = newClasses;
		mname = image.useMap.split("#"); mname = mname[1];
		mapid = document.getElementsByName(mname);
		if(mapid.length>0) {	
			for(j=0;j<mapid[0].areas.length;j++) {
				if(mapid[0].areas[j].shape.match(/(rect|poly|circle)/i)) {
					if(window.opera||mapid[0].areas[j].coords!='') {
						if(mapid[0].areas[j].id=='') {mapid[0].areas[j].id = mname+'_'+j;}
						if(isVM||isIE) {
							func = mapid[0].areas[j].onmouseover; if(func!=null) {tmp=String(func); func=tmp.substr(23,tmp.length-25);}
							mapid[0].areas[j].onmouseover = new Function('setAreaOver(this,"'+canvas.id+'","'+b+'","'+c+'","'+o+'",'+n+','+f+','+i+');'+func); 
							func = mapid[0].areas[j].onmouseout; if(func!=null) {tmp=String(func); func=tmp.substr(23,tmp.length-25);}
							mapid[0].areas[j].onmouseout = new Function('setAreaOut(this,"'+canvas.id+'",'+f+','+i+');'+func); 
						}else {
							func = mapid[0].areas[j].getAttribute("onmouseover"); mapid[0].areas[j].setAttribute("onmouseover","setAreaOver(this,'"+canvas.id+"','"+b+"','"+c+"','"+o+"',"+n+","+f+","+i+");"+func); 
							func = mapid[0].areas[j].getAttribute("onmouseout"); mapid[0].areas[j].setAttribute("onmouseout","setAreaOut(this,'"+canvas.id+"',"+f+","+i+");"+func); 
						}
					}
				}
			}
		}
		canvas.style.height = image.height+'px';
		canvas.style.width = image.width+'px';
		canvas.height = image.height;
		canvas.width = image.width;
		canvas.left = 0; canvas.top = 0;
		canvas.style.position = 'absolute';
		canvas.style.left = 0+'px';
		canvas.style.top = 0+'px';
		canvas.fading = 0;
		image.className = '';
		image.style.cssText = '';
		image.left = 0; image.top = 0;
		image.style.position = 'absolute';
		image.style.height = image.height+'px';
		image.style.width = image.width+'px';
		image.style.left = 0+'px';
		image.style.top = 0+'px';
		image.style.MozUserSelect = "none";
		image.style.KhtmlUserSelect = "none"; 
		image.unselectable = "on";
		if(isIE) {image.style.filter = "Alpha(opacity=0)";
		}else {image.style.opacity = 0;
  		image.style.MozOpacity = 0;
  		image.style.KhtmlOpacity = 0;}
		if(isCV && r>0) {bgrnd = document.createElement('canvas');}else if(isVM && r>0) {
		bgrnd = document.createElement(['<var style="zoom:1;overflow:hidden;display:block;width:'+image.width+'px;height:'+image.height+'px;padding:0;">'].join(''));
		}else {bgrnd = document.createElement('img'); bgrnd.src = image.src;}
		bgrnd.id = image.id+'_image';
		bgrnd.left = 0; bgrnd.top = 0;
		bgrnd.style.position = 'absolute';
		bgrnd.style.height = image.height+'px';
		bgrnd.style.width = image.width+'px';
		bgrnd.style.left = 0+'px';
		bgrnd.style.top = 0+'px';
		object.insertBefore(canvas,image);
		blind = document.createElement('div');
		blind.id = mname+'_blind';
		blind.className = "blind_area";
		blind.left = 0; blind.top = 0;
		blind.style.position = 'absolute';
		blind.style.height = image.height+'px';
		blind.style.width = image.width+'px';
		blind.style.left = 0+'px';
		blind.style.top = 0+'px';
		blind.innerHTML = " ";
		object.insertBefore(blind,image);
		if(isCV) {
			context = canvas.getContext("2d");
			context.clearRect(0,0,canvas.width,canvas.height);
		}else if(!isVM && !isCV) {if(isIE) {
			canvas.style.filter = "Alpha(opacity="+(o*100)+")";
			}else { canvas.style.opacity = o;
  			canvas.style.MozOpacity = o;
  			canvas.style.KhtmlOpacity = o;}
			if(typeof(window['jsGraphics']) !== 'undefined') {
				jg[i] = new jsGraphics(canvas); isJG = 1;
			}
		}		
		object.insertBefore(bgrnd,canvas);
		if(isCV && r>0) {
			bgrnd.height = image.height; bgrnd.width = image.width;
			context = bgrnd.getContext("2d");
			context.clearRect(0,0,bgrnd.width,bgrnd.height);
			roundedRect(context,0,0,bgrnd.width,bgrnd.height,r);
			context.clip();
			context.fillStyle = 'rgba(0,0,0,0)';
			context.fillRect(0,0,bgrnd.width,bgrnd.height);
			context.drawImage(image,0,0,bgrnd.width,bgrnd.height);
		}else if(isVM && r>0) {
			bgrnd.height = image.height; bgrnd.width = image.width; r = getRadius(r,bgrnd.width,bgrnd.height);		
			bgrnd.innerHTML = '<v:roundrect arcsize="'+r+'" strokeweight="0" filled="t" stroked="f" fillcolor="#ffffff" style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:0px;top:0px;width:'+bgrnd.width+'px;height:'+bgrnd.height+'px;"><v:fill src="'+image.src+'" type="frame" /></v:roundrect>';
		}		
		if(d>0) {
			ele = document.getElementById(image.id);
			w = parseInt(image.width); h = parseInt(image.height);
			t = findPosXY(ele); x = t.x; y = t.y;
			ph = document.body.scrollHeight; pw = document.body.scrollWidth;
			if(isVM||isIE) {
				func = image.onmousemove; if(func!=null) {tmp=String(func); func=tmp.substr(23,tmp.length-25);}
				image.onmousemove = new Function('getCoords(event,"'+mname+'",0,"'+image.id+'",'+x+','+y+','+w+','+h+','+pw+','+ph+');'+func); 
			}else {
				func = image.getAttribute("onmousemove"); 
				image.setAttribute("onmousemove","getCoords(event,'"+mname+"',0,'"+image.id+"',"+x+","+y+","+w+","+h+","+pw+","+ph+");"+func); 
			}
			if(mapid.length>0) {
				for(j=0;j<mapid[0].areas.length;j++) {
					if(mapid[0].areas[j].shape.match(/(rect|poly|circle)/i)) { 
						if(window.opera||mapid[0].areas[j].coords!='') {
							atr = mapid[0].areas[j].id;
							if(isVM||isIE) {
								func = mapid[0].areas[j].onmousemove; if(func!=null) {tmp=String(func); func=tmp.substr(23,tmp.length-25);}
								mapid[0].areas[j].onmousemove = new Function('getCoords(event,"'+mname+'","'+atr+'","'+image.id+'",'+x+','+y+','+w+','+h+','+pw+','+ph+');'+func); 
							}else {
								func = mapid[0].areas[j].getAttribute("onmousemove"); 
								mapid[0].areas[j].setAttribute("onmousemove","getCoords(event,'"+mname+"','"+atr+"','"+image.id+"',"+x+","+y+","+w+","+h+","+pw+","+ph+");"+func); 
							}
						}
					}
				}
			}
		}
	}
}

var mapperOnload = window.onload;
window.onload = function () { if(mapperOnload) mapperOnload(); addMapper(); }

tokaichan · Post by **tokaichan** » Thu Jan 08, 2009 7:57 am

I want to display some ads based on user type say registered or not.
Based on that user type I need to set some JavaScript variables.. How can I do that?
Just with what I know...
<?php
$user =& JFactory::getUser(); //gets user object
$username = $user->name;
?>
<script type='text/javascript'>
Here I want to check the username not equals "" and set var_1 to be true else var_1 to be false.
</script>

Please help
Thanks in advance

MarHaj · Post by **MarHaj** » Thu Jan 08, 2009 9:26 am

the box to the right (Parameters (Basic)) has one dropdown called file, but no files are there, just a yellow BG but no files to link to?

Computerbarry,
I am afraid that there is a problem with querrying Jumi component database. The querry should provide the list of Jumi component application items. And it does not.
We will look where into the code to find out a weak place.

The second problem

but any other component shows - http://www.example.com/component/jumi/test

is probably connected with it.

Since there are no problems with it for most users, could you try to have a look at Jumi database table if there is something wrong? Ot just try to reinstall Jumi meanwhile?

MarHaj · Post by **MarHaj** » Thu Jan 08, 2009 9:31 am

I tried uninstalling Jumi and reinstalling it multiple time in hopes of solving the problem, but it didn't work. Please let me know if I can provide you with more information.

Charlie, thanks for the information about your setup.
Everything seems to be OK for me.
I will discuss the problem with Edvard where can be the source. It is probably the same thing as Computerbarry above. Database.

MarHaj · Post by **MarHaj** » Thu Jan 08, 2009 9:46 am

<script type='text/javascript'>
Here I want to check the username not equals "" and set var_1 to be true else var_1 to be false.
</script>

It's quite simple:

Code: Select all

<script type='text/javascript'>
<?php
if ($username != ""){
 echo("var_1 = true;");
} else {
 echo("var_1 = false;");
}
?>
</script>

or something similar.

MarHaj · Post by **MarHaj** » Thu Jan 08, 2009 10:03 am

i'm using a javascript code that works perfectly out of joomla and i included that javascript in the php file and it`s inserted in an article using jumi but it doesn't work

Can you compare your process of inclusion outside Joomla an inside it in more detail?
Let's say javascript is saved in an external mapper.js file

What's your code outside Joomla? And what you write into Joomla article please?

cvharrison · Post by **cvharrison** » Thu Jan 08, 2009 1:31 pm

MarHaj wrote:
I tried uninstalling Jumi and reinstalling it multiple time in hopes of solving the problem, but it didn't work. Please let me know if I can provide you with more information.
Charlie, thanks for the information about your setup.
Everything seems to be OK for me.
I will discuss the problem with Edvard where can be the source. It is probably the same thing as Computerbarry above. Database.

Thanks MarHaj. I'd really like to get this working. It seems to be just what I was looking for!

Thanks,

Charlie

computerbarry · Post by **computerbarry** » Thu Jan 08, 2009 3:06 pm

UPDATE

I was running Version 1.5.6 my host had just upgraded, good timing or what, just lucky I was only running a couple of tests I've installed Version 1.5.8 Jumi working GREAT!

New Questions
1. how do I now make my articles and latest news etc use <div>'s instead of tables, all of my modules in my template are style=xhtml and produce <div>'s but when I display articles and latest news, blogs they use tables?? how can i remove the tables?

2. do I need to place defined( '_JEXEC' ) or die( 'Restricted access' ); in every piece of php code I use in a module, component or article I publish, or is it just when you link to a php file?

3. how do I place code into an article? I pasted some PHP code and it doesn't show, how does jumi work here?

If you just want to modify <head> sometimes it is better to modify $document object by Jumi code. See $document and it properties in Joomla documentations.

yes checked out the documentation just don't understand it, I just want to include some .js file on some pages in the head and not others, and sometimes I would like this code, whether it be: ads, .js or php includes to sit right before the closing </body> tag, how do I make sure the code I want to use is positioned exactly were I want it?

Big thanks

Thanks

lobosan · Post by **lobosan** » Thu Jan 08, 2009 8:41 pm

MarHaj wrote:
i'm using a javascript code that works perfectly out of joomla and i included that javascript in the php file and it`s inserted in an article using jumi but it doesn't work
Can you compare your process of inclusion outside Joomla an inside it in more detail?
Let's say javascript is saved in an external mapper.js file

What's your code outside Joomla? And what you write into Joomla article please?

Hi... thanks for your answer
Outside joomla, when I pass the mouse on certain areas of my map these are light up without problem, but when i use the same file inside joomla the areas don´t light up so the javascript doesn´t work.
And first I tried to call my javascript from another file "mapper.js" but after i put it into my php file but neither it worked
Here is the php file that i'm calling in my article "new2.php"

Code: Select all

<html>
<?php
defined('_JEXEC') OR defined('_VALID_MOS') OR die( "Direct Access Is Not Allowed" );
?>
<head>
<script language="JavaScript" type="text/javascript">
var canvascheck = document.createElement('canvas');
var isIE = window.navigator.systemLanguage?1:0;
var isVM = document.namespaces?1:0; var isJG = 0;
var isCV = canvascheck.getContext?1:0; var jg = new Array();

if(isVM) {
	if(document.namespaces['v'] == null) {
		var stl = document.createStyleSheet();
		stl.addRule("v\\:*", "behavior: url(#default#VML); antialias: true;"); 
		document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); 
	}
}

function showCoords(map,ele,x,y,w,h) {}

function getClasses(classes,string){
	var temp = '';
	for (var j=0;j<classes.length;j++) {
		if (classes[j] != string) {
			if (temp) {temp += ' '; }
			temp += classes[j];
		}
	}
	return temp;
}
function getClassValue(classes,string){
	var temp = 0; var pos = string.length;
	for (var j=0;j<classes.length;j++) {
		if (classes[j].indexOf(string) == 0) {
			temp = Math.min(classes[j].substring(pos),100);
			break;
		}
	}
	return Math.max(0,temp);
}
function getClassRGBColor(classes,string,color){
	var temp, val = color, pos = string.length;
	for (var j=0;j<classes.length;j++) {
		if (classes[j].indexOf(string) == 0) {
			temp = classes[j].substring(pos);
			val = temp.toLowerCase();
			break;
		}
	}
	if(!val.match(/^[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i)) {val = color||'000000'; }
	if(!isCV) {return val; }else {
		function hex2dec(hex){return(Math.max(0,Math.min(parseInt(hex,16),255)));}
		var cr=hex2dec(val.substr(0,2)),cg=hex2dec(val.substr(2,2)),cb=hex2dec(val.substr(4,2));
		return cr+','+cg+','+cb;
	}
}
function getClassAttribute(classes,string){
	var temp = 0; var pos = string.length;
	for (var j=0;j<classes.length;j++) {
		if (classes[j].indexOf(string) == 0) {
			temp = 1; break;
		}
	}
	return temp;
}
function getMaps(className){
	var children = document.getElementsByTagName('img'); 
	var elements = new Array(); var i = 0; var mapname = '';
	var child; var classNames; var j = 0; var mapid = '';
	for(i=0;i<children.length;i++) {
		child = children[i]; classNames = child.className.split(' ');
		for(j=0;j<classNames.length;j++) {
			if(classNames[j]==className) {
				mapname = child.useMap.split("#");
				if(mapname[1]!=''&&mapname[1].length>=1) {
					mapid = document.getElementsByName(mapname[1]);
					if(mapid) {elements.push(child); break;}
				}
			}
		}
	}
	return elements;
}
function fadeCanvas(id,opac) {
	var obj = document.getElementById(id);
    if(obj.fading==1 && opac<=100) {
		obj.style.opacity = opac/100; opac += 10;
		window.setTimeout("fadeCanvas('"+id+"',"+opac+")",10);
	}
}
function setAreaOver(obj,id,bd,co,op,nb,f,z) {
	var a, i, j, d, c, o, b, n, l, r, v, u, x, y, p, k = 0, t = '', r = obj.getAttribute('rel'), context, canvas = document.getElementById(id);
	if(r!=null) {d = r.split(","); v = d.unshift(obj.id); }else {d = new Array(obj.id); }
	function setAttr() {
		if(l.indexOf('forcegroup')!=-1) {k = getClassAttribute(u,"forcegroup");}else {k=0;}
		if(l.indexOf('iopacity')!=-1) {o = getClassValue(u,"iopacity")/100;}else {o=op;}	
		if(l.indexOf('iborder')!=-1) {b = getClassRGBColor(u,"iborder",bd);}else {b=bd;}
		if(l.indexOf('icolor')!=-1) {c = getClassRGBColor(u,"icolor",co);}else {c=co;}
		if(l.indexOf('noborder')!=-1) {n = getClassAttribute(u,"noborder");}else {n=nb;}
	}
	if(isVM) {
		for(a=0;a<d.length;a++) {
			obj = document.getElementById(d[a]); p = '', l = obj.className, u = l.split(" "), v = obj.coords.split(",");
			if(k==0) {setAttr();} 
			if(obj.shape.toLowerCase()=='rect') {
				t += '<v:rect strokeweight="1" filled="t" stroked="'+(n<1?"t":"f")+'" strokecolor="#'+b+'" style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+parseInt(v[0])+'px;top:'+parseInt(v[1])+'px;width:'+parseInt(v[2]-v[0])+'px;height:'+parseInt(v[3]-v[1])+'px;"><v:fill color="#'+c+'" opacity="'+o+'" /></v:rect>';
			}else if(obj.shape.toLowerCase()=='circle') {
				t += '<v:oval strokeweight="1" filled="t" stroked="'+(n<1?"t":"f")+'" strokecolor="#'+b+'" style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+parseInt(v[0]-v[2])+'px;top:'+parseInt(v[1]-v[2])+'px;width:'+(parseInt(v[2])*2)+'px;height:'+(parseInt(v[2])*2)+'px;"><v:fill color="#'+c+'" opacity="'+o+'" /></v:oval>';
			}else {
				for(j=2;j<v.length;j+=2) {p += parseInt(v[j])+','+parseInt(v[j+1])+',';}
				t += '<v:shape strokeweight="1" filled="t" stroked="'+(n<1?"t":"f")+'" strokecolor="#'+b+'" coordorigin="0,0" coordsize="'+canvas.width+','+canvas.height+'" path="m '+parseInt(v[0])+','+parseInt(v[1])+' l '+p+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+canvas.width+'px;height:'+canvas.height+'px;"><v:fill color="#'+c+'" opacity="'+o+'" /></v:shape>'; 
			}
		} canvas.innerHTML = t;
	}else if(isCV) {
		if(f<1) {canvas.fading = 0; canvas.style.opacity = 0;}
		context = canvas.getContext("2d");
		for(a=0;a<d.length;a++) {
			obj = document.getElementById(d[a]); l = obj.className, u = l.split(" "), v = obj.coords.split(",");
			if(k==0) {setAttr();} context.beginPath();
			if(obj.shape.toLowerCase()=='rect') {
				context.rect(0.5+parseInt(v[0]),0.5+parseInt(v[1]),parseInt(v[2]-v[0]),parseInt(v[3]-v[1])); context.closePath();
			}else if(obj.shape.toLowerCase()=='circle') {
				context.arc(0.5+parseInt(v[0]),0.5+parseInt(v[1]),parseInt(v[2]),0,(Math.PI/180)*360,false);		
			}else {
				context.moveTo(parseInt(v[0]),parseInt(v[1])); for(j=2;j<v.length;j+=2) {context.lineTo(parseInt(v[j]),parseInt(v[j+1]));} context.closePath();
			} context.fillStyle = 'rgba('+c+','+o+')'; context.strokeStyle = 'rgba('+b+',1)'; context.fill(); if(n<1) {context.stroke();}
		} if(f<1) {canvas.fading = 1; fadeCanvas(id,0);}
	}else {
		o = op; l = obj.className; u = l.split(" ");
		if(l.indexOf('forcegroup')!=-1) { k = getClassAttribute(u,"forcegroup");
		if(k!=0) {if(l.indexOf('iopacity')!=-1) {o = getClassValue(u,"iopacity")/100; k=0;}}}
		if(isIE) {canvas.style.filter = "Alpha(opacity="+(o*100)+")";
		}else {canvas.style.opacity = o; canvas.style.MozOpacity = o; canvas.style.KhtmlOpacity = o;}
		for(a=0;a<d.length;a++) {
			obj = document.getElementById(d[a]); l = obj.className, u = l.split(" "), v = obj.coords.split(",");
			if(k==0) {
				if(l.indexOf('forcegroup')!=-1) {k = getClassAttribute(u,"forcegroup");}else {k=0;}
				if(l.indexOf('icolor')!=-1) {c = getClassRGBColor(u,"icolor",co);}else {c=co;}
			} jg[z].setColor("#"+c);
			if(obj.shape.toLowerCase()=='rect') {
				jg[z].fillRect(parseInt(v[0]),parseInt(v[1]),parseInt(v[2]-v[0])+1,parseInt(v[3]-v[1])+1);
			}else if(obj.shape.toLowerCase()=='circle') {
				jg[z].fillEllipse(parseInt(v[0]-v[2]),parseInt(v[1]-v[2]),parseInt(v[2])*2+1,parseInt(v[2])*2+1);
			}else {x = new Array(); y = new Array(); i = 0; for(j=0;j<v.length;j+=2) {x[i] = parseInt(v[j]); y[i] = parseInt(v[j+1]); i++;} jg[z].fillPolygon(x,y);
			} jg[z].paint();
		}
	}
}
function setAreaOut(obj,id,f,z) {
	var canvas = document.getElementById(id);
	if(isVM) {canvas.innerHTML = '';}else 
	if(isJG) {jg[z].clear();}else if(isCV) {
		var context = canvas.getContext("2d");
		context.clearRect(0,0,canvas.width,canvas.height);
	}
}
function getCoords(e,n,a,i,x,y,w,h,pw,ph) {
	var t, o, ox, oy, ex, ey, cx, cy, px=0, py=0;
	if (!e) {e = window.event; }
	if (e.pageX || e.pageY) {px = e.pageX; py = e.pageY;}
	ex = e.clientX; ey = e.clientY;
	if(self.pageXOffset||self.pageYOffset) {
		ox = self.pageXOffset; if(ox>0 && px==ex) {ex -= ox; }
		oy = self.pageYOffset; if(oy>0 && py==ey) {ey -= oy; }
	}else if(document.documentElement) {
		ox = document.documentElement.scrollLeft; 
		oy = document.documentElement.scrollTop;
	}else if(document.body) {
		ox = document.body.scrollLeft; oy = document.body.scrollTop;
	} 
	if(document.body.scrollHeight!=ph||document.body.scrollWidth!=pw) {
		var o = document.getElementById(i);
		var t = findPosXY(o); x = t.x; y = t.y;
	}
	cx = Math.min(Math.max(ex+ox-x,0),w); 
	cy = Math.min(Math.max(ey+oy-y,0),h);
	showCoords(n,a,cx,cy,w,h);
}
function findPosXY(ele) {
	var t; var d = {x:ele.offsetLeft, y:ele.offsetTop };
	if(ele.offsetParent) { t = findPosXY(ele.offsetParent); d.x += t.x; d.y += t.y;}
	return d;
}
function roundedRect(ctx,x,y,width,height,radius,nopath){
	if (!nopath) ctx.beginPath();
	ctx.moveTo(x,y+radius);
	ctx.lineTo(x,y+height-radius);
	ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
	ctx.lineTo(x+width-radius,y+height);
	ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
	ctx.lineTo(x+width,y+radius);
	ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
	ctx.lineTo(x+radius,y);
	ctx.quadraticCurveTo(x,y,x,y+radius);
	if (!nopath) ctx.closePath();
}
function getRadius(radius,width,height){
	var part = (Math.min(width,height)/100);
	radius = Math.max(Math.min(100,radius/part),0);
	return radius + '%';
}
function addMapper() {
	var themaps = getMaps('mapper');
	var image, object, bgrnd, canvas, blind, context, mapid, mname, ele, atr; 
	var classes = '', newClasses = '', func = '', tmp, i, j, o, b, c, d, r, t, n, f, x, y, w, h, pw, ph;
	for(i=0;i<themaps.length;i++) {
		image = themaps[i]; object = image.parentNode;
		if(image.id=='') {image.id = "gmipam_"+i;}
		object.style.position = (object.style.position=='static'||object.style.position==''?'relative':object.style.position);
		object.style.height = image.height+'px';
		object.style.width = image.width+'px';
		object.style.padding = 0+'px';
		object.style.MozUserSelect = "none";
		object.style.KhtmlUserSelect = "none"; 
		object.unselectable = "on";
		r = 0; n = 0; f = 0; b = '0000ff'; c = '000000'; o = 33;
		if(isCV) {canvas = document.createElement('canvas');}else if(isVM) {
		canvas = document.createElement(['<var style="zoom:1;overflow:hidden;display:block;width:'+image.width+'px;height:'+image.height+'px;padding:0;">'].join(''));
		}else {canvas = document.createElement('div');}
		canvas.id = image.id+'_canvas';
		classes = image.className.split(' '); 
		r = getClassValue(classes,"iradius");
		o = getClassValue(classes,"iopacity");
		b = getClassRGBColor(classes,"iborder",'0000ff');
		c = getClassRGBColor(classes,"icolor",'000000');
		n = getClassAttribute(classes,"noborder");
		f = getClassAttribute(classes,"nofade");
		d = getClassAttribute(classes,"showcoords");
		o = o==0?0.33:o/100; r = parseInt(Math.min(Math.min(image.width/4,image.height/4),r));
		newClasses = getClasses(classes,"mapper");
		image.className = newClasses;
		mname = image.useMap.split("#"); mname = mname[1];
		mapid = document.getElementsByName(mname);
		if(mapid.length>0) {	
			for(j=0;j<mapid[0].areas.length;j++) {
				if(mapid[0].areas[j].shape.match(/(rect|poly|circle)/i)) {
					if(window.opera||mapid[0].areas[j].coords!='') {
						if(mapid[0].areas[j].id=='') {mapid[0].areas[j].id = mname+'_'+j;}
						if(isVM||isIE) {
							func = mapid[0].areas[j].onmouseover; if(func!=null) {tmp=String(func); func=tmp.substr(23,tmp.length-25);}
							mapid[0].areas[j].onmouseover = new Function('setAreaOver(this,"'+canvas.id+'","'+b+'","'+c+'","'+o+'",'+n+','+f+','+i+');'+func); 
							func = mapid[0].areas[j].onmouseout; if(func!=null) {tmp=String(func); func=tmp.substr(23,tmp.length-25);}
							mapid[0].areas[j].onmouseout = new Function('setAreaOut(this,"'+canvas.id+'",'+f+','+i+');'+func); 
						}else {
							func = mapid[0].areas[j].getAttribute("onmouseover"); mapid[0].areas[j].setAttribute("onmouseover","setAreaOver(this,'"+canvas.id+"','"+b+"','"+c+"','"+o+"',"+n+","+f+","+i+");"+func); 
							func = mapid[0].areas[j].getAttribute("onmouseout"); mapid[0].areas[j].setAttribute("onmouseout","setAreaOut(this,'"+canvas.id+"',"+f+","+i+");"+func); 
						}
					}
				}
			}
		}
		canvas.style.height = image.height+'px';
		canvas.style.width = image.width+'px';
		canvas.height = image.height;
		canvas.width = image.width;
		canvas.left = 0; canvas.top = 0;
		canvas.style.position = 'absolute';
		canvas.style.left = 0+'px';
		canvas.style.top = 0+'px';
		canvas.fading = 0;
		image.className = '';
		image.style.cssText = '';
		image.left = 0; image.top = 0;
		image.style.position = 'absolute';
		image.style.height = image.height+'px';
		image.style.width = image.width+'px';
		image.style.left = 0+'px';
		image.style.top = 0+'px';
		image.style.MozUserSelect = "none";
		image.style.KhtmlUserSelect = "none"; 
		image.unselectable = "on";
		if(isIE) {image.style.filter = "Alpha(opacity=0)";
		}else {image.style.opacity = 0;
  		image.style.MozOpacity = 0;
  		image.style.KhtmlOpacity = 0;}
		if(isCV && r>0) {bgrnd = document.createElement('canvas');}else if(isVM && r>0) {
		bgrnd = document.createElement(['<var style="zoom:1;overflow:hidden;display:block;width:'+image.width+'px;height:'+image.height+'px;padding:0;">'].join(''));
		}else {bgrnd = document.createElement('img'); bgrnd.src = image.src;}
		bgrnd.id = image.id+'_image';
		bgrnd.left = 0; bgrnd.top = 0;
		bgrnd.style.position = 'absolute';
		bgrnd.style.height = image.height+'px';
		bgrnd.style.width = image.width+'px';
		bgrnd.style.left = 0+'px';
		bgrnd.style.top = 0+'px';
		object.insertBefore(canvas,image);
		blind = document.createElement('div');
		blind.id = mname+'_blind';
		blind.className = "blind_area";
		blind.left = 0; blind.top = 0;
		blind.style.position = 'absolute';
		blind.style.height = image.height+'px';
		blind.style.width = image.width+'px';
		blind.style.left = 0+'px';
		blind.style.top = 0+'px';
		blind.innerHTML = " ";
		object.insertBefore(blind,image);
		if(isCV) {
			context = canvas.getContext("2d");
			context.clearRect(0,0,canvas.width,canvas.height);
		}else if(!isVM && !isCV) {if(isIE) {
			canvas.style.filter = "Alpha(opacity="+(o*100)+")";
			}else { canvas.style.opacity = o;
  			canvas.style.MozOpacity = o;
  			canvas.style.KhtmlOpacity = o;}
			if(typeof(window['jsGraphics']) !== 'undefined') {
				jg[i] = new jsGraphics(canvas); isJG = 1;
			}
		}		
		object.insertBefore(bgrnd,canvas);
		if(isCV && r>0) {
			bgrnd.height = image.height; bgrnd.width = image.width;
			context = bgrnd.getContext("2d");
			context.clearRect(0,0,bgrnd.width,bgrnd.height);
			roundedRect(context,0,0,bgrnd.width,bgrnd.height,r);
			context.clip();
			context.fillStyle = 'rgba(0,0,0,0)';
			context.fillRect(0,0,bgrnd.width,bgrnd.height);
			context.drawImage(image,0,0,bgrnd.width,bgrnd.height);
		}else if(isVM && r>0) {
			bgrnd.height = image.height; bgrnd.width = image.width; r = getRadius(r,bgrnd.width,bgrnd.height);		
			bgrnd.innerHTML = '<v:roundrect arcsize="'+r+'" strokeweight="0" filled="t" stroked="f" fillcolor="#ffffff" style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:0px;top:0px;width:'+bgrnd.width+'px;height:'+bgrnd.height+'px;"><v:fill src="'+image.src+'" type="frame" /></v:roundrect>';
		}		
		if(d>0) {
			ele = document.getElementById(image.id);
			w = parseInt(image.width); h = parseInt(image.height);
			t = findPosXY(ele); x = t.x; y = t.y;
			ph = document.body.scrollHeight; pw = document.body.scrollWidth;
			if(isVM||isIE) {
				func = image.onmousemove; if(func!=null) {tmp=String(func); func=tmp.substr(23,tmp.length-25);}
				image.onmousemove = new Function('getCoords(event,"'+mname+'",0,"'+image.id+'",'+x+','+y+','+w+','+h+','+pw+','+ph+');'+func); 
			}else {
				func = image.getAttribute("onmousemove"); 
				image.setAttribute("onmousemove","getCoords(event,'"+mname+"',0,'"+image.id+"',"+x+","+y+","+w+","+h+","+pw+","+ph+");"+func); 
			}
			if(mapid.length>0) {
				for(j=0;j<mapid[0].areas.length;j++) {
					if(mapid[0].areas[j].shape.match(/(rect|poly|circle)/i)) { 
						if(window.opera||mapid[0].areas[j].coords!='') {
							atr = mapid[0].areas[j].id;
							if(isVM||isIE) {
								func = mapid[0].areas[j].onmousemove; if(func!=null) {tmp=String(func); func=tmp.substr(23,tmp.length-25);}
								mapid[0].areas[j].onmousemove = new Function('getCoords(event,"'+mname+'","'+atr+'","'+image.id+'",'+x+','+y+','+w+','+h+','+pw+','+ph+');'+func); 
							}else {
								func = mapid[0].areas[j].getAttribute("onmousemove"); 
								mapid[0].areas[j].setAttribute("onmousemove","getCoords(event,'"+mname+"','"+atr+"','"+image.id+"',"+x+","+y+","+w+","+h+","+pw+","+ph+");"+func); 
							}
						}
					}
				}
			}
		}
	}
}

var mapperOnload = window.onload;
window.onload = function () { if(mapperOnload) mapperOnload(); addMapper(); }
</script>
</head>
<body>

	<img src="images/stories/image002.jpg" class="mapper" border="0" usemap="#image002" />

	<map id="image002" name="image002">
	<area shape="poly" alt="Pasochoa" coords="234,71,242,65,253,83,260,88,257,91,258,95,255,97,253,93,255,92,251,88,248,89,249,84,241,92,234,90,231,95,226,89,230,88,228,84,226,77,233,77" href="/snap/index.php?option=com_content&view=article&id=8&Itemid=8" title="Pasochoa" />
	</map>
</body>
</html>

And this is what i'm writing in my joomla article

Code: Select all

{jumi [new2.php]}

vashanka · Post by **vashanka** » Fri Jan 09, 2009 12:15 am

I wanted to leave a note for anyone else trying to insert Flash video with Jumi into Joomla 1.5. I was able to successfully make it work, tested against IE7, Firefox3, and Safari. Here were my steps using the latest version of Jumi, Flash CS3 Pro, and Adobe Premiere.

Note: I'm doing this with Jumi because a) jumi is great and b) I don't like adding yet another bunch of javascript files to every page of my poor Joomla site with AllVideosReloaded... and I had playback probs with AVR as well.

Pro's: using Jumi keeps the code lean and mean, plus very manageable.
Con's: I never could get Flash player detection working, so video won't work for folks either missing the player or not having at least Flash player 8. So be it.

So Jumi it is. Do this:

1. Create the .flv with whatever video editor you prefer. I user Premiere and sometimes SUPER.

2. Create a new .fla as ActionScript 3.0 but DO NOT USE Flash's "Import Video" command. Doing so normally works well but your playback controls will not display in your Joomla page. Your video will display, and the page can find the .js security fix Flash kicks out, but your playback controls simply won't show up. Anyone figuring this out gets a golden banana.

3. Instead, Insert the video with Flash components. Here's a page with a step-by-step tutorial. You are stuck with the clear playback controls but again they should look fine for most sites.

4. Publish as a .swf. You might want to publish the HTML as well for step 6 below. Don't turn on flash player detection or it won't work.

5. Move the .swf and .flv up to your website. I put mine in /images/video/ I noticed that Jumi seemed to have problems if I placed them in deeper directories, so you'll need to use a good file name convention to keep from stomping on your files.

6. Make a new Jumi app record. In the Custom Script section put your standard <object> code:

Code: Select all

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="340" height="300">
  <param name="width" value="340" />
  <param name="height" value="300" />
  <param name="quality" value="high" />
  <param name="wmode" value="transparent" />
  <param name="src" value="/CMS/DRI/images/video/08272008-angorawater.swf" />
  <embed type="application/x-shockwave-flash" width="340" height="300" quality="high" wmode="transparent" src="/CMS/DRI/images/video/08272008-angorawater.swf"></embed>

7. Reference the jumi app by record number as you normally would with jumi markup, and kerpow you have a video right in an article with nice playback controls.

Please contact me if you need any help.
-Vashanka

tokaichan · Post by **tokaichan** » Fri Jan 09, 2009 1:44 am

MarHaj wrote:
<script type='text/javascript'>
Here I want to check the username not equals "" and set var_1 to be true else var_1 to be false.
</script>
It's quite simple:
Code: Select all
<script type='text/javascript'>
<?php
if ($username != ""){
 echo("var_1 = true;");
} else {
 echo("var_1 = false;");
}
?>
</script>
or something similar.

Thank you very much MarHaj

MarHaj · Post by **MarHaj** » Fri Jan 09, 2009 9:07 am

Here is the php file that i'm calling in my article "new2.php"

Thanks.
So you need a script in header? OK.
I have got some suggestions:

Source of problems: new2.php contains <html>, <head> and <body> sections. With {jumi ...} written into the article it is included into an another body section (Joomla page). So I think the browser is confused and do not show "things" properly.

So I will show you here now how to inject js into Joomla header.
Save js code that will be in the head somewhere. Let's say aaa.js. Just javascript (no head, no body)
Prepare php file, let's say bbb.php containing this (for Joomla 1.5 only):

Code: Select all

<?php
defined('_JEXEC') OR  die( "Direct Access Is Not Allowed" );
global $mainframe;
$document = &JFactory::getDocument();
$document->addScript("somepathfromthe root/aaa.js");
?>

Nothing more.

Into Joomla article, where you want to use javascript write {jumi [somepathfromroot/bbb.php]}.
So now you have javascript in Joomla pager - its header section.

Now how to use it.
Write into the article manually

Code: Select all

 
<img src="images/stories/image002.jpg" class="mapper" border="0" usemap="#image002" />
<map id="image002" name="image002">
<area shape="poly" alt="Pasochoa" coords="234,71,242,65,253,83,260,88,257,91,258,95,255,97,253,93,255,92,251,88,248,89,249,84,241,92,234,90,231,95,226,89,230,88,228,84,226,77,233,77" href="/snap/index.php?option=com_content&view=article&id=8&Itemid=8" title="Pasochoa" />
</map>

Or you can again save the snippet into a php file and include it with Jumi.
So that's all.

Simple, huh?

Variants:
a) If you want to use <head> javascript in many pages, it is better to inject js into header by Jumi module.
b) There are many possibilities there. You will find them in time. Or just ask here.

Remark: you will find more about injecting css, js etc. into Joomla html header more in Joomla documentation under $object and its methods.
$document->addStyleSheet( …); // for x.css
$document->addScript(…); //for x.js
$document->addCustomTag(...); // for written script

MarHaj · Post by **MarHaj** » Fri Jan 09, 2009 9:14 am

Vashanka!
Your flash tutorial with Jumi is excellent.
Thanks!

MarHaj · Post by **MarHaj** » Fri Jan 09, 2009 9:36 am

UPDATE I was running Version 1.5.6 my host had just upgraded, good timing or what, just lucky I was only running a couple of tests I've installed Version 1.5.8 Jumi working GREAT!

Huh!!! Computerbarry I am happy for you (and me).

New answers

1. how do I now make my articles and latest news etc use <div>'s instead of tables, all of my modules in my template are style=xhtml and produce <div>'s but when I display articles and latest news, blogs they use tables?? how can i remove the tables?

a) choose template wisely. Many of them are tabelless but not all. For Joomla 1.5 they are sophisticated templates that not only templates index.php but articles, blogs, ...For example ja-purity has these advanced things under templates/ja-purity/html directory.
b) although you have modules included with xhtml style in the template it does not mean they are not internally designed as tables. And I am affraid some developers still use tables.

2. do I need to place defined( '_JEXEC' ) or die( 'Restricted access' ); in every piece of php code I use in a module, component or article I publish, or is it just when you link to a php file?

No. Use it just for php files stored in your server.

3. how do I place code into an article? I pasted some PHP code and it doesn't show, how does jumi work here?

Direct code inclusion is not possible so far.
You have to store the code either into Jumi database record (via jumi component) or into the file first.
Then include this stored code into the article by writing {jumi [reference_to_stored_code]}.

MarHaj · Post by **MarHaj** » Fri Jan 09, 2009 12:37 pm

I have just published at Jumi blog article on "How to become successful developer in less then 5 minutes".
I think it is quite instructive.
And, at the same time, rather sad. If I had known it before I would have never spent so much time on Jumi development, manuals, etc... :-(

cvharrison · Post by **cvharrison** » Fri Jan 09, 2009 1:43 pm

MarHaj wrote:
I tried uninstalling Jumi and reinstalling it multiple time in hopes of solving the problem, but it didn't work. Please let me know if I can provide you with more information.
Charlie, thanks for the information about your setup.
Everything seems to be OK for me.
I will discuss the problem with Edvard where can be the source. It is probably the same thing as Computerbarry above. Database.

So is anyone experiencing the same problem I am?

Thanks,

Charlie

ghazal · Post by **ghazal** » Fri Jan 09, 2009 1:48 pm

"Being copied is the ransom of success,” Coco Chanel, our most famous french designer, once said.
But when she saw blatant theft of her designs, she sued.
I guess you won't sue.
But there must be ways to warn Joomla higher ups ?
And time you spent on "Jumi development, manuals" hasn't been lost because thats been helpful to lots of us, Jumi users.

MarHaj · Post by **MarHaj** » Fri Jan 09, 2009 2:34 pm

Ghazal,
you are not only good coder but great comforter and empath too.
Thanks for your words of understanding.

P.S.: Higher ups have made noise of silence so far.
P.S.S. The time was not actually lost. I had a pleasure to meet people like you. This is the most valuable thing.
P.S.S.S. We, me and Edvard, are preparing new Jumi release. I have to say there are quite a large amount of improvements. I am looking forward that you and other users will enjoy them.

computerbarry · Post by **computerbarry** » Fri Jan 09, 2009 3:10 pm

Computerbarry I am happy for you (and me).

thanks MarHaj

although you have modules included with xhtml style in the template it does not mean they are not internally designed as tables. And I am affraid some developers still use tables

I was hoping to edit or created my own tabless template, using tables just goes against everything I've learnt over the years.

My main concern here is how all the content in the database get seen by the user-agent/browser, I currently have a site of a PR 4 in googles SERP which I hard coded in DW, this is the site I'm trying to convert over to Joomla and very worried I might lose any ranking, but I need Joomla for all the new and powerful features just finding it very hard to position stuff exactly the same in Joomla and get these things to work in the same way. What do you think?

No. Use it just for php files stored in your server.

Ok understand that, if these files our on the template do I need to place them in the .XML file?

For example ja-purity has these advanced things under templates/ja-purity/html directory.

Yes but all the articles and blog layouts etc still get wrapped in a <table>?

me and Edvard, are preparing new Jumi release. I have to say there are quite a large amount of improvements.

what does that mean for people who have spent time building big sites, will this be just a basic upgrade?

Thanks again MarHaj a think a lot of people would be lost with out your support and hard work big thanks and just bookmarked your blog cheers

lobosan · Post by **lobosan** » Fri Jan 09, 2009 4:31 pm

MarHaj wrote:
Here is the php file that i'm calling in my article "new2.php"
Thanks.
So you need a script in header? OK.
I have got some suggestions:

Source of problems: new2.php contains <html>, <head> and <body> sections. With {jumi ...} written into the article it is included into an another body section (Joomla page). So I think the browser is confused and do not show "things" properly.

So I will show you here now how to inject js into Joomla header.
Save js code that will be in the head somewhere. Let's say aaa.js. Just javascript (no head, no body)
Prepare php file, let's say bbb.php containing this (for Joomla 1.5 only):
Code: Select all
<?php
defined('_JEXEC') OR  die( "Direct Access Is Not Allowed" );
global $mainframe;
$document = &JFactory::getDocument();
$document->addScript("somepathfromthe root/aaa.js");
?> 
Nothing more.

Into Joomla article, where you want to use javascript write {jumi [somepathfromroot/bbb.php]}.
So now you have javascript in Joomla pager - its header section.

Now how to use it.
Write into the article manually
Code: Select all
 
<img src="images/stories/image002.jpg" class="mapper" border="0" usemap="#image002" />
<map id="image002" name="image002">
<area shape="poly" alt="Pasochoa" coords="234,71,242,65,253,83,260,88,257,91,258,95,255,97,253,93,255,92,251,88,248,89,249,84,241,92,234,90,231,95,226,89,230,88,228,84,226,77,233,77" href="/snap/index.php?option=com_content&view=article&id=8&Itemid=8" title="Pasochoa" />
</map>
Or you can again save the snippet into a php file and include it with Jumi.
So that's all.

Simple, huh?

Variants:
a) If you want to use <head> javascript in many pages, it is better to inject js into header by Jumi module.
b) There are many possibilities there. You will find them in time. Or just ask here.

Remark: you will find more about injecting css, js etc. into Joomla html header more in Joomla documentation under $object and its methods.
$document->addStyleSheet( …); // for x.css
$document->addScript(…); //for x.js
$document->addCustomTag(...); // for written script

Hi MarHaj... thank you so much... it works perfectly... i really appreciate the time you spend to answer my cuestion

The Joomla! Forum™

Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions

Re: Jumi - the set of custom code extensions