How to slide group of divs in html/css page? - javascript

I am making a website where I need to slide a group of divs from right to left.
This is the screen shot
I want to slide these divs from left to right in a circular way ie when div A is on the left end and about to disappear it must be shown from right side

As mentioned in the comments this is called a Content carousel. For this you can use slick slider for example, its free to use and easy to setup, its also very well documented in my opinion. http://kenwheeler.github.io/slick/ Heres the link
(See the second example for what you want).

Related

How to get jQuery.mmenu to slide over the content instead of "pushing" it

I'm using jQuery.mmenu in a project. The plugin by default slides out a menu (navigation bar) at the left side of the screen which pushes the entire side towards the right. I'm no Javascript/jQuery crack...
Does anyone know how I could alter the code of the plugin to get the menu slide over my content rather than pushing it to the right.
Thanks in advance...
EDIT: I usually use SIdr for my sliding menus. To achieve the above with Sidr all it takes is changing 'true' to 'false' on a certain command. I was hoping it'd be something simple like that in this case, too.
On my current project however I'm having to deal with a very complex navigation with tons of sub-menus, Sidr won't do the job here. PLUS mmenu seems pretty neat - if I could only figure how it slides the way i want.
After taking a quick look at the documentation and the demos, this one appears to be the most relevant to what you're looking for. As you will see, in this example the menu is pulled down overtop of the page content, rather than pushing it aside.
Based on your description, you want something that pulls out left to right, rather than top to bottom as this example does, and the option that appears to control that is the off-canvas option. Changing the position from top to left changes the position of the menu:
$("#menu").mmenu({
offCanvas : {
position : "left", // changing this alters the position of the menu
zposition : "front"
}
})
This JsFiddle from #Gaurang Patel demonstrates this behaviour.

jQuery responsive banner auto resize images and content to fit space

I want to create custom banner or download one.
The banner has following requirement,
I could add images and text in this banner.
On each slide you can add multiple images and text, for an example slide one has two images and text on sides, then slide two has three images and text on the sides.
IMPORTANT – if the images are small thumbnails the text should fill the blank areas or around the image. The banner should be responsive to the element inside (could be an div). If the image is big the text should go underneath the
image or on the side.
slides left or right
left and right navigation button, as well pagination
Example: http://www.bbc.co.uk - main banner at the top
I had a look on the internet i tried the following:
flexslider - very good, meet all the requirements apart from point 3. but dont know how to make it responsive.
orbit slider - good but flexslider it easier to style.
Note: this banner will not be used on mobile device.
Seems like you didn't get any answers because there's no such thing as a perfect finished solution. It's not difficult to change any of the mentioned sliders and make them responsive IF you know some css. I'd suggest that, depending on how many of these works you want to do, you give it a try. You can find good free tutorials online.
I found this one plugin though, worth a try: http://marktyrrell.com/labs/blueberry/
And some more: http://webdesignledger.com/resources/8-responsive-jquery-slider-plugins

Flash-looking animated banner with JQuery

I am trying to create a banner for the top of page, but haven't found any code yet that combines all of what I need. I have included an illustration of what I'm trying to do.
A) I have 4 buttons (each an image file), two to either side default image in the center. This is the main/inactive state.
All of the buttons would have similar animation when hovered over. For the sake of this question, I only illustrated two of the buttons.
B) If you hover over Box 1 (top left), the button would change and text and lines would slide out from left to right. Also, the center image would change. And, to make things extra challenging, the left button and center image would link to Page 1. When you move away, the text slides back to the left, and the image returns to the default state in A. The blue box would behave the same way, linking to Page 2.
C) In a similar manner, if you hover over Box 4 (bottom right), the button would change and text and lines would slide out from right to left. Also, the center image would change. The right button and center image would link to Page 4. When you move away, the text slides back to the right, and the image returns to the default state in A. The green box would behave in the same manner, linking to Page 3.
The closest I've found is this: jQuery image slide on hover effect (horizontal) I was thinking that if I used the static images of all (A) as a background image, maybe I could create a transparent sprite, with only the active version of the hovered button and the center image, to slide left or right on hover.
I can see how the above example might would work for Boxes 1 and 3 (top left and right) and give the illusion of the lines sliding out as the image slides either left or right, but I'm not sure how it would work for Boxes 2 and 4.
Am I on the right track, or am I asking for way more than what's possible in JQuery? I'd be fine with loosing the animated text (I could just make them part of the hover images), but the buttons and center image need to change on hover, and they need to link to a page.
I've made a widget in jQuery that was confused with flash before. I think you need to breakdown each element of your widget into discrete pieces. You are making a new widget. There will be no methods doing what you want. You will have to use the .animate() method explained here. http://api.jquery.com/animate/ You will be animating one CSS class to another CSS class using the .animate() method.
This page has a good primer on the animate method.
http://viralpatel.net/blogs/2010/03/understanding-jquery-animate-function.html
Here's what I would do:
I would make the HTML of the page you want.
I would create CSS of each style of box that you will have.
I would have all the same CSS directives on every box that will
animate. I have found the animate method more agreeable if all CSS
that is to be computed has the same parameters but with different
values.
I would use full resolution images in the 4 outer boxes.
I would animate the div containing the image, not the image itself.
I would make the image fill the div dynamically so that when I
changed the size of the div the image would be a gimmie.
I would work in firebug testing out different commands and see how
they behave. This is critical. The interactive javascript console
is your friend.
This is a big task... when you're done this will be a nice feather in your cap! Maybe after that you could turn it into a jQuery plugin for others to use!
I decided to mess around with this for a bit, here is what I whipped up so far. No links as yet, but for a half hour I don't feel too bad about that :)
http://jsfiddle.net/BH8s5/3/

How to implement a slide-out/drawer effect in JQuery?

I'm looking for a JQuery plug-in for a drawer-like effect. I found that plug-in which is quite similar to what I want but it slides from one side of the screen (top, bottom, left or right). In my case, I have an image as wide as the content div, and I want it to slide down when clicked to reveal the content, but not from the top of the screen, the image won't be located at the top of the screen. In other words, the effect I want is exactly like what that plug-in does but the only difference is that I don't want it to slide from the top side of the screen, it should slide from wherever the image is on the page.
Any suggestions would be really appreciated...
I think something like that would do it no?

JQuery JFlow - slideshow - cannot move 'left' 'right' buttons

I use JQuery to show N pictures in slide. So I put everything as needed, have to define two left/right links so user can scroll pictures. Problem is that JQuery engine automatically put those two on lower left and right corner of web page.
Is there a way to tell JQuery not to do that, so I can position them where needed?
How it looks now you can see at:
http://ante.komponenta.com/index.php?module=Pagesetter&func=viewpub&tid=3&pid=11&_tpl=overview
i think this is best example of jflow slideshow :)
http://www.raghibsuleman.com/jquery-jflow-slideshow

Categories