...

View Full Version : Different bg's per result



TheTVStop
12-23-2008, 12:18 AM
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?movie_id=4_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.



<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?movie_id=4_Prison%20Break

Thanks.

ohgod
12-23-2008, 04:03 PM
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.



<script>
function bgchange(color){
document.bgColor = color;
}
</script>


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

TheTVStop
12-23-2008, 04:56 PM
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.

TheTVStop
12-24-2008, 04:29 AM
anybody?

ohgod
12-24-2008, 03:19 PM
oh.... you aren't doing this dynamically?


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

TheTVStop
12-24-2008, 03:42 PM
Yes, it is dynamic. The code that displays the categories is:


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum