JavaScript - Browser Compatibility Issue

I have the following script on my page:
<![if !IE]>
<div id='logowrapper'>
<span class='siteLogo'><img src='logo2.png' align=abstop /></span>
<span class='findUs'><img src='fLogo.png' border=0 title='Follow us on Facebook' align=abstop /><span class='topdvr'><img src='top_nav_dvr.png' alt=' - ' /></span><a href='www.twitter.com/' rel="nofollow" target='_blank'><img border=0 title='Follow us on Twitter' src='tLogo.png' align=abstop /></a></span>
</div>
<![endif]>
<!--[if IE]>
***** APPLY SAME DIV SO IE RECOGNIZES SAME WAY AS OTHER BROWSER
<![endif]-->

And i use the following CSS to style the NOT IE browser above:
#logowrapper{
margin:15px auto;
padding:0px 22px 0px 75px;
width:1049px;
}
.siteLogo {
width:45%;
}
.findUs {
padding: 0px 0px 0px 400px;
width:45%;
}

+++++++++++++++++++++++++++

Now my question is how do I achieve the same effect when the user in Internet Explorer browser, either thru DIV or TABLE style?

Thank you

Hello all,

I've got a cross browser issue with two javascript codes I'm using within a website: http://www.thewursteditions.com

Someone just pointed out today that they don't see my gallery (galleria javascript) nor my rollover on the size guide.

The site works great on the iphone, firefox, and safari, but not in Internet Explorer.

I really have no idea what the issue could be as I don't do this too often but I would greatly appreciate any of your help!

Thanks

I'm trying to use SmoothGallery 2.1 on my website as a featured box. I tried opening the demos provided with the code in all browsers to make sure it was compatible and it showed fine in them all.

I copied the javascript onto my site and I'm able to show the gallery. However in Chrome and Internet Explorer it shows fine, but Firefox the images are spread vertically down my site and the javascript gallery box doesn't show.

I don't understand why this is an issue because it shows fine opening the demo pages and the javascript code and css is a straight copy from the folder :S

Can anyone help me out? Website I'm having the issue on is www.deewon.com

-Thanks

mediasource.saymikeo.com

At the bottom of this page, click the web or video big white box. Then turn your attention to the select boxes.

When you select either of the first two choices, another box should pop up next to the select box. That box should populate with other choices.

1. My problem is the secondary box does not populate with the correct data.
2. When you select option 3 or 4 the box should disappear.

This works in Firefox. This is done through a JSON call in Mootools.

If you can figure this out I will think you are totally awesome. First for going through my messy code and second for being able fix it.

Your assistance is greatly appreciated.

This is the base function that calls view_category() which calls add_select_box();

Code:

function build_page(url, id){
	$('ajax_box').set('html', '');
	dbug.log('Obj URL: ',  id, url);
	   // Get the requested view
	   var view = new Request.JSON({ 
		url: url, onSuccess: function(jsonObj){
		   view_category(jsonObj.selectbar, id);
		}
	   }).send().chain(function(){
		 new Fx.Tween(service).start('opacity', '1');
	   });
   }

This is the view_category function. Its purpose is to build everything below the select box. It calls the add_select_box.
Code:

// Viewing the Title, Description and sub descriptions
   function view_category(oSelect, id){
	add_select_box(oSelect, id);
	oSelect.each(function(oOptions){
	   if(oOptions.id == id){
		var service_type = new Element('div', {id: oOptions.id, 'class': 'sub_choice'}).inject($('ajax_box'), 'bottom');
		oOptions.options.each(function(oSub){
		   var blank_div = new Element('div').inject(service_type, 'bottom'); // Needed for the Expand Link to work
		   var service_title = new Element('h2').set('html', oSub.title).inject(blank_div, 'bottom'); // Title
		   var service_description = new Element('p').set('html', oSub.description).inject(blank_div, 'bottom'); // Description
		   var expand = new Element('div', {'class': 'expanding'}).inject(blank_div, 'bottom'); // Expanding Sub Box
			if(oSub.sub != undefined){
			   // Expanding and Colapsing Link
			   var service_elink = new Element('a', {href: 'javascript:void(0)', onclick: 'expand(this); return false'}).set('html', 'more').inject(service_description); 
			   oSub.sub.each(function(oSubOptions){
				var sub_div = new Element('div').inject(expand, 'bottom');
				var sub_title = new Element('h3').set('html', oSubOptions.title).inject(sub_div, 'bottom'); // Sub Title
				var sub_description = new Element('p').set('html', oSubOptions.description).inject(sub_div, 'bottom'); // Sub description
				if(oSubOptions.sub_description != undefined){
				   var sub_elink = new Element('a', {href: 'javascript:void(0)', onclick: 'expand(this); return false'}).set('html', 'more').inject(sub_description);
				   var sub_expanding = new Element('div', {'class': 'expanding'}).inject(sub_div, 'bottom'); // Sub Sub Expanding
				   var sub_sub_description = new Element('p').set('html', oSubOptions.sub_description).inject(sub_expanding, 'bottom'); // Sub Sub Description
				};
			   });
			};
		});
	   }
	});
	
   };

This code adds the select box and changes the select box when the select button is changed.
Code:

function add_select_box(oSelect, id){
	var select_box = new Element('div', {id:'select_box'}).inject($('ajax_box'));
	var formSelectVar = new Element('select');
	oSelect.each(function(item){
	   if(item.id == id){
		var continue_div = new Element('div', {id:'continue'}).inject(select_box);
		new Element('a', {href:'javascript:void(0)'}).inject(continue_div);
		if(item.id == id){
		   // Create each option for the first select box
		   item.options.each(function(myArray){ 
			var formOption = new Element ('option').set('html', myArray.title).inject(formSelectVar);
		   });
		   new Element('option', {selected:'selected'}).set('html', 'Choose').inject(formSelectVar, 'top');
		   formSelectVar.inject($('select_box'), 'top' ); // This is the First Select Box
		   $('ajax_box').getElement('select').addEvent('change', function(){// Listen for the select box to change
			var categoryValue = $('ajax_box').getElement('select').value;
			   if($('sub_select')){
				var formSelectVar = $('sub_select').set('html', '');
			   }else {
				var formSelectVar = new Element('select', {id:'sub_select'});
			   }
			   // Make a secondary select box for additional options
			var notdefined;
			item.options.each(function(myArray){
			   if(myArray.sub != undefined && myArray.title == categoryValue){
			   dbug.log('Secondary Select: ', myArray.sub, myArray.title, categoryValue)
				myArray.sub.each(function(subArray){
				   var formOption = new Element ('option').set('html', subArray.title).inject(formSelectVar);
				});
				notdefined = false;
			   }else if(myArray.title == categoryValue){
				dbug.log('Else Dialoge: ', myArray.sub, myArray.title, categoryValue)
				notdefined = true;
			   }
			});
			dbug.log('Not Defined: ', notdefined);
			if(notdefined != true){
			   new Element('option', {selected: 'selected'}).set('html', 'Choose').inject(formSelectVar, 'top');
			   formSelectVar.inject($('select_box')); // This is the second select box
			}else{
			   formSelectVar.dispose();
			}
		   });
		};
	   }
	});
   };

ok, so i am working on a type of Option Box that is heavily formatted with CSS and animated using JS $fx()

The $fx framework works fine on all browsers, and i have only used fairly simple code, and yet my page functions perfectly on Chrome and Safari.
but will not work in Firefox or IE

(Firefox does nothing, and IE has a couple of css issues and doesnt work either...)

http://calumk.com/else/blogpoststuff...ng_Option_Box/

if anyone could help me i would really appreciate it.

(obviously view in Chrome or safari to see how it is meant to respond)

Dear All,
I have downloaded some code from a javascript programmers website but having trouble making it work!

I have some javascript:

[CODE]

<SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
{
if(mySel.form.target)myWin = parent[mySel.form.target];
else myWin = window;
if (! myWin) return true;
myWin.location = myVal;
}
return false;
}
//-->
</SCRIPT>

[CODE]

Within the main body, my code reads:
[CODE]

<FORM
ACTION="../cgi-bin/redirect.pl"
METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="gourl">
<OPTION VALUE="">Please select your event...
<OPTION VALUE="http://www.yahoo.co.uk"> preview yahoo UK</option>
<OPTION VALUE="http://www.yahoo.com"> preview yahoo US</option>
<OPTION VALUE="http://www.yahoo.fr"> preview yahoo FR</option>
<OPTION VALUE="http://www.expedia.co.uk"> preview Expedia</option>
<OPTION VALUE="http://www.travelocity.co.uk"> preview Travelocity</option>
<OPTION VALUE="http://www.onlinepictureproof.com"> preview online pics</option>
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>

[CODE]

On selection of "preview yahoo UK" from drop-down box, it takes me to the correct webpage (www.yahoo.co.uk), so no issue there. However, it opens this page up in a new window. I'm pretty sure this is because the javascript code is telling it to. However, I want the www.yahoo.co.uk page to be displayed in the same window from where the request came from? (i.e. I don't want it to open a new browser window)!

What do I have to change in the javascript to make this happen? I tried using the TARGET functionality taught to me many many moons ago, but it still fires up a new window: <OPTION VALUE="http://www.yahoo.co.uk" TARGET="_top"> preview yahoo UK</option>

I am testing this on my PC, so perhaps it could be that redirect.pl isn't held locally on my home pc, i.e. it would work once we upload the web pages to the web server?!

any help/guidance would be greatly appreciated.

I need a script that will redirect to a specific page is the browser is safari version 4. if the browser is NOT safari 4 I want the browser to stay on the current page.

Greetings,

I am currently using the websites tutorial about browser detection using the navigator.

http://www.javascriptkit.com/javatutors/navigator.shtml

I am however finding myself unable to detect a pattern in order to learn from.

My aim is to use Browser detection to have a CSS file for each browser type, such as Firefox, IE, Opera, Safari and then an overall CSS file if none of the above, to fix numerous flaws.

For IE and Firefox using the site's code is all well and good and while I haven't tested it yet I'm wondering how to set up the coding so that it can detect a safari browser.

There are lots of slashes and d's and brackets and I do find myself unable to understand their purpose.

So if someone can explain how I could do it for Safari I would be very appreciative.

Hello,

I have a question what is the best way to identify a browser, browser version and OS in javascript.

I have try a few scripts but they all fail. This will help me out formating the code for diferent browsers.

Thanks

Hi, I am not very experienced in programming, but I've noticed I keep running into a problem. I've got a particular javascript coding and for some reason it is only working for my mac visitors, but not PC.

What can I do to make this coding compatible for both? Where might the issues be?

thanks

Hi, I have a piece of code that when executed will change the .onclick and .value of a button,

Code:

/* JAVASCRIPT */

function selectAllDays() {  
	var len = document.booking.days.length;
	for (var i=0; i<len; i++) {
		document.booking.days[i].checked = true;		
	}
	changeDaysButtonD();  
}

function deselectAllDays() { 
	var len = document.booking.days.length;
	for (var i=0; i<len; i++) {
		document.booking.days[i].checked = false;		
	}	
	changeDaysButtonS();  
}

function changeDaysButtonD() {   
	var obj = document.getElementById('selectall');
    obj.onclick = deselectAllDays;
	obj.value = "Deselect All Days";
}

function changeDaysButtonS() { 
	var obj = document.getElementById('selectall');
    obj.onclick = selectAllDays;
	obj.value = "Select All Days";
}

Code:

HTML

<input type="button" id="selectall" name="selectall" value="Select All Days" onclick = "selectAllDays();"><br/>
<input type="checkbox" name="days" value="Monday">Monday<br/>
<input type="checkbox" name="days" value="Tuesday">Tuesday<br/>
<input type="checkbox" name="days" value="Wednesday">Wednesday<br/>
<input type="checkbox" name="days" value="Thursday">Thursday<br/>
<input type="checkbox" name="days" value="Friday">Friday<br/>

So, when the button is initially clicked it runs the selectAllDays() function, which will also run the function to change the state of the button to "Deselect all days" however when I run this in FireFox it gives the error of
Error: selectAllDays is not defined
Source File: http://davidc.herobo.com/groupsite/booking.html

Though in Internet Explorer this runs fine and selects/deselects the checkboxes without any problem.

I'd like to know if anyone knows why it won't work in FireFox?

Help would be much appreciated,
Thanks, Dave.

Hi--

I have the following javascript which is setting up a quiz (delivered from off-site) into an iframe. The javascript code determines if the visitor has Flash or not, and then sets up the page, on button click, to deliver the appropriate version of the quiz into the iframe.

For some reason, this code works in everything (it seems) except IE8. In IE8 without Flash, something (perhaps in the code itself?) kicks the viewer into a blank page. If someone could just test the URL below and tell me if they get the same problem, that would help! Maybe (I am thinking) it is because the computer I tested it on did not have JS enabled? Or maybe there is something in the code? Or maybe with the quiz delivered from off-site?

Here is the code:
Quote:
<!--QUIZ BEGINS-->

<article id="page_7c">
<div class="box" id="page1">
<a href="#page_1" class="close"></a>
<div class="wrapper pad_bot1">
<div class="grid_16 prefix_4">

<p></p>
<div id="tester">

</div>

</div>
</div>
</div>
</article>


<!--QUIZ ENDS-->
<SCRIPT>
<!--
// courtesy of http://www.kirupa.com/developer/mx/detection.htm
function FLASH_CHECK(){
var MM_contentVersion = 6;
var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;
if ( plugin ) {
var words = navigator.plugins["Shockwave Flash"].description.split(" ");
for (var i = 0; i < words.length; ++i)
{
if (isNaN(parseInt(words[i])))
continue;
var MM_PluginVersion = words[i];
}
var MM_FlashCanPlay = MM_PluginVersion >= MM_contentVersion;
}
else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0
&& (navigator.appVersion.indexOf("Win") != -1)) {
document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n'); //FS hide this from IE4.5 Mac by splitting the tag
document.write('on error resume next \n');
document.write('MM_FlashCanPlay = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash." & MM_contentVersion)))\n');
document.write('</SCR' + 'IPT\> \n');
}
if ( MM_FlashCanPlay ) {
document.getElementById('tester').innerHTML = '<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzMTY3MjMyMzUyNDMmcHQ9MTMxNjcyMzIzNzA*OCZwPTIwNDMyMSZkPSZnPTEmbz*wMWFhMzNjMDI4ZWM*NjNmYTZh/NGU1M2FiNzRmZTZlMSZvZj*w.gif" /> <iframe src="http://www.quizrevolution.com/act147691/mini/go/test_your_knowledge_about_ufos" width="380" height="400" frameborder="0" scrolling="no" name="mystudiyoIframe" title="QuizRevolution.com"><a href="http://www.quizrevolution.com/act147691/mini/go/test_your_knowledge_about_ufos">test_your_knowledge_about_ufos</a></iframe>'
} else{
document.getElementById('tester').innerHTML = '<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzMTY3MjMzMTU3NDUmcHQ9MTMxNjcyMzMxODA5NyZwPTIwNDMyMSZkPSZnPTEmbz*wMWFhMzNjMDI4ZWM*NjNmYTZh/NGU1M2FiNzRmZTZlMSZvZj*w.gif" /> <iframe src="http://www.quizrevolution.com/act147547/mini/go/test_your_knowledge_about_ufos" width="380" height="400" frameborder="0" scrolling="no" name="mystudiyoIframe" title="QuizRevolution.com"><a href="http://www.quizrevolution.com/act147547/mini/go/test_your_knowledge_about_ufos">test_your_knowledge_about_ufos</a></iframe>';
}
}
//-->
</SCRIPT>
And here is the URL of the site:

Quote:
http://www.ABCsofUFOs.com
If you click on the link bottom left ("Test Your Knowledge of UFOs") that should send you to the appropriate version of the quiz.

Many thanks for any help!

Hi,
I have an application in which a popup window is opened from main window, from that popup window on clicking a button, the control goes to a servlet and after some calculations the control returns to the popup window. This works fine in IE6. But the same code behaves improperly in IE8. In IE8 on clicking button on popup window instead of control coming back to same popup window a new popup is opened. Can anybody help me on this?

Hello

I have this var set:

var floatingMenu =
{
targetX: -270 ,
targetY: 13,

hasInner: typeof(window.innerWidth) == 'number',
hasElement: document.documentElement
&& document.documentElement.clientWidth,

menu:
document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId]
};

I want the number to be assigned to targetX (the red part) to be different for Firefox, Chrome or Internet Explorer. How do i do that?

Also, can i avoid this IE's warning about running active x content? Come on... This is a javascript for making a floating menu, there's no security issue whatsoever!

Hello, so i got one question. I have this Java Script of old facebook chat which works great at chrome and firefox with greasemonkey but when i tried to put this at IE9 with IEPro plugin , facebook just went crazy. Cant open chat at all, also all site is broken. What is problem with this script at IE,Safari or Opera?
Maybe you can help me thx.

You can find that script here : www.fu.sk/107159.user.js