Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Image/News Displayer - Help Appreciated

    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:

    ^ 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:


    The HTML:
    Code:
    		<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:
    Code:
    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:
    Code:
    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!
    Attached Thumbnails Attached Thumbnails Image/News Displayer - Help Appreciated-nd.png   Image/News Displayer - Help Appreciated-ndhover.png  
    Last edited by Chrustopher; 09-03-2011 at 06:45 AM.

  • #2
    New Coder
    Join Date
    Aug 2011
    Posts
    51
    Thanks
    6
    Thanked 12 Times in 12 Posts
    What I would do is run a query like

    PHP Code:
    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.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    51
    Thanks
    6
    Thanked 12 Times in 12 Posts
    Also, shouldn't the description be in the database as well?
    I think that would help... end then you can output

    something like this:

    PHP Code:
    $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 ++;


  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Originall I had

    PHP Code:
    $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 =
    Code:
    `desc` varchar(200) NOT NULL,

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    51
    Thanks
    6
    Thanked 12 Times in 12 Posts
    if you end echo and put the variable in the javascript and start echo again, I think that should work...

    PHP Code:
    $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 ++; 


  • #6
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Let me give it a shot.

    It gives me this error:
    Code:
    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.
    Last edited by Chrustopher; 09-03-2011 at 08:18 AM.

  • #7
    New Coder
    Join Date
    Aug 2011
    Posts
    51
    Thanks
    6
    Thanked 12 Times in 12 Posts
    Quote Originally Posted by Chrustopher View Post
    Let me give it a shot.

    It gives me this error:
    Code:
    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.

  • #8
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here's the full coding of index.php
    Code:
    <?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:
    Code:
    <? 
    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'];
    
    
    ?>

  • #9
    New Coder
    Join Date
    Aug 2011
    Posts
    51
    Thanks
    6
    Thanked 12 Times in 12 Posts
    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:
    PHP Code:
    <div class="headline" onMouseover="document.imagename.src='.$news[image].', writeDesc(.'$news[desc].')" onMouseout="document.imagename.src='.$news[image].'"
    Last edited by ASTP001; 09-03-2011 at 08:34 AM.

  • #10
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Correct.

    Let me try fixing it up now

  • #11
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    No luck, still no image changing on mouseover

  • #12
    New Coder
    Join Date
    Aug 2011
    Posts
    51
    Thanks
    6
    Thanked 12 Times in 12 Posts
    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

    PHP Code:
    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"


  • #13
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Nope, nothing.

  • #14
    New Coder
    Join Date
    Aug 2011
    Posts
    51
    Thanks
    6
    Thanked 12 Times in 12 Posts
    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.

  • Users who have thanked ASTP001 for this post:

    Chrustopher (09-09-2011)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •