I'm trying to implement jScrollPane on a playlist generated by jPlayer (with playlist) but it's not working. I think what is happening is that jPlayer builds the playlist dynamically after jScrollPane has been initialized on the playlist ul element.
The jPlayer and jPlayerPlaylist work fine; and I can see the element css added by jScrollPane, which shows it’s working, but the scrollbars are not visible. Possibly I'd need to call jScrollPane after the playlist has finished building? Does anybody have experience with these plugins?
Thanks!
The site is here: http://elricoshow.com
I finally figured it out, after a few tries… I think it was something with the css, maybe because I was trying to have a non-javascript version too, I'm not sure.
Anyways, I've managed to make some very nice scroll bars that blend well with the page, and that work better on a touchscreen (or with the mousewheel) than say a Carousel (because with the carousel you need to click for every advance).
Related
I am using the Pikachoose plugin for the image galleries on my website (http://www.clare-eileen-callahan.com/inthehangar/). Everything seems to be working except for the thumbnail carousel. They just pile up on the bottom of the page, where I want the carousel to be horizontally scrollable, so that only x amount of thumbnails are visible. I can't figure out what is going on with the CSS and Javascript that is preventing it from displaying as it should.
Here is the code I'm using: http://codepen.io/anon/pen/ybExq
Sorry there is a lot of it for the plug in!
For whatever reason, there was an unexpected element in the original jquery carousel script. I was able to find it by breaking apart the script into short lines and referring back to the console.
I'm trying to optimize a Carousel component and I wanna have only one active item in DOM. It is easy to achieve simply by removing/adding components in the cardswitch event of carousel. But the problem is that my components load some ajax info from server before rendering and it takes time, so it's slow to rerender them on each cardswitch.
Is there any technique to cache created components but at the same time to not add them to DOM?
Actually there is no way to keep items otside the DOM and then put them back, so the only solution I found is to recreate items when the became active. It's actually the way Sencha suggests.
The other interesting technique is the one Sencha implemented in ST2. It actually keeps only 3 items in DOM event if carousel has 100000 items. Check the html in Chrome. Haven't seen this carefully yet, but it's cool and performance is great.
I have implemented a prettyphoto lightbox for a inline-div which will require custom scrollbar for its lengthy content. So used jscrollpane to implement custom scroll.
They individually work in background but when the inline-div is called in prettyphoto lightbox the drag / scroll does not work.
Please help.
I have update the scrollpane, updated the prettyphoto, even used many lightbox and other scrolling js but no success.
I'm currently trying to figure out the same thing. I've gotten as far is might involve this http://www.kelvinluck.com/assets/jquery/jScrollPane/ajax_example.html and the prettyPhoto changepicturecallback function (http://www.no-margin-for-errors.com/blog/2010/09/28/tutorial-opening-custom-content-in-prettyphoto/), but haven't gotten the two to successfully work together.
I'm trying to make a iPad like toobar at the bottom of my webpage, using the free jqTouch framework. Here's an example I was trying to copy off (first random iphone image i googled for).
Now, a previous StackOverflow question sorta answers it .. but i'm not sure how to extended that answer to include
4 or so sections (eg. friends, person logged in (if they are), etc.)..
Keep that toolbar at the bottom, no matter what. The middle content is scrollable. but the header and this footer should always be visible.
Can this be done?
Actually your link won't help you at all because position:fixed isn't supported in Mobile Safari and brokenly supported in Android. You are going to need a plugin like iscroll, and some fixed positioning, it a bunch of work to get it all working together. However fear not, if you are not interested in going through the pain of developing this yourself, people have done the work for you. See the DataZombies fork of jqTouch, and you can see that in the demo he has a working bottom toolbar (with Badges even!)
To include a tab bar in jQTouch, you'll want to download a later version of jQT than r109, the default package from their homepage. Go to its GitHub to grab a later version of source.
Then, take a look at this post:
Fixed header in Jqtouch, and this demo: http://demo.lvengine.net/mobileuplink.
i'm working on my version, to add a fixed tabbar on jQtouch
http://www.itabbar.com
it's working with jQtouch, iScroll and the iTabbar
this work with the latest jQtouch version
Here a online demo (only Safari and Chrome for desktop browser)
I've done the prerequisite searching of stackoverflow and looking on the internet. I suspect that the answer is ' This can't be done. ' but I'm hoping someone here might have a solution.
My page loads fine, but many of my YUI components don't fully load before being displayed. For example, my DataTable will resize itself when displaying or my buttons will appear in their native form and then get YUI-fied.
Is there a way to delay the displaying of the page until all the Javascript is finished (i.e. all my YUI components are finished rendering)? I don't know how this would happen, as a lot of the JS depends on the DOM being present to manipulate it.
Is there a way to delay the displaying
of the page
If I understand correctly you would like to hide it until it's done?
If that's the case I have an idea:
add a wrapper around the element you
want to hide (or use
position:absolute to cover it)
give that div a background which use
the color of the surrounding with a
positive z-index
when all your javascript has loaded remove the
z-index or change the color of the background to transparent
Your javascript code would look like this:
do 1. and 2.
load your js
do 3.
Of course it needs to be synchrone.
As an alternative you could use visibility:hidden / visible on the element itself but I dunno for sure if it's well supported.
Try putting your Javascript in the head section of the page, as if it's near the end of the page, it'll load later (making the first elements load faster). OR, better yet, serve up your Javascript compressed and via a CDN, such as Amazon CloudFront so that it loads quickly.