Develop Reference

Javascript for loop innerhtml doesn't work

class GenerateArray {
constructor() {
this.arrayCode = document.getElementById('code');
this.BaseCode = document.getElementById('preCode');
this.startCode = document.getElementById('startC');
this.endCode = document.getElementById('endC');
this.question = "";
this.prefix = "";
this.description = "";
this.answer = "";
this.id = "";
this.Name = "";
this.answerDIV = "";
this.count = 0;
}
generateQuestionPart() {
this.question = document.createElement('input');
this.question.setAttribute('type', 'text');
this.question.id = 'question' + this.count;
this.question.className = 'question';
this.question.placeholder = 'What is the question?'
this.prefix = document.createElement('input');
this.prefix.setAttribute('type', 'text');
this.prefix.className = 'prefix';
this.prefix.id = 'prefix' + this.count;
this.prefix.placeholder = 'The prefix of the question that belongs to the link'
this.description = document.createElement('input');
this.description.setAttribute('type', 'text');
this.description.id = 'description' + this.count;
this.description.className = 'description';
this.description.placeholder = 'Add the description that is going to be in the info pop up';
this.answerDIV = document.createElement('div');
this.answerDIV.className = 'answerDIV' + this.count;
this.answerDIV.id = 'AnswerDivId';
this.answer = document.createElement('button');
this.answer.setAttribute('type', 'button');
this.answer.id = 'answer';
this.answer.className = 'answerN' + this.count;
this.answer.innerHTML = 'Add Answer';
this.answer.onclick = function (e) {
for (let i = 0; i < NewArray.count; i++) {
if (e.target.className.endsWith(i)) {
NewArray.id = document.createElement('input');
NewArray.id.setAttribute('type', 'text');
NewArray.id.id = 'id' + i;
NewArray.id.classList.add('id');
NewArray.id.placeholder = 'Add the ID of the answer';
NewArray.Name = document.createElement('input');
NewArray.Name.setAttribute('type', 'text');
NewArray.Name.id = 'Name' + i;
NewArray.Name.className = 'name';
NewArray.Name.placeholder = 'Add the text that is on the answer button';
// console.log(e.target.className);
document.getElementsByClassName('answerDIV' + i)[0].appendChild(NewArray.id);
document.getElementsByClassName('answerDIV' + i)[0].appendChild(NewArray.Name);
}
}
}
document.getElementsByClassName('create')[0].appendChild(this.question);
document.getElementsByClassName('create')[0].appendChild(this.prefix);
document.getElementsByClassName('create')[0].appendChild(this.description);
document.getElementsByClassName('create')[0].appendChild(this.answerDIV);
document.getElementsByClassName('create')[0].appendChild(this.answer);
this.count++;
// console.log(NewArray.answer.length)
}
writeArray() {
let basis = document.createElement('p');
basis.innerHTML =
" class QuizPart {\n" +
" constructor(questionText, chosenAnswer, prefix, questionDescription) {\n" +
" this.questionText = questionText;\n" +
" this.chosenAnswer = chosenAnswer;\n" +
" this.prefix = prefix;\n" +
" this.questionDescription = questionDescription;\n" +
" }\n" +
" }\n" +
"\n" +
" class ChosenAnswer {\n" +
" constructor(id, name) {\n" +
" this.id = id;\n" +
" this.name = name;\n" +
" }\n" +
" }";
this.BaseCode.appendChild(basis);
let startC = document.createElement('p');
startC.innerHTML = "let Quiz = [";
for (let i = 0; i < this.count; i++) {
let code = document.createElement('p');
let output = "new QuizPart('" + document.getElementById('question' + i).value + "', [";
let answers = document.querySelectorAll("input#Name" + i)
console.log(answers.length);
for (let y = 0; y < answers.length; y++) {
output += "new ChosenAnswer('" + document.getElementById('id' + i).value + "', '" + document.getElementById('Name' + i).value + "'),"
}
output += "], '" + document.getElementById('prefix' + i).value + "',";
output += "'" + document.getElementById('description' + i).value + "',";
code.innerHTML = output;
this.arrayCode.appendChild(code);
}
let endC = document.createElement('p');
endC.innerHTML = "]"
this.startCode.appendChild(startC);
this.endCode.appendChild(endC);
// console.log(this.count.length);
}
}
NewArray = new GenerateArray();
NewArray.generateQuestionPart();
body {
margin: 0;
padding: 0;
}
.container{
height: 1000px;
width: 800px;
position: relative;
margin-top: 5px;
left: 50%;
-ms-transform: translate(-50%, 5%);
transform: translate(-50%, 5%);
}
.QPB{
width: 50px;
height: 50px;
margin-bottom: 10px;
background-color: orange;
font-size: 40px;
}
.question{
width: 100%;
height: 20px;
margin-bottom: 10px;
}
#answer{
width: 100px;
height: 35px;
margin-bottom: 50px;
}
.prefix{
width: 100%;
height: 20px;
margin-bottom: 10px;
}
.description{
width: 100%;
height: 20px;
margin-bottom: 10px;
}
.id{
position: relative;
width: 90%;
height: 20px;
margin-bottom: 10px;
margin-left: 10%;
}
.name{
position: relative;
width: 90%;
height: 20px;
margin-bottom: 20px;
margin-left: 10%;
}
.CreateArray{
width: 100px;
height: 35px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
<title>Hoi</title>
</head>
<body>
<div class="container">
<div class="create">
<button id="QuestionPartBtn" class="QPB" type="button" onclick="NewArray.generateQuestionPart()">+</button>
</div>
<div class="result">
<button id="CreateArray" class="CreateArray" type="button" onclick="NewArray.writeArray()">Create Array</button>
</div>
<div class="preCode" id="preCode"></div>
<div class="startC" id="startC"></div>
<div class="code" id="code"></div>
<div class="endC" id="endC"></div>
</div>
I created this system that makes an array with information that a user fills in in input fields.
The input fields are dynamically generated, so I use a for loop to show them all in an innerHTML that eventually creates the array.
My code:
this.answerDIV = document.createElement('div');
this.answerDIV.className = 'answerDIV' + this.count;
this.answerDIV.id = 'AnswerDivId';
this.answer = document.createElement('button');
this.answer.setAttribute('type', 'button');
this.answer.id = 'answer';
this.answer.className = 'answerN' + this.count;
this.answer.innerHTML = 'Add Answer';
this.answer.onclick = function (e) {
for (let i = 0; i < NewArray.count; i++) {
if (e.target.className.endsWith(i)) {
NewArray.id = document.createElement('input');
NewArray.id.setAttribute('type', 'text');
NewArray.id.id = 'id' + i;
NewArray.id.classList.add('id');
NewArray.id.placeholder = 'Add the ID of the answer';
NewArray.Name = document.createElement('input');
NewArray.Name.setAttribute('type', 'text');
NewArray.Name.id = 'Name' + i;
NewArray.Name.className = 'name';
NewArray.Name.placeholder = 'Add the text that is on the answer button';
// console.log(e.target.className);
document.getElementsByClassName('answerDIV' + i)[0].appendChild(NewArray.id);
document.getElementsByClassName('answerDIV' + i)[0].appendChild(NewArray.Name);
}
}
}
For loop:
for (let i = 0; i < this.count; i++) {
let code = document.createElement('p');
let output = "new QuizPart('" + document.getElementById('question' + i).value + "', [";
let answers = document.querySelectorAll("input#Name" + i)
console.log(answers.length);
for (let y = 0; y < answers.length; y++) {
output += "new ChosenAnswer('" + document.getElementById('id' + i).value + "', '" + document.getElementById('Name' + i).value + "'),"
}
output += "], '" + document.getElementById('prefix' + i).value + "',";
output += "'" + document.getElementById('description' + i).value + "',";
code.innerHTML = output;
this.arrayCode.appendChild(code);
}
The problem is with the second loop. Whenever I create 3 input fields for one question and I generate the innerHTML code it does show me all 3, except that they are all the first input field and the second and third aren't used as seen in the following screenshot:The problem
if i change i to y: Problem 2
(My FiddleJS link):https://jsfiddle.net/thijsl0705/1s98gumk/1/

I entered a,b,c then add answer, d,e then hit the plus sign and add f,g,h,i,j then create array. then hit the plus sign and add 1,2,3,4,5 and create the array and get:
let Quiz = [
let Quiz = [
new QuizPart('a', [new ChosenAnswer('d', 'e'),], 'b','c',
new QuizPart('f', [new ChosenAnswer('i', 'j'),], 'g','h',
new QuizPart('a', [new ChosenAnswer('d', 'e'),], 'b','c',
new QuizPart('f', [new ChosenAnswer('i', 'j'),], 'g','h',
new QuizPart('1', [new ChosenAnswer('4', '5'),], '2','3',
]
]
what exactly is the problem? what do you want to do? Looks like you might be missing a closing ) for each new QuizPart

Organizing buttons in div using only JavaScript

I need help with organizing this gallery to look like this:
I tried everything I know with positions (absolute and relative), bottoms, margins... but I can't seem to organize it properly.
This popup div needs to occupy 80% of page height and 80% of the page width, and images shouldn't break out of div.
I am not allowed to change HTML or to add CSS. Everything needs to be written inside the JS file.
Here is my code:
$(document).ready(function() {
var images = $('div[title ="London gallery"]').children('img').map(function() {
return $(this).attr('src')
}).get();
var description = $('div[title ="London gallery"]').children('p').map(function() {
return $(this).text();
}).get();
$('div[title ="London gallery"]').hide();
var gallery_lndn = document.createElement('button');
gallery_lndn.id = 'btn_London';
gallery_lndn.innerHTML = 'Look at the galery!';
document.body.appendChild(gallery_lndn);
document.getElementById('btn_London').onclick = function() {
show_pictures(images, description);
}
function show_pictures(images, description) {
function popUp() {
var index = 0;
var popup = document.createElement('div');
popup.className = 'popup';
popup.id = 'div_popup';
popup.style.background = "#2F4F4F";
popup.style.position = "absolute";
popup.style.top = "0px";
popup.style.left = "0px";
popup.style.right = "0px";
popup.style.margin = "100px auto";
popup.style.height = "80%";
popup.style.width = "80%";
var cancelButton = document.createElement('button');
cancelButton.innerHTML = 'x';
cancelButton.id = 'btn_cancelButton';
cancelButton.style.background = "red";
cancelButton.style.border = "none";
cancelButton.style.display = "inline-block";
cancelButton.style.fontSize = "16px";
cancelButton.style.padding = "15px 20px";
cancelButton.style.float = "right";
cancelButton.style.top = "0";
cancelButton.onclick = function(e) {
popup.parentNode.removeChild(popup)
};
var previousButton = document.createElement('button');
previousButton.innerHTML = '<<';
previousButton.style.background = "#32CD32";
previousButton.style.border = "none";
previousButton.style.display = "inline-block";
previousButton.style.fontSize = "16px";
previousButton.style.padding = "15px 32px";
previousButton.style.position = "absolute";
previousButton.style.float = "left";
previousButton.style.bottom = "0";
previousButton.onclick = function() {
index = (index == 0) ? images.length - 1 : index - 1;
console.log(index);
updateImage();
}
var nextButton = document.createElement('button');
nextButton.innerHTML = '>>';
nextButton.style.background = "#32CD32";
nextButton.style.background = "#32CD32";
nextButton.style.border = "none";
nextButton.style.display = "inline-block";
nextButton.style.fontSize = "16px";
nextButton.style.padding = "15px 32px";
//nextButton.style.position = "absolute";
nextButton.style.float = "right";
nextButton.style.bottom = "0";
nextButton.onclick = function() {
index = (index == images.length - 1) ? 0 : index + 1;
console.log(index);
updateImage();
}
function updateImage() {
var img = new Image();
img.src = images[index];
img.style.margin = "auto";
img.style.position = "relative";
img.style.display = "block";
console.log(img);
$("#div_popup").html("");
if (index == 0) {
previousButton.style.background = "#A9A9A9";
//previousButton.disabled = "true";
} else if (index == images.length - 1) {
nextButton.style.background = "#A9A9A9";
//nextButton.disabled = "true";
} else {
//nextButton.disabled = "false";
//previousButton.disabled = "false";
previousButton.style.background = "#32CD32";
nextButton.style.background = "#32CD32";
}
popup.appendChild(previousButton);
popup.appendChild(nextButton);
popup.appendChild(cancelButton);
var message = document.createElement('span');
//message.style.position = "absolute";
message.style.bottom = "0";
message.innerHTML = "Picture " + (index + 1) + "/" + images.length + "<br>" + description[index];
img.onload = function() {
popup.appendChild(message);
popup.appendChild(img);
document.body.appendChild(popup);
};
}
updateImage();
}
popUp();
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="gallery.js"></script>
</head>
<body>
<h1>London</h1>
<div class="gallery" title="London gallery">
<img src="https://cdn.londonandpartners.com/visit/general-london/areas/river/76709-640x360-houses-of-parliament-and-london-eye-on-thames-from-above-640.jpg">
<p data-target="https://cdn.londonandpartners.com/visit/general-london/areas/river/76709-640x360-houses-of-parliament-and-london-eye-on-thames-from-above-640.jpg">
Description 1.
</p>
<img src="https://news.itu.int/wp-content/uploads/2018/07/london-min-e1530887248858.jpg">
<p data-target="https://news.itu.int/wp-content/uploads/2018/07/london-min-e1530887248858.jpg">
Description 2.
</p>
</div>
</body>
</html>

You can update the button positions according to the image. Call below method inside the updateImage method just before closing.
function updatePositions(){
// absolute position for all buttons
$('#div_popup > button').css({'position': 'absolute', 'float':'none', 'z-index': 1});
// get image bottom position
let buttonTopPos = ($('#div_popup > img').offset().top + $('#div_popup > img').height()) - $('#div_popup').offset().top + 20;
// get image bottom left position
let buttonLeftPos = 0;
if($('#div_popup').width() > $('#div_popup > img').width()){
buttonLeftPos = ($('#div_popup').width() - $('#div_popup > img').width())/2
}else{
$('#div_popup > img').css({'min-width':'100%', 'max-width':'100%'});
}
// image overflow will be hidden
$('#div_popup').css('overflow', 'hidden');
// Back button position
$('#div_popup > button:nth-child(1)').css({'top': buttonTopPos, 'bottom':'auto', 'left': buttonLeftPos +'px'})
// Next button position
$('#div_popup > button:nth-child(2)').css({'top': buttonTopPos, 'bottom':'auto', 'left': (buttonLeftPos + $('#div_popup > img').width()) - 90})
// cancel button position
$('#div_popup > button:nth-child(3)').css({'top': 0, 'right': 0, left: 'auto'});
// description position
$('#div_popup > span').css({'position': 'absolute','top': buttonTopPos, 'bottom':'auto', 'left': buttonLeftPos + 90, 'width': $('#div_popup > img').width() - 90 - 90, 'text-align': 'center'})
}

Here's a layout that approximates the sample, above. For convenience, this uses JavaScript to add a <style> element to the <head>.
window.onload = () => {
const myCSS =
' body {\n' +
' width:100vw;\n' +
' height:100vh;\n' +
' position:relative\n' +
' }\n' +
' .gallery {\n' +
' background-color: darkblue;\n' +
' width: 80%;\n' +
' height: 80%;\n' +
' position: absolute;\n' +
' top: 10%;\n' +
' left: 10%;\n' +
' }\n' +
' .img-wrapper {\n' +
' background-color: transparent;\n' +
' width: calc(100% - 120px);\n' +
' height: calc(100% - 160px);\n' +
' margin: 60px;\n' +
' overflow-y: hidden;\n' +
' }\n' +
' .img-wrapper img {\n' +
' width: 100%;\n' +
' height: auto;\n' +
' }\n' +
' .btn1 {\n' +
' width: 120px;\n' +
' height: 60px;\n' +
' position: absolute;\n' +
' left: 60px;\n' +
' bottom: 30px;\n' +
' background-color: #999;\n' +
' }\n' +
' .btn2 {\n' +
' width: 120px;\n' +
' height: 60px;\n' +
' position: absolute;\n' +
' right: 60px;\n' +
' bottom: 30px;\n' +
' background-color: #999;\n' +
' }\n' +
' .btn-close {\n' +
' width: 80px;\n' +
' height: 40px;\n' +
' position: absolute;\n' +
' right: 0;\n' +
' top: 0;\n' +
' background-color: #999;\n' +
' }\n' +
' .caption {\n' +
' width: calc(100% - 409px);\n' +
' height: 60px;\n' +
' position: absolute;\n' +
' left: 192px;\n' +
' bottom: 30px;\n' +
' color: white;\n' +
' border: 1px dashed #aaa;\n' +
' text-align: center;\n' +
' padding: 0 12px;\n' +
' overflow: hidden;\n' +
' }\n';
const myStyle = document.createElement('style');
myStyle.id = 'myCSS';
myStyle.innerHTML = myCSS;
document.head.appendChild(myStyle);
}
<body>
<div class="gallery">
<div class="img-wrapper">
<img src="https://cdn.londonandpartners.com/visit/general-london/areas/river/76709-640x360-houses-of-parliament-and-london-eye-on-thames-from-above-640.jpg">
</div>
<div class="btn1">.btn1</div>
<div class="btn2">.btn2</div>
<div class="caption">.caption</div>
<div class="btn-close">.btn-close</div>
</div>
</body>

make tooltip work only in class not in title attribute

This codes does what i want but by default everywhere on my website where there is title attribute it changes the style which i do not want.
I want it to work in just some places where i assign it.
could someone show me how to?
the css
#tooltip {
background: #C7100C;
color:#fff;
padding: 3px 10px;
width:20%;
white-space: pre-line;
}
Here is the js
(function () {
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e) {
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css({
position: "absolute", top: ntop, left: nleft
}).show();
};
$(document).on("mouseenter", "*[title]", function (e) {
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("title").addClass(CLS_ON);
$("<div id='" + ID + "' />").appendTo("body");
showAt(e);
});
$(document).on("mouseleave", "." + CLS_ON, function (e) {
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
});
if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());

Just replace "*[title]" with something like ".make-tooltip" and assign this class to elements you want to have that tooltip.
This way you don't target all elements which have a title, but only those elements, which have the .make-tooltip class.
(function () {
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e) {
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css({
position: "absolute", top: ntop, left: nleft
}).show();
};
$(document).on("mouseenter", ".make-tooltip", function (e) {
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("title").addClass(CLS_ON);
$("<div id='" + ID + "' />").appendTo("body");
showAt(e);
});
$(document).on("mouseleave", "." + CLS_ON, function (e) {
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
});
if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());
#tooltip {
background: #C7100C;
color:#fff;
padding: 3px 10px;
width:20%;
white-space: pre-line;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I'm a link<br>
I'm a link<br>
I'm a link<br>
I'm a link<br>
I'm a link<br>

jQuery modal window closes incorrectly in Internet Explorer

I'm having some problems regarding a jQuery modal window. I'm a dba and SQL programmer and my goal is to build up a query which dynamically builds an HTML which contains a flash which links to a modal window that has another flash in it. Well the query is done and works flawlessly. However, I tried it on Internet Explorer and (unlike firefox and chrome) when you want to close the modal window it closes the whole browser window (with a warning message that says "beware, the browser's trying to close this tab etc").
I used an already existing jquery modal window code and styling (I believe that both matter). The problem is, that the whole query is done and if I change the whole jquery modal window, I'll have to change the query's logic, and drastically (believe me, I've checked).
So, my fastest solution would be to correct the jQuery code that is messing up the whole close thing (changing the sql stored proc would take a LOT of work). This is because the original example I used as a reference had this problem (I just didn't notice, due to jQuery supposively being a cross-browser solution for everything). You will see that it works flawlessly on FF and Chrome but not in IE
Here's the link: http://www.mediafire.com/?mcz70n870qmjch9
Thanks a lot!!!
Just in case I'm posting the code here as well:
/// <reference path="jquery-1.3.2.min-vsdoc.js" />
/************************************************************************************************************
* SIMPLE MODAL v 2.0
* © 2009 FISHBOWL MEDIA LLC
* http://fishbowlmedia.com
***********************************************************************************************************/
(function ($) {
/**********************************
* CUSTOMIZE THE DEFAULT SETTINGS
* Ex:
* var _settings = {
* id: 'modal',
* src: function(sender){
* return jQuery(sender).attr('href');
* },
* width: 800,
* height: 600
* }
**********************************/
var _settings = {
width: 800, // Use this value if not set in CSS or HTML
height: 600, // Use this value if not set in CSS or HTML
overlayOpacity: .85, // Use this value if not set in CSS or HTML
id: 'modal',
src: function (sender) {
return jQuery(sender).attr('href');
},
fadeInSpeed: 0,
fadeOutSpeed: 0
}
/**********************************
* DO NOT CUSTOMIZE BELOW THIS LINE
**********************************/
$.modal = function (options) {
return _modal(this, options);
}
$.modal.open = function () {
_modal.open();
}
$.modal.close = function () {
_modal.close();
}
$.fn.modal = function (options) {
return _modal(this, options);
}
_modal = function (sender, params) {
this.options = {
parent: null,
overlayOpacity: null,
id: null,
content: null,
width: null,
height: null,
modalClassName: null,
imageClassName: null,
closeClassName: null,
overlayClassName: null,
src: null
}
this.options = $.extend({}, options, _defaults);
this.options = $.extend({}, options, _settings);
this.options = $.extend({}, options, params);
this.close = function () {
jQuery('.' + options.modalClassName + ', .' + options.overlayClassName).fadeOut(_settings.fadeOutSpeed, function () { jQuery(this).unbind().remove(); });
}
this.open = function () {
if (typeof options.src == 'function') {
options.src = options.src(sender)
} else {
options.src = options.src || _defaults.src(sender);
}
var fileExt = /^.+\.((jpg)|(gif)|(jpeg)|(png)|(jpg))$/i;
var contentHTML = '';
if (fileExt.test(options.src)) {
contentHTML = '<div class="' + options.imageClassName + '"><img src="' + options.src + '"/></div>';
} else {
contentHTML = '<iframe width="' + options.width + '" height="' + options.height + '" frameborder="0" scrolling="no" allowtransparency="true" src="' + options.src + '">&lt/iframe>';
}
options.content = options.content || contentHTML;
if (jQuery('.' + options.modalClassName).length && jQuery('.' + options.overlayClassName).length) {
jQuery('.' + options.modalClassName).html(options.content);
} else {
$overlay = jQuery((_isIE6()) ? '<iframe src="BLOCKED SCRIPT\'<html></html>\';" scrolling="no" frameborder="0" class="' + options.overlayClassName + '"></iframe><div class="' + options.overlayClassName + '"></div>' : '<div class="' + options.overlayClassName + '"></div>');
$overlay.hide().appendTo(options.parent);
$modal = jQuery('<div id="' + options.id + '" class="' + options.modalClassName + '" style="width:' + options.width + 'px; height:' + options.height + 'px; margin-top:-' + (options.height / 2) + 'px; margin-left:-' + (options.width / 2) + 'px;">' + options.content + '</div>');
$modal.hide().appendTo(options.parent);
$close = jQuery('<a class="' + options.closeClassName + '"></a>');
$close.appendTo($modal);
var overlayOpacity = _getOpacity($overlay.not('iframe')) || options.overlayOpacity;
$overlay.fadeTo(0, 0).show().not('iframe').fadeTo(_settings.fadeInSpeed, overlayOpacity);
$modal.fadeIn(_settings.fadeInSpeed);
$close.click(function () { jQuery.modal().close(); });
$overlay.click(function () { jQuery.modal().close(); });
}
}
return this;
}
_isIE6 = function () {
if (document.all && document.getElementById) {
if (document.compatMode && !window.XMLHttpRequest) {
return true;
}
}
return false;
}
_getOpacity = function (sender) {
$sender = jQuery(sender);
opacity = $sender.css('opacity');
filter = $sender.css('filter');
if (filter.indexOf("opacity=") >= 0) {
return parseFloat(filter.match(/opacity=([^)]*)/)[1]) / 100;
}
else if (opacity != '') {
return opacity;
}
return '';
}
_defaults = {
parent: 'body',
overlayOpacity: 85,
id: 'modal',
content: null,
width: 800,
height: 600,
modalClassName: 'modal-window',
imageClassName: 'modal-image',
closeClassName: 'close-window',
overlayClassName: 'modal-overlay',
src: function (sender) {
return jQuery(sender).attr('href');
}
}
})(jQuery);
And the style:
.modal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #131313;
opacity: .85;
filter: alpha(opacity=85);
z-index: 101;
}
.modal-window {
position: fixed;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
z-index: 102;
background: #fff;
border: solid 8px #000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.close-window {
position: absolute;
width: 47px;
height: 47px;
right: -23px;
top: -23px;
background: transparent url(../images/close-button.png) no-repeat scroll right top;
text-indent: -99999px;
overflow: hidden;
cursor: pointer;
}
Thanks a ton in advance everyone =-)
EDIT: Daniele suggested that the problem might be on this line:
jQuery('.' + options.modalClassName + ', .' + options.overlayClassName).fadeOut(_settings.fadeOutSpeed, function () { jQuery(this).unbind().remove(); });
I did what he suggested and the result was this: It still doesn't work at all on IE (meaning that it still asks to close the whole window and not just the modal), and correctly shows and closes a first modal in FF and chrome, but after closing the first one its not able to correctly show another one.

Replace close() method of modal with closeModal or something similar:
$.modal.closeModal = function () {
_modal.closeModal();
}
[...]
this.closeModal = function () {
jQuery('.' + options.modalClassName + ', .' + options.overlayClassName).fadeOut(_settings.fadeOutSpeed, function () { jQuery(this).unbind().remove(); });
}
[...]
$close.click(function () { jQuery.modal().closeModal(); });
$overlay.click(function () { jQuery.modal().closeModal(); });
for me it works...

Snow until the end of the page

I have a script of snow for the site, I took it from this site. As you can see, the snow does not go the bottom of the page. How can I make it go to the bottom?
Source code:
var SNOW_Time;
var SNOW_dx, SNOW_xp, SNOW_yp;
var SNOW_am, SNOW_stx, SNOW_sty;
var i, SNOW_Browser_Width = $(document).width(), SNOW_Browser_Height = $(document).height();
SNOW_dx = new Array();
SNOW_xp = new Array();
SNOW_yp = new Array();
SNOW_am = new Array();
SNOW_stx = new Array();
SNOW_sty = new Array();
for (i = 0; i < SNOW_no; ++i) {
SNOW_dx[i] = 0;
SNOW_xp[i] = Math.random() * (SNOW_Browser_Width - 50);
SNOW_yp[i] = Math.random() * SNOW_Browser_Height;
SNOW_am[i] = Math.random() * 20;
SNOW_stx[i] = 0.02 + Math.random() / 10;
SNOW_sty[i] = 0.7 + Math.random();
if (i == 0) document.write("<\div id=\"SNOW_flake" + i + "\" style=\"position: absolute; z-index: " + i + "; visibility: visible; top: 15px; left: 15px; width: " + SNOW_Width + "; height: " + SNOW_Height + "; background: url('" + SNOW_Picture + "') no-repeat;\"><\/div>");
else document.write("<\div id=\"SNOW_flake" + i + "\" style=\"position: absolute; z-index: " + i + "; visibility: visible; top: 15px; left: 15px; width: " + SNOW_Width + "; height: " + SNOW_Height + "; background: url('" + SNOW_Picture + "') no-repeat;\"><\/div>");
}
function SNOW_Weather() {
for (i = 0; i < SNOW_no; ++i) {
SNOW_yp[i] += SNOW_sty[i];
if (SNOW_yp[i] > SNOW_Browser_Height) {
SNOW_xp[i] = Math.random() * (SNOW_Browser_Width - SNOW_am[i] - 30);
SNOW_yp[i] = 0;
SNOW_stx[i] = 0.02 + Math.random() / 10;
SNOW_sty[i] = 0.7 + Math.random();
}
SNOW_dx[i] += SNOW_stx[i];
document.getElementById("SNOW_flake" + i).style.top = SNOW_yp[i] + "px";
document.getElementById("SNOW_flake" + i).style.left = SNOW_xp[i] + SNOW_am[i] * Math.sin(SNOW_dx[i]) + "px";
}
SNOW_Time = setTimeout("SNOW_Weather()", 10);
}
SNOW_Weather();

It looks like it's determined by the variable SNOW_Browser_Height. $(document).height() doesn't return the proper height. You could use this instead:
document.body.getClientRects()[0].height