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 27-05-2013 19:26:26

chrisly
Contributors
From: Germany
Registered: 05-05-2013
Posts: 80
Website

Tile which scale up on click

Hey Thomas,

I was wondering if it´s possible to have a tile which change the size from e.g. 1x1 to 2x2 when clicked or hovered and be in the front of other tiles.

What do you think? Is this possible?

Regards,
Chris

Offline

#2 27-05-2013 20:35:27

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

Re: Tile which scale up on click

Ofcourse this is possible wink
You need to create your own tile plugin and create a tile of 1x1. Then create some javascript function that detects hover of the tile and change the width to something you want. $(".tileWithClass").animate({width:400},500);

Offline

#3 27-05-2013 20:42:31

chrisly
Contributors
From: Germany
Registered: 05-05-2013
Posts: 80
Website

Re: Tile which scale up on click

ok, will try this tomorrow... smile but if this will work, i dont know, hehe

Last edited by chrisly (27-05-2013 20:47:24)

Offline

#4 28-05-2013 08:24:29

chrisly
Contributors
From: Germany
Registered: 05-05-2013
Posts: 80
Website

Re: Tile which scale up on click

hey...
I´ve try a lot of things that I found in google... this works quite nice and easy on html... tested on jsfiddle... it´s annoys me that to include this in the template is for me like reading a language i dont understand hmm hmm sad

The example is here, maybe you can give me a hint what I need to do to include this big_smile
http://jsfiddle.net/XWpCz/12/

thanks in advance
Chris

Last edited by chrisly (28-05-2013 10:17:16)

Offline

#5 28-05-2013 18:51:36

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

Re: Tile which scale up on click

You'll have to create your own plugin.
Add a class to the tile you want to scale and add in a js plugin file the code you want. Change the id of your example to the class of the tile that should scale smile

Offline

#6 29-05-2013 08:12:19

chrisly
Contributors
From: Germany
Registered: 05-05-2013
Posts: 80
Website

Re: Tile which scale up on click

ok it works, thanks!!! But have one bug, maybe you can give me a hint and point me in the right direction smile

Whenever I enter a tile from the same group without the new class, e.g. tileImg...
The tile with the new class show the effect, it should be show the effect only when I enter the tile with the class, isn´t it??

http://chrisly.org/#&testsite

first tile is with the class scale... 2nd tile is without this class

the js code that i use currently is

$(document).on("mouseenter",".tileImg",function() {
$("a.scale").stop().animate({width:300, height:300},500);

}).on("mouseleave",".tileImg",function() {
$("a.scale").stop().animate({width:145, height:145},500);
});

Last edited by chrisly (29-05-2013 09:26:39)

Offline

#7 29-05-2013 17:41:09

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

Re: Tile which scale up on click

$(document).on("mouseenter",".tileImg",function() {
$(this).stop().animate({width:300, height:300},500);
}).on("mouseleave",".tileImg",function() {
$(this).stop().animate({width:145, height:145},500);
});


Should be better.

wink

Offline

#8 07-06-2013 13:40:50

chrisly
Contributors
From: Germany
Registered: 05-05-2013
Posts: 80
Website

Re: Tile which scale up on click

finally I got this working in a bit other way which is at the end not tooo bad smile

content of the scale plugin java scirpt is

__________________________________

/* scale 1 */

$(document).on("mouseenter",".scale",function() {
$("a.scale").stop().animate({width:600, height:300},500);

}).on("mouseleave",".scale",function() {
$("a.scale").stop().animate({width:145, height:300},500);
});

/* scale 2 */

$(document).on("mouseenter",".scale1",function() {
$("a.scale1").stop().animate({width:300, height:300},500);

}).on("mouseleave",".scale1",function() {
$("a.scale1").stop().animate({width:145, height:145},500);
});

__________________________________

classes are scale and scale1, you can extend this with 1000000 more types... just change the class names... reason why this is better from my point of view is that you can set the size unique for every class and needed tile size

example is shown here.

http://www.chrisly.org/#&testarea

Last edited by chrisly (07-06-2013 13:43:43)

Offline

Board footer

Powered by FluxBB