Does anyone know how to add the score to the star, something like this:
I thought about making the numbers in Photoshop, but then how it's going to scale on different size screens?
Also thought about setup JS to calculate width. However it seems for me as a complex one.
If anyone know a quick workaround / hack / or may be out of box solution. That would be perfect.
Well I just created an image and put it underneath the Raty...
Not the best approach, but it did work
You can create a placeholder for each star.
Use the same with for start and it place holder.
Related
Example
Video Example
The lack of selection styling in paperjs makes you improvise and one way to style them, is to create them yourself ( recommended on this post).
But the huge con with this is the performance! Where canvas quickly goes from usable 60fps to terrible 20 within seconds. Now the only method I thought would work to style your handles/points, is now useless.
Now I'm out of ideas as to how style them and I'm trying to seek the help of stackoverflow... The main thing that I want to achieve is the hover effect on handles/points . At this point I coded the most of the stuff in paperjs, and I really wouldn't want to switch everything to something else like PixiJs.
P.S Any help is appreciated!
In your video, the frame rate goes down because you draw a lot of paths and this would also happen at some point even with the native Paper.js selection.
So your only chance is to try to have as few as possible shapes in your scene.
Maybe you can take advantage of the less known features of Paper.js to reduce them a bit:
item.selectedColor
paper.settings.handleSize
Then, there is also the possibility of using SymbolItem for repeted shapes (like your circles) that should have better performances than regular paths.
Finally, if you're out of solutions, you could also fork the library and hook into the selection drawing code to adapt to your needs :).
Excuse me for this, probably spoony, question. But when skinning controls/elements I'm usually using the following concept (I don't know the correct name, but I first saw it when creating custom WinXP themes). The basic idea is to set up a sort of margins in the image that restrict resizing, only the inner parts are allowed to stretch.
http://img42.imageshack.us/img42/6188/image7rq.jpg
When using this method in my regular programming work life is easy, I just BitBlt the four corner and then StretchBlt the remaining parts into place. However I'm no expert on HTML and I cannot find anything on the internet about it. It's kinda difficult to search when you don't exactly know the name of the concept...
a) How is this method called?
b) Does anyone know how to do this using HTML, CSS, Javascript, etc.? Preferably I would like the background of a DIV element to be themed like this. It's the intention to not spend the rest of this day slicing images in Photoshop ok, that makes me feel so utterly miserable..
There's several ways to approach this. If you are allowed to target newer browsers and allow old browsers to degrade to square corners and non-gradient backgrounds, check out the new CSS 3 features.
If, however, you need to be able to support old browsers, you're going to have to fire up Photoshop, create some background images, and nest some html elements. If your background only has to scale in one direction (verically or horizontally) check out the sliding door technique.
Wouldn't be easier to use css instead? Check thishttp://jonraasch.com/blog/css-rounded-corners-in-all-browsers or do a search for 'css rounded box' or 'css rounded corners'
I was wondering if there is a way to change an image color scale in JavaScript? Say you want to make it warmer or cooler depending upon the user's input. If there is a way in jquery or html5 that would be fine as well. Anyone know how to accomplish something like this?
HTML 5 has lot more features than what you just looking for. Anyhow the CANVAS container is the solution that i could say, where you can play with the color, pixels of image. . Have a look at this this. Hope this can help you to start
Maybe not in jquery itself but there is very cool js library for manipulating images called pixastic.
http://www.pixastic.com/
Try to search documentation for option you need exactly.
My guess is you want to change the saturation. I tried Pixastic but it's broken in my browsers, Chrome, Opera and IE7.
Caman JS looks like it delivers, at least judging from the demo page
http://camanjs.com/examples
I've already achieved this on my iPhone app, but I want to know if it's possible on an HTML page, maybe using CSS effects or similar.
As you can see, the current view is split, the bottom part is moved down, and another view is revealed underneath. I have a page I'd like to try this on. Any ideas if this is possible, and any specifics as to how I can do it? I'm quite new to HTML coding, so please take it easy on me. :)
Thanks in advance!
Here's an example to get you started http://jsfiddle.net/Cquhj/
A few things to take away from this pattern:
The middle div has an overflow: hidden; property and height: 0px.
The trigger icon has an event that tweens the height of the middle div to the size you want.
Edit:
I really like the resources and answers given and I would add this to the list http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Accordion_Menu
here an update, more iphone-like
http://jsfiddle.net/mFeyn/1/
it miss the triangle in the bottom of the folder once is clicked and calculate the height of the container when there is more than 4 icons.
Yes, it's absolutely possible, nothing out of the ordinary and CSS will definitely be needed.
As it is, your question is extremely generic and an answer would be: learn about HTML and CSS and the combination of the two for creating standard compliant web page layouts. You might want to read about the box model too. To solve your problem you need to know about the use, positioning and floating of a series of <div>s to achieve the desired layout.
If you want to add animation, like some part of the split view floating down into position, you will need Javascript as well.
Possible starting points for your research on SO:
Why not use tables for layout in HTML?
https://stackoverflow.com/search?q=css+div+column
Here is a code example that might give you a little bit more if your plan is to emulate iOS 4 folder behaviour using jQuery.
The view is basically split into rows and I played around w/ the background position css attribute to allow the background split illusion.
http://jsfiddle.net/hKHWL/
This is very possible, but it's kind of like asking "I want to program Civilization, and I'm quite new to C; how do I do it?" ;-)
I would strongly recommend picking up a good "DHTML" (Dynamic HTML) book. For instance, I rather enjoyed this one, from SitePoint: http://www.sitepoint.com/books/dhtml1/
If you're not the book-buying type, sites like SitePoint and AListApart can certainly explain things too, but not in as organized of a format.
Good luck.
I know this is an old post/question...
but I'm doing this with dynamic heights and positions here:
http://webkit-os.pixelass.com/iframe/
(only works in Chrome and Safari)
I am using jQuery and two divs with the same image.
Dynamic positions means.. you can move the folder to a different position or page.
Dynamic height means... the height is relative to the number of Icon-rows in the folder.
The folder even opens above and below if the content is too hight to be displayed below.
(opening the folder from the Dock does not work yet)
On the iPad gallery at http://movies.apple.com/ipad/gallery/ there is a nifty 3D-ish view when you click on the "360°"-Button on the lower right. It seems to be built with Prototype, some custom JS and 180 single JPEGs.
Now, I don't want to steal Apple's code, but I really would like to have a similar effect. I'm afraid recreating the effect all by myself would be too much for me, so
has anybody ever done something like this and released it as open source (or a paid library or something like this)? Integration with jQuery would be an added bonus.
How about this:
Reel is a jQuery plugin which takes an
image tag and makes it a live
"projection" of pre-built animation
frames sequence. Its aim is to provide
a 360° view of something or someplace.
Great alternative to widely used Flash
techniques.
Maybe what heporap is trying to say is: construct the 3D VR effect in the same way you might make a slider animation.
I guess a slider changes the position of an image in relation to where a mouse cursor is positioned so...
Perhaps try changing the IMG tag's SRC attribute on document.onmousemove and object.onmousedown for drag/positioning effect?
Maybe that sounds obvious, and I'm no maverick coder but it's a start...
I know its an old thread, but its still high on google result.
Here is a jQuery plugin that does exactly that effect http://giniedp.github.com/spritespin/
you better try out threesixty: http://www.mathieusavard.info/threesixty/
You may make it like a slider to change image's src.
http://movies.apple.com/media/us/ipad/2010/spins/apple-ipad-us-20100127_512x512/ipad-1up-us-20100127_512x512_172.jpg
http://movies.apple.com/media/us/ipad/2010/spins/apple-ipad-us-20100127_512x512/ipad-1up-us-20100127_512x512_135.jpg
Try this one with zoom: http://www.ajax-zoom.com/examples/example15.php
Or use this one. It's also Javascript but with curves for slowing down and another kinds of zoom functions.