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

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

Related

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

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).

Scroll large image on menu click

I have a rather large image (not my choice how it was given to me) I have a simple navigation structure and when I click on one of the links I want to be able to scroll to a certain point of the large jpg below the menu. It's one large image so using # isn't going to work. I assume this is going to need to be a javascript or jquery function, but I'm just how sure how to set that up. I've looked around but everything I found is for a slide show, where I just have one overly large image that I need to scroll down and up via a menu button. I tried having the a tag jump around the page, and that kind of worked, but it didn't scroll it just jumped.
I wish I had code to show, but nothing I have used worked.
You can use scrollTop property of element like body or any div to scroll at any position. see here created a pen for the same.
If you are going to animate the page scroll you will probably need to use jQuery's animate function.
$("html, body").animate({
scrollTop: 400 /*Desired offset position*/
}, 1000);
Take a look at this jsFiddle as an example.
You could also position anchors behind the image at the positions you need the page to scroll
See this jsFiddle

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.

About fullPage.js

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. !

jQuery - Continuously scroll div on hover

I wish to build a shelf of content much like on Netflix where when you hover over arrows on either end the shelf scrolls at a continuous speed. Ideally, I would also like to make it so when you click the arrows it scrolls a chunk along, so you have the option to click like made to get through a shelf quickly.
This will be using lazy loading so you don't need to worry about repeating content, but obviously it won't have a set width (other then the outside container being 100% with overflow scroll.
Also, this needs to be actually scrollable, so it will work on tablets/phones.
I have no idea here to start so any directions would be great.
Thanks,
Jake!
Image of netflix shelf.
UPDATE: Check out the Smooth Div Scroll jQuery plugin. It slides continuously through the image, you can hover the mouse on the div and manually scroll back- and forward.
Original answer:
I might be off with that, but check out these two plugins:
jQuery Coverflow plugin or the jQuery Imageflow plugin
I think the keyword you are looking for is "flow" and there are multiple flow plugins for jQuery. Hope this helps.
Best regards,
Michael

Categories