Little Help with JavaScript

V

vaib

Hi All,

I am relatively new to JavaScript and I have to develop something that
seems like a good amount o learning curve for me right now.

To make it simple here's the most simplistic view of what I have to do
- A page where two DIVs are placed side by side and there's a button
below. On the click of the button the DIVs should exchange their
positions ( ofcourse, with everything in them also being exchanged ).
I have to make it resolution free.

I do not need any code as such ( although any help is appreciated )
but what approach to take would be a great help.

Meanwhile I am also searching google ;)

Thanking in anticipation.


- Vaibhav
 
L

Luuk

vaib schreef:
Hi All,

I am relatively new to JavaScript and I have to develop something that
seems like a good amount o learning curve for me right now.

To make it simple here's the most simplistic view of what I have to do
- A page where two DIVs are placed side by side and there's a button
below. On the click of the button the DIVs should exchange their
positions ( ofcourse, with everything in them also being exchanged ).
I have to make it resolution free.

I do not need any code as such ( although any help is appreciated )
but what approach to take would be a great help.

Meanwhile I am also searching google ;)

Thanking in anticipation.


- Vaibhav

- start coding
- get help from Google
- for reference you might go to http://w3schools.com/js/default.asp
- when you have coded something, and get weird errors, post what you
have made, and ask questions...
 
S

SAM

Le 10/16/09 7:58 PM, vaib a écrit :
Hi All,

I am relatively new to JavaScript and I have to develop something that
seems like a good amount o learning curve for me right now.

To make it simple here's the most simplistic view of what I have to do
- A page where two DIVs are placed side by side and there's a button
below. On the click of the button the DIVs should exchange their
positions ( ofcourse, with everything in them also being exchanged ).
I have to make it resolution free.

Where are the divs ? (in another div, in the body?)

Suppose they are only 2 and in the body :


CSS:
====
div { width: 38%; margin: 5%; float: left; border: 1px solid }
#brk { text-align: center }

JS :
====
function move() { // move the 1st div at the end
var d = document.getElementsByTagName('DIV')[0];
document.body.appendChild(d);
}

html:
=====
<body>
<p class="brk"><button onclick="move()">xchange divs</button></p>
<div style="background:#ff5">
<h2>Div #1</h2>
<p>nothing to say</p>
</div>
<div style="color:red">
<h2>Div #2</h2>
<p>nothing more to say</p>
</div>
I do not need any code as such ( although any help is appreciated )
but what approach to take would be a great help.

The function appendChild moves the child to the end of concerned element
(from temp (document.createElement) or from the DOM already displayed)

If you want to move to a certain place use insertBefore
(in the same way as given above)

Meanwhile I am also searching google ;)

<https://developer.mozilla.org/En/DOM/Node.appendChild>
and see also :
insertBefore, replaceChild, removeChild and cloneNode
 
D

Dr J R Stockton

In comp.lang.javascript message <5bf6ef14-70ae-4ec9-aeed-123e5a6fbdb0@z3
g2000prd.googlegroups.com>, Fri, 16 Oct 2009 10:58:40, vaib
To make it simple here's the most simplistic view of what I have to do
- A page where two DIVs are placed side by side and there's a button
below. On the click of the button the DIVs should exchange their
positions ( ofcourse, with everything in them also being exchanged ).
I have to make it resolution free.

Consider

<div ID=A style="width:50%; background:lime; float:left">AAA</div>
<div ID=B style="width:50%; background:aqua; float:right">BBB</div>
<input type=button onClick="Swap()">

<script>
function Swap() { var AA, BB, T
AA = document.getElementById("A")
BB = document.getElementById("B")
T = AA.style.cssFloat
AA.style.cssFloat = BB.style.cssFloat
BB.style.cssFloat = T }
</script>
 
J

Jorge

(...)
        <script>
        function Swap() { var AA, BB, T
          AA = document.getElementById("A")
          BB = document.getElementById("B")
          T = AA.style.cssFloat
          AA.style.cssFloat = BB.style.cssFloat
          BB.style.cssFloat = T }
        </script>

Not even a single semicolon ?
 
V

vaib

vaib schreef:












- start coding
- get help from Google
- for reference you might go tohttp://w3schools.com/js/default.asp
- when you have coded something, and get weird errors, post what you
have made, and ask questions...

Thanx for your reply but I just wanted to know where to start
looking..!
 
R

rf

I've gone through it.

Just be aware that just like the rest of the w3schools site it is sometimes
wildly inaccurate. For example: from that afforementioned page:
"Javascript can be used to detect the visitor's browser".
No, it cannot be used to do this. Not at all reliably.
 
V

vaib

Just be aware that just like the rest of the w3schools site it is sometimes
wildly inaccurate. For example: from that afforementioned page:
"Javascript can be used to detect the visitor's browser".
No, it cannot be used to do this. Not at all reliably.

Yes I know. It's only for the one looking to learn the ABC of
something. But thanx for responding.
 
V

vaib

Le 10/16/09 7:58 PM, vaib a écrit :
I am relatively new to JavaScript and I have to develop something that
seems like a good amount o learning curve for me right now.
To make it simple here's the most simplistic view of what I have to do
- A page where two DIVs are placed side by side and there's a button
below. On the click of the button the DIVs should exchange their
positions ( ofcourse, with everything in them also being exchanged ).
I have to make it resolution free.

Where are the divs ? (in another div, in the body?)

Suppose they are only 2 and in the body :

CSS:
====
div { width: 38%; margin: 5%; float: left; border: 1px solid }
#brk { text-align: center }

JS :
====
function move() { // move the 1st div at the end
var d = document.getElementsByTagName('DIV')[0];
document.body.appendChild(d);

}

html:
=====
<body>
<p class="brk"><button onclick="move()">xchange divs</button></p>
<div style="background:#ff5">
   <h2>Div #1</h2>
   <p>nothing to say</p>
</div>
<div style="color:red">
   <h2>Div #2</h2>
   <p>nothing more to say</p>
</div>
I do not need any code as such ( although any help is appreciated )
but what approach to take would be a great help.

The function appendChild moves the child to the end of concerned element
(from temp (document.createElement) or from the DOM already displayed)

If you want to move to a certain place use insertBefore
(in the same way as given above)
Meanwhile I am also searching google ;)

<https://developer.mozilla.org/En/DOM/Node.appendChild>
and see also :
insertBefore, replaceChild, removeChild and cloneNode

<html>
<head>
<title>Some Experiments with JS</title>
<script type="text/javascript">
function Swap()
{
var AA = document.getElementById("A") ;
var BB = document.getElementById("B") ;
//var dup = AA.cloneNode(true);
var replaced = document.body.replaceChild(BB,AA);
//var replace2 = document.body.replaceChild(dup,BB);



}
</script>

</head>
<body>


<div ID="A" style="width:50%; background:lime; ">AAA</div>
<p> Some Paragraph here..! </p>
<div ID="B" style="width:50%; background:aqua; ">BBB</div>
<div>
<input type=button onClick="Swap()">
</div>
</body>
</html>


When I try the above code. It successfully replaces div "A" by div
"B" (as you can see through the replaceChild method) but the position
of div "A" is lost. So I am not able to put "A" in "B"'s place. Is
there some way to retain the positions ?

Thanx.
 
L

Luuk

Thomas 'PointedEars' Lahn schreef:
It isn't.

why post this?,
I did because the OP wanted a starting point,
and i think it is..

If you know a better starting point, than please SHARE
 
S

SAM

Le 10/17/09 1:25 PM, vaib a écrit :
When I try the above code. It successfully replaces div "A" by div
"B" (as you can see through the replaceChild method) but the position
of div "A" is lost.

I think that it is the div B who is lost (since it is now A).


<html>
<head>
<title>Some Experiments with JS</title>
<script type="text/javascript">
function Swap(idDivA, idDivB)
{
var A, A1, B, B1;
A = document.getElementById(idDivA) ;
A1 = A.cloneNode(true);
B = document.getElementById(idDivB) ;
B1 = B.cloneNode(true);
A.parentNode.replaceChild(B1,A);
B.parentNode.replaceChild(A1,B);
}
</script>
</head>
<body>
<div ID="A" style="width:50%; background:lime;">AAA</div>
<p> Some Paragraph here..! </p>
<div ID="B" style="width:50%; background:aqua;">BBB</div>
<p> Some Paragraph here..! </p>
<div style="border:1px solid; padding:1em">
<div ID="C" style="background:yellow;">CCC</div>
</div>
<div>
<button onClick="Swap('A','B')">xchge A B</button>
<button onClick="Swap('C','B')">xchge C B</button>
<button onClick="Swap('A','C')">xchge A C</button>
</div>
</body>
</html>
 
M

Mike Duffy

Thomas 'PointedEars' Lahn schreef:

FWIW, I concur with Luuk. Granted, it may be a poor resource for those
asdvanced anough to already understand the difference between methods,
functions, properties, etc.

But is it a good "Javascript for Dummies" site. (It worked for me.)
 
D

Dr J R Stockton

In comp.lang.javascript message <[email protected]
8924D9443D28E23ED5CD>, Sat, 17 Oct 2009 15:13:02, John G Harris
He doesn't understand them, see
<http://www.merlyn.demon.co.uk/js-other.htm>,
"Semicolons and Newlines".

You have never given a justification for that statement with enough
detail to make it understandable and therefore potentially refutable.
Mere blather is inadequate.

Why do you not instead write something of possible benefit to the OP -
such as this : ?
function Swap() { var AA, BB, T, F
AA = document.getElementById("A").style
BB = document.getElementById("B").style
if (AA.styleFloat) F = "styleFloat"
if (BB. cssFloat) F = "cssFloat"
T = AA[F] ; AA[F] = BB[F] ; BB[F] = T }
 
J

John G Harris

In comp.lang.javascript message <[email protected]
8924D9443D28E23ED5CD>, Sat, 17 Oct 2009 15:13:02, John G Harris


You have never given a justification for that statement with enough
detail to make it understandable and therefore potentially refutable.
Mere blather is inadequate.
<snip>

As you've not been able to find the problem on your own I suppose I'd
better give you a hint. Consider this piece of code :

var a = 2;
var b, c;
if (a == 2) switch (a) { case 2: b = 5; break; } ; else b = 6;
alert(b);

Convince yourself that it contains a syntax error. Decide exactly what
the problem is. Now review the following sentence in your web page :

"Then every statement will be terminated by a semicolon."

John
 
V

VK

John said:
As you've not been able to find the problem on your own I suppose I'd
better give you a hint. Consider this piece of code :

    var a = 2;
    var b, c;
    if (a == 2) switch (a) { case 2: b = 5; break; } ; else b = 6;
    alert(b);

Convince yourself that it contains a syntax error. Decide exactly what
the problem is. Now review the following sentence in your web page :

"Then every statement will be terminated by a semicolon."

Well, this sample doesn't prove the harm of semicolons omission
because if-else *statement" will be indeed terminated by a semicolon
in the tokenizer while semicolon insertion between if-else statement
*expressions* is an error the tokenizer would not do.

This group had its "aggressive purism" period including the immediate
decapitation for any semicolon missing :) At that period some samples
were found where missing explicit semicolon would lead to a unexpected
result. The cases were not numerous at all and rather... special...
yet there are of them if one search the archives.
 
V

vaib

Le 10/17/09 1:25 PM, vaib a écrit :




I think that it is the div B who is lost (since it is now A).

<html>
<head>
<title>Some Experiments with JS</title>
<script type="text/javascript">
function Swap(idDivA, idDivB)
{
        var A, A1, B, B1;
        A = document.getElementById(idDivA) ;
        A1 = A.cloneNode(true);
        B = document.getElementById(idDivB) ;
        B1 = B.cloneNode(true);
        A.parentNode.replaceChild(B1,A);
        B.parentNode.replaceChild(A1,B);}

</script>
</head>
<body>
        <div ID="A" style="width:50%; background:lime;">AAA</div>
        <p> Some Paragraph here..! </p>
        <div ID="B" style="width:50%; background:aqua;">BBB</div>
        <p> Some Paragraph here..! </p>
        <div style="border:1px solid; padding:1em">
                <div ID="C" style="background:yellow;">CCC</div>
        </div>
        <div>
                <button onClick="Swap('A','B')">xchge AB</button>
                <button onClick="Swap('C','B')">xchge CB</button>
                <button onClick="Swap('A','C')">xchge AC</button>
        </div>
</body>
</html>

ya thats when you use the second replaceChild.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top