We Keep Coding

My pagination is jumping around and I can't figure out how to fix it

I'm making a product listings page that uses AJAX calls to post the user's inputted data:
The pagination uses the jQuery inView function to call the next page
(NextPage.php) when loader.gif is in view
InfiniteScroll.js
$(document).ready(function() {
$('#Loader').on('inview', function(event, isInView) {
if (isInView) {
//Pagination
var nextPage = parseInt($('#pageno').val()) + 1;
//Filters
var minimum_wt = $('#hidden_minimum_wt').val();
var maximum_wt = $('#hidden_maximum_wt').val();
var shape = get_filter('shape');
var color = get_filter('color');
var enhancement = get_filter('enhancement');
var matching = get_filter('matching');
$.ajax({
type: 'POST',
url: 'vendors/php/NextPage.php',
data: {
pageno: nextPage,
minimum_wt: minimum_wt,
maximum_wt: maximum_wt,
shape: shape,
color: color,
enhancement: enhancement,
matching: matching
},
cache: false,
success: function(data) {
console.log(nextPage); //For debugging
if(data != '') {
$('#StoneContainer').append(data);
$('#pageno').val(nextPage);
} else {
$('.LoaderContainer').hide(); //Hide infinite scroll
}
}
});
}
});
});
//Checking applied filters
function get_filter(class_name) {
var filter = [];
$('.'+class_name+':checked').each(function() {
filter.push($(this).val());
});
return filter;
}
NextPage.php
<?php
if(isset($_GET['pageno']) || isset($_POST['action'])) {
$pageno = $_GET['pageno'];
} else {
$pageno = $_POST['pageno'];
}
$limit = 10;
$offset = ($pageno-1) * $limit;
//Include database configuration file
include('dbConfig.php');
$SQL = "
SELECT
number,
image1,
wt,
TRUNCATE(length,1) as length,
TRUNCATE(width,1) as width,
CASE
WHEN stonetype = 'SA' THEN 'Sapphire'
WHEN stonetype = 'RU' THEN 'Ruby'
WHEN stonetype = 'TML-P' THEN 'Paraiba'
WHEN stonetype = 'EM' THEN 'Emerald'
WHEN stonetype = 'TS' THEN 'Tsavorite'
WHEN stonetype = 'SI' THEN 'Spinel'
WHEN stonetype = 'GT' THEN 'Garnet'
WHEN stonetype = 'BER' THEN 'Beryl'
WHEN stonetype = 'TML' THEN 'Tourmaline'
WHEN stonetype = 'KO' THEN 'Kornerupine'
ELSE 'n/a'
END AS 'stonetype',
CASE
WHEN enhcode = 'H' THEN 'Heated'
WHEN enhcode = 'N' THEN 'Unheated'
ELSE 'n/a'
END AS 'enhcode'
FROM
stones
WHERE
wt >= 2.5
";
if(isset($_POST["minimum_wt"], $_POST["maximum_wt"]) && !empty($_POST["minimum_wt"]) && !empty($_POST["maximum_wt"])) {
$SQL .= "
AND wt BETWEEN '".$_POST["minimum_wt"]."' AND '".$_POST["maximum_wt"]."'
";
}
if(isset($_POST["shape"])) {
$shape_filter = implode("','", $_POST["shape"]);
$SQL .= "
AND stoneshape IN('".$shape_filter."')
";
}
if(isset($_POST["color"])) {
$color_filter = implode("','", $_POST["color"]);
$SQL .= "
AND stonecolor IN('".$color_filter."')
";
}
if(isset($_POST["enhancement"])) {
$enhancement_filter = implode("','", $_POST["enhancement"]);
$SQL .= "
AND enhcode IN('".$enhancement_filter."')
";
}
if(isset($_POST["matching"])) {
$matching_filter = implode("','", $_POST["matching"]);
$SQL .= "
AND pair IN('".$matching_filter."')
";
}
$SQL .= "
ORDER BY
wt ASC
LIMIT
" . $offset. ",
" . $limit. "
";
$res_data = mysqli_query($db, $SQL);
if(isset($_POST["minimum_wt"], $_POST["maximum_wt"]) && !empty($_POST["minimum_wt"]) && !empty($_POST["maximum_wt"]) && isset($_POST["shape"]) && isset($_POST["color"]) && isset($_POST["enhancement"]) && isset($_POST["matching"])) {
while($row = mysqli_fetch_array($res_data)) {
echo '
<div class="Stone">
<!-- landing page -->
<a href="#ItemPage" class="ItemLink" rel="modal:open" id="' . $row['number']. '">
<!-- image -->
<div class="StoneData StoneIMG"> <img src="../../../' . $row['image1'] . '"> </div>
<!-- weight -->
<div class="StoneData">' . $row['wt'] . 'Ct</div>
<!-- type -->
<div class="StoneData">' . $row['stonetype'] . '</div>
<!-- enhancement -->
<div class="StoneData">' . $row['enhcode'] . '</div>
<!-- dimensions -->
<div class="StoneData">' . $row['length'] . ' x ' . $row['width'] . '</div>
<!-- item number -->
<div class="StoneData"># ' . $row['number'] . '</div>
</a>
</div>
';
}
}
?>
4 different check box fields and a jQuery range slider so the user
can filter out only the data they want
Filters.js
$(document).ready(function() {
filter_data();
function filter_data() {
var action = 'fetch_data';
//Pagination
var nextPage = parseInt($('#pageno').val()) + 0;
//Filters
var minimum_wt = $('#hidden_minimum_wt').val();
var maximum_wt = $('#hidden_maximum_wt').val();
var shape = get_filter('shape');
var color = get_filter('color');
var enhancement = get_filter('enhancement');
var matching = get_filter('matching');
$.ajax( {
url: 'vendors/php/Filters/FilterData.php',
method: 'POST',
data: {
action: action,
pageno: nextPage,
minimum_wt: minimum_wt,
maximum_wt: maximum_wt,
shape: shape,
color: color,
enhancement: enhancement,
matching: matching
},
async: true,
error:
function(jqXHR, strError) {
if(strError == 'timeout') {
// Do something. Try again perhaps?
alert('Seems like there was an error loading the filters request.');
}
},
success:
function(data) {
$('#StoneContainer').html(data);
$('#pageno').val(nextPage);
$('.LoaderContainer').show(); //Show infinite scroll
},
timeout: 3000
});
}
// Where to find values to be filtered
function get_filter(class_name) {
var filter = [];
$('.'+class_name+':checked').each(function() {
filter.push($(this).val());
});
return filter;
}
// Apply filter_data() of .common_selector
$('.common_selector').click(function() {
filter_data();
});
// Range slider
$('#wt_range').slider({
range: true,
values: [2.5, 30],
min: 2.5,
max: 30,
step: 0.1,
slide:
function(event, ui) {
// prevent thumbs from overlapping
if ((ui.values[1] - ui.values[0]) < 3) {
return false;
}
$('#wt_show').html(ui.values[0] + 'Ct - ' + ui.values[1] + 'Ct');
$('#hidden_minimum_wt').val(ui.values[0]);
$('#hidden_maximum_wt').val(ui.values[1]);
filter_data();
}
});
// open and close filters menu on mobile
if ($('#StoneContainer').width() < 420 ) {
$('.OpenCloseFilters').on('click', function() {
$('.FiltersContainer').slideToggle();
// refresh button
$('.ResetFiltersToggle0').toggleClass('ResetFiltersToggle1');
// change icon on toggle
$('#MenuIcon').toggleClass('mdi-menu-up mdi-menu-down');
});
}
});
FilterData.php
<?php
if(isset($_POST['pageno']) || isset($_POST['action'])) {
//Include database configuration file
include('../dbConfig.php');
$limit = 10;
$offset = !empty($_POST['pageno']) ? $_POST['pageno']: 0;
$SQL = "
SELECT
number,
image1,
wt,
TRUNCATE(length,1) as length,
TRUNCATE(width,1) as width,
CASE
WHEN stonetype = 'SA' THEN 'Sapphire'
WHEN stonetype = 'RU' THEN 'Ruby'
WHEN stonetype = 'TML-P' THEN 'Paraiba'
WHEN stonetype = 'EM' THEN 'Emerald'
WHEN stonetype = 'TS' THEN 'Tsavorite'
WHEN stonetype = 'SI' THEN 'Spinel'
WHEN stonetype = 'GT' THEN 'Garnet'
WHEN stonetype = 'BER' THEN 'Beryl'
WHEN stonetype = 'TML' THEN 'Tourmaline'
WHEN stonetype = 'KO' THEN 'Kornerupine'
ELSE 'n/a'
END AS 'stonetype',
CASE
WHEN enhcode = 'H' THEN 'Heated'
WHEN enhcode = 'N' THEN 'Unheated'
ELSE 'n/a'
END AS 'enhcode'
FROM
stones
WHERE
wt >= 2.5
";
if(isset($_POST["minimum_wt"], $_POST["maximum_wt"]) && !empty($_POST["minimum_wt"]) && !empty($_POST["maximum_wt"])) {
$SQL .= "
AND wt BETWEEN '".$_POST["minimum_wt"]."' AND '".$_POST["maximum_wt"]."'
";
}
if(isset($_POST["shape"])) {
$shape_filter = implode("','", $_POST["shape"]);
$SQL .= "
AND stoneshape IN('".$shape_filter."')
";
}
if(isset($_POST["color"])) {
$color_filter = implode("','", $_POST["color"]);
$SQL .= "
AND stonecolor IN('".$color_filter."')
";
}
if(isset($_POST["enhancement"])) {
$enhancement_filter = implode("','", $_POST["enhancement"]);
$SQL .= "
AND enhcode IN('".$enhancement_filter."')
";
}
if(isset($_POST["matching"])) {
$matching_filter = implode("','", $_POST["matching"]);
$SQL .= "
AND pair IN('".$matching_filter."')
";
}
$SQL .= "
ORDER BY wt ASC
LIMIT
$offset,
$limit
";
$result = mysqli_query($db, $SQL);
$output = '';
if(isset($_POST["minimum_wt"], $_POST["maximum_wt"]) && !empty($_POST["minimum_wt"]) && !empty($_POST["maximum_wt"]) && isset($_POST["shape"]) && isset($_POST["color"]) && isset($_POST["enhancement"]) && isset($_POST["matching"])) {
if($row = mysqli_fetch_array($result)) {
foreach($result as $row) {
$output .= '
<div class="Stone">
<!-- landing page -->
<a href="#ItemPage" class="ItemLink" rel="modal:open" id="' . $row['number']. '">
<!-- image -->
<div class="StoneData StoneIMG"> <img src="../../../' . $row['image1'] . '"> </div>
<!-- weight -->
<div class="StoneData">' . $row['wt'] . 'Ct</div>
<!-- type -->
<div class="StoneData">' . $row['stonetype'] . '</div>
<!-- enhancement -->
<div class="StoneData">' . $row['enhcode'] . '</div>
<!-- dimensions -->
<div class="StoneData">' . $row['length'] . ' x ' . $row['width'] . '</div>
<!-- item number -->
<div class="StoneData"># ' . $row['number'] . '</div>
</a>
</div>
';
}
}
} else {
$output = '
<h1 class="Error">
<span class="mdi mdi-filter-remove mdi-48px"></span>
NO STONES MATCH THAT
</h1>
';
}
echo $output;
}
?>
My problem is when the user updates the filters my pagination jumps to the next page so not only will they not see the else statement on FilterData.php (which can obviously be very confusing for the user) but they will get a totally blank page, even when there are some results.
I imagine the solution to be resetting to the first page (of my pagination) every time the data updates. But for some reason I can't figure out how to do it. I tried changing line 52 of Filters.js to $('#pageno').val(0);, but that didn't seem to work as expected.
I know this is probably a very simple issue for you guys and i'm sort of embarrassed even asking but I've been trying to fix this since last Wednesday and still can't get it (i'm pretty new to php). Thank you so much for your time in advance!

Need to assign unique ID to div in PHP file

I'm outputting a calendar which will ultimately appear as a series of buttons for the end user. Each button will have the name of the event. When you tap on a button, it will toggle down to show you a short description and the date/time for the event.
So far I've got all the event buttons to show. However, when you click on any button, only the very top event's description and date/time show. What I need help with then is figuring out how to assign each event instance a unique div ID. I tried some other examples on here, but because the following code is written in PHP, just creating a var = blank; throws a processing error.
public function event_block($title, $desc, $start, $end, $where = NULL, $img = NULL, $span = 6)
{
$start_arr = date_parse($start);
$start_stamp = mktime($start_arr['hour'], $start_arr['minute'], $start_arr['second'], $start_arr['month'], $start_arr['day'], $start_arr['year']);
$start_date_int = date('Ymd', $start_stamp);
$end_arr = date_parse($end);
$end_stamp = mktime($end_arr['hour'], $end_arr['minute'], $end_arr['second'], $end_arr['month'], $end_arr['day'], $end_arr['year']);
$end_date_int = date('Ymd', $end_stamp);
$today_date_int = date('Ymd');
$time_range = date('g:i a', $start_stamp) . ' to ' . date('g:i a', $end_stamp);
if ($start_date_int == $today_date_int) {
$date = 'Today';
if ($start_date_int < $end_date_int) {
$time_range = 'Until ' . date('l, F jS', $end_stamp);
}
} else {
$date = date('l, F jS', $start_stamp);
if ($start_date_int < $end_date_int) {
$time_range = 'From' . date('l, F jS', $start_stamp) . ' through ' . date('l, F jS', $end_stamp);
}
}
$output = '
<!-- Event Block -->
<div class="span' . $span . ' event">
<div class="panel-group id="accordion">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#addMore" class="btn btn-primary btn-lg">' . $title . '</a>';
if (trim($desc) && $date == 'Today') {
$output .= '<div id="addMore" class="panel-collapse collapse">
<div class="panel-body">' . trim($desc) . '</div>';
}
$output .= '<p style="padding-left: 5px;">';
if (trim($desc) && $date != 'Today') {
$output .= '<div id="addMore" class="panel-collapse collapse">
<div class="panel-body">' .trim($desc) . '</div>';
$output .= '<span style="color: #E8D0A9;">Date:</span> ' . $date . '<br />';
}
$output .= '<span style="color: #E8D0A9;">Time:</span> ' . $time_range . '</p></div>';
return $output;
}
This is the helpful post I looked at before: Create Dynamic div with unique IDs - jQuery
Below is the code on my calendar.php which uses the data from above to generate the calendar of events:
<?php
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
require_once('include/event_signage.php');
$sign = new Signage;
// Collect and format all the data
$hero_content = array(
'heading' => '',
'text' => '',
);
$events_now_arr = $sign->databoard_get('URL');
$events_today_arr = $sign->databoard_get('URL');
$events_week_arr = $sign->databoard_get('URL');
// Build the sign
$signage = $sign->header();
//$signage .= $sign->masthead($masthead_content);
$signage .= '<div class="container-fluid"> <!-- container -->';
$signage .= $sign->hero_unit($hero_content);
$event_ids = array();
// Happnening Now
if (count($events_now_arr)) {
$signage .= '<div><h2>Right now!</h2></div>';
foreach ($events_now_arr as $events_arr) {
if (!in_array($events_arr['id'], $event_ids) && $events_arr['cal_id'] != 'community') {
$blocks[] = $sign->event_block($events_arr['title'], $events_arr['description'], $events_arr['start'], $events_arr['end']);
}
$event_ids[] = $events_arr['id'];
}
$signage .= $sign->gather_blocks($blocks);
unset($blocks);
}
// Happening today
if (count($events_today_arr)) {
$signage .= '<div><h2>Today</h2></div>';
foreach ($events_today_arr as $events_arr) {
if (!in_array($events_arr['id'], $event_ids) && $events_arr['cal_id'] != 'community') {
$blocks[] = $sign->event_block($events_arr['title'], $events_arr['description'], $events_arr['start'], $events_arr['end']);
}
$event_ids[] = $events_arr['id'];
}
$signage .= $sign->gather_blocks($blocks);
unset($blocks);
}
// Happening this week
if (count($events_week_arr)) {
$current_hour = date('G');
$cutoff = 39;
if ($current_hour <= 16) {
$cutoff = 27;
if ($current_hour <= 14) { $cutoff = 24; }
if ($current_hour <= 13) { $cutoff = 21; }
if ($current_hour <= 12) { $cutoff = 18; }
if ($current_hour <= 10) { $cutoff = 15; }
}
$signage .= '<div><h2>This Week</h2></div>';
$i = 0;
foreach ($events_week_arr as $events_arr) {
if (!in_array($events_arr['id'], $event_ids) && $events_arr['cal_id'] != 'community' && $i < $cutoff) {
$blocks[] = $sign->event_block($events_arr['title'], $events_arr['description'], $events_arr['start'], $events_arr['end'], NULL, NULL, 4);
$i++;
}
$event_ids[] = $events_arr['id'];
}
$signage .= $sign->gather_blocks($blocks, 3);
unset($blocks);
}
$signage .= '</div> <!-- /container -->';
$signage .= $sign->footer();
// Output the sign
print $signage;
?>

You're going about it wrong. You don't really need to assign a unique id to any of the divs. You just need some standard DOM operations. e.g
<div>
calendar entry #1
<div>more information that's hidden for entry #1</div>
<button onclick="showMore(this);">click here for more</button>
</div>
<div>
calendar entry #2
<div>more information that's hidden for entry #2</div>
<button onclick="showMore(this);">click here for more</button>
</div>
Since every element in the DOM KNOWS where it is in the tree, you don't need a specific ID on that first container div, you just need to know which button got clicked on, which is why this is being passed into the showMore() function:
function showMore(obj) {
obj.previousSibling().style.display = 'block'; // the more info div
}
Of course, this code isn't particularly "portable". it assumes the "more info" div is always going to be right next to the "toggle" button, but this should be enough to give you the general idea.

Why jQuery more/less toggle script won't work in WordPress?

I am trying to add more/less toggle script on my text, and it won't work.
It should show at start of page loading height of 25px of the text, and full height, or auto heihght after button for height, button of jquery script is pressed.
I can't get it working on wordpress.
Works on fiddle: http://jsfiddle.net/Wut5E/
And i tried on two different ways.
With shortcodes, of course.
function piki( $atts, $content = null ) {
$url = '/?s=';
$str = '';
$output = array();
$count = 0;
foreach (explode(", ",$content) as $content) {
$count++;
$output[] = "<a href='" . $url . $content . "'>" . $content . "</a>";
if ($count == 50) {
break;
}
}
{ ?>
<script type="text/javascript">
jQuery('.more').click(function() {
if(jQuery('.piki').css('height') != '25px'){
jQuery('.piki').stop().animate({height: '25px'}, 200);
jQuery(this).text('More...');
}else{
jQuery('.piki').css({height:'100%'});
var xx = jQuery('.piki').height();
jQuery('.piki').css({height:'28px'});
jQuery('.piki').stop().animate({height: xx}, 400);
// ^^ The above is beacuse you can't animate css to 100% (or any percentage). So I change it to 100%, get the value, change it back, then animate it to the value. If you don't want animation, you can ditch all of it and just leave: jQuery('.show-more-snippet').css({height:'100%'});^^ //
jQuery(this).text('Less...');
}
});
</script>
<div id="piki" class="piki" style="height: 25px; overflow: hidden;"><?php echo implode(", ", $output); ?></div><a class="more" style="float: left;" href="#stay_here">Read more <br><br></a>
<?php }
}
add_shortcode( 'piki', 'piki' );
or this way
function piki( $atts, $content = null ) {
$url = '/?s=';
$str = '';
$output = array();
$count = 0;
foreach (explode(", ",$content) as $content) {
$count++;
$output[] = "<a href='" . $url . $content . "'>" . $content . "</a>";
if ($count == 50) {
break;
}
}
{ ?>
<script type="text/javascript">
jQuery('.more').click(function() {
if(jQuery('.piki').css('height') != '25px'){
jQuery('.piki').stop().animate({height: '25px'}, 200);
jQuery(this).text('More...');
}else{
jQuery('.piki').css({height:'100%'});
var xx = jQuery('.piki').height();
jQuery('.piki').css({height:'28px'});
jQuery('.piki').stop().animate({height: xx}, 400);
// ^^ The above is beacuse you can't animate css to 100% (or any percentage). So I change it to 100%, get the value, change it back, then animate it to the value. If you don't want animation, you can ditch all of it and just leave: jQuery('.show-more-snippet').css({height:'100%'});^^ //
jQuery(this).text('Less...');
}
});
</script>
<?php }
return '<div id="piki" class="piki" style="height: 25px; overflow: hidden;">'.implode(", ", $output).'</div><a class="more" style="float: left;" href="#stay_here">Read more <br><br></a>';
}
add_shortcode( 'piki', 'piki' );
What I'm doing wrong?

How to make codnitive sidenav slide up/down?

I have the magneto extension "Codnitive Sidenav" but in order to make it slideUp/Down
some extra coding is needed.
the original navigation.phtml code for sidenav is:
<?php if ($categories = $this->getCategoriesNavMenu()): ?>
<div id="sidebar-nav" class="block sidebar-nav-left <?php echo $this- >getBlockAlias() ?>">
<div class="block-title">
<strong><span><?php echo $this->__($this->getTitle()) ?></span></strong>
</div>
<div class="block-content">
<ul id="sidebar-nav-menu">
<?php if ($this->showHome()): ?>
<li class="<?php echo $this->getHomeClasses() ?>">
<a title="Go to Home Page" href="<?php echo $this->getBaseUrl() ?>"><span class="category_name"></span></a>
</li>
<?php endif; ?>
<?php echo $categories; ?>
</ul>
<?php if ($this->showSupportLogo()): ?>
<div class="clearer support-logo-wrapper"></div>
<a href="http://www.codnitive.com/" target="_blank" class="support_logo">
<?php if ($this->showAsImage()): ?>
<img src="<?php echo $this->getSkinUrl('images/codnitive/sidenav/codnitive_logo.png'); ?>" alt="CODNITIVE®" title="Sidebar Navigation by CODNITIVE"/>
<?php else: ?>
<span>CODNITIVE&REG;</span>
<?php endif; ?>
</a>
<?php endif; ?>
</div>
<?php if ($this->getConfig()->isCollapsible()): ?>
<script type="text/javascript" language="javascript">
//<![CDATA[
Codnitive = {
expandMenu: function(parent)
{
var mode = parent.getElementsByTagName("ul")[0].getAttribute("expanded");
(mode == 1) ? Codnitive.collapse(parent) : Codnitive.expand(parent);
},
expand: function(parent)
{
parent.getElementsByTagName("ul")[0].style.display = "block";
parent.getElementsByTagName("span")[0].style.backgroundPosition = "right center";
parent.getElementsByTagName("ul")[0].setAttribute("expanded", "1");
},
collapse: function(parent)
{
parent.getElementsByTagName("ul")[0].style.display = "none";
parent.getElementsByTagName("span")[0].style.backgroundPosition = "left center";
parent.getElementsByTagName("ul")[0].setAttribute("expanded", "0");
}
};
//]]>
</script>
<?php endif; ?>
and the original code for navigation.php is:
<?php
*/
public function getConfig()
{
if ($this->_config === null) {
$this->_config = Mage::getModel('sidenav/config');
}
return $this->_config;
}
/**
* Get store categories navigation menu
*
* #return string
*/
public function getCategoriesNavMenu()
{
$navigationMenu = $this->renderCategoriesMenuHtml(0);
return $navigationMenu ? $navigationMenu : false;
}
/**
* We set cache to null when product direct access option is enabled and customer
* is in product page to avoid wrong category tree showing with enabled caches
*
* Adds 1 extra second to page load
* Ultra version has caching and best performance
*
* #return null
*/
public function getCacheLifetime()
{
$condition = (Mage::registry('current_product') !== null)
&& ($this->getConfig()->activeProductCategoriesInDirectAccess());
if ($condition) {
return null;
}
return parent::getCacheLifetime();
}
/**
* Get catagories of current store
*
* #return Varien_Data_Tree_Node_Collection
*/
public function getStoreCategories()
{
return Mage::helper('sidenav/category')->getStoreCategories();
}
/**
* Returns category model
*
* #return Codnitive_Sidenav_Model_Category
*/
protected function _getCategoryModel()
{
return Mage::getModel('sidenav/catalog_category');
}
/**
* Retruns data helper
*
* #return Codnitive_Sidenav_Helper_Data
*/
protected function _getHelper()
{
return Mage::helper('sidenav');
}
/**
* Render category to html
*
* #param Mage_Catalog_Model_Category $category
* #param int Nesting level number
* #param boolean Whether ot not this item is last, affects list item class
* #param boolean Whether ot not this item is first, affects list item class
* #param boolean Whether ot not this item is outermost, affects list item class
* #param string Extra class of outermost list items
* #param string If specified wraps children list in div with this class
* #param boolean Whether ot not to add on* attributes to list item
* #return string
*/
protected function _renderCategoryMenuItemHtml(
$category, $level = 0, $isLast = false,
$isFirst = false, $isOutermost = false, $outermostItemClass = '',
$childrenWrapClass = '', $noEventAttributes = false
) {
if (!$category->getIsActive()) {
return '';
}
$config = $this->getConfig();
$html = array();
$expanded = null;
$ulThumb = '';
$image = '';
$thumb = '';
$htmlLi = '';
// get all children
if (Mage::helper('catalog/category_flat')->isEnabled()) {
$children = (array) $category->getChildrenNodes();
$childrenCount = count($children);
}
else {
$children = $category->getChildren();
if (!$this->_getHelper()->isSearchResultsPage()) {
$childrenCount = $children->count();
}
else {
if (is_string($children)) {
$children = explode(',', $children);
}
$childrenCount = count($children);
}
}
// select active children
$activeChildren = array();
foreach ($children as $child) {
if ($child->getIsActive()) {
$activeChildren[] = $child;
}
}
$activeChildrenCount = count($activeChildren);
$hasActiveChildren = ($activeChildrenCount > 0);
// prepare list item html classes
$classes = array();
$classes[] = 'level' . $level;
$classes[] = 'nav-' . $this->_getItemPosition($level);
if ($this->isCategoryActive($category)) {
$classes[] = 'active';
}
else if ((Mage::registry('current_product') !== null) && ($config->activeProductCategoriesInDirectAccess())) {
$classes = $this->_getCategoryModel()->getProductCategoriesInDirectAccess($category, $classes);
}
$linkClass = '';
if ($isOutermost && $outermostItemClass) {
$classes[] = $outermostItemClass;
$linkClass = ' class="' . $outermostItemClass . '"';
}
if ($isFirst) {
$classes[] = 'first';
}
if ($isLast) {
$classes[] = 'last';
}
if ($hasActiveChildren) {
$classes[] = 'parent';
}
// prepare list item attributes
$attributes = array();
if (count($classes) > 0) {
$attributes['class'] = implode(' ', $classes);
}
if ($hasActiveChildren && !$noEventAttributes) {
$attributes['onmouseover'] = 'toggleMenu(this,1)';
$attributes['onmouseout'] = 'toggleMenu(this,0)';
}
// assemble list item with attributes
$thumbWidth = 14;
$thumbHeight = 14;
$thumbPosition = $config->getThumbPosition();
$liMarginLeft = 0;
$ulMarginLeft = 5;
$ulPaddingLeft = 10;
// define image thumbnail variables
if ($config->isThumbImageActive()) {
if ($config->getThumbSize()) {
$thumbWidth = $config->getThumbWidth();
$thumbHeight = $config->getThumbHeight();
}
$thumbnail = $this->_getCategoryModel()->load($category->getId())->getThumbnailImageUrl();
$ulThumb = ' ul-thumb';
if (!empty($thumbnail)) {
$image = '<img class="thumb-img-' . $thumbPosition . '" src="' . $thumbnail . '" style= "width:' . $thumbWidth . 'px; height:' . $thumbHeight . 'px; float: ' . $thumbPosition . ';" />';
$thumb = ' thumb';
if ($thumbPosition === 'left') {
if ($config->isCollapsible() && $config->isThumbImageActive()) {
$liMarginLeft = $thumbWidth + 3;
$ulMarginLeft = 0;
}
else {
$liMarginLeft = 0;
$ulMarginLeft = $thumbWidth + 3;
}
$ulPaddingLeft = 0;
}
}
else {
$thumb = ' no-thumb';
$liMarginLeft = ($thumbPosition === 'right') ? 0 : $thumbWidth + 3;
if ($thumbPosition === 'left') {
$ulMarginLeft = 0;
$ulPaddingLeft = 0;
}
}
}
$collapsibleClass = '';
if ($config->isCollapsible()) {
$collapsibleClass = ' collapsible';
}
// add collapsible arrow and wrraper
$arrow = '';
$extraStyle = '';
$collapsibleIconPosition = $config->getCollapsibleIconPosition();
if ($config->isCollapsible()) {
$width = $config->getCollapsibleIconType() === 'arrow' ? 8 : 16;
$height = 0;
$expanded = 0;
if ($hasActiveChildren) {
$width = $config->getCollapsibleIconType() === 'arrow' ? 8 : 16;
$height = 16;
}
if ($height == 0) {
$extraStyle = ' display:none;';
}
if ($height == 0 && $collapsibleIconPosition === 'left') {
$liMarginLeft += $width;
}
if ($this->isCategoryActive($category)) {
$expanded = 1;
}
$expanded = ' expanded="' . $expanded .'"';
$spanOnclick = 'onclick="Codnitive.expandMenu(this.parentNode)';
$spanClass = $config->getCollapsibleIconType() . '-' . $collapsibleIconPosition;
$arrow = '<span class="' . $spanClass . ' " ' . $spanOnclick . '" style="width: ' . $width . 'px; height: ' . $height . 'px;' . $extraStyle . '"></span>';
}
$htmlLi .= '<li';
foreach ($attributes as $attrName => $attrValue) {
$htmlLi .= ' ' . $attrName . '="' . str_replace('"', '\"', $attrValue) . $thumb . $collapsibleClass . '"';
}
$htmlLi .= ' style="margin-left: ' . $liMarginLeft . 'px;' . '">';
$html[] = $htmlLi;
$html[] = $arrow;
// add wrapper
$aClass = '';
$aStyle = '';
$onclick = '';
if ($config->isCollapsible() || $config->isThumbImageActive()) {
$wrapperMargin = ($config->isCollapsible() && $collapsibleIconPosition === 'left') ? 14 : 0;
$extraMargin = !$config->isThumbImageActive() ? 0 : (!empty($thumbnail) && ($thumbPosition === 'left')) ? $thumbWidth + 3 : 0;
$collWrapper = $wrapperMargin + $extraMargin;
// makes parent category name clickable to open/close collapsible menus if option is enabled
$collapseName = '';
if ($hasActiveChildren && $config->isCollapsible() && $config->expandByParentName()) {
$onclick = ' onclick="Codnitive.expandMenu(this.parentNode);return false;"';
$collapseName = ' collapse-name';
}
$aClass = 'class="collapsible-wrapper' . $collapseName . '"';
$aStyle = ' style="margin-left: ' . $collWrapper . 'px;"';
}
$html[] = '<a ' . $aClass . $onclick . 'href="' . $this->getCategoryUrl($category) . '"'
. $linkClass .'>' . '<span class="category_name">'
. $this->escapeHtml($category->getName()) . '</span></a>';
// add thumbnail image
$html[] = $image;
// add product count
if ($config->showProductCount()) {
$count = Mage::getModel('catalog/layer')
->setCurrentCategory($category->getID())
->getProductCollection()
->getSize();
if (($config->removeZeroCount() && $count > 0) || !$config->removeZeroCount()) {
$html[] = '<span class="product-count">(' . $count . ')</span>';
}
}
// render children
$htmlChildren = '';
$j = 0;
foreach ($activeChildren as $child) {
$htmlChildren .= $this->_renderCategoryMenuItemHtml(
$child, ($level + 1), ($j == $activeChildrenCount - 1), ($j == 0), false, $outermostItemClass, $childrenWrapClass, $noEventAttributes
);
$j++;
}
if (!empty($htmlChildren)) {
if ($childrenWrapClass) {
$html[] = '<div class="' . $childrenWrapClass . '">';
}
$html[] = '<ul class="level' . $level . $ulThumb . $collapsibleClass .
'" style="margin-left: ' . $ulMarginLeft .
'px; padding-left: ' . $ulPaddingLeft . 'px;"' . $expanded . '>';
$html[] = $htmlChildren;
$html[] = '</ul>';
if ($childrenWrapClass) {
$html[] = '</div>';
}
}
$html[] = '</li>';
$html = implode("\n", $html);
return $html;
}
/**
* Render categories menu in HTML
*
* #param int Level number for list item class to start from
* #param string Extra class of outermost list items
* #param string If specified wraps children list in div with this class
* #return string
*/
public function renderCategoriesMenuHtml($level = 0, $outermostItemClass = '', $childrenWrapClass = '')
{
$currentId = Mage::app()->getStore()->getRootCategoryId();
$currentLevel = $this->_getCategoryModel()->load($currentId)->getLevel();
if ($registerdCategory = Mage::registry('current_category')) {
$currentId = $registerdCategory->getId();
$currentLevel = $registerdCategory->getLevel();
}
$config = $this->getConfig();
$paretnType = $config->getParent();
$categories = $this->getStoreCategories();
$activeCategories = array();
foreach ($categories as $child) {
// this condition use for "Current Category and Children" option
$condition = ($paretnType == 'current')
&& ($child->getLevel() == $currentLevel)
&& ($child->getId() != $currentId);
if ($child->getIsActive() && !$condition) {
$activeCategories[] = $child;
}
}
$activeCategoriesCount = count($activeCategories);
$hasActiveCategoriesCount = ($activeCategoriesCount > 0);
if (!$hasActiveCategoriesCount) {
return '';
}
$html = '';
$j = 0;
foreach ($activeCategories as $category) {
$html .= $this->_renderCategoryMenuItemHtml(
$category, $level, ($j == $activeCategoriesCount - 1),
($j == 0), true, $outermostItemClass, $childrenWrapClass, true
);
$j++;
}
return $html;
}
/**
* Get category title
*
* #return string
*/
public function getTitle()
{
$title = '';
$currentCategory = Mage::registry('current_category');
switch ($this->getConfig()->getTitleType()) {
case 'current':
if ($currentCategory) {
$title = $currentCategory->getName();
}
break;
case 'parent':
if ($currentCategory) {
$parent = $currentCategory->getParentCategory();
$rootId = Mage::app()->getStore()->getRootCategoryId();
if ($parent->getId() != $rootId) {
$title = $parent->getName();
}
}
break;
case 'static':
$title = $this->getConfig()->getStaticTitle();
}
if (!$title) {
$title = $this->getConfig()->getStaticTitle();
}
return $title;
}
/**
* Retrieves home page link must show
*
* #return boolean
*/
public function showHome()
{
if ($this->_getHelper()->isHome() && $this->getConfig()->removeHomeInHome()) {
return false;
}
return $this->getConfig()->showHome();
}
/**
* Returns all classes for home link
*
* #return string
*/
public function getHomeClasses()
{
$classes = 'level0 nav-0 parent home';
if ($this->getConfig()->isCollapsible()) {
$classes .= ' collapsible';
}
if ($this->_getHelper()->isHome()) {
$classes .= ' active';
}
return $classes;
}
/**
* Retrieves which CODNITIVE logo must show or not
*
* #return boolean
*/
public function showSupportLogo()
{
return $this->getConfig()->showSupportLogo();
}
/**
* Retrieves which CODNITIVE logo must show as image or text
*
* #return boolean
*/
public function showAsImage()
{
return $this->getConfig()->showAsImage();
}
/**
* Get extension enable status
*
* #deprecated after 1.7.20
* We don't need to check for module activation option
* in template, we check it in layout.
*
* #return boolean
*/
public function isActive()
{
return $this->getConfig()->isActive();
}
/**
* Get selected column
*
* #deprecated after 1.7.20
* We don't need to check for selected column option
* in template, we check it in layout.
*
* #return string
*/
public function getColumn()
{
return $this->getConfig()->getColumn();
}
}
I was told to replace the javascript code in navigation.phtml with the code here below:
(function($) {
Codnitive = {
sideMenu:
{
expandMenu: function($parent)
{
var $ul = $parent.getElementsByTagName("ul")[0];
var $span = $parent.getElementsByTagName("span")[0];
($ul.getAttribute("expanded") == 1)
? Codnitive.sideMenu.collapse($ul, $span)
: Codnitive.sideMenu.expand($ul, $span);
},
expand: function($ul, $span)
{
$($ul).slideDown(300, function() {
$ul.setAttribute("expanded", "1");
$span.style.backgroundPosition = "right center";
});
},
collapse: function($ul, $span)
{
$($ul).slideUp(400, function() {
$ul.setAttribute("expanded", "0");
$span.style.backgroundPosition = "left center";
});
}
},
})(jQuery);
AND call it like this:
onclick="Codnitive.sideMenu.expandMenu(this.parentNode)"
so I tried this, like so:
$expanded = ' expanded="' . $expanded .'"';
$spanOnclick = 'onclick="Codnitive.expandMenu(this.parentNode)';
$spanClass = $config->getCollapsibleIconType() . '-' . $collapsibleIconPosition;
$arrow = '<span class="' . $spanClass . ' " ' . $spanOnclick . '" style="width: ' . $width . 'px; height: ' . $height . 'px;' . $extraStyle . '"></span>';
and
if ($hasActiveChildren && $config->isCollapsible() && $config->expandByParentName()) {
$onclick = ' onclick="Codnitive.sideMenu.expandMenu(this.parentNode);return false;"';
But it didn't work so my question is: What am I doing wrong here?
does it have to do with the misplacement of " "?
Does anyone know what I should do to make this work?
much obliged,
Tuutuutuut

Javascript to resize container based on height of multiple absolutely positioned child elements

I'm using js-graph.it (http://js-graph-it.sourceforge.net/index.html) to create a visual representation of a workflow which is created by the end user of the application. I've got a lightbox (Fancybox) popup to display the process map and all works well. However, the steps are all absolutely positioned elements and as such I am unable to set the container's height since there could be any number of rows of elements.
So my question is, is there any way to calculate the total height of absolutely positioned elements and then use that value to update the height for the container element?
I realize that relative positioning/floats would be better but unfortunately that's not an option with js-graph-it since it needs absolute positioning to draw the connecting arrows.
Here's a JSFiddle of what I'm dealing with: http://jsfiddle.net/db3ef/1/ and since code is required, all the HTML is created by PHP so here's how I set it to display 4 items in a row and calculate the absolute positioning:
<?php
if ($steplist) {
$oddcounter = 0;
$evencounter = false;
$row = 1;
foreach ($steplist as $step) {
if (is_int($oddcounter)) {
$oddcounter++;
$counter = $oddcounter;
}
else {
$evencounter--;
$counter = $evencounter;
}
if ((is_int($oddcounter) && $oddcounter > 0 && ($oddcounter % 5 == 0)) || (is_int($evencounter) && ($evencounter == 0))) {
$row++;
if ($row & 1) { // Odd row
$evencounter = false;
$oddcounter = 1;
$counter = $oddcounter;
}
else { // Even row
$evencounter = 4;
$oddcounter = false;
$counter = $evencounter;
}
}
$x = ($counter - 1) * 280;
$y = ($row - 1) * 100;
// Set status classes
switch ($step['status']) {
case 1:
$statusclass = ' active';
break;
case 2:
$statusclass = ' complete';
break;
case 0:
$statusclass = ' pending';
break;
}
$map .= '<div class="block draggable' . $statusclass . '" id="step' . $step['pgsid'] . '" style="left:' . $x . 'px; top:' . $y . 'px;"><p><strong>' . stripslashes(neat_trim($step['stepname'], 50, '...')) . '</strong><br />';
$map .= $step['assignee'] . '<br />';
($step['enddate'] != '') ? $map .= date('n/j/Y g:ia', strtotime($step['enddate'])) . '</p></div>' : $map .= '</p></div>';
if (isset($step['links'][0])) {
foreach ($step['links'] as $connection) {
$connectors .= '<div class="connector step' . $step['pgsid'] . ' step' . $connection . '">
<img src="/images/arrow.png" class="connector-end">
</div>';
}
}
}
}
Thanks in advance!

Whats the problem?
The $y Variable at the end of your loop contains the total height if you add the height of one element, which is in your case 68pixel (4.6875em)
Just print it out e.g. into a javascript variable.
echo '<script type="text/javascript">totalHeight = '.($y+68).';</script>';

position() and outerHeight() for the bottommost positioned element imply the height of the container; the just set it with height() or css('min-height: …').
Outputting the sum in PHP might work but remember PHP is "blind" to what actually shows on the client; maybe have PHP "guess" the height and then finish it in javascript.