Jump to content

news box problems (with javascript)


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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...