I've been searching around for something like this just using CSS, but I can't seem to find what I'm looking for.
I'm making something very similar to a photo gallery, and what I'd like it a panel with a few icons in it. But say I had ten icons in a panel that only fit five - in which case I'd like to have arrows pointing right and left that let you scroll to the next five.
I know I can probably use the overflow:scroll option if I just wanted a nifty scrollbar, but what I'd really like is something where I press the right arrow, and the icons shift across.
If anyone could point out any tutorials, or know what I'm talking about, please let me know :)
Thanks!
Just search around for a jQuery slider plugin, fill this one with the content you want and modify the styling for your needs. Some good options:
http://tympanus.net/Tutorials/ResponsiveImageGallery/
http://tympanus.net/Tutorials/SliderGallery/
You can also try HTML5/CSS3 like this:
http://codepen.io/Merri/details/eEBKp
With some modifications you'll be able to integrate it in your design/needs :)
Related
I'm building a website for a client and I was just wondering if there is any solution that will allow me to create an image slider with what is probably best described as a tab containing a label along the sort side. These tabs need to remain visible whilst the main slide isn't.
Here is a mock up of what I would like it to look at it. You'll have to excuse my poor Paint.NET skills.
Slide label 1 would be associated with the current slide, and then when the slides transition 'Slide label 1' might go to where 'Slide label 3' is now etc. Hopefully that makes sense but please let me know if you have any questions.
I would be grateful for any solutions anybody can offer.
Maybe this is what your are looking for:
http://bqworks.com/accordion-slider/
I have a question regarding a simple tumblr theme I'm trying to make.
I've never really done a theme before and can't find specific information on what I'm trying to do.
I need to get the sidebar links to be links that you can hover over, and also be able to space the "About" from the main text without having to put white text beneath.
I also need to space the bottom of the posts with the bottom of the page more, because as you can see there's space at the top but not the bottom...
The last thing is that I need to get infinite scroll on my page so there's no need to change pages.
How do I get the sidebar and every post to be slightly bordered, the same color as the lines on the background?
I know that these are very simple questions, but I'm new to this and confused. Thanks so much!
The website name is jake-bellissimo.tumblr.com
And the code is:
http://pastebin.com/FeHSKSdu
Thanks so much!
I confess I've never made a tumblr theme, but it looks like it's some basic CSS that you need.
:hover pseudo selector and padding (box model)
Again, look at padding/margin (box model)
Infinite scroll implementation will require some custom javascript and server side code. Not sure if tumblr supports this.
Borders are also achieved with the css border property border
You'll probably need to read up on CSS before you try making a theme for tumblr. Again, I'd recommend the articles on Mozilla developer network
I'm doing the Free Code Camp thing and the first Zipline challenge is to replicate the following webpage on Code Pen. What I'm looking for is a hint or two in the right direction so I can get the pictures to scroll like they do on the webpage. I don't want the answer(s), just a hint or hints in the right direction so that I can do my own work. I think I'm suppose to use CSS, and if that's the case I have no idea which property/properties to use, maybe one of the background properties?
And the hint I was looking for is 'css parallax scrolling'. Thanks for all the help.
i'm sure you can help me.
For example: on this site - when you click on "team" - you can hover over an image and the name is shown on the top. (ja, it's flash, i know ;) )
So, i want to do this in a post-thumbnail-grid in wordpress.
pseudo-code: hover over post-thumbnail(ID) in div1-> show title of post in div2
I don't need a exactly described walk-through.
Just a few keywords, ideas etc.
Thank you
Im guessing even though the example is in flash, you arent wanting a "how to" in flash. What you are looking for is probably jquery, if you are looking for what you should be googling, try a jquery hover tutorial or jquery onClick().
try something like this http://bavotasan.com/2009/a-simple-mouseover-hover-effect-with-jquery/ and adapt the hover results to match your criteria.
any one can help in this?, i want to make a scroll bar to scroll the li underneath a div. in which i made a ui, scroller, but client want the front and back arrow to adjust the slides. like regular scroll bar like browser.
please visit ; http://ikeafamilylive.com/stories/60
and you will witness what i request. And please don't recommend me a plug-in, because i need to use this scroll bar across the site with several customization process.
please give me the sample code / suggestion to make a scroll bar using jquery+css. with full functionality.
If you want to use jquery and css the best way to go is going with a plugin like JScrollPane:
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
If you want to have several customization and looks you can easily do so with this kind of plugin:
Example (different looks on the same page)
http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html
Doing it by scratch will be a little more work, and you need good understanding of javascript and the framework you are going to use.
A plugin like JScrollPane will already have most of the functionality you will need, and if you need something that there isn't you can add the functionality using the basic plugin.