JavaScript - Display Result On Same Page??

Hi,

I am using Javascript to display options in a form with 2 dropdown lists. However, despite using the rel="nofollow" target='_self', the result opens in a new window. Help would be much appreciated.

Code:

// JavaScript Document
function setOptions(chosen) {
var selbox = document.ChronoContact_course_finder.opttwo;
 
selbox.options.length = 0;
if (chosen == ' ') {
  selbox.options[selbox.options.length] = new Option('Choose Option',' ');
 
}
if (chosen == '85') {
  selbox.options[selbox.options.length] = new Option('ITEC Beauty Specialist Diploma','index.php?option=com_content&view=article&id=49&Itemid=68',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('ITEC Professional Makeup','index.php?option=com_content&view=article&id=57&Itemid=76',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('Fashion Catwalk & Photographic Makeup Course','index.php?option=com_content&view=article&id=67&Itemid=91',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('Bridal Makeup Course','index.php?option=com_content&view=article&id=68&Itemid=92',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('Special Effects Makeup','index.php?option=com_content&view=article&id=56&Itemid=77',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('Gel Nails Course','index.php?option=com_content&view=article&id=65&Itemid=88',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('Acrylic Nails Course','index.php?option=com_content&view=article&id=66&Itemid=89',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('Spray Tanning Course','index.php?option=com_content&view=article&id=55&Itemid=73',rel="nofollow" target='_self');  
}
if (chosen == '69') {
  selbox.options[selbox.options.length] = new Option('ITEC Holistic Massage Course','index.php?option=com_content&view=article&id=51&Itemid=2',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('ITEC Sports Massage Diploma','index.php?option=com_content&view=article&id=59&Itemid=78',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('Indian Head Massage Course','index.php?option=com_content&view=article&id=60&Itemid=79',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('ITEC Reflexology Diploma','index.php?option=com_content&view=article&id=64&Itemid=87',rel="nofollow" target='_self');
}
if (chosen == '80') {
  selbox.options[selbox.options.length] = new Option('ITEC Teaching Diploma','index.php?option=com_content&view=article&id=61&Itemid=81',rel="nofollow" target='_self');
  selbox.options[selbox.options.length] = new Option('FETAC Train The Trainer Level 6','index.php?option=com_content&view=article&id=63&Itemid=86',rel="nofollow" target='_self');
}
if (chosen == '83') {
  selbox.options[selbox.options.length] = new Option('ITEC Sports Massage Diploma','index.php?option=com_content&view=article&id=59&Itemid=90',rel="nofollow" target='_self');

}
}

And the HTML...

Code:

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">course finder</h1>
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 200px;">Step 1: Choose type of course</label>
    <select name="optone" class="cf_inputbox" size="1" onchange="setOptions(document.ChronoContact_course_finder.optone.options[document.ChronoContact_course_finder.optone.selectedIndex].value);">
      <option value=" " selected="selected">Choose Option</option>
      <option value="85">Beauty courses</option>
	  <option value="69">Complimentary courses</option>
	  <option value="80">Teaching courses</option>
	  <option value="83">Fitness courses</option>	  

    </select>
    
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 200px;">Step 2: Choose a subject</label>
    <select size="1" name="opttwo" class="cf_inputbox" >
    <option value=" " selected="selected">Choose Option</option>
      
    </select>
    <!--<input type="button" name="go" value="Value Selected" onclick="window.open(document.ChronoContact_course_finder.opttwo.options[document.ChronoContact_course_finder.opttwo.selectedIndex].value);">-->
  </div>
  <div class="cfclear">&nbsp;</div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input type="submit" name="go" value="search" onclick="window.open(document.ChronoContact_course_finder.opttwo.options[document.ChronoContact_course_finder.opttwo.selectedIndex].value);">
  </div>
  <div class="cfclear">&nbsp;</div>
    
</div>

Many thanks,
Paul

Hi,

I am Aditya. I am explaining below the exact scenario where I need the help:

I am developing a web application in which I need to integrate a javascript/html editor on some of the web pages and then provide 'Edit' buttons on those web pages so that users can edit the content on that partciular html/jsp page (like editing in wiki pages) and then, when they add some content and click on submit button, the new content should appear on the web page with all the formatting (i.e. bold, italics, color and so on) which was applied by user when he was entering the text.
Now, I need help for the below issues:
1. Please suggest me a good javascript/html editor (freely downloadable) which I can use to integrate with my web pages.
2. Once the user has entered some content using the above javascript editor, how to make that content reach the server and update the corresponding web page.

I am new to web development, so may be that these questions are too simple.
But, I need some help from you.

Waiting for your reply,

Thanks,
Aditya

Hi there!
I am using GlassBox "http://www.glassbox-js.com/" As a light box on a website. Basically, You click an thumbnail image, and a window pops up with a larger version of that image.

Now originally, the window opened X number of pixels from the top of the page. However, My thumbnail images were located mid page, so when you clicked on one, the window would open at the top of the page and the user would not see it unless they scrolled up.

So I attempted to modify the script so that it would get the users page width/height and display it directly in the center no matter the position.

Now my problem is that the script only works when the user has already scrolled down. So if the page is scrolled all the way to the top, and you click on a thumbnail, the window will not open center screen.

Here is an example: http://synaxis.pcriot.com/

When the page loads, DO NOT scroll it, and click on the image. You will see the window pop up, and not centered, like it should be. However, now if you scroll down, and click the image again, you see that it is now centered. I also noticed that when the page is scrolled up, and the image does not center, it always is placed below the thumbnail image, or otherwise where ever the DIV is located. It normally located under the image, but if i place the DIV at the top of the page then the window will pop up there.
And this does happen on every browser that I have tested, Firefox, IE, and Chrome.

So, I am pretty much stumped as to why this is happening. If anyone can shed some light I would be very grateful.

Thank You



Here is a link to the original code:
http://synaxis.pcriot.com/javascript...ox/glassbox.js

And modified code:
http://synaxis.pcriot.com/javascript...ox/glassbox.js

The modified code is at the very bottom of the script.

Original Code:
Code:

/** 
* @public 
*/
if ( typeof($) == 'undefined' ) {
  $ = function (id) {
    return document.getElementById(id);
  }
}

Modified Code

Code:

/** 
* @private 
*/
var removeElement = function(id) {
	var Node = document.getElementById(id);
	Node.parentNode.removeChild(Node);
}

/** 
* @private 
*/
var getDocHeight = function() {
	var db = document.body;
	var ddE = document.documentElement;
    return Math.max(
        db.scrollHeight, db.offsetHeight, db.clientHeight, 
        ddE.scrollHeight, ddE.offsetHeight, ddE.clientHeight
    );
}
/** 
* @public 
*/
if ( typeof($) == 'undefined' ) {
  $ = function (id) {
    return document.getElementById(id);
  }
}

Hi All,
Im new to this forum...need some of your help and advice.

I have a js code like this :

<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {

$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;
e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

what it does is that it hide and show a panel by slidint it to the left.

But my client want that on page load the panel opens automatically for about 2-3 seconds just to let users know that its here. So ive written this :

<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {
var autoTimer = null;
autoTimer = setTimeout(function(){
$("#panel").animate({ left: sipPos });
autoTimer = setTimeout(function(){
$("#panel").animate({ left: sipPos = -856 });
}, 2000);
},1000);

$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;
e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

But when the panel finished showing the button to open it again doesn't work...any help please..really urgent.
thks

//Sam

Hi There,

I am attempting to do a site which is of a similar format to a TV listings website.

Each day's schedule will be on a different HTM page (contained within an iFrame), and I would like it to display the current day's schedule on the appropriate day.

I have searched the forum, but can't find anything exactly like this (maybe I'm searching for the wrong thing), so any answers greatly appreciated.

Thanks,
Roz

javascript2.js

Code:

function displayMessage(msg) {

	// Open a new window 
var msgWindow = window.open('', 'Message');
 
  // Write message in the new Window 
  msgWindow.document.write(msg);

  // Raise this window, in case it's not visible
  msgWindow.focus();
  
}

//Enter total number of questions:
var totalquestions=13

var correctchoices=new Array("a","a","b","c","b","c","a","a","b","c","a","b","b");


var correctanswers=new Array("memory locations","_ underscore","x=5+5;","20","Else","lose win","ticker = ticker + 1;","Ticker = ticker + 1;","300.000","Jonathon \b","var","var counter;","var mark = 50, 70");


function gradeit(){
var actualchoices=new Array()
var msg1=new Array()
var correctanswersno=0
var t=0
var displaycorrectanswers=""
for (q=1;q<=totalquestions;q++){
	var thequestion=eval("document.Questionform.q"+q)
	
	for (c=0;c<thequestion.length;c++){
		if (thequestion[c].checked==true)
		actualchoices[q]=thequestion[c].value
		}
		
	if (actualchoices[q]==correctchoices[q]){
		msg1[t]=q+")"+" Correct";
		correctanswersno = correctanswersno + 1;
		t = t + 1;
		} else {
		msg1[t]=q+")"+" Incorrect: <br>Correct Answer: "+correctchoices[q]+") "+correctanswers[q];
		t = t + 1;
		}
	}
	
for (p=0;p<=12;p++){
displaycorrectanswers+="<br>"+msg1[p];
}
	
	

var msg="Sco  "+correctanswersno+"/"+totalquestions+" <br><br>Marks: "+displaycorrectanswers;
displayMessage(msg);

}

Basically on my index page it has a button which when clicked makes use of gradeit(). Currently this then used displayMessage(msg) which opens a new window and displays the message.

However, what I want it to do is to open another created html page e.g. answer.html and then for this page to display the message. How do i do this?

Currently the page has some divs' displays set to none. When a user clicks an anchored link, it displays the appropriate div.

Here is the script I'm currently using, which works fine:
Code:

function showApp(whichApp) {
	document.getElementById('dTips').style.display='none';
	document.getElementById('dCaseStudies').style.display='none';
	document.getElementById('dWebinars').style.display='none';
	document.getElementById('dReports').style.display='none';
	document.getElementById('dDigimags').style.display='none';
	document.getElementById('dPodcasts').style.display='none';
	document.getElementById('dNews').style.display='none';
	document.getElementById('dCalendar').style.display='none';

	if (document.getElementById) {
		document.getElementById(whichApp).style.display='block';
	}
}

Here's how I call it within the page:
Code:

<a href="javascript:showApp('dTips')">Tips</a>

Is there any way to modify it so that if the user clicks a link on a different page, it goes to the APPS page and displays the requested div? If not, is there another way to accomplish this task?

Hi. I am pretty sure this requires js, but if not and I am posting in the wrong section, I am sorry. Let me try to explain my situation so you know what i'm trying to accomplish. I am hosting a site on a home pc. My isp blocks inbound port 80 so I use no-ip services and port 80 redirect and cloak the address because it displays my ip instead of the domain name. For example, without the cloak it will show http://xxx.xxx.xxx.xxx:81/index.php instead of http://mydomain.com/index.php

I would like to display the current page the user is on somewhere on the page.

Example:
You are currently viewing index.php

How would I be able to accomplish this?

I know that when you "display: none" with CSS it will not show the div content in the browser, but will still show the div and content in page source.

Is there a way (via javascript or anything else) to also remove the content from page source at the same time?

Thanks.

Hello,

I have an issue. I can't seem to extract XML from an somepage.xml document and display it on a regular webpage. I have no way of reading its contents.

I read up on some microsoft way of doing it, but not sure that is gonna fly (need it for most browsers), so can this be done easily with json/ajax?

I have an xml file in normal format:

www.somedomain.com/somepath/somexml.xml

<products>
<items>
<item>blah</item>
<item>blah2</item>
<item>blah3</item>
<item>blah4</item>
<item>blah5</item>
</items>
</products>

So, how do I get that data to manipulate and display in my html?
I don't even know where to begin with json/ajx etc.. and how to call the xml file etc..

Bit of a noob when it comes to js. Hope someone can help me out.

I am trying to place text output from a url on another webpage.

The output is the status of an alarm system.

The URL is:

Code:

https://www.eye-zon.com/EZMOBILE/index.php?mid=<hash>&action=ssi&did=<mac>

hash and mac info remove for security reasons.

The URL leads to a webpage that outputs:

Code:

<update>2011-08-18 21:21:10</update><status> Stay Armed </status><trouble>NO</trouble>

I would like to place these three outputs on another page.

Any ideas?

I have an iFrame that is loaded when a user types a url into a text box. Is it possible to display the meta-description of the page that is diplayed in the iFrame in the main (parent) page ?

Here is the Iframe code I am using in the body:

Code:

<iframe src="http://www.mhgoebel.com" frameborder="0" id="frame" width="320" height="356" scrolling="no">
</iframe>

and here is the script in the header:

Code:

<script>
    function goTo() {
        var input = get("box").value,
            frame = get("frame");

        if(input.match(/\bhttp(.)*/)) {
            frame.src = input;
        } else {
            input = "http://" + input;
            frame.src = input;
        }      
    }

    function get(id) {
        return document.getElementById(id);    
    }  
</script>

I have a form with three fields. When the user changes the value of field1, the form displays either field2 or field3. This works fine for NEW records.

However, I'm running into a problem when trying to EDIT an existing record. When the form is loaded, I need to test the value of field1 and display either field2 or field3. I've tried using the form onload event, but do not know how to access the value of field1.

I'm using Javascript and div tags.

This is what I have so far.

<script type="text/javascript">

function hide(obj)
obj1 = document.getElementById(obj);
obj1.style.display = 'none';
}

function show(obj)
{
obj1 = document.getElementById(obj);
obj1.style.display = 'block';
}

function show_other(optionValue)
{
if(optionValue=='C') { show('divClass');} else{hide('divClass'); }
if(optionValue=='W') { show('divWorkshop');} else{hide('divWorkshop'); }
}
</script>

/* Field1 - is a drop down list */
<select name="ClassType" size="1" onchange="show_other(this.value)">
...
</select>

/* Field2 */
<div id="divClass">
...
</div>

/* Field 3 */
<div id="divWorkshop">
...
</div>

Appreciate any assistance.
Thanks
Peter

Hi,

Apologies in advance but I have no experience of Javascript.

I found the following 'Cut & Paste Google Internal Site Search script' in the Javascriptkit.com library - it works well and provides an easy solution for adding a search function to a website - code below

Code:

<script type="text/javascript">

// Google Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

//Enter domain of site to search.
var domainroot="www.javascriptkit.com"

function Gsitesearch(curobj){
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}

</script>


<form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">

<p>Search JavaScript Kit:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" />*<input type="submit" value="Search" /></p>

</form>

<p style="font: normal 11px Arial">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript Kit</a></p>

However, if possible, I would like to display the results inside the website structure rather than on a new page - is there an easy way to do this?

Thanks in advance for any help.

Hi, all!
I'm a "fresh" newbie, JS self-taught from the great resources provided in this forum. I want to better currently working page but lack enough knowledge atm. The situation is this:
* Multimedia database - audio clips and corresponding video clips to some of the audio ones.
* Dynamic content page showing the latest (by date) 5 or 10 clips with their info from db.
* Links provided for each clip, both to listen in a new popup window and to download the clip.

Accomplished so far: everything of the above *only* for the audio clips (and video ones but separately on a different page).
Every record in the data base has an audio clip and some of them, not all, have a video clip. E.g. there are records only with audio clips and there are records both with audio and video clips.
My question is is it possible wherever there's a video clip in the db in an already displayed db-record on the page to display 'watch' and 'download' icon for it together with already shown audio icons ('listen' and 'download')? Conditional displaying.
I read about combination between JS and CSS in almost similar situation but don't know how to apply it in my situation due to my little knowledge base at this moment. So, any help will be highly appreciated and useful as it will push me forward in learning JS. I'm almost sure this is possible as it's not a complicated issue.
I can post my so far working code, if requested. If not provided enough info on the issue, let me know.
Thank you in advance!