Im Currently working on a custom calendar, and i very much like the way that google calendar resizes in order to better fit the current screen size, Ive looked through out google but just cant seem to find how they do it. Do they resize the entire page or just the table divs? and is there a way to achieve this with pure css? Im under the impression that you can calculate the resolution with javascript and/or jquery and redo the css from that, but if its possible with good old css, all the better. this isnt one of those. GIIME TE CODES posts. But a good explanation of the mechanics behind this functionality would benefit a lot more than just me im sure, kudos :)
To me, pure CSS is the easiest way to achieve this. You should look into Media Queries and fluid page layouts. These are used in responsive web design to change the layout of the page based on the size of the browser window.
As far as I can see the google calendar simply changes the width of each column of the calendar, so it shouldn't be too difficult at all.
You could use media queries along with a fluid layout to achieve this in my opinion, possibly even a better outcome than google have achieved, as when you have a very small window size the google calendar doesn't work too well!
Hope this proves helpful :)
Related
Issue: I have problems with this page: http://kivusandcamera.com/blog/ The page loads with a proper layout, but then the two blog entries "jump" to the left behind the navigation bar. I have spent a good bit of time trying work through the various CSS, inspecting it with developer tools, etc..., but I have reached a point where I feel like I need some help. Any advice would be appreciated.
Background: This is just a basic Wordpress theme that I am trying to customize for a website, so I am not 100% sure how
Additional Information: Though I am passingly familiar with CSS, I have done hardly any work involving responsive design, media queries, etc... Basically, I am saying (1) I would not be surprised if it is something really simple that I am missing, and (2) if something could be done a better way, please feel free to let me know.
UPDATE - It looks like this issue might be Javascript or JQuery related. Basically, a style attribute is getting injected into one of the div tags. The style attribute used an absolute position, with a certain width, and I have no idea how to modify it.
UPDATE #2 - It appears the issue happens with any pages I set in the theme to "Full Width" (see also the http://kivusandcamera.com/about page.) I think those pages must get processed differently by JS layout framework that is used. Again, I still haven't figured out how that is all happening.
Turns out there were two separate issues:
(1) The JQuery auto-layout framework was resizing the various page columns with the assumption that the navigation bar was the same size as the individual columns of blog entries. That caused an issue that had to be solved.
(2) The full page CSS had to be updated to reflect the lack of a resizing navigation bar.
Ultimately, these issues were very specific to the this particular Wordpress theme, so I doubt full description of the solution would provide much of a benefit to the community. Thank you to everyone who helped lead me to the solution.
This is my first time asking questions here and I have just started learning jQuery mobile so if it is not quite relevant or if it is just really obvious I apologize in advance.
What I am trying to do is build a mobile site for an online catalog for lots of books.
The original website has a very sophisticated way of filtering and sorting the search results based on the user's input and preference so unless it's absolutely necessary, I would really like to keep the original functionality of the website.
I was thinking maybe I can create a "mask" that looks like a mobile site to cover the real content; and whatever the user requests, I will go "underneath" the mask, do the search and when the data is loaded in the original website, I will then present them in a more mobile-friendly way.
So here is my question:
Is it possible to somehow include/embed a mobile site in the original html?
If so, could you please give me a few hints (books, articles, tutorials, anything) as to how I can approach this?
If not, could you please tell me how I should make the mobile site without having to re-create all the nice functionality that original website already has?
Thank you so much! :)
You could do this but you shouldn't. Mobile websites are optimized for mobile users. Not only as layout but also in loading weight. The direction you are heading you end up with a regular side (probably big in load) and add an overlay (extra load) to rebuild the layout (CPU heavy). So it's not the right way. A better solution is to create a optimized layout for mobile users only.
I have some separately made HTML pages that id like to slide horizontally between.
Ive looked everywhere but I havent found exactly what Im looking for. Can anyone help?
I'm not sure if there is a plugin written for a fully general solution for completely different pages. It would need some kind of an AJAX load, and a nice transition with possible history manipulation.
I don't know how well it suits your needs, but the old Google HTML5 slide template had this functionality.
There are limitations on what you can do with it, but they provide convenient keyboard and mouse navigation.
i'm curious about an effect i've seen on a lot of different wordpress powered sites. i think it might be a plugin, but i'm not entirely sure.
it's basically a page of images of different sizes, and they fit together based on how wide your window is. they also rearrange very stylishly when you resize your window.
the images also load as you scroll down, in sort of an infitie scroll way.
here is a perfect example of what i'm talking about... http://www.someoddpilot.com/work/projects/
how are they doing that? i would like to achieve a similiar effect, but i'm not sure where to begin. any insight would be super helpful, i'm somewhat new at this. thanks!
There are several techniques... I didn't look to see what they are using specifically, but since you mention jQuery, there is a plugin you should check out: Isotope
I want to make small image browser like the one used on Myfonts.com (link) in the sidebar under "More fonts like this".
I'm wondering if there is a jQuery plugin that could do that.
I know that this is some kind of carousel, but I couldn't find any with this cool resize function on scroll.
I would suggest you take the jCarousel plugin, as it has a very good base, and modify it to your liking. You could combine it with the jquery ui slider to somehow achieve the same effect as on Myfonts.com.
I did come across something similar although not exactly the same. It might help you figure out how the resizing effect is accomplished. See http://www.eogallery.com/ and http://jquery-ui.googlecode.com/svn/branches/labs/carousel/demo/index.html
As of today I couldn't find any out-of-the-box plugin that does what you are trying to do, but maybe if you build this, you'll post it to the jquery gallery and everyone will live happily ever after :-)