...

View Full Version : Image/News Displayer - Help Appreciated



Chrustopher
09-03-2011, 05:42 AM
Hey.

Right, so I've just paid a guy to design and code just the layout files, not the content, panels, etc.

I've coded a panel which will allow my staff to post news articles which will be displayed on the main website.

Adding, Editing, Deleting news and all the rest works 100% fine however it appears that the designer has coded the news displayer into a .JS (javascript) file. The news displayer looks like this:
http://www.codingforums.com/attachment.php?attachmentid=10255&stc=1&d=1315024475
^ This is what it looks like when you hover over one of the 3 news items shown on the right. The image (blue box) changes depending on which news item you hover over

This is what it looks like when you then hover over the image for that article:
http://www.codingforums.com/attachment.php?attachmentid=10256&stc=1&d=1315024475

The HTML:


<div class="left">
<div id="headline_image_box">
<a href="#">
<img name="imagename" src="_images/_headlines/1.png" alt="Description" />
<span class="desc" id="description">
<script type="text/javascript">writetext(firsttext)</script>
</span>
</a>
</div>
</div>
<div class="middle">
<a href="#">
<div class="headline" onMouseover="document.imagename.src=image1.src, writeDesc(desc1)" onMouseout="document.imagename.src=image1.src">
<strong>So far so good for Wiggins</strong><br />
Team Sky's Bradley Wiggins says he's going from strength to strength at the Vuelta a Espana.
</div>
</a>
<a href="#">
<div class="headline" onMouseover="document.imagename.src=image2.src, writeDesc(desc2)" onMouseout="document.imagename.src=image2.src">
<strong>Spurs locked in Cahill talks</strong><br />
Bolton Wanderers and Tottenham Hotspur are locked in talks regarding a deal for Gary Cahill.
</div>
</a>
<a href="#">
<div class="headline" onMouseover="document.imagename.src=image3.src, writeDesc(desc3)" onMouseout="document.imagename.src=image3.src">
<strong>Santon set for medical</strong><br />
Italy international Davide Santon has arrived in England to finalise a move to Newcastle United.
</div>
</a>
</div>


The Javascript File:


if (document.images) {
image1 = new Image
image2 = new Image
image3 = new Image

image1.src = "_images/_headlines/1.png"
image2.src = "_images/_headlines/2.png"
image3.src = "_images/_headlines/3.png"
}

var desc1='<strong>13th AUG</strong>Description 1'
var desc2='<strong>12th AUG</strong>Description 2'
var desc3='<strong>11th AUG</strong>Description 3'

function writeDesc(what){
document.getElementById('description').innerHTML=''+what+'';
}


Database Structure:


CREATE TABLE IF NOT EXISTS `news` (
`id` int(2) NOT NULL AUTO_INCREMENT,
`title` varchar(100) NOT NULL,
`author` varchar(100) NOT NULL,
`category` varchar(100) NOT NULL,
`article` varchar(50000) NOT NULL,
`image` varchar(500) NOT NULL,
`j` varchar(5) NOT NULL,
`M` varchar(5) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;


j = Date with letters on end. Eg. 4TH
M = 3 character form of month.
ALL details submit into database fine, that is not my issue.

My issue is that I want to get the latest three articles from the database and echo the values from the database into the javascript however this stuffs up the script completely.

I'm not very experienced with using Javascript & PHP together but I noticed something was wrong when I echoed it into the script.

Anyone with any ideas/suggestions it'd be very helpful and appreciated! I'd prefer not to have to change to a completely new script, so if you have a way to integrate the MySQL information into the Javascript it'd be great!

ASTP001
09-03-2011, 05:58 AM
What I would do is run a query like


SELECT * FROM 'news' ORDER BY 'id' desc

and then running a loop 3 times to post the each content using the array that you would get from that query.

ASTP001
09-03-2011, 06:26 AM
Also, shouldn't the description be in the database as well?
I think that would help... end then you can output

something like this:



$query = "SELECT * FROM 'news' ORDER BY 'id' desc";
$result=$mysqli->query($query);
$index = 0;
while($news= $result->fetch_assoc() && $index < 3){

echo '<a href="#">
<div class="headline" onMouseover="document.imagename.src=$news[image], writeDesc($news[description])" onMouseout="document.imagename.src=image1.src">
<strong>'.$news["title"].'</strong><br />' . $news["description"] . '

</div>
</a>';

$index ++;
}

Chrustopher
09-03-2011, 06:26 AM
Originall I had


$sql = mysql_query("SELECT * FROM `news` ORDER BY `id` DESC LIMIT 3");

Which does basically what you said, however Javascript + PHP = Nothing. The Javascript just stops working completely.

EDIT:

Oh and, I've already added in the description to the database, just forgot to include it in the SQL as that SQL was from before I added it.
Details for desc col =
`desc` varchar(200) NOT NULL,

ASTP001
09-03-2011, 06:45 AM
if you end echo and put the variable in the javascript and start echo again, I think that should work...


$query = "SELECT * FROM 'news' ORDER BY 'id' desc";
$result=$mysqli->query($query);
$index = 0;
while($news= $result->fetch_assoc() && $index < 3){

echo '<a href="#">
<div class="headline" onMouseover="document.imagename.src='.$news[image].', writeDesc(.'$news[description].')" onMouseout="document.imagename.src=image1.src">
<strong>'.$news["title"].'</strong><br />' . $news["description"] . '

</div>
</a>';

$index ++;
}

Chrustopher
09-03-2011, 07:04 AM
Let me give it a shot.

It gives me this error:

Fatal error: Call to a member function query() on a non-object

EDIT:

Got the data showing, but the image wont change when you hover the different articles.

ASTP001
09-03-2011, 07:17 AM
Let me give it a shot.

It gives me this error:

Fatal error: Call to a member function query() on a non-object

that's probably the sql rather than the javascript. can I what your current code is now.

Chrustopher
09-03-2011, 07:21 AM
Here's the full coding of index.php


<?php
session_start(); //allows session
include "../../admin/config.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SNEWSBOX ~ Snazzy Slogan Here</title>
<link href="_css/global.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="_javascript/global.js" language="javascript"></script>
<script type="text/javascript" src="_javascript/tooltip.js" language="javascript"></script>
<script type="text/javascript" src="_javascript/prototype.js"></script>
<script type="text/javascript" src="_javascript/swfobject.js"></script>
<script type="text/javascript" src="_javascript/radio.js"></script>
<script type="text/javascript" src="_javascript/scriptaculous.js?load=slider,effects"></script>
<script type="text/javascript" src="_javascript/headlines.js"></script>
</head>
<body>
<div id="container">
<div id="top">
<div id="announcement">
<marquee><strong>Jake James:</strong> Hello there, this is an example of a marquee DJ says...</marquee>
</div>
<div id="date">
<strong>Date:</strong> <span id="date1"></span>
<strong>Time:</strong> <span id="time"></span>
</div>
</div>
<div id="banner">
<div id="logo"></div>
<div id="twitter_box">
<a href="#">@SNEWSBOX</a><br />
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
<br /><br />
<i>5 days ago from Mac</i>
</div>
</div>
<div id="navigation_bar">
<a href="javascript:ajaxpage('_content/homepage.html', 'content');" id="nav_home"></a>
<a href="javascript:ajaxpage('navigation.php?category=snewsbox', 'sub_nav');" id="nav_snewsbox"></a>
<a href="javascript:ajaxpage('navigation.php?category=community', 'sub_nav');" id="nav_community"></a>
<a href="javascript:ajaxpage('navigation.php?category=radio', 'sub_nav');" id="nav_radio"></a>
<a href="javascript:ajaxpage('navigation.php?category=media', 'sub_nav');" id="nav_media"></a>
<a href="javascript:ajaxpage('navigation.php?category=guides', 'sub_nav');" id="nav_guides"></a>
<a href="javascript:ajaxpage('navigation.php?category=goodies', 'sub_nav');" id="nav_goodies"></a>
<a href="javascript:ajaxpage('navigation.php?category=forum', 'sub_nav');" id="nav_forum"></a>
</div>
<div id="sub_nav">
<script type="text/javascript">ajaxpage('navigation.php?category=snewsbox', 'sub_nav')</script>
</div>
<div id="middle_bar">
<div class="left">
<div id="headline_image_box">
<a href="#">
<img name="imagename" src="_images/_headlines/1.png" alt="Description" />
<span class="desc" id="description">
<script type="text/javascript">writetext(firsttext)</script>
</span>
</a>
</div>
</div>
<div class="middle">
<?php
$query = "SELECT * FROM 'news' ORDER BY 'id' desc";
$result=$mysqli->query($query);
$index = 0;
while($news= $result->fetch_assoc() && $index < 3){

echo '<a href="#">
<div class="headline" onMouseover="document.imagename.src='.$news[image].', writeDesc(.'$news[desc].')" onMouseout="document.imagename.src=image1.src">
<strong>'.$news['title'].'</strong><br />' . $news['desc'] . '

</div>
</a>';

$index ++;
}
?>
</div>
<div class="right">
<div id="quick_links_box">
<a href="#" id="quick_link_1" data-tooltip="sticky1"></a>
<a href="#" id="quick_link_2" data-tooltip="sticky2"></a>
<a href="#" id="quick_link_3" data-tooltip="sticky3"></a>
<a href="#" id="quick_link_4" data-tooltip="sticky4"></a>
<a href="#" id="quick_link_5" data-tooltip="sticky5"></a>
</div>
<div id="mystickytooltip" class="stickytooltip">
<div>
<div id="sticky1" class="atip">
View The Events Timetable
</div>
<div id="sticky2" class="atip">
Use Some Of Our Guides!
</div>
<div id="sticky3" class="atip">
Be Part Of The Community
</div>
<div id="sticky4" class="atip">
Here Have A Gift
</div>
<div id="sticky5" class="atip">
Should Donate To Us
</div>
</div>
</div>
<div id="radio">
<div class="stats">
<strong>Current DJ:</strong><br />
Jake James<br />
<strong>Current Listeners:</strong><br />
2,324<br />
<strong>Current Song:</strong><br />
Aveneged Sevenfold - Afterlife
</div>

<div class="player">

<div id="player_build">Loading Awesomeness...</div>
<div onclick="Player.toggle(); return false;" id="radio_play" class="play"></div>
<div onclick="Player.toggle(); return false;" id="radio_stop" class="stop"></div>
<div class="pause"></div>

<div id="track2">
<div id="vol_track" class="track">
<div id="vol_handle" class="handle"></div>
</div>
</div>

</div>

</div>
<div class="text">
<a href="#">Timetable</a> | <a href="#">Request</a>
</div>
</div>
</div>
<div id="left_container">
<div class="box">
<img src="_images/_headers/_siderbar/check.png" alt="Check This Out" class="header" />
Yo what's up?
</div>
<div class="box">
<img src="_images/_headers/_siderbar/info.png" alt="Important Info" class="header" />
Yo what's up?
</div>
<div class="last_box">
<img src="_images/_headers/_siderbar/else.png" alt="Something Else" class="header" />
Yo what's up?
</div>
</div>
<div id="right_container">
<div id="content">
<script type="text/javascript">ajaxpage('_content/homepage.html', 'content')</script>
</div>
<div id="footer">
<a href="#">Homepage</a> ~ <a href="#">About</a> ~ <a href="#">Contact</a> ~ <a href="#" target="_blank>">Habbo</a> ~ <a href="#">Disclaimer</a><br />
SNEWSBOX &copy; Copyrighted 2011<br />
Layout Designed & Coded by <a href="mailto:jakejames@live.com" target="_blank">Jake James</a>
</div>
</div>
</div>
</body>
</html>



Here's config.php since it's the included file:


<?
session_start();

$conn = mysql_connect("localhost","user","pass");
mysql_select_db(staffpanel) or die(mysql_error());

$logged = MYSQL_QUERY("SELECT * FROM `members` WHERE `id` = '$_SESSION[id]' AND `password` = '$_SESSION[password]'");
$logged = mysql_fetch_array($logged);

$host = $_SERVER['HTTP_HOST'];
$self = $_SERVER['PHP_SELF'];


?>

ASTP001
09-03-2011, 07:27 AM
change the onmouseout to displace the $news['image'] just like on mover over... and also make sure the it's the path, like it is the the js file... I think that should fix it... the title and the descriptions work as expected, correct?

Edit:

<div class="headline" onMouseover="document.imagename.src='.$news[image].', writeDesc(.'$news[desc].')" onMouseout="document.imagename.src='.$news[image].'">

Chrustopher
09-03-2011, 07:35 AM
Correct.

Let me try fixing it up now

Chrustopher
09-03-2011, 07:41 AM
No luck, still no image changing on mouseover

ASTP001
09-03-2011, 07:52 AM
maybe have this part of the code in the index.php itself and then make the path correspond to the image path gained from the database


if (document.images) {
image1 = new Image
image2 = new Image
image3 = new Image

image1.src = "_images/_headlines/1.png"
image2.src = "_images/_headlines/2.png"
image3.src = "_images/_headlines/3.png"
}

Chrustopher
09-03-2011, 08:21 AM
Nope, nothing.

ASTP001
09-03-2011, 08:32 AM
are you sure $news['image'] gives you the path that you need, or is it just the image name and extention? because if so, you need to append the rest of the path into it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum