[SOLVED] i want everything in the div to be the input

[gevo12321]

ok so i have a webpage withe different div tags and i want the div tag to be the input button is ths possible?

 

i am asking this because i want to make dynamic tabs(the tabs r in a div) where if u click on a tab, it changes without reloading the page.

 

if u dont know what im talking about, its kind of like the yahoo home page where if u click on the images tab the page doesnt reload but just changes the way it looks and searches in a different database.

 

the webpage im trying to put this on is gevsta.com/test

[haku]

The technique you want is called AJAX, and they aren't making the div an input, they are removing the div and replacing it with  textfield, and entering the contents of the div that was removed into that textfield.

[gevo12321]

if they remove the div and replace it with a textfield, wouldnt it look different?

 

maybe i dont understand what u ment,

 

what would be a sample code of this?

[Ken2k7]

You want a sample code of that whole system? 

[haku]

if they remove the div and replace it with a textfield, wouldnt it look different?

 

Yes. Otherwise how would you know that you could type in the textarea? It looks different when you click on that site you linked to right?

 

what would be a sample code of this?

 

Google 'ajax tutorials', or 'ajax scripts'. It's not a little piece of 5-line code, it's a combination of 2 or 3 scripts (javascript and a server-side language) combined with some (X)HTML and CSS.

[TheFilmGod]

You can make it a submit button or a div. It doesn't matter. Using a simple link <a ..></a > allows you to manipulate the javascript to do virtually anything.

[haku]

It doesn't even have to be an anchor - you can add an onclick handler to any tag.

[TheFilmGod]

It doesn't even have to be an anchor - you can add an onclick handler to any tag.

 

Hehe, I completely forgot about that! ... But, if you were to add an onclick handler to any old tag, then the website wouldn't downgrade nicely to non-JS enabled users. yahoo is a good example of HOW YOU SHOULD do it. 

[gevo12321]

im not sure if this is what u mean but this is what i think u mean:

 

u put the div as a link, and when u click it, it changes the div to another?

 

is that what u mean?

 

and if so would u be able to just show me the code on the html side. because when i click on the div and it changes, i want something else to change too. something i didnt click. ie: if ur in one tab and u click the other, the tab u r in changes the way it looks, and the one u clicked changes the way it looks.

 

im sorry if i sound like a noob but i am a noob and really need help

 

thx

[haku]

Hehe, I completely forgot about that! ... But, if you were to add an onclick handler to any old tag, then the website wouldn't downgrade nicely to non-JS enabled users.j

 

That's why it's always good to set up the site to work first without javascript being enabled. I often create submit buttons for non-javascript enabled systems, then hide them with javascript to prevent these issues. Or if I have an onlick for a div that shows something, then I just show them all at the start for the non-javascript enabled. It doesn't look as good as when javascript is enabled, but that's how things go for those who decide to block javascript (and I'm one of those people!).

[haku]

im not sure if this is what u mean but this is what i think u mean:

 

u put the div as a link, and when u click it, it changes the div to another?

 

is that what u mean?

 

You add a link or a div near the div. Then you add javscript so that when you click that link, the javascript navigates the dom, removes the div, and replaces it with a textarea, and fills that textarea with the text that was originally in the div.

 

would u be able to just show me the code on the html side.

 

Sure:

 

<div id="some_id">some text</div>

 

That's all there is for the HTML. It's javascript that does all the work.

 

when i click on the div and it changes, i want something else to change too. something i didnt click. ie: if ur in one tab and u click the other, the tab u r in changes the way it looks, and the one u clicked changes the way it looks.

 

This is all done with javascript as well.

 

im sorry if i sound like a noob but i am a noob and really need help

 

There's nothing wrong with being a noob! We were all there at one time. But what you are asking is way more than we can teach you in one thread. It requires some intermediate javascripting techniques that you have to learn. There are also some existing ajax scripts you can find for free on the internet if you look for them, or else you can use a javascript library (I recommend jquery) to make it a little simpler. But all of these are more than we can explain in this thread. I gave you the basic overview above, but it will take a lot of scripting to make this work. Google is your friend! Good luck.

[gevo12321]

thx a lot