JavaScript - Need Help With A Couple Of Codes

hey guys. got acouple questions for my website. im more of a html guy.. and i usually find my scripts online. i reeaaallly appreciate all answers!

i have a box:
<img id="imgSearch" src="" alt="Websites" />
<input type="button" value="Toggle Search" id="btnSearch" />
^being the button to toggle between websites.

basically i'd like this button to toggle between different websites when clicked.



secondly:
changing span tag colors

html code:
Traffic Light: <span id="trafficLight"></span>

<input type="button" value="Prevent Accident" id="btnTraffic" />

i'd like to change the color of this span id by pressing the button. so in this case it would change red, yellow green

and last:
changing the font in a bold tag bold by pressing a button

html code: (note, the font weight in normal in css for bold)
<b>i want this bold when you hit the button!</b>
<input type="button" value="Set Bold" id="btnBold" />

I'm totally new when it comes to JavaScript and I'm trying to learn new things. Here I found the codes I tried it and it works but I would like to have comments for the code to understand how they have proceeded.
can someone help me and explain these codes with comments?
I really appreciate it.

Code:

var config = {
    "tags": "vfx+compositing",
    "user": "andreasl",
    "scriptTagTarget": "scriptTagDiv",
    "deliciousTarget": "deliciousLinks",
    "callbackFunction": "fetchDelicious"
};

window.onload = function() {
    var url = 'http://feeds.delicious.com/v2/json/' + config.user + '/' + config.tags + '?callback=' + config.callbackFunction;
    var scriptDiv = document.getElementById(config.scriptTagTarget);
    addScriptTag(url, scriptDiv);
};



function addScriptTag(url, scriptDiv) {

    if (scriptDiv.hasChildNodes())
    {
        scriptDiv.removeChild(scriptDiv.firstChild)
    };

    var scriptElement = document.createElement('script');
    scriptElement.setAttribute('src', url);
    scriptDiv.appendChild(scriptElement);
}


function fetchDelicious(json) {
	var html = "";
	for (var i = 0; i < json.length; i++) {
		var uri = json[i].u;
		var description = json[i].d;
		var tags = json[i].t; //array
		var time = json[i].dt; 
		//var n = json[i].n; //new?
		var author = json[i].a;
		var bHtml = "<li><a href=\":u\">:d</a>:t</li>".replace(":u", uri).replace(":d", description); 
		var tagHtml = ""; 
		for(var n = 0; n < tags.length; n++)  { 
		tagHtml += "<li><a href=\"http://delicious.com/:u\">:d</a></li>".replace(":u", [author,tags[n]].join("/")).replace(":d", tags[n]); 
		}
		tagHtml = "<ul>" + tagHtml + "</ul>";
		html += bHtml.replace(":t", tagHtml); 
	}
	html = "<ul>" + html + "</ul>"; 
	document.getElementById(config.deliciousTarget).innerHTML = html;
   

}

Hi, I am making game calculator but i am having problem with coding...

.::Java script::.

Code:

<script language="javascript">
function temp(form)
{
  var a = (form.DegF.value);
  var b = (form.DegF2.value);
  var c = (form.DegF3.value);
  var d = (form.DegF4.value);
  var e= (form.DegF5.value);
  var f= (form.DegF6.value);
  var g= (form.DegF7.value);
  var h= (form.DegF8.value);
  var i= (form.DegF9.value);
  var j= (form.DegF10.value);
  var k= (form.DegF11.value);
  var l= (form.DegF12.value);
  var m= (form.DegF13.value);
  var n= (form.DegF14.value);
  var o= (form.DegF15.value);
   var aa= (Math.pow(a,3));
   var bb= (Math.pow(b,3));
   var cc= (Math.pow(c,3));
   var dd= (Math.pow(d,3));
   var ee= (Math.pow(e,3));
   var ff= (Math.pow(f,3));
   var gg= (Math.pow(g,3));
   var hh= (Math.pow(h,3));
   var ii= (Math.pow(i,3));
   var jj= (Math.pow(j,3));
   var kk= (Math.pow(k,3));
   var ll= (Math.pow(l,3));
   var mm= (Math.pow(m,3));
   var nn= (Math.pow(n,3));
   var oo= (Math.pow(o,3));  
   var q = (aa+bb+cc+dd+ee+ff+gg+hh+ii+jj+kk+ll+mm+nn+oo);
   var y = (aa+bb+cc+dd+ee+ff+gg+hh+ii+jj+kk+ll+mm+nn+oo);  
   form.DegD.value = y
   var p = 0;
   p = (Math.pow(q,1/3)) ;
   z = (Math.round(p));
   form.DegC.value = z
     
}

</script>

.::Html::.

Code:

<form style="text-align:center">
<label>01 <input name=DegF type=text value=0 size=30 maxlength=30 /> </label><br/>
<label>02 <input name=DegF2 type=text value=0 size=30 maxlength=30 /> </label><br/>
<label>03 <input name=DegF3 type=text value=0 size=30 maxlength=30 /> </label><br/>
<label>04 <input name=DegF4 type=text value=0 size=30 maxlength=30 /> </label><br/>
<label>05 <input name=DegF5 type=text value=0 size=30 maxlength=30 /> </label><br/>
<label>06 <input name=DegF6 type=text value=0 size=30 maxlength=30 /> </label><br/>
<label>07 <input name=DegF7 type=text value="0"size=30 maxlength=30 /> </label><br/>
<label>08 <input name=DegF8 type=text value="0"size=30 maxlength=30 /> </label><br/>
<label>09 <input name=DegF9 type=text value="0"size=30 maxlength=30 /> </label><br/>
<label>10 <input name=DegF10 type=text value="0"size=30 maxlength=30 /> </label><br/>
<label>11 <input name=DegF11 type=text value="0"size=30 maxlength=30 /> </label><br/>
<label>12 <input name=DegF12 type=text value="0"size=30 maxlength=30 /> </label><br/>
<label>13 <input name=DegF13 type=text value="0"size=30 maxlength=30 /> </label><br/>
<label>14 <input name=DegF14 type=text value="0"size=30 maxlength=30 /> </label><br/>
<label>15 <input name=DegF15 type=text value="0"size=30 maxlength=30 /></label>
<p><input type=button onclick=temp(this.form) value=Calculate name="calc"/>
<label><input type=reset name=Reset id=Reset value=Clear /></label></p>
<blockquote><p>Total Exp&nbsp;&nbsp; <label><input name=DegD type=text size=40 readonly="readonly" /></label></p>
<p>Total Level <label><input name=DegC type=text size=40 readonly=readonly /></label></p></blockquote>
</form>

Here is the website (Example) :: http://xcyber.netii.net/

.::The problem::.

I want to add +1 if one field is filled or add +2 if two fields are filled or etc... at Total Exp txt field.
I dont know how to code that part.
Your help will be most appreciated!
Thanks for reading...

I was wondering if there was someone who could help me with an easy issue for pro coders. I'm really new to this, but i have tried hard in many hours without any results.

I have an JS code making the navigation on my webpage dynimacly to load. So the url is always index.html and then you can press at the menu you will get dynamicly the content of home.html in one special div called "container". But i was wondering if i could make this div to fade out and in when you click at it. So i find another code that should do it, but i really dont know how to mix them up...

The base code for the ajax load page:
Code:

	<script type="text/javascript">
var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>

And then i use a google api that allowed the functions: fadeIn and fadeOut. So i think i have to take them out of this code and paste it in the one above or something? Because i dont want this whole code below:
Code:

$(document).ready(function(){
	//References
	var sections = $("#dyn");
	var loading = $("#loading");
	var content = $("#content");
	
	//Manage click events
	sections.click(function(){
		//show the loading bar
		showLoading();
		//load selected section
		switch(this.id){
			case "home":
				content.fadeOut();
				content.load("home.php .screen", hideLoading);
				content.fadeIn();
				break;
			case "about":
				content.fadeOut();
				content.load("home.php", hideLoading);
				content.fadeIn();
				break;
			case "interviews":
				content.slideUp();
				content.load("page.php #section_interviews", hideLoading);
				content.slideDown();
				break;
			case "external":
				content.slideUp();
				content.load("page.php", hideLoading);
				content.slideDown();
				break;
			default:
				//hide loading bar if there is no selected section
				hideLoading();
				break;
		}
	});
	
	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}
	
	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});

Hi,

I'm new and I'm new with javascript and I don't know many useful techniques. I'm repeating the same sequence over and over again making the file large. So I was wondering if you could help me compacting the codes below.

Code:

function doSomething1(){var country1=$("#nameC").val();$("#nameC").val(country1+'1');$("#holder12").removeClass().addClass("flag1");$("#country1").addClass('hotkey1').delay(250).queue(function(next){$(this).removeClass("hotkey1");next();});$(document).bind('keydown');};$("#country1").click(function(){shiftpH();doSomething1();});$(document).bind('keydown','1',function(){shiftpH();doSomething1();});
function doSomething2(){var country2=$("#nameC").val();$("#nameC").val(country2+'2');$("#holder12").removeClass().addClass("flag2");$("#country2").addClass('hotkey2').delay(250).queue(function(next){$(this).removeClass("hotkey2");next();});$(document).bind('keydown');};$("#country2").click(function(){shiftpH();doSomething2();});$(document).bind('keydown','2',function(){shiftpH();doSomething2();});
function doSomething3(){var country3=$("#nameC").val();$("#nameC").val(country3+'3');$("#holder12").removeClass().addClass("flag3");$("#country3").addClass('hotkey3').delay(250).queue(function(next){$(this).removeClass("hotkey3");next();});$(document).bind('keydown');};$("#country3").click(function(){shiftpH();doSomething3();});$(document).bind('keydown','3',function(){shiftpH();doSomething3();});
function doSomething4(){var country4=$("#nameC").val();$("#nameC").val(country4+'4');$("#holder12").removeClass().addClass("flag4");$("#country4").addClass('hotkey4').delay(250).queue(function(next){$(this).removeClass("hotkey4");next();});$(document).bind('keydown');};$("#country4").click(function(){shiftpH();doSomething4();});$(document).bind('keydown','4',function(){shiftpH();doSomething4();});

These are only 4 files, there are many. is it possible to do some kind of loop so the filesize reduces?

Hello,

Hello, I am new to javascript. I want to combine those two scripts in one, but unfortunately I cannot do this by myself. The main idea is to take a random youtube link and put it on the player so my website users can watch a random youtube video when they refresh the page. If there is someone who can help me with this problem, I will be really thankful. The two codes that I am strangling with are at the end of this post. Thanks in advance.

Code number one (Random Text Display)
Code:

<script language='JavaScript'>

var r_text = new Array ();
r_text[0] = 'https://www.youtube.com/watch?v=r3k4TopCrS4';
r_text[1] = 'https://www.youtube.com/watch?v=r3k4TopCrS4';
r_text[2] = 'https://www.youtube.com/watch?v=r3k4TopCrS4';
r_text[3] = 'https://www.youtube.com/watch?v=r3k4TopCrS4';
r_text[4] = 'https://www.youtube.com/watch?v=r3k4TopCrS4';
r_text[5] = 'https://www.youtube.com/watch?v=r3k4TopCrS4';
r_text[6] = 'https://www.youtube.com/watch?v=r3k4TopCrS4';
var i = Math.floor(7*Math.random())

document.write(r_text[i]);

</script>

The second code (JW Player)
Code:

<script type='text/javascript'>
    jwplayer('myElement').setup({
        file: 'TUK',
		 width: 290,
    });
</script>

Reply With Quote




01-08-2015, 08:17 PM #2
Philip M View Profile View Forum Posts

Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts

Just put the two scripts within the same set of script tags. Note that <script language='JavaScript'> is long obsolete.


Code:

<script type = "text/javascript">

jwplayer('myElement').setup({
file: 'TUK',
width: 290,

var r_text = new Array ();
r_text[0] = 'https://www.youtube.com/watch?v=r3k4TopCrS4';
r_text[1] = 'https://www.youtube.com/watch?v=r3k4TopCrS4';
r_text[2] = 'https://www.youtube.com/watch?v=r3k4TopCrS4';
r_text[3] = 'https://www.youtube.com/watch?v=r3k4TopCrS4';
r_text[4] = 'https://www.youtube.com/watch?v=r3k4TopCrS4';
r_text[5] = 'https://www.youtube.com/watch?v=r3k4TopCrS4';
r_text[6] = 'https://www.youtube.com/watch?v=r3k4TopCrS4';
var i = Math.floor(7*Math.random())

document.write(r_text[i]);

</script>

I'm using forum with bb rich text editor, the problem that sometimes when a user copy and paste content, there ere extra codes that are not supported like:

Code:

[highlight=#ff0000][/highlight] 
[blockquote][/blockquote] 
[CENTER ALIGN=CENTER][/CENTER ALIGN]

Can you help me to write a script that automatically reformat the html content when pasted and only keeps specified tags like [img],[url],[b], defined in array ...

If it is not possible to reformat content when paste, I can add a button to the editor and call that function to format the content and return plain text with a specific tags.

I tried this script:
Code:

function removeHtmlTag(strx){ 
	if(strx.indexOf("[")!=-1)
	{
		var s = strx.split("["); 
		for(var i=0;i<s.length;i++){ 
			if(s[i].indexOf("]")!=-1){ 
				s[i] = s[i].substring(s[i].indexOf("]")+1,s[i].length); 
			} 
		} 
		strx =  s.join(""); 
	}
	return strx+''; 
}

It made to strip html tags, I replaced <> with [], It removes all tags and don't put space instead of the removed tags,

example: Code:

hello[h1]Name[/h1]

Will be like : helloName ???

I got an idea to make a stupid trick, like converting [IMG] to {IMG} and run that function and re convert {IMG} to [IMG] ...

Please help, I'm not good in Regular Expressions.

Thanks for your time,
Regards.

Hi all,

I have made some codes that I want to assemble into one script. However, the codes run perfectly separately but when assembled together under one script, they throw up different sorts of errors. I am assembling different functions into one script, with a global variable as my first line. Any ideas how I could fix this?

Is there any way to use javascript to strip codes or text from a webpage.

I am new to using Javascript. Can someone help me combine these two codes? I can't get it to work.

[code]

body {background-color: #FFFFee;}
.c
{
position: absolute;
font-size: 1px;
background:red;
height: 2px;
width: 2px;
}
.d
{
position: absolute;
font-size: 1px;
background:blue;
height: 2px;
width: 2px;
}
</style>
</head> <body>
<script language="javascript">
var i,y,x,y1;
for (i=1; i<600; i++)
{
y=150-100*Math.sin(i/50);
y1=150-100*Math.cos(i/50);
x=i+50;
document.write("<span class='c' style='left:"+x+";top:"+y+";'></span>");
document.write("<span class='d' style='left:"+x+";top:"+y1+";'></span>");

}

[code]


with this one.

[code]

.moveimage
{
position:absolute;
left:20; top:50;
z-index:2;
}

</style>
<script language="JavaScript">


var fishLeft = 20;
var imgWidth = 106;

function moveFish()
{
var elem = document.getElementById("myDiv");
fishLeft+=4;
if(fishLeft > document.body.clientWidth + (imgWidth / 2))
fishLeft = imgWidth / 2;

elem.style.left = fishLeft;
window.status= fishLeft ;
setTimeout("moveFish()", 100);
}

</script>
<title></title>
</head>
<body>

<br>
<div id="myDiv" class="moveImage"><img src="fish1.gif"></div>
<br><br><br><br><br><br><br><br><br>

<input type="button" value="Move Fish" onClick="moveFish()" ID="Button1" NAME="Button1">

[code]

Hi, my users will be filling in a text box, and its contents will be forwarded to another page via a form link. I keep coming across new instances of characters getting converted to %2 codes, eg ! gets changed to %21, ' gets changed to %2C etc. At the moment I am replacing these with javascript on the receiving page, but this can't be the best way to do it. And I don't really understand why it happens anyway. Is there a way of making sure what gets typed in gets forwarded correctly? Or failing that, is there a list I can use to find them all? Thanks, Tim.

Code:

script language-Javascript type=text/javascript>
<!--
	function GoToNextPage(inputcode) {

var secretcode=   /// how do I tell the function the value from the input text field is the var value 

if (secretcode=="correctstring") {
     getURL("http://www.mywebpage.com/page2.hmtl",_self);
      }
      else {
///need to send "Try again" to the third input field in the form
}
}
//-->
</script>

The HTML:

<form name="secretcode" method="get">
<input type=text name="inputcode" value="Enter Code">
<input type=submit name="submit">
<input type=text name="Try again" value="">
</form>

Hello,
I know I should have some code for people to debug, but I am in need of some code quickly. Here is the situation. I am going to propose to my girfriend this weekend. I am sending her on a scavenger hunt of our past during which she will get secret codes that will unlock the next clue. The clues will be video on her iphone on a website I am building. I am fine with video for web (html5 is amazing in this situation). what I cannot wrap my head around is javascript.

So here is what I think I need. I would have to have a form with an input text field for the secret code, a submit button to take in the string and send it to a javascript function that will determine if it is correct or not. If correct it will link to a new page (next in sequence) in the same window. If wrong, it will return a Try Again string in a third input element.

so I thought of trying this...



I am sure this is no where near right and there are some obvious holes in it. Can anyone help, please? You would be saving me a lot of headache. I have a lot of videos to shoot and get edited for the clues...

Cheers.
Anthony

Hi I need to access and edit html codes that belong to another file.

index.html
Code:

<tr>
          <td width="120"><a href=" pic1.html " rel="lyteframe[group]" title="" rev="width: 780px;  height: 480px; scrolling: no;"><img src="images/pic1_tn.jpg" width="120" height="60" border="0"></a></td>
          <td width="120"><a href="pic2.html" rel="lyteframe[group]" title="" rev="width: 780px;  height: 480px; scrolling: no;"><img src="images/pic2_tn.jpg" width="120" height="60" border="0"></a></td>     
</tr>

Example:
For the above I want to change the pic1.html to pic6.html. I have a file Helper.html that will change this value on a click of a button. How do I go about doing that?

Regards,

I am developing a web application based on a Java servlet. The servlet outputs html and javascript codes and receives some result from a thread, which works behind the servlet.
Thus, html and javascript codes dynamically varies.

While result equals null (a thread is not completed), it shows "Currently processing," and refreshes Code:

<div id="load"> - </div>

every second automatically.
After receiving some results, it should stop automatic refreshing and show "Done."

I wrote source codes described below. It shows "Done" after getting some results, but does not stop refreshing.
However, when I manually refresh the page (Ctrl-R), the script is loaded and reloading is stopped.

How can I pull javascript codes automatically?

Code:

<head>
<script type=\"text/javascript\">
var auto_refresh = setInterval(
function start()
{
$('#load').load('./Page' + ' #load');
}, 1000);
</script>           
</head>

<div id="load">
if (result == null) {
    // the variable result is received from a behind thread every second. 
    // while a thread is processed
    <p>Currently processing. <p>
    
} else {
    // a thread is completed

    // try to stop reloading
    <script type=\"text/javascript\">
    clearInterval(auto_refresh);
    </script> 

    <p>Done. <p>
} 
</div>

I am trying to use these two js codes in one page:


http://acrisdesign.com/2010/03/jquer...on-hoverclick/

http://www.huddletogether.com/projects/lightbox2/

They both work perfectly fine except when both linked up at the same time. Only the last one will work. I've tried to find how the codes are working when the page loads in order to fix that problem but I cant figure it out for these two specific codes.

Thanks.