Web Analytics Made Easy -
StatCounter Image/News Displayer - Help Appreciated - CodingForum

Announcement

Collapse
No announcement yet.

Image/News Displayer - Help Appreciated

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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 Files
    Last edited by Chrustopher; Sep 3, 2011, 01:45 AM.

  • #2
    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.

    Comment


    • #3
      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 ++;

      Comment


      • #4
        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,

        Comment


        • #5
          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 ++; 

          Comment


          • #6
            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; Sep 3, 2011, 03:18 AM.

            Comment


            • #7
              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.

              Comment


              • #8
                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:[email protected]" 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'];
                
                
                ?>

                Comment


                • #9
                  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; Sep 3, 2011, 03:34 AM.

                  Comment


                  • #10
                    Correct.

                    Let me try fixing it up now

                    Comment


                    • #11
                      No luck, still no image changing on mouseover

                      Comment


                      • #12
                        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"

                        Comment


                        • #13
                          Nope, nothing.

                          Comment


                          • #14
                            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.

                            Comment

                            Working...
                            X