You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 16-03-2013 18:14:19

dynamicsint
Contributors
Registered: 15-03-2013
Posts: 29

Problem with Jquery

Hello everybody,

I meet a problem by using Jquery in Tiles of this template.

The code Jquery does not dash all the time.

If I place a Javascript warning message :

alert 
("test");

the execution of Jquery works but without this preliminary message it is more random.

my Jquery code is placed on bottom of index.php just before the .

it's a plugin Jquery for display a world maps with zoom and tooltips. my code :

<script>
$(document).ready(function(){ 

alert("test");
jQuery('#vmap2').vectorMap({
map: 
'world_en',
backgroundColor: null,
color: '#ffffff',
hoverOpacity: 
0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: 
true,
values: sample_data,
scaleColors: ['#2e8cef', 
'#000000'],
normalizeFunction: 
'polynomial'
});
});
</script>

have you got any idea to fix this ?

Thank you for your help.

p.s : On the old forum, Thomas have propose to change Jquery( in $( but after test, the result was the same for me :-/

Offline

#2 16-03-2013 18:19:55

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Problem with Jquery

Where exactly did you post this code? I think the code is ran before your plugin is loaded or something like that. And because of the alert message the code is put on hold and resumes when you click "ok" but the file is loaded then so it works.

Offline

#3 16-03-2013 18:27:53

dynamicsint
Contributors
Registered: 15-03-2013
Posts: 29

Re: Problem with Jquery

i have post this code at the bottom of index.php just before the </body>.

Also the DIV id='map2' is post on tiles.js

Offline

#4 16-03-2013 18:49:42

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Problem with Jquery

So you mean that the problem is that it doesn't run always?

Offline

#5 16-03-2013 19:00:57

dynamicsint
Contributors
Registered: 15-03-2013
Posts: 29

Re: Problem with Jquery

i don't know but i think it doesn't run always because with an alert message the map display (but it's not all the time with the alert message :-/) so it's very random and i don't understand why.

if you add jquery code on a tile it's good for you ?

Also, i have try to add an other jquery code on an other tile to display a cloud of tags (like this : http://codepress.ru/jquery/jcloud/) but i have the same problem.

Offline

#6 16-03-2013 19:46:32

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Problem with Jquery

please change the alert in console.log because alert's mess up the timing of the code thuss influences the results.

Can you search in the source of your code where the function vectorMap is declared and add there a console.log("test"); to see wether it is executed or not?

Offline

#7 18-03-2013 09:29:58

dynamicsint
Contributors
Registered: 15-03-2013
Posts: 29

Re: Problem with Jquery

Hi,

ok i have post a console.log just before this code :
console.log("test");
jQuery.fn.vectorMap('addMap', 'world_en', ......

i don't know if it's the good place.

So, when i display the console of Chrome, i will look the "test" but no map who display.

An other user of the template can he test to add a jquery script on a tile to know if it's a problem for everyone or just me ? Thanks ;-)

Offline

#8 18-03-2013 11:23:42

Emil
Moderator
From: in a shipyard
Registered: 15-03-2013
Posts: 106

Re: Problem with Jquery

I guess you are calling the contents of the tile before the tile is made...Sometimes it works sometimes it does not depending on how fast javascript creates your tiles. Have you tried to place the code in the

$.plugin($afterTilesAppend,{myjquwerytest:function(){//place your code here}})

or

$.plugin($afterTilesShow,{myjquwerytest:function(){//place your code here}})

function? Check the googlemaps plugin or tileMedia plugin on how to use either. Create a new blank plugin (check an example on how to make one) and place your code in plugin.js. 
Example:
Create a new plugin directory. Name it jCloud. Download jCloud, place all files directly in the jCloud plugin's directory, remove index.html file, go to JCloud's file jcloud.css, remove following code:

body {
margin: 0px;
padding: 20px 50px;
background-color: #F4A518;
font-family: Arial;
}
h1, h2 {
margin: 0px;
font-style: italic;
}
pre {
border: 1px dotted #000000;
padding: 20px;
background-color: #ffffff;
}

Go to your new plugin.js
plugin.js:

$.plugin($afterTilesShow,{
myjquwerytest:function(){
$('ul#jcloud-tags').jcloud({
		radius:200,          //    cloud radius
		size:30,             //    tags font size
		step:2,              //    cloud step
		speed:50,            //    cloud speed
		flats:2,             //    flats count
		clock:10,            //    timer interval
		areal:100,           //    cloud areal
		splitX:100,          //    X-axis delta
		splitY:100,          //    Y-axis delta
		colors:['#000000','#DD2222','#2267DD','#2A872B','#872A7B','#CAC641']
	});
}
})
tilejCloud = function(group,x,y,width,height,bg,linkPage,optClass){ /* Tile with jCloud */	
	$page.content += (
	"<a "+makeLink(linkPage)+" class='tile group"+group+" "+optClass+"' style=' \
	margin-top:"+((y*$tile.scalespacing)+45)+"px; margin-left:"+(x*$tile.scalespacing+group*$group.spacing)+"px; \
	width: "+(width*$tile.scalespacing-$tile.spacing)+"px; height:"+(height*$tile.scalespacing-$tile.spacing)+"px; \
	background:"+bg+";'>\
	<ul id="jcloud-tags">\
			<li><a href="#">tag 1</a></li>\
			<li><a href="#">tag 2</a></li>\
			<li><a href="#">tag 3</a></li>\
			<li><a href="#">tag 4</a></li>\
			<li><a href="#">tag 5</a></li>\
			<li><a href="#">tag 6</a></li>\
			<li><a href="#">tag 7</a></li>\
			<li><a href="#">tag 8</a></li>\
			<li><a href="#">tag 9</a></li>\
			<li><a href="#">tag 10</a></li>\
			<li><a href="#">tag 11</a></li>\
			<li><a href="#">tag 12</a></li>\
			<li><a href="#">tag 13</a></li>\
			<li><a href="#">tag 14</a></li>\
			<li><a href="#">tag 15</a></li>\
			<li><a href="#">tag 16</a></li>\
			<li><a href="#">tag 17</a></li>\
			<li><a href="#">tag 18</a></li>\
			<li><a href="#">tag 19</a></li>\
			<li><a href="#">tag 20</a></li>\
			<li><a href="#">tag 31</a></li>\
			<li><a href="#">tag 32</a></li>\
			<li><a href="#">tag 33</a></li>\
			<li><a href="#">tag 34</a></li>\
			<li><a href="#">tag 35</a></li>\
			<li><a href="#">tag 36</a></li>\
			<li><a href="#">tag 37</a></li>\
			<li><a href="#">tag 38</a></li>\
			<li><a href="#">tag 39</a></li>\
			<li><a href="#">tag 40</a></li>\
			<li><a href="#">tag 41</a></li>\
			<li><a href="#">tag 42</a></li>\
			<li><a href="#">tag 43</a></li>\
			<li><a href="#">tag 44</a></li>\
			<li><a href="#">tag 45</a></li>\
			<li><a href="#">tag 46</a></li>\
			<li><a href="#">tag 47</a></li>\
			<li><a href="#">tag 48</a></li>\
			<li><a href="#">tag 49</a></li>\
			<li><a href="#">tag 50</a></li>\
		</ul>\
	</a>");
}

plugin.php:

<?php
$plHead.="<script type='text/javascript' src='plugins/jCloud/jcloud.js'></script>";
?>

Call your tile like this:
tilejCloud = function(0,0,4,2,2,'red','','');

Last edited by Emil (18-03-2013 11:25:30)


Good advice is often confusing, but example is always clear.

Offline

#9 20-03-2013 14:38:15

dynamicsint
Contributors
Registered: 15-03-2013
Posts: 29

Re: Problem with Jquery

Hi Emil and thanks for your help !

Your solution seems to be a good idea.

So, i have just tried to make as in your example but nothing more appears on my site.
I think that there are just some details to be adjusted but that we are on the right track.

For information, on your code, i have just edit :
a href="#">tag 1</a> by a href='#'>tag 1</a>

and  <ul id="jcloud-tags"> by <ul id='jcloud-tags'>

because i think double quote it's not correct for the content variable.

Have you test this Jcloud tile on your computer ? it's functionnal ?

Thanks.

Offline

#10 20-03-2013 15:03:21

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Problem with Jquery

Do you have your site online somewhere ?

Offline

#11 20-03-2013 15:06:22

dynamicsint
Contributors
Registered: 15-03-2013
Posts: 29

Re: Problem with Jquery

yes but on the online version, i have not add the Emil's example, i test on my local website.

Offline

#12 20-03-2013 15:11:05

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Problem with Jquery

Hm can you upload the version with emils example somewhere? If nothing appears, it means an jQuery syntax error.

Offline

#13 20-03-2013 15:22:40

dynamicsint
Contributors
Registered: 15-03-2013
Posts: 29

Re: Problem with Jquery

Ok i have created a new folder to show the version with Jcloud tile.

Last edited by dynamicsint (28-03-2013 09:09:30)

Offline

#14 20-03-2013 15:25:05

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Problem with Jquery

Don't know if this causes the problem, but I think on line 79 of tiles.js

this
tilejCloud = function(4,0,2,2,2,'red','','');
shoudl be
tilejCloud(4,0,2,2,2,'red','','');

btw; also edit your config.js file and remove those $ from the pageLink array

I love the left-side buttons on your site and the colors!

Offline

#15 20-03-2013 15:29:02

dynamicsint
Contributors
Registered: 15-03-2013
Posts: 29

Re: Problem with Jquery

oooh yes you are right ! i can't believe i have not see this mistake ! smile

i have upate the website : now, the website is functionnal but the Jcloud does not display on his tile but on center of the home page !

Offline

#16 20-03-2013 15:31:22

dynamicsint
Contributors
Registered: 15-03-2013
Posts: 29

Re: Problem with Jquery

i have not see the rest of your message ! thank you very much. i have a secret for you. My boss show my website directly at the marketing director of Microsoft France and they were impressed! It is also thanks to you ;-)

Offline

#17 20-03-2013 15:42:31

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Problem with Jquery

The position of its div is at (0,0) so the tags are placed right.

Probably something is wrong with the php code which generates the tile. What code do you have for showing the tile?

Offline

#18 20-03-2013 15:56:16

dynamicsint
Contributors
Registered: 15-03-2013
Posts: 29

Re: Problem with Jquery

on my tiles.js i have placed the Jcloud on the 4th group :

tilejCloud(4,0,2,2,2,'red','','');

What code do you have for showing the tile?

Sorry, but i didn't understand what you want. :-/

Last edited by dynamicsint (20-03-2013 15:57:45)

Offline

#19 20-03-2013 16:09:07

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Problem with Jquery

I mean the file where the function tilejCloud is declared (probably a plugin file?)

Offline

#20 20-03-2013 16:14:07

dynamicsint
Contributors
Registered: 15-03-2013
Posts: 29

Re: Problem with Jquery

ok, the code was declared in plugin.js (placed on /plugins/jCloud/)

i have just paste code of Emil and replace double quote by simple quote :

$.plugin($afterTilesShow,{
myjquwerytest:function(){
$('ul#jcloud-tags').jcloud({
		radius:200,          //    cloud radius
		size:30,             //    tags font size
		step:2,              //    cloud step
		speed:50,            //    cloud speed
		flats:2,             //    flats count
		clock:10,            //    timer interval
		areal:100,           //    cloud areal
		splitX:100,          //    X-axis delta
		splitY:100,          //    Y-axis delta
		colors:['#000000','#DD2222','#2267DD','#2A872B','#872A7B','#CAC641']
	});
}
})
tilejCloud = function(group,x,y,width,height,bg,linkPage,optClass){ /* Tile with jCloud */	
	$page.content += (
	"<a "+makeLink(linkPage)+" class='tile group"+group+" "+optClass+"' style=' \
	margin-top:"+((y*$tile.scalespacing)+45)+"px; margin-left:"+(x*$tile.scalespacing+group*$group.spacing)+"px; \
	width: "+(width*$tile.scalespacing-$tile.spacing)+"px; height:"+(height*$tile.scalespacing-$tile.spacing)+"px; \
	background:"+bg+";'>\
	<ul id='jcloud-tags'>\
			<li><a href='#'>tag 1</a></li>\
			<li><a href='#'>tag 2</a></li>\
			<li><a href='#'>tag 3</a></li>\
			<li><a href='#'>tag 4</a></li>\
			<li><a href='#'>tag 5</a></li>\
			<li><a href='#'>tag 6</a></li>\
			<li><a href='#'>tag 7</a></li>\
			<li><a href='#'>tag 8</a></li>\
			<li><a href='#'>tag 9</a></li>\
			<li><a href='#'>tag 10</a></li>\
			<li><a href='#'>tag 11</a></li>\
			<li><a href='#'>tag 12</a></li>\
			<li><a href='#'>tag 13</a></li>\
			<li><a href='#'>tag 14</a></li>\
			<li><a href='#'>tag 15</a></li>\
			<li><a href='#'>tag 16</a></li>\
			<li><a href='#'>tag 17</a></li>\
			<li><a href='#'>tag 18</a></li>\
			<li><a href='#'>tag 19</a></li>\
			<li><a href='#'>tag 20</a></li>\
			<li><a href='#'>tag 31</a></li>\
			<li><a href='#'>tag 32</a></li>\
			<li><a href='#'>tag 33</a></li>\
			<li><a href='#'>tag 34</a></li>\
			<li><a href='#'>tag 35</a></li>\
			<li><a href='#'>tag 36</a></li>\
			<li><a href='#'>tag 37</a></li>\
			<li><a href='#'>tag 38</a></li>\
			<li><a href='#'>tag 39</a></li>\
			<li><a href='#'>tag 40</a></li>\
			<li><a href='#'>tag 41</a></li>\
			<li><a href='#'>tag 42</a></li>\
			<li><a href='#'>tag 43</a></li>\
			<li><a href='#'>tag 44</a></li>\
			<li><a href='#'>tag 45</a></li>\
			<li><a href='#'>tag 46</a></li>\
			<li><a href='#'>tag 47</a></li>\
			<li><a href='#'>tag 48</a></li>\
			<li><a href='#'>tag 49</a></li>\
			<li><a href='#'>tag 50</a></li>\
		</ul>\
	</a>");
}

Offline

#21 20-03-2013 16:24:29

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Problem with Jquery

Try replacing everything by

$.plugin($afterTilesShow,{
myjquwerytest:function(){
$('ul#jcloud-tags').jcloud({
		radius:200,          //    cloud radius
		size:30,             //    tags font size
		step:2,              //    cloud step
		speed:50,            //    cloud speed
		flats:2,             //    flats count
		clock:10,            //    timer interval
		areal:100,           //    cloud areal
		splitX:100,          //    X-axis delta
		splitY:100,          //    Y-axis delta
		colors:['#000000','#DD2222','#2267DD','#2A872B','#872A7B','#CAC641']
	});
}
})
tilejCloud = function(group,x,y,width,height,bg,linkPage,optClass){ /* Tile with jCloud */	
	$page.content += (
	"<div class='tile group"+group+" "+optClass+"' style=' \
	margin-top:"+((y*$tile.scalespacing)+45)+"px; margin-left:"+(x*$tile.scalespacing+group*$group.spacing)+"px; \
	width: "+(width*$tile.scalespacing-$tile.spacing)+"px; height:"+(height*$tile.scalespacing-$tile.spacing)+"px; \
	background:"+bg+";'>\
	<ul id='jcloud-tags'>\
			<li><a href='#'>tag 1</a></li>\
			<li><a href='#'>tag 2</a></li>\
			<li><a href='#'>tag 3</a></li>\
			<li><a href='#'>tag 4</a></li>\
			<li><a href='#'>tag 5</a></li>\
			<li><a href='#'>tag 6</a></li>\
			<li><a href='#'>tag 7</a></li>\
			<li><a href='#'>tag 8</a></li>\
			<li><a href='#'>tag 9</a></li>\
			<li><a href='#'>tag 10</a></li>\
			<li><a href='#'>tag 11</a></li>\
			<li><a href='#'>tag 12</a></li>\
			<li><a href='#'>tag 13</a></li>\
			<li><a href='#'>tag 14</a></li>\
			<li><a href='#'>tag 15</a></li>\
			<li><a href='#'>tag 16</a></li>\
			<li><a href='#'>tag 17</a></li>\
			<li><a href='#'>tag 18</a></li>\
			<li><a href='#'>tag 19</a></li>\
			<li><a href='#'>tag 20</a></li>\
			<li><a href='#'>tag 31</a></li>\
			<li><a href='#'>tag 32</a></li>\
			<li><a href='#'>tag 33</a></li>\
			<li><a href='#'>tag 34</a></li>\
			<li><a href='#'>tag 35</a></li>\
			<li><a href='#'>tag 36</a></li>\
			<li><a href='#'>tag 37</a></li>\
			<li><a href='#'>tag 38</a></li>\
			<li><a href='#'>tag 39</a></li>\
			<li><a href='#'>tag 40</a></li>\
			<li><a href='#'>tag 41</a></li>\
			<li><a href='#'>tag 42</a></li>\
			<li><a href='#'>tag 43</a></li>\
			<li><a href='#'>tag 44</a></li>\
			<li><a href='#'>tag 45</a></li>\
			<li><a href='#'>tag 46</a></li>\
			<li><a href='#'>tag 47</a></li>\
			<li><a href='#'>tag 48</a></li>\
			<li><a href='#'>tag 49</a></li>\
			<li><a href='#'>tag 50</a></li>\
		</ul>\
	</div>");
}

Offline

#22 20-03-2013 16:31:21

dynamicsint
Contributors
Registered: 15-03-2013
Posts: 29

Re: Problem with Jquery

yeaaaah ! it's perfect ! Thank you very much again Thomas (and Thanks to Emil too).

Now, i will try to add an other plugin jquery for display a maps. ;-)

Offline

#23 20-03-2013 16:36:23

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Problem with Jquery

If you mean Google maps, theres a tile for that already, but the performance is really bad.

Offline

#24 20-03-2013 16:38:10

dynamicsint
Contributors
Registered: 15-03-2013
Posts: 29

Re: Problem with Jquery

Thanks Thomas but it's not Google maps that i want.

Last edited by dynamicsint (28-03-2013 09:10:04)

Offline

#25 20-03-2013 17:06:20

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Problem with Jquery

It works nice smile

Offline

Board footer

Powered by FluxBB