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.
Related
I am looking to create a slider within wordpress that is a little out of the norm and was wondering if anyone could give me advice on how to go about it.
I'd like a slider for a meet the team page on our website.
I am hoping the slider could work as normal but have filters on the left for departments and thumbnails below and outwith the slider with each employee on there.
I would like these thumbnails to be clickable and for the matching slide to appear when the thumbnail is clicked.
Can anyone suggest a plugin or a method to create this kind of thing?
Thanks in advance for your help.
Well i think you are referring to isotope jquery plugin. It filters down items based on the selected tag. Its actually free but you will have to create modify it for your needs. If you are using bootstrap you can get the idea of implimentation from here.
http://theme.stepofweb.com/Atropos/v1.5/HTML/page-team.html
Here is a paid wordpress plugin that can do that for you.
http://codecanyon.net/item/meet-the-team-wordpress-plugin/full_screen_preview/4983412
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 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).
I'm now building a webapp for iPhone, and I have problem with the scrolling on an ajax compoment.
Basically, I have a php page which is changed according to the function clicked on a button, and this page's size isn't a set height, so because of that I added the iScroll script which allows me to make it scrollable (because I needed a fixed header & footer), and what happens now, is that because the page is being loaded dynamically, the iScroll doesn't know it's height - so it gets stuck, I tried using refresh function on different pages, i'm afraid it doesn't work.
Ok, so I've found a solution:
using jQuery, simply write this below your scroller div, and it should work.
<script>$('#scroller').css('height', (window.innerHeight - 1) + 'px');</script>
that is for those who use iScroll 4.
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.