Horizontal Scrolling using JQuery/Javascript - javascript

I wanted to know if there is any open-source free script available for a horizontal scrolling website. I used this script but it has an issues running in IE.
Could someone suggest any script similar to this website?

There are lots of such widgets provided by a bunch of different javascript libraries.
GWT
YUI
ExtJS
Prototype/Scriptaculous
JSMadeEasy as posted by FacilityDerek above.
and Have a look at these jQuery scripts:
The first is a scrolling menu: Horizontal Scrolling Menu made with CSS and jQuery Example here
The second is a scrolling pane jScrollHorizontalPane example here
Here is a more simple one also using jQuery: simplyScroll v1
If what you want is more of a news ticker, you might find this interesting: liScroll (a jQuery News Ticker made easy) 1.0

jScrollpane will do the trick. It's cross browser.

Related

Mobile javascript framework with Twitter Bootstrap

In one of my website I use Twitter Bootstrap 2.3. I love its responsive behaviour, media queries in mobile devices. But it lacks of mobile features (especially linked listviews) So I need to use a framework that would handle mobile version of my website.
After some research I found that jquery mobile, sensa touch, jqtouch, iui, mobilize.js, zepto are possible candidates.
What would be your recommendation for a javascript framework/plugin for mobile pages, that would work well with twitter bootstrap ?
Possible related questions:
Bootstrap list view like jqm
twitter-bootstrap vs jquery-mobile
Using Bootstrap with jQuery Mobile
Also read this: Twitter Bootstrap Navbar: [Left Button -— Center Text -— Right Button]? II
I think i should be possible to build a mobile interface with Twitter's Bootstrap (3). And yes you're right (linked) listviews will miss. Maybe check http://getbootstrap.com/components/#list-group first. Of course you will need to write some code to handle the actions.
Other points to consider: Navigation and page structure. Frameworks like jQuery mobile serve more pages on one url, see: http://jquerymobile.com/demos/1.0a2/#docs/pages/docs-navmodel.html while sencha use a MVC approach. Consider http://getbootstrap.com/javascript/#tabs (or http://getbootstrap.com/javascript/#scrollspy maybe) to mimic such structures.
Other examples, see: How to make a JS horizontal content slide from px to % responsive a nice interface with TB by #boblet which adopt to mobile very well now: http://bootply.com/73715. David Panzarella started a clean mobile navbar with icons: Bootstrap 3 RC2 Navbar with Multiple Collapses And a alternative mobile navigation stucture can be found here: Toggle sidebar on mobile device with Twitter Bootstrap 2.x
Good luck
If you are ready to mess up with Bootstrap and other several frameworks together then make sure you have sound knowledge in jQuery, JavaScript, CSS.
Each framework has their own way of enforcing styles etc, so if you are to combines multiple platforms together, you will often encounter issues such as the expected style from expected framework is not being applied.
I’d recommend you to stick with jQuery Mobile. jQuery Mobile 1.3 has great deal of Responsive design concepts. In the release notes itself they’ve mentioned that they are working hard to support Responsive designs. Read the official documentation provided by jQuery Mobile. This will give you a good head start.
Disclaimer : I have used only Twitter Bootstrap and jQuery Mobile. But I’ve heard from people other Mobile frameworks are not as flexible as jQuery Mobile. Also remember Sencha touch is very fast compare to jQuery Mobile but bit difficult for absolute beginners to get started.
I would recommend iUI since i'm working on it (eh eh) and because it's more or less an empty canvas you can "draw" whatever you want on.
JQuery Mobile or Sencha are nice, but they come with dozens or buttons & UI elements you might not need for a website. It's even getting a mess if you want to give a custom look to your mobile website when everything is predefined.
afaik, Zepto is only a lighter JQuery, so that wouldn't solve you linked listviews issue that much...
Please, give a try to my iUI v2 project, Emy, that you can try here:
http://www.emy-library.org/demos/
Still a few bugs to fix but i'm damn close to the initial release. Big difference compare to iUI are HTML5 syntax, custom animations, full documentation and WindowsPhone support.
http://www.emy-library.org/documentation/1.0/getting-started.html
Cheers!

Parallax animations and iOS scrolling

I've created a website using SUPERSCROLLORAMA plugin. I wasn't aware of the problems with parallax scrolling on iPad and iPhone. I've found out a little bit to late, and I'm thinking about the ways to solve this.
If I understand correctly, events are disabled on this devices while scrolling. So will I be able to make website act as it should, if I disable the native scrolling and implement another one, via JavaScript plugin?
I've already disabled the original scrolling using Alnitak's answer from this question. I've tried to find some plugins to activate scrolling again, but the problem is, it has to be binded to the document since animations are fired there... Do you know the plugin that will do the trick? Is my solution even correct, or there is no solution for my case, I need to rewrite the script from scratch?
You can use parallax scrolling plugin that works on mobile browsers (iOS too).
Have a look at Skrollr. It doesn't depend on any other library, it has optional mobile js file and is very easy to use. Just read the documentation.

Smooth vertical page scrolling using mouse wheel and scroll bar

I am playing around and trying to build a parallax website - yes, I know they are an annoying fad but I would still like to have a go. So, for inspiration, I have been looking at various examples of good parallax websites and came across this one: https://victoriabeckham.landrover.com/INT.
It has smooth scrolling using the mouse wheel, scrollbar, and anchor links. I have been searching for jQuery plugins that would achieve this effect but can only seem to find ones that use internal page links - anchor or ID's (detailed below) - but, not mouse wheel and scrollbar. There is a good chance that I am searching using the wrong keywords. Does anyone know the correct terminology to find these plugins or know any plugins that would achieve this effect?
On a side note, I am currently learning jQuery and Javascript but am in the very early stages - still trawling through codeacademy and not made it onto any real world code yet. So at the moment I am playing with plugins as a way of learning but hopefully in a few months I can build my own stuff!
Smooth scrolling to anchor tags or ID's:
http://archive.plugins.jquery.com/project/ScrollTo
http://jsfiddle.net/9Amdx/7/
http://arthurclemens.github.com/jquery-page-scroll-plugin/
http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12
http://www.designova.net/scrollerbird/
http://chris-spittles.co.uk/?p=462
http://joelb.me/scrollpath/ (*courtesy of #DrunkRocketeer)
And, another example of a parallax website using a similar technique for scrolling:
http://www.ascensionlatorre.com
Try this one. https://nicescroll.areaaperta.com/
It has got
$().scrollTop()
jQuery event listener too so you can have scroll path configured with parallax script.
I think you have to combine several of these effects in order to make something that resembles the Landrover site. A Smooth scroll script, a scroll path script and a parallax script.
This is an interesting site for the path element of that website:
http://joelb.me/scrollpath/
Though the best way to find out how these sites work is to examine them! Some cool sites useing parallax:
http://www.awwwards.com/?s=parallax&post_type=all&search=Ok
I hope this was of some help/inspiration!

Rich JavaScript DHTML menus

Can someone suggest a JS menu script that would be able to support menus such as those that are made here http://www.brightstarr.com/US/Pages/Default.aspx ?
I've been searching the web but can't quite phrase it correctly so I always end up either on Superfish or some other plain dropdown menu?
What I need is support for big menus, broken apart in sections with optional images support (image per menu link).
The particular page doesn't seem to use JS for their menu at all - just CSS leveraging the :hover pseudoclass. Found a tutorial here. The bottom line is that you write all the markup your dropdows require, season them with CSS styles to taste (and position!), and finally put the :hover in place in your stylesheet to just make the submenus appear when you want them to.
Soh Tanaka's Mega Menu is the classic example of setting up this style of menu. I'd go so far as to say it's the gold standard for mega menu scripts. After building the tutorial, it should be easy to do anything you want inside the divs for each relevant area.
The best part about using a pre-done solution with a tutorial like this is that not only do you get to learn, but it's also been well tested and revised.
If the above example is a little too strict with <li> elements, you might try this tutorial from SitePoint
I would just search for plugins for your favorite javascript framework. There are probably about 1000 if you search "jquery drop down menu plugin". The big sizes and adding of images is pretty standard in the ones I've used as well since they are just divs. I don't know if you are used to working with jquery but I am sure there are plugins for all the other big frameworks out there as well.
I wrote the menu for the BrightStarr Site. It doesn't use JS at all, I tried lots of techniques before deciding on this and I choose this for the simple reason that it performs much better on mobile devices than any other JS solution I've come across.

How can I create a Netflix-style iframe overlay without a huge javascript library?

I'm trying to use a link to open an overlay instead of in a separate popup window. This overlay should consist of a semi-transparent div layer that blocks the whole screen from being clicked on. I also aim to disable scrolling at this point. Not matter where you are on the main page, when the link is clicked, the overlay should be in the center of the screen's X and Y origins. Inside of this overlay div, should be an iframe configured such that 3 sizes of content can be loaded.
­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­
Shadowbox is a nice script for inline "popups". It can work with any of the usual JS libraries if you use any (jQuery, Prototype, etc) or on its own, has a pretty comprehensive skinning system so you can adapt the looks without having to go into the source code itself.
It is also the only such script (there are dozens) I've tried that would work reliably across all usual browsers.
It won't disable scrolling for you (you can still see the normal page background scroll by through the dark overlay), but the "popup" will in any case stay fixed on the screen.
http://onehackoranother.com/projects/jquery/boxy/
jQuery.boxy is another nice, lightweight modal dialog plugin.
You might want to check out an old JS lib I wrote, called SubModal.
Easy to understand and modify. Go to town ;)
Once you've modded it, use Minify in combination with gzip on your server. The lib size will be teeny tiny.
I usually use ThickBox for this. It works really well and degrades nicely if the user does not have JS turned on.
It does use jQuery, but you can load it from Google: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js and maybe get the benefit of caching.
Grab the javascript ext library. It has functionality for overlays that are modal.
ThickBox (no longer developed) led me to this library which seems to work very well:
http://fancybox.net

Categories