PDA

View Full Version : Countdown /HVmenu_9.0 /Resolution_Dependent_Content Conflict



Zorthax
02-18-2007, 04:49 PM
Hi everyone,

It's my first post ever. Yay :)

But unfortunately I don't come bearing gifts, only headaches. :p
Hope one of you Javascript gurus can help this sleep-deprived person.

Well, here's my problem. I've been creating my Students' Association website (http://www.busrc.com/) for a while... and I'm just plain stuck. I had each javascript working perfectly individually, but throw them on the same page, and one of them decides not to work anymore.

I know the first suggestion I'll get is to check for body.onload and window.onload conflict. I did... but couldn't find a conflict (unless it's caused by a different property like defer)

First of all, I'd like to suggest the Webdeveloper toolbar (https://addons.mozilla.org/firefox/60/) for Firefox, if you haven't gotten it already - cause helping me with this problem might mean changing your resolutions back and forth if you like to work at 1024x768.

Okay... so here's my problem.

At 1024x768, everything is FINE. No problems there whatsoever!
The problem exists because of this: For those viewers who browse at higher resolutions, in order to make use of the vast empty spaces, I want content to magically appear/disappear depending on their window size.

Well, I managed to get the magic happening! (on a fresh page)
But unfortunately, when I decided to throw that script into my index page, it conflicts with either HVmenu_9.0 (http://www.burmees.nl/menu/menus.htm) or Dynamic Countdown Script (http://www.dynamicdrive.com/dynamicindex6/dhtmlcount.htm).


So, here are some demonstration pages:

The Official Live Index Page
Javascript(s): HVmenu_9.0 and Dynamic_Countdown_Script
Problem: None (because the auto_show/hide isn't included in the page).
Link: http://www.busrc.com/
Demonstration of Resolution_Dependent_Content Script
Javascript(s): Resolution_Dependent_Show/Hide (>1024x768)
Problem: None (because the other two scripts are not included in the page).
Link: http://www.busrc.com/index_test.html
Demonstration of "Cats & Dogs"
Javascript(s): HVmenu_9.0 & Dynamic_Countdown_Script & Resolution_Dependent_Show/Hide (>1024x768)
Problem: HVmenu and Countdown work; but auto show/hide doesn't.
Link: http://www.busrc.com/index_test2.html


I didn't copy/paste the Javascript code here since you can fetch it from the page source (don't want to make this post extend to the depths of hell) :)

Could someone please guide me where to change what to get this to work?

I have a few extra questions as well:

What other Javascript conflicts are common other than onload?
I wanted to include (in the auto-hide section) a weather-button. Perks for the higher-res visitor ;)... but the code itself is an iframe which is hosted on their server (and has a body.onload function) that I cannot change. Which leads me to my question. In such a situation (iFrames), does the browser treat them as two seperate pages, or do I need to include the iFrames' onload property to the parent frame's body tag? If you want to take a look:

<iframe marginheight="0" marginwidth="0" name="wxButtonFrame" id="wxButtonFrame" height="115" src="http://btn.weather.ca/weatherbutton/template2.php?placeCode=CAQC0489&category0=Cities&placeCode1=CAQC0363&category1=Cities&placeCode2=CAON0512&category2=Cities&placeCode3=CAON0696&category3=Cities&placeCode4=CAQC1304&category4=Ski&containerWidth=100&btnNo=7862&backgroundColor=blue&multipleCity=1&citySearch=0&celsiusF=C" frameborder="0" width="100" scrolling="no" target="contentx></iframe>
Also, for the show/hide script, I have used a test page to display. But why does the iframe not fill 100&#37; of the length of the cell as I've specified it to? I might have missed noticing a value somewhere, but as far as I could tell, it should display 100%x100%, but it's not.
And a last question which doesn't matter (since I got the show/hide to work differently anyways). Why didn't this code work for me? It's much simpler, but it didn't work.


<script language="javascript">
function findLiveWidth(){
if(window.innerWidth != null)
return window.innerWidth;
if (document.body.clientWidth != null)
return document.body.clientWidth;
return (null);
}

function resizer()
{

if (findLiveWidth() > 1030)
{
visible_show('forumlatest');
visible_show('weather');
}
else
{
visible_hide('forumlatest');
visible_hide('weather');
}
}
</script>

<body onload="resizer();" onMove="resizer();" onResize="resizer();">

<div id="forumlatest">Auto Show/Hide Content_1 goes here</div>
<div id="weather">Auto Show/Hide Content_2 goes here</div>



Any help/suggestions would be very appreciated.

I know that's a LOT of questions.

Thanks in advance!

and sorry for taking up so much of your time.

Niten...