JavaScript - Making The Contents Of A Textarea Appear Inside A Div On The Same Page

Greetings!

I'm not a huge javascript person, I barely know enough php to get by. I struggle and I learn. I have this page that take a while to load and I really don't want it to show the results in the browser before the php script finishes. So I was hoping that somebody could point me to a way to either give some sort of wait indicator (i.e. a bar, the trendy twrilling circle thingy) or just hide the everything till the page is completely loaded.

Below this sentence is the original post I left in the PHP forum.

Since the birth of CSS3 you can easily use fonts that are NOT on the local users PC. This is the best! Although some fonts do not render through the browser. I wrote this script (for personal use) which is pretty elementary which reads fonts in a directory (without installing them in windows) and then lets you display them in various web aspects.

In the script I pick a random background color and calculate a contrast color and then determine if the text color should be black or white depending on the color of the background.

What's happening is that if I pile a bunch of fonts in the fonts directory when the script executes it displays the contents until it 100% complete. Basically I'd like it NOT to do that. I was looking around a progress bars but .. they don't seem to do much. I couldn't find one that would either give you that twrilling circle while it loads or something to that nature.

**Is you test this script you MUST create a folder named 'fonts' in the root of where you put the script!

***If you find ways that I can make this more effecient or any tips or tricks that'd be great and constructive criticism is always appreciated!

Thanks so much for any help or advice given!

You'll need the javascript file animatedcollapse.js from my site http://handlersspot.net/css3font/animatedcollapse.js

There's are three images:
http://handlersspot.net/css3font/slantdivider.gif
http://handlersspot.net/css3font/minus.png
http://handlersspot.net/css3font/plus.png

I tried to post the source here but it seems that I used up my allotment of 20K characters I tried to use the attachments feature but it doesn't work for me for some reason so I posted all the source here on my website: http://handlersspot.net/css3font/source.html

Whew! That's allot of stuff!

Again .. thanks for the effort/advice/help way in advance!

Oh! Sorry! Meant to put the actual working version of this here --> http://handlersspot.net/css3font

I have a very simple page that has one iframe on it. What I would like to accomplish is having Javascript read the contents of the iframe and write it to the page. I have tried numerous coding samples found all over the web but nothing seems to work for me as I am a major Javascript noob.

The iFrame will include content like the following which will be from an outside web server;

Code:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><response><results><![CDATA[Success]]></results></response>

Thanks a lot in advance!

Hi there, I basically need script that will detect if the user is using Internet Explorer, and then display a different page to the one that would be loaded for any other browser.

Is there anyway to make a text area scroll down with the page?

Code:

<textarea name = "scrollBox" rows = "1" cols = "10">A B C D  </textarea>

hi guys,

i am using this script (jquery) to resize textareas when a user enters text. it works well.

in the management system im writing i would like to also resize all textareas so that all text is visible when forms load

i.e. a user loads a form with textareas on and all the text is visible when they read the contents

Code:

/*
 * jQuery autoResize (textarea auto-resizer)
 * @copyright James Padolsey http://james.padolsey.com
 * @version 1.04
 */

(function($){
    
    $.fn.autoResize = function(options) {
        
        // Just some abstracted details,
        // to make plugin users happy:
        var settings = $.extend({
            onResize : function(){},
            animate : true,
            animateDuration : 150,
            animateCallback : function(){},
            extraSpace : 20,
            limit: 1000
        }, options);
        
        // Only textarea's auto-resize:
        this.filter('textarea').each(function(){
            
                // Get rid of scrollbars and disable WebKit resizing:
            var textarea = $(this).css({resize:'none','overflow-y':'hidden'}),
            
                // Cache original height, for use later:
                origHeight = textarea.height(),
                
                // Need clone of textarea, hidden off screen:
                clone = (function(){
                    
                    // Properties which may effect space taken up by chracters:
                    var props = ['height','width','lineHeight','textDecoration','letterSpacing'],
                        propOb = {};
                        
                    // Create object of styles to apply:
                    $.each(props, function(i, prop){
                        propOb[prop] = textarea.css(prop);
                    });
                    
                    // Clone the actual textarea removing unique properties
                    // and insert before original textarea:
                    return textarea.clone().removeAttr('id').removeAttr('name').css({
                        position: 'absolute',
                        top: 0,
                        left: -9999
                    }).css(propOb).attr('tabIndex','-1').insertBefore(textarea);
					
                })(),
                lastScrollTop = null,
                updateSize = function() {
					
                    // Prepare the clone:
                    clone.height(0).val($(this).val()).scrollTop(10000);
					
                    // Find the height of text:
                    var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace,
                        toChange = $(this).add(clone);
						
                    // Don't do anything if scrollTip hasen't changed:
                    if (lastScrollTop === scrollTop) { return; }
                    lastScrollTop = scrollTop;
					
                    // Check for limit:
                    if ( scrollTop >= settings.limit ) {
                        $(this).css('overflow-y','');
                        return;
                    }
                    // Fire off callback:
                    settings.onResize.call(this);
					
                    // Either animate or directly apply height:
                    settings.animate && textarea.css('display') === 'block' ?
                        toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback)
                        : toChange.height(scrollTop);
                };
            
            // Bind namespaced handlers to appropriate events:
            textarea
                .unbind('.dynSiz')
                .bind('keyup.dynSiz', updateSize)
                .bind('keydown.dynSiz', updateSize)
                .bind('change.dynSiz', updateSize);
            
        });
        
        // Chain:
        return this;
        
    };
    
    
    
})(jQuery);

many thanks for any help

Hi All,

I am new to javascript and actually I need to insert the data into a textarea from a text file when the user loads the browser..

and I am using this program to do it..but its throwing error 405, I dont know whats the problem..can any one please check the code or give me some code to do the same funtionality.

Quote:
<script type="text/javascript">
function getfile()
{
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null)
{
alert("Browser does not support HTTP Request");
return;
}
var url = "${pageContext.request.contextPath}/static/files/email1.txt";
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("POST", url, true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
{
var emm = xmlHttp.responseText;
alert(emm);
}
}
function GetXmlHttpObject()
{
var xmlHttp = null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>

can one give me some idea regarding this.


Thanks in Advance,

Best Regards,
Rajasekhar.

Hi guys,

I need to redirect a page to another url when it detects that the page is opened inside an iframe.

I need help with this
<script >
if(location.href != top.location.href){ window.location = 'http://myurl.com' }
</script>

- check my attachment index.zip

Thx.

On this website... http://livedemo00.template-help.com/...21/index.html# When you click on the Navigation Bar the website pages load inside that page?

How exactly would i go around doing this?

Thankyou

(Please note, although I've included jQuery code here, this is a general JavaScript question.)

At http://jquery14.com/day-05 (code at http://pastie.org/783420) I saw this code:

Code:

// all <a href="#anchor"> smoothscroll to those elements

$("a[href^=#][href!=#]").live('click',function(e){

    $('html,body').animate({'scrollTop': $($(this).attr('href')).offset().top+'px'}); 

    e.preventDefault();

});

I'm using this idea of smoothscrolling to destination anchors in a page I'm developing, but is it a bad idea from an accessibility point of view?

I don't have a screen reader (couldn't get Fire Vox to work), but I am assuming that when you follow a link to a destination anchor in the same document, a screen reader begins reading from the destination anchor.

But this code cancels the default action of the link being followed. The page scrolls, but I assume this means nothing to a screen reader. If my assumptions are correct, the links concerned are broken for screen reader users.

(I suppose none of this matters if screen readers turn off JavaScript, but do they?)

A related question: From what I can tell, when you follow a link to an anchor somewhere on the same page, the page is entirely reloaded. Does this happen in every browser?

Thanks for any help

Hello everyone! I'm a complete newb to Javascript. I'm currently working on something that I am quite stuck with. Basically, I have a hexagon of pictures displayed on an HTML page. I need these pictures to rotate counter clockwise every 3000 ms. I have the code below and have made some adjustments, but how would I modify the functions to get the pictures to move?
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Javascript Fun!</title>
<script type="text/javascript">
	<!--
	var pixArray = Array(6);

	function shiftPix(element, count, index) {
		var pi = 3.1415926535;  

		y = 300 + 150 * Math.cos(2 * pi * (count + index)/6);
	  	x = 300 + 150 * Math.sin(2 * pi * (count + index)/6);


	  	element.style.left = x + "px";
	  	element.style.top = y + "px";

	}
	function display() {

	  	for (j = 0; j < 6 ; j++) {
			shiftPix(pixArray[j], counter, j);
		}
		setTimeout("display()",3000);
	}
	// -->
</script>
</head>

<body onload="display();">

  <div id="Picture1" style="position:absolute;left:300px;top:450px">
	  <img src="picture1.jpg"  width="90" height="120" />
  </div>
  <div id="Picture2" style="position:absolute;left:430px;top:375px">
	  <img src="picture2.jpg"  width="90" height="120" />
  </div>
  <div id="Picture3" style="position:absolute;left:430px;top:225px">
	  <img src="picture3.jpg"  width="90" height="120" />
  </div>
  <div id="Picture4" style="position:absolute;left:300px;top:150px">
	  <img src="picture4.jpg"  width="90" height="120" />
  </div>
  <div id="Picture5" style="position:absolute;left:170px;top:225px">
	  <img src="picture5.jpg" width="90" height="120" />
  </div>
  <div id="Picture6" style="position:absolute;left:170px;top:375px">
	  <img src="picture6.jpg"  width="90" height="120" />
  </div>

  <script type="text/javascript">
	<!--
	  var counter = 0;

	  pixArray[0] = document.getElementById("Picture1");
	  pixArray[1] = document.getElementById("Picture2");
	  pixArray[2] = document.getElementById("Picture3");
	  pixArray[3] = document.getElementById("Picture4");
	  pixArray[4] = document.getElementById("Picture5");
	  pixArray[5] = document.getElementById("Picture6");

	  display();
	// -->
  </script>
</body>
</html>

Thanks in advance!!

Hi, I am trying to make an entry confirmation form. This is going to be used as a disclaimer for my website. How can I make this to where it only shows on the main page and not every page a user goes to on my website?

<script>
var enter=confirm("examples insert text")
if (!enter)
window.location="http://www.google.com"
</script>

Hi everyone,

I'm putting together a family tree type organization chart and looking to be able to drag it around to view different parts similar to google maps. I believe javascript is the way to handle this but need some help pointing me in the right direction.

Any help would be greatly appreciated.

Thanks,
Mike

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. I have a question about java script code.

I'm creating a website with frames. Within the main page frame, there are tables in the main content page.

When I created the website, it fit perfectly in the browser window of my smaller laptop. I just checked it out on my old G5 and the images/pages are too big and either cut off or scroll bars appear (which is not what I want)

So I wanted to know what code I put in my files and where to put it?

Also, what pages does it need to be in?

the main frame index page? the specific pages that fit within the frames? some are images that load in the frames? would i need to create an .html for those and then have the .jpg load so that it can be resized?

I need the main page to be resized to fit the browser as well as the pages in the frames to fit.

Can you help?

Thanks

Hi i have a problem, i've been trying to fix this for the whole day

pls see my code below

Code:

for ($o = 0; $o <= $totalclass; $o++) 
{ 
	for($i = 1; $i <= 45; $i++)
	{
		if ($_SESSION['classification'][$o] == $i) 
		{
			$sql2="SELECT ClassDesc FROM tblclass WHERE ClassID = '$i'";
			$result2=mysql_query($sql2);
			
			// If successfully queried
			if($result2)
			{
				while ($row2 = mysql_fetch_assoc($result2)) 
				{
					$ClassDesc2 = $row2['ClassDesc'];
				}
			}
			//echo $ClassDesc2;
		?>
			<tr>
			<td bgcolor="FAFAF6" class="small" valign="top">Class <? echo $i; ?></td>
			<input type="hidden" name="<? echo "classid[]"; ?>" value="<? echo $i; ?>">
			<td bgcolor="FAFAF6">
			<textarea name="<? echo "specification[]"; ?>" COLS="50" ROWS="6" class="small" wrap="virtual" tabindex="<? echo $i; ?>"><? echo $ClassDesc2;?></textarea>
			<input type="button" value="Reset" onclick="window.reset();" name="reset">
			</td>
			</tr>
		<?			 
		}
	}
}

i've trying to create a button or image to reset one textarea (from whole array) and so far i've been unsuccessful.

i've seen this on other website and i know it is possible to do this, pls help!