Jump to content

news box problems (with javascript)


rootKID

Recommended Posts

Hello w3s... when im running this code:

<?php$news_query = "SELECT * FROM news";$news_expanded = "SELECT * FROM news WHERE added + ( 3600 *24 *45 ) >".time()." ORDER BY added DESC LIMIT 10"; $news_result = mysql_query($news_query)or die(mysql_error());if(mysql_num_rows($news_result) > 0){$id = 1;while($n_row = mysql_fetch_assoc($news_result)){$id++; echo '<div id="pic'.$id.'"><a href="javascript: klappe_news('.$id.');">'."<img src='styles/images/backgrounds/icons/minus.gif' />".'</a></div><a href="javascript: klappe_news('.$id.');">'.$n_row['n_date'].'</a><div id="k'.$id.'" style="display:none;margin-left:30px;margin-top:15px;">'.nl2br ($n_row['n_text']).'</div>'; /*echo '<a href="javascript: klappe_news('.$id.');">'.$n_row['n_date'].'</a><div id="k'.$id.'" style="display:none;margin-left:30px;margin-top:15px;">'.nl2br ($n_row['n_text']).'</div>';*/}}//If ends...else {echo "<center>There is no latest news</center>";}?>

then my picture at my page here: (PICTURE ATTACHED) it wont change pictures when im trying to do so here with this java code:

function klappe_news(id){var klappText = document.getElementById('k' + id);var klappBild = document.getElementById('pic' + id);if (klappText.style.display == 'none') {	klappText.style.display = 'block';	klappBild.src = 'styles/images/backgrounds/icons/minus.gif';}else {	klappText.style.display = 'none';	klappBild.src = 'styles/images/backgrounds/icons/plus.gif';}}

ideas?...

Edited by rootKID
Link to comment
Share on other sites

klapBuild is pointing to the div node not the img node. you have to get the "src" of img node inside that div node. it should dump some error in console.looking at it or posting it would be helpfull to debug.

Edited by birbal
Link to comment
Share on other sites

ok, sorry for late reply, will do so later and put some feedback up! :)... EDIT: could you give me a example?... im home right now and dosent leave again untill tonight :)... so i can work on the project a little... Hoping you can show me a example so i understand you a little better what you mean exacly :)...thanks in advance...

Edited by rootKID
Link to comment
Share on other sites

hello birbal... i can't think how to add the words into the code... can you give me a tip on where to add... lol X)...

Link to comment
Share on other sites

function klappe_news(id){var klappText = document.getElementById('k' + id);var klappBild = document.getElementById('pic' + id);if (klappText.style.display == 'none') { klappText.style.display = 'block'; klappBild.src = 'styles/images/backgrounds/icons/minus.gif';}else { klappText.style.display = 'none'; klappBild.src = 'styles/images/backgrounds/icons/plus.gif';}}<?php$news_query = "SELECT * FROM news";$news_expanded = "SELECT * FROM news WHERE added + ( 3600 *24 *45 ) >".time()." ORDER BY added DESC LIMIT 10"; $news_result = mysql_query($news_query)or die(mysql_error());if(mysql_num_rows($news_result) > 0){$id = 1;while($n_row = mysql_fetch_assoc($news_result)){$id++; echo '<div id="pic'.$id.'"><a href="javascript: klappe_news('.$id.');">'."<img src='styles/images/backgrounds/icons/minus.gif' />".'</a></div><a href="javascript: klappe_news('.$id.');">'.$n_row['n_date'].'</a><div id="k'.$id.'" style="display:none;margin-left:30px;margin-top:15px;">'.nl2br ($n_row['n_text']).'</div>'; /*echo '<a href="javascript: klappe_news('.$id.');">'.$n_row['n_date'].'</a><div id="k'.$id.'" style="display:none;margin-left:30px;margin-top:15px;">'.nl2br ($n_row['n_text']).'</div>';*/}}//If ends...else {echo "<center>There is no latest news</center>";}?>var klappBild = document.getElementById('pic' + id); is targetting the div element, not the img element, later it tries to change the src attribute of div element, well thats going to happen now is it!The id="pic'.$id.'" needs to be added to img element instead.

Link to comment
Share on other sites

var klappText = document.getElementById('k' + id);var klappBild = document.getElementById('pic' + id);console.log(klappText); //debugconsole.log(klappBild); //debug//It will get all the img node which comes under klapBild nodevar images=klappBild.getElementsByTagName("img");//Loop the images to see what it is holdingfor(i in images){//Get src attributeconsole.log(images[i].src);}

if you look into the consoles you will see the node which those variable are pointing. you need to get a tool like firebug open it and load the page.

Link to comment
Share on other sites

Hello, and sorry for late reply... but would this work:

<?php$news_query = "SELECT * FROM news_simple";$news_expanded = "SELECT * FROM news WHERE added + ( 3600 *24 *45 ) >".time()." ORDER BY added DESC LIMIT 10";$news_result = mysql_query($news_query)or die(mysql_error());if(mysql_num_rows($news_result) > 0){/*while($n_row = mysql_fetch_assoc($news_result)){    echo $n_row['n_headline'];    echo "<br />";    echo $n_row['n_text'];}*/$id = 1;while($n_row = mysql_fetch_assoc($news_result)){    $id++;echo '<a href="javascript: klappe_news('.$id.');">'.'<img src="styles/images/backgrounds/icons/minus.gif" id="pic" />'.'</a><a href="javascript: klappe_news('.$id.');">'.$n_row['n_date'].'</a><div id="k'.$id.'" style="display:none;margin-left:30px;margin-top:15px;">'.nl2br ($n_row['n_text']).'</div>';/*echo '<a href="javascript: klappe_news('.$id.');">'.$n_row['n_date'].'</a><div id="k'.$id.'" style="display:none;margin-left:30px;margin-top:15px;">'.nl2br ($n_row['n_text']).'</div>';*/}}//If ends...else {    echo "<center>There is no latest news</center>";}?>

and yeah, you told me to get a ID to the image... i did so, but when i run... still dosent work... so right now im a little lost... im not the best at javascript coding :/... and yes, i do have firebug, but when i use it then i just still see's the same image... but when i have opened the messeage... then i just get a ahref with javascript around the image... so...?

Link to comment
Share on other sites

you have given it id="pic" where it will be looking for id="pic1", id="pic2" id="pic3" and so on...

echo '<a href="javascript: klappe_news('.$id.');">'.'<img src="styles/images/backgrounds/icons/minus.gif" id="pic'.$id.'" />'.'</a><a href="javascript: klappe_news('.$id.');">'.$n_row['n_date'].'</a><div id="k'.$id.'" style="display:none;margin-left:30px;margin-top:15px;">'.nl2br ($n_row['n_text']).'</div>';

Link to comment
Share on other sites

###### YEAH! ITS WORKING! :D... thanks bro ;).. just what i needed! :)..

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...