JavaScript - Jquery Pagination

var s="attr"
var i=$(s)
// jQuery(elem).attr(attr,eval("elm"+attr));
jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this.

how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem".

I need help with pagination setup for my javascript image display.
The images I have now display when I select a certain category dynamically but I don't know how to implement javascript pagination into this code. I also don't know how to call it in my display page so that the images appear in a box and has separation in between them cause right now the images all display but connected to one another.
I am new to javascript and the coding world so I really hope someone can help me out cause I've been trying to figure out how for the past 2 weeks now.
Right now I have the code:

Code:

<div id="ImageContainer"></div>
<br />
    
<script type="text/javascript"><!--
	
	function ShowGallery()
	{
		// get parent for image container and remove image container
		var parentcontainer = document.getElementById("ImageContainer").parentNode;
		parentcontainer.removeChild(document.getElementById("ImageContainer"));

		// get current image gallery information from dropdown
		var dropdown = document.getElementById("catDropDown");
		var selectedoption = dropdown.getElementsByTagName("option")[dropdown.selectedIndex];
		var count = parseInt(selectedoption.getAttribute("Count"));

		// if there are not images in the category, return - "select a category" falls into this case as well
		if(count<=0)
		    return;

		// populate images in image elements
		var container = document.createElement("div");
		container.setAttribute("id","ImageContainer");
		for(var i=0;i<count;i++)
		{
		    var img=document.createElement("img");
                    img.setAttribute("src","images/th/thumb_"+dropdown.value+(i<9?"0":"")+(i+1)+".jpg");
		    img.setAttribute("alt","images/th/thumb_"+dropdown.value+(i<9?"0":"")+(i+1)+".jpg");
		    container.appendChild(img);

		}

		// Insert new image container back with new contents
		parentcontainer.appendChild(container);
		
	}

Hi,

I have a table with a list of items which currently show 8 items per page. I want to have an input box at the top of the page so if I want a different amount of items to be shown i enter the number and the page alters the pagination to what ever number is entered. Hope this makes sense.

Thanks for any help

Hi,

I have been playing with Slidersjs and have it sliding through my images just fine, however the previous/next and slide identifiers below the images don't seem to work and I can't see how to make them active. The temp link is he


http://mono-zine.com/Mono.LogDM.html

and the slide is the second one down.

The identifiers should be clickable to take you to a specific slide, whilst they do change they dont click.

Any help gratefully received. The script is from he http://slidesjs.com/

Cheers

so.. im tryign to paginate a div with content being added by an input. but its not working at all...

first, I got this input:

Code:

<form name="postbar_add_post" id="postbar_add_post"  method="post">
	<fieldset>
    	<legend>What chu doign? ...</legend>
        <input type="text" name="addcontentbox" id="addcontentbox" maxlength="200" />
        <input type="submit" name="addpost" value="Submit" class="submit" />
      	</fieldset>
</form>

then, what i will happen is that, the content being submited, will be posted to an unsorted list, named wall, i used jquery to help me out on this, heres the script:

Code:

<script type="text/javascript">
$(document).ready(function(){
	$("form#postbar_add_post").submit(function() {
		var addcontentbox = $('#addcontentbox').attr('value');
		
		if ( addcontentbox.replace(/\s/g,"") == "" ) return false;
		
$.ajax({
type: "POST",
url: "postear.php",
data:"addcontentbox="+ addcontentbox,
success: function(){
$("ul#wall").prepend("<li>"+addcontentbox+"</li>");
$("ul#wall li:first").fadeIn();
document.postbar_add_post.addcontentbox.value='';
document.postbar_add_post.addcontentbox.focus();
}
});
return false; 
});
});
</script>

the div where it is beign opsted at, looks like this:

Code:

<div id="cuerpo"><ul id="wall"></ul></div>

adn then, below i got this div, wich is where the navgiation links will be at:
(before u read, "current_page" and "show_per_page" are 2 hidden inputes to save the values.)

Code:

<div id="navwrapper"></div>

so, to make the navigation, i found a script online and tried to adapt it to the div, i got this:

Code:

$(document).ready(function(){ 

	//how much items per page to show  
	var show_per_page = 5;  
	//getting the amount of elements inside content div .   
    var number_of_items = $('#wall').children().size();  
    //calculate the number of pages we are going to have  
    var number_of_pages = Math.ceil(number_of_items/show_per_page); 
	
	//set the value of our hidden input fields  
    $('#current_page').val(0);  
    $('#show_per_page').val(show_per_page);  
	
	
	//navigation '  
  
      
    var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';  
    var current_link = 0;  
    while(number_of_pages > current_link){  
        navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';  
        current_link++;  
    }  
    navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';  
  
    $('#navwrapper').html(navigation_html);  
  
    //add active_page class to the first page link  
    $('#navwrapper .page_link:first').addClass('active_page');  
  
    //hide all the elements inside content div  
    $('#wall').children().css('display', 'none');  
  
    //and show the first n (show_per_page) elements  
    $('#wall').children().slice(0, show_per_page).css('display', 'block');  
  
});  

function previous(){  
  
    new_page = parseInt($('#current_page').val()) - 1;  
    //if there is an item before the current active link run the function  
    if($('.active_page').prev('.page_link').length==true){  
        go_to_page(new_page);  
    }    
}  

function next(){  
    new_page = parseInt($('#current_page').val()) + 1;  
    //if there is an item after the current active link run the function  
    if($('.active_page').next('.page_link').length==true){  
        go_to_page(new_page);  
    }  
} 

function go_to_page(page_num){  
    //get the number of items shown per page  
    var show_per_page = parseInt($('#show_per_page').val());  
  
    //get the element number where to start the slice from  
    start_from = page_num * show_per_page;  
  
    //get the element number where to end the slice  
    end_on = start_from + show_per_page;  
  
    //hide all children elements of content div, get specific items and show them  
    $('#wall').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');  
  
    /*get the page link that has longdesc attribute of the current page and add active_page class to it 
    and remove that class from previously active page link*/  
    $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');  
  
    //update the current page input field  
    $('#current_page').val(page_num);  
}

but all looks cool but... it is actually not working... everything its being posted great to the unsorted listt, but its not paging =S. .. it just all shows on the div, and scrolls.

Could it be somethign on the css? ... or... what ...? =|


Guidance? =( . my brains toasted. =\

On my website, I have a drop down selection for County which goes off and gets all pubs in that county using Ajax, which works fine:
http://www.mypubspace.com

What I would like to do is to pass through the PAGE (from the querystring too)

here is my function on the drop down
Code:

<script>
function countyFunction(){
	var countyRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		countyRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			countyRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				countyRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	countyRequest.onreadystatechange = function(){
		if(countyRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = countyRequest.responseText;
		}
	}
	var name = document.getElementById('name').value;
	var rsCounty = document.getElementById('rsCounty').value;
	var page = document.getElementById('page').value;
	var queryString = "?name=" + name + "&rsCounty=" + rsCounty + "&page=" + page;
	//Add the following line
	countyRequest.open("GET", "http://www.mypubspace.com/countypubs.php" + queryString, true);
	countyRequest.send(null);
}
</script>

<select name="menu2" onChange="countyFunction();" class="textbox" id="rsCounty">	
				 <option value="">Search by County...</option>
				<? 					
				$county_pubs = mysql_query("SELECT DISTINCT RSCOUNTY, COUNT(PUBID) As PubCount1 FROM pubs GROUP BY RSCOUNTY  ORDER BY RSCOUNTY ASC")
				?>

					<?php while($row1 = mysql_fetch_array($county_pubs))
					{
					echo '<option value="'.$row1['RSCOUNTY'].'">'.$row1['RSCOUNTY'].'&nbsp;('.$row1['PubCount1'].')</option>'; 
					}
					?>
			</select>
			<input type='hidden' id='name' />
            <input type='hidden' id='rsCounty' />
            <input type='hidden' id='rsTown' />
            <input type='hidden' id='page' />

and on the following page is my data and pagination:
Code:

	<?php
				if ($msg <>"") 
					{
					echo "<div class=\"ui-widget\">
				<div style=\"padding: 0pt 0.7em;\" class=\"ui-state-error ui-corner-all\"> 
					<p style=\"padding-top:18px;\"><span style=\"float: left; margin-right: 0.3em;\" class=\"ui-icon ui-icon-alert\"></span> 
					<strong>Alert:</strong> $msg</p>
				</div>
			</div>"; 
					}

	$tableName="pubs";		
	$targetpage = "county_pubs.php"; 	
	
	$limit = 20; 
	
	$query = "SELECT COUNT(*) as num FROM $tableName WHERE RSCOUNTY = '".$County."'";
	$total_pages = mysql_fetch_array(mysql_query($query));
	$total_pages = $total_pages['num'];
	
	$stages = 3;
	$page = mysql_escape_string($_REQUEST['page']);
	if( isset($_REQUEST['page']) && ctype_digit($_REQUEST['page']) ) {
      $page = (int) $_GET['page'];
      $start = ($page - 1) * $limit;
}else{
      $start = 0;   
}
	
    // Get page data
	$query1 = "SELECT * FROM $tableName WHERE RSCOUNTY = '".$County."' ORDER BY rsPubName asc LIMIT $start, $limit";
	$result = mysql_query($query1);
	
	// Initial page num setup
	if ($page == 0){$page = 1;}
	$prev = $page - 1;	
	$next = $page + 1;							
	$lastpage = ceil($total_pages/$limit);		
	$LastPagem1 = $lastpage - 1;					
	
	
	$paginate = '';
	if($lastpage > 1)
	{	
	

	
	
		$paginate .= "<span class='paginate'>";
		// Previous
		if ($page > 1){
			$paginate.= "<a href='$targetpage?page=$prev&amp;rsCounty=$County'>previous</a>";
		}else{
			$paginate.= "<span class='disabled'>previous</span>";	}
			

		
		// Pages	
		if ($lastpage < 7 + ($stages * 2))	// Not enough pages to breaking it up
		{	
			for ($counter = 1; $counter <= $lastpage; $counter++)
			{
				if ($counter == $page){
					$paginate.= "<span class='current'>$counter</span>";
				}else{
					$paginate.= "<a href='$targetpage?page=$counter&amp;rsCounty=$County'>$counter</a>";}					
			}
		}
		elseif($lastpage > 5 + ($stages * 2))	// Enough pages to hide a few?
		{
			// Beginning only hide later pages
			if($page < 1 + ($stages * 2))		
			{
				for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a href='$targetpage?page=$counter&amp;rsCounty=$County'>$counter</a>";}					
				}
				$paginate.= "...";
				$paginate.= "<a href='$targetpage?page=$LastPagem1&amp;rsCounty=$County'>$LastPagem1</a>";
				$paginate.= "<a href='$targetpage?page=$lastpage&amp;rsCounty=$County'>$lastpage</a>";		
			}
			// Middle hide some front and some back
			elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
			{
				$paginate.= "<a href='$targetpage?page=1&amp;rsCounty=$County'>1</a>";
				$paginate.= "<a href='$targetpage?page=2&amp;rsCounty=$County'>2</a>";
				$paginate.= "...";
				for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a href='$targetpage?page=$counter&amp;rsCounty=$County'>$counter</a>";}					
				}
				$paginate.= "...";
				$paginate.= "<a href='$targetpage?page=$LastPagem1&amp;rsCounty=$County'>$LastPagem1</a>";
				$paginate.= "<a href='$targetpage?page=$lastpage&amp;rsCounty=$County'>$lastpage</a>";		
			}
			// End only hide early pages
			else
			{
				$paginate.= "<a id='page' href='$targetpage?page=1&amp;rsCounty=$County'>1</a>";
				$paginate.= "<a id='page' href='$targetpage?page=2&amp;rsCounty=$County'>2</a>";
				$paginate.= "...";
				for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a id='page' href='$targetpage?page=$counter&amp;rsCounty=$County'>$counter</a>";}					
				}
			}
		}
					
				// Next
		if ($page < $counter - 1){ 
			$paginate.= "<a id='page' href='$targetpage?page=$next&amp;rsCounty=$County'>next</a>";
		}else{
			$paginate.= "<span class='disabled'>next</span>";
			}
			
		$paginate.= "</span>";		
	
	
} echo 'Pubs found: '.$total_pages;
 // pagination
 echo $paginate;
?>

<div id="accordion">
<?php 
 

		while($row = mysql_fetch_array($result))
		{
		
		echo '<div><h3><a href="#">'.$row['rsPubName'].', '.$row['rsTown'].'</a></h3><div>'.$row['rsAddress'].'<br />'.$row['rsTown'].', '.$row['rsCounty'].'<br />'.$row['rsPostCode'].'<br /><br />Region: '.$row['Region'].'<br /><br />Telephone: '.$row['rsTel'].'<br /><br />';
		echo '<button onclick="gohere(\'viewpub.php?PUBID='.$row['PUBID'].'\')" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">View Pub</span></button>';
		echo '</div></div>';
		
		}
		 echo '<span style="float:right;">'.$paginate.'</span>';
	
	?>

I'm trying to create a type of virtual pagination that's simple, semantic, and SEO friendly.

The concept is like this website: www.doner.com

In the bottom right hand corner, if you select a city, different contact information appears.

My theory is to assign a class name to the hyperlink, then have a DIV with a matching ID.

For example...

Code:

<a href="#" class="michigan">Michigan</a>
<a href="#" class="ohio">Ohio</a>
<a href="#" class="illinois">Illinois</a>

<div id="michigan">
Michigan container
</div>

<div id="ohio">
Ohio container
</div>

<div id="illinois">
Illinois container
</div>

The JavaScript I have written so far is...

Code:

var anchor = document.getElementsByTagName('a').className; // grab all hyperlinks and their classes
var div = document.getElementsByTagName('div').getElementByID; // grab all divs and their IDs

if (anchor = div) { // check to see if a hyperlink's class has a matching div ID
	div.style.display = "none";
	if (anchor.onclick) { // if the hyperlink is clicked...
		div.style.display = "visible"; // make matching div ID visible
	}
}

Nothing works yet, and I don't know where to continue. The DIVs aren't even hidden upon loading.

Can anyone help me?

Ok, I would post my entire data here but then yall would be reading insane amounts of script. I've got a div content jquery slider on my site I am making and it works beautifully in all browsers(took me a while). Then, I decided why not have it where when people click on a "read more" link that it pops up a box, instead of directing to the new page, and displays the contents of a div. It would not work at all. My question is there a possible way to do this?

i want get value form path :
ex..
xxx.com/index.php?cat

" cat " read cookie with jquery

who?

All,
I have the following jQuery code:
Code:

$("#other").click(function(){
    		var checked = $(this).is(':checked');
    		if(checked){
       			$('textarea#other_text').removeAttr("disabled");
    		}else {
        		$('textarea#other_text').attr("disabled", "disabled");
    		}
    	});

This works fine. However, what I'm allowing the users to do is edit this field. So I have the following PHP code:
PHP Code:
<input type="checkbox" name="other" value="x" id="other" <?php if($resultsetedits['other']=="x"){ echo "checked"; } ?>>&nbsp;Other:<br>If you choose other, please explain what other options you'd like us to do to your photo:<textarea name="other_text" rows="3" cols="119" id="other_text" disabled><?php if($resultsetedits['instructions']!=""){ echo $resultsetedits['instructions']; } ?></textarea>

Since the checkbox is checked with the PHP code the click function to jQuery never gets invoked and my textarea remains disabled. Is there anyway to basically invoke the jQuery code with my PHP script? Thanks in advance.

Hi Guys,

Please check this link out. I'm curious if you can attain the same functionality with jquery. Which include the hover over effects and sliding. If this can be done can you point me in the right direction to find some documentation to start learning. Thanks.

http://www.gensler.com/#projects

I'm not sure if I'm in the right place or not, but I am in desparate need of some help. I have this code:

Code:

<script type="text/javascript">


$(document).ready(function(){
	$('#add').click(function() {
	alert('test');
	});
	$("form#exercise").submit(function() {
	// we want to store the values from the form input box, then send via ajax below
	var activity     = $('#activity').attr('value');
		$.ajax({
			type: "POST",
			url: "newActiveProc.php",
			data: "activity="+ activity +"&func=search",
			success: function(activity){
				$("span#results").html(activity);

			}
		});
	return false;
	});

});
</script>

As you can see by the highlighted portion, the user is alerted once they make a selection. It should go something like this:

[Add to table] Football
[Add to table] Basketball
[Add to table] Baseball

Once they click the 'add to table' button, their selection should be added to a table that is at the bottom of the page. So far, all I've been able to do is generate an alert box, but I know thats not right. Any information anyone has would be helpful. Thanks in advance.

Hi,

I have this js script which is working on mouse click, what is my requirment is that it do the same function wiht on mouse over:

click: function(e) {
var el = this;
el.blur();
// if the image was not preloaded yet then wait
if (el.zoomimageCfg.loading === true) {
return false;
}
//zoom it in if not zoomed already
if (el.zoomimageCfg.zoomed == false) {
EYE.zoomimage.zoomIn(el);
//else zoom it out
} else {
EYE.zoomimage.zoomOut(el, false);
}
return false;
},

Thank you

Best Regards,
mnightwalker

I'm not sure if this is something jquery can do or what but here's what I want to do but I have this following code and when it shows either Public or Archived for the Event Status I want it to be a link so that if I click on Public then it turn it into Archived because it'll change its status_id in the DB from 4 to 5.

PHP Code:
case 1:
            echo $e;
            ?>
            <h1 class=backstage>Archiving Management</h1><br />
            <h2 class=backstage>Weekly Events</h2><br />
                
                <?php
                $query = "SELECT ecb.bookingdate, els.name, ele.statusname, ecb.label FROM `efed_content_booking` AS ecb LEFT JOIN `efed_list_shownames` AS els  ON ( ecb.event_id = els.id ) LEFT JOIN `efed_list_eventstatus`  AS ele ON ( ecb.status_id = ele.id ) WHERE els.type = 'singular' OR els.type = 'recurring'"; 
                
                $result = mysql_query ( $query ); 
                $rows = mysql_num_rows($result);
                if ($rows > 0)  {
                print'<table width="100%" class="table1">
                    <tr class="rowheading">
                        <td>Event</td>
                        <td align="center">Booking Date</td>
                        <td align="center">Event Status</td>
                    </tr>';
                $i = 0;
                while ( $row = mysql_fetch_array($result, MYSQL_ASSOC) ) {
                    $sClass = 'row2';
                    if ($i++ % 2) $sClass = 'row1';
                    printf ( "<tr class=\"%s\">", $sClass );
                    printf ( "<td valign=\"top\">%s%s</td>", $row['name'],$row['label'] );  
                    printf ( "<td valign=\"top\" align=\"center\">%s</td>", convertdate($row['bookingdate'] ));
                    printf ( "<td valign=\"top\" align=\"center\">%s</td>", $row['statusname'] );
                    echo '</tr>';
                 }
                echo '</table><br>';
            } else {
                echo '<span>There are no weekly events to archive.</span><br /><br />';
            }
            ?>
                <h2 class=backstage>Pay-Per-View Events</h2><br />
                
                <?php
                $query = "SELECT ecb.bookingdate, els.name, ele.statusname, ecb.label FROM `efed_content_booking` AS ecb LEFT JOIN `efed_list_shownames` AS els  ON ( ecb.event_id = els.id ) LEFT JOIN `efed_list_eventstatus`  AS ele ON ( ecb.status_id = ele.id ) WHERE els.type = 'ppv'"; 
                
                $result = mysql_query ( $query ); 
                $rows = mysql_num_rows($result);
                if ($rows > 0)  {
                print'<table width="100%" class="table1">
                    <tr class="rowheading">
                        <td>Event</td>
                        <td align="center">Booking Date</td>
                        <td align="center">Event Status</td>
                    </tr>';
                $i = 0;
                while ( $row = mysql_fetch_array($result, MYSQL_ASSOC) ) {
                    $sClass = 'row2';
                    if ($i++ % 2) $sClass = 'row1';
                    printf ( "<tr class=\"%s\">", $sClass );
                    printf ( "<td valign=\"top\">%s%s</td>", $row['name'],$row['label'] );
                    printf ( "<td valign=\"top\" align=\"center\">%s</td>", convertdate($row['bookingdate']) );
                    printf ( "<td valign=\"top\" align=\"center\">%s</td>", $row['statusname'] );
                    echo '</tr>';
                 }
                echo '</table><br>';
            } else {
                echo '<span>There are no ppv events to archive.</span><br /><br />';
            }
            returnmain();
            footercode();
        break;