Posts by Troy III

None of the elements are centered either.
They are all left aligned but the internal content is centered. So is sthis one except that this one is a bit wider than 480px. Wide them to the width of this monitor-like table and they'll come to center along its width.

This code enables you to publish a CSS only with mouse click and keyboard tab image swap.

Attached is a Demo example of how it would look on IE6.

To ensure the greatest possible cross-browser compatibility/support this code uses CSS level 1 capabilities only.

One of extra benefits is that it will function even within browsers that doesn't support, and/or clients that have disabled javascript engine to.

Big images are asynchronous keeping the page as light and as fast as possible. The code itself will fall under 6KB if relative URLs are used. [here I'm using absolute paths to some real images available on the net for demonstration purposes only].

It's a copy-paste ready for preview demo.
It is HTML4.01 Strict and CSS2.1 validated.

They are running all at once, but one isn't in the centre, its aligned to the left, so it looks odd, its the one that starts like this.

<script language="javascript">
//good to go
var cellwidth=6;               // EACH "CELL" WIDTH IN PIXELS
var cellheight=10;              // EACH "CELL" HEIGHT IN PIXELS
var fontsize=9;                // FONT SIZE OF THE NUMBERS. SETTING THIS TOO BIG CAUSES UNDESIRED EFFECTS.
var fontcolor="red";          // ENTER ANY HTML OR RGB COLOR CODE
var fontstyle="normal";           // ENTER EITHER BOLD, ITALICS, NONE
var oncolor="#09f";          // COLOR OF ACTIVE CELLS
var offcolor="#00007D";         // COLOR OF INACTIVE CELLS

The rest are in the centre only that one isn't.

So what?!
It is a separate standalone example script as all others are. It wasn't meant, nor written to be centered. And that's exactly why it isn't!

- Alignment is not inherited from div to table. You need to apply the style to the td tags.

- The php script may be overriding the style.

- If there is any syntax error in the style, the entire style becomes invalid in some browsers. You have syntax errors, because you have attributes without parameters in the background style.

Wrong:

no-repeat

Right:

background-repeat="no-repeat"

Sorry for interference, but you'll have to correct this!

There's nothing wrong with his shorthand background css statement: background: #FFF url( 'images/browsecategorybg.png' ) no-repeat center center; In fact it is absolutely correct and how shorthand background statements work.
But, there is more than one error in your sugestion:
cite: background-repeat="no-repeat" 1. The "=" mark is not allowed as css property/value delimiter;
2. the (") quotation marks in the property value, neither.

This syntax is not allowed on html element inline style attribute declarations, either.

Thats amazing, thank you very much Troy :)
Is there a way to make the last one centered? its aligned to the left.

Yes there is, but...
Your question was:
"how to get these scripts running in the same time"
- and it is solved!
But I don't see the "solved" mark anywhere!!!

hi ShawnCplus, thanks for the help it's working, but i just get some little problem..i made like this:

<STYLE type="text/css" media="screen">

div#topfix
{
margin-top:400px;
position:fixed;
}
</style>

and on the html page..

<div id="topfix" >
<A  href="#pagetop">Top of Page </A>
</div>

but why if i give a value on margin-top like 600px the text will went missing..i mean i can't see it on the page.. any ideas? thanks in advance...

On what browser?
If you are talking about firefox: your text is being clipped off.
If you try the same with position:absolute instead of position: fixed and still, there is no text in the document view area - you are dealing with an old bug that Netscape browsers never got rid off.

To fix it, try this css addition:
html, body {height: 100%; width:100%}

the #topfix content will come back into view.
p.s.:
If this doesn't fix it - your problem is the screen resolution!
(more details after your reply)

Regards.

You're wellcome. Thanks for your feedback.

Hi People, Hope some body can help I have been pulling my hair out over the last few days trying to figure this out!!

Problem: I have narrowed the problem down to a <div> with a 2 floating images and float <ul> <li> as my menu.

When the inner wrap under this float menu has a large amount of text in it makes the page jump to the left slightly, all the floats are cleared what ever I do I cannot seem to stop the page jumping on certain pages, the only way I can stop it is to take the float out of the <li>!

Here is the HTML:

<body>
<div id="wrapper">
          <div id="header">
            	<div id="header_top">
                		<img src="Images/header_tl.gif" border="0" style="float:left;"/> <div id="header_nav">
                    	TOP NAV TEXT
                    </div> <img src="Images/header_tr.gif" border="0" style="float:right;"/>
                  	<!-- Start Quick Search --> <form method="post" enctype="multipart/form-data" action="" name="quick_search" > <input type="hidden" name="search" value="1" /> <div id="quick_search"><input type="submit" id="search_but" value="   "/><div id="quick_sbox">[B]<inputtype[/B]="text" name="search_q" id="quick_input" [B]>"[/B] /></div></div></form> <!-- End Quick Search -->
                </div>
               
                <div id="header_mid"><img src="Images/logo.gif" border="0" style="float:left;margin-top:3px;" alt="logo"/> <div id="fade_mid"></div> <div id="print_phone">&nbsp; &nbsp; &nbsp;&nbsp;00000 <span class="endphone">000000</span></div>			<br/><br/><br/><div id="print_fax">&nbsp; 		&nbsp; &nbsp;&nbsp;00000<span class="endphone">777777</span></div></div>
                <div id="menu_bar">
                	<img src="Images/menu_bgl.gif" border="0" style="float:left;margin-top:0px;" alt="Menu"/><!-- colparte--><ul class="menu">
                		<li id="menu_1eft"><a href="?" class="whitelink">HOME</a></li><li><a href="#" class="whitelink">ONLINE CATALOGUE</a></li><li><a href="#" class="whitelink">HIRE</a></li><li><a href="#" class="whitelink">SALES</a></li><li><a href="#" class="whitelink">SERVICES</a></li><li><a href="#" class="whitelink">PARTS</a></li><li><a href="#" class="whitelink">TRAINING</a></li><li id="menu_right"><a href="#" class="whitelink">CONTACT</a></li>
                    </ul><img src="Images/menu_bgr.gif" border="0" style="float:right;margin-top:-1px;"  alt="GB Menu"/>
                    <div style="clear:both;"> </div>
                </div>
           </div>
           <div style="clear:both;"> <br/><br/><br/></div>
           <div id="innerwrap">
           <!-- Start Content -->
 			<div class="home_text">PAGE CONTENT IF THIS GOES OVER SAY 60 LINES IT MAKES THE PAGE JUMP</div><div class="latest_block"></div>
		   <!--End Content--><div …

It is possible that you've confused margins with padding specifications since negative padding is not allowed and people us padding to achieve similar effect quite often and may confuse them. But negative margins are allowed and defined by W3C:

css2.1 box model http://www.w3.org/TR/CSS2/box.html
also defined and supported in CSS1
CSS1 box model http://www.w3.org/TR/REC-CSS1
definition sample
In the case of negative margins, the absolute maximum of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the absolute maximum of the negative adjoining margins is deducted from zero.

Decimos problem was:

1. (to) make a wrapper div of a post maintain a minimum height

2. my user info and post content go into two separate divs (floated left and right) but the parent div (the wrapper) only keeps (its own height) the other two divs just overflow out of it =(
3. I want the wrapper to maintain a minimum height, but if the post content is large, I also want it to adapt to the height of the post content div (or in the case of a window resize where the post text can be 'squeezed' into being really long).

Meaning he wants to prevent the content beading off of its div container in Netscape based UAs.
Not to fill the window but to keep [1] the minimum height of it in all situations.

I have a text box in a form that is validated to accept a value called ds01 but i also want the textbox to be allowed to accept empty spaces that is if nothing is entered in the textbox. The problem is that it does not accept anything other than ds01. Thanx in advance for your help. This is my script

function validate_choice(field,alerttxt)
{
with (field)
{
if (value != "ds01")
{
alert(alerttxt);return false;
}
else if (value ==null || value == "" || value=="ds01")
{
return true;
}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_choice(webdev, "You Must Enter the Correct Code.Please Enter ds01!.Thank You!")==false)
{webdev.focus();return false;}
}
}

Here you go

function validate_choice(field,alerttxt){
with (field){
if (value ==null || value == "" || value=="ds01"){
    return true;
    }
else if (value != "ds01"){
    alert(alerttxt);
    return false;
    }
  }
}

*the part in red is not needed, but doesn't cause problems...

Well whatever they are, I want them all running at once.

Alright sun, here you go than:

<html>
<head>

</head>
<body>
<table border="0" width="480" height="35"><tr><td align="center">
<div id="dclk" style="position:relative; font-size:20px; font-family:Digital Readout ExpUpright; color:#000;"></div>
</td></tr></table>


<table border="0" width="480" height="35"><tr><td align="center">
<div id="binclk" style="position:relative; font-size:20px; font-family:Digital Readout ExpUpright; color:#000;"></div>
</td></tr></table>



<table border="0" width="480" height="35"><tr><td align="center">
<div id="binclk2" style="position:relative; font-size:20px; font-family:Digital Readout ExpUpright; color:#000;"></div>
</td></tr></table>



<table border="0" width="480" height="35"><tr><td align="center">
<div id="hexclk" style="position:relative; font-size:20px; font-family:Digital Readout ExpUpright; color:#000;"></div>
</td></tr></table>



<script language="javascript">
//good to go
var cellwidth=6;               // EACH "CELL" WIDTH IN PIXELS
var cellheight=10;              // EACH "CELL" HEIGHT IN PIXELS
var fontsize=9;                // FONT SIZE OF THE NUMBERS. SETTING THIS TOO BIG CAUSES UNDESIRED EFFECTS.
var fontcolor="red";          // ENTER ANY HTML OR RGB COLOR CODE
var fontstyle="normal";           // ENTER EITHER BOLD, ITALICS, NONE
var oncolor="#09f";          // COLOR OF ACTIVE CELLS
var offcolor="#00007D";         // COLOR OF INACTIVE CELLS


var NS4=(document.layers)?true:false;
var IE4=(document.all && !document.getElementById)?true:false;
var now=new Date();
var NS6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var binclk;
var binclk1;
var binclk2;
var hexclk;


now.hrs='00';
now.min='00';
now.sec='00';
var dclk=document.getElementById("dclk");

function setclock1(){
now=new Date(); now.hrs=now.getHours(); now.min=now.getMinutes(); now.sec=now.getSeconds();
now.hrs=((now.hrs>12)? now.hrs-12 : now.hrs)+"";
now.hrs=((now.hrs<10)? "0" : "")+now.hrs;
now.min=((now.min<10)? "0" : "")+now.min;
now.sec=((now.sec<10)? "0" : "")+now.sec;
if(NS4){
dclk.document.open();
dclk.document.write('<div style="position:absolute; left:0px; top:0px; font-size:80px; color:#000;"><center>'+now.hrs+':'+now.min+':'+now.sec+'</center></div>');
dclk.document.close();
}else dclk.innerHTML=now.hrs+':'+now.min+':'+now.sec;
}

function digitalClock(){
  setInterval('setclock1()',300);
  dclk=(NS4)?document.layers['dclk']:(IE4)?document.all['dclk']:document.getElementById('dclk');
}



//************** DO NOT EDIT BEOND THIS POINT *************//

var t='<table cellspacing="1" cellpadding="0" border="0" bgcolor="black"><tr><td align="center"> </td>';
for(i=0;i<=58;i+=2)t+='<td align="left" colspan="2"><font style="font-size:'+fontsize+'px; font-weight:'+fontstyle+'; color: '+fontcolor+'">'+i+'<br> |</font></td>';
t+='<td> </td></tr><tr><td align="center"><font style="font-size:'+fontsize+'px; font-weight:'+fontstyle+'; color: '+fontcolor+'">H: </font></td>';
for(i=0;i<=23;i++)t+=(NS4)? …

ok i will go through it in a relax mood now that i know the format.
thanks anyways i will need it

As i understand you are server side...
Just keep in mind that everything outside the body function and inside the script tag gets executed in place and as being read. So putting commands that manipulate or depend on the document content in a header, will always return undefined or rise errors, since the DOM is still not ready and you are targeting elements before they are created.

Another thing is that if you don't construct functions that will hold those instructions and commands in the function body they are all one-time only - they execute and they die instantly and can't be referenced anymore as they'll be garbage collected automatically.

Now taking the same code and turning it into a defined function would go like this:

<script language="JavaScript">
function validateF1(){
       var usernameVal = document.forms.f1.user.value.length;
if(usernameVal < 3){ 
      alert("username is invalid")
      return false;
     }
else{
      alert("acceptable")
     }
}
</script>

This will make it possible to put it back on the document header again without problems.

And than, if, and when needed call it from the contextual element in the form, as you already did somewhere: <form name="f1" method="post" onsubmit="return validateF1()"> This will keep you going on the right direction...

Regards

but they're showing exactly: the same time!
and exactly the same way using different approaches, as individual coders always do.
But they are absolutely the same.

i am trying to help a friend on a program on client side scripting using javascript.
i have the following code but i am not getting the output desired.

<html>
<head>
<Script language="JavaScript">

 var usernameVal;
if(document.f1.usernameVal.value.length<3)
{ 
 alert("username is invalid")
 
 return false;
}
else
{
 alert("acceptable")
}
</script>
</head>
<body>
<form name="f1" method="post">
Username:
<input type="text" name=user value="">
<input type="submit" value="submit">

</form>
</body>
</html>

can somebody please modify this code and help me get a simple basic solution.i am not sure about form name f1, how to get value to usernameVal and then the post and submit. i have tried everywhere on net but in vain.I know basic javascript but not the client side scripting.

Let's examine what you have than...
First: the code is running before the form of the document is even loaded. [you've put the plain script in the document header instead of at the bottom of the body]

Second: your "var usernameVal; is declared only! - But undefined...

Third: your conditional "if(document.f1.usernameVal.value.length<3)" is completely invalid
document.f1.usernameVal part, means nothing to the knowledge of js engine. And being "undefined" would always return length of 9, and falsely validate your form.

Fourth: you have a statement "return false" which is out of the function and will produce error while being parsed and before any execution takes place. Cause at the end there is nothing awaiting to receive your "return" statement there.

Fifth: Your code will execute during load time and will not wait …

can you please first explain to us why would you want 5 different scripts in the same page doing exactly the same thing?!!
That is - displaying time!

Actually there are multiple variable going to be there say like 50
When i click on search
all 50 links should hold that query

<html>
<title> </title>
<head>
<script type="text/javascript">

var refine="resume"
var elim="-job"
function google(hit){
hit.q.value= hit.qfront.value+" "+refine+" "+elim

}

</script>

</head>
<body>
<form action="http://www.google.com/search" method="get" onSubmit="google(this)"/>
<p>PureSearch<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>
</form>
</body>
</html>

The Magic Key-Word for converting some element into a valid clickable Link, is:

object.link(string)

where, [object] is the (existing or dynamically the created) html element you want to convert into a Link.
And the [string] is the reference to a string variable containing the address or the string itself, ie:
"http://www.google.com/search?hl=en&q=javascript+create+link&aq=o&oq=&aqi="

var link1 = "search google".link("http://www.google.com/search?hl=en&q=javascript+create+link&aq=o&oq=&aqi=")

Now - you pick your strategy!

p.s.:
you can test it directly by pasting this code:

javascript:document.write("search google".link("http://www.google.com/search?hl=en&q=javascript+create+link&aq=o&oq=&aqi="))

In your browser location bar and hit enter to meet the newly created link wit its query for "javascript create link"

meaning: cripled Chrome doesn't support negative margins.

Troy ... thanks very much for your help, but actually i m very new to javascript, so any change I make to my existing code is not helpin me.. Must be doin some poor mistakes. really dnt knw where to change and wht to change.. totally lost.

Still thanks for ur help

No, no, no change in actual code please - make an addition only.

here are the steps:
in this line of code - all you have to do is to ad an ID to that input <td><input type="text" value="0" size = "2" onchange="doAdd(this)" ></td> to become: <td><input id="myInput" type="text" value="0" size = "2" onchange="doAdd(this)" ></td> so you will be able to reference it by its id directly instead of goin through "inputs" collection an determining which one it is so tou can pass it to the object pointer on the function call. You need to tell to the document invoking the function "who "THIS" is".

Than somewhere at the end of your script code add a line like this: var myInput = document.getElementById("myInput"); To finish it and see it finally working - if you are calling your function from the body of the document on load <body onload="doAdd(myInput)"... Nothing more so that the function will know "who this is" and you'll see the result immediately.

Yeahh u r rgt. I get ur point. But I m confused how should I change my javascript function to fit my requirements. Can please help how to change it to fot onload requuirement as well as onchange which is on cell level

<script type="text/javascript">
function getColumnCount()
 {
 return document.getElementById('myTable').getElementsByTagName('tr')[0].getElementsByTagName('td').length;         
 }
 
 function getRowCount()
 {
 return document.getElementById('myTable').rows.length;
 }

 function doAdd(ths)
 {
 var lastCol = getColumnCount()-1;
 var lastRow = getRowCount()-1;
  
 //for Column Sum

 var table = document.getElementById("myTable");
 var row = table.rows[ths.parentNode.parentNode.rowIndex];
 var colSum=0;
 for(var i=0;i<lastCol;i++)
 colSum=eval(colSum) + eval(row.cells[i].childNodes[0].value);
 row.cells[lastCol].innerHTML = colSum;
 
 //for Row Sum
 
 var cIndex = ths.parentNode.cellIndex;
 var rowSum = 0;
 for(var i=0;i<lastRow;i++)
 rowSum = eval(rowSum) + parseInt(table.rows[i].cells[cIndex].childNodes[0].value);
 table.rows[lastRow].cells[cIndex].innerHTML = rowSum;

 //for the final Value in the last row last column

 var finSum = 0;
 for(var i=0;i<lastRow;i++)
 finSum = eval(finSum) + parseInt(table.rows[i].cells[lastCol].innerHTML);
 for(var i=0;i<lastCol;i++)
 finSum=eval(finSum) + eval(table.rows[lastRow].cells[i].innerHTML);
 table.rows[lastRow].cells[lastCol].innerHTML = finSum;
  }

This is more complicated than that
doAdd(this ...
turns out to be
doAdd(ths)

The "ths" is short for something having to do with the table but I dont understand the h and s part.

So the ths conferteted to function argument through "this" must be the element residing on the Table.

Therefore you must get this element into the function argument for "onload" function call.

The element calling the function is ( as you've mentioned) , the: <td><input type="text" value="0" size = "2" onchange="doAdd(this)" ></td> give it an ID, than reference to it with aforementioned method var myInput = document.getElementById("myInput") do the onload …

Hi Troy.
I m calling it onload="doAdd(this)". If this is wrong how should I call it. Even i was confused wht variable should i pass on load inplace of this

"this"? :')
"this" what? -what is "this"when called from document object or document body?
the function caller, - but you don't want that, you want the exact element on which the function was written for.
so you get its reference by document.getElementById type of thing and add it as a variable value
replacing the "this" keyword with it.

onload=doAdd(someTableElementYouAreAiming);
Refresh the page!

New to javascript please help me create a link after we click on submit button
What is happening is when we click on submit button, it directly does the action on query to google
But instead need this to create a link
I mean when we hit search the javascript has to create a link and not query google
When we click on the link it should query google and not before that

Any solution please advice

<html>
<title> </title>
<head>
<script type="text/javascript">

var refine="resume"
var elim="-job"
function google(hit){
hit.q.value= hit.qfront.value+" "+refine+" "+elim

}

</script>

</head>
<body>
<form action="http://www.google.com/search" method="get" onSubmit="google(this)"/>
<p>PureSearch<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>
</form>
</body>
</html>

what are the addresses of links to be created?
where does the script get domain / location information?

I don't see any example of the main 'ingredient' for to create a link -you will need some address to pass to it.

And you will also need some visual elements to be clicked onto, so either create some text nodes or have them already written in your html prior to thinking of making any conversion.

I have a javascript function for calculating sum of values in row and colom of a table. It is using get element by id table name. So is table specific.

I am calling that function every time a value changes in the table by

<td><input type="text" value="0" size = "2" onchange="doAdd(this)" ></td>

Bu the problem is I even want to call that fucntion at the very start of the page it as soon as my table loads beacuse it has some existing values from the database. I tried using Onload on table level but nothing happened.
I want to know what event should I use for this situation and where should I call it.

Many Thanks.

How are you calling the function during onload event?
hopefully not with something like : onload="doAdd(this)" because that's wrong!

Please view the following URL in IE8 and then in any other browser.

http://minorityrecruitonline.com/college/default.aspx

It looks fine in every browser except for IE8. The culprit is the extra space being included after the </form> tag.

Does anyone know how to remove this space from IE8? I have tried all the usual tricks of adding margin:0 and padding:0 and even display:inline to the form tag, and nothing seems to work.

Any help would be greatly appreciated.

There's no help - that code is using extremely ugly Netscape specific bug, to layout that design arrangement.
You can't force Explorer to break rows and cells bleeding their content out of their boundaries just to accommodate this ugly abuse of tables and bug exploit for a simple layout that shouldn't be using tables at all .
The only decent way to fix that is to recode that html completely, avoiding tables OR, learn some better row spanning and coll spanning techniques in case you decide to keep the existing code.

Because all I see there is "dig a hole to patch another" principle, which at the end - will always end up leaving you with a brand new hole to patch.

Perahaps its a BUG!

I think I'll move this to "code snippets" - since it is an interesting one and working perfectly ... perhaps shorten it a little

I am very interested in developing RIAs. So I just wanted to know you opinions of each of them. I have a good foundation of XHTML and CSS, so is AJAX better?

Better than XHTML and CSS or better than better?!
You've titled this thread ajax vs flash so I will presume you mean ajax better than flash or v.v.
This question is far from a standing one, because it compares the same as if you've said "HTML document vs PDF" which one is better.

A completely different class of applications. Same with ajax vs flash.
but from you experience you will know that if certain "plug-ins" are installed you'll be able to preview pdf inside the html document, same goes with flash. If you have flash applications installed you will be able to preview them inside your html, otherwise youll see an empty box reserved for it - or nothing at all.

They don't compare. So if you are talking about WWW, -ajax is "better".

But what is AJAX?

-How compatible are they?

Ajax is extremely compatible compared to flash.
It doesn't require installation. It goes comes as content and is a part of it. In fact, Ajax is nothing but a 'skin' of web technology - flash is not!
AJAX: An external coat of existing plain javascript, html, css and that special object known as XMLHttpRequest. Nothing else.
While Flash is an application the can be plugged into …

I tried using

function changeImage(filename)
{
document.getElementById("mainimage").src=filename;
}

It's not working in both IE and firefox

:')
"

DaniWeb Community > Web Development > JavaScript / DHTML / AJAX
JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS
Works in IE not Firefox

:'p

I written a code to create a image viewer using javascript. But the script only works in IE but not in firefox. Please help.

The code is below......

<script type="text/javascript">

function changeImage(filename)
{
mainimage.src = filename;
}

</script>
<center>

<img src="images/bg.jpg" name="mainimage" width="419" height="282">
<marquee width="90%" scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();">

<?php
include 'database_conn.php';
$tbl_name="property";

$sql = "SELECT * FROM $tbl_name WHERE worth='1' && activation='1'";
$query = mysql_query($sql) or die(mysql_error());
echo "<table><tr>";

while ($row =mysql_fetch_array($query))
{
$title = $row['title'];
$area = $row['area'];
$propertyid = $row['propertyid'];
$image1 = $row['image1'];
$contact = $row['contact'];
$price = $row['price'];

if (empty($image1))
{
$image1 = "uploaded_files/no photo.jpg";
?><a href="javascript:changeImage('<?php echo $image1;?>')"><td><center><?php echo "$title";?></center><img src="<?php echo $image1;?>" width='90' height='80'><br><center><a href='detail.php?propertyid=<?php echo "$propertyid'"; ?>'>Details</a></center></td><?php
}
else
{
?><a href="javascript:changeImage('<?php echo $image1;?>')"><td><center><?php echo "$title";?></center><img src="<?php echo $image1;?>" width='90' height='80'><br><center><a href='detail.php?propertyid=<?php echo "$propertyid'"; ?>'>Details</a></center></td><?php
}
}
echo "</tr></table>";
mysql_close($conn);

?></marquee></center>
Reply With Quote

Netscape UA children are not capable of recognizing DOM elements by their Names or IDs natively!
They'll need externally patched built-in functions attached to Document Object, to become aware of them and be able to reach them. But not without script action. They could trigger this function internally after onload event would fire, but that would impact their render engine, rise more memory issues present and would fail to update DOM changes on runtime because of internal ondomchange event imperfections that would occasionally rise errors like this or that element is "Undefined" even though present.and defined.

Therefore you will be needing a function call "document.getelementById() every time …

I have a question I am have been googling all day with no examples I can use and need to come up with something.

I want to have a Javascript session timeout which does it's own internal countdown ie: 5 mins left before your session expires etc

I then would like to not have an "alert box" but rather an html layer indicating "x" minutes before the session expires, this page that pops up should also if there is no action in the 5 minutes reload it self to indicate the session has expired.

eg:
First Alert: "You have 5 minutes before your session expires"
Click here to continue your session.
or
Click here to logout

if no action in 5 mins then change the page to display
"Your session has expired"

I am really weak on Javascript but can plod through it if I have good examples.

Hi,
You'll be having problems with navigating away from the page if there's no user input for the confirmation box. Its modal!

I wrote this script while forgetting about this fact.
But here it is, -you could make use of that part too in case you decide to create your custom confirmation box, which will not halt the script command to navigate away..., but right now that part of a function will not get a chance to complete its task for as long as the modal dialog is on stand.

onload …

How "what?"!!!

Your precious:

<input type="button" value="use serkan's method" onclick="secondMethod()" />

"SERKAN's METHOD" type of think - will NOT work in Fire-Fox and other Netscape lurking children of the internet.
- What "what" ?

Troy III,

I have noticed that if there is no DOCTYPE, your code works great. However, if there is a DOCTYPE, then it does not take into account the height of the inner window loss if there are extra toolbars in both IE and FF. The top of the image gets pushed down cutting off the bottom.

Just I thought I would pass this along.

Again thanks for your help.
Mike_H

Thanks for your feedback, I already know that issue. That's the only practical reason I removed it and the reason I mentioned it. That code is HTML3.2 compliant, meaning, it will work and behave as expected and is it is backward compatible down to the level of IE 3.x and NN4.x browser generations and future compatible up to the present day and further.

If necessary, I'm positive (but not 100% sure) that using html 3.2 doc-type declaration, will keep it valid and will not interfere with its correct rendering in recent and up-coming UA-s in the future.

Regards.

#
This is a good example of using javascript innerText property which is not
#
as popular as innerHTML property

Yeah, good old sanity method, -not supported by crippled "modern" browsers until yesterday!

In fact, firefox still dosn't - currently tested in fx 3.5.3 no error but no go either...

According to what is written in the code - the function recursion should stop only when "exponent" reaches 0 value.

so if the base number is 2, on exponent 7, in iterations we'll have:
2 * (7 - 1) = (2 * 6) = 12
2 * (6 - 1) = (2 * 5) = 10
2 * 4 = 8
2 * 3 = 6
2 * 2 = 4
2 * 1 = 2
2 * 0 = 0
conditional met 0 ... ... ... ... the function will stop returning
0 = 1
1 meaning "true" the function finished operation.

In fact, I've been waiting for somebody like you,
who can come and teach me some insanity
like that.
I would be very proud of you!
-What is the outcome of a function that will try to zoom you in and out within the same click?!!
(...please...)

of course, "base" argument-value is always the initial given value - according to the function: only the "exponent" should change!
"base" is the BASE! There's no practical use if the base number changes.

#
img.onclick= zoomin;
#
img.onclick= zoomout;

This is pure nonsense!

and in case, this doesn't solve your problem try bypassing

Object.prototype.insertVid = function(id) {...

with:
var insertVid = function(id) {...

try changing the embeds[i].insertVid(id); into

insertVid(embeds[i].id);

The values are being kept and passed on function argument variables base & exponent, and the function will call itself until the exponent variable value reaches 0 ending the loop with 1.

Such a small, simple and powerful code deserves admiration :')

this section of daniweb is:
DaniWeb Community > Web Development > Web Design > HTML and CSS

I gave you a pure html/css solution! With a screen-shot confirming it.
Anyway, javascript/dhtml/ajax Q/A, are in another forum section...

So you would like the contents to be fllowing something like this?
:')\ hmmm...

Well, thanks, yeah :P I was kind of losing my head over that one. Didn't know about "clear: both;".

I wasn't using FLOATS there at all - no floats in that code. I hate floats. I like inline-blocks a lot better.

suppose you have ids of text elements as you mention:
"1hr, 2hr, 3hr, 4hr, 5hr...."

javascript: var  D = new Date(); var h = D.getHours();

document.getElementById(h+'hr').style.backgroundColor = "red"

that would set the correct text element background color to a (highly) distinctive color there. :')
If you'd like it current without refreshing the page you should use a timer check...

So you would like the contents to be fllowing something like this?
:')\ hmmm...

Where do you see this? =\ I can't seem to find it.

That's silly! :')
I found it pretty fast, if you ask me.
So you are coding a fixed width for 1024x768 screens only?!

OK
The offending element is:

[B]<div class="jcarousel-clip jcarousel-clip-horizontal">[/B] 
 <ul style="width: 1220px; left: 0pt;" id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
  <li jcarouselindex="1" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal">
   <a href="http://scrawlfx.com/2009/09/skate-3-brings-skate-crews-to-consoles-may-2010">
    <img src="http://scrawlfx.com/show_image_carousel.php?filename=/2009/09/skate-3-announced.jpg&amp;cat=1&amp;pid=18272" alt="SKATE 3 brings skate cr..." width="150" height="130">
SKATE 3 brings skate cr...
   </a>
  </li>
  <li jcarouselindex="2" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal">
   <a href="http://scrawlfx.com/2009/09/star-ocean-the-last-hope-announced-for-ps3">
    <img src="http://scrawlfx.com/show_image_carousel.php?filename=/2009/09/Star-Ocean-PS3-Scans_09-15_01.jpg&amp;cat=1&amp;pid=18253" alt="Star Ocean: The Last Ho..." width="150" height="130">
Star Ocean: The Last Ho...
   </a>
  </li>
 <li jcarouselindex="3" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal">
   <a href="http://scrawlfx.com/2009/09/shane-kim-announces-retirement-from-microsoft">
    <img src="http://scrawlfx.com/show_image_carousel.php?filename=/2009/09/shane-kim-retires.jpg&amp;cat=1&amp;pid=18240" alt="Shane Kim announces ret..." width="150" height="130">
Shane Kim announces ret...
   </a>
  </li>
  <li jcarouselindex="4" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal">
   <a href="http://scrawlfx.com/2009/09/the-first-15-minutes-of-bayonetta">
    <img src="http://scrawlfx.com/show_image_carousel.php?filename=/2009/09/bayonetta-first-15.jpg&amp;cat=1&amp;pid=18237" alt="The first 15 minutes of..." width="150" height="130">
The first 15 minutes of...
   </a>
  </li>
<!-- The content will be dynamically loaded in here -->
 </ul>
</div>

You try find its CSS andd ad that line to its existing css declarations or write a new one ...

First of: the code that you are using is not a cross-browser one!
Seccond: This code doesn't zoom anything at all!
(I allready told you - but you don't listen) -
Replace:

"img.addEventListener('click',zoomIn, false);"
//  with:
		img.onclick= zoomIn;

And the following:

function zoomIn(e)
{ 
 		alert('zoominfc')
		var target = e.target;
	if (window.event) e = window.event;
		var srcElement = e.srcElement? e.srcElement : e.target;
		alert(srcElement.id)
		alert(srcElement.parentNode.id)
		target.style.display="none"
		target.parentNode.style.display="none"	
		//removeallimages();
		maindiv = document.getElementById("maindiv")
		body = document.getElementsByTagName("body")
 		maindiv.parentNode.removeChild(maindiv)
 		//target.style.height = "500px"
		//target.parentNode.height = "500px" 
}

With:

function zoomIn(){	
	this.parentElement.style.display="none";
	document.body.removeChild(
		document.getElementById("maindiv") 
		);
	}

Now, - what your "zoomIn()" function does, is:

1. target.style.display="none"
2. target.parentNode.style.display="none"

meaning:

1. make disappear the image.
2. make disapear its parent too.

Than with your last line:

• "maindiv.parentNode.removeChild(maindiv)

you are removing [deleting] the main div containing all children div/img elements!
Theres' nothing being "zoomed" so far!
But, as i said - all of that can be replaced with this simple code:

function zoomIn(){	
	this.parentElement.style.display="none";
	document.body.removeChild(
		document.getElementById("maindiv") 
		);
	}

by replacing the: "img.addEventListener('click',zoomIn, false);"
with: "img.onclick= zoomIn;" in your "addimg()" function. Not to mention being cross-browser compatible too.

What do you need exctly?
1. Zoom to its native size; or 2. stretch it out to maximum available width/hight; 3. or stretch it by percetage zoom to 100% 200% 300% etc?

<style>
.inner-table { margin-left: 20px }
</style>

<p class="inner-table">
<table width="702" border="0" align="center">
  <tr>
    <td width="282" height="228">&nbsp;</td>
    <td width="410"><table width="350" height="113" border="0">
      <tr>
        <td width="344">&nbsp;</td>
        </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
</p>

You mean something like this?

I tried this but didn't make any difference. :S

No! :') I was thinking something more like this:

<style>
body * {border: solid 1px silver; }
table td * {border: solid 1px gray;}
.inner-table { margin-left: 20px }
</style>

<table width="702" border="0" align="center">
  <tr>
    <td width="282" height="228">&nbsp;</td>
    <td width="410"><table class="inner-table" width="350" height="113" border="0">
      <tr>
        <td width="344">&nbsp;</td>
        </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>

is it possible to run a command in javascript when someone paste text into a textarea? What i am trying to do is make a remove format command in the text editor run when they paste. And if it is possible make it run the command on the text without having to highlight it.

the reason why i am trying to do this is cause word sucks. it adds all kinds of crap to formatted text which causes problems as you know. I would just paste it into a notepad but i know my customers don't want to take that extra step.

thanks in advance

For as much as I understand your question - you want to remove html format from the clipboard content before it is pasted.

If you are developing for IE
there's an "onbeforepaste" event handle - but if you are developing for IE you will not need it.

1.copy-paste this code in location bar in IE. javascript: var a = clipboardData.getData('text'); document.write(a); 2.Than select and copy any code in the document under, or any other window.
3. hit "enter" - the copied content will be written in a new page as plain unformatted text.

this code is IE only!

no grade yet. its due friday.
this is a chalange for me with onyl 2 weeks of js lessons lol.
anyway thx for the help.

Good luck than!
But you should have told us that the solution:
.
.
.
img.onclick=getImgId;
.
.
.
function getImgId(){ id = this.id; alert( id ) }
.
.
.
works!