JavaScript - Jquery Tabbed Page?

I am using the below code to create a blogging site but the pagination in one tab apprears in the other tab.
How do I individually create a pagination for each tab?


<?php
// Begin session, initiate database connection, etc.
require_once('./includes/base.php');

// If logging out, delete session variables
if($_GET['logout'] == 1){
@$_SESSION = array();
@session_unregister($_SESSION['userID']);
@session_unregister($_SESSION['userName']);
@session_unregister($_SESSION['userUser']);
@session_unregister($_SESSION['userPass']);
@session_destroy();
}
// Display header
require("./templates/$template/header.php");

?>

<div id="blurb" align="right">

<script language="javascript">
function isClear()
{
document.myForm[0].value='';
return true;

}
</script>
<!-- new search -->
<?php
ob_start();
if(!empty($_SESSION['userID']) and !empty($_POST['user'])){
echo '<form action="search.php" method="post" name="myForm">
<input type="text" value="search here" id="search" size="20" name="search" onFocus="return isClear();"/>
<input type="submit" name="serachuser" value="search"/></form>';
}
?>
</div>
<br>
<div id="blurb" align="justify">
<em>Hello world</em> <?php echo "$sitename"; ?> is blah blah blah....
</div>
<br>

<div id="container-5">
<ul>
<li><a href="#fragment-13"><span>Blogs</span></a></li>
<li><a href="#fragment-14"><span>Links</span></a></li>
<li><a href="#fragment-15"><span>Images</span></a></li>

</ul>
<div id="fragment-13">
<?php



$sql = mysql_query("SELECT users.userUser, posts.postID, posts.postPost, posts.postTime, posts.postComments, userAvatar FROM users, posts WHERE users.userID = posts.postUserID ORDER BY posts.postTime DESC ");
while($row = mysql_fetch_array($sql)){
$abcd= $row['userName'];
$abcd = str_replace (" ", "-", $abcd);
$time = reltime($row['postTime']);

echo '
<div class="virtualpage">
<table width="100%" >
<td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'" width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8" border=1" cellspacing="1" cellpadding="1" ><b>'.$row['postPost'].'</b><br>Posted by:&nbsp;'.$row['userUser'].',&nbsp;<a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['postID'].'">Comments</a>&nbsp;'.$row['postComments'].' ,&nbsp;Time elapsed:&nbsp; '.$time.'</a></td>
</table><br>

</div>';}
?>

<?
echo '<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>' ;

?>


</div>


<div id="fragment-14">
<?php
$sql = mysql_query("SELECT users.userUser, links.linksID, links.linksLink, links.linksPost, links.linksTime, links.linksComments,userAvatar FROM users, links WHERE users.userID = links.linksUserID ORDER BY links.linksTime DESC");
while($row = mysql_fetch_array($sql)){
$abcd= $row['userName'];
$abcd = str_replace (" ", "-", $abcd);
$time1 = reltime($row['linksTime']);

echo '
<div class="virtualpage">
<table width="100%" >
<td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'" width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8" border=1" cellspacing="1" cellpadding="1" ><b>'.$row['linksPost'].'</b><br>Posted by:&nbsp;'.$row['userUser'].',&nbsp;<a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['linksID'].'">Comments</a>&nbsp;'.$row['linksComments'].' ,&nbsp;Time elapsed:&nbsp; '.$time1.'</a></td>
</table><br>

</div>';}

?>


<?
echo '<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>' ;

?>

</div>
<div id="fragment-15">
<?php
// test
grabimages('SELECT users.userUser, images.imagesID, images.imagesFile, images.imagesPost, images.imagesTime, images.imagesComments FROM users, images WHERE users.userID = images.imagesUserID ORDER BY images.imagesTime DESC LIMIT 20');

?>

</div>
</div>


<?php

// Display footer
require("./templates/$template/footer.php");
?>

<table align="center"><tr><td align="center">
<script type="text/javascript" defer="defer">
var gallery=new virtualpaginate("virtualpage",10)
gallery.buildpagination("gallerypaginate")
</script>
</td></tr></table>

Thank you .......

Hi everyone,

I searched and found some answers to this question, however, after trying the solutions, none worked for me. I am hoping someone can help me figure out where i'm going wrong with this.

I am trying to use the jQuery Nivo Slider and the jQuery Ad Gallery on the same page. When both scripts are active, only one works. When i comment out one of them, the other works. This happens either way i do it. I tried using the jQuery.noConflict(); but it did not work...unless i did something wrong.

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/includes/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="/includes/jquery.ad-gallery.js"></script>
<script type="text/javascript">
    $(function() {
    $('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...');
    $('img.image1').data('ad-title', 'Title through $.data');
    $('img.image4').data('ad-desc', 'This image is wider than the wrapper, so it has been scaled down');
    $('img.image5').data('ad-desc', 'This image is higher than the wrapper, so it has been scaled down');
    var galleries = $('.ad-gallery').adGallery();
    $('#switch-effect').change(
      function() {
        galleries[0].settings.effect = $(this).val();
        return false;
      }
    );
    $('#toggle-slideshow').click(
      function() {
        galleries[0].slideshow.toggle();
        return false;
      }
    );
    $('#toggle-description').click(
      function() {
        if(!galleries[0].settings.description_wrapper) {
          galleries[0].settings.description_wrapper = $('#descriptions');
        } else {
          galleries[0].settings.description_wrapper = false;
        }
        return false;
      }
    );
  });

jQuery.noConflict();
jQuery(window).load(function() {
jQuery('#slider').nivoSlider({
    effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
    animSpeed:5, // Slide transition speed
    pauseTime:7000, // How long each slide will show
    startSlide:0, // Set starting Slide (0 index)
    directionNav:false, // Next & Prev navigation
    directionNavHide:true, // Only show on hover
    controlNav:true, // 1,2,3... navigation
    controlNavThumbs:false, // Use thumbnails for Control Nav
    controlNavThumbsFromRel:false, // Use image rel for thumbs
    controlNavThumbsSearch: '.png', // Replace this with...
    controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
    keyboardNav:true, // Use left & right arrows
    pauseOnHover:true, // Stop animation while hovering
    manualAdvance:false, // Force manual transitions
    captionOpacity:0.8, // Universal caption opacity
    prevText: 'Prev', // Prev directionNav text
    nextText: 'Next', // Next directionNav text
    beforeChange: function(){}, // Triggers before a slide transition
    afterChange: function(){}, // Triggers after a slide transition
    slideshowEnd: function(){}, // Triggers after all slides have been shown
    lastSlide: function(){}, // Triggers when last slide is shown
    afterLoad: function(){} // Triggers when slider has loaded
    });
});
</script>

Does anyone have any ideas?

I appreciate the help in advance!

Tsiqueira

Hello all, I would like someone to help me with this. I'm building my portfolio website. I'm an illustrator and graphic designer (for printing). My website uses html and css. I introduce a jquery plugin to create a slide show with my work. Until then, everything was working well. The problem appears when I introduce php to my code in order not to repeat the navigation bar all the time. With php and the jquery together I get a blank page in my browser.

This link shows the blank page I'm getting using php and jquery together.
http://www.raulmv.com/calendar.php

This is an example of the site without the jquery.
http://www.raulmv.com/graphics.php

Could someone please help me with this thanks.



Code:

<!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" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />

<title>#</title>

<meta name="google-site-verification" content="1ksaaEb5-Ur8h5ivruWp4iRcUB-tDLyM43L6yCl1OuQ" />

<link href="css/style.css" rel="stylesheet" type="text/css" />

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="/js/common.js"></script>


<!--Google Analytics-->

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-12002561-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>




</head>

<body class="#" id="portfolio">

<div id="container">

<!--Top Navigation-->  
<div id="navcontainer"> <?php {include("navbartop.html");} ?> </div>

  
 
<!--Left Navigation-->  
<div id="navBar"> <?php include("navbarleft.html"); ?> </div>


<!--Info-->
<div id="info">
       <span class="Title">ANYTIME CALENDAR | 2009</span>
          <span class="style">Calendar designed to be used any year, any occasion, anytime.</span>    
</div>  





<!--Imagenes-->
<div id="showreel-nav-wrap">
  <span>
    </span>
</div>



<ul id="buy-links" class="slideshow">
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
</ul>
        

<div id="showreel">
                <ul class="slideshow pics">    
                    <?xml version="1.0" encoding="utf-8"?>

<li><img src="images/Calendar.png" height="522px"/>
</li>

<li><img src="images/IMG_1162.png" height="522px" />
</li>

<li><img src="images/IMG_1307.png" />
</li> 

<li><a href="images/Calendar/Instructions.gif"><img src="images/Instructions_small.gif" /></a>
</li>        
      </ul>  
			</div><!--/showreel-->




<script type="text/javascript">
$(function() {	
	var totalImg = $("#showreel li").size() - 1;
	$("#buy-links li:gt(" + totalImg + ")").remove();
	
    $("#showreel-nav-wrap span").after('<div id="showreel-nav" class="showreel-nav">')

	$('.slideshow').each(function(index) {
        $(this).cycle({
			fx:     'fade',
			speed:  'slow',
			timeout: 0,
			sync:    false,
			pager:  '#showreel-nav',
			pagerAnchorBuilder: function(i) {
				if (index == 0)
					// for first slideshow, return a new anchor
					return '<a href="#">'+(i+1)+'</a>';
				// for 2nd slideshow, select the anchor created previously
				return '#showreel-nav a:eq('+i+')';
        	}
		});
    });

	//Image to trigger showreel links
	activeLink = $('#showreel-nav').find('.activeSlide');
	nextLink = activeLink.next();

	$('.slideshow img').bind('click',function(){
		activeLink = $('#showreel-nav').find('.activeSlide');
		nextLink = activeLink.next();
		nextLink.trigger('click');
	});
	
	//Get h1 text length
	var h1length = $('h1').text().length;
	if(h1length > 27) {
		$('.oj-title').css('margin-top','-21px');
	}
});
</script>

<!-- end #mainContent --></div>


</body>
</html>

Those <li> tags Im using is to numbered the images. It might not be a good practice but it works.

Thanks for reading this post, I hope someone could help me. It's frustrating I have been for the last two days going around trying to change things and nothing seems to work.

Hi,

I wish to get some content from another page.
Here is my code.
Code:

<script type="text/javascript">
jQuery.ajax({url: 'http://www.livecounter.dk/viewstats/30050',type: 'get',success: function(ajax) {
var x = jQuery('#box4 .first:last', ajax).innerHTML;
document.write(x);
}
}
});
</script>

<script src="http://code.jquery.com/jquery-1.6.1.min.js"> </script>

But it isn't working. I can't get the at this page : http://www.livecounter.dk/viewstats/30050 under "Altid" (to the right), next to "Sidevisninger". Image of it here : http://i51.tinypic.com/2e0sb9s.png

Thanks

Hello!
I am developing my personal website!
And I am trying to implement it with JS completely. which means I need the page to be one front end page.
But the back-end pages would be the ones which do the work and calculations!
In other words and more explaination:
I would like to have one "index.php" page that contains only a nav bar which handles the mission.
Once the page load it loads with the content of "home.php" (the landing page) if the "contact" tab is clicked then I would like to load the "ContactMe.php" page content.
I have done this already! but the problem is:
"home.php" uses alot of javascript functions and jquery plug-ins. when I load it, it looks messy that you think the JS is disabled in your machine :-\
Note: the loading has been done with those methods: .load(), $.ajax! -> same results!

The conclusion:
* "home.php"
* "ContactMe.php"
* "About.php"
Is it possible to load those pages in the "index.php" and still have their JS functions function correctly and display as if they were accessed individually?

The goal that I am trying to achieve is that I make my whole website for the visitor as "One Page Site"! I am challenging myself with it though!

Thank you in advance for your informative posts!


Please Note that I have only put the <html><head><body> tags in the index.php and removed them from the back-end pages such as home.php, contactme.php and about.php! for that sake that it works correctly! but with no hope!