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.
Related
You know how if an image is to big, it makes the page super long/wide? And you have to scroll down with your mouse wheel and drag to the right by clicking the little bar at the bottom and dragging. Well, I need to have it where you can click and drag to scroll, as I have a map in a game that I'm creating and that would work a lot better. Here is an example of what I want:
http://scripterlative.com/files/dragscroll.htm?u=1
But the problem with that is that you have to pay for the code and I currently have a budget of $0.
Basically, I have no idea how to do this. I've looked at a bunch of other questions and stuff but none have really answered my question because they're using Jquery, Java or other coding languages, and I need to use Javascript.
Thanks in advance!
Download dragscroll.js (https://github.com/asvd/dragscroll), link to dragscroll.js file, and use class=dragscroll in a div.
Example:
<div class=dragscroll>
Big text goes here...
</div>
This is my first time doodling with jquery-mobile. I designed a theme, and now I'm trying to implement it...
Things aren't going as smooth as expected, while I've good understanding of jquery/javascript in general, I really don't like working with frameworks with their quirks and specific syntax.
Anyhow, please check: http://mac.idev.ge:800/html5-mobile/iradio.html
Problem:
Try to click in the area of the player, on the album cover for example, notice how blank space appears on the top of lyrics area? What is that? Same happens if you click near song title..
This is baffling...
Any ideas how to fix this unwanted behaviour? And what is it?
Add this attribute to your header/content div
data-tap-toggle="false"
There are a couple of questions related to this problem:
Jquery mobile: Disable "tap to toggle" fixed header and footer
How to fix jQuery Mobile's fixed footer?
They seem to depend on which version you are using but give them a try
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 would like to display an infographic on my page via a pop out like the facebook photo viewer, rather than just have a popup window be created with the image in it. I just like the UI of a pop out versus a pop up (no window management).
Is there a jQuery/javascript library that accomplishes the pop out functionality?
I'm trying to emulare visual.ly that loads the infographic in a pop out once you click the preview image.
Thanks
There are a lot of them. Search Google for "jQuery Lightbox" and at least one of them should match your needs.
For jQuery, try fancybox, a lightbox alternative.
There is also this page which compares different alternatives.
Yoxvew is a pretty good one. The downside to it is as far as I know it does not allow for scrolling, so you can't use larger images. There are a ton of these plugins around though. If none of them fit your needs it isn't too hard to make your own, or you can modify an existing library.
The page you link to use Colorbox.js to view photos.
This can be done simply with two <div> tags as well. One, which blankets the whole page with some semi transparent color or image and has a z-index larger than the whole page. Two, which has a z-index larger than one, is spaced relevantly, and contains whatever you want to show. Rolling your own isn't always desirable, as there are plenty of pre-written alternatives pointed out such as fancybox, lightbox, etc., but sometimes it is nice to know your options.
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?