2 html/Javascript questions

unknowngiver · Jan 24, 2007

Hey
I got 1 javascript and 1 html question..
html:
when i m making the FILE input field...is there a way to edit how the "Browse" button looks like? i applied a style to the FILE input field but the browse button stays the same...heres the code:

PHP:

<tr><td><p id="field">Thumbnail/Screenshot:</p></td><td><input type="file" name="thumb" value="<? echo $form->value("thumb"); ?>" class="form_field" / ></td></tr>

and heres the javascript question:
i have a code that expands a div..but to do so..it still refreshes page [i noticed it cuz in that page..it plays a video..and when some1 expands the div..it refreshs the page] is there a way to have the same expand and collapse effect ..but without refreshing the page?
heres the code:

PHP:

<div onClick="expandcontent('add')" style="display: inline;"><a href="#">  Add a Comment</a></div></p>
	<div style="display: none;" id="add" >
		<?php if ($session->logged_in){?>
		<form action="process.php" method="post">
			<textarea name="comment" cols="65" rows="3" maxlength="150" onkeyup="return ismaxlength(this)" class="text_area"></textarea>
			<br /><p id="text">MaxLength: [150]</p><br />
			<input type="hidden" name="subcomment" value="1">
			<input type="hidden" name="mid" value="<?=$media_id?>">
			<input type="hidden" name="url" value="<?=$_SERVER['PHP_SELF'].'?' . $_SERVER['QUERY_STRING']?>">
			<input type="hidden" name="uid" value="<?=$database->get_uid($session->username);?>">
			<input type="submit" value="Add Comment" class="button" />
		</form>
		<?} else{ echo "<p id='text'>You must login to add a comment</p>";}?>
	</div>

and heres the javascript:

Code:

/* EXPANDABLE DIVS */
function expandcontent(div_id)
{
	document.getElementById(div_id).style.display=(document.getElementById(div_id).style.display!="block")? "block" : "none"
}
function ismaxlength(obj){
var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
if (obj.getAttribute && obj.value.length>mlength)
obj.value=obj.value.substring(0,mlength)
}

TwistMyArm · Jan 24, 2007

Not too sure about your HTML question, but regarding your Javascript one... I think that if, for your onclick code, you do something like:

onClick="expandcontent('add');return false;"

it should stop the refresh. In theory, the return should stop the browser from actually going on to process the actual HREF. Just to clarify, I think you'll find that it's not reloading the page, just scrolling back to the top of the page I think...

PoorDoggie · Jan 24, 2007

hey there

The <a href="#"> bit IS acctually refreshing the page. Its not quite refreshing it, more "linking" to it, as if it were another page, lol. Take it out... there's not much point for it... do this instead:

Code:

<div onClick="expandcontent('add')" style="display: inline;"><span style="cursor: hand; cursor: pointer; text-decoration: underline;">Add a Comment</span></div>

That should make it look like a link, and take away the need for the dodgy link.

Also....... you could make the text behave like a link with some "onMouseOver" and "onMouseOut" style changes... but those take slightly more time. :D

and here is the answer to your html question...

was reading through and just thought - my god that is SOOOO clever! haha

have fun http://www.quirksmode.org/dom/inputfile.html

TwistMyArm · Jan 24, 2007

PoorDoggie: I just tried the following code:

PHP:

<html>
<body onload="alert('page just loaded');">
<?php
echo time();

for ($i = 0; ($i < 200); $i++) {
echo '<br>';
}

print '<a href="#">click me</a>';

?>
</body>
</html>

Essentially it shows the current timestamp then draws enough whitespace to push the link offscreen. However, with the onload event, you get a message when the page loads.

I clicked the link and although it added the hash to the top of the page and although the page scrolled back to the top, the timestamp didn't change and the message did not show again. To me, that says that it doesn't reload the page at all (neither from the server, nor in any sense of the word 'reload'). The effect is that by clicking on the single hash (the anchor link item) you're linking to a non-existent anchor in the page and so you get thrown to the top of the page.

Now, change the HREF to:
<a onclick="return false;" href="#">

and see what happens: no page reload, nothing. Not even the URL is changed to show that you've followed the link to the non-existent anchor.

I appreciate that your solution is creative, but there's no reason not to use the one I did, especially seeing as it makes more sense and is easier to implement.

I don't want to start some sort of flamewar, I'm just saying....

unknowngiver · Jan 24, 2007

okay thanks guyz

it works perfectly
1 another question
is there a javascript code [small ] to give a "alert" if the textbox /field is empty?
i know how to check it with php..but again..it would refresh the page [causing the video to stop] for no reason...
Thanks

Matthew. · Jan 24, 2007

try something like this:

PHP:

var area = document.getElementById('textareaID');

if(area.value.length == 0 || area.value == null)
{
    alert('The box is empty!');
}

If you want to be extra sure you can check the first charactor is not a blank space by doing something like:

PHP:

IF area.value.charAt(0) == ' '

Hope that helps :P

PoorDoggie · Jan 24, 2007

TwistMyArm said:
PoorDoggie: I just tried the following code:

ah... I always thought it did refresh/reload the page.

hey... np

thanks for pointing that out. :D

unknowngiver · Jan 24, 2007

Matthew. said:
try something like this:

PHP:

var area = document.getElementById('textareaID'); if(area.value.length == 0 || area.value == null) { alert('The box is empty!'); }

If you want to be extra sure you can check the first charactor is not a blank space by doing something like:

PHP:

IF area.value.charAt(0) == ' '

Hope that helps :P

okay so this is the javascript code..
so i add a "id=" in the textarea and in the javascript change "textareaid" to that?
and also..if i make it a function..and dump it in my javascript functions file..how and where would i call it? when the "Submit" button is clicked?

PoorDoggie · Jan 25, 2007

change "myFunction" to the function you want to call.

Code:

<input type="submit" value="Submit" onClick="myFunction()" />

OR... acctually may be better:

Code:

<form method="post" action="action.php" onSubmit="myFunction()">

unknowngiver · Feb 2, 2007

hey i tried this:

Code:

function check(){
 var area = document.getElementById('textareaID');

if(area.value.length == 0 || area.value == null)
{
    alert('The box is empty!');
}  
}

and then

PHP:

<form action = "?" method = "POST" onSubmit="check()">

and it shows the error box..but it still submits the form?

TwistMyArm · Feb 2, 2007

Like I said in the very first reply, your JavaScript needs to returns false to stop the form from being submitted.

You probably want something like:

Code:

function check(){
    var area = document.getElementById('textareaID');

    if(area.value.length == 0 || area.value == null)
    {
        alert('The box is empty!');
        return false;
    }  
    return true;
}

and...

Code:

<form action = "?" method = "POST" onSubmit="if (! check()) { return false;}">

Not that I know what the 'action = "?"' is in reference to, I've never seen that...

unknowngiver · Feb 2, 2007

hey .. ya i got it 2 work..instead of ""if (! check()) { return false;}" i just did "onSubmit="return check()" and it works :D thanks

2 html/Javascript questions

VIP Member

Established Member

Soon to be RICHdoggie!VIP Member

Established Member

VIP Member

VIP Member

Soon to be RICHdoggie!VIP Member

VIP Member

Soon to be RICHdoggie!VIP Member

VIP Member

Established Member

VIP Member

Ofke.com

stressbuster.co.uk

CryptoHorse.com

EvtolVertiport.com

CertifiedHomeRepairs.com

BozemanConcrete.com

FinovaSolutions.com

surgeprofit.com

AstaWallet.com

CryptoGroup.in

Similar threads

We're social

Ofke.com

stressbuster.co.uk

CryptoHorse.com

EvtolVertiport.com

CertifiedHomeRepairs.com

BozemanConcrete.com

FinovaSolutions.com

surgeprofit.com

AstaWallet.com

CryptoGroup.in

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling