I'm creating an overlay with multiple effects and clicks. To setup the overlay and the general effects(slide, fade, duration,.) there's no problem. As for some actions there's need an automated close after a few seconds.Here is my jQeury code for the total animation.
Now for what I want exactly to do: Create overlay if clicked on div in the body content. (DONE) Open the refering overlay of witch div container was clicked. (DONE) In my project there are 2 div's (as clickable items) with actions. For one of them the content with in the overlay moves to the right side and showes some other content. (DONE) If that last is done (click and move tot right) the overlay is suposed to close automaticly after a few seconds.
I have an overlay that is implemented using Malsup BlockUI, with a "close" button, however it won't close! - here's the details... I have a DIV that I use as an overlay:
Displayed using: $.blockUI({ message: $("#mp").html() }); It has a cancel button (see above): ... <span class="divbutton greenbutton mp_no" style="margin-right: 1em">not now thanks</span> ...
Which closes the overlay by means of : $('.mp_no').click(function() { alert("close overlay"); $.unblockUI(); return false; });
However like I say, this simply refuses to close the overlay. I've used this same technique over and over again but this time something must be wrong. I just can't spot it! Moreover... if I place a button elsewhere on the page (and outside of the overlay DIV): <span class="divbutton greenbutton mp_no" style="margin-right: 1em">not now thanks</span> This will fire the click event, and is exactly the same "button" markup!
I have a div that has 4 buttons and another div inside that the four buttons load pages into depending on which one is clicked. Picture an image gallery except for images its loading pages. All good, all works.What I want to do is trigger the buttons to activate every five few seconds and load the pages on their own without the button having to be clicked on.basically creating a rotating type banner ad system.Below is the code for one of the buttons.
I'm trying to display an alert message (a div with text) that fades in, and after 6 seconds fades out automatically. That's easy, but I also want to allow the user to close the div by clicking on it if they so desire. The problem is, the delay() function overrides the click, or so it seems -- clicking does nothing unless I remove the delay().
Here's the code I'm using:
I've tried reordering and combining these into a single statement but it yields the same result.
Using the very basic jqModal example, isn't it supposed to auto size and auto center the modal on the page? I placed a table that was wider than the modal's default settings and it's off the page and does not create scroll bars on the page to see the hidden section of the modal.
The default class is
Now, I know I can change the width of the modal but what about the positioning?
I am building a new website which has some boxes that changes from classes(done with jquery magic ).I want to add an overlay(like the lightbox fading background) to the page when the user clicks on the switch button.I have tried a couple of things but it seems not to work:If tried to append a div to the body but that doesn't seems to work:
I have a PDF file that appears in an IFRAME. I use the ddsmoothmenu but the dropdowns will not overlay the PDF. I read I could use the bgiframe plugin to solve the problem, but so far have been unsuccessful…the PDF always appears on top. Does anyone have any experience using bgiframe to layer on top of a PDF in an IFRAME?
jQuery 1.6.2, jQuery UI 1.8.14. I use a sequence of dialogs to present a number of wizard type interfaces to my users, but I have a problem since upgrading to these jQuery versions that certain dialogs within each of my wizards open behind the dialog overlay and I can't get to it. I can see that the dialog is ending up with a zindex of 1000, and the overlay has a zindex of 1001, so I've overridden my dialog property to be 1002, and that brings it over the overlay, but then the input fields on the dialog are still not editable. The escape key will still close the dialog.
This doesn't happen to all my dialogs, but it does happen to the same ones in my sequence of dialogs each time, depending on which wizard I choose. I only see this problem with FF 3.6 (haven't been able to try newer ones yet), but things work fine in IE 8.
I am a beginner in jquery and search for a solution to display a overlay-Window. (ModalDialog, ModalPopup). I found the jdialog-extension: [uRL]. Looks very good, but I can't declare the overlay-content in a separate file. Instead I like to declare the overlay-content in the same page where it's called from. (asp.net-Eventhandlers etc). Is that possible or do you know another approach / another extension?
I'm new to jQuery, but I'm very excited to incorporate it into my project. I'm trying to re-create the following flash-based technique for an open-source medical student project, but I'm not sure how to begin: [URL]. The example is exactly what I am trying to achieve with jQuery. I have a fundoscopic image (image of the back part of the eye) and I want to put a dark overlay that covers the entire image except for a clear circular center, centered over the mouse cursor. The clear circular center should move with the mouse cursor (with some delay/smoothness). When the mouse cursor leaves the image space, the clear circular center should return to its initial position.
I got the "loading external pages" overlay working just fine from the examples. My project calls for me to open an external overlay but we don't have control over the trigger point. The content is being injected into our pages via an external scripts. So I created an event listener with JQuery to listen for any clicks that occur to a specific link, this works just fine. What I've been struggling to do is open up an external overlay via my listener. I've tried creating a custom function called showOverlay that will do the real work but no luck. Is it possible to trigger an external Overlay via eventListener or do I have to take a different approach?
This is my eventListener. $('#ExternalLinkReadID a').click(function() { var id = $(this).attr('href'); alert("before: " + id); $(this).showOverlay(); alert("after"); });
<a href="readreviews.jsp" rel="#overlay" style="text-decoration:none"> <button type="button">Reviews</button> </a><!-- overlayed element --> <div class="apple_overlay" id="overlay"><a class="close"></a> <!-- the external content is loaded inside this tag --> <div class="contentWrap"></div> </div><!-- make all links with the 'rel' attribute open overlays --> <script> $.fn.showOverlay = function() { // if the function argument is given to overlay, // it is assumed to be the onBeforeLoad event listener $("a[href]").overlay({ mask: 'lightgrey', effect: 'apple', onBeforeLoad: function() { // grab wrapper element inside content var wrap = this.getOverlay().find(".contentWrap"); // load the page specified in the trigger wrap.load(this.getTrigger().attr("href")); }});}; </script>
I am using the cycle plugin to vertically scroll images with text overlays on a WordPress homepage. I position a div with a semi-transparentbackgroundto darken behind the text The div style uses abackground-image with the -moz-linear-gradient and for IE it uses filter with the microsoft gradient. I thought it might be a problem but it actually works half the time. When a new slide appears and scrolls down the text background is completely transparent - through to the page background. The text over the background is also faintly visible. Once the new slide is in position however, the background and textappear as intended. The suprising point -while theslide is being removed the text and background display perfectly.
I'm trying to add the lightbox plugin to a page and when the image is clicked the overlay and corresponding image are pushed to the bottom of the page wit the image below the overlay. The gallery div is nested inside a couple other divs and when the gallery images are clicked the overlay and lighbox divs are pushed to the bottom of the page instead of being absolutely positioned over the existing content. If anyone has some ideas on how to fix this I would like to hear them.
I have a DIV blocked from data entry in IE, Firefox, Safari and Opera. Functionally all is okay -- super plugin! The only problem left is that the cursor does not change to 'not-allowed' on the overlay when I use IE 6,7 or 8. All other browsers render the cursor okay?
Here's the code: $().ready(function() { Protect('#divData'); $('#cbProtected').bind('click', function(e, ui) { if ($(this).is(':checked')) Protect('#divData'); else Unprotect('#divData'); }); }); function Protect(el) { $(el).block({ message: null, overlayCSS: { backgroundColor: null, opacity: 1.0, cursor: 'not-allowed' }});}; function Unprotect(el) { $(el).unblock(); };
I have a div with content that i want to overlay over some other content. The tricky part is getting it to be full browser width and height. This doesn't seem possible in CSS, so I'm looking for a jquery solution. It will basically fade in when a button is clicked. I'm comfortable with the fading it in etc, but I'm just having trouble working out the full screen part - especially since I want it to stay full screen even on browser re-size.
I know nothing about javascript, but have found a useful code for enlarging images, and it would be great if I could just insert a line or two to get the overlay effect - so, what I want to add is a background when an image is open: for example - [url].
I have a page that has a list of companies pulled from a mysql db. Each company name is a link and when clicked an overlay comes up containing further details on that particular company.
Everything is working...my list is created, link pulls up the overlay, but as of now it only populates the info for the company that is the last record. I know I need to pass the record id to the jquery so that it pulls the record for the name clicked, but I am just not familiar enough with jquery to figure it out. I believe I need to pass it to a parameter, but need a nudge in the right direction. Below is my current code with just the basics, I have passed the unique id for each record via mid="<?php echo $member->member_id; ?>"> in the link...I just need to pass that to the overlay. code...
I want to trap the window.close() event when the user clicks on the close button of the browser using javascript. Can anyone shed light on this problem ?
