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/
Related
I'm designing an page user post submission page for my website and I would like to create a checkbox agreement to the terms for the user to access/view the page. (E.g the page is blurred beforehand or something similar)
Is this possible?
Thank you.
One way to implement this is with Overlay. So, you can create an overlay that will be above the content that you want to hide or blur out. Content like checkbox agreement to the terms can be on the (above the) overlay and you can use a state variable or something to remove or keep the overlay depending upon the state.
This might be helpful: How can one create an overlay in css?
To give you some code additional information would be helpful to answer this question better like What are you using React, Angular, or something else.
I want to create a slideshow with this aspect:
http://i.stack.imgur.com/f7JfI.png
One of the pages of the slideshow should be divided in 6 squares per line, there are 4 lines, each square is clickable and should trigger a animation like the one that is on the image when the mouse hovers on one square.
There are guides and etc for slideshows, but not for this i want to make, i didnt find any.
Help is highly appreciated.
Without seeing your code, it's a bit difficult to help. However, I found two resources which may be able to help you. They explain how to build slideshows with JavaScript and CSS. From there, you can build each slide individually and add the properties you want through a simple table that takes advantage of animation.
This resource shows you how to build each slide from the ground up in a nice way. This one in merely source code on a fancy, animated slideshow, but certainly interesting and the code may shed some light on your own problem.
I hope that helps!
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 :)
Hi guys, in the above image there is a screenshot of a UI I am working on for the purposes of a college assignment which involves manipulating the DOM using JQuery.
Currently I have the logic working and I am now trying to tidy my code and enhance the UI. I'm not sure if this is the correct place to ask this question as strictly speaking I do not think it is a programming issue but I thought I'd take my chances!
For some reason the slider in the image above is being pushed out of place and I have no idea why. Does anyone know what might be causing this??
The stylesheet is huge so I don't want to include it, unless you need to see a certain part.
Any help is much appreciated.
In the image the circle shows the slider trailing off the UI. The arrow points to where It should be located. The underlined slider is how it should also be appearing.
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.