pls help, how do i write code for this?

topsy · March 19, 2013, 09:24:46 AM

I have been trying to write code for the programme below but i dont know how to go about it.
Kindly help me out.

animal. cat dog pig lion horse more
fruit. apple banana mango cashew more

when clink on more, i want the cat, dog, pig, lion, horse to be replace with the next 5 animal
names and on clinking on more again, the next 5 names should be displace. how do i solve this?
thanks in advance.

MrPhil · March 19, 2013, 09:36:39 AM

So you've got displayed:

Quoteanimal. cat dog pig lion horse more

and you click on more and now you see

Quoteanimal. goat tiger whale possum platypus more

etc., until you reach the end of the list (and perhaps cycle around to the beginning)?

Here's one of many possible approaches:

Code Select

animal. <span id="animal">cat log pig lion horse</span> <span onclick="update_list('animal');"><u>more</u></span>
and define a Javascript function update_list(name) that uses

Code Select

getElementById(name).innerHTML = 'goat tiger whale possum platypus';
etc. to load up a new selection of animal names. The big challenge is coming up with the right list for the right 'name', keeping track of where you are right now, getting the next batch of names (fixed arrays? database entries sent from the server?), etc. But, I think the above code could give you an idea of where to get started doing it in HTML and Javascript.

topsy · March 19, 2013, 09:48:09 AM

Thanks for the Insights. I am well versed in HTML code but not so versed in Java. pls which Java topic can I read that will teach me the more

topsy · March 19, 2013, 09:56:05 AM

One more thing, MrPhil, I want the cat, dog etc to have link. can i just use standard HTML code to solve that?

MrPhil · March 19, 2013, 10:28:58 AM

It's not Java. It's Javascript. Big difference. It sounds like you're going to be starting from Square one with this (learning the Javascript language). There are many online sources of education about Javascript. It's possible to do, but take it a little at a time and maybe use a copy of your forum in a sandbox so you don't interrupt your forum's function.

You can use <a href="some link for cat">cat</a>.

topsy · April 01, 2013, 11:57:14 AM

Mr Phil, pls i didnt get it! i tried and pretest the code on my laptop but it didnt display anything. pls help me.

MrPhil · April 01, 2013, 02:49:11 PM

Didn't display anything? It sounds like you have some PHP coding problems. Was the desired HTML output produced, but isn't doing what you expect, or is no HTML produced, or is the wrong HTML produced? Are you running XAMPP or WAMPP on your laptop?

topsy · April 01, 2013, 06:29:21 PM

nothing was display. i dont running XAMPP or WAMPP on my laptop

MrPhil · April 01, 2013, 08:33:51 PM

Well, what did you write it in, and how did you test it?

topsy · April 02, 2013, 04:56:53 AM

I put the code you wrote for me between: <html><script><\script><\html>, using notpad and then test it wit internet explorer browser.

MrPhil · April 02, 2013, 08:36:47 AM

What I gave you was just the barest outline of what you needed to do. You still need to fill in the pieces of selecting the right words to output for generating a set of links.

Show us what you have so far.

topsy · April 16, 2013, 01:23:33 PM

Mr Phil, see this code!
<html>
<table border="1" width="400">
<tr>
<td> Animals. Dog Cat Elehpant Horse Cow Lion More>></td>
</tr>
<tr>
<td> City. Newyork London Paris Accar Toyko Ohio More>></td>
</tr>
<tr>
<td> County. USA Japan Frence Isreal Iran Canada More>></td>
</tr>

</table>
</html>

My challenge now is when "more>>" is click, I want another set of things to replace what is on display. I have p to 20 set of thing to be display.
how do I tackle it?

MrPhil · April 16, 2013, 02:49:05 PM

Code Select


<html>
<head>
<script type="text/javascript">
var animal_list = new Array;
  animal_list[0] = 'Dog Cat Elephant Horse Cow Lion'; 
  animal_list[1] = 'goat tiger whale possum platypus';
  animal_list[2] = 'aardvark dolphin boa armadillo baboon';
  var animal_index = 0;
var city_list = new Array;
  city_list[0] = 'New York London Paris Accar Tokyo Oslo'; 
  city_list[1] = 'Moscow New Delhi Rome Sydney Stockholm';
  city_list[2] = 'St Petersburg Madrid Athens Timbuktu Pretoria';
  var city_index = 0;
var country_list = new Array;
  country_list[0] = 'USA Japan France Israel Iran Canada'; 
  country_list[1] = 'Mexico Togo China India Argentina Brazil';
  country_list[2] = 'Panama Namibia Taiwan Morocco New Zealand Peru';
  var country_index = 0;
function update_list(category) {
   if (category == 'animals') {
     animal_index++; if (animal_index >= animal_list.length) animal_index = 0;
     document.getElementById('animals').innerHTML = animal_list[animal_index];
   }
   if (category == 'city') {
     city_index++; if (city_index >= city_list.length) city_index = 0;
     document.getElementById('city').innerHTML = city_list[city_index];
   }
   if (category == 'country') {
     country_index++; if (country_index >= country_list.length) country_index = 0;
     document.getElementById('country').innerHTML = country_list[country_index];
   }  
}
</script>
</head>
<body>
<table border="1" width="400"
<tr>
<td> Animals. <span id="animals">Dog Cat Elephant Horse Cow Lion</span> <span onclick="update_list('animals');"><u>More>></u></span></td>
</tr>
<tr>
<td> City. <span id="city">New York London Paris Accar Tokyo Oslo</span> <span onclick="update_list('city');"><u>More>></u></span></td>
</tr>
<tr>
<td> Country. <span id="country">USA Japan France Israel Iran Canada</span> <span onclick="update_list('country');"><u>More>></u></span></td>
</tr>

</table>
</body>
</html>

That should be fairly close. You replace the rotation through each list with a random choice. I'm sure there's a cleaner and more elegant way to do this, but I don't have time right now to think about it. Please make an effort to learn Javascript, if this is the kind of thing you want to be doing. Otherwise I can do it for you, but at what you might find to be a fairly stiff hourly fee.

P.S. Don't ever write code using Word as your editor. Your ' and " are wrong.

Update: fixed code and tested. it works.

topsy · April 25, 2013, 11:40:24 AM

Mr Phil, thank you so much! I studied and practised writing the code since you posted it. I am happy I can write it myself now aid. However I dont know how to test my javascript code so see how it works.

MrPhil · April 25, 2013, 01:02:47 PM

It doesn't have to be on a live server (site). Any browser can be told to load an HTML file. Some have a "Load File" menu selection, and others you just have to give the full path to the file: file:///C:/users/blah/...filename.html. You can test your Javascript in an .html file, and then copy it to a .php file or whatever to run on a live server.

topsy · May 04, 2013, 10:18:54 AM

Mr Phil,
I am grateful. I finally got it right. I noticed that when clicking "More", that small hand which indicates that an object or word can be clicked is absented. I am afraid that adding "link code" to "More" as to bring out that small hand over "More" can distort the javascript.

MrPhil · May 10, 2013, 03:59:18 PM

Change

Code Select

><u>More>></u>
to

Code Select

class="myLink">More>>

Up in the <head> section (just before </head>), add

Code Select

<style type="text/css">
.myLink { text-decoration: underline; color: blue; cursor: pointer; }
</style>

Matthew K. · May 10, 2013, 05:30:08 PM

Why not use an actual link and event.preventDefault();?

MrPhil · May 10, 2013, 05:35:14 PM

There are many ways you could do it. I was just trying to come up with something very simple.

singhabhishek251 · May 11, 2013, 01:34:42 AM

I was trying to this a few months back, but I was unable to solve the issue. Finally, I gave it to my senior he solved this, Let me know if the problem is not solved and I will try to help you.

News:

pls help, how do i write code for this?

MrPhil

MrPhil

MrPhil

MrPhil

MrPhil

MrPhil

MrPhil

MrPhil

MrPhil