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.
Related
I'm kinda stuck. I have to create a portfolio and I have to mostly use html5 and css3, with a bit of js, jquery and stuff if I really want to. I'm not very good at web development but I still wanted to experiment and do a professional and nice site. The thing is, implementing a simple scroll effect on your whole website seems to force you to write the html code on one single index. Does anyone know if this is really the case? Are there other solutions?
Thanks in advance. I know that it is not the smartest question but I'm really not good at it, so sorry in advance. Bye!
(I didn't really try anything yet except from the classic class "scroll-container", which is my main problem : I still want to have several html pages to separate things so that it is clear in my mind. Putting everything on a single webpage will definitely lose me)
use an external library or plugin, such as fullPage.js or Scrollify, which can enable a scroll effect across multiple pages.
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.
I am working in my senior project which is a web-based system and I want to dedicate one page of the website for some useful links that are related to my website. I tried to present them in such an innovative way like showing a brief description (in a balloon or a new line or anything) about the link when the mouse comes over it.
I heard there are some JQuery templates for that. I tried to search about them but I did not get anything.
So could you please help me in this issue?
Please provide me with any guide that is helpful to do this issue.
Also, please provide me with your suggestions for presenting the useful links in somehow a nice way.
What you're talking about is a tooltip. I like the tooltip component from jQuery Tools quite a lot, and the documentation is excellent.
There's no need to use JQuery!
What you want can be achieved using only CSS.
Utilizing the :hover selector, its possible to display a box over your link when you move your mouse over it.
Here's a good link to get started.
How about something like Simpletip: http://craigsworks.com/projects/simpletip/, or it's successor qTip: http://craigsworks.com/projects/qtip2/ (hat tip #Edmund Y).
If you look at this Xmarks page, it pretty much lists all of the most popular JQuery tooltip plugins: http://www.xmarks.com/topic/jquery_tooltip, sorted by the number of people that have bookmarked them!
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 :-)