How To Make Lightbox Resize Equally When Being Loaded

Sep 7, 2010

I am making a simple lightbox without using the silly plugins and I want to know how to make the lightbox resize equally when its being loaded. I can only get it expand from the corner, I want it to stretch down then widen but equally on both sides.

This is the code im using:
// Javascript
<script language="javascript">
$(function(){
$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").animate({"height" : "400px"},2000);
$("#lightbox, #lightbox-panel").animate({"width" : "400px"},2000);
});
$("a#close-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeOut(300);
});
});
</script>

// CSS
#lightbox {
display:none;
background:#000000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;

#lightbox-panel {
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}

// HTML
<a id="show-panel" href="#" class="small">Show Panel</a>
<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
<p>You can add any valid content here.</p>
<p align="center">
<a id="close-panel" href="#" class="small">Close this window</a>
</p>
</div><!-- /lightbox-panel -->
<div id="lightbox"> </div><!-- /lightbox -->

View 1 Replies


ADVERTISEMENT

JQuery :: Loaded Lightbox Link Not Working?

Dec 19, 2009

Lets say I have 2 pages (index, page1) in index I have had declared the jquery and the lightbox libraries, and the following function:

Code:

$(function() {
$('#gallery a').lightBox();
});

[Code]....

I tried clicking on the link but it didn't recognize the lightbox.

View 2 Replies View Related

Automatic Lightbox Popup After Page Loaded?

Dec 30, 2009

I have the lightbox working properly on the site but actually want it to pop up/open automatically, say after 2 seconds after the page is loaded and without having to trigger it by klicking a href link. I noticed daniweb has exactly the same function here on this site! What code would I need to add to make this happen?

View 1 Replies View Related

Resize My Iframe(ifr) Based On The Content Loaded In It?

Aug 27, 2010

I have been having an issue with this script to resize my iframe(ifr) based on the content loaded in it.I am half bald from this issue. Works perfect in IE7 & 8 but not in FF or Chrome.FF works "almost" - It resizes on first page loaded but doesn't resize if the iframe content is changed until refreshed. (example: If I load search results which shows 10 results and then click one and it loads the page which isn't as high as the search results page was then it just stays at the larger height until I refresh and then resizes correctly.)

.JS Code:

/***********************************************
* IFrame SSI script II- � Dynamic Drive DHTML code library (http://www.dynamicdrive.com)[code]....

View 2 Replies View Related

Why Doesn't Math Add Up - How Many Equally Spaced Pit Stops

Jun 20, 2011

The last line gives an utterly ridiculous number (two 4-digit negative numbers for minutes and seconds) rather than the minutes and seconds it should. My commented example calculations are shown to the right of the lines. Scenario: A race car driver enters in the length of the race and how long he can drive before he runs out of gas (runtime). He also enters how much time he expects to spend in the pit area for each pit stop. Purpose: This calculation tells him how many equally spaced pit stops he'll need to make throughout the race, and the amount of time driving between pit stops (interval quantity).. The code check passes in JSHint.com

[Code]...

View 4 Replies View Related

How To Make Lightbox Effects In Form

Feb 17, 2010

I want to know how to make lightbox effects with the idea of switching between pages using the lightbox. Please follow this link: [URL] while pressing on "submit an inquiry " it will show a form. All that I need is to make the same idea but using registration form.
First page: contains user data ---> on pressing next ..
I want to be on same lightbox box effect but using next page that contains his work data and on third page he will have a message that his registration is done successfully. So, how to switch between pages in lightbox effects?

View 2 Replies View Related

How To Make Iframes Resize?

Oct 29, 2004

I have a table that contains two iframes, left and right. The left iframe contains a list of choices, when clicking the selection the right iframe displays the requested data.

Each of these choices link to web pages that are the same width but different heights.

If I right click my home page icon and open the page containing the two iframes in a separate web browser window, everything works correctly as I choose all of my different choices in my left iframe. I am calculating the height of the iframe so that it can be sized vertically.

If I dont right click and open in a new browser but let these two iframes load into an existing iframe called content, this is when the iframe never resizes. If you load into an existing target that has a size, is there not a way to have it resize or do I have to load it again?

On larger pages, I can hold my mouse in the right iframe and drag down which will show me the rest of the content in the iframe.

Since everything works correctly when I open the web page containing the two iframes in a new window, I know I could create a page containing each combination of left and right iframes and then loading them into my content iframe.

However, this defeats the purpose of a muti selection list that is supposed to stay static while the right iframe changes content and size.

View 7 Replies View Related

Make A Textarea Resize With Text?

Sep 20, 2010

is it possible to make a textarea resize with text? so if e.g the text overflows, the text-area is automatically resized so that there's no scrolling? It needs to resize automatically as the user is typing (more or less), he/she shouldn;t click on any buttons to resize it

View 4 Replies View Related

Make Magnify Loupe Effect Couple With A Lightbox?

May 13, 2011

I am trying to use this JQuery Loupe effect to magnify small images on mouseover, but would like to be able to click on those magnified images to open a lightbox or to link to another page, but I can't seem to make it work!!

Here is what i'm working with. [URL]

View 1 Replies View Related

Make Slideshow Start When Everything Has Loaded?

Jan 15, 2010

My problem is when the page loads, the javascript slideshow starts to play even if the image has not yet finished loading... in effect the first image is not displayed since the image is still loading..

what i hopefully want is to start the slide show when all the images has loaded so that the slideshow will run smooth. code...

View 3 Replies View Related

Make The Slideshow Start When Everything Has Loaded?

Jan 15, 2010

the javascript slideshow starts to play even if the image has not yet finished loading... in effect the first image is not displayed since the image is still loading..what i hopefully want is to start the slide show when all the images has loaded so that the slideshow will run smooth..

Code:
<div id="slideshow">
<img src="Image/image1.jpg" alt="Slideshow Image 1" class="active" />

[code].....

View 10 Replies View Related

JQuery :: Document.ready - Make Sure All Js Is Loaded?

Jul 12, 2009

I was wondering if there is something like document.ready; to trigger after all the DOM+Js is loaded. document.ready is triggered when the DOM is ready, but the js might be still loading, i would like to trigger an event only after DOM along with all the JS is loaded.

View 14 Replies View Related

Make Div Loaded With Different Images Actual Links?

Mar 19, 2011

I have a couple of divs as part of my gallery page, I was wondering how I can make the image that is loaded into the div be a link, so it can be clicked on, but a different link for each image. I want to click the main div on the right when it has been loaded with an image so it opens up the original image source in a new window.

View 2 Replies View Related

Elements Loaded - Make Available For DOM - Works Fine In Firefox And Of Course Not In IE

Jun 8, 2009

However I am trying to have a flash embed code for SWFObject written on load by JS. This way I can include just a JS file rather than the JS and HTML, making it easier for others to include. So I know, document.write is bad. Fine, but I haven't been able to use createElement() for some reason, nothing gets created (as verified by firebug).

This works fine in Firefox, and of course not in IE. I believe it has something to do with the items not getting loaded in to the DOM, but I want to be able to apply other JS functions to the flash object (video or videoie), for example to close the video player on completion by removing it. I have that code working, at least when the code is put in the HTML and not added by JS, so I presume its that this method of inserting code causes IE to choke?

[Code]...

View 8 Replies View Related

JQuery :: Calling Lightbox \ Code Should Be Included In Place Of ?????? To Invoke Lightbox?

May 29, 2010

I have to following jquery lightbox code:

<script type="text/javascript">
$(function() {$('#largerview a').lightBox({
fixedNavigation:true,

[code]....

View 3 Replies View Related

Slideshow With Lightbox Feature - Can't Get Lightbox To Work Properly On It?

Oct 2, 2009

I currently have a slideshow working on my client's site, but I can't get lightbox to work properly on it. [URL]...

Is there a way to fix the existing slideshow to work with lightbox? Or is there another way of doing this (keeping the same look that is currently in place)?

View 5 Replies View Related

JQuery :: Cycle Plugin Resize (realign) Slide On Window Resize

Oct 28, 2010

Im using the cycle plugin trying to make a banner slide tha is 100% the width of the window, my problem is that when i resize de window the banner does not align center, it stays somo what left align. So is there a way to keep the slides align center after you resize the window usingthe cycle plugin? or is there another plugin that i can do that? I attached a image to ilustrate, the white banner with the cat should align center when i resize the windows but it stays left align.

View 4 Replies View Related

JQuery :: Passing An Element To An Event (resize Control Upon Window Resize)?

May 31, 2011

I'm trying to develop a function to resize a control upon window resize. In regular javascript I would make a global array of control names and append code to the event that cycles through and resizes each control.For example

var proportionalizedImages=new Array();
proportionalizedImages.push(document.getElementById(ctrl));
if (window.addEventListener)[code]....

I'm wondering if there's a more elegant way to do this in jQuery. I've played around with it a bit, but i'm unsure how to get the control object to the resize function triggered by window resize without a global variable.

jQuery.fn.resize = function(max_size) {
$(window).bind('resize', $(this), resizeTriggered);
}[code]....

View 2 Replies View Related

JQuery :: Resize Function That Will Resize A Window Around Content?

May 15, 2011

I'm looking for a resize function that will resize a window around content, in my case a div.

I've googled away but not come up with anything as yet so would like to ask if anyone knows a plug in that can do this simple task.

View 1 Replies View Related

JQuery :: Resize Text On Window Resize?

Nov 19, 2011

I'm trying to scale the text with the size of the window (I've also got all the layout sizes in ems, so this should keep the aspect ratio of everything the same as the window is resized). The code that I've got at the moment doesn't do anything -

$(window).resize(function() {
var $width = $window.width() / 10;
$("body").css("font-size", $width);
});

View 1 Replies View Related

Resize Element On Windows Resize

Apr 10, 2011

Is there anyway to make a custom resize function that resizes one of my div elements on the webpage the same amount of pixels as the browser window gets resized?

View 1 Replies View Related

How To Resize Webpage 'NOT Auto-resize'

May 26, 2011

I am looking to resize my entire webpage down to specific smaller resolution and add it to an iframe. I do not need it to "auto-resize" depending on viewpoint, just shrink it to a smaller size.How can I use javascript to resize the entire page to my dimensions?

View 1 Replies View Related

Ajax :: Already Loaded Files Not Present In Loaded Div?

Jul 5, 2010

I'm trying to use cluetip jquery plugin inside a message_container div which will be updated once in a while through ajax. The plugin works just fine in any other div, but it seems that in message_container div the already loaded external javascripts are not present ie the plugin doesn't work. Do you have any ideas what would be a proper solution for this issue?

View 1 Replies View Related

Google Maps API - Make A Map That Lets The User Click The Map To Make A Pin And Write A Description

Jan 27, 2010

My objective is to make a map that lets the user click the map to make a pin and write a description. Like this [URL]

View 13 Replies View Related

JQuery :: If Number Is Below 5.5 Make It Red - Otherwise Make It Green - Multiple Classes

Dec 8, 2011

I have several classes named 'ratings_colored'. They all contain a number from 1 to 10. If the number is below 5.5, the number should become red. If not it should become green.

The code below works, but if the first .ratings_colored is higher than 5.5 it will make ALL the classes green. Even the numbers below 5.5! I tried using the 'this' but it didn't work either.

$(document).ready(function () {

View 2 Replies View Related

Make A Default Empty Value And Force Users To Make A Decision?

Dec 2, 2009

How Can i take this to make a default empty value and force users to make a decision?

<select id="preservetitletest"
name="titletest"
dojoType="$testWidget"
style="width:50%;font-family:Courier;"

[Code]....

View 1 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved