koc koc - 1 month ago 9
jQuery Question

Transfer JavaScript to jquery not working

I collect a script to display facebook type multiply chat box. In this JavaScript code I used a Iframe to load chat page. But now a want to avoid iframe, and I am not enough knowledge about JavaScript.

So have any way to load my chat page by JavaScript for this script. OR if I transfer this script at jquery where is my problem below please?

JavaScript :

function register_popup(id, name, cmd, pmd)
{
for(var iii = 0; iii < popups.length; iii++)
{
//already registered. Bring it to front.
if(id == popups[iii])
{
Array.remove(popups, iii);
popups.unshift(id);
calculate_popups();
return;
}
}
var element = '<div class="popup-box chat-popup cy'+id+'" id="'+ id +'">';
//if avoid iframe how to load chat page
element = element + '<div class="popup-messages"><iframe src="../chat.php?u='+ cmd +'" frameborder="0" id="iFrame1" name="CmainFrame" width="100%" height="249" style="overflow:hidden" class="if'+ cmd +'"></div></div>';
document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
popups.unshift(id);
calculate_popups();
}

function calculate_popups()
{
var width = window.innerWidth;
if(width < 540)
{
total_popups = 0;
}
else
{
width = width - 200;
//320 is width of a single popup box
total_popups = parseInt(width/320);
}
display_popups();
}

function display_popups()
{
var right = 220;
var iii = 0;
for(iii; iii < total_popups; iii++)
{
if(popups[iii] != undefined)
{
var element = document.getElementById(popups[iii]);
element.style.right = right + "px";
right = right + 320;
element.style.display = "block";
}
}
for(var jjj = iii; jjj < popups.length; jjj++)
{
var element = document.getElementById(popups[jjj]);
element.style.display = "none";
}
}
//recalculate when window is loaded and also when window is resized.
window.addEventListener("resize", calculate_popups);
window.addEventListener("load", calculate_popups);

//this function can remove a array element.
Array.remove = function(array, from, to) {
var rest = array.slice((to || from) + 1 || array.length);
array.length = from < 0 ? array.length + from : from;
return array.push.apply(array, rest);
};


Tried as jquery:

function register_popup(id, name, cmd, pmd)
{
for(var iii = 0; iii < popups.length; iii++)
{
//already registered. Bring it to front.
if(id == popups[iii])
{
Array.remove(popups, iii);
popups.unshift(id);
calculate_popups(); //alert(popups(id));
return;
}
}
$("<div></div>").attr('id',id).append('<div class="popup-box chat-popup cy'+id+'" id="'+ id +'"><div class="popup-messages"><div id="iFrame1" name="CmainFrame" width="100%" height="249" style="overflow:hidden" class="if'+ cmd +'"><object type="text/html" data="../chat.php?u='+ cmd +'"></div></div></div>');
popups.unshift(id);
calculate_popups();
}

function display_popups()
{
var right = 220;
var iii = 0;
for(iii; iii < total_popups; iii++)
{
if(popups[iii] != undefined)
{
right = 220 + 320;
$("#"+popups[iii]).css({"display": "block", "right": "right"}).show();
}
}
for(var jjj = iii; jjj < popups.length; jjj++)
{
$("#"+popups[jjj]).css("display", "none");
}
}
//others function remain same

Answer

I didn't closely analyse your code, but I did notice this:

$("<div></div>").attr('id',id).append('<div class="popup-box chat-popup cy'+id+'" id="'+ id +'"><div class="popup-messages"><div id="iFrame1" name="CmainFrame" width="100%" height="249" style="overflow:hidden" class="if'+ cmd +'"><object type="text/html" data="../Cchat.php?u='+ cmd +'"></div></div></div>');

I don't know what you think that is going to do, but what it does do is create a div, assign it an id, give some children, and then throw the whole thing away. Did you want to insert it somewhere?

Edit:

For example, you could write:

$("body").append('<div class="popup-box chat-popup cy'+id+'"...

(Find the body and insert in the new div at its bottom.)

or

$("#" + id).append('<div class="popup-box chat-popup cy'+id+'"...

(Find the existing div with the given ID append the new div to it.)

Comments