I have a script that brings up an overlay box onclick that needs to be on top of everything else on page, however I can't get it to show on top of the navigation tabs. I tried calling the overlay script at the very beginning of the head section as well as tried to call it at the end but it doesn't seem to matter.
Is there something I can add to the script to force it on top of every other object on the page?
I am using jQuery tabs and when I have very long content within the tabs, my browsers scroll bar reflects the content in the tab with the most content.
Example, "Tab 1" & "Tab 3" has a very long scroll bar, even though it has no content (because of Tab 2) and you can scroll down through the empty space
[URL]
Is there a way I can hide the content in Tab 2 so that my browsers scroll bar displays correctly in relation to the content in the active tab?
The problems im facing is when I use something like jcarousellite inside tabs. It works fine in browsers other than ie. In ie, the carousel loads fine in the active tab, but in the inactive ones it doesnt preload.
Basically when you click on a previously inactive tab, it displays nothing until you click outside the tab.
I have narrowed down the problem to this: My tabs use a css style where the inactive tabs set the display to none. This somehow in ie causes whatever jquery that is contained within not to load before hand. If I remove this display: none property, all my carousels show fine, but ofcourse so do all the tabs
i.e. they are no longer hidden when inactive, instead all are shown as overlapping blocks on the page.
Note: all elements used are div elements
View this message in context: [url]
Sent from the jQuery General Discussion mailing list archive at [url].
have sat up a webpage containing Tabtastic-tabsystem, and have some questions about modifying this:there is four tabs at the top, "overview", "requirements", "stepbystep" and"notes"I want to add more pages to this tabset-system without adding more tabs.These new tabs should NOT be availabe from tabs like"overview","requirements", "stepbystep" and"notes" in the example, but from links(tree-menu) on the same webpage, but still OUTSIDE the tab-system. These new"hidden" pages should be displayed as the already existing pages, but thereshould not be a corresponding tab to them.I would like i.e. the tab "overview", to be visible when one of the newidden pages are shown.My setup should work something like this:Where the links on the lefthand site ("Getting started", "Customization" etc.) are all
displayed in the tab "Page".
I'm having issues with jquery and the tabs I'm using. My tabs work but... I want some more functions and that seems to be a big problem for a Javascript and jquery newby.
My HTML:
Code:
<ul class="tabs">
<li>Tab1</li>
<li>Tab2</li>
[Code]....
I really don't know if this is correct but it works! What doesn't work is the active class. If you use one of the buttons in the first tab you go to the right tab but the tab itself has no class called active and that ruins the style.
2)
I also have one other question: lets say that all the above is my second page and I have my frontpage in which I also have buttons. I want somebody to use the button and end up in the third tab of page 2. My link is something like
Code:
page2.html#tab3
I read that using this should lead you the third tab but it's not working for me. You go to the first tab of page 2 instead.
I've been reading a LOT! Jquery for dummies, I googled, read the forum and other forums. I posted on a Dutch forum but no answer. I've added a lot of different code but it doesn't work.
I have nested tabs in jquery tabs which are pretty simple to do if we want static jquery tabsbut what if we want nested tabs that the remote page should decide what would be the tabs.or in other words i want nested tabs in a remote page (or ajaxified) For example i m calling this page(remote page) through tabs
<div id="container-2">
<ul>
<li><a href="#fragment-1a"><span>Section 1a</span></a></li>
[code]....
I'm having trouble figuring out why content isn't showing up on the 2nd and 3rd tabs of a tabbed content section embedded on a page. The content shows fine for the first tab but not at all for 2 and 3.
Page of tabbed content is [URL].. It's an OsCommerce site using STS Templates for the pages. Here's the code:
[Code]...
I am trying to get a simple set of Javascript tabs to work properly. I have just two tabs and I want to set up the script to have the second tab automatically hidden prior to reading the javascript code because right now it shows the contents of both tabs when the page is loading and then the second tab disappears after all the script has loaded.
I have the jquery script linked to on the page and here is the way my script looks to run the tabs:
Code:
I want to add something like style="visibility:hidden;" to the DIV that isn't shown on page load and have it added and removed as necessary when users click on the tabs. So basically I would like the generated code to look like this:
Code:
Specifically, assume I have a div tag of absolute dimensions. I need
to figure out, first, whether or not the text inside the div tag is
partially hidden by the overflow setting, and if so, what the hidden
text is.
Is this even possible? Obviously, the rendering engine in the browser
"knows" this information, but is it accessible through Javascript?
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:
$(".nl").click(function(){
$("div.lang_english").fadeOut("fast", function() {
$(this).fadeIn("fast").removeClass("lang_english").addClass("lang_dutch");
[code]....
I currently want to implement an overlay and a dialog the same way its used for this sites login .
View 1 Replies View RelatedI would like to add a feature to one of my sites which takes a URL and displays the webpage with certain information overlayed on top of it. I figure I can retrieve the webpage and display its HTML in an iframe (local) with an added BASE HREF tag so that the page displays correctly, while its contents are accessible through JavaScript since it's on my domain.
Here's where I was wondering if anyone could give me a pointer before I start searching for hours... how do I get a list of all links inside this iframe and their positions so I can create new elements and place them there (like a small info icon next to each link to click to show the overlayed info). Links could be text or images. I'm not really sure how I'd find the locations then place new elements at those locations.
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?
[Code]...
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:
<div id="mp" style="display: none; cursor: default">
<p>.....</p>
<ul><li>A</li><li>B</li></ul>
<div>
<span class="divbutton greenbutton mp_no" style="margin-right: 1em">not now thanks</span>
<span class="divbutton greenbutton" style="margin-right: 1em">
<asp:HyperLink ID="hypView" runat="server" style="text-decoration: none" NavigateUrl="~/mp.aspx">blah</asp:HyperLink>
</span></div>
</div>
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!
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?
View 1 Replies View RelatedI am using Lytebox v3.22 and I am trying to find a way to add a link on the popup. At present the link only appears on the thumbs page and is only dimly visible when a popup image is selected. I am using document.write. Although clicking on any area ouside the popup results in seeing the thumbs again this is user unfriendly. How can I add a link back to the thumbs from the popup?
View 1 Replies View RelatedWhy this greybox isnt displaying my images? Click on the 'launch gallery' button at the bottom of the page: [URL]. I know all the paths are correct I just cant figure out why they wont display in the overlay!
View 2 Replies View Related<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]">
<html xmlns="[URL]">
<head>
<title>Overlay test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#overlay { .....
It works great, however I'll be using this code with a school's website's template. The problem is that the "overlay" div tags would be placed within the container div tags of the template,therefore confining to these dimensions. How can I modify my code to have my div tags not affected by the templates div tags... and have the overlay be center in the browser..
With the cycle plugin the image slideshow is pretty easy, but my problem is how do I show the text while "cycling" the images!so this is the code:
<div id="banner">
<?php print render($page['banner']); ?>
<!--slideshow-->
[code]....
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.
jQuery.noConflict();
jQuery(document).ready(function() {
// START DOCUMENT READY
[code]....
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'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.
View 4 Replies View RelatedI 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 use jQuery Tools and got a strange problem [URL]
HTML
<code class="html">
<button type="button" rel="#overlay" id="overlaystatic">static</
button>
[Code].....
does work in the function but not inside the jquery ajax.
anybody knew of an existing library for using Javascript to create a dynamic text overlay on an image?I'd like to have a user enter text and have it show up on the t-shirt in real time, but not quite sure where to start. I'm no JS pro. I tried to look for existing jquery libraries but couldn't find much.
View 1 Replies View Relatedi have used <param name="wmode" valur="transparent" /> and in <embed> tag inserted wmode="transparent" for overlaying the menu over flash player in my web site... it worked in firefox but not in chrome and IE.
View 1 Replies View Related