I work on an application similar to Google event calendar.
Name of the application is My Team Event Calendar .
Developed this using jQuery Full calendar plugin.
In a calendar ,for each day ,i would display which teammember of mine is outofoffice(is an employee workfromhome/sick/vacation).
For each of this outofoffice status,i have an icon,displaying the purpose of it.
I have 72 around outofoffice statuses ,which would get icons source from database\
I have all 72 stauts with their associate image icon source in db as "images/pill.png"
Every time ,i get the information from server about a team .for each day i would get team member name,out of office status and image associated with the status.
Consider if my calendar is full for whole 31 days ,and for each day i would have about 10 employees. For each of this out of office status ,i would get a image (this means many http requests for image icons for out of office status).
Can you please suggest is it good to maintain css image sprite.But i have a disadvantage at any point of time a new leave type can be added with new image icon ,which imposes an immediate change in the image sprite.(maintaining/modifying an image sprite is not that easy)
If not image sprite can you please suggest what would be a better solution here
If I'm understanding your scenario correctly this would be an excellent place to use a sprite. A large set of small images is an ideal use case and using a single sprit will reduce HTTP traffic significantly. Sprites may seem like a little overhead initially but it's not bad once you get used to it and the performance is well worth the few extra minutes to compose the sprite.
Keep a PSD (or some other original source) for the sprite handy. When you need to make edits, add a new icon, etc. then update the PSD and export your new sprite PNG.
Another option to consider is icon fonts. You might look at something like Font Awesome, Bootstrap's Glyphicons or a tool like IcoMoon. Icon fonts have a lot of advantages, chiefly scalability and colorization. If you don't need that, though, sprites work just fine.
Related
I have a personal website and I want to spice it up a bit while also learning some front-end.
An idea I had was that the cursor of my website would be a coffee instead of the default one, and anytime I click on any content, the coffee pours.
Any idea if this is possible and if so, what I need to do to implement it?
You can change the cursor using CSS - see https://www.w3schools.com/cssref/pr_class_cursor.asp and do something like
div {
cursor:url(myCoffeeJug.cur),auto;
}
You could then use Javascript to change the cursor shape (ie URL) when the user clicks in the div. You'd need to think how to change it back again after whatever operation the click triggers is complete.
Note that you can't do animations this way - but given that clicking on a div is likely to be quite a quick action, just switching to and back from a different icon might well be enough for what you want.
However this is perhaps not a great idea from the usability point of view. Web users are used to the basic types of cursor provided by browsers - overriding them may be cute, but it can also be confusing.
If your site is designed for 'ordinary' users looking for information or functionality (rather than for web designers, or as a showcase for your techniques), you're putting a small barrier in their way. Users who are not confident, or are new to all this, or non-neurotypical users may find it off-putting.
I'm working in a project of building a responsive website. The painful thing we're having is to deal with the content of the image in different display modes. Please be noted: the image content.
The thing is: in almost pages at PC view, the images are displayed in landscape, with great ratio between width and height. Now when bringing them to mobile view, we have to display it in a different frame. And as you might imagine, now the content of the image was scaled and cropped and then exported to some very weird images on mobile view. Like a wide picture with people are almost in left side, but after being cropped there are only non-sense objects in the picture left.
IMHO, via technical solutions we are only processing the technical attributes of the image (resizing, scaling), we are unable to deal with the image content, that's really a human matter, right?
I'm thinking about 4 solutions:
1 - Despite the customer feelings, we just scale the picture (keep
all content, just resizing it). The output sometimes will be very
ridiculous I guess because of resizing a landscape picture to a
portrait or square one. But that's mostly the easiest way to come up.
2 - Considering to image frame size on mobile view, and auto crop the
picture by picking the center area of the picture. As I said above,
it produced the non-sense picture after all.
3 - Informing customer, whenever they upload a picture, they have to upload 2 copies of it, 1 for desktop view and 1 for mobile view, and they're definitely responsible for the content displaying at front side. Tons of effort need to be spent by customers, but easier for development.
4 - Advanced feature: user can upload only 1 picture, we provide the
different view-ports and a cropper for them to decide how the image
displays on those after being cropped.
I don't have much experience in dealing with these stuff, and not sure how the world out there handling this case. As I see for now Wordpress is only requiring users to upload only 1 picture and it will automatically scale it (my 1st option). Does anyone have experience on this? Can you please share me your solutions and also your thoughts about my above solutions? Thank you.
you can build a simple web application for them to upload the picture and provide your client with a preview of how the pictures with look like for both desktop and mobile. in php, there is the GD library and it is quite easy to use for cropping and resizing.
Apply the 4th and the 1st option so you don't have to deal with it,
Crop and scale with the options you have AND let the customer decide if they want to change it and choose how the image is been displayed.
in case they ask you can say they have the option to fix it, in case they don't want to you already handle the best technological option.
I wonder what the best trade-off for combining images for CSS sprites is.
Say I have 50 images, but each page only needs 5. The total size of a sprite image is 100kb.
There obviously are a dozen of parameters, how many pages are visited in each visit, the connection speeds of the users, the lag. I'm not looking for a mathematical formula to compute the best trade-off, since I cannot estimate these parameters precisely enough.
So, do you have any experience values on when to combine images to a sprite and when not. (Actually, the "not" is more interesting IMHO).
Do you put all images on a sprite that "could" be needed for a single page, but anything that will only be needed by a second page on a separate sprite?
In my opinion, only group images together in a sprite if they are relevant.
If you have a menu based off of images, I'd make one image with all of the different elements in the menu. If you have a list with icons that appear on hover, make a spritesheet with all of those icons. It does you no good performance-wise to create one huge image when that same image can be combined into three or four smaller images.
It also helps to have only related images together - it keeps your CSS references to the files easier to follow and you have less complex x/y coordinate references.
here is my two cents... I usually try to sprite images for a given path that i am expecting to be hit harder then others. For example; if my sites so i call the critical path is: user logs on, goes to the home page, checks out today's deals, purchase one and logs out, i would like most of the common images sprited (logically grouped if needed) on this path. Having the sprites here will eliminate a lot of extra requests.
If you go google.com you will see a sprite (nav_logo99.png) that has most of the common images you will need on the very likely next page(s).
Also to answer your "when not to sprite", background repeat and CSS sprites does not blend well so i will stay away from those.
The thing I take into account is how many pages my user will visit. You have to remember that you sprite will normally be cached so only ever loaded once.
If your site user runs around a few pages then its fine having a larger file but you are correct if most off your users only visit your home page then your not going to want to load all your sites images in one sprite.
Its best to just go on your own feel off what is best to optimize into sprites
Is it possible to edit images using a javascript library and then send the edited image to the server for saving.
Edits will be in real time, means the user can see the edit result in the same time he is editing without the need to refresh the page.
I want a javascript library to do some edits on an image on a webpage 'such as crop, resize, rotate,...' and send send the edited result to the server.
How this can be done or if there any smart work around to something like this.
The libraries mentioned don't seem to be fully cross browser. As far as I know there is no fully cross browser compliant way to edit pixel data on the client.
The current best approach would be to do these manipulations on the server. You can still do this real time using a web service.
As an example see the image editor in TinyMCE which supports crop, rotate, resize, flip, all from the client without a page refresh.
Pixastic is an image manipulation library; once you've modified the image, some sort of post back / upload call from the script will be able to upload the image provided you've implemented the needed functionality to do so.
An incomplete list to be sure, but these are two that come to mind which allow you do a wide variety of editing on the client side and push back to the server.
PIxastic
AIE
And there are numerous less complete image editing tools for simply cropping or adjusting contrast as well.
jcrop is what you are looking for .
This is my first question on Stack Overflow. I heard this site was a great resource for website developers. I'm new and still learning so this should be easy.
I am making a photo gallery that has a few small thumbnail images and a large image in the middle, all on the same page. I want to make it so that when you click on each thumbnail the large image in the middle of the page changes.
Is there a way to do this with pure CSS and no javascript? Is it also possible to preload all the large images so that each time you click a thumbnail the large image in the middle just pops right up?
Thank you in advance for any help! I look forward to participating here often!
Is there a way to do this with pure CSS and no javascript?
It is possible, but not well supported in browsers.
You could link to the images and use :target to change the display property from none to block.
The problem with this is that if the browser supports display (i.e. almost all of them) but not :target (i.e. lots of them) then some images will simply be unavailable.
Is it also possible to preload all the large images so that each time you click a thumbnail the large image in the middle just pops right up?
This would achieve that.
However, preloading the large versions of all the images would be quite a painful load on users' bandwidth.
Individual pages which use some form of include or server side process to duplicate the navigation are still the way to go.
I don't think there's a good way to do this with no Javascript.
With minimal Javascript, you could have all of the large images hidden, and use onClick on the thumbnails to un-hide the appropriate image.
With more Javascript, you could keep changing the src attribute of the large image and preload images using Javascript as well (see http://www.pageresource.com/jscript/jpreload.htm).
A google search brought back some methods using pure CSS but I would suggest using a jquery plug-in like galleria. JQuery Plugins make this easy.