Creating a Floating Widget that moves as the page scrolls - javascript

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/

Related

Alternative to Bootstrap Affix

Been working with Bootstrap for a little bit, but am working without it on a new project.
Was curious whether anyone knew of an alternative, easy-to-use plugin to Bootstrap's 'affix'.
I'm really just looking for an element to go to position:fixed upon a certain scroll point (ideally defined by an element), stop at a particular scroll point (ideally defined by a page footer).
Maybe jquery stickem plugin? As stated in their README
Make items sticky as you scroll, to a point.

Parallax scrolling without scrollbar

I wanted to know if there are some javascript libraries that handles parallax scrolling, with panes, but without using scrollbars ?
My client doesn't want any scrollbars and the website works like panels that show when you scroll.
I tried Skrollr, but when I overflow : hidden, it doesn't work.
thanks
I think you always have to write some code to "parallax" the whole thing , but, I once used this library
jQuery mousewheel
https://github.com/brandonaaron/jquery-mousewheel
because I did not want scrollbar's in my website , it was really helpful. It allows you to detect scrolling in every div of your document , so you're not obliged to bind action to window.scroll.
The only issue if you're not using jQuery is that this library requires it.
Anyway I think that jQuery is always a good idea.

Creating 3 Scrollable grids

I am trying to implement a webpage like the mockup I've posted. I tried looking for some jquery libraries that can help me achieve this task, but havent found any yet.
The idea is to make three separate scrollable grids, all three should occupy the entire browser screen, and the header bars should be able to hold text at the center.
Any help that would put me in the right direction will be a great help.
Try with this plugin: jScrollPane / http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
Demo in jsfiddle: http://goo.gl/hG9CV
You don't really need to do this using jquery, Simple CSS would work, just use position:fixed to position the divs and overflow:scroll to create scrollable element.
See a sample fiddle

HTML layout design - need better approach

I have to design a layout for my project. There are arrangements of divs, upper Div, lower Div, fixed height, scrolling etc. It is difficult to describe the problem in words, hence I have attached an image below. Please refer the screenshots.
What I want to achieve is to arrange panels with respect to the overall height of the browser window. Pink module is absolute positioned at the bottom of the parent Div. Upper Div is precious sibling of pink Div and it contains panels. when browser is resized scrollbars should not appear in UpperDiv. Instead panels should show scroll (show in second).
It can be done using HTML and CSS and not at all I am hesistant using javascript or jquery. I appreciate any of your approach in doing this. Many thanks.
Sorry I couldn't made HTML properly. Currently my html shows scroll in upperDiv (instead scroll should appear in panels). Here I have created a fiddle. Please check.
here
Made some changes to the CSS, hope this is kinda what you are looking for.
http://jsfiddle.net/vCVUL/embedded/result/
Regards.
You could use ExtJS for this. Have look at the demo page. There you find "Layout Managers" how will do the job for you.
I can't think of a much better way than, after page load, setting the dynamic section's height.
And to handle the resize, we can just bind the same function with JQuery.
http://jsfiddle.net/N3HWz/7/

JQuery Accordion - bottom-up in stead of top-down

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

Categories