I have a question about the accordion plugin for jQuery.
Basically, I've got it to work on my site nicely, there's just one thing that I'd have liked it to do and that is bottom-up opening in stead of top-down.
What I mean by that is that my 3 buttons just stand in the vertical menu (div) in the bottom. And when you click it, they'll slide open but upwards, not downwards.
Is there a way to achieve this easily?
I've gone through the documentation, but can't find any native support for it, so I was wondering if it was possible to do it in the javascript of the plugin itself.
Thanks in advance.
Here's how I got my accordion to always to be fixed to the bottom and slide upward:
#accordion {
position:absolute;
bottom: 0px;
}
There is an animated option that controls which animation is used for the widget. I don't know if it supports 'slideUp' or not. You might want to experiment with the other effects in the UI effects library and/or the default animation effects. A little investigation may also enable you to create your own effect that does exactly what you want if one of the pre-defined ones doesn't work. Note that you'll probably also want to change the icons, at least for the selected header.
Have a look at:
http://jqueryui.com/demos/accordion/#option-active
Here it shows which part of the accordion-menu starts as active part...
Related
Hey lovely StackOverflow Community.
I have a problem with my website. I added the Bootstrap Carousel from getbootrap.com and it actually works very well. But there is one problem. Everytime the image sitch, my whole website goes up and down.
I don't know what could be the problem, cause i changed nothing on the code from getbootstrap.com :-/
Sorry for my bad english :D Hope you can understand my problem.
Overwrite the Bootstrap class. This will solve your problem
.carousel-inner>.item {
width: 100%;
}
My issue with the Carousel was not directly related to the image, but rather the content within it that was causing the shifting of the page. To avoid it while being elsewhere on the page, I just used JQuery to detect if I had scrolled past my carousel and to make it pause. I know its a workaround but its effective.
$(document).on("scroll",function(){
if($(document).scrollTop()>200){
$('#slider').carousel('pause');
} else{
$('#slider').carousel('cycle');
}});
It is because it changes some class on the carousel items.
You can set a min-height to the carousel container (.carousel-inner) and it won't jump anymore.
Set the value that fits better your needs.
ALSO:
Seam like there is a little effect on the images, so that every time that an image change, it became a bit smaller. If you just want to avoid the all website jump, use what i said above, if you want to change the "change-of-size" behave, you need to check the class .next and (probably) .right/.left and see if there's a change of height. It is hard to inspect them from a live website, that why i'm telling you to check this from the code - Or upload the code if you prefer.
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
Im trying to recreate the script that rdio (http://rdio.com) has created for their player footer. when you click on footer, a panel slides up nicely and to reveal more content. another example is by teehan lax; the top dropdown http://www.teehanlax.com/ but theirs doesn't support firefox properly.
I came across this snippet, http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm
But its not clean as rdio's or teehan.
any thoughts on library they might using?
We're just using basic CSS transitions, and adding and removing classes. The z-index of the bottom bar is set such that it appears in front of everything else, and the class changes control how the content is changed.
You can accomplish the same height changes with jQuery quite easily, as described here: https://stackoverflow.com/a/4965097/1309238
All,
I'm using Wordpress widgets but I'd like to create a widget that floats down with the page as your scroll. Has anyone ever done anything like this? If so, can you give any recommendations on how to achieve such a widget? Is it done merely by Javascript/CSS?
Thanks!
The easiest way - to install this new WordPress plugin - Q2W3 Fixed Widget
It was specifically designed for this purpose!
Screenshots
All you need to do is set the position of the element in question to fixed via CSS, i.e.
.myFloatingWidget {position:fixed; left:0px; top:50%}
You need to give the widget a style of position:fixed;. Example at W3Schools.
slashnick's and maxedison's solutions will work.
If you'd like to have a dynamic scrolling box that doesn't always stay on the screen or minds the header, footer or any other div of your site, you might want to check out DropTheBit's sticky float jQuery plugin: http://dropthebit.com/74/sticky-floating-box/
How can I make a dropdown menu similar to NFL.com's using jQuery? I really like the way it stays hidden, while still providing all the convince of a regular menu.
Something similar can be achieved with jQuery using their Slide effect. Essentially, each of those submenus will be contained in their own div, each positioned such that when fully visible you get the submenu under the main nav. Then, simply start off with all of those subnav divs hidden, and apply the slide effect to show/hide them during mouseover/mouseout events.
NFL.com uses Script.aculo.us, which was written by Thomas Fuchs
See the Script.aculo.us site for lots of examples and demo code
The Effect.SlideDown and Effect.SlideUp should get you what you need for this type of menu.