I see in a few places that people are looking for the weather app effect. A lot of those questions are for android apps or JAVA, but I'm looking for the use on an HTML/CSS/Javascript site. Is this even possible?
I'm specifically looking for the finger/cursor scroll effect when you look at the hourly forecast.
Pointing me in ay direction would really help.
Even if I have to dig into another language like Ruby on Rails, that would be helpful to know.
Thanks.
Based on your comment, if you wish to implement a feature where the user can swipe left or right between images or areas then you should consider looking at a framework like Hammer.js http://hammerjs.github.io/ or Zingchart https://zingchart.github.io/zingtouch/.
These are Javascript library's that allow you to implement gesture functionality to a website.
Related
So, I'm trying to get started conceptualizing a project for a friend of mine and I've run into a sort of problem right away.
They're wanting to do a photography website, which isn't a big deal, but I'm not sure how to go about replicating the functionality they're seeking for their front page.
This link is an example they gave me. They're looking to have a sort of "tile" setup of images from a gallery/folder that cleanly line up along the edges of the page (if possible) and are also responsive, so when you reach certain breakpoints, the images obviously shift to have less in each row, but still keep the same clean look.
http://www.amishakpatel.com
I figure it's probably possible to do this with various client-side JS libraries, but I'm out of practice and didn't know where to turn.
Any suggestions would be fantastic, I get the feeling that this specific part of this project is going to be more complex that I originally thought, and I'm not SUPER experienced in the art of writing responsive layouts, but I wanted to give this a shot and get better at it.
My original plan was to develop this thing as a WP website/theme, but now I'm almost wondering if due to the nature of the project that I should maybe just use WP for the backend and content management, then do the front-end separately using front-end that I'm a bit more comfortable with (React) as it's looking like the whole project will be heavy in JS anyway to do the stuff they're wanting to eventually do.
Thanks in advance for any suggestions!
After reading the advice given by the few folks who commented, I did some digging with Mosaic/Masonry layouts, and found this:
https://www.imagely.com/wordpress-gallery-plugin/
I'm gonna give this a shot, which lets me stick with WP for a platform for ease of use, keeping the whole project simple.
Thanks a lot, folks! I figured there was PROBABLY a word for what I was looking for in terms of layout, but didn't know what to Google. :P
I have basic knowledge in html,css and good knowledge in JS. But I have problems with putting all this together. I mostly develop for Android, I mean native apps. I have good understanding of Android layout. Concept of dynamic layout is great in android, when I develop apps I try to use relative positions and dynamic sizes whenever it is possible, like match_parent,wrap_content. They are really powerful, apps looks great on any screen. Also there is such measure in android called dp density independent pixels. This is also great concept.
So I want to dive into web page development, but I don't know common patterns, techniques for building responsive and flexible pages.
I know a little bit about #media and viewport directives for CSS but I again I cannot put together all my knowledge to start building responsive web pages.
For instance is it better to use percantage instead of px, as I can see mostly px are used , I cannot understand this concept why not to use percantage everywhere to make page responsive ?
Maybe I am missing something important in web page development, so why I am asking about advice.
Please suggest maybe some good articles about current best practices for building responsive web pages(based on most popular engines Wordpress,Drupal,Joomla) or from the scratch for better understanding.
Also one important question is how to build web page mobile friendly and so on.
Thank you so much
If you are wanting to get going quickly with responsive web design, consider starting with one of the many established frameworks like Bootstrap or Foundation or Skeleton. There are plenty of others as well.
They will save you heaps of time at the start, and you'll get good cross-browser results. Pick one you like, jump in and then learn more as you go!
Good luck!
To design a responsive web page there are two option :
1) design to website one for computers and another one for mobile like facebook
2) same design
there are many techniques to responsive design :
1) you can use percentage for all your content but you must use many calculations to it
2) you can use grid system from bootstrap
3) you can use media and smallest your content and test it by your browser like firefox for responsive design view
4) you can mix between percentage and media .
in this techniques you must to know postion and display and how its works
main divs must be in percentage like body or main wrapper width 100% and inside divs must depends on thier width
I want to make a javascript/jQuery/HTML based image viewer which is sort of a cross between a book page flip and an iTunes coverflow interface without the left side of either, which would work on mobile device browsers.
I've been looking for tutorials which I can use as a starting point, but I haven't been able to find anything yet. Can anybody offer some advice on how to get started on this project? I would like to be able to come up with a rough mock up pretty quickly so it would be helpful to be able to re-use code from a tutorial or existing open-source project.
What about pagePiling.js plugin?
It creates a stack of pages and on it you can add images if you want, just like in this example.
And of course, you can use it horizontally if you prefer.
The best example site I can give about this effect which I'm struggling to articulate is Facebook. When you click a photo, you get a div that floats on the top of everything enlargening the photo and giving extra info. It's kind of similar to something you'd find in a conventional app - like a sub view kind of thing.
http://img.photobucket.com/albums/v282/Ace_of_Spades01/fb_zps2047caf8.png
Is there a framework or other pre-built solution out there or will I have to roll my own.
Shadowbox let's you do this. It can display HTML and is easy to implement.
http://www.shadowbox-js.com/usage.html
The feature you describe is known as a lightbox.
If you use jQuery, you can use something like fancybox - http://fancyapps.com/fancybox/
If not, there are many alternatives if you Google 'lightbox'.
Any thoughts on creating a fluid/flowing ribbon for a website effect?
I'm open to any ideas. Ideally I could do this simply with html and some js library, but I'm open to suggestions for doing this with flash also. Any links to tutorials or examples would be greatly appreciated as well.
Thoughts?
Processing.js is a popular JavaScript animation library which is a port of the Processing visualization language. There are some pretty impressive demos on the site, including this one of a snake which follows your mouse. I could imagine taking that and modifying it to be a twirling ribbon. Also, check out HasCanvas for 350+ more demos - I'm betting that someone has made something similar to what you're looking for - here is kind of a neat ribbon-y effect I saw on the first page.