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 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    27
    Thanks
    3
    Thanked 1 Time in 1 Post

    Different bg's per result

    Hi, I have no experience with ajax, or javascript, so if this indeed a javascript issue I apologize for putting it in the wrong forum.

    What I have is, I have a script that a friend wrote for me, which is a great script. It uses PHP, Ajax and Javascript, plus mysql database.

    What I want to know how to do is this. On this page: http://watch.thetvstop.com/index.php...Prison%20Break

    You will see a list of episodes. I want to know how to change the bg color of each listed category/episode on that page. Like displayed on this website:

    http://www.tvduck.com/Prison-Break.html where each episode/category title has a different color background. How do I do this?

    Thanks ahead of time.

    Code:
    <script type="text/javascript">
    	curCat=0;
    	function viewLinks(catId)
    	{
    		if(curCat)
    		{
    			clearAjaxTimeout();
    			document.getElementById('preloader_'+curCat).className='displaynone';
    		}
    		
    		curCat=catId;
    		
    		document.getElementById('preloader_'+catId).className='vis';
    		makeRequest('index.php?handle_ajax&view_links&category_id='+catId, 'showLinks');
    	}
    	
    	function showLinks()
    	{                
    		document.getElementById('preloader_'+curCat).className='displaynone';
    		document.getElementById('links_div_'+curCat).innerHTML=dataReturn;
    	}
    	
    	function addLink(catId, catName)
    	{
    		document.getElementById('contentDiv').innerHTML='<p class="alink">Remember to read the <a href="#" class="alink">Episode posting Rules</a> before submitting a link.</p><br /><b>Movie: </b> {movie_title_j}<br /><b>Category: </b> '+catName+'<br /><br />Link title:&nbsp; <input type="text" id="linkTitleId"><br />Hyperlink: <input type="text" id="linkValueId"> <input type="button" onclick="submitLink('+catId+', document.getElementById(\'linkValueId\').value, document.getElementById(\'linkTitleId\').value)" value="Submit Link">';
    		
    		showMessage('mDiv', 400, 180);
    	}
    	
    	function submitLink(catId, link, title)
    	{
    		link=link.replace('http://', '');
    		document.getElementById('preloaderTopId').className='vis';
    		makeRequest('index.php?handle_ajax&add_link&category_id='+catId+'&link='+link+'&title='+title, 'showLinkResult');
    	}
    	
    	function showLinkResult()
    	{
    		document.getElementById('preloaderTopId').className='displaynone';
    		document.getElementById('contentDiv').innerHTML=dataReturn;
    	}
    </script>
    <style>
    .mainwrap{
    	width:1024px;
    	overflow:hidden;
    }	
    </style>
    
    
    <div id="watchwrap">
    	<div id="watchheader">
    	<div class="stop"><h2 id="watchlogo"><a href="http://watch.thetvstop.com"></h2></div>
    	<div class="watchadd"><a href="#">Action</a> | <a href="#">Comedy</a> | <a href="#">Drama</a> | <a href="#">Animation</a> | <a href="#">Sit-Com</a> | <br /><br /> <a href="#">New Shows</a> | <a href="#">SCI-FI</a> | <a href="#">Movies</a> | <a href="#">Movie Trailers</a> | <a href="#">Reality</a> | </div>
    	<div class="watchsearch"><form action="http://www.google.com/cse" id="cse-search-box">
      <div>
        <input type="hidden" name="cx" value="013887287941335951721:c_bgebmwhzo" />
        <input type="hidden" name="ie" value="UTF-8" />
        <input type="text" name="q" size="31" />
        <input type="submit" name="sa" value="Search" />
      </div>
    </form>
    <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
    </div>
    	</div>
    </div>
    
    <div class="watchnav">
    	<a href="#" class="">A</a> | <a href="#" class="">B</a> | <a href="#" class="">C</a> | <a href="#" class="">D</a> | <a href="#" class="">E</a> | <a href="#" class="">F</a> | <a href="#" class="">G</a> | <a href="#" class="">H</a> |<a href="#" class="">I</a> | <a href="#" class="">J</a> | <a href="#" class="">K</a> | <a href="#" class="">L</a> | <a href="#" class="">M</a> | <a href="#" class="">N</a> | <a href="#" class="">O</a> | <a href="#" class="">P</a> | <a href="#" class="">Q</a> | <a href="#" class="">R</a> | <a href="#" class="">S</a> | <a href="#" class="">T</a> | <a href="#" class="">U</a> | <a href="#" class="">V</a> | <a href="#" class="">W</a> | <a href="#" class="">X</a> | <a href="#" class="">Y</a> | <a href="#" class="">Z</a>
    	</div><br />
    <div class="mainwrap">	
    <div id="maincontent">
    <div class="pad">
    	<p class="Maintitles">{movie_title} TV Show</p>
    	<div class="showsblock">
    			<div style="clear:both;"></div> 
    			<div class="ShowThumb">
    				<img src="{movie_image}" title="" alt=""  />
    				<div class="Mainshowdes">
    					<div style="width: 475px">
    					<p class="titletext">{movie_title}</p>
    					</div>
    					<div style="width: 475px;">
    					<p>{movie_description}</p>
    					</div>
    				</div>
    			</div>
    			</div>
    			</div><br />
    			
    			
    			<div class="pad">
    			<p class="Maintitles">{movie_title} Full Episodes</p>
    			</div>
    			
    			{loop:1}
    		<div id="category_{category_id}">
    			<div class="category_div"><b>{category_name}</b></div> <a 
    
    href="javascript:http://" class="alink" onclick="viewLinks({category_id})">View links</a> | <a 
    
    href="javascript:http://" class="alink" 
    
    onclick="document.getElementById('links_div_{category_id}').innerHTML=''">Hide links</a> | <a 
    
    href="javascript:http://" class="alink" onclick="addLink({category_id}, '{category_name_j}')">Add 
    
    link</a> <img src="i/preloader_white.gif" class="displaynone" id="preloader_{category_id}" />
    			<div class="links_div" id="links_div_{category_id}"></div>
    		</div>
    		<div style="clear:both;"></div>
    	{/loop:1}
    </div>
    			
    	<div class="rightsideboxparent">
    	
    	<div class="rightsidebox"><a href="http://www.thetvstop.com/tv-schedule/" title="TV Schedule" class="smalltext">TV Schedule</a></div><br /><br />
    	
    	<div class="rightsidebox">
    	<div align="center">
    	<div class="titletext"><p>Top Ten TV Shows:</p>
    	  <p>&nbsp;</p>
    	  <table width="280 border="0" cellspacing="2" cellpadding="1" >
    	  
            <tr>
              <td>1. <a href="http://www.thetvstop.com/tv-schedule/" title="TV Schedule" class="smalltext">Gossip Girl</a></td>
            </tr>
            <tr>
              <td>2. <a href="http://www.thetvstop.com/tv-schedule/" title="TV Schedule" class="smalltext">Two & a Half Men</a></td>
            </tr>
            <tr>
              <td>3. <a href="http://www.thetvstop.com/tv-schedule/" title="TV Schedule" class="smalltext">One Tree Hill</a></td>
            </tr>
            <tr>
              <td>4. <a href="http://www.thetvstop.com/tv-schedule/" title="TV Schedule" class="smalltext">Family Guy</a></td>
            </tr>
            <tr>
              <td>5. <a href="http://www.thetvstop.com/tv-schedule/" title="TV Schedule" class="smalltext">Prison Break</a></td>
            </tr>
            <tr>
              <td>6. <a href="http://www.thetvstop.com/tv-schedule/" title="TV Schedule" class="smalltext">Heroes</a></td>
            </tr>
            <tr>
              <td>7. <a href="http://www.thetvstop.com/tv-schedule/" title="TV Schedule" class="smalltext">Entourage</a></td>
            </tr>
            <tr>
              <td>8. <a href="http://www.thetvstop.com/tv-schedule/" title="TV Schedule" class="smalltext">How I Met Your Mother</a></td>
            </tr>
            <tr>
              <td>9. <a href="http://www.thetvstop.com/tv-schedule/" title="TV Schedule" class="smalltext">Desperate Housewives</a></td>
            </tr>
            <tr>
              <td>10. <a href="http://www.thetvstop.com/tv-schedule/" title="TV Schedule" class="smalltext">Ghost Whisperer</a></td>
            </tr>
    		
          </table>
    	  
    	</div>
    	<br />
    	</div></div></div><br />
    
    </div>
    
    
    
    
    
    <div id="footer" align="center">
    
    <table border="0" background-color="fff">
    <tr>
    <td>add here</td>
    </tr>
    <tr>
    <p><td><b>Popular TVShows:</b> <a href="watch.thetvstop.com" class="footerlink">Prison Break</a> | <a href="http://watch.thetvstop.com/index.php?movie_id=9" class="footerlink">One Tree Hill</a> | <a href="http://watch.thetvstop.com/index.php?movie_id=8" class="footerlink">Gossip Girl</a> | <a href="http://watch.thetvstop.com/index.php?movie_id=7" class="footerlink">Ghost Whisperer</a></td></p>
    </tr>
    <tr>
    <p><td><a href="http://www.thetvstop.com/terms-of-service/" class="footerlink">Terms of Service</a> | <a href="http://www.thetvstop.com/privacy-policy/" class="footerlink">Privacy</a> | <a href="http://www.thetvstop.com/digital-millenium-copyright-act/" class="footerlink">DMCA</a> | <a href="http://www.thetvstop.com/forums/" class="footerlink">Forums</a> | <a href="http://www.thetvstop.com/jobs/" class="footerlink">Jobs</a></td></p>
    </tr>
    </table>
    
    
    </div>
    </div>
    The above code is the code to the template file (.tpl) which displays the output of the page: http://watch.thetvstop.com/index.php...Prison%20Break

    Thanks.

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    don't need ajax for this, javascript will handle it. for each episode you could have an onmouseover event call a function. you could either pass the desired color as an argument to this function, or have it pick one at random.


    Code:
    <script>
    function bgchange(color){
    document.bgColor = color;
    }
    </script>
    Code:
    <a href="#" onMouseOver="bgchange('#FF0000')">Hover to change color</a>
    so instead of having that onmouseover on a link, put it on whatever displays your episode info. then you just need to figure out where you want your colors to come from.

  • #3
    New Coder
    Join Date
    Dec 2008
    Posts
    27
    Thanks
    3
    Thanked 1 Time in 1 Post
    the link(s) are displayed by one single line of coding. How do i make it so the bg of each category alternates between two colors? without a user having to mouseover.

  • #4
    New Coder
    Join Date
    Dec 2008
    Posts
    27
    Thanks
    3
    Thanked 1 Time in 1 Post
    anybody?

  • #5
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    oh.... you aren't doing this dynamically?


    well jesus man... apply css classes based on genre or something.

  • #6
    New Coder
    Join Date
    Dec 2008
    Posts
    27
    Thanks
    3
    Thanked 1 Time in 1 Post
    Yes, it is dynamic. The code that displays the categories is:

    Code:
    <div class="category_div"><b>{category_name}</b></div>
    I need to know how to have the categories which is a list of episodes have alternate bg colors, on loading of the page.


  •  

    Posting Permissions

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