JavaScript - Noob Javascript Ie Compatibility Problem

hi all
i'm kind of new to the JS world and need your help with some thing i hope it not that big to ask.

if you go to linkedin website with your user (www.linkedin.com) you will see a bar called LinkedIn Today.

what i need is this kind of bar but with messages changing all the time(moving)
is this some thing i need to write from scratch or there some example that i can use?

any help will be good for me now because i need to do it ASAP

regards,shay

I'm quite new to JavaScript, but I wanted to add a feature to a sample website that I need to have done by tomorrow night.

I have two HTML paragraphs which I will call "a" and "b".

Below those paragraphs I have a text box and a submit button.

This is how I declared them in the HTML doc:
Code:

<input type="text" name="message" value="Blank Message" id="newsmessage" />

Code:

<input type="button" value="Post" id="submitbutton" onclick="updatepost()" />

Now when I click the submit button I want paragraph b to replace itself with paragraph a, and I want paragraph a to replace itself with the text in the text box.

Here's the JavaScript that I have written. (I'm aware it's probably quite off.)
Note: paragraph a is toppost, paragraph b is bottompost, the text box is named message, and I created p1 and p2 as temporary holders for the strings. Err... variables.

Code:

<script type="text/javascript">
    function updatepost()
    {
	p2=document.getElementById("toppost");
	document.getElementById("bottompost").innerHTML=p2;
	p1=document.message.elements[i];
	document.getElementById("toppost").innerHTML=p1;
    }
</script>

As of right now the paragraph a holds the text "a" and paragraph b holds the text "b". When I click post paragraph a still reads "a" and paragraph b reads "[object HTMLParagraphElement]".

Sorry for my minimal JavaScript knowledge; I have full intentions of fully learning the language quite soon.
I just wanted to implement this feature in a site that I had to create and my deadline is tomorrow.

Thanks guys!
-Dave

I have a slideshow that goes through pictures once you click on the Play button and doesn't stop until you press on the Stop button. How can I make it so that it automatically plays once the website loads without having to click on the Play button?

Heres the code:


Code:

<div class="tabs png"><span class="tabs-inner"><a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a></span></div>

<div class="slider-indent-button">
<a href="#"  onClick='$("div.tabs").tabs().play();'>Play</a>
<a href="#"  onClick='$("div.tabs").tabs().stop();'>Stop</a>
</div>

All help is much appreciated!!!

I am working on a site for an online radio station and I want an external player to launch on site visit and to continue playing as the visitors surf my site.

I feel I am 95% there as I have the player spawning on launch and checking for popup blockers.

If a popup blocker is found the user is prompted to add my domain to their allowed lists so that future visits will launch the player right out of the box.

My problem is this. When someone navigates back to the "home" page (where the script is located the external player window reloads and I do not want it to.

I have found a couple of sites that say do this and that but I am a 100% novice at javascript and can not figure it out.

here is the url of the site I am building http://www.radiotrips.com/czmradio - If you have popup blocker on you should get an alert. If not a small player should launch

here is the code that I am using to spawn the external player and check for popup blockers

**************

<script language="javascript" type="text/javascript">

function detectPopupBlocker() {
var czmTest = window.open("http://www.radiotrips.com/czmradio/player/mini/no_ads.html","Cozumel Radio","width=478,height=260");
if (!czmTest) {
alert("We were unable to automatically open the Cozumel Radio Player due to your pop-up blocker... Please add CozumelRadio.net to your allowed sites for your best listening experience");
} else {
window.open("http://www.radiotrips.com/czmradio/player/mini/no_ads.html","Cozumel Radio","width=478,height=260");
}
}

**************

if anyone could add the code that would make the browser check to see if this window is already open and if so not reload it I would GREATLY appreciate it.

I feel like it is 1 to 2 lines of code max according to what I have seen elsewhere but just cant figure it out.

Thanks a Million in advance
Chris

Hey,
I've got to make the values of some textboxes change the co-ordinates of my sprite on a canvas and havent a clue on how to do it,

Here is my form with the two textboxes and submit button:
<form>
x: <input type="text" name="x" /><br />
y: <input type="text" name:"y" /><br />
<input type="submit" value="Submit"/><br />
</form>

And i need it so that they change the values of these:

//this shows where my sprite will start on the canvas
var block_x;
var block_y;
searched the internet for hours and cant really find anything i understand or works.
any help is much appreciated

Hello all.

I am doing an experiment with setTimeout for a much larger project and cant seem to get this bit of code working. What is "supposed" to happen is on hover the div goes black, and on removing the mouse it turns red after 1 second. however, it doesnt work. ive tried a bunch of variations but nothing gets it to work. i want to line up a bunch of divs and not need to write a seperate function for each one. any ideas?

here is the HTML:

Code:

<div id="0" onMouseOver="blackit('0')" onMouseOut="fadeit('0')"></div>
<div id="1" onMouseOver="blackit('1')" onMouseOut="fadeit('1')"></div>
<div id="2" onMouseOver="blackit('2')" onMouseOut="fadeit('2')"></div>
<div id="3" onMouseOver="blackit('3')" onMouseOut="fadeit('3')"></div>

here is the JavaScript:
Code:

function blackit(elemID)
{
document.getElementById(elemID).style.backgroundColor="#000";
}

function fadeit(elemID)
{
setTimeout("document.getElementById(elemID).style.backgroundColor='red'", 1000);
}

there is some CSS but nothing crazy. it should work but it doesnt. the black on hover works but then it either stays black or goes red immediately, not waiting the 1 second.

thanks

I adapted (well, attempted to, at least) a quote/testimonial rotation script to fit into my website. The script works PERFECTLY on Firefox but after making my modifications, I killed it in IE...and being a total n00b to JavaScripting.....I'm totally stumped.

In Firefox, the script shows at the proper height. In Internet Explorer, the script is only shown at ~40 pixels and doesn't seem to be rotating through the different quotes (it still fades but it fades the same quote back and forth).

The obvious question: HOW DO I FIX IT?!!?

Original script was found at: http://www.caodesigns.com/blog/tutor....php?postID=33

My script is at: http://www.digitalctrl.org/help.html (right sidebar, in the "Testimonials" box).

But something I want to know for future reference.......what is it that causes things to be formatted differently across browsers? This cross browser INcompatability is giving me grey hairs.

I've been lurking around your community for a while now.....I hope you gents don't mind my first post being a question.

If I need to reformat my post or do anything else to get assistance, please let me know so I can take care of it.

Hi all,

ok firstly i know all but nothing about javascript and you prob about to see the worst attempt eva at trying to understand it

ok so here is my js code
Code:

<script language="javascript">
function selectElement(idElement)
{
	var ratingval = "";
	liElement = document.getElementById('sel'+idElement);
	lirating = document.ratingform.userrating.value;
	if(liElement == "sel1")
	{
		raingval = "1";
		lirating = "1";
	}
	if(liElement == "sel2")
	{
		raingval = "2";
		lirating = "2";
	}
	if(liElement == "sel3")
	{
		raingval = "3";
		lirating = "3";
	}
	if(liElement == "sel4")
	{
		raingval = "4";
		lirating = "4";
	}
	if(liElement == "sel5")
	{
		raingval = "5";
		lirating = "5";
	}
}
</script>

and here is my html code
Code:

	<form name="ratingform" action="" method="post">
		<fieldset class="login">
			<legend>Personal Details</legend>
			<div>
				<label for="fname">First Name</label> <input type="text" id="fname" name="fname" value="<?php if(isset($_POST['fname'])){ echo $_POST['fname'];}?>"> 
			</div>
			<div>
				<label for="lname">Surname</label> <input type="text" id="lname" name="lname" value="<?php if(isset($_POST['fname'])){ echo $_POST['lname'];}?>">
			</div>
		</fieldset>
		<fieldset class="contact">
			<legend>Review</legend>
			<div>
				<label for="title">Review Title</label> <input type="text" id="title" name="title" value="<?php if(isset($_POST['title'])){ echo $_POST['title'];}?>">
			</div>
			<div>
				<label for="review">Review</label> <textarea name="review" id="review" cols="33" rows="5"><?php if(isset($_POST['review'])){ echo $_POST['review'];}?></textarea>
			</div>
		</fieldset>
		<fieldset class="rating2">
			<legend>Rating</legend>
			<div>
				<label for="rating">User Rating</label>
                <ul class="rating">
                <li id="current" class="current" style="width: <?php echo $_GET['rating']?>em;"></li>
                <li id="sel1"><a onclick='onClick="javascript:selectElement(1)' class="rate1" title="I hated it">*</a></li>
                <li id="sel2"><a href="?rating=2" class="rate2" title="I disliked it">*</a></li>
                <li id="sel3"><a href="?rating=3" class="rate3" title="It was OK">*</a></li>
                <li id="sel4"><a href="?rating=4" class="rate4" title="I liked it">*</a></li>
                <li id="sel5"><a href="?rating=5" class="rate5" title="I loved it">*</a></li>
                </ul>
			</div>
		</fieldset>
		<div>
        <input type="hidden" name="userrating" value="" />
        <input type="submit" name="Submit" value="Submit"><?php if($error == TRUE){echo $message;}if($submit == TRUE && $error == FALSE){echo $message;}?></div>
	</form>

ok so what im trying to acheive is that when a user clicks on either of the rating links, a js function is run which gets the li value and then sets a value of a varible to match the li value and then i want to add that value to the hidden userrating form input and set the value of <li id"current" width value to the same value

but as im sure youve noticed from my code it isnt working.

any help it greatly needed and appreciated,
thanks
Luke

I have a page that open two frames. Second frame, most of the page, is empty. First frame contains a form that retrieves user input, when you click the button, it send that input back to the original parent html, which detects the GET parameters, and builds a custom URL.

I want to then load that custom URL in the 2nd empty frame. I figure I need to modify the src atttribute of the 2nd frame in the frameset, but I can't make it work.

Code:

<frameset id='parent' rows='10%,90%'>
    <frame id='frm1' src='./form.html' />
    <frame id='frm2' src='' />
</frameset>
<script>modFrmSrc();</script>

where modFrmSrc() checks for the GET values, builds the URL, and then tries to load the URL in frm2.

Is there a way to get this done?

Hi all,

I sincerely apologise for the noob question. I have search and searched for an answer but to no avail, so I hope someone on here can help.

I'm trying to get a fisheye verticle menu working. I've found somethin which fits the requirement he http://zendold.lojcomm.com.br/ifisheye/ and tried to make it work. It just doesn't.

I've tried different versions of mootools etc but I think I'm missing something really stupidky simple. I'd really appreciate it if someone could have a look at my temp page (http://www.parkerbs.com/home1.htm) and point me in the right direction.

Many thanks in advance.

Paul

I've only just stated to teaching myself the general basics of web development, and I've hit a problem which I haven't been able to fix, even after some extensive research I haven't found a solution. The problem is not in the HTML I'm quite sure, hence why I deemed this to be the best place to post this. I'm sorry for wasting your time on something stupid like this, but I'm completely lost! Extra: I really couldn't think of a title that could describe this 'problem', my bad.

Description: When clicking the calculate button nothing happens, but when I changed the code inthere to something easy (just print a line in a HTML paragraph) it worked. So by that I was able to deduce the problem lies somewhere in the Javascript.

Code:

<!DOCTYPE html>
<html>
<body>

<div>
<form>
<fieldset>
<h1>Quadratic equation</h1>
a:<input type="text" id="a" name="a"><br><br>
b:<input type="text" id="b" name="b"><br><br>
c:<input type="text" id="c" name="c"><br><br>
<button type="button" onclick="vkv()">Calculate</button>
</fieldset><br>
<fieldset>
<p id="output">Answer appears here</p>
</fieldset>
</form>
</div>

<script>
function vkv() {
    var a = document.getElementById(a);
	var b = document.getElementById(b);
	var c = document.getElementById(c);
	var D = pow(b,2) - 4 * a * c;
	if (D >= 0){
	    var x1 = (-b + sqrt(D)) / (2 * a);
		var x2 = (-b - sqrt(D)) / (2 * a);
		if (x1 == x2) {
		    document.getElementById("output").innerHTML = "Value for x is:" + x1 + ".";
		} else {
		    document.getElementById("output").innerHTML = "Values for x a " + x1 + " en " + x2 + ".";
		}
	} else {
	    document.getElementById("output").innerHTML = "Discriminant is negative, " + D + ".";
	}
}
</script>

</body>
</html>

Reply With Quote




02-03-2015, 10:31 PM #2
jmrker View Profile View Forum Posts

Senior Coder Join Date Aug 2006 Location FL Posts 3,175 Thanks 39 Thanked 510 Times in 504 Posts

Welcome to the forum...

NOTE: I have not tested the logic of your code to see if it give the right answers,
but this should get you started by at least seeing some results displayed.

Primary problem was not using Math. before the math commands like pow and sqrt.

Also, need quotes around id values in the document.getElementById statements
And those statements require a value associated with the element
Plus, it returns a string, hence the need for a Number() function or some other string to conversion.

It is always a good idea to check the error console on most browsers to get an idea of the simple problems.
That's where I found most of your errors.

Code:

<!DOCTYPE html>
<html>
<body>

<div>
<form>
<fieldset>
<h1>Quadratic equation</h1>
a:<input type="text" id="a"><br><br>
b:<input type="text" id="b"><br><br>
c:<input type="text" id="c"><br><br>
<button type="button" onclick="vkv()">Calculate</button>
</fieldset><br>

<fieldset>
<p id="output">Answer appears here</p>
</fieldset>
</form>
</div>

<script>
function vkv() {
  var a = Number(document.getElementById('a').value);
  var b = Number(document.getElementById('b').value);
  var c = Number(document.getElementById('c').value);
  var D = Math.pow(b,2) - 4 * a * c;
  if (D >= 0){
    var x1 = (-b + Math.sqrt(D)) / (2 * a);
    var x2 = (-b - Math.sqrt(D)) / (2 * a);
    if (x1 == x2) {
      document.getElementById("output").innerHTML = "Value for x is:" + x1 + ".";
    } else {
      document.getElementById("output").innerHTML = "Values for x a " + x1 + " en " + x2 + ".";
    }
  } else {
    document.getElementById("output").innerHTML = "Discriminant is negative, " + D + ".";
  }
}
</script>

</body>
</html>

Good Luck!

I'm having a problem.
All i want to happen is this:
The program asks you what's up.
It gives you a prompt and the prompt message tells you to say "nm" (it means nothing much)
And the if statement is that if you put nm into that prompt, it'll display a message.

However, when i put in the prompt, even if i put in a bogus message, it'll still display the if statement. What do i do?

Here's my code.

Code:

<html>
<head>
<title> The nothing much page! </title>
<script type="text/javascript">
var nmj;
alert("what's up man?");
var nmj = prompt("say nm , it means nothing much");
if (nmj = "nm")
{
	alert("What!? Nothing much!? Sounds boring.")
}
alert(nmj);
</script>
</head>
<body>

NOTHING MUCH? WHATTT!?!?
</body>
</html>

Hi all,

I'm desperately trying to figure out how to "transform" Javascript commands into HTML code. Excuse my noobness but I really know nothing about Javascript.

Basically, I have this Google API Search code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>My Google AJAX Search API Application</title>
    <script src="http://www.google.com/jsapi?key=CUT"></script>
    <script language="Javascript" type="text/javascript">
    //<![CDATA[

    google.load("search", "1");

    function OnLoad() {
      // Create a search control
      var searchControl = new google.search.SearchControl();

      // Add in a full set of searchers
      var localSearch = new google.search.LocalSearch();
      searchControl.addSearcher(localSearch);
      searchControl.addSearcher(new google.search.WebSearch());
      searchControl.addSearcher(new google.search.VideoSearch());
      searchControl.addSearcher(new google.search.BlogSearch());

      // Set the Local Search center point
      localSearch.setCenterPoint("New York, NY");

      // Tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementById("searchcontrol"));

      // Execute an inital search
      searchControl.execute("Google");
    }
    google.setOnLoadCallback(OnLoad);

    //]]>
    </script>
  </head>
  <body>
    <div id="searchcontrol">Loading...</div>
  </body>
</html>

Now, what I'm desperately trying to do since 4-5 hours is to have the search results between the <div id="searchcontrol"></div> encoded as HTML in the loaded page.

Currently, when the page is loaded and I look at the source code, I have the word 'Loading...' in the <div> tags, despite in the normal view there are G results listed.

I need those results encoded as HTML for SEO reasons.

Researching on this matter I thought the problem could be the OnLoad command, that makes the script load after all the other HTML elements are loaded. But I tried to make it load before all the elements in the page, and the problem persists.

How can I solve this?

Thanks in advance for any help!

Hello everybody!

This is my first post at CodingForums!

I'm currently designing a wordpress theme, and I require a bit of javascript for a hover effect. I'm using Wordpress Jquery + Jquery Color Animations plugin.

The structu
I use a div (class="post") as a container for the wordpress post, and within the "post" div, I have a span (class="title") which I use to display the title of the post.

What I want to do is:
when the user hovers over (OnMouseOver) "post" div:
".title" spans's background color fades from black to red.

when the user hovers out (OnMouserOut) "post" div:
".title" spans's background color fades back to black.

The Code

Code:

$j(document).ready(function(){
	$j(".posts").hover(function(){
	$j (".posts .title").animate({ backgroundColor: "#FF0062" }, 300);
	},function(){
	$j(".posts .title").animate({ backgroundColor: "#231F20" }, 300);
	});
	});

The Problem

The code works, except when the user hovers over any "post" div, all "title" span change color. So my question is, how do I target the code to address ONLY the "title" span in the "post" div that is in hover state?


Any help would be greatly appreciated,

Cheers,

Drew.

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!