Customize N900 Conversations - Page 24 - maemo.org

Active Topics

The N900 is now 15 years old! (7)
to Nokia N900 by Danct12 - 4 days ago
Sailfish OS for the Motorola Moto G7 Power (XT1955-5) - (ocean) (4)
to SailfishOS by Maemish - 4 days, 19 hrs ago
more...

Page 24 of 110

Thread Tools

	b666m	2010-02-12 , 22:17
	Posts: 1,090 \| Thanked: 476 times \| Joined on Jan 2010 @ Ingolstadt, Germany	#231

just for those who are interested in how i did this:
http://www.gamexe.net/css/fluid-css-speech-bubbles/

and my next thought is to combine that technique with the following one:
http://trentrichardson.com/examples/csstooltips/

not to do this as hover but to strech the bubble dynamicly with help of images and not just filling the background with color. ^^

Last edited by b666m; 2010-02-12 at 22:23.

Quote & Reply |

	Schturman	2010-02-12 , 22:25
	Posts: 5,339 \| Thanked: 4,133 times \| Joined on Jan 2010 @ Israel	#232

Originally Posted by b666m

didn't test this one.
name_tag is declined as a string.
so i thought replacing the variable with a string containing your name should do it.
but you should only replace the node_tags[i] with "yourname" in the block where your items are fetched.

Nu... I do it...
I write my name "Emil" but I get the screen without names

Code:

if (id == ("MessageSenderName" + type_name))
                name_tag = "Emil";

__________________
Lausanne & Lyon de descente...
----------------
Schturman's home page
Schturman's repo on openrepos
RPM packaging directly on your Jolla phone.
Root & User SSH access to Jolla via WinSCP.
Root and User SSH access to Jolla via Nautilus on Linux PC.

Quote & Reply |

	b666m	2010-02-12 , 22:28
	Posts: 1,090 \| Thanked: 476 times \| Joined on Jan 2010 @ Ingolstadt, Germany	#233

why do you use it for IM-conversation?
you can set your display-name (/nick) in your account settings?!

it's only meant for sms-conversation. ^^

btw: a 3d-bubble could easily be done with fixed width and flexible height as seen in the hover-example in my posting before.

if you want to have it also resized to width this one could get complicated. but it would be possible. coding just requires a lot of patience. *g*

Last edited by b666m; 2010-02-12 at 22:31.

Quote & Reply |

	Schturman	2010-02-12 , 22:39
	Posts: 5,339 \| Thanked: 4,133 times \| Joined on Jan 2010 @ Israel	#234

Originally Posted by b666m

why do you use it for IM-conversation?
you can set your display-name (/nick) in your account settings?!

it's only meant for sms-conversation. ^^

Aaaaaaaaa.... I thought I can do this in the IM too.... without changing my nickname or displayname in my account settings. I thought it is possible change the my name only for telephone IM conversation and not in all of my accounts (ICQ, MSN, Yahoo, Skape...)
It's possible ?

Last edited by Schturman; 2010-02-12 at 22:41.

Quote & Reply |

	b666m	2010-02-12 , 22:57
	Posts: 1,090 \| Thanked: 476 times \| Joined on Jan 2010 @ Ingolstadt, Germany	#235

try to change:

Code:

if (item.name_str != "" && name_tag) {
        name_tag.innerHTML = item.name_str;
    }

to:

Code:

if (item.name_str != "" && name_tag) {
        name_tag.innerHTML = item.name_str;
    }

if (item.name_str != "" && name_tag && item.self) {
        name_tag.innerHTML = "yourname";
    }

and please change the node_tag[i] back *G*

EDIT: have forgotten to paste over the second if-block, sorry. now that's my suggestion on how to do this. (haven't tested it ^^)

Last edited by b666m; 2010-02-12 at 23:03.

Quote & Reply |

	Schturman	2010-02-13 , 00:18
	Posts: 5,339 \| Thanked: 4,133 times \| Joined on Jan 2010 @ Israel	#236

Originally Posted by b666m

try to change:
Code:
if (item.name_str != "" && name_tag) {
        name_tag.innerHTML = item.name_str;
    }
to:
Code:
if (item.name_str != "" && name_tag) {
        name_tag.innerHTML = item.name_str;
    }

if (item.name_str != "" && name_tag && item.self) {
        name_tag.innerHTML = "yourname";
    }
and please change the node_tag[i] back *G*

EDIT: have forgotten to paste over the second if-block, sorry. now that's my suggestion on how to do this. (haven't tested it ^^)

Yeeeeeeee !

I did it, THANK you very very much !!!

Quote & Reply |

	b666m	2010-02-13 , 01:30
	Posts: 1,090 \| Thanked: 476 times \| Joined on Jan 2010 @ Ingolstadt, Germany	#237

tried to get the bubbles to work like in this html/css example:
http://trentrichardson.com/examples/csstooltips/

with one image of a bubble and one image of the mid-section.
the mid-section appeared but i had no top and bottom of the bubble. xD

i guess it would work but it maybe would be the best to rewrite the html and css file completely. ^^

easy to make is following: (as shown in a post somewhere back)
http://www.gamexe.net/css/fluid-css-speech-bubbles/
(the problem with the timestamp is surely solvable ^^)

Attached Images

Quote & Reply |

	b666m	2010-02-13 , 02:35
	Posts: 1,090 \| Thanked: 476 times \| Joined on Jan 2010 @ Ingolstadt, Germany	#238

don't know how the iphone is resizing the bubbles but they only have two PNGs for them - one for your and one for your contact's messages.
i attached the original image and the same only zoomed in 15 times.
so i guess they are using the kind of trick i described earlier today with dividing the bubble into 9 pieces and stacking them together.
that's possible because of the layout of the bubbles.
you have nice straight edges (just for a few pixels on opposite ends), no color-grades in the middle and therefore you are able to let them repeat right to / below each other without ruining the bubble-look.
maybe i'll try to make an iphone-them for the conversations *G*.

Attached Images

Last edited by b666m; 2010-02-13 at 02:40.

Quote & Reply |

	smegheadz	2010-02-13 , 03:07
	Posts: 387 \| Thanked: 566 times \| Joined on Dec 2009 @ Dublin	#239

sounds like having 1 pixel thick line with it set to repeat as background for a non fixed width/height container. i used to do that instead of making a large image, just have a small one repeat. saved time in loading the page and made sure the background displayed the same for window stretching/resizing.

__________________
Never argue with stupid people.They lower you to their level then beat you with experience.
Humility is something we should all taste.

Quote & Reply |

	b666m	2010-02-13 , 05:29
	Posts: 1,090 \| Thanked: 476 times \| Joined on Jan 2010 @ Ingolstadt, Germany	#240

Originally Posted by smegheadz

sounds like having 1 pixel thick line with it set to repeat as background for a non fixed width/height container. i used to do that instead of making a large image, just have a small one repeat. saved time in loading the page and made sure the background displayed the same for window stretching/resizing.

uff... then maybe you could help me out ^^
i've been trying for about 3 hours now and i only get the 4 corners shown properly.
everything in between seems to be messy and afterwards you wouldn't recognize my bubble as a bubble anymore. xD

maybe you could write some html- and css-code for this little purple bubble i posted above resizing correctly.

that's what i've got till now:
HTML:

Code:

<div class="TopLeft"><div class="TopRight"><div class="BottomLeft"><div class="BottomRight">
<span class="Message"> (here's everything: Name, Text, Timestamp) </span>
</div></div></div></div>

CSS:

Code:

.TopLeft { background: url(tl.png) top left no-repeat; }
.TopRight { background: url(tr.png) top right no-repeat; }
.BottomLeft { background: url(bl.png) bottom left no-repeat; }
.BottomRight { background: url(br.png) bottom right no-repeat; }

my attempt to cut out the correct areas from that little purple bubble png:

Code:

display: block; height: 20px; width: 15px; background: url(bubble.png); background-position: -24px -14px;

DIDN'T WORK.

ehm yes... i would appreciate your help for getting the filling between my 4 corners to work

Last edited by b666m; 2010-02-13 at 05:34.

Quote & Reply |

Page 24 of 110

Active Topics

The N900 is now 15 years old! (7)

Sailfish OS for the Motorola Moto G7 Power (XT1955-5) - (ocean) (4)