|
JavaScript - Does Lightbox Have A Height Bug In All Ie Versions?
It appears Lightbox has a bug in IE when the screen height exceeds 65,505 pixels.
I have created two test pages for you to see. One that shows the bug and another that shows it working. The problem seems to be ONLY with Internet Explorer (of any version). In the following test htm pages click the "Click Here" link at the top left corner. You will see a lightbox pop up on screen. The issue is related to the opacity level. When the screen height is <= 65,505 pixels the opacity works fine for IE. But if the height >=65,506 it fails. It is not an IE bug because i tried using filter: alpha(opacity) and it works fine. It seems to be a lightbox bug. Test 1: Opacity Works because Height of Screen is 65,505 pixels: http://fatcatdaily.com/test-works.htm Test 2: Opacity Fails because Height of Screen is 65,506 pixels: http://fatcatdaily.com/test-fail.htm NOTE: You MUST be using Internet Explorer to see the BUG Similar TutorialsI have this function which rounds up the <p>s, checks their ids, twice, for specific letter combinations and, depending on the combination, changes the class name in one of two ways. It's referencing <p> tags with ids that look like this: <p id="Labaabb6"> , where 'a' could be 'b' & vice versa, '6' any number from 1 to 6, and 'L' is just there to be zero in the character count. Still here? OK, there are six variations, V1() to V6(): these work standalone, but it'd be good to combine them. This is where I'm having some trouble... Here's a breakdown of the first function: Code: Line
1 function V1(){
2 for (i=0; i<elP.length; i++) {
3 if(elP[i].id.charAt(1)=='a' && elP[i].id.charAt(7)=='1') {
4 elP[i].className = 'oV1'}
5 else if(elP[i].id.charAt(1)=='b' && elP[i].id.charAt(7)=='1') {
6 elP[i].className = 'xV1'}
}}
In Lines 3 and 5, the value of elP[i].id.charAt(7) is a variable: it can be '1' to '6', and is always the same value in both lines. In Line 3 elP[i].id.charAt() is a variable, could be (1) to (6), always == a. In Line 5 elP[i].id.charAt() is a variable, could be (1) to (6), always == b. In Line 4, elP[i].className is a variable, could be one of a set of six. In Line 6, elP[i].classNam e is a variable, could be one of a different set of six. For a start, how many variables? I make it three. elP[i].id.charAt(); elP[i].id.charAt(7); or maybe wrapped into 'elP[i].id.charAt()' ? elP[i].className. First draft, don't fully understand how to write variables: function V(charNo, lnNo, newC) { var charNo = elP[i].id.charAt() or elP[i].id.charAt[] ? var lnNo = elP[i].id.charAt(7) var newC = elP[i].className for (i=0; i<elP.length; i++) { do if/else here} } Any help appreciated. I've been trying to get the jquery nivo slider and the lavalamb function to work on the same webpage. From each of the tutorials comes different versions of jquery and they don't both work on the most recent version of jquery. I left both versions of the jquery attached for now... Am I doing something wrong or is it possible to have them both working on the same page? I'm a noob and my code is pretty messy...but I'm trying to do some simple stuff... Pleeeeese help meeeee!! I'm getting ubber frustrated Here is the website - http://sethwardallison.com/ihome/index.html Here is the menu I made that is working correctly on it's own... - http://sethwardallison.com/ihome/lavalamp/other.html Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>iHome Preview</title>
<link rel="stylesheet" href="js/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style type="text/css">
#nav {width:397px; background: url(images/bg2.gif) no-repeat top left; overflow:hidden; margin:0px; padding:10px 0px 13px 20px; color:#fff; position:relative; font: bold 14px arial;}
#nav li {float:left; display:inline; list-style:none; line-height:35px; position:relative; z-index:3;}
#nav li a { padding:0px 10px 0px; cursor:pointer; Palatino, serif; font-size:20px; display:inline; color:#fff; }
#nav li.rounder { position:absolute; left:0px; top:10px; margin:0px; padding:0px; display:none; z-index:2;}
#nav li.rounder img {position:absolute;}
.cornersWrap {position:relative; height:25px; width:auto; margin-top:5px; background:#dfddc0;}
#nav, #nav li, #nav li a, #nav li.rounder {height:35px;}
#tl,#tr,#bl,#br {position:absolute; width:8px; height:8px; overflow:hidden;}
#tr,#tl {top:0px;}
#br,#bl {bottom:0px;}
#tr,#br {right:0px;}
#tl,#bl {left:0px;}
#tr img,#br img {left:-8px;}
#bl img,#br img {top:-8px;}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#nav li a").mouseover(function(){
$("#nav li a").each(function(count){
$(this).css({color:"#fff"});
});
$(this).css({color:"#663300"});
var offL = $(this).offset().left - $("#nav").offset().left;
var offW = $(this).width() + parseInt($(this).css("paddingLeft")) * 2;
$("li.rounder").stop().animate({left:offL+"px", width:offW+"px"},295,function(){
//IE6 1px Fix
var trOff = $("#tr").offset().left + parseInt($("#tr").css("width"));
var wrapWOff = $(".rounder").offset().left + parseInt($(".rounder").css("width"));
var brOff = $("#br").offset().top + parseInt($("#br").css("height"));
var wrapHOff = $(".cornersWrap").offset().top + parseInt($(".cornersWrap").css("height"));
if(wrapWOff > trOff){
$("#tr,#br").attr("class","rFix");
}
$(".rFix").css({right:"-1px"});
if(wrapHOff > brOff){
$("#br,#bl").attr("class","bFix");
}
$(".bFix").css({bottom:"-1px"});
});
});
});
</script>
</head>
<body>
<center><img src="images/logo.png" alt="" title="Welcome">
<div id="wrapper">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<a href="http://youtu.be/4Mh--oqL6ak"><img src="images/randall.png" alt="" title="" /></a>
<a href=""><img src="images/creekwood.png" alt="" title="" /></a>
<a href=""><img src="images/poinsettia.png" alt="" /></a>
<a href="http://youtu.be/fO5q_lG7jKY"><img src="images/cielo.png" alt="" title="#htmlcaption" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is a<em>House</em> <a href="#">neat</a>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Example</a></li>
<li><a href="#">Contact</a></li>
<li class="rounder">
<div class="cornersWrap">
<div id="tl"><img src="images/rounder.gif" /></div>
<div id="tr"><img src="images/rounder.gif" /></div>
<div id="bl"><img src="images/rounder.gif" /></div>
<div id="br"><img src="images/rounder.gif" /></div>
</div>
</li>
</ul>
</div>
</body>
</html>
hi, i have a jquery problem... this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above: (it is not working the tab actions, the slideout works...) http://www.benjaminsterling.com/wp-c...es/sidetab.htm the javascript code is the above: PHP Code: var jqsideTabs; var tabs, h = 50, r = 0,ra = 0; $(document) .ready(function(){ jqsideTabs = $('#sideTabs').addClass('closed'); tabs = jqsideTabs .find('.tab h3') .clone() .appendTo(jqsideTabs) .each(function(i){ var that = $(this), cls = '',ow,newThis, newEl; if( i == 0 ) cls = ' active'; newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>'); that.replaceWith(newEl); ow = newEl.outerWidth(); if( i == 0 ) ra = ow; else r = ow; h = newEl.css({'top':h , 'right': -ow }).height() + h; newThis = newEl.get(0); newThis.jq = newEl; newThis.i = i; newEl.click(function(){ var el = this.jq; if( jqsideTabs.hasClass( 'closed' ) ){ jqsideTabs.removeClass('closed'); } else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){ jqsideTabs.addClass('closed'); } el .siblings() .removeClass('active') .css({'right': -r }) .end() .addClass('active') .css({'right': -ra }); tabs.eq( this.i ).show().siblings('.tab').hide(); return false; }); }) .end() .parent() .eq(0) .addClass('active') .end() .filter(':not(:eq(0))') .hide() .end(); jqsideTabs.bind("mouseleave",function(){ jqsideTabs .animate({left:-310}, 'fast', function(){ jqsideTabs.addClass('closed').removeAttr('style'); }); }); }); and the html file is: [HTML] <div id="sideTabs"> <div class="tab"> <h3>Tab 1</h3> <div class="gut"> <p>Some text</p> </div> </div> <div class="tab"> <h3>Tab 2</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> <div class="tab"> <h3>Tab 3</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> </div> [/HTML] the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content).... can anyone help...please..... Hi, I need to re-size a div to be 100% of the browser but taking into account the height of an existing header div. Currently it works but it doesn't factor the height of the above header div, and therefore scrolls off the page (the height of the header div) I need to manipulate ( subtract the height value of the header) in the javascript somehow. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function SetHeightOfDiv(){
var theDiv = document.getElementById('content');
theDiv.style.height = BrowserHeight()+"px";
}
function BrowserHeight() {
var theHeight;
if (window.innerHeight) {
theHeight = window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
theHeight = document.documentElement.clientHeight;
}
else if (document.body) {
theHeight = document.body.clientHeight;
}
return theHeight;
}
</script>
</head>
<body style="height:100%; background-color:blue; margin:0; padding:0; color:#ffffff; font-size:15px; text-align:center; font-family:monospace,arial"
onload="SetHeightOfDiv()">
<div id="wrapper" style="height:100%; width:900px; background-color:yellow; margin-left:auto; margin-right:auto; overflow:hidden">
<div id="header" style="margin-top:0px; height:130px; width:890px; margin-left:5px; background-color:red; position:fixed">
<p>The FIXED HEADER</p>
</div>
<div id="content" style="margin-top:132px; background-color:grey; width:890px; margin-left:5px">
<p>THE BODY - that extends below the browser window (possibly the height of the header)</p></br>
<p>So how do we manipulate the Javascript to 'Subtract' the height of the HEADER?</p></br>
<p style="text-align:left; padding-left:10px">
function SetHeightOfDiv(){ <br>
var theDiv = document.getElementById('content');<br>
theDiv.style.height = BrowserHeight()+"px";<br>
}<br>
</br>
function BrowserHeight() {<br>
var theHeight;<br>
if (window.innerHeight) {<br>
theHeight = window.innerHeight;<br>
}<br>
else if (document.documentElement && document.documentElement.clientHeight) {<br>
theHeight = document.documentElement.clientHeight;<br>
}<br>
else if (document.body) {<br>
theHeight = document.body.clientHeight;<br>
}<br>
return theHeight;<br>
}</p>
</div>
</div> <!--end of wrapper-->
</body>
</html>
Thanks Hello. Am I missing any coding or anything? I'm really confused and have yet to find any help. I got the instructions from http://www.huddletogether.com/projects/lightbox2/ I would go to their forums but haven't received an approval email for over a week. Odd. Anyway, here is my link with the sample thumbnail. It opens the image in a new page. Thanks! http://creativepink.net/packaging.php Figured it out... admin can delete.
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: Code:
// 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 -->
can some tell me how this image gallery with lightbox is done? I am trying to figure this out and was searching, but couldn't find how this was implemented with lightbox. http://www.davirusso.com/work/ I've never done java script, but I need this lightbox effect and I can never figure it out! http://www.youtube.com/watch?v=_Vv0QVP2CzE there's one tutorial I tryed, but for some reason, the light box never works, it always just opens in a new window. The website I got the codes from http://www.lokeshdhakar.com/projects/lightbox2/#how says that if it doesn't work there must be a conflicting code, but I don't have anything that I would see that would be conflicting this. I'm just trying to get a simple effect on a tutorial website I am creating so you can click the image and it enlarges in the lightbox. Can anyone help me out here? I really would like to figure out this effect. Thanks Hi, I am using Lightbox+ and overall it's very good for my needs. However it has a small problem that is causing me to loose hair, I have tried to fix it but my grasp of Javascript just isn't cutting it. If you goto http://serennz.sakura.ne.jp/toybox/lightbox/ and click on the image "Sample 2" then use the next arrow to go to "Sample 3" you have to hover off the image and then back on to get the previous and zoom icons to show again. I have been able to make the bug occur every time in both Firefox 3.6 and IE6. I am guessing the mouseover event isn't triggering correctly due to the image object moving underneath the mouse pointer but I just can't fix it. Any help, pushes in the right direction, anything. Cam. http://www.fotoderyadijital.somee.co...cekimleri.html why my gallery is too slow when i double click the image is it about lightbox script or images is too big size. can you check for me. Hi, could someone please tell me what I'm doing wrong with this page? http://www.silvergatehomes.com/customhomestest.html I've tried a bunch of things and cannot figure out what I'm doing wrong. Thanks. P.S. The reason I'm writing is because the images aren't opening. Hi for some reason my lightbox, downloaded from (huddletogether/projects - Lightbox 2) isn't working. I have a javascript slider that IS working on the page aswell You can view a test page here http://www.spmcreative.co.uk/patrickedward/gallery.html (only the first thumbnail is clickable) I have attached some code below, please let me know if you need to see any more, Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Patrick Edward Diamonds</title>
<link rel="stylesheet" href="CSS/style.css" type="text/css" />
<link rel="stylesheet" href="CSS/screen.css" type="text/css" media="screen" /><br />
<link rel="stylesheet" href="CSS/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<style type="text/css">
body {
background-image: url(img/MainBG.gif);
background-repeat: repeat;
}
a:link {
color: #999;
text-decoration: none;
border:0;
}
a:visited {
text-decoration: none;
color: #999;
border:0;
}
a:hover {
text-decoration: none;
color: #000;
border:0;
}
a:active {
text-decoration: none;
border:0;
}
</style>
</head>
<body>
<div id="container">
<div id = "header">
<div class = "logo">
<a href="index.html">
<img src="img/logo.png" alt ="Patrick Edward Diamonds" />
</a>
</div>
<ul id="nav">
<li><a href="index.html"> Home |</a></li>
<li><a href="collections.html"> Collections |</a></li>
<li><a href="design.html"> Design Service |</a></li>
<li><a href="trade.html"> Trade Service |</a></li>
<li><a href="gallery.html"> Design Gallery |</a></li>
<li><a href="contact.html"> Contact Us</a></li>
</ul>
</div> <!--end of header-->
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="img/reel_1.jpg" alt="" /></a>
<a href="#"><img src="img/reel_2.jpg" alt="" width="780" height="245" /></a>
<a href="#"><img src="img/reel_3.jpg" alt="" /></a>
<a href="#"><img src="img/reel_4.jpg" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="2"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="3"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="4"><img src="img/bullet.png" alt="" /></a>
</div>
</div> <!--end of banner-->
<div id="main1">
<p><img src="img/gallery.png" alt="Gallery" /></p>
<div class="album">
<div class="imageSingle">
<div class="image"><a href="img/Lgallery1.jpg" rel="lightbox" title="my caption"><img src="img/gallery1.jpg"/></a></div>
</div>
Thanks, Simon I have been following a tutorial for an image gallery, i can upload images and use gd to create thumbnails that when clicked display the full sized image, but the full sized image is to big to fit in my design, i have managed to get the rel="lightbox" attached to the thumbnails as they are displayed but it wont load the full image, the loading ring just keeps going round, does anybody know how to fix this? is it even possible. BTW i am a complete beginner so please be gentle.
I was wondering if it is possible to embed javascript within a lightbox. I believe a lightbox in most cases uses its own javascript code, but i am looking to have an unrelated javascript function working within the lightbox, under the image, if possible. Thanks in advance. I need help i have "installed" everything for lightbox and it runs but how 1 can i make it to click on a image and then open the light box and how can i get it over the frame?! Please and thanks... If you don`t know what i mean check out rebel-renee.com - Media-Lounge galerie... I really like the lightbox2 effect (http://www.huddletogether.com/projec...tbox2/#example) but I need help doing what I'm trying to do, for some reason I cannot get it to work, maybe you have a better recommendation? I have one large image, its a tear out of a magazine, I want the initial image to be the entire page, but I want the user to be able to click on the text area of the page and have that enlarge so the viewer can read it clearly. Any ideas? Thank you, Dustin i made a gallery using lightbox but i have a problem that the menu (created by allwebmenu program) is always on top of the lightbox so the pictures i cutted.. how to solve this problem? Hello, this is not and advert This is a class i built in javascript What it dose: When users leave a site that has a confirm you want to leave box from the browser Why have i posted: I have seen around on the internet posts about how to do such a thing so i though i would get hits to codding forum when user search for such a thing and any one of codding forum members could help it get better Well this is a nice little object to use insted that dose a light box effect and brings up a Yes/no true/false box you set what you want it to say The JSON Object PHP Code: confirmBox = { 'message' : 'This is a Confirm Box', 'trueTxt' : 'True', 'complete' : true, 're' : '', 'falseTxt' : 'False', 'onTrue' : 'alert("true")', 'onFalse' : 'alert("false")', 'setTrue' : function(ontrue){ this.onTrue = ontrue + "confirmBox.update('true')"; }, 'setFalse' : function(onfalse){ this.onFalse = onfalse + "confirmBox.update('false')"; }, 'setTrueText' : function(trueText){ this.trueTxt = trueText; }, 'setFalseText' : function(falseText){ this.falseTxt = falseText; }, 'setText' : function(text){ this.message = text; }, 'hide' : function(){ var bg = document.getElementById('___confirmBox_bg'); var center = document.getElementById('___confirmBox_center'); var dialog = document.getElementById('___confirmBox_dilog'); center.removeChild(dialog); bg.removeChild(center); document.body.removeChild(bg); }, 'show' : function(){ this.createBG(); this.createCenter(); this.createDialog(); }, 'update' : function(sw){ this.re = sw; }, 'state':function(){ if(this.re = ''){ return false; }else{ return this.re; } }, 'createBG' : function(){ var bg = document.createElement("div"); bg.setAttribute('style', "display: table; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);"); bg.setAttribute('id', '___confirmBox_bg'); document.body.appendChild(bg); }, 'createCenter' : function(){ var center = document.createElement('div'); center.setAttribute('style',"#position: absolute; #top: 50%; display: table-cell; vertical-align: middle; margin-left:auto; margin-right:auto;"); center.setAttribute('id', '___confirmBox_center'); document.getElementById('___confirmBox_bg').appendChild(center); }, 'createDialog' : function(){ var dialog = document.createElement('div'); dialog.setAttribute('style', "display:block; width: 300px; padding: 16px; background-color: white; z-index:1003; margin-left:auto; margin-right:auto;"); dialog.setAttribute('id', '___confirmBox_dilog'); dialog.innerHTML = this.message + '<div align="right"><input type="button" onclick="eval(confirmBox.onTrue); confirmBox.hide();" value="' +this.trueTxt + '" /><input type="button" onclick="eval(confirmBox.onFalse); confirmBox.hide();" value="' + this.falseTxt + '" /></div>'; document.getElementById('___confirmBox_center').appendChild(dialog); }, } Then this is how you call it and set propertys Code: <script src="confirmBox.js" type="text/javascript"></script>
<script type="text/javascript">
confirmBox.setText("This is a test"); //Sets the text to show in the box
confirmBox.setTrueText("I can see it"); // sets the text on the return true button
confirmBox.setFalseText("I can't see it"); // sets the text on the return false button
confirmBox.setTrue('alert("Thanks");'); //what to do when true is clicked
confirmBox.setFalse('alert("Your a lier");');// what to do when false is clicked
confirmBox.show(); // Show the confirmBox
</script>
|
|||||||