andsoiwas
08-27-2008, 11:41 AM
may i ask what is div? div id, class, style?
please try give me simple definitions so that i can have an idea on it..
please try give me simple definitions so that i can have an idea on it..
Click to See Complete Forum and Search --> : Div
Fang
08-27-2008, 12:14 PM
An element, a division.
http://en.wikipedia.org/wiki/Span_and_div
http://en.wikipedia.org/wiki/Span_and_div
andsoiwas
08-30-2008, 12:53 AM
is there any way that this thread can be moved?
as to what i understood if
<div class="andsoiwas" id="andsoiam">AAAA</div>
then i can style it with css like this
.andsoiwas {text-align: center}
#andsoiwas {color: red}
are both correct?
as to what i understood if
<div class="andsoiwas" id="andsoiam">AAAA</div>
then i can style it with css like this
.andsoiwas {text-align: center}
#andsoiwas {color: red}
are both correct?
Fang
08-30-2008, 01:04 AM
Both are correct, although try to use more descriptive names for id and class.
andsoiwas
08-30-2008, 01:09 AM
lol. then how about if i want to change what the div contains?
maybe through the use of an external javascript... example
<div class="moredescriptivename"><a href="heaven">Click here to go to heaven</a></div>
then how can i change the bold part with touching the html?
maybe through the use of an external javascript... example
<div class="moredescriptivename"><a href="heaven">Click here to go to heaven</a></div>
then how can i change the bold part with touching the html?
Fang
08-30-2008, 02:07 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>dom</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
]
<script type="text/javascript">
function f() {
var aAnchor=document.body.getElementsByTagName('a');
for(var i=0; i<aAnchor.length; i++) {
if(aAnchor[i].href.indexOf('heaven')!=-1) {
aAnchor[i].firstChild.data='found heaven';
}
}
}
window.onload=function(){f();};
</script>
<style type="text/css">
.moredescriptivename {}
</style>
</head>
<body>
<div class="moredescriptivename"><a href="heaven">Click here to go to heaven</a></div>
</body>
</html>
If the div or anchor contained an id, the method would be simpler.
<html lang="en">
<head>
<title>dom</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
]
<script type="text/javascript">
function f() {
var aAnchor=document.body.getElementsByTagName('a');
for(var i=0; i<aAnchor.length; i++) {
if(aAnchor[i].href.indexOf('heaven')!=-1) {
aAnchor[i].firstChild.data='found heaven';
}
}
}
window.onload=function(){f();};
</script>
<style type="text/css">
.moredescriptivename {}
</style>
</head>
<body>
<div class="moredescriptivename"><a href="heaven">Click here to go to heaven</a></div>
</body>
</html>
If the div or anchor contained an id, the method would be simpler.
andsoiwas
08-30-2008, 02:29 AM
so this would be the one i need to put in my js extension?
because i really can't touch the HTML...
function f() {
var aAnchor=document.body.getElementsByTagName('a');
for(var i=0; i<aAnchor.length; i++) {
if(aAnchor.href.indexOf('heaven')!=-1) {
aAnchor[i].firstChild.data='found heaven';
}
}
}
window.[I]onload=function(){f();};
and i'll need to add .moredescriptivename {} to my css?
and i can change the onload to onmousemove right?
and the link is still the same
and if there really is an ID
<div id="content_1">
<div class="first_class"><a href="/first.html">this is the first class</a></div>
<div class="second_class">this is the second class</div>
</div></div>
what would be the simpler method in changing the content of each class?
because i really can't touch the HTML...
function f() {
var aAnchor=document.body.getElementsByTagName('a');
for(var i=0; i<aAnchor.length; i++) {
if(aAnchor.href.indexOf('heaven')!=-1) {
aAnchor[i].firstChild.data='found heaven';
}
}
}
window.[I]onload=function(){f();};
and i'll need to add .moredescriptivename {} to my css?
and i can change the onload to onmousemove right?
and the link is still the same
and if there really is an ID
<div id="content_1">
<div class="first_class"><a href="/first.html">this is the first class</a></div>
<div class="second_class">this is the second class</div>
</div></div>
what would be the simpler method in changing the content of each class?
Fang
08-30-2008, 03:38 AM
and i'll need to add .moredescriptivename {} to my css?
and i can change the onload to onmousemove right?
Yes, on both counts.
document.getElementById('content_1').getElementsByTagName('a')[0].firstChild.data='first class';
document.getElementById('content_1').getElementsByTagName('div')[1].firstChild.data='second class';
and i can change the onload to onmousemove right?
Yes, on both counts.
document.getElementById('content_1').getElementsByTagName('a')[0].firstChild.data='first class';
document.getElementById('content_1').getElementsByTagName('div')[1].firstChild.data='second class';
andsoiwas
08-30-2008, 07:50 AM
how's that? how can i change the content of the div? what part should i edit?
Fang
08-30-2008, 12:04 PM
// reference to first text
document.getElementById('content_1').getElementsByTagName('a')[0].firstChild.data='new first text';
// reference to second text
document.getElementById('content_1').getElementsByTagName('div')[1].firstChild.data='new second text';
document.getElementById('content_1').getElementsByTagName('a')[0].firstChild.data='new first text';
// reference to second text
document.getElementById('content_1').getElementsByTagName('div')[1].firstChild.data='new second text';
andsoiwas
08-31-2008, 02:13 AM
now, how can i add a div using javascript?
Fang
08-31-2008, 02:28 AM
http://developer.mozilla.org/en/DOM/document.createElement
andsoiwas
09-10-2008, 12:15 AM
i tried the link...
but how can i add an id and class for that newly created div?
but how can i add an id and class for that newly created div?
Fang
09-10-2008, 07:28 AM
element = document.createElement('div');
element.setAttribute('id', 'myID');
element.className='myClass';
element.setAttribute('id', 'myID');
element.className='myClass';
andsoiwas
09-13-2008, 03:59 AM
in the given example on the link you have provided
how can i use your last post?
what's these bold parts?
<html>
<head>
<title>||Working with elements||</title>
</head>
<script type="text/javascript">
var my_div = null;
var newDiv = null;
function addElement()
{
// create a new div element
// and give it some content
newDiv = document.createElement("div");
newDiv.innerHTML = "<h1>Hi there and greetings!</h1>";
// add the newly created element and it's content into the DOM
my_div = document.getElementById("org_div1");
document.body.insertBefore(newDiv, my_div);
}
</script>
<body onload="addElement()">
<div id='org_div1'> The text above has been created dynamically.</div>
</body>
</html>
how can i use your last post?
what's these bold parts?
<html>
<head>
<title>||Working with elements||</title>
</head>
<script type="text/javascript">
var my_div = null;
var newDiv = null;
function addElement()
{
// create a new div element
// and give it some content
newDiv = document.createElement("div");
newDiv.innerHTML = "<h1>Hi there and greetings!</h1>";
// add the newly created element and it's content into the DOM
my_div = document.getElementById("org_div1");
document.body.insertBefore(newDiv, my_div);
}
</script>
<body onload="addElement()">
<div id='org_div1'> The text above has been created dynamically.</div>
</body>
</html>
Fang
09-13-2008, 05:39 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>||Working with elements||</title>
</head>
<script type="text/javascript">
function addElement()
{
// create a new div element
// and give it some content
var newElement = document.createElement("h1");
newElement.setAttribute('id', 'myID');
newElement.className='myClass';
newElement.appendChild(document.createTextNode('Hi there and greetings!'));
// add the newly created element and it's content into the DOM
var my_div = document.getElementById("org_div1");
document.body.insertBefore(newElement, my_div);
}
window.onload=addElement;
</script>
<style type="text/css">
.myClass {color:red; background-color:#ccc;}
</style>
<body>
<div id='org_div1'> The text above has been created dynamically.</div>
</body>
</html>
what's these bold parts?Local variables. Not necessary in this case.
<html lang="en">
<head>
<title>||Working with elements||</title>
</head>
<script type="text/javascript">
function addElement()
{
// create a new div element
// and give it some content
var newElement = document.createElement("h1");
newElement.setAttribute('id', 'myID');
newElement.className='myClass';
newElement.appendChild(document.createTextNode('Hi there and greetings!'));
// add the newly created element and it's content into the DOM
var my_div = document.getElementById("org_div1");
document.body.insertBefore(newElement, my_div);
}
window.onload=addElement;
</script>
<style type="text/css">
.myClass {color:red; background-color:#ccc;}
</style>
<body>
<div id='org_div1'> The text above has been created dynamically.</div>
</body>
</html>
what's these bold parts?Local variables. Not necessary in this case.
andsoiwas
09-16-2008, 08:19 AM
sorry fang, i can make it work for a sample HTML but i think this code
is being filtered in my webpage
do you have another method aside from the createElement
how to create elements?
is being filtered in my webpage
do you have another method aside from the createElement
how to create elements?
Fang
09-16-2008, 09:03 AM
Always use the previous method in preference to this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>||Working with elements||</title>
</head>
<script type="text/javascript">
function addElement()
{
var my_div = document.getElementById("myID");
my_div .innerHTML='<h1 class="myClass">Hi there and greetings!<\/h1>';
}
window.onload=addElement;
</script>
<style type="text/css">
.myClass {color:red; background-color:#ccc;}
</style>
<body>
<div id="myID"></div>
<div id='org_div1'> The text above has been created dynamically.</div>
</body>
</html>
<html lang="en">
<head>
<title>||Working with elements||</title>
</head>
<script type="text/javascript">
function addElement()
{
var my_div = document.getElementById("myID");
my_div .innerHTML='<h1 class="myClass">Hi there and greetings!<\/h1>';
}
window.onload=addElement;
</script>
<style type="text/css">
.myClass {color:red; background-color:#ccc;}
</style>
<body>
<div id="myID"></div>
<div id='org_div1'> The text above has been created dynamically.</div>
</body>
</html>
andsoiwas
09-16-2008, 09:28 AM
so you don't have another?
i am just bypassing the server
and just adding some scripts
but most are not allowed
if you another way...
it would be really good.
how about replacing div contents
with innerHTML?
i just use this as a substitute...
i am just bypassing the server
and just adding some scripts
but most are not allowed
if you another way...
it would be really good.
how about replacing div contents
with innerHTML?
i just use this as a substitute...
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.
Copyright Internet.com Inc., All Rights Reserved.