I am using jScrollPane on an element that has a 1px border and % padding to inset the div contents. All looks fine when first displayed.
When I resize the window down I reinitialise jScrollPane and my right border disappears. It appears that the % padding is not recalculated, the pixel values from the full screen display are retained and used in calculating the new element width, causing the right border to be outside the viewable area.
Any suggestions on how to fix this, or a workaround, would be greatly appreciated.
You need to destroy the api before recreating the jScrollPane like this:
var pane = $('.scroll-pane');
var api = pane.data('jsp');
api.destroy();
$('.scroll-pane').jScrollPane();
Related
I'd like to set the width of my Jssor scrolling logo slider to 100% of the parent div rather than 980px. Seems that there are other things in play where if I adjust the jssor_1 div to 100%, it doesn't actually increase the width, just tries to fit everything in 980px.
Any help is appreciated.
Discovered the answer. For anybody else with this, change the following line:
refSize = Math.min(refSize, 809);
to:
refSize = Math.min(refSize, 1980);
I can place the legend top, middle, bottom, but its always on the right side of the graphview. How can I place it left side?
The most important problem that "too long" texts doesn't fit in the box, so the end of the text is outside the box / screen. I know I can change the text size, but I don't want to solve the problem in this way.
This solved my problem:
graph.getLegendRenderer().resetStyles();
Just called if I need to resize the legend box.
in the current version it's also possible to freely set the position of legend and also the width
I could not find an anwser to my question, beside it is hard to explain it in a few words.
my FB App is an iFrame Canvas, when I set the width to "fluid" the top status bar is left aligned.
when I change to fixed width, I am expecting that I got the same layout like FB always is, the status bar centerd, and my app next to the realtime app activity tab.
But the FB layout is still like "fluid" and my content is fixed width (760px) and is centerd, so I have white space all around it.
I want just the normal FB Layout, statusbar centered, my content is centered right next to it should be the activity tab and only left from my content should be whitespace.
Can anyone tell me how i can set it up right?
Here some screenshots to clarify:
expected: http://oi39.tinypic.com/t88dat.jpg
fixed: http://i40.tinypic.com/24drivk.jpg
fluid: http:// i44.tinypic.com/2po31tt.jpg
greetings
Try having the body style be {position: relative; left: someValue;}, where someValue is calculated based on the window width. So it would be something like someValue=(windowWidth - facebookSidebarWidth - yourcontentWidth) / 2;
I think you can subscribe to the window resize event and dynamically change the left float value according to the above.
Im using the jscrollpane jquery plugin. My content are images that expand when you mouse over them, and shrink back to normal on mouseleave. What I need if for the images to be able to expand over beyond the scroll bar and remain visible while expanded.
By giving the images a z-index I can get them to expand over the scroll bar handles, but im struggling to get them to expand any further.
If I set a number of elements to having overflow visible I can get it to work, but then I have browser scroll bars at the bottom of the screen.
Can I have the images visible when they expand but no browser scroll bars?
Thanks
Answer from:
http://groups.google.com/group/jscrollpane/browse_thread/thread/8073378d51551efa
Hi,
If I understand correctly you want your images to expand out of the
bounds of the scrollpane "box"? That won't be possible in a simple manner.
A workaround might be to do something like this:
* On mouseover clone the image that is rolled over and attach the
clone to the body with position: absolute.
* Use jQuery to figure out the position of the image you cloned with
respect to the body (a loop with offsetParent will be your friend
here).
* Apply this position to the cloned image so that it is sitting
directly above the original image then expand it.
* Listen for the mouseout event on the cloned image and when this
happens the shrink the cloned image and then remove it from the body.
Hope it helps,
Kelvin :)
I am having the weirdest problem. I'm trying to make a page that fits a resolution of:
width: 640;
height: 960;
for the iphone. But there is a hidden element that I can't access with the Developer toolbar or Firebug that is adding an extra 100pixels to the right of my page.
I've set the correct height and width for the html, body, and main containers but I'm still having the same issue.
You can replicate the problem by going to the following page and resizing your screen just below 740px wide. When you do this you see the horizontal scrollbar popup around 740 pixels. Here's an example page with the issue.
The scrollbar shouldnt popup until the window is resized down to a 640 pixel width because thats what I have all the elements assigned to.
The main overall issue is that when viewed on the iphone4 there is a 100 pixel gap on the right side of the screen that no matter what i do I cant get rid of because some element is making the page 740px width instead of 640.
My boss and I have been working on this for hours and still cant figure out what is causing that extra 100 pixels on the right.
Any suggestions would be greatly appreciated.
Place overflow: hidden on your HTML CSS attributes. Not sure where that element is coming from, but that will prevent anything from making scroll bars appear.