I am trying to create iPhone style folders in HTML using CSS with very little JavaScript if possible. You can find the screenshot here. http://getandroidstuff.com/simi-folder-android-widget-download-iphone-style-folder/ Screenshot on that page shows 4 folders, System, Apps, Toolbox, and Dev. Clicking on Apps shows a slide out menu with apps. Is the same achievable with many folders? For example, say I have 10 divs floated left so that 4 fit in a row, giving me total of 3 rows. If a user clicks on the 2nd div, another div slides out pushes the 2nd and 3rd row down, creating a total of 4 rows?
Here is some code, I was playing with: http://jsfiddle.net/uAtak/.
Yes, it is doable. Unlike the example you referred, I would toggle between display :none and :block with animation when user clicks an icon. It will automatically push the other icons.
You mean like this?
http://jsfiddle.net/uAtak/5/
Only clicking on div 'One' works for this example, but as you can see it's pretty easy to extend.
Related
Here is what I am talking about:
When you visit https://soundcloud.com/ , when you look at the homepage you see the whole "Connect on Soundcloud" thing.
The texts and buttons on the screen in that confined space scrolls by itself in a given amount of time. It also has those two small white circle buttons that tell you which item it is on(the first white circle gets filled in while the other one is hollowed out with a border when the user is looking at "Connect on SoundCloud" and the other way around when it is on "Discover more with SoundCloud GO+").
How is this made?
Thank you!
You should take a look at Carousels on w3schools, they cover this pretty well.
Bootstrap brings functions and html attributes for building components that slide though elements. Elements not currently visible are pushed off the view with CSS and visible ones can slide into view.
That is called carousel, and it is part of many frameworks/libraries like Bootstap. Some frameworks/libraries call it gallery.
I acquired the theme infusion from the internet. You can see examples of it here http://www.html5xcss3.com/2014/06/infusion-responsive-html5-theme.html
or a live preview here http://peterfinlan.com/infusion/
.. I am having problems making the paginator class move. Obviously when one of those elements is clicked it is supposed to move and show the rest of the team.
I realize the code on that theme just displays the 3 pages using that class and that no actual motion is available.
I want to know what needs to be done for that area to move in either direction when one of those elements are clicked.
Thanks!
You're looking for a slider or carousel in javascript or css - some options are here:
http://kenwheeler.github.io/slick/
http://owlgraphic.com/owlcarousel/
http://flexslider.woothemes.com/basic-carousel.html
I am trying to create a responsive navigation menu. I found some tutorials online and after finding one that I liked the style of, I followed the directions to create it on my website, but I can't seem to get a couple features working.
1: I can't get the hover effect to work that adds a bottom border to the icons/links to help accent the one that is in focus.
2: When getting down to a screen size that is below 32.5em (519px), the menu is supposed to become a single column menu that folds up. The menu does become a single column, but it doesn't fold up into a button like it is supposed to. It keeps displaying all of the links which takes up a lot of vertical space.
Here is a jsFiddle of my project so you can see what I have so far:
https://jsfiddle.net/4Ljs1bfn/1/
You need to use the js detection that the example uses.
Add class="no-js" to your body element.
Then on load, set document.body.className = "js" (or equivalent).
This will enable the menu.
For the :hover problem, you need the class="no-touch" on your body element (then remove it using js if a touchscreen is detected).
Another thing: You have a html error at <a href="...""> on line ~8 (that extra " at the end).
Updated fiddle: https://jsfiddle.net/4Ljs1bfn/2/. You still have some css issues, but I assume you can fix them yourself.
I'm working with fullPage.js, an amazing scrolling framework.
I need to have the site working like this:
As you can see in the .jpg when the site loads and people click or scroll to the right using the slideshow, there are 4 slides there, when they catch the last one users can only go down. No other behavior is allow.
Now I have this working just for the horizontal line, in the following way:
People can not go back because there is no previous button.
When people get to the last horizontal slide the next button navigation disappear.
Now I need to create another section down and I need that one just works on the last slide numbered as 4 in the jpg. Not allow to pass there in the slide 1, 2 or 3.
Any ideas? How can I do that?
You could disallow the vertical scrolling until the user reach the last slide.
You could use the functions setAllowScrolling and setKeyboardScrolling provided by the plugin together with a callback such as 'afterSlideLoad'.
Thank you so much for reply. I found a solution changing the framework and working with Parallaxjs.
http://stolksdorf.github.io/Parallaxjs/
Very versatile for this purpose. !
as you may have guessed from my post title I have no idea how to work with jQuery or javascript in general. I know that this isn't too hard of a function to put together but I can't seem to do it on my own.
Pretty much what I'm trying to do (in theory) is there are four large boxes that cover the available content area that link to (literal) menu items like breakfast, lunch, sides, and drinks hidden inside a div that when one of them is clicked the full menu expands down and scrolls gracefully down to the one they clicked on after which they can browse all the sections together as they please.
I have no idea how to do it and every time I try it breaks the page. Hopefully somebody with more than five minutes experence can help. I have no problem at all with CSS and HTML but scripting is just pitiful.
So for scrolling you can do something like this.
I don't quite understand how the full menu portion is supposed to work but you could hide it initially and then show it when the menu item link is clicked.