JavaScript - Styling The First Div With Different Css To The Rest

Is there a way of doing this with javascript?

I have a homepage, that has to go to a certain directory, find the newer TXT file, get the first paragraph, get it formated with H1 tag, then read the rest format it with a P tag.

So everytime a new TXT file is created in that directory the homepage (HTML/index.html) change.

Thank in advance

Miguel Sanchez

Is there any way to use css to make a style for a javascript command such as document.write?

I want to be able to control its position, font, color, and size

I'm back from a web dev hiatus. I'm writing a new site but have found myself a bit rusty. I'm trying to change the visibility of an element with no luck. nothing happens. I'll supply the code. Don't lick the kitten. My js is external. Any non-condescending help is welcome.

html
Code:

    <div id="windows"><p>Windows</p>
        <a name="windowsitem">test1</a>
        <a>test2</a>
</div>

javascript a.k.a js (js stands for whispering ponies)
Code:

function filter()
{
    if ( windowscb.checked==1 )
        windowsitem.style.visibility='visible';
    else
        windowsitem.style.visibility='hidden';
}

If Ashton Kutcher is reading this, I should be married to Demi Moore. Not you!!

Hi guys,


I am after a script which will has parametres to modify the select menu in webpages.

I have looked at niceforms http://www.emblematiq.com/lab/niceforms/demo/

However i dont know how to apply it.

Any tips would be much appreciated.

George

Hi,

I would like to change the style on my onclick on my radio buttons not sure why it's not working?!


PHP Code:
<div id="Available" <?php if($mondayamstart == "Unavailable"){ echo 'style="visibility:hidden!important;"';} else { echo 'style="visibility:visible!important;"';} ?>>
<select name="Monday_am_startH" id="Monday_am_startH">
<?php
for ($i=0; $i<24; $i++)
{
    if($i<10)
    {
        $i = sprintf("%02d",$i);
    }
    echo '<option'.($i==substr($mondayamstart,0,2)? ' selected' : '').' value="'.$i.'">'.$i.'</option>';
}
?>
</select>
:
<select name="Monday_am_startM" id="Monday_am_startM">
<?php
for ($i=0; $i<60; $i++)
{
    if($i<10)
    {
        $i = sprintf("%02d",$i);
    }
    echo '<option'.($i==substr($mondayamstart,3,2)? ' selected' : '').' value="'.$i.'">'.$i.'</option>';
}
?>
</select>
</div>
<div id="Unavailable">&nbsp;</div>
<br />
<input type="radio" name="Monday_am_startRad" value="AvailableMon" <?php if($mondayamstart != "Unavailable"){ echo "checked";} ?> onClick:"document.getElementByID('available').style.visibility:visible;'"> Available <br /><input type="radio" name="Monday_am_startRad" value="UnavailableMon" <?php if($mondayamstart == "Unavailable"){ echo "checked";} ?> onClick:"javascript'getElementByID('Unavailable')style.visibility:hidden;'"> Unavailable

ok, I am using jQuery UI http://jqueryui.com

I have it all working but I wanted to style my form button

I am using this:

Code:

<button id="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">A button element</span></button>

that styles it, but doesn't work as I need it to be a form button?!

Please help?!

thanks

Hi.

I want to make jQuery check, whether if I've supplied text into all fields. If not, then jQuery adds some styling to the input boxes pointing out, the user must type something.

However, I do not want to do many, many lines of jQuery to do this with all of the inputs. Is there a way to check which input is empty, and then add styling to the individual one? And then remove the style, if it's no longer empty. Like - ONE piece of code, that checks all of the inputs, and adds style to the ones, that are empty.

Here's what I have right now.

Code:

<script type="text/javascript">
$(function(){
	$('#register').click(function(){
		var username = $('#username').val();
		var password = $('#password').val();
		
		if(username == ""){
			$('#username').css({
				background: '#F3CACA',
				border: '1px solid #E61A1A'
			});
		}else{
			$('#username').removeAttr('style');
		}
		
		return false;
	});
});
</script>

I played around with if(username == "" || password == ""). It works, but then I got lost on how to add styles to the individual input that is empty.

Hello Guys
I'm new to Javascript

I think that the way I have worded the title may be incorrect, as I've googled similar phrases without finding anything to help me

Anyway onto the issue

I have a dropdown menu
you can see it he
http://heavywoollen.webs.com

It's written in html & css, now I've had to put the code for the dropdown onto every page of the site, simply because at the time that was all i knew how to do, so I'm now trying to reduce it by writing it on JS and link the file into the page

so the issue/question

I have written the menu in JS, but my question is

How is it styled? or how is the css file appiled?

in the html I use < div id =" navMenu "> </div>
and in the css there is # navMenu

so I can understand how that works, but I can't figure out how to apply it into javascript,

I think simply because I don't know enough about JS to know what the link tag is, if it exists

at the moment the JS file simply reads link this
Code:

//Admin Options - open <ul>
document.write("<ul><li><a href=#>Admin</a><ul><li><a href=index.html>Home</a></li><li><a href=history.html>History</a></li></li><li><a href=constitution.html>Constitution</a></li><li><a href=Code of Conduct.html>Code of Conduct</a></li><li><a href=League Meetings.html>League Meetings</a></li><li><a href=Club Contacts.html>Contacts</a></li><li><a href=League Officials.html>League Officials</a>  </li><li><a href=League Policy.html>Policy</a>  </li><li><a href=Duty of Care.html>Duty of Care</a>  </li><li><a href=Helmets.html>Helmets</a>  </li><li><a href=Fielding Regulations.html>Fielding Regs</a>  </li><li><a href=Fast Bowling.html>Fast Bowling</a>  </li><li><a href=Unfair Bowling.html>Unfair Bowling</a>  </li><li><a href=Umpires.html>Umpires</a>  </li><li><a href=Laws of Cricket.html>Cricket Law</a>  </li><li><a href=CRB.html>CRB Check </a>  </li></ul></li>");

//Clubs
document.write("<li><a href=#>Clubs</a><ul><li><a href=clubs-adwalton.html>Adwalton</a>  </li><li><a href=clubs-altofts.html>Altofts</a>  </li><li><a href=clubs-azaad.html>Azaad</a>  </li> <li><a href=clubs-batley.html>Batley</a>  </li><li><a href=clubs-birstall.html>Birstall</a>  </li><li><a href=clubs-brighouse.html>Brighouse</a>  </li><li><a href=clubs-carlton.html>Carlton</a>  </li><li><a href=clubs-cleckheaton.html>Cleckheaton</a>  </li><li><a href=clubs-driglington.html>Drighlington</a>  </li><li><a href=clubs-eastardsley.html>East Ardsley</a>  </li><li><a href=clubs-gildersome.html>Gildersome</a>  </li><li><a href=clubs-gomersal.html>Gomersal</a>  </li><li><a href=clubs-hangingheaton.html>Hanging Heaton</a>  </li><li><a href=clubs-hartsheadmoor.html>Hartshead Moor</a>  </li><li><a href=clubs-holmevalleygirls.html>Holme Valley Girls</a>  </li><li><a href=clubs-hunsletnelson.html>Hunslet Nelson</a>  </li><li><a href=clubs-liversedge.html>Liversedge</a>  </li><li><a href=clubs-methley.html>Methley</a>  </li><li><a href=clubs-mirfield.html>Mirfield</a>  </li><li><a href=clubs-mirfieldpc.html>Mirfield PC</a>  </li><li><a href=clubs-moorlands.html>Moorlands</a>  </li><li><a href=clubs-morley.html>Morley</a>  </li><li><a href=clubs-newfarnley.html>New Farnley</a>  </li><li><a href=clubs-ossett.html>Ossett</a>  </li><li><a href=clubs-rothwell.html>Rothwell</a>  </li><li><a href=clubs-scholes.html>Scholes</a>  </li><li><a href=clubs-townville.html>Townville</a>  </li><li><a href=clubs-wakestmichs.html>Wake St Michaels</a>  </li><li><a href=clubs-wakethornes.html>Wakefield Thornes</a>  </li><li><a href=clubs-westbretton.html>West Bretton</a>  </li><li><a href=clubs-wrenthorpe.html>Wrenthorpe</a>  </li></ul></li>");

//League Tables & Fixtures
document.write("<li><a href=>Leagues</a><ul> <li><a href=fixtures.html>Fixtures/Results</a> </li><li><a href=leaguetables.html>Tables</a>  </li></ul></li>");

//Representative
document.write("<li><a href=#>Representative</a> <ul> <li><a href=lordtav-u11.html>Lord Taverners U11</a>  </li><li><a href=lordtav-u15.html>Lord Taverners U15</a>  </li><li><a href=coaching.html>Coaching</a>  </li><li><a href=teamwear.html>Team Wear</a>  </li></ul></li>");

//Links
document.write("<li><a href=#>Links</a> <ul><li><a href=http://www.ecb.co.uk/>ECB</a>  </li><li><a href=http://www.ecb.co.uk/development/ecb-coaches-association/>ECB CA</a>  </li><li><a href=http://www.yorkshirecb.com/>YCB</a>  </li><li><a href=http://www.yorkshirecricketboard.org.uk/index.php?option=com_content&view=article&id=103:yorkshire-senior-schools-cricket-association&catid=271:yssca&Itemid=49>YSCA</a>  </li><li><a href=http://www.yorkshirewca.co.uk/district.html>YWCA</a>  </li><li><a href=http://www.homeoffice.gov.uk/agencies-public-bodies/crb/>CRB</a>  </li></ul></li>");

//Photo Gallery  - closing </ul>                   
document.write("<li><a href=#>Other</a> <ul><li><a href=#>Photo Galllery</a>  </li><li><a href=#>Player Registration</a>  </li></ul></li></ul>");

Apologies if that is too much code for a post

so there is nothing else on the sheet
do I need to use a link tag?

How do i get the JS file to relate to the #navMenu of the css file?

Thanks

Rob

Hi, I'm not good with manipulating JavaScript for my needs and I am trying to use a JavaScript file to implement my common content in to my web page, in this case it is a news article I want to display across all of my web pages. The problem is that I want to style it and use html attributes in side of the document.write and that is apparently messing it up. Would someone be able to show me how to fix this problem or fix the code so I can get the common content to display correctly with styling from CSS. If possible I would like to keep the CSS in a separate file and put a link to it in the JavaScript file and use the class tags, but I do not know how far we can go with JavaScript.
Thanks for helping. Here are links to the webpage where I would like the code to show up. Below is the JavaScript that is currently in my .js file.

http://www.nasawear.com/Home.html (The news article should display in the right column.)


Code:

document.write("<link rel="stylesheet" type="text/css" href="css/mainpage.css" />");
document.write("<h3 class="section">");
document.write("New NASA News");
document.write("</h3>"); 
document.write("
<div class="picbox">
<a rel="nofollow" target="_blank" href="image/superhotplanet-full.jpg">
<img class="white" width="335" height="268" src="image/superhotplanet-full.jpg" alt="NASA Finds Super-Hot Planet with Unique Comet-Like Tail" /> Full Size</a>
<p class="imageandstuff">NASA Finds Super-Hot Planet with Unique Comet-Like Tail</p>
<p class="dis">
Astronomers using NASA's Hubble Space Telescope have confirmed the existence of a baked object that could be called a "cometary planet." The gas giant planet, named HD 209458b, is orbiting so close to its star that its heated atmosphere is escaping into space.
<br/>
<br/>
Observations taken with Hubble's Cosmic Origins Spectrograph (COS) suggest powerful stellar winds are sweeping the cast-off atmospheric material behind the scorched planet and shaping it into a comet-like tail.
<br/>
Illustration Credit: NASA, ESA, and G. Bacon (STScI)
</p>
</div> ");

Is there a script that automatically applies two different styles to the first two lines of text in a container, without using CSS?

Example:

======
This Would be Line One as a Title with its Own Style
This would be line two as a byline with a separate style

This is the main text of the paragraph... etc etc.
======


Thanks for any help.

Steph

Hey,

I have a page at http://www.webdev70.cocc-webdev.org/contact.html where I have styling on the radio and check boxes.

I'm working on another project for class now where I want onclick or onchange functions in the radio buttons. When the radio buttons have the class="styled" on them, the function will not execute. When that's removed, they do.

Here is the javascript for the styling:

Code:

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";


document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');

var Custom = {
	init: function() {
		var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
		for(a = 0; a < inputs.length; a++) {
			if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
				span[a] = document.createElement("span");
				span[a].className = inputs[a].type;

				if(inputs[a].checked == true) {
					if(inputs[a].type == "checkbox") {
						position = "0 -" + (checkboxHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					} else {
						position = "0 -" + (radioHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					}
				}
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.clear;
				if(!inputs[a].getAttribute("disabled")) {
					span[a].onmousedown = Custom.pushed;
					span[a].onmouseup = Custom.check;
				} else {
					span[a].className = span[a].className += " disabled";
				}
			}
		}
		inputs = document.getElementsByTagName("select");
		for(a = 0; a < inputs.length; a++) {
			if(inputs[a].className == "styled") {
				option = inputs[a].getElementsByTagName("option");
				active = option[0].childNodes[0].nodeValue;
				textnode = document.createTextNode(active);
				for(b = 0; b < option.length; b++) {
					if(option[b].selected == true) {
						textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
					}
				}
				span[a] = document.createElement("span");
				span[a].className = "select";
				span[a].id = "select" + inputs[a].name;
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				if(!inputs[a].getAttribute("disabled")) {
					inputs[a].onchange = Custom.choose;
				} else {
					inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
				}
			}
		}
		document.onmouseup = Custom.clear;
	},
	pushed: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
		} else if(element.checked == true && element.type == "radio") {
			this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
		} else if(element.checked != true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
		} else {
			this.style.backgroundPosition = "0 -" + radioHeight + "px";
		}
	},
	check: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 0";
			element.checked = false;
		} else {
			if(element.type == "checkbox") {
				this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else {
				this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
				group = this.nextSibling.name;
				inputs = document.getElementsByTagName("input");
				for(a = 0; a < inputs.length; a++) {
					if(inputs[a].name == group && inputs[a] != this.nextSibling) {
						inputs[a].previousSibling.style.backgroundPosition = "0 0";
					}
				}
			}
			element.checked = true;
		}
	},
	clear: function() {
		inputs = document.getElementsByTagName("input");
		for(var b = 0; b < inputs.length; b++) {
			if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
			} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			}
		}
	},
	choose: function() {
		option = this.getElementsByTagName("option");
		for(d = 0; d < option.length; d++) {
			if(option[d].selected == true) {
				document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
			}
		}
	}
}
window.onload = Custom.init;

The code is way over my head so I'm not sure where the problem is, or if it could be fixed.

This is what one of my radio buttons looks like:
<input type="radio" name="puppy" value="1" class="styled" onchange="puppycheck()">Black and White Puppy


If the style tag is removed it works perfectly. There is CSS too, but I don't think the problem is in there.

I'm trying to call a javascript function from within my swf and I'm having a couple of problems which are confussing me somewhat.

I'm using this to call the function from flash:

Code:

ExternalInterface.call("pgcover");

I know that this is calling the function as I have set it trigger an alert action and this comes up properly.

But I don't want the function to trigger an alert, this is just for testing purposes.

I instead want it to change the styling on a div.

I have set up a test page where I have asigned the function to a button and this works, the div display changes from block to none.

When I get the swf to call the function setup to do the same thing, nothing happens.

Code:

function pgcover() 
{ 
  document.getElementById("unlayout").style.display= "none";
}

My swf is embedded in the html page that the javascript is on, I have checked all code and have rulled out spelling mistakes etc.

Any help with this would be amazing as it is driving me crazy.

I've set up a mock registration form page so I can learn a bit about javascript's form validation. (newbie) I want to try to attempt to style the border of a form field green when the user enters the correct info into the form text field and red on all other fields if the user doesnt enter any info into them. When i test it, enter the right info into the username field, leave the others blank, and hit the submit button it styles the username field green ok but it doesnt make the next fields (password and so on) red. Could someone please explain what I am doing wrong?

here is my code so far...
Note: just for testing purposes I've put return false on everything so it displays a message when everythings ok.

Code:

....
<script type="text/javascript">
	window.onload = function() {
		document.forms[0].username.focus();
	}
	function validate(form)
	{
		var form = document.getElementById("reg");
		var e = document.getElementById("error");
		e.style.background = "red";
		
		for(var i = 0; i < form.elements.length; i++)
		{
			var el = form.elements[i];
			if(el.type == "text" || el.type == "password")
			{
				if(el.value == "")
				{
					e.innerHTML = "Please fill in all fields!";
					el.style.border = "1px solid red";
					el.focus();
					return false;
				} else {
					el.style.border = "1px solid green";
					return false;
				}
			}
		}
		var un = form.username;
		un.value = un.value.replace(/^\s+|\s+$/g,"");
		if((un.value.length < 3)|| (/[^a-z0-9\_]/gi.test(un.value)))
		{
			e.innerHTML = "Only letters,numbers and the underscore are allowed (no spaces) - 3-16 characters";
			un.focus();
			return false;
		}
		var pw = form.password;
		pw.value = pw.value.replace(/^\s+|\s+$/g,"");
		if((pw.value.length < 3) || (/[^a-z0-9]/gi.test(pw.value)))
		{
			e.innerHTML = "Only letters and numbers are allowed (no spaces) - 3-16 characters";
			pw.focus();
			return false;
		}
		e.innerHTML = "You filled in all the fields, well done!";
		e.style.background = "green";
		return false;
	}
</script>
</head>

<body>
<div id="wrapper">
	<div id="header">
    	<h1>My Cool Website</h1>
    </div>
    <div id="content">
		<div class="padding">
       	  <h2>Registration</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<form id="reg" action="#" method="post" onsubmit="return validate(this)">
	    <div id="error"></div>
		<div><label for="username">Username</label></div>
    			<div><input type="text" name="username" id="username" size="30" maxlength="16" /></div>
		<div><label for="password">Password</label></div>
    			<div><input type="password" name="password" id="password" size="30" maxlength="16" /></div>
        <div><label for="c_password">Confirm Password</label></div>
                <div><input type="password" name="c_password" id="c_password" size="30" maxlength="16" /></div>
        <div><label for="email">Email address</label></div>
                <div><input type="text" name="email" id="email" size="30" maxlength="200" /></div>
        <div><label for="c_email">Confirm Email address</label></div>
                <div><input type="text" name="c_email" id="c_email" size="30" maxlength="200" /></div>
        <div><label for="firstname">First name</label></div>
                <div><input type="text" name="firstname" id="firstname" size="30" maxlength="100" /></div>
        <div><label for="surname">Surname</label></div>
                <div><input type="text" name="surname" id="surname" size="30" maxlength="100" /></div>
        <div><label for="gender">Gender</label></div>
                <div>
                    <div><input type="radio" name="gender" id="gender" value="m" checked="checked" />Male</div>
                    <div><input type="radio" name="gender" value="f" />Female</div>
                </div>
                <div><input type="submit" value="Register" name="submit" /></div>
          </form>
		</div>
    </div>
    <div id="footer">
    	<p>Copyright &copy; 2009 My Cool Website</p>
    </div>
</div>
</body>
</html>