vaistik
07-30-2008, 04:40 AM
Greetings, I'd like to express my gratitude to this community as I have found help in these threads many times before despite the fact that I just registered today.
I'm having issues with IE7 and a JS function and I can't think of anything that my cause them.
This is a design that works as a link. It's actually 3 divs that are used for different things.
<!-- third bubble start -->
<div id="ProjectContent3" style="position:absolute; top:495px; left:332px; width:10px; height:10px; overflow:hidden;"><img src="site_images/gynaikologos-tambakis.png" height="100%" width="100%" alt="www.gynaikologos-tambakis.gr" /></div>
<div id="ProjectBubble2" onmouseover="ChangeBubble(2)" style="position:absolute; top:497px; left:334px; width:10px; height:10px;"><img src="site_images/LCB.png" height="100%" width="100%" /></div>
<a href="http://www.gynaikologos-tambakis.gr" border="0" target="_blank"><div id="triger2" style="position:absolute; top:408px; left:302px; width:155px; height:120px;"></div>
</a>
<!-- third bubble end -->
The ChangeBubble(x) function is activated on the mouseover of the larger (ProjectBubble2) div and on the mouseover of the trigger (misspelled, I know :p) div it changes the background of the larger one.
The function:
function ChangeBubble (x)
{
var _ProjectBubble = document.getElementById('ProjectBubble' + x);
var _triger = document.getElementById('triger' + x);
_triger.onmouseover = function ()
{
_ProjectBubble.innerHTML = '<img src=\"site_images/LCBO.png\" height=\"100%\" width=\"100%\" />';
}
_triger.onmouseout = function ()
{
_ProjectBubble.innerHTML = '<img src=\"site_images/LCB.png\" height=\"100%\" width=\"100%\" />';
}
}
On IE7, the trigger div just doesn't exist...
If the function is called, it's gone. So the link is not working and of course the function isn't working either.
This the actual web page:
http://www.blowfish.gr/projectsEN.html
That's one problem, the other one is that on a mac the functions that expand the bubbles are running surprisingly slow. Like on this (http://www.blowfish.gr/aboutEN.html) page for example, runs great on win(FF, Opera, IE (apart from the above issues)) and Linux but on OSX (Safari, Opera, (fine on FF!)) is sloooooow.
This is the whole page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" Expand your business on the internet! Web design and developing from the expert in expanding, Bob the Blowfish! Affordable web solutions for small business and personal usage." />
<meta name="keywords" content="web design, web developing, web page, sites, site creation, html, javascript, php, ιστοσελίδες, σχεδίαση ιστοσελίδας, greece" />
<title>Blowfish - Web Solutions</title>
<link rel="stylesheet" type="text/css" href="blowfish.css" />
<script language="javascript" src="blowfish.js">
</script>
</head>
<body class="oneColFixCtr" onload="the_timeout=setTimeout('moveBubble();',100); the_timeout=setTimeout('moveContent();',100); the_timeout=setTimeout('moveSmallBubble();',100); the_timeout=setTimeout('moveSmallContent();',100); ChangeDescription(5); return false;">
<div id="container">
<div id="mainContent">
<a href="about.html"><div id="GR" class="GR"></div></a>
<div id="EN" class="EN"></div>
<div id="Bubble" style="position:absolute; top:670px; left:350px; width:0px; height:0px;"><img src="site_images/LCB.png" height="100%" width="100%" ></div><div id="Content" class="Content" style="position:absolute; top:670px; left:350px; width:0px; height:0px;">Are you looking for a way to increase your business' customers? Do you want to express your thoughts and opinions on an international information network? Let Bob the Blowfish help you "expand" in the "sea" of the internet.<br /><br />At the end of 2007 there were more than 1.000.000 active broadband connections in Greece and their numbers are on a constant increase. A business' web page is one of the most important factors in the advertisement plan, a web page becomes the showcase of the business on the internet community. With a web page you can have a permanent add at a low cost, compared to the other forms of media, and the ability to manage it yourself!<br /><br />Tens of thousands internet users maintain their own blog (over 12 thousand Wordpress users in 2008) or their personal web page. Blogs, social networking, forums and online communities can justify the characterization of the internet as the most important mean of communication today.<br /><br />If you are looking to advertise or just to be represented on the internet, the Blowfish can help you keeping the cost low, the delivery fast and the professionalism high. We're waiting to hear about your needs! </div>
<div id="SmallBubble" style="position:absolute; top:388px; left:797px; width:10px; height:10px;"><img src="site_images/LCB.png" height="100%" width="100%" ></div>
<div id="SmallContent" class="Content" style="position:absolute; top:388px; left:797px; width:0px; height:0px;"><h3>About us</h3>Meet Bob the Blowfish, learn how he can help you expand.</div>
<div class="Logo"></div>
<div class="ButtonBubble" style="top:643px; left:648px;" onmouseover="this.style.top='633px'; this.style.left='638px';" onmouseout="this.style.top='643px'; this.style.left='648px'"><a href="aboutEN.html"><div id="About" class="About"></div></a></div>
<div class="ButtonBubble" style="top:519px; left:708px;" onmouseover="this.style.top='509px'; this.style.left='698px';" onmouseout="this.style.top='519px'; this.style.left='708px'"><a href="projectsEN.html"><div id="Projects" class="Projects"></div></a></div>
<div class="ButtonBubble" style="top:516px; left:837px;" onmouseover="this.style.top='506px'; this.style.left='837px';" onmouseout="this.style.top='516px'; this.style.left='837px'"><a href="linksEN.html"><div id="Links" class="Links"></div></a></div>
<div class="ButtonBubble" style="top:618px; left:909px;" onmouseover="this.style.top='608px'; this.style.left='919px';" onmouseout="this.style.top='618px'; this.style.left='909px'"><a href="contactEN.html"><div id="Contact" class="Contact"></div></a></div>
<!-- end #mainContent -->
</div>
<!-- end #container --></div>
</body>
</html>
And this is one of the functions, the others are almost identical.
function moveBubble()
{
var the_Bubble = getStyleObject("Bubble");
if (the_Bubble)
{
var current_left = parseInt(the_Bubble.left);
var new_left = current_left - 4;
var current_width = parseInt(the_Bubble.width);
var new_width = current_width + 10;
var current_top = parseInt(the_Bubble.top);
var new_top = current_top - 8;
var current_height = parseInt(the_Bubble.height);
var new_height = current_height + 10;
if (document.layers)
{
the_Bubble.left = new_left;
the_Bubble.width = new_width;
the_Bubble.top = new_top;
the_Bubble.height = new_height;
}
else
{
the_Bubble.left = new_left + "px";
the_Bubble.width = new_width + "px";
the_Bubble.top = new_top + "px";
the_Bubble.height = new_height + "px";
}
if (new_width < 700)
{
the_timeout = setTimeout('moveBubble();',10);
}
}
}
I'm all out of ideas as to why these issues are happening. Any fresh looks/ideas would be a huge help.
Cheers!
I'm having issues with IE7 and a JS function and I can't think of anything that my cause them.
This is a design that works as a link. It's actually 3 divs that are used for different things.
<!-- third bubble start -->
<div id="ProjectContent3" style="position:absolute; top:495px; left:332px; width:10px; height:10px; overflow:hidden;"><img src="site_images/gynaikologos-tambakis.png" height="100%" width="100%" alt="www.gynaikologos-tambakis.gr" /></div>
<div id="ProjectBubble2" onmouseover="ChangeBubble(2)" style="position:absolute; top:497px; left:334px; width:10px; height:10px;"><img src="site_images/LCB.png" height="100%" width="100%" /></div>
<a href="http://www.gynaikologos-tambakis.gr" border="0" target="_blank"><div id="triger2" style="position:absolute; top:408px; left:302px; width:155px; height:120px;"></div>
</a>
<!-- third bubble end -->
The ChangeBubble(x) function is activated on the mouseover of the larger (ProjectBubble2) div and on the mouseover of the trigger (misspelled, I know :p) div it changes the background of the larger one.
The function:
function ChangeBubble (x)
{
var _ProjectBubble = document.getElementById('ProjectBubble' + x);
var _triger = document.getElementById('triger' + x);
_triger.onmouseover = function ()
{
_ProjectBubble.innerHTML = '<img src=\"site_images/LCBO.png\" height=\"100%\" width=\"100%\" />';
}
_triger.onmouseout = function ()
{
_ProjectBubble.innerHTML = '<img src=\"site_images/LCB.png\" height=\"100%\" width=\"100%\" />';
}
}
On IE7, the trigger div just doesn't exist...
If the function is called, it's gone. So the link is not working and of course the function isn't working either.
This the actual web page:
http://www.blowfish.gr/projectsEN.html
That's one problem, the other one is that on a mac the functions that expand the bubbles are running surprisingly slow. Like on this (http://www.blowfish.gr/aboutEN.html) page for example, runs great on win(FF, Opera, IE (apart from the above issues)) and Linux but on OSX (Safari, Opera, (fine on FF!)) is sloooooow.
This is the whole page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" Expand your business on the internet! Web design and developing from the expert in expanding, Bob the Blowfish! Affordable web solutions for small business and personal usage." />
<meta name="keywords" content="web design, web developing, web page, sites, site creation, html, javascript, php, ιστοσελίδες, σχεδίαση ιστοσελίδας, greece" />
<title>Blowfish - Web Solutions</title>
<link rel="stylesheet" type="text/css" href="blowfish.css" />
<script language="javascript" src="blowfish.js">
</script>
</head>
<body class="oneColFixCtr" onload="the_timeout=setTimeout('moveBubble();',100); the_timeout=setTimeout('moveContent();',100); the_timeout=setTimeout('moveSmallBubble();',100); the_timeout=setTimeout('moveSmallContent();',100); ChangeDescription(5); return false;">
<div id="container">
<div id="mainContent">
<a href="about.html"><div id="GR" class="GR"></div></a>
<div id="EN" class="EN"></div>
<div id="Bubble" style="position:absolute; top:670px; left:350px; width:0px; height:0px;"><img src="site_images/LCB.png" height="100%" width="100%" ></div><div id="Content" class="Content" style="position:absolute; top:670px; left:350px; width:0px; height:0px;">Are you looking for a way to increase your business' customers? Do you want to express your thoughts and opinions on an international information network? Let Bob the Blowfish help you "expand" in the "sea" of the internet.<br /><br />At the end of 2007 there were more than 1.000.000 active broadband connections in Greece and their numbers are on a constant increase. A business' web page is one of the most important factors in the advertisement plan, a web page becomes the showcase of the business on the internet community. With a web page you can have a permanent add at a low cost, compared to the other forms of media, and the ability to manage it yourself!<br /><br />Tens of thousands internet users maintain their own blog (over 12 thousand Wordpress users in 2008) or their personal web page. Blogs, social networking, forums and online communities can justify the characterization of the internet as the most important mean of communication today.<br /><br />If you are looking to advertise or just to be represented on the internet, the Blowfish can help you keeping the cost low, the delivery fast and the professionalism high. We're waiting to hear about your needs! </div>
<div id="SmallBubble" style="position:absolute; top:388px; left:797px; width:10px; height:10px;"><img src="site_images/LCB.png" height="100%" width="100%" ></div>
<div id="SmallContent" class="Content" style="position:absolute; top:388px; left:797px; width:0px; height:0px;"><h3>About us</h3>Meet Bob the Blowfish, learn how he can help you expand.</div>
<div class="Logo"></div>
<div class="ButtonBubble" style="top:643px; left:648px;" onmouseover="this.style.top='633px'; this.style.left='638px';" onmouseout="this.style.top='643px'; this.style.left='648px'"><a href="aboutEN.html"><div id="About" class="About"></div></a></div>
<div class="ButtonBubble" style="top:519px; left:708px;" onmouseover="this.style.top='509px'; this.style.left='698px';" onmouseout="this.style.top='519px'; this.style.left='708px'"><a href="projectsEN.html"><div id="Projects" class="Projects"></div></a></div>
<div class="ButtonBubble" style="top:516px; left:837px;" onmouseover="this.style.top='506px'; this.style.left='837px';" onmouseout="this.style.top='516px'; this.style.left='837px'"><a href="linksEN.html"><div id="Links" class="Links"></div></a></div>
<div class="ButtonBubble" style="top:618px; left:909px;" onmouseover="this.style.top='608px'; this.style.left='919px';" onmouseout="this.style.top='618px'; this.style.left='909px'"><a href="contactEN.html"><div id="Contact" class="Contact"></div></a></div>
<!-- end #mainContent -->
</div>
<!-- end #container --></div>
</body>
</html>
And this is one of the functions, the others are almost identical.
function moveBubble()
{
var the_Bubble = getStyleObject("Bubble");
if (the_Bubble)
{
var current_left = parseInt(the_Bubble.left);
var new_left = current_left - 4;
var current_width = parseInt(the_Bubble.width);
var new_width = current_width + 10;
var current_top = parseInt(the_Bubble.top);
var new_top = current_top - 8;
var current_height = parseInt(the_Bubble.height);
var new_height = current_height + 10;
if (document.layers)
{
the_Bubble.left = new_left;
the_Bubble.width = new_width;
the_Bubble.top = new_top;
the_Bubble.height = new_height;
}
else
{
the_Bubble.left = new_left + "px";
the_Bubble.width = new_width + "px";
the_Bubble.top = new_top + "px";
the_Bubble.height = new_height + "px";
}
if (new_width < 700)
{
the_timeout = setTimeout('moveBubble();',10);
}
}
}
I'm all out of ideas as to why these issues are happening. Any fresh looks/ideas would be a huge help.
Cheers!