I have a problem with my carousel. I've searched for similar questions. But found nothing.
I have make a carousel with three sections and a big image. And the carousel have a right and left navigate button. In the beginning, the first section is show. With a right carousel button. The left button is hidden. Because you can not click on the left. When you click to the other slide. The next section is show and the background image is animate 1000 pixels to the right.
You can see here the example: Example on jsfiddle
But now the problem. When i am on the first section. I have a right navigate button. The left button is hidden, because you can not click on it. When you are on the last section. The left button is show and the right button is hide.
But the problem is the middle section. When you are on the middle section. You have a navigatie button to the right. But not a navigate button to the left. And when I'm in the middle. I also left. And not just to the right.
How can i fix this in my script. Thanks for help.
You can change the code and see the code on jsfiddle.
Here you can see the code and example
I've made an example of my idea here: http://jsfiddle.net/upyZH/5/ , but the problem is still there. Firebug keeps telling me that the image sprite.png was not found. Perhaps that is your problem? And what are all those random charcaters in the css?
EDIT: Here you go: http://jsfiddle.net/upyZH/8/ , works like a charm :)
Have a look at my fiddle here: http://jsbin.com/abape3/14 It has the left and right buttons and works like what you've described.
Related
I have made this website here: http://dijon-egg.com/Possum/
If you click on green big dot button, it takes you to page2. My problem is I can't figure and fix the menu being too big on page 2 or change view of carousel on page 2 so full carousel can show to us.
As I looked at your source code, I guess you should somehow add the .cbp-af-header-shrink class back to the header, when you click the green button.
I have a slideshow of 4 banners with Prev and Next button. It works fine with the Prev button but not the Next button.My problem is Once I press the Next button, the images move not properly.
This is the result I need.=> The next image on the right slides from right to left when clicking Next button.Now it slides but sometimes some images slides back to the right.
Please help.Thank you
<http://jsfiddle.net/pktono/sr5nv6k9>
So, there was couple of issues to fix:
1- animation time was overriding the css command. To fix that, you should use setTimeout function where your aftermath code should reside inside of it.
2- When you navigate to right, you set the previous banner left property to -650px. If you decide to navigate to the left at this moment, you have a wrong left property which ruin the rules. The same thing can happen when you are navigating to left and want to switch to right. To fix this, you should change left property of the current banner to the right value before animating it.
See the working example here
I'm trying to make a jQuery dropdown (more like drop right!) menu. What I need is that when the mouse is over the home button (for example), the other buttons slides out, and the content box slides in.
I want the black box (content) to slide in from the end of the button. Right, the box is sliding in from the left edge of the screen...but I don't want that box to be under the "home" button, I want it to be next to it.
Here's my fiddle : http://jsfiddle.net/TvNcD/
It's buggy right now...
But I think it's something fairly simple to fix.
Hope it works for you although I think there should be a better way to do this using CSS3...http://jsfiddle.net/TvNcD/18/
My head is about to explode as I try to figure out the reason why my dropdown menu stops working as soon as the page jumps to an anchor. There is some JS involved in the jump, too, but the same problem existed even with a plain html anchor jump.
The page is at http://mincovlawyer.com/doc/euro-excellence
As you load the page, please hover over "The Law", "About" and "The Goodies" and see how the dropdown is supposed to operate.
Then click any of the links in the sidebox to the right, for example Alt. #1.
Then hover over the menu items again and observe that no dropdowns emerge anymore.
I would immensely appreciate any guidance in this regard.
The rollover breaks even if you just scroll down the page. The rollover menu is positioned absolute and the navigation is positioned fixed. You could add 'position:fixed' to your rollover menu or you could add the scroll offset in your drop down menu code.
To set 'position:fixed':
At line 8 of the anylinkmenu.css file, change the position:absolute to position:fixed.
It looks like they're working, but they are above the top of the page. Before clicking on any of the links, scroll down just a little bit. Then hover over "The Law" and you'll see your menu shifted vertically.
Now that's a lot of code...
Where's your menu created? The mouse-over stuff
Question1:
Why even using any javascript for an inline-anchor? Using #links scrolls to said position anyways, even without JS?!
I need to animate slides from left to right or right to left (depending upon which slide is selected). I have a JSFiddle set up with a JavaScript that I'm trying to get to work. Currently, it displays the last slide upon page load and scrolls top to bottom.
Can someone show me how to make it so it will display the first slide, then move the slides left to right and right to left when clicking the various links.
Please note: it has to be plain vanilla JavaScript -- no jQuery!
http://jsfiddle.net/thebluehorse/b25dR/
Any help would be greatly appreciated!
Here you go: http://jsfiddle.net/b25dR/18/
This even works in IE6.