JavaScript - Printing A Contents Of A Div With Its Css

Hi..

Im currently working on my project and I have a big problem with changing the layout of tabs. Basically, when I launch my GUI, it will display "No Data Available" in my view tab. In my Add tab, I have the admin panel whereby the user enters the data to be stored and display. the problem now lies when displaying. It is a juke ringtone gallery whereby when there are data being stored in the database, it will display the following in a Gridlayout;





I applied the ChangeListener to the JTabbedPane which is tp. I added tabs using tp.add. I declared this in my ChangeListener:
if(tp.getSelectedIndex() == 0)
createViewPanel();
else if(tp.getSelectedIndex()==1)
createAddPanel();

where createViewPanel() is for the View tab and createAddPanel() is for the Add tab. i also called the respective tabs using frameView = (JPanel)tp.getComponent(0); to get the layout for View tab and frameAdd = (JPanel)tp.getComponent(1); to get the layout for the Add tab.
What methods need I use so that I can display the different data in the specific GridLayout to be displayed in the View tab or what other ways can I do it?

Hi,

How I build a table based on a list under a <DIV></DIV> like this?

printing: 1
and: 3
typesetting: 2
industry: 2
has: 2
been: 1
s: 1
standard: 1
ever: 1
since: 1
1500s: 1
when: 1
an: 1
unknown: 1
printer: 1
took: 1
a: 2
galley: 1
type: 3
scrambled: 1

Regards

Bob

Hi Guys,

Using this code i have managed to get the query value from the url.

code:

PHP Code:
<script type="text/javascript">
// Check referrer
function getQuerystring(key, default_)
{
  if (default_==null) default_=""; 
  key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
  var qs = regex.exec(window.location.href);
  if(qs == null)
    return default_;
  else
    return qs[1];
}

var refVal = getQuerystring('r');
</script>
<div id="div-regForm">
<div class="form-title">Sign Up</div>
<div class="form-sub-title">Earn points & then swap for prizes! FREE!</div>
<form id="regForm" action="sign-up.php" method="post">
<table>
  <tbody>
  <tr>
    <td><label for="fname">First Name:</label></td>
    <td><div class="input-container"><input name="fname" id="fname" type="text" value="<?php print $_POST['fname']; ?>" /></div></td>
  </tr>
  <tr>
    <td><label for="lname">Last Name:</label></td>
    <td><div class="input-container"><input name="lname" id="lname" type="text" value="<?php print $_POST['lname']; ?>" /></div></td>
  </tr>
  <tr>
    <td><label for="email">Your Email:</label></td>
    <td><div class="input-container"><input name="email" id="email" type="text" value="<?php print $_POST['email']; ?>" /></div></td>
  </tr>
  <tr>
    <td><label for="pass">Password:</label></td>
    <td><div class="input-container"><input name="pass1" id="pass1" type="password" value="<?php print $_POST['pass1']; ?>" /></div></td>
  </tr>
  <tr>
    <td><label for="pass">Confirm Password:</label></td>
    <td><div class="input-container"><input name="pass2" id="pass2" type="password" value="<?php print $_POST['pass2']; ?>" /></div></td>
  </tr>
  <tr>
    <td><label for="cntry">Country:</label></td>
    <td><div class="input-container"><select name="cntry"><?php foreach($countryArray as $country) { print "<option value=\"$country\">$country</option>"; } ?></select></div></td>
  </tr>
  <tr>
  <td>&nbsp;</td>
  <td><input name="r" type="hidden" value="<script type="text/javascript">document.write(refVal);</script>" /><input type="submit" class="greenButton" name="submitSignUp" value="Sign Up" /></td>
  </tr> 
  </tbody>
</table>
</form>
</div>

in this part value="<script type="text/javascript">document.write(refVal);</script>" /> i can't seem to put the value in the hidden field it print fine in the code just above.

thanks for any help guys

Graham

Hi

I have the code below which geocodes a postcode and returns a lat a long value. Its standard code from Google maps. I just want to print these values to a screen. I tried document.write(value) but this produces nothing. Any help would be greatly appreciated.

Code:

<script type="text/javascript">
	var localSearch = new GlocalSearch();
	function usePointFromPostcode(postcode)
	{
		localSearch.setSearchCompleteCallback(null, 
			function()
			{
				if (localSearch.results[0])
				{		
					var resultLat = localSearch.results[0].lat;
					var resultLng = localSearch.results[0].lng;
				}
				

				document.write(resultLat+resultLng); 

				
				//alert("Latitude: " + resultLat + "\nLongitude: " + resultLng + " q");				
			});	
		localSearch.execute(postcode + ", UK");
	}
</script>

TIA Stew

Quote:
var c739=new Array ("C#739","Brick Township","125 Route 65","Brick","NJ","08723","Phone #","1234569");
Quote:
var c741=new Array ("C#741","Brick","125 kool st ","copolla","NJ","07831","Phone #","6957891");
Quote:
document.write(c739[1]);


I need help for the above code. I created a simple Array which would then be growing too soon. I need to add a prompt :

store : c739

then all the elements would show as:
C#739
Brick Township
125 Route 65
Brick, NJ 07831
Phone# 1234569

Please help. Thank you in advance.

I have a routine that prints a textarea:

Code:

function printInput(f){
  var ifr = window.frames['printFrame'];
  if (ifr){ //print the content of the invisible iframe
     ifr.document.getElementById('content').innerHTML=f.WRKNOTEPAD.value.replace(/\n/g,'<br />');
     ifr.focus();
     ifr.print();
  }
  else { //print by opening a new window and then closing it
     var html='<html><head><style type="text/css">div{font:normal 14px Verdana}</style></head><body onload="window.print();window.close()"><div>'+f.WRKNOTEPAD.value.replace(/\n/g,'<br />');+'</div></body></html>'
     var win = window.open('','_blank','menubar,scrollbars,resizable');
     win.document.open();
     win.document.write(html);
     win.document.close();
  }
}

function writeContent(objIframe){
  var html='<html><head><style type="text/css">div{font:normal 14px Verdana}</style></head><body><div id="content"></div></body></html>'
  objIframe.document.write(html);
  objIframe.document.close();
}

This works nicely when the button is of input type:

Code:

<form name="FORMNOTES"><textarea name=WRKNOTEPAD cols=140 rows=20 wrap=yes style=\"font-family: Arial; font-size: 10pt\"></textarea><div>
<br>
<input type="button" value="Print notepad" onClick="printInput(this.form)">
</div>
<iframe name="I1" id="printFrame" src="javascript:parent.writeContent(this)" width="1" height="1"></iframe></form>

But when I try to make the input button an img button it errors:

Code:

<img border="0" src="/images/printnotes.gif" onClick="printInput(this.form)">

The error is "WRKNOTEPAD is null or not an object".

Is there any way to overcome this and use an image to achieve the same thing? I'm thinking that the image is not an element(?) - is that the reason?

Thanks for any light on this.

I need to make a javascript that when I am at a page within a game I play and click the javascript, it will get the value of a table cell, separate them to x and y variables and then put the values into a link that opens. The open link is of a php script that uses $_GET for the values of the variables to query my database.

I am terrible at javascript and have been trying to do this for 2 days now with no success. So I hope I can find help here.

Here's the scripts so it is easier to understand:
This is part of the html page that is from the game. I need to have the javascript get 432|608 and assign x=432 and y=608 in this case, although those number change, the place in the table that that they are displayed do not change.

<td>Coordinates:</td>
<td><a href="game.php?village=19392&amp;s=map&amp;x=432&amp;y=608">432|608</a></td>


<html>
<head>
<title></title>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Page-Enter" content="revealTrans(Duration=0.1,Transition=4)">
<link rel="stylesheet" type="text/css" href="kingsage.css">
<link rel="shortcut icon" href="favicon.ico" type="image/ico">
<script src="js/kingsage.js?hash=1e4c479f8ba66202f3b1bfb74414eef4"
type="text/javascript"></script>
<script
src="js/mootools-1.2-core-nc.js?hash=1e4c479f8ba66202f3b1bfb74414eef4"
type="text/javascript"></script>
<script
src="js/mootools-1.2-more.js?hash=1e4c479f8ba66202f3b1bfb74414eef4"
type="text/javascript"></script>
<script src="js/map_src.js?hash=1e4c479f8ba66202f3b1bfb74414eef4"
type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[

lang = new Array();
lang['DAY'] = 'Day';
lang['DAYS'] = 'Days';

//]]>
</script>
<div
style="background: rgb(0, 0, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"
align="center">
<table style="border-collapse: collapse; height: 100%;" width="100%"
cellpadding="0" cellspacing="0">
<tbody>
<tr valign="top">
<td width="50%" align="right">
<br>
</td>
<td style="width: 840px;">
<table
style="border-collapse: collapse; width: 840px; height: 100%;"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="lay_content" valign="top"><a name="head2"></a>
<div class="contentpane">
<table class="borderlist" style="width: 420px;">
<tbody>
<tr>
<th colspan="2">Abandoned settlement</th>
</tr>
<tr>
<td>Coordinates:</td>
<td><a href="game.php?village=19392&amp;s=map&amp;x=432&amp;y=608">432|608</a></td>
</tr>
<tr>
<td>Points:</td>
<td>390</td>
</tr>
<tr>
<td>Player:</td>
<td><br>
</td>
</tr>
<tr>
<td>Alliance:</td>
<td><a href="game.php?village=19392&amp;s=info_ally&amp;id="></a><br>
</td>
</tr>
</tbody>
</table>
<br>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td width="50%" align="left">
<br>
</td>
</tr>
</tbody>
</table>
</div>
<div id="settlement" style="display: none;"></div>
<script type="text/javascript">
//<![CDATA[
startCounter();
//]]>
</script>
</body>
</html>

Here's the php script that will process the x and y
Code:

<?php
putenv("TZ=Europe/Berlin");
session_start(); 
include("includes/config.php");

$username = $_GET['username'];
$pass = $_GET['pass'];
$x = $_GET['x'];
$y = $_GET['y'];
$now = time();

//confirm user can make claim
global $conn;
$q = "SELECT password FROM users WHERE username = '$username' AND active = 1";
$result = mysql_query($q,$conn);
if(!$result || (mysql_numrows($result) < 1))
{
	$data = "Your identity can not be authenticated";
}
else
{
	$dbarray = mysql_fetch_array($result);
	if($pass == $dbarray['password'])
	{
	      $continue = true;
	}
	else
	{
		$data = "Your password can not be authenticated";
	}
}

//if can claim then check the village
if($continue)
{
	$q = "SELECT * FROM `claims` WHERE x = '$x'  AND y = '$y' AND state = 1";
	$village = mysql_query($q, $conn);
	$result = mysql_fetch_assoc($village);
	if(!$result)
	{
		$can_claim = true;
	}
	elseif($result)
	{
		if($result['username'] == $username)
		{
			$data = "You already have an active claim on ($x|$y)";
		}
		elseif($result['username'] <> $username)
		{
			$claimer = $result['username'];
			$data = "$claimer already has an active claim on ($x|$y)";
		}
	}
	if($can_claim == true)
	{
		global $conn;
		$claim_made = time();
		$claim_expires = $claim_made + 432000;
		$state = 1;
		$q = "INSERT INTO `claims` (x, y, username, claim_made, claim_expires, state) VALUES ('$x', '$y', '$username', '$claim_made', '$claim_expires', '$state')";		
		$add_claim = mysql_query($q, $conn);
		if($add_claim)
		{
			$data = "Success! You claimed ($x|$y)";
		}
		else
		{
			$data = "Error: Your claim on ($x|$y) did not complete.";
		}
	}
echo  "<SCRIPT>alert(\"$data\");</SCRIPT>";
}
?>

The javascript should link to this php script and send the variables like this: 'http://twv-kingsage.tw-family.us/auto_add_claim.php?username=username&pass=md5_password&x="+x+"&y="+y'

Can someone tell me how to extract the values for x and y from the page and get them to the link?

Thanks for the help, it is much appreciated.

I have the following code in a website which is the W3C method of loading XML/XSL via Javascript. The code works perfectly except as you can see from the last line of code it appends the fixed div. This is not suitable as I need the site to overwrite the contents of the fixed div (not append). How could I rewrite that last line of code so that the data within the fixed div is rewritten with the contents of resultDocument. innerHTML doesn't work since the content of resultDocument is an XML file.

Code:

  xml=loadXMLDoc("dating_database.xml");

{
  xsltProcessor=new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  resultDocument = xsltProcessor.transformToFragment(xml,document);
  document.getElementById("fixed").appendChild(resultDocument);
  }

Hi guys I was wondering if its possible to add contents within a div to a javascript array. Something like this:
Code:

<script type="text/javascript">
function returnArray()
{
    var divContent   = document.getElementById('images');
    var matchImage = divContent.match(/<img/);
    /* add images into array somehow */
    alert('This is ' +ImageArray[1]);

}
</script>

<div id="images">
         <img src="image1.jpg" alt="image" />
         <img src="image2.jpg" alt="image" />
         <img src="image3.jpg" alt="image" />
</div>

Thanks for any info.

See http://forums.mathannotated.com/gui-...-layout-4.html.

When you click the "More" tab, the browser forgets the active tab styling and current tab contents; I don't want these to change - all I want to change on the click "More" tab action is the navigation tab. But my browser should maintain the styling for the last active tab and continue to display its corresponding tab contents. Yet it forgets these details when the user clicks "More".

In particular, when user navigates back and forth between the two tab sets, whatever was the last styled active tab remains styled as such. Browser should remember this.

Code:

$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content

	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});
	
	//Your additions
	
	//When page loads...
	$("#button_set_2").hide(); //Hide 2nd button set; added by YOU
	
	//On Click Event: hide 1st button set, show 2nd
	$("li#more_forward").click(function() {
	$("#button_set_1").hide();
	$("div#button_set_2").show();
	

	
	})
	
	//On Click Event: hide 2nd button set, show 1st again
	$("li#more_backward").click(function() {
	$("#button_set_2").hide();
	$("div#button_set_1").show();
	

	
	})
	

});

Right.
I'm trying to create a little game (If you can call it that) where every time the user hovers over a <div> which contains a button, said <div> moves to a random point on the page.
I've tried a way of moving the item and Googled extensively but have not yet come up with a way of doing it.

This is my current code:
Code:

if(document.getElementById)
	{
var carrier = document.getElementById(btnarea);
carrier.style.top = randomHeight + "px";
	}

if(document.getElementById)
	{
var carrier = document.getElementById(btnarea);
carrier.style.left = randomWidth + "px";
	}

Which does not work. I hover over the <div> and the button, yet nothing happens. I can click the button, which seems to be the only thing working right now.

I have a feeling the issue could be with another part of the code, but I wanted to see what you people thought first.

Any ideas?
You can see it working (Or not) at http://zeroerror.co.uk/public/clickme.php.

Thanks in advance.

@ http://jsfiddle.net/defencedog/cu5VJ/

I am having problem in understanding the operation of js with regards to this line
Code:

 $('.' + x[i].id).text(x[i].innerHTML);

or

Code:

  $('.' + x[i].id).html(x[i].innerHTML);

I want to understand why I ain't able to produce desired results while using this instead

Code:

$('.' + x[i].id).innerHTML(x[i].innerHTML);

Hi friends,

I am very well aware that ctrl-a and ctrl-c will not copy images (only the text) in ms-word/openoffice writer.

so, the better option is to convert the doc into html and place the contents of the html in Tinymce editor. (This is what i want to accomplish).

I know this thing can be done in javascript but i dont know how.

Please tell me or any guidance to copy the contents of word(text and images at one go) into a tinymce editor.

Any help would be highly appreciated.

Thanks,
aras

I use a PHP page to set elements of a text file on our web server and I want to create a javascript function to intermitently check the contents of that file and if an element in that file matches a criteria I want to act on it...

So, I do this

<script type="text/javascript">
t = setInterval("CHECKFILE()",5000);
</script>

This calls the CHECKFILE function every 5000ms


<script type="text/javascript">
function CHECKFILE(){


}
</script>


How, in the CHECKFILE function can I read from a file called FILE.txt for example??

In PHP I can use

$myFile = "FILE.txt";
$theData = file($myFile);

And this gives me an array, with each element containing one line from the file

Can I do similar in Javascript? Or can I add PHP into the JS to do it for me?

Thanks

I'm sorry this is simple, but:

Code:

function printInput(f){
  var ifr = window.frames['printFrame'];
  var v1=readCookie('lesson');
  if (v1==1){v2='WORKNOTEPAD1'}
  if (v1==2){v2='WORKNOTEPAD2'}
  if (ifr){
     ifr.document.getElementById('content').innerHTML=f. v2 .value.replace(/\n/g,'<br />');
     ifr.focus();
     ifr.print();
  }
  else { something }
}

In this line:

Code:

ifr.document.getElementById('content').innerHTML=f. v2 .value.replace(/\n/g,'<br />');

How can I make it stop erroring and act as if the "v2" were, say, "WORKNOTEPAD2"?

If the line contains the string it all works fine.

It must be so simple...