JavaScript - Getting Js To Use Variable Contents Instead Of

Hey. I have been pulling out my hair trying to do this.

I am printing out the contents of a DIV tag but it does not print the css with it. Just the basic text
For example:

.testDiv {
border: 1px solid #0F0;
margin-right: 300px;
text-decoration: underline;
font-weight: bold;
}

The print does not change the text according to the css.
Why is this?

Thanks in advance for any help.

Marc

Hey all,
Hopefully I can explain this so it makes sense.

I have a div with some buttons in it going horizontally. Kind of like a top menu of sorts. The div is of a fixed width and these buttons are spaced evenly across it. What I would like to do (and the hardest part is finding the right words for all this) is add more buttons. But because of the limited space I want to leave the current buttons as they are but provide a way, either by hovering over the left or right end of the div ideally or clicking << or >> types of links to 'cycle' through the buttons. So end result would be the user would see lets say 5 buttons upon load but be able to access the other buttons by cycling/scrolling left or right. It would be great if the buttons would loop around so they would never reach the 'end' going left or right. Does this make sense? I haven't been able to find anything close to this but that could possibly be because I am not sure what to call it.

Thanks for any help!

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

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();
	

	
	})
	

});

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

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.

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.

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

@ 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);

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);
  }

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.

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..

Hi,
In Google Chrome the 'chrome.tabs.captureVisibleTab(integer windowId, function callback)' method will return a data URL of the JPEG encoding of the visible area of the captured tab.

We want to save that content as image to hard disk without opening/passing the contents into new html page.

Does anybody know how it can be done by javascript.
Please provide help.

Thanks.

Hello All,

I'm new to javascript and trying to build a news page that has expandable/collapsible headlines. I copied some javascript to do this that works fine except that when I try to replace the clickable '+' or '-' characters with clickable images, somehow doing a comparison of the innerHTML in order to toggle it from the plus image to the minus image doesn't work. I'm assuming it has to do with how innerHTML translates tagged html vs. straight characters or text, but have tried everything and can't fix it. Any help would be greatly appreciated. Below are the script and the html in the body.

Here's the script:

Code:

<style type="text/css"><!--
.save{
   behavior:url(#default#savehistory);}
a.dsphead{
   text-decoration:none;}
a.dsphead:hover{
   text-decoration:underline;}
a.dsphead span.dspimg{
   font-weight:normal;}
.dspcont{
   display:none;}
//--></style>

<script type="text/javascript"><!--
function dsp(loc){
   if(document.getElementById){
      var foc=loc.firstChild;
      foc=loc.firstChild.innerHTML?
         loc.firstChild:
         loc.firstChild.nextSibling;
	  
	// this is the problem area, which worked when it was like this:
	// foc.innerHTML=foc.innerHTML=='+'?'-':'+';
	foc.innerHTML=foc.innerHTML=='<img src=../img/art/expand.png></img>'?'<img src=../img/art/collapse.png></img>':'src=../img/art/expand.png></img>';
	  
        foc=loc.parentNode.nextSibling.style?
           loc.parentNode.nextSibling:
           loc.parentNode.nextSibling.nextSibling;
      foc.style.display=foc.style.display=='block'?'none':'block';
}}  
	  
if(!document.getElementById)
   document.write('<style type="text/css"><!--\n'+
      '.dspcont{display:block;}\n'+
      '//--></style>');
      //--></script>

<noscript>
<style type="text/css"><!--
.dspcont{display:block;}
//--></style>
</noscript>

And here is the html:

Code:

<h3><a href="javascript:void(0)" class="dsphead"
   	onclick="dsp(this)">
	<!-- this is the problem area which worked when it was like this:
	<span class="dspimg">+</span>  
        -->
   	<span class="dspimg"><img src=../img/art/expand.png></img></span>August 2, 2010 - Latest Headline</a></h3>
   <div class="dspcont"><br /><p>Content paragraph 1</p><p>Content paragraph 2</p>