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 :)
Related
Some of my info pop-ups for my markers in Leaflet contain a lot of text (lots of linebreaks). This, in some cases, makes it go beyond the screen height, causing the user (me) to not be able to read all of it. Is there some way to make such "overflowing" pop-ups get a scrollbar? And also, naturally, keep it opened even when you remove the cursor from the marker so that it doesn't just disappear when I try to move the mouse cursor over to the scrollbar?
If not, how else would I solve this problem besides "cutting down on the info"?
In order to make your popup container scrollable, you need to set the maxHeight property when you instantiate the popup:
var popup = L.popup({maxHeight: 225}).setContent(content);
Here is a JSBin with a working example.
How can I check which place in Panel Was clicked? I know, I have this some functions:
getClientX, getClientY, getNativeButton, getRelativeX, getRelativeY, getScreenX, getScreenY, getX, getY
but how can I check which click Was near right side of panel and which was near left side of the panel?
I can't add to the Panel two div's with 50% width and detect in that way..
More info:
It's a lot of panels. I must do this in each of panel. I don't know how many panels we have. We have got a constans width of each panel = 400px.
Regards!
Assuming you're handling an onClick event or similar for a panel, you can get the cursor position with getClientX or something similar. Then just get the position and size of the panel and simply check what you're closet to; all elements are rectangular, so shouldn't be too difficult to just write four ifs for it.
The getElement() method will give you the panel's underlying element, so you may need to use that to get the exact size and position.
I have Struggled with the following issue..
I need an Activity Which have an editbox and a chekbox below it..These are placed at the bottom of the screen...I have a background image for this total screen..I need scrolling of the totalview(background image along with edit and check boxes) while with presence of softkeyboard...
At start It was looks good..But at the time of editing the image is Resize(shrink)/the image is overlapped by the edit & check boxes with adjustResize in manifest option...with adjustPan I could get something of requirement but the check box was still behind the Keyboard...I much tried with Scrollviews and include layout options but couldn't get the required....
Could anyone Suggest me anything regarding this..
At last I found some trick to get out of this....what I did was instead of using scrollviews...etc...just I scroll the Parent layout (ScrollTo(x,y)) to some extent upwards...Which works fine with me...
I'm using a simple javascript toggle function to expand a div to show its contents. If the div is near the bottom of the screen, it expands and some of the div disappears off the screen.
How can I get the page to automatically scroll down to make sure the div is in view?
Each element on your page, including your DIV, will have a set of offset values relative to the document. You can get these via the $.offset() method. This will give you the x and y coordinates to the element on the page.
There are many plugins that exist in the wild (such as $.scrollTo() by Ariel Flesler) which will animate scrolling of your page for you, and even do so via a set of provided coordinates. You would join these two items together to automate a scrolling to the offset coordinates of your DIV.
Just make sure your DIV isn't taller than your viewport, or else you'll need to scroll even more to see all of it.
I want to have a static footer image with 5 buttons for navigation in my mobile phone website. The image is here http://www.pintum.com.au/jm/footer3a.jpg. The blue icons should be the default, the yellow icon should only be visible for the hover or active state.
I want to know how can I make this image scale to the correct width on all mobile devices (landscape and portrait) and have links to other pages and make the current/active pages icon the yellow color?
What I have tried so far
I first tried to make a CSS Sprite but that go ugly (complex) quickly. Painful working with widths everywhere so the image scales correctly as I had no way of knowing the height in pixels since the width is dynamic. I could use JS to find the width and calculate height on the fly. But this sounds like overkill.
Next I tried to have a single image with a width of 100% then place div overlays on top of the image. But with this solution I could not figure out how to navigate pages using JavaScript click event, or figure out how I would be able to change the image icon on the selected page http://jsbin.com/uraya5/3/ . And detrmining the correct height for the div
Last I tried to make each button a seperate image. These seems like the easist soultion. But jQuery Mobile adds a bunch of extra styles to the button I do not know how to remove. See http://jsbin.com/uraya5/4
So whats the best/easiest way to do this?
How can I remove the style around
links?
Or can I use a single image CSS sliding door method? To reduce HTTP request.
Ok I figured it out
See soultion here http://jsbin.com/uraya5/10/
I had to:
Set width to 19% of each button for
some reason there is spacing between
each button so 20% does not work.
Set ui-bar-a background to black so
it hides the spaces between my
images
Use this JS code to navigate pages $.mobile.changePage($("#about"),
"flip", true, true);
I would still like to use a single image instead of having 5 different images to reduce http calls. So if anyone finds a eligant soultion for this please let me know.