Greetings,
I have a form that contains some <select> menus. In order to have better control over the look of these menus I have added a script that hides each <select> element and builds a custom menu via DOM scripting based on the options contained within the select.
I thought everything was working fine until we moved the code into our production environment, which uses SSL/https. But when the code is executed on 1 or more <select> elements, the browser gives the "This page contains both secure and non-secure items..." message. I do not notice any difference in how the page when I click Yes to display the nonsecure items versus clicking No.
For the life of me, I can't figure out why the script would cause this error but it only happens when 1 or more <select>s are manipulated. I was hoping someone might take a look and see if they can shed some light on this issue.
Here is the script:
Code:
// <![CDATA[
function selectReplacement(obj, zIndex) {
obj.className += ' replaced';
obj.parentNode.style.position = "relative";
obj.parentNode.style.zIndex = zIndex;
var ul = document.createElement('ul');
ul.className = 'selectReplacement';
ul.style.zIndex = zIndex;
ul.id = 'ul' + zIndex.toString();
var opts = obj.options;
for (var i=0; i<opts.length; i++) {
var selectedOpt;
if (opts[i].selected) {
selectedOpt = i;
break;
} else {
selectedOpt = 0;
}
}
//var iframe = document.createElement('iframe');
var height_ul = opts.length*12 < 200 ? opts.length*12 : 200;
for (var i=0; i<opts.length; i++) {
var li = document.createElement('li');
var txt = document.createTextNode(opts[i].text);
li.appendChild(txt);
li.selIndex = opts[i].index;
li.selectID = obj.id;
li.onclick = function() {
setIframeHeight(this.parentNode.id, 12);
selectMe(this);
}
if (i == selectedOpt) {
li.className = 'selected';
li.onclick = function() {
setIframeHeight(this.parentNode.id, height_ul);
this.parentNode.className += ' selectOpen';
this.onclick = function() {
setIframeHeight(this.parentNode.id, 12);
selectMe(this);
}
}
}
if (window.attachEvent) {
li.onmouseover = function() {
this.className += ' hover';
}
li.onmouseout = function() {
this.className =
this.className.replace(new RegExp(" hover\\b"), '');
}
}
ul.appendChild(li);
}
var identifier = "iframe" + zIndex.toString();
var zIndex_iframe = zIndex-1;
var html_iframe = '<iframe id="' + identifier + '" style="display: block; top: 0px; left: 0px; position: absolute; width: 200px; height: 12px; z-index: ' + zIndex_iframe + '" frameborder="no" scrolling="no"></iframe>';
obj.parentNode.insertBefore(ul,obj);
obj.parentNode.insertAdjacentHTML('beforeEnd', html_iframe);
}
function selectMe(obj) {
var lis = obj.parentNode.getElementsByTagName('li');
var height_ul = lis.length*12 < 200 ? lis.length*12 : 200;
for (var i=0; i<lis.length; i++) {
if (lis[i] != obj) {
lis[i].className='';
lis[i].onclick = function() {
setIframeHeight(this.parentNode.id, 12);
selectMe(this);
}
} else {
setVal(obj.selectID, obj.selIndex);
obj.className='selected';
obj.parentNode.className =
obj.parentNode.className.replace(new RegExp(" selectOpen\\b"), '');
obj.onclick = function() {
setIframeHeight(this.parentNode.id, height_ul);
obj.parentNode.className += ' selectOpen';
this.onclick = function() {
setIframeHeight(this.parentNode.id, 12);
selectMe(this);
}
}
}
}
}
function setIframeHeight(ref, height)
{
//alert('setIframeHeight');
var oUl = $(ref);
var oIframe = $('iframe' + oUl.style.zIndex);
oIframe.style.height = height + 'px';
}
function setVal(objID, selIndex) {
var obj = document.getElementById(objID);
obj.selectedIndex = selIndex;
}
function setForm() {
var s = document.getElementsByTagName('select');
for (var i=0; i<s.length; i++) {
if(s[i].className.indexOf("replaceme") != -1)
{
var zIndex = 100-(i-1);
selectReplacement(s[i], zIndex);
}
}
}
/*
window.onload = function() {
(document.all && !window.print) ? null : setForm();
}
*/
function addEvent( obj, type, fn ) {
if (obj.addEventListener) {
obj.addEventListener( type, fn, false );
EventCache.add(obj, type, fn);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
EventCache.add(obj, type, fn);
}
else {
obj["on"+type] = obj["e"+type+fn];
}
}
var EventCache = function(){
var listEvents = [];
return {
listEvents : listEvents,
add : function(node, sEventName, fHandler){
listEvents.push(arguments);
},
flush : function(){
var i, item;
for(i = listEvents.length - 1; i >= 0; i = i - 1){
item = listEvents[i];
if(item[0].removeEventListener){
item[0].removeEventListener(item[1], item[2], item[3]);
};
if(item[1].substring(0, 2) != "on"){
item[1] = "on" + item[1];
};
if(item[0].detachEvent){
item[0].detachEvent(item[1], item[2]);
};
item[0][item[1]] = null;
};
}
};
}();
addEvent(window,'load',setForm);
addEvent(window,'unload',EventCache.flush);
// ]]>
It is the setForm() function that is being called on the page's onLoad event.
And here is the CSS in case you think that the image being used may have something to do with it.
Code:
select.replaceme {
display: block;
}
select.replaced {
display: none;
}
ul.selectReplacement {
/*
background: url(top.jpg) top left no-repeat;
*/
margin: 0;
padding: 0;
/*
height: 1.65em;
height: auto;
*/
width: 200px;
background: #fff;
color: #000;
position: absolute;
top: 0px;
left: 0px;
overflow: auto;
border: 1px solid #ccc;
background: url(/reference/images/downarrow.gif) top right no-repeat;
background-color: #fff;
max-height: 200px;
}
* html ul.selectReplacement {
height: expression( this.scrollHeight > 200 ? "200px" : "auto" );
overflow: hidden;
overflow-y: auto;
}
ul.selectReplacement li {
/*
background: #cf5a5a;
color: #fff;
*/
color: #000;
cursor: pointer;
display: none;
font-size: 11px;
line-height: 1.2em;
list-style: none;
margin: 0;
padding: 2px 12px 2px 5px;
border-top: 1px solid #fff;
width: 180px;
/*
*/
}
ul.selectOpen li {
display: block;
}
ul.selectReplacement li.selected {
/*
background: url(bottom.gif) bottom left no-repeat;
*/
display: block;
height: 12px;
overflow: hidden;
}
ul.selectOpen li.selected {
background: #0a246a;
display: block;
height: auto;
color: #fff;
}
ul.selectOpen li:hover,
ul.selectOpen li.hover,
ul.selectOpen li.selected:hover {
background: #0a246a;
color: #fff;
}
Let me know if I can provide any further info. And again any help will be a life saver.
DOM scripting potentially causing issues with SSL
