JavaScript - One Script Isn't Working With Two In A Page

I'm helping out my friend complete her site.
check it out he http://themodline.com/clients/jcevent

when you head over to the portfolio section the the lightbox script doesnt work properly. but if you just go to http://themodline.com/clients/jcevent/portfolio.html -it works fine.

are the scripts mixing up?
i made sure i got the correct codes. i made sure the script files are correctly linked.

check out my scripts. they are zipped he http://www.themodline.com/clients/jcevent/scripts.zip


thanks for the help guys. hope this makes sense!

Hi there, i have this simple script that replaces the scrollbar of an iframe called iFrame1 with 2 up and down arrow images, but it only works in IE, i've tried it in Chrome and Firefox...

here is the code

Code:

<script type="text/javascript" language="javascript">
function bsh_iFrame1(step,time){hs_iFrame1=setInterval("sh_iFrame1("+step+")",time)}
function esh_iFrame1(){clearInterval(hs_iFrame1)}
function sh_iFrame1(step)
{
  scrollx=iFrame1.document.body.scrollLeft
  scrolly=iFrame1.document.body.scrollTop
  scrolly=scrolly+step
  iFrame1.window.scroll(scrollx,scrolly)
}
</script>

Code:

</td><td align="center" valign="middle" width="31"><img src="up.png" alt="up" border=0 vspace="5" hspace="3"
	onMouseDown="esh_iFrame1();bsh_iFrame1(-3,2)" 
	onMouseUp="esh_iFrame1();bsh_iFrame1(-1,20)" 
	onMouseOver="bsh_iFrame1(-1,20)" 
	onMouseOut="esh_iFrame1()"><br>
<img src="down.png" alt="down" border=0 vspace="5" hspace="3" 
	onMouseDown="esh_iFrame1();bsh_iFrame1(3,2)" 
	onMouseUp="esh_iFrame1();bsh_iFrame1(1,20)" 
	onMouseOver="bsh_iFrame1(1,20)" 
	onMouseOut="esh_iFrame1()">

thanks in advance for any answers...

Hi all, thanks in advance for any help.

For a lot of years now I've used a javascript that does a simple rollover image swap, but also changes another alternate image at the same time. It's always worked like a charm.

Lately I realized that the script no longer works in IE, though it used to in older versions of IE (I think it stopped working in anything past IE 7). It still works fine in Firefox, Safari, etc.

I haven't been able to find a good alternative for this script, so I'm really trying to get it to work again in IE, but so far no luck.

Here's the link to the actual script itself.
http://www.jsmadeeasy.com/javascript...nges/index.htm
(you can see that even the example on this page doesn't work in IE anymore)

You can also see it in action at this site:
http://www.augustroad.com/
(notice when you roll over the menu bar an alternate image appears in FF, but not in IE).

Again, thanks in advance for any help. I truly appreciate it!
Jordan

Hi All,

I am using one script which is functioning properly incase of IE but incase of Mozilla evenif the shift key is pressed and any character key is pressed then it is displaying Caps Lock is On.
can anyone tell how can I make it Mozilla and IE compatible.

Hey !

You know I'm now trying to use that light box embed contact form in my page http://uniwebmart.com/roshan and that fade in fade out effect as well which you can see now in LCD. But when I use the java script of that embed contact form in lightbox, my previous script of fading doesn't work.

<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/fadeslideshow.js"></script>

bold one is newly added script. Can't figure out the mistake. Can you please help me once again people???

i have a script that measures the window size and - at this point - only adjusts the width of one css element.

first function:

Quote:
var myWidth = 0, myHeight = 0;
function getWindowSize() {

if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
// window.alert( 'Width = ' + myWidth );
// window.alert( 'Height = ' + myHeight );
}
second function:

Quote:
//changecss JavaScript Functions by Shawn Olson
//Copyright 2006-2008
//http://www.shawnolson.net

function changecss(theClass,element,value,sheet) {
//Last Updated on October 10, 1020
//documentation for this script at
//http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html
//ms: 5.5.11 added sheet: you have to point at the stylesheet by number
var cssRules;

var added = false;
var mySheet = document.styleSheets[sheet];



if (mySheet['rules']) {
cssRules = 'rules';
} else if (mySheet['cssRules']) {
cssRules = 'cssRules';
} else {
//no rules found... browser unknown
}

for (var R = 0; R < mySheet[cssRules].length; R++) {
if (mySheet[cssRules][R].selectorText == theClass) {
if(mySheet[cssRules][R].style[element]){
mySheet[cssRules][R].style[element] = value;
added=true;

break;
}
}
}
if(!added){

try{
mySheet.insertRule(theClass+' { '+element+': '+value+'; }',mySheet[cssRules].length);

} catch(err){
try{mySheet.addRule(theClass,element+': '+value+';');}catch(err){}

}


}

}
i call the function in a php script that is to rule out that the server is talking to a mobile device, however, it echos javascript and a document ready function:

Quote:
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android|...(non relevant code)...|zte\-/i',substr($useragent,0,4)))
{
echo '<link rel="stylesheet" type="text/css" href="1" />';
//the above never happens as i am testing on big screen
}
else
{
//echo '<link id="screensize" rel="stylesheet" type="text/css" href="stylesheet.php?cssid=47&mediatype=screen" />';
echo '<script type="text/javascript">';
echo '$(document).ready(function() {
getWindowSize();
//ms: these variables come back: myWidth, myHeight

if (myWidth >=1225) {

changecss(".core-pageWidth","width","1225px",1);
}
else if (myWidth >1000) {

myWidth=myWidth - 20;
changecss(".core-pageWidth","width",myWidth+"px",1);
}
else if (myWidth >910) {
myWidth=myWidth - 20;
changecss(".core-pageWidth","width",myWidth+"px",1);

}

});
</script>';
}
the changecss() does not work in https but works fine in http. is this to be expected?

mario

Nice for a change: a piece of code that does work in all versions of IE, but not in Firefox. I'm stuck.

Code:

<img alt="Loodgieters" title="Loodgieters" src="/core/loodgieters_uit.png" name="loodgieters" 
          border="0" style="margin-right:1px; margin-top:1px; float:left; cursor:pointer;" 
          onclick="document.location='/pages/loodgieters.php';" 
          onmouseover="foto1.style.backgroundColor='#392d63'; loodgieters.src='/core/loodgieters_aan.png'" 
          onmouseout ="foto1.style.backgroundColor='#008ac9'; loodgieters.src='/core/loodgieters_uit.png'" />

Explanation: element "loodgieters" is a menu button that should change on mouseover. It doesn't in FF, it does in IE.
Secondly, when you "mousover" the image, it should change the backgroundcolor of a second element (foto1).

Element 'foto1' is a table cell. In return, when you mouse-over this table cell, the image element 'loodgieters' should change as well. So it's a two-way thing. The code for the table cell is:

Code:

<td height="189" id="foto1" bgcolor="#008ac9" valign="top" 
	onmouseover="style.backgroundColor='#392d63'; loodgieters.src='/core/loodgieters_aan.png';" 
	onmouseout="style.backgroundColor='#008ac9';  loodgieters.src='/core/loodgieters_uit.png';" 
	style="cursor:pointer;" 
	onclick="document.location='/pages/loodgieters.php';">
	<img alt="Loodgieters" title="Loodgieters" src="/core/loodgieters.png" 
	style="border:0; margin-left:auto; margin-right:auto; margin-top:10px; display: block;" /></td>

Again: it all works as I expected in IE, Safari and Chrome, but it does not in Firefox.

The whole page validates as XHTML 1.0 Transitional
What am I overlooking here? I'm stuck. Any help is welcome

Hello,

Im new to scripting. I have 2 scripts that work in firefox but not in ie. I was wondering if anyone could help me?

The First Javascript
Code:

<SCRIPT language="javascript">
<!-- // ***** GET TOTAL

function CalculateSum(setup, month, plan, form)
{
var A = parseFloat(setup);
var B = parseFloat(month);

form.x_amount.value = A + B;
form.user5.value = plan;
}
-->
</SCRIPT>

The second javascript
Code:

	var os_price = 0;
	var base_price = 0000;
        var total_carryover = 0000;

function show_price() {

	features = 0;
	for(var pr in price) {
		features+=price[pr];
		
	}
	
	month = features + base_price + os_price ;
	total = month + total_carryover;

	
	document.getElementById('setup_price').innerHTML="$"+(setup)/100;
	document.getElementById('monthly_price').innerHTML="$"+(month)/100;
	document.getElementById('total_price').innerHTML="$"+((total)/100+setup/100);
	

}

Thanks in advance for any help.

Dear All Experts

I wrote a simple code in javascript and it is working fine with IE but when I open the page in FireFox or in Google Crome it is not working as I expect. Actually I am enabling and disabling the combo box on the on change event of radio button.

Please check the code attached here. And visit my site for output
www.crispwerx.com/catasset

Thanx to all viewer and helper

<script type="text/JavaScript">
function refreshPage(s)
{
window.location.reload();
if((s.options[s.selectedIndex].value) = "zed=catcher")
{
alert (s.selectedIndex); //this is showing
<?PHP
//the next lines does not execute?????
echo $form['service_code']->renderLabel();
echo $form['service_code']->renderError();
echo $form['service_code'];
?>
}
}
</script>
please help?
thanks

hi all. im having problems with this ajax script i wrote:

Code:

function admin_adduser() {	
	xmlHttp=GetXmlHttpObject()
	if (xmlHttp==null) {
		alert ("Browser does not support HTTP Request");
		return;
	}
	user = document.getElementById('user_user').value;
	user = user.replace(/^\s+|\s+$/g, '');// trim whitespace
	
	//check if name is unique
	unique = 'false';
	var params = "?user=" + escape(user);
	var url="_check_username.php";
	url=url+params;
	ajaxedInner = "";
	xmlHttp.open("GET",url,true);
	xmlHttp.setRequestHeader("If-Modified-Since", "Fri, 31 Dec 1999 23:59:59 GMT");
	xmlHttp.onreadystatechange=stateChanged;
	xmlHttp.send(null);
	xmlHttp.onreadystatechange = function() {
		if (xmlHttp.readyState == 4) {
			if (xmlHttp.status == 200) {
				unique = xmlHttp.responseText.replace(/^\s+|\s+$/g, ''); //trims all whitespace!
				//alert(unique);
			}
		}
	}
	
	if(unique == 'true') {
		//alert("working: " + unique);
		password = document.getElementById('user_password').value;
		var params = "?user_user=" + escape(user) + "&user_password=" + escape(password);
		var url="_admin_add_user.php";
		url=url+params;
		ajaxedInner = "users";
		xmlHttp.open("GET",url,true);
		xmlHttp.setRequestHeader("If-Modified-Since", "Fri, 31 Dec 1999 23:59:59 GMT");
		xmlHttp.onreadystatechange=stateChanged;
		xmlHttp.send(null);
		document.getElementById('user_password').value = "";
		document.getElementById('user_user').value = "";
	} else {
		alert('Please select a unique name for the new staff member\nadd a middle initial maybe?');
	}
}

if i alert(unique) it tells me 'true' (string) but still doesnt go into the create part of the script, i just get the alert('Please select a unique name for the new staff member\nadd a middle initial maybe?');

any ideas? i know im probably missing something basic but its really annoying lol

btw - the php for the _check_username.php is simple:

PHP Code:
<?php if(!isset($_SESSION)) {session_start();}
if($_SESSION['authorised'] != true) {
exit;
}
include 'config.php';
include 'opendb.php';
$user = $_REQUEST['user'];
$query = "SELECT user FROM user WHERE user='$user'";
echo $query;
$result = mysql_query($query) or die('false');
$row = mysql_fetch_array($result, MYSQL_ASSOC);
if($row) {
    echo 'false';
} else {
    echo 'true';
}
mysql_free_result($result);
?>

I'm working on some code to create hover text that follows the mouse.

Now, the code works fine when the javascript is included on the page:
(internal script) http://cory.wellen.googlepages.com/hovertest2.html

However, when I try to move the code out to an external script, it doesn't work. I've tried looking all over to see what the problem is, but 99% of those with external script problems have errors in syntax or location of the source script. Please help!

(javascript) http://cory.wellen.googlepages.com/hover.js
(external script) http://cory.wellen.googlepages.com/h..._external.html

I'm a newbie, so it may be obvious. But can someone help me here? I want to display images based on times

Code:

<script type="text/javascript">
/*<![[CDATA */

var time = new Date();
var dayNight = time.getHours(); // gets the time of the day in hours

function displayImage() {

if (dayNight  >= 9 && dayNight <= 14) { 

document.getElementById("highlights").src="http://www.kacvtv.org/rotatorpics/amergrad.jpg";

}

if (dayNight  >= 14 && dayNight <= 17) { 

document.getElementById("highlights").src="http://www.kacvtv.org/rotatorpics/video-contest.jpg";

}

if (dayNight  >= 17 && dayNight <= 22 ) { 

document.getElementById("highlights").src="http://www.kacvtv.org/rotatorpics/vine.jpg";

}

else {
		 document.getElementById("highlights").src"http://www.kacvtv.org/rotatorpics/amergrad.jpg";
}
}
/*]]>*/ 
</script>

Then the code in the body
Code:

<body onload="displayImage">
<div id="highlights">
</div>

Here's a link.
http://tinyurl.com/7bzkdk7

I am very new to javascript. At least when it comes to writing scripts. The only thing I'm trying to do with the following script is make it so when you click on the right numbers of the image it will take you to a new page. If you click the wrong numbers it will forward you to an error page explaining that the code/numbers you clicked on were wrong. The code of numbers is four numbers long.

When I try the correct numbers or the incorrect numbers nothing happens either way. I'm not sure why.

Code:

<html><head><title>Untitled</title>
<script type="text/javascript">

			var combination;
			var comboAnswer = "7256";

			combination = "";

			function keycode(n) {
		if (combination.length < (opener.top.comboAnswer.length - 1)) {
					combination = combination + n;
				}
				else {
					combination = combination + n;
					checkCode();
				}
			}

			function checkCode() {
				if (combination == opener.top.comboAnswer) {
					window.location.href = "disarmed.html";
				}
				else {
					window.location.href = "armed.html";
				}
			}

		</script>
<body bgcolor="#000000">
<center>
<div style="text-align:center; width:527px; margin-left:auto; margin-right:auto;">
<img id="combination" src="image.png" usemap="#combination" border="0" alt="" />
<map id="_combination" name="combination">
<area shape="rect" coords="255,184,288,210" href="javascript:keycode(1)" alt="" title="" />
<area shape="rect" coords="288,184,321,210" href="javascript:keycode(2)" alt="" title="" />
<area shape="rect" coords="321,184,354,210" href="javascript:keycode(3)" alt="" title="" />
<area shape="rect" coords="255,213,288,239" href="javascript:keycode(4)" alt="" title="" />
<area shape="rect" coords="288,213,321,239" href="javascript:keycode(5)" alt="" title="" />
<area shape="rect" coords="320,213,353,239" href="javascript:keycode(6)" alt="" title="" />
<area shape="rect" coords="256,240,289,266" href="javascript:keycode(7)" alt="" title="" />
<area shape="rect" coords="288,240,321,266" href="javascript:keycode(8)" alt="" title="" />
<area shape="rect" coords="320,240,353,266" href="javascript:keycode(9)" alt="" title="" />
<area shape="rect" coords="288,265,321,291" href="javascript:keycode(0)" alt="" title="" />
<area shape="default" nohref>
</map>
</div>
</center>
</body></html>

so.. im tryign to paginate a div with content being added by an input. but its not working at all...

first, I got this input:

Code:

<form name="postbar_add_post" id="postbar_add_post"  method="post">
	<fieldset>
    	<legend>What chu doign? ...</legend>
        <input type="text" name="addcontentbox" id="addcontentbox" maxlength="200" />
        <input type="submit" name="addpost" value="Submit" class="submit" />
      	</fieldset>
</form>

then, what i will happen is that, the content being submited, will be posted to an unsorted list, named wall, i used jquery to help me out on this, heres the script:

Code:

<script type="text/javascript">
$(document).ready(function(){
	$("form#postbar_add_post").submit(function() {
		var addcontentbox = $('#addcontentbox').attr('value');
		
		if ( addcontentbox.replace(/\s/g,"") == "" ) return false;
		
$.ajax({
type: "POST",
url: "postear.php",
data:"addcontentbox="+ addcontentbox,
success: function(){
$("ul#wall").prepend("<li>"+addcontentbox+"</li>");
$("ul#wall li:first").fadeIn();
document.postbar_add_post.addcontentbox.value='';
document.postbar_add_post.addcontentbox.focus();
}
});
return false; 
});
});
</script>

the div where it is beign opsted at, looks like this:

Code:

<div id="cuerpo"><ul id="wall"></ul></div>

adn then, below i got this div, wich is where the navgiation links will be at:
(before u read, "current_page" and "show_per_page" are 2 hidden inputes to save the values.)

Code:

<div id="navwrapper"></div>

so, to make the navigation, i found a script online and tried to adapt it to the div, i got this:

Code:

$(document).ready(function(){ 

	//how much items per page to show  
	var show_per_page = 5;  
	//getting the amount of elements inside content div .   
    var number_of_items = $('#wall').children().size();  
    //calculate the number of pages we are going to have  
    var number_of_pages = Math.ceil(number_of_items/show_per_page); 
	
	//set the value of our hidden input fields  
    $('#current_page').val(0);  
    $('#show_per_page').val(show_per_page);  
	
	
	//navigation '  
  
      
    var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';  
    var current_link = 0;  
    while(number_of_pages > current_link){  
        navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';  
        current_link++;  
    }  
    navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';  
  
    $('#navwrapper').html(navigation_html);  
  
    //add active_page class to the first page link  
    $('#navwrapper .page_link:first').addClass('active_page');  
  
    //hide all the elements inside content div  
    $('#wall').children().css('display', 'none');  
  
    //and show the first n (show_per_page) elements  
    $('#wall').children().slice(0, show_per_page).css('display', 'block');  
  
});  

function previous(){  
  
    new_page = parseInt($('#current_page').val()) - 1;  
    //if there is an item before the current active link run the function  
    if($('.active_page').prev('.page_link').length==true){  
        go_to_page(new_page);  
    }    
}  

function next(){  
    new_page = parseInt($('#current_page').val()) + 1;  
    //if there is an item after the current active link run the function  
    if($('.active_page').next('.page_link').length==true){  
        go_to_page(new_page);  
    }  
} 

function go_to_page(page_num){  
    //get the number of items shown per page  
    var show_per_page = parseInt($('#show_per_page').val());  
  
    //get the element number where to start the slice from  
    start_from = page_num * show_per_page;  
  
    //get the element number where to end the slice  
    end_on = start_from + show_per_page;  
  
    //hide all children elements of content div, get specific items and show them  
    $('#wall').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');  
  
    /*get the page link that has longdesc attribute of the current page and add active_page class to it 
    and remove that class from previously active page link*/  
    $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');  
  
    //update the current page input field  
    $('#current_page').val(page_num);  
}

but all looks cool but... it is actually not working... everything its being posted great to the unsorted listt, but its not paging =S. .. it just all shows on the div, and scrolls.

Could it be somethign on the css? ... or... what ...? =|


Guidance? =( . my brains toasted. =\