JavaScript - Browser Issue With Javascript

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

Hi i have a php file that contain below content and it works great on firefox but not in IE8

actually IE8 doesnt reload the div

Code:

<?php
print <<<HERE
<script type="text/javascript">
$(document).ready(function() {
$("#loader").load("content.php?uname=$uname");
var refreshId = setInterval(function() {
$("#loader").load("content.php?uname=$uname");
}, 5000);
});
</script>
HERE;
?>

<div id="loader"></div>

also i tried like this and same thing happens

Code:

<?php
print <<<HERE
<script type="text/javascript">

setInterval("calldiv()", 5000);
function calldiv(){
$("#loader").load("content.php?uname=$uname");
}

</script>
HERE;
?>
<div id="loader"></div>

any help would be great

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();
			}
		   });
		};
	   }
	});
   };

Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once.

Does anyone know how to do this please?

Thanks so much for your help.

I have code that I've been using for awhile now that will automatically log users off my site after a period of time. It works great using a 32 bit browser but not at all with a 64 bit browser.

For the life of me I can't figure this out.

<script type='text/javascript'>
var secondsRemaining = 30;
var mhcTimer;

function countDown() {
secondsRemaining -= 1;
if (secondsRemaining <= 0) {
secondsRemaining = 0;
window.location='login.aspx';
}
}

function startAutoLogoff() {
if (mhcTimer) {
return false;
}
else
{
mhcTimer = setInterval('countDown();', 1000);
}
}

startAutoLogoff();

</script>

Dear all, can somebody help me with browser compatibility and this code. Working fine in Opera and Firefox, but do not working in Internet Explorer and Chrome. With one form working fine in every browser, but when I put second form it stops to work in Explorer and Chrome.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<SCRIPT type="text/javascript">
function showDiv(divIndex) {  var f=document.forms[0];  var d=f.getElementsByTagName('div');
for(i=0;i<d.length;i++)d[i].style.display='none'
d[divIndex].style.display = 'block';
}
</SCRIPT>
</HEAD>
<BODY>
<form>
<select onchange="showDiv(this.value); ">
<option value="0" selected>option 1</option>
<option value="1">option 2</option>
<option value="2">option 3</option>
</select>


<div style="display:block;"><form action="001.htm" method="get" >
Your state<br> 
<select name="statecode" id="statecode">
<option value="">Choose State for option 1...</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
</select> 
<input type="submit" name="search" value="Get Quotes" />
</form></div>

<div style="display:none;"><form action="002.htm" method="get" >
Your state<br> 
<select name="statecode" id="statecode">
<option value="">Choose State for option 2...</option>
<option value="AK">California</option>
<option value="AL">Colorado</option>
<option value="AR">Connecticut</option>
</select> 
<input type="submit" name="search" value="Get Quotes" />
</form></div>

<div style="display:none;"><form action="003.htm" method="get" >
Your state<br> 
<select name="statecode" id="statecode">
<option value="">Choose State for option 3...</option>
<option value="AK">Massachusetts</option>
<option value="AL">Maryland</option>
<option value="AR">Maine</option>
</select> 
<input type="submit" name="search" value="Get Quotes" />
</form></div>

</form>
</BODY></HTML>

I was wondering if there was any way to determine what browser the remote address is using through JavaScript preferably or any other language and if so how to direct them to another page if they're using a specific browser...

Hi

I am a new bie to Javascript programming. We have a scenario to launch a new browser window for a given HTML. I have the following approaches :

Approach 1:
my_window = window.open("", "report");
my_window.document.open();
my_window.document.write("<HTML> <BODY> HI </BODY></HTML>");
my_window.document.close();

Approach 2:
var newWindow = window.open("", "report");
newWindow.document.body.innerHTML = "<HTML> <BODY> HI </BODY></HTML>";

Could anyone sugges Which is the correct approach ? Our requirement is to have this code to work in any browser?

Thanks

I have found this Alarm Clock from JavaScript Kit and when the alarm time is reached it redirects to the URL entered. I would like to keep the alarm clock running, have it open a new window for the entered URL such as (Target="Blank") in HTML. Can someone help?

var jsalarm={
padfield:function(f){
return (f<10)? "0"+f : f
},
showcurrenttime:function(){
var dateobj=new Date()
var ct=this.padfield(dateobj.getHours())+":"+this.padfield(dateobj.getMinutes())+":"+this.padfield(dateo bj.getSeconds())
this.ctref.innerHTML=ct
this.ctref.setAttribute("title", ct)
if (typeof this.hourwake!="undefined"){ //if alarm is set
if (this.ctref.title==(this.hourwake+":"+this.minutewake+":"+this.secondwake)){

window.location=document.getElementById("musicloc").value

}

Hi, I'm doing something wrong, I want my script to execute when the browser window opens, can someone please help me?

Code:

<p><iframe id="myFrame" style="display: none;" width="500" height="300"></iframe>
<script type="text/javascript">// <![CDATA[
    window.onload=openpdf();
    type="text/javascript">// <![CDATA[
        function openPdf()
        {
            var omyFrame = document.getElementById("myFrame");
            omyFrame.style.display="block";
            omyFrame.src = "myFile.pdf";
        }
        // ]]></script>

I am in the process of developing a form for the company intranet and i've recently added in code to capture the enter key event to prevent the page from automatically submitting. Along with this, i added code to move the focus to the next element in the tab index. When used in IE, the code works perfectly, but when i use it in firefox or chrome the focus jumps to the same box every time. I don't know what i'm doing wrong am i'm hoping someone can help me figure this out.
You can test the page at http://implicitarts.com/fandfwork/Lo...l/default.aspx
To start, go to the box for duty amount or freight charges and press enter
The following code is what I used to handle this event.
Code:

function handleKeyPress2(e,control)
{
    var evt = e ? e : window.event;
    var bt = control.id;
    if (bt)
    {
        if (evt.keyCode == 13)
        {
            //bt.click();
            jumptoNext(control, e);
            stopEvent(e);
            return false;
        }
    }
}
function jumptoNext(field, event)
{
    for (i = 0; i < field.form.elements.length; i++)
        if (field.form.elements[i].tabIndex == field.tabIndex + 1)
        {
            field.form.elements[i].focus();
            if (field.form.elements[i].type == "text") field.form.elements[i].select();
            break;
        }
}


function stopEvent(e)
{
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;

    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
}

Hi,

I have a requirement where, on a link, when the user clicks, the app should copy all browser favorites and write to a db (table that has two columns, one with fav name and one col for the website link).

Thoughts on how to get this done ? How can I read the the browser favorites from a javascript ?

Thanks,
Deepna

Hi to everyone!

Script first:

Code:

var allowscroll = 0
//Mouse scroll ____________________________________________________________________________________
function handle(delta) {
		if(allowscroll == 1){
			if (delta < 0){
				simgs1dest_x -= 30
			}
			else{
				simgs1dest_x += 30
			}
		}
		if(allowscroll == 2){
			if (delta < 0){
				textdest_y -= 30
			}
			else{
				textdest_y += 30 
			}
		}
		
}
function wheel(event){
        var delta = 0;
        if (!event) 
                event = window.event;
        if (event.wheelDelta) { 
                delta = event.wheelDelta/120;
                
        } else if (event.detail) { 
                delta = -event.detail/3;
        }
        if (delta)
                handle(delta);       
        if (event.preventDefault)
                event.preventDefault();
	event.returnValue = false;
}
if (window.addEventListener){      
    window.addEventListener('DOMMouseScroll', wheel, false);
	window.onmousewheel = document.onmousewheel = wheel;
}

I'm using this script to scroll two divs, which each activates self scrolling onMouseOver and onMouseOut deactivate scrolling by setting allowscroll varible to 0.
And everything works fine, but this script doesn't allow to scroll browser entire page!
So is there a script wich will scroll browser page when allowscroll is equal to 0?

Hello All,

I'm working on a image slider, which will slide left to right and vice versa on mouser over event. the images are dynamically loaded from the database using ASP script. I use mootools.svn.js for the sliding implementation. and Ajax to pass the id of the image to another page as a query string. this is implemented in a Code:

onclick="getValue('<%= id %>')"

event.

This works fine in IE8, but when I test in Firefox 3.6 and Chrome the onclick event doesn't work. when I comment the mootools.svn.js, the onclick event get fired. what causes this. is their any solution?

now my development has come to a grinding halt because of this. Please help

<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient"%>
<%@ Import Namespace="System.Configuration" %>
<%@ Import Namespace="System.Collections" %>
<%@ Import Namespace="System.Web" %>
<%@ Import Namespace="System.Web.Security" %>
<%@ Import Namespace="System.Web.UI" %>
<%@ Import Namespace="System.Web.UI.WebControls" %>
<%@ Import Namespace="System.Web.UI.WebControls.WebParts" %>
<%@ Import Namespace="System.Web.UI.HtmlControls" %>
<%@ Import Namespace="System.Text" %>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="slider.aspx.cs" Inherits="slider" %>

<!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 runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
//GETS THE IMAGE ID FROM
function getValue(val)
{
alert(val);
showHint(val);
//document.form1.newval1.value=val;
}

var xmlhttp=null; //xmlhttp variable

//Ajax
function make_httpRequest(){
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
return;
}
}

//Bind the query string as a URL
function request_url(url){

url=url+"&sid="+Math.random();
xmlhttp.open("GET",url,false);

xmlhttp.send(null);

}

//BIND THE IMAGE ID TO THE QUERY STRING VARIABLE TO THE url variable
function showHint(val)
{

make_httpRequest();

var url = "Test.aspx?prodid="+ val;

request_url(url);

}
</script>
<style type="text/css">
<!--
.slider_con {
height: 125px;
width: 889px;
}
.slider_content {
height: 125px;
width: 889px;
float: left;
overflow: hidden;
position:relative;
}
.image_con {
float: left;
height: 125px;
width: 23px;
}
#maiin_container{
width: 889px;
height: 125px;
overflow: auto;
overflow-x:hidden;
overflow-y:hidden;
float:left;
}

.main-content {
width: 889%;
height: 125px;
}
.section{
margin:0 0 0 0;
float:left;
}
-->
</style>
<style type="text/css">
<!--
a {
font-family: sans-serif;
font-size: 15px;
color: #666767;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #666767;
}
a:hover {
text-decoration: none;
color: #666767;
}
a:active {
text-decoration: none;
color: #666767;
}
.style1 {
color: #A0A0A0
}
-->
</style>
</head>
<script type="text/javascript" src="mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var scroll2 = new Scroller('maiin_container', {area: 100, velocity: .12});
// container
$('maiin_container').addEvent('mouseover', scroll2.start.bind(scroll2));
$('maiin_container').addEvent('mouseout', scroll2.stop.bind(scroll2));
});
</script>
<body>
<form id="form1" runat="server">
<div class="slider_con">
<div class="image_con section">
&nbsp;&nbsp;
</div>
<div id="maiin_container">
<div class="main-content" id="Div1">
<%
string connectionString = @"Data Source=174.37.88.148;Initial Catalog=lalith_db;uid=lalitha_jew;pwd=lalitha1234";
string query = "SELECT prod_id, prod_itemcode, prod_title, prod_thumbnailimage FROM dbo.products WHERE cat_id="+22+"and prod_topfive = 'yes' UNION SELECT prod_id, prod_itemcode, prod_title, prod_thumbnailimage FROM dbo.products WHERE cat_id="+22+"and prod_topfive = 'no'";

SqlConnection conn = new SqlConnection(connectionString);
try
{
conn.Open();
}
catch(Exception ex)
{
conn.Close();
}
SqlDataReader reader;
using (reader = new SqlCommand(query, conn).ExecuteReader())
{
if (reader.HasRows)
{
while (reader.Read())
{
int id = reader.GetInt32(reader.GetOrdinal("prod_id"));
string prod_itemcode = reader.GetString(reader.GetOrdinal("prod_itemcode"));
string prod_title = reader.GetString(reader.GetOrdinal("prod_title"));
string prod_thumbnailimage = reader.GetString(reader.GetOrdinal("prod_thumbnailimage"));

int i = prod_thumbnailimage.IndexOf('b');
string url = prod_thumbnailimage.Substring(i);

%>
<div class="section">
<a href="#" id='<%= id %>' onclick='getValue(<%= id %>)'><img id="img" src='<%= url %>' alt='<%= prod_title %>' /></a>
</div>
<% }
}
} %>
</div>
</div>
</div>
</form>
</body>
</html>

Does anyone have any idea how to imitate browser zoom with javascript?

I know you are not allowed to control browser's zoom capabilities, but perhaps there's a way to change all content dimensions with javascript?

In firefox, when you press ctrl+, the whole page resizes appropriately, even background images.

With this imitation JS zoom, background images would not zoom since there is no scale size numer or anything like that in CSS.

It would simply be cool to have a script that resizes everything on the page. That way, you can design highdefinition content that fits a 1280 * 960 browser frame, but can zoom out for smaller resolutions (1024 or 800).

That's be neato!!

Any ideas? Anyone know a script?