Sorry, if there's not enough detail in this initial post, my web-development skills are relatively limited, so I'm working with a web developer, if you need any extra information though, it shouldn't be a problem getting hold of it, and any assistance would be greatly appreciated.
Our site is using sections as opposed to pages, and the problem we're having is getting the content to centre vertically in each section. Obviously this has to be dynamic based on the user's resolution:
http://demo.ekarsh.com/crimsonnight/assets/js/KamiDrop_v1.8/index.html.
The site is built using a combination of HTML5 and Javascript.
Once again, any advice would be appreciated as the site's not really usable until this has been fixed! Thanks :)
Without any code it's hard to help but I would take a look at something like: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
You will probably have some other problems when the content is taller than the browser size but with some media queries, and possibly some JavaScript, this can be solves as well.
Good luck!
Related
Hi I'm trying to find a plug-in for flipping page, something like the Booklet but need to be responsive, if the screen are higher than wider it need to convert to single page layout, and need to work with touch, but I'm really not finding it! Maybe it doesn't exist. Is important to be free software.
If somebody knows something about, I'll really appreciate the help.
Turnjs seems to be a good option for this.
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.
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 :)
http://www.dennys.com
I'm wondering how the top navigation was programmed, From the source code I see javascript but I am hoping someone could recommend a resource / tutorial in learning how they built both the top navigation and the siding feature.
Many thanks.
You should investigate Path.js ( https://github.com/mtrpcic/pathjs ) as the url's suggest they are using it.
I doubt anyone has written a tutorial on how Denny's made a website.
But through some playing in the console, I found they use jQuery, which comes with many effects. To bring the navigation down, they probably use something like..
$('#navigation-button').mouseenter(function () {
$('#navigation').slideDown();
});
I have something similar set up here.
Don't use any of that code directly. It's just quickly written garbage. It'd need quite a bit of tweeking for production.
It's easy with javascript/jquery. Create a main div with fixed witdh where you put all your pages (menu, home, etc) and overflow:hidden. Then, with jquery's plugin Animate slide the position of the div's content.
Search for jquery controls. There are several available on the net free of charge which help you get this functionality.