I'm using jquery facebox dialogs, I'm trying to modify it to remain centered when I scroll, I'm not a programer although I know a bit of coding, I found this to open facebox on click coordinates
http://www.web-ramblings.co.uk/positioning-jquery-facebox-by-mouseclick/
I guess thats the same are to edit, what I'm trying to achieve is having facebox centered on the page even if I scrool down,
Can anyone help me?
thanks
It looks like you need to implement a window event for resize / scrolling. Instead of providing an answer to that can you not simply use fancyBox which already takes care of this for you?
Related
Please take a look at this site: removed per request
When you click Learn More, the Fancybox lightbox window pops up and looks fine, but when you click the right arrow on the lightbox, a scrollbar shows up for just an instant (it reaches all the way to the top of the doctor's picture). This is happening on Chrome and Safari.
I can't figure out what code to write to not show that scrollbar. The content will never be long enough to need a scrollbar (except on mobile, etc). Another option would be to just have the scrollbar stop at the top of the content container (not go all the way up to the top of the dr's picture). Please help if you can; it would be much appreciated!! I'm a newb to jQuery/Javascript. Thank you!!
You can try to solve this with CSS. Set overflow: hidden on the container div. This will hide any content that overflows the container, so use with care.
I'm building a one-page site with the content area as large content boxes stacked down the page.
http://salondoreen.com/lowercasemenu.html
I'm looking for ideas on a way to use javascript to jump to each content box. With a one-page site like this, it takes a lot of scrolling to get to the bottom.
My idea is to somehow make this easier. If you are in one box, and you scroll down just a single click, I want the next box to scroll all the way up the page in one jump. That way the content stays easy and readable, and a box will never be half-on half-off the page. Theoretically you could scroll to the bottom of the page in less than ten clicks.
Does that make sense? I'm thinking of something similar to the home screen on android phones. It jumps horizontally between screens, no matter how little you swipe. There will only be one box on the page at time.
Disclaimer: I am a noob web developer, any and all help is appreciated. Thanks!
I would point you toward binding on the scroll event with jquery .scroll(), and using either IDs via http://myurl.com/derp#scrollhere style of links or use the jquery.ScrollTo plugin
Example here: http://jezebel.com/5896408/racist-hunger-games-fans-dont-care-how-much-money-the-movie-made
Click on the 3x3 Tweets screencap they have up. I love the way the lightbox makes a scrollbar. I viewed the source and inspected the element via Chrome and don't see any script that stands out, so I'm guessing it's probably something custom-made.
If so, does anyone know of similar scripts that look like that lightbox and can have a scrollbar effect like that? It's gorgeous!
Edit: I found the code, and I do not think they use a modified version of lytebox: http://ganja.gawkerassets.com/assets/base.v10/static/base.v10.jqueryplugin.20120424_8.js (ctrl/cmd + f for 'glimage'. They use their own thing. Still, I am having trouble finding the perfect jQuery lightbox with presentable vertical scrolling if the image is larger than the windowWidth.
It seems that they're using a modified version (glytebox) of this script:
http://lytebox.com/
IMHO, their lightbox isn't anything special. The scrollbar is probably something that most lightboxes display when the content is too big to fit on the screen.
I have searched and searched for what I thought was a common practice on the web. Im looking for a simple solution (css, jquery, etc) to make a form appear in the center of the screen when a button is clicked. I want the background to fade out a bit to leave the focus on the new element/div. I have played with opacity, but it seems there isn't very good solutions that leaves the form in the middle from being faded as well. I have seen it, so I know it's doable. Any help is WAY appreciated!
If what you are looking for is a "modal popup window" then the following resources may interest you.
Have a look at jQueryUI and particularly the Dialog - Modal Form example which does what you want.
This css/javascript solution allows any content to be displayed in the popup. Worked like a charm for me.
On most websites, you can press your scroll wheel and drag the mouse around in order to scroll. I use this all the time, and I'm sure others do too.
However when I use jScrollPane to replace the scroll bar, it simply doesn't work. Is there any workaround available?
Edit: Video to clarify what I mean, on the first page it works, but not on the second one.
http://screencast-o-matic.com/watch/cX60XpOwT
This is not possible without either 1) creating a custom method for handling middle-click and scroll or 2) in someway hiding the orginal scrollbar under something else or out of the screen. So theoretically, it's possible, but it's not included in jScrollPane at this time.