FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


[JS] onclick to print out info

   Frihost Forum Index -> Scripting -> Others
 




snowboardalliance
Can someone show me a function that can find out what id was clicked and make something like div.something#20 visible. Like, if I have a grid of div's with different ids, can I have a surrounding div use onclick to find the id of a div within it? Also, when the information is shown, it should make the last div it made invisible first, so only one shows at a time.
I don't know if this is all clear, but basically, I want javascript that will print out something different for each square in a grid, only showing one at a time.

I really appreciate any help I can get because I don't reall know javascript.

Edit: now that I think about it, would it be better to just use a php page in an iframe, and use links like info.php?id=20? This would mean I only get all the database info when it is needed. But I'll wait for a response.
Nyizsa
Are you planning something like a memory game? I mean do you expect that users will click different divs in 2-3 seconds? PHP is not for this case. It would refresh the page (or the iframe) after every click, generating a lot of unnecessary traffic, and of course it would be time-consuming.
Does anything outside of the iframe depend on the active div? (Do you use them as links?) If no, I suggest using applet or flash.
Maybe if you posted what you wanted to do with this, I could have been more helpful.
Aredon
You'd best use PHP for this to support the 10% of your users with JavaScript disabled.
snowboardalliance
OK, well its part of a php game. It's a grid and each square needs to show different information. I figured the best way now that I've thought about it is to use an iframe with a php page showing the information like info.php?id=2. Can I use javascript to get the id of the clicked div then change the iframe source to use that id?
Aredon
Use an image map:
MAP tag
AREA tag

Otherwise, if you resort to JavaScript, you can attach an event handler to all your elements:
Code:

onclick="dosomething(this)"


Then the function dosomething would look something as follows:
Code:

function dosomething(t){
alert(t.getAttribute("id"))
}

Of coarse alerting the ID of the element is not going to be your final usage of the data, you'd most likely do something like fill a hidden input field like so:

Code:

function dosomething(t){
var id=t.getAttribute("id");
var e=document.getElementById("hiddenfieldid");if(!e)return false;
e.value=id;
}

Your hidden input field would read:
Code:

<input type="hidden" id="hiddenfieldid" name="clickedregion" value="">


As far as dynamically attaching the onclick event handler to your elements, you could so something like this:
Code:

<body>
...
<!-- right before the closing BODY tag -->
<script type="text/javascript">
var allels=document.getElementsByTagName(td");//get an array containing ALL the TD element into an array
//loop though the elements
for(var i=0;i<allels.length;i++){
allels[i].onclick=function(){dosomething(this)};
}
</script>
</body>


That would be to attach it to all TD elements. You'd probably want to referece their container like a DIV and then use something more like:
Code:

var container=document.getElementById("divcontainerid");
if(!container)return false;
var allels=container.getElementsByTagName(td");//get an array containing ALL the TD element into an array within the DIV container
snowboardalliance
Ok that's almost what I want, but can you show me how to instead of setting the id to a form field, change the src of an iframe to info.php?id=x where x is the id. Also, when dynamically adding the event, how about all divs that are two levels under a div with and id or class like "container". So like

Code:

<div class="container">
   <div class="somerow">
      <div class="box" id="1"></div>
      <div class="box" id="2"></div>
      <div class="box" id="3"></div>
   </div>
   <div class="somerow">
      <div class="box" id="4"></div>
      <div class="box" id="5"></div>
      <div class="box" id="6"></div>
   </div>
...etc...
</div>


I really need to know though if you can change the iframe source.
Aredon
Something like this?
Code:

<script type="text/javascript">
var locationArray=new Array(
"http://www.yahoo.com",
"http://www.google.com",
"http://www.msn.com",
"http://www.aol.com",
"http://www.askjeeves.com",
"http://www.goto.com"
);
function applyClick(t){
gotoframe(Number(t.getAttribute('id').substr(1)));
}
function gotoframe(n){
frames.browser_frame.location.href=locationArray[n-1]
}
</script>
<!-- tripple center divs -->
<div style="text-align:center;"><div style="margin:0 auto; width:745px;"><div style="text-align:left;">
<!-- tripple center divs -->

<iframe width="745" height="300" name="browser_frame" src="http://www.yahoo.com"></iframe>
<hr>


<div class="container">
   <div class="somerow">
      <div class="box" id="b1" onclick="applyClick(this)">yahoo</div>
      <div class="box" id="b2" onclick="applyClick(this)">google</div>
      <div class="box" id="b3" onclick="applyClick(this)">msn</div>
   </div>
   <div class="somerow">
      <div class="box" id="b4" onclick="applyClick(this)">aol</div>
      <div class="box" id="b5" onclick="applyClick(this)">askjeeves</div>
      <div class="box" id="b6" onclick="applyClick(this)">goto</div>
   </div>
...etc...
</div>


<!-- tripple center divs -->
</div></div></div>
<!-- tripple center divs -->
snowboardalliance
Ok REALLY close
I would modify it myself but I barely know javascript. Can you just change it so instead of the array to change the frame (this part)

Code:
function applyClick(t){
gotoframe(Number(t.getAttribute('id').substr(1)));
}
function gotoframe(n){
frames.browser_frame.location.href=locationArray[n-1]
}


It sets the frame to "info.php?n" but n will be the id passed in from the click function.
I would really appreciate it if you could just show me this code.
Aredon
Like this?
Code:

<script type="text/javascript">
function applyClick(t){
gotoframe(Number(t.getAttribute('id').substr(1)));
}
function gotoframe(n){
frames.browser_frame.location.href="info.php?id="+n;
}
</script>
<!-- tripple center divs -->
<div style="text-align:center;"><div style="margin:0 auto; width:745px;"><div style="text-align:left;">
<!-- tripple center divs -->

<iframe width="745" height="300" name="browser_frame" src="http://www.yahoo.com"></iframe>
<hr>


<div class="container">
   <div class="somerow">
      <div class="box" id="b1" onclick="applyClick(this)">info.php?id=1</div>
      <div class="box" id="b2" onclick="applyClick(this)">info.php?id=2</div>
      <div class="box" id="b3" onclick="applyClick(this)">info.php?id=3</div>
   </div>
   <div class="somerow">
      <div class="box" id="b4" onclick="applyClick(this)">info.php?id=4</div>
      <div class="box" id="b5" onclick="applyClick(this)">info.php?id=5</div>
      <div class="box" id="b6" onclick="applyClick(this)">info.php?id=6</div>
   </div>
...etc...
</div>


<!-- tripple center divs -->
</div></div></div>
<!-- tripple center divs -->
snowboardalliance
Thanks a lot! I don't have time to test it now but I'll let you know if I need any more help.
Aredon
Alright.
Note: I posted this reply so you don't double post in case you DO need anything.
Related topics
[ java scripts ] email service
AJAX tutorial
Programming links, info, and tutorials
Can somebody do me a help?
Add Contextual Search to Your Blog		copy-controlling your website
A search to make JS file even smaller-2306byte to 542
JS Disable Button.
AJAX tutorial [2nd part now updated]
Something crazy about IE javascript wew...		What a Heck with javascript..
How to create an advanced editor for PHPNUKE V. 7.9 - 8.0...
HELP with Javascript!
Hide list tags with JS onClick
Reply to topic    Frihost Forum Index -> Scripting -> Others

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.