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 29-03-2013 13:29:01

Infopath
Contributors
Registered: 22-03-2013
Posts: 27
Website

Problem with tileFlip when background is a gradient

When I give tileFlip's background as a gradient, it acts funny. When it flips, the gradient is just there behind the tile. It doesn't flip with the tile.

Example: This site: http://www.cse.iitb.ac.in/~pratnala/infopath/

Flip the first tile in about, I hope you understand what I'm trying to say.

This is the code for that tile

tileFlip (1, 0, 0, 1, 1, '', 'Overview', 'img/tilegroup_about/overview.jpg','<span style="font-size:25px;"><br />Overview</span>', '', 'GradientOverviewTile');

GradientOverviewTile has been declared in your.css. It is basically a gradient generated from http://www.colorzilla.com/gradient-editor/

Offline

#2 29-03-2013 14:28:40

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

Re: Problem with tileFlip when background is a gradient

That is correct, because the gradient is applied to background (which never rotates). You have applied the background to flipContainer but only in the case of fliptile you need to apply it manually (using css) to either flipFront or flipBack divs (in plugin.css). To apply the gradient to only one tile, create a new plugin from fliptile and just rename it flipgradient and the variables inside the code as flipgradientFront, etc


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

Offline

#3 29-03-2013 17:06:01

Infopath
Contributors
Registered: 22-03-2013
Posts: 27
Website

Re: Problem with tileFlip when background is a gradient

Could you explain it in a bit more detail?

Offline

#4 29-03-2013 21:34:00

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

Re: Problem with tileFlip when background is a gradient

Ok, sorry, I'll explain the concept.

Cut/Delete the gradient from your.css

Add this to your plugin.css at somewhere inside .flipBack{} like this (I'm using "..........." to show that there's extra code that you're not changing - just insert your gradient code)

.flipBack{
..................................
background: rgb(0,36,0); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMjQwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzAwNTcwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iIzAwOGEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iIzUyYjE1MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top,  rgba(0,36,0,1) 0%, rgba(0,87,0,1) 17%, rgba(0,138,0,1) 33%, rgba(82,177,82,1) 67%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,36,0,1)), color-stop(17%,rgba(0,87,0,1)), color-stop(33%,rgba(0,138,0,1)), color-stop(67%,rgba(82,177,82,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,36,0,1) 0%,rgba(0,87,0,1) 17%,rgba(0,138,0,1) 33%,rgba(82,177,82,1) 67%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,36,0,1) 0%,rgba(0,87,0,1) 17%,rgba(0,138,0,1) 33%,rgba(82,177,82,1) 67%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,36,0,1) 0%,rgba(0,87,0,1) 17%,rgba(0,138,0,1) 33%,rgba(82,177,82,1) 67%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,36,0,1) 0%,rgba(0,87,0,1) 17%,rgba(0,138,0,1) 33%,rgba(82,177,82,1) 67%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002400', endColorstr='#52b152',GradientType=0 ); /* IE6-8 */
...................

Declare your tile normally without GradientOverviewTile mentioned (you don't need that anymore, but the disadvantage is that all your fliptiles will have the above gradient)

tileFlip(1,0,0,1,1,'','Overview','img/tilegroup_about/overview.jpg','<span style="font-size:25px;"><br />Overview</span>','','');

To create tiles with different backgrounds just create several tileflip plugins (copy&paste the tileflip folder and rename it  and all the variables inside).

I have tested this, let me know if you have problems


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

Offline

#5 31-03-2013 16:44:17

Infopath
Contributors
Registered: 22-03-2013
Posts: 27
Website

Re: Problem with tileFlip when background is a gradient

It was working but my plugins folder got cluttered. So, here's what I did.

In tiles.js, at the end of the file, I created a variable called overviewBg and stored the css of .GradientOverviewTile without comments and in one continuous line in it.

And then, this was the code for the tile

tileFlip (1, 0, 0, 1, 1, overviewBg, 'Overview', 'img/tilegroup_about/overview.jpg','<span style="font-size:25px;"><br />Overview</span>', '', '');

and

overviewBg = "background: rgb(0,36,0);background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMjQwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzAwNTcwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iIzAwOGEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iIzUyYjE1MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);background: -moz-linear-gradient(top,  rgba(0,36,0,1) 0%, rgba(0,87,0,1) 17%, rgba(0,138,0,1) 33%, rgba(82,177,82,1) 67%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,36,0,1)), color-stop(17%,rgba(0,87,0,1)), color-stop(33%,rgba(0,138,0,1)), color-stop(67%,rgba(82,177,82,1)));background: -webkit-linear-gradient(top,  rgba(0,36,0,1) 0%,rgba(0,87,0,1) 17%,rgba(0,138,0,1) 33%,rgba(82,177,82,1) 67%);background: -o-linear-gradient(top,  rgba(0,36,0,1) 0%,rgba(0,87,0,1) 17%,rgba(0,138,0,1) 33%,rgba(82,177,82,1) 67%);background: -ms-linear-gradient(top,  rgba(0,36,0,1) 0%,rgba(0,87,0,1) 17%,rgba(0,138,0,1) 33%,rgba(82,177,82,1) 67%);background: linear-gradient(to bottom,  rgba(0,36,0,1) 0%,rgba(0,87,0,1) 17%,rgba(0,138,0,1) 33%,rgba(82,177,82,1) 67%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002400', endColorstr='#52b152',GradientType=0 );"

Offline

#6 31-03-2013 18:49:55

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

Re: Problem with tileFlip when background is a gradient

Perfect, great ideea! I'll make something like this in my own website smile


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

Offline

Board footer

Powered by FluxBB