Author Topic: Infinite scroll items (Read 10072 times)

jungica · « **on:** January 28, 2013, 11:50:53 am »

Hi!

I have a solution for infinite scrolling items. This is for "modern" theme, but you can use on your own too...

1. step
Download this jquery plugin from here:
http://www.fieg.nl/wp-content/themes/fieg-b/js/jquery.ias.min.js

And upload into your theme js folder ( oc-content/themes/modern/js/ )

2. step
Open your search.php

Insert into <head> section:

Code: [Select]

<script type="text/javascript" src="<?php echo osc_current_web_theme_js_url('jquery.ias.min.js') ; ?>"></script>
And put this code at the and of the search.php, BEFORE the </body> tag:

Code: [Select]

				<script type="text/javascript">
					jQuery.ias({
						container : '.ad_list',
						item: '.myitem',
						pagination: '#main .paginate',
						next: '.searchPaginationNext',
						loader: '<?php echo osc_current_web_theme_url('images/loader.gif'); ?>'
						loaderDelay: 100,
						triggerPageTreshold: 3,
						trigger: 'More items',
						tresholdMargin: 0,
						history : true
					});
				</script>

Here is the options for jQuery.ias what you can modify in: https://github.com/webcreate/infinite-ajax-scroll
This is modifying your PAGINATION, so it must be use the pagination funcion in search.php!

Create your own ajax loader.gif if you want:

Code: [Select]

http://www.ajaxload.info/ and put into the theme image folder.

Now, the last step is to give your items a class (in this example .myitem)

modify search_list.php ( like this, important the div and class="myitem" )

Code: [Select]

<?php while(osc_has_items()) { ?>
<div class="myitem" onclick="location.href='<?php echo osc_item_url() ; ?>'" style="cursor:pointer;">
<table border="0" cellspacing="0">
    <tbody>
        <?php $class = "even" ; ?>
            <tr class="<?php echo $class; ?>">
                <?php if( osc_images_enabled_at_items() ) { ?>
                 <td class="photo">
                     <?php if(osc_count_item_resources()) { ?>
                        <img src="<?php echo osc_resource_thumbnail_url() ; ?>" width="100" height="80" title="<?php echo osc_item_title(); ?>" alt="<?php echo osc_item_title(); ?>" />
                    <?php } else { ?>
                        <img src="<?php echo osc_current_web_theme_url('images/no_photo.gif') ; ?>" title="" alt="" />
                    <?php } ?>
                 </td>
                 <?php } ?>
                 <td class="text">
					<strong style="font-size:11pt;text-transform: lowercase;margin-bottom:8px; background-color:#9CAF1E;-webkit-border-radius: 3px;border-radius: 3px;-moz-border-radius: 3px;padding: 1px 3px 2px;color:#fff;"><?php if( osc_price_enabled_at_items() ) { echo osc_item_formated_price() ; ?></strong>
                     <h3>
						  <span style="float:left;margin-top:4px;"><?php echo osc_highlight( strip_tags( osc_item_title() ) ); ?></span><span style="float:right;"><?php echo osc_item_category() ; ?></span>
                     </h3><br />
                     <p style="clear: left;">
                         <strong><?php } echo osc_item_city(); ?> (<?php echo osc_item_region(); ?>) - <?php echo osc_format_date(osc_item_pub_date()); ?></strong>
                     </p>
                     <p><?php echo osc_highlight( strip_tags( osc_item_description()),180 ) ; ?></p>
                 </td>
             </tr>
            <?php $class = ($class == 'even') ? 'odd' : 'even' ; ?>
    </tbody>
</table>
</div>
<?php } ?>

In your admin, set a number to show in Settings > General

Search page shows 5 listings at most.

And finally, edit your style.css, put into this:

Code: [Select]

.ias_loader, .ias_trigger {
	text-align:center;
	margin: 30px 0 40px;
}

.ias_trigger a:link,
.ias_trigger a:visited {
    padding: 4px 50px;

    background-color: #f9f9f9;
    border: solid 1px #ddd;
    border-radius: 2px;

    font: bold 12px Arial, sans-serif;
    color: #555;
    text-decoration: none;
}

.ias_trigger a:hover,
.ias_trigger a:active {
    border-color: #ccc;
}

Save, upload, refresh.
Done.

frosticek · « **Reply #1 on:** January 28, 2013, 01:25:06 pm »

Any demo there?

jungica · « **Reply #2 on:** January 28, 2013, 01:42:43 pm »

Quote from: frosticek on January 28, 2013, 01:25:06 pm

Any demo there?

Site is under development, we have now just 7 items to show:

Code: [Select]

http://www.trinexus.hu/apro/budapest-es-kornyeke-r1

frosticek · « **Reply #3 on:** January 29, 2013, 12:23:56 am »

@jungica

it seems great, but it little bit confused when you are between 2 sites, if you hold slider, it go down and up and down and up.... mr. shaker

jungica · « **Reply #4 on:** January 29, 2013, 11:20:34 am »

Quote from: frosticek on January 29, 2013, 12:23:56 am

@jungica

it seems great, but it little bit confused when you are between 2 sites, if you hold slider, it go down and up and down and up.... mr. shaker

read the jquery options: turn off history like "history : false"
done.

luisma22 · « **Reply #5 on:** January 31, 2013, 07:18:01 pm »

I did what you said and am not getting results.... any suggestion?

jungica · « **Reply #6 on:** January 31, 2013, 09:41:00 pm »

Quote from: luisma22 on January 31, 2013, 07:18:01 pm

I did what you said and am not getting results.... any suggestion?

can you link your site to diagnostic?

Legion · « **Reply #7 on:** January 31, 2013, 11:06:38 pm »

hi jungica

you have a wonderful site

thanks for
Infinite scroll items

but how to modify search_list.php where to put this code?

<?php while(osc_has_items()) { ?>
<div class="myitem" onclick="location.href='<?php echo osc_item_url() ; ?>'" style="cursor:pointer;">
<table border="0" cellspacing="0">
<tbody>
<?php $class = "even" ; ?>
<tr class="<?php echo $class; ?>">
<?php if( osc_images_enabled_at_items() ) { ?>
<td class="photo">
<?php if(osc_count_item_resources()) { ?>
<img src="<?php echo osc_resource_thumbnail_url() ; ?>" width="100" height="80" title="<?php echo osc_item_title(); ?>" alt="<?php echo osc_item_title(); ?>" />
<?php } else { ?>
<img src="<?php echo osc_current_web_theme_url('images/no_photo.gif') ; ?>" title="" alt="" />
<?php } ?>
</td>
<?php } ?>
<td class="text">
<strong style="font-size:11pt;text-transform: lowercase;margin-bottom:8px; background-color:#9CAF1E;-webkit-border-radius: 3px;border-radius: 3px;-moz-border-radius: 3px;padding: 1px 3px 2px;color:#fff;"><?php if( osc_price_enabled_at_items() ) { echo osc_item_formated_price() ; ?></strong>
<h3>
<span style="float:left;margin-top:4px;"><?php echo osc_highlight( strip_tags( osc_item_title() ) ); ?></span><span style="float:right;"><?php echo osc_item_category() ; ?></span>
</h3><br />
<p style="clear: left;">
<strong><?php } echo osc_item_city(); ?> (<?php echo osc_item_region(); ?>) - <?php echo osc_format_date(osc_item_pub_date()); ?></strong>
</p>
<p><?php echo osc_highlight( strip_tags( osc_item_description()),180 ) ; ?></p>
</td>
</tr>
<?php $class = ($class == 'even') ? 'odd' : 'even' ; ?>
</tbody>
</table>
</div>
<?php } ?>

luisma22 · « **Reply #8 on:** January 31, 2013, 11:31:06 pm »

Yes the site is www.baulia.com
do you want me to show the code?, I just the sames you used... and can't make it work

jungica · « **Reply #9 on:** January 31, 2013, 11:51:40 pm »

Quote from: luisma22 on January 31, 2013, 11:31:06 pm

Yes the site is www.baulia.com
do you want me to show the code?, I just the sames you used... and can't make it work

try this 2 modificatoin:

1. the

Code: [Select]

<script type="text/javascript" src="http://baulia.com/oc-content/themes/olxES/js/jquery.ias.min.js"></script>put after the jquery call not into the first line in header... put after this line:

Code: [Select]

<script type="text/javascript" src="http://baulia.com/oc-content/themes/olxES/js/tabber-minimized.js"></script>
2. the ias jquery javascript with the options is inside a <div>.
put exactly before the body closing tag </body> not into a div secion.

try this two steps and we will see...

jungica · « **Reply #10 on:** February 01, 2013, 12:01:37 am »

Quote from: Legion on January 31, 2013, 11:06:38 pm

but how to modify search_list.php where to put this code?

into search_list.php

take a look inside and you will see....
i changed the original structure a little bit, but here is the original version with this change, from line 54

Code: [Select]

<div class="myitem">
<table border="0" cellspacing="0">
    <tbody>
        <?php $class = "even" ; ?>
        <?php while(osc_has_items()) { ?>
            <tr class="<?php echo $class; ?>">
                <?php if( osc_images_enabled_at_items() ) { ?>
                 <td class="photo">
                     <?php if(osc_count_item_resources()) { ?>
                        <a href="<?php echo osc_item_url() ; ?>"><img src="<?php echo osc_resource_thumbnail_url() ; ?>" width="75" height="56" title="<?php echo osc_item_title(); ?>" alt="<?php echo osc_item_title(); ?>" /></a>
                    <?php } else { ?>
                        <img src="<?php echo osc_current_web_theme_url('images/no_photo.gif') ; ?>" title="" alt="" />
                    <?php } ?>
                 </td>
                 <?php } ?>
                 <td class="text">
                     <h3>
                         <a href="<?php echo osc_item_url() ; ?>"><?php echo osc_highlight( strip_tags( osc_item_title() ) ); ?></a>
                     </h3>
                     <p>
                         <strong><?php if( osc_price_enabled_at_items() ) { echo osc_item_formated_price() ; ?> - <?php } echo osc_item_city(); ?> (<?php echo osc_item_region(); ?>) - <?php echo osc_format_date(osc_item_pub_date()); ?></strong>
                     </p>
                     <p><?php echo osc_highlight( strip_tags( osc_item_description() ) ) ; ?></p>
                 </td>
             </tr>
            <?php $class = ($class == 'even') ? 'odd' : 'even' ; ?>
        <?php } ?>
    </tbody>
</table>
</div>

modification just the first and last line (div by class=myitem)

luisma22 · « **Reply #11 on:** February 01, 2013, 12:08:04 am »

I tried adding
<script type="text/javascript" src="http://baulia.com/oc-content/themes/olxES/js/jquery.ias.min.js"></script>

after the jquerry call and:

<script type="text/javascript" src="http://baulia.com/oc-content/themes/olxES/js/tabber-minimized.js"></script>

in the header and nothing,
I changed the sear_list.php and neither and I didn't understand the thing you said of the div... sorry, any suggestion?

Legion · « **Reply #12 on:** February 01, 2013, 12:10:47 am »

i did not get it look at my search list
thanks

jungica · « **Reply #13 on:** February 01, 2013, 12:33:33 pm »

Quote from: luisma22 on February 01, 2013, 12:08:04 am

I tried adding
<script type="text/javascript" src="http://baulia.com/oc-content/themes/olxES/js/jquery.ias.min.js"></script>

after the jquerry call and:

<script type="text/javascript" src="http://baulia.com/oc-content/themes/olxES/js/tabber-minimized.js"></script>

in the header and nothing,
I changed the sear_list.php and neither and I didn't understand the thing you said of the div... sorry, any suggestion?

i can't see the jquery.ias.min.js link in your header... please add the line into it!

Code: [Select]

view-source:http://baulia.com/index.php?page=search&sCategory=4

jungica · « **Reply #14 on:** February 01, 2013, 12:38:37 pm »

Quote from: Legion on February 01, 2013, 12:10:47 am

i did not get it look at my search list
thanks

you don't have to change your search_list.php because your items in a div already (line 64: <div class="item-list"> )
but change the ias javascript like this:

Code: [Select]

				<script type="text/javascript">
					jQuery.ias({
						container : '.ad_list',
						item: '.item-list',
						pagination: '#main .paginate',
						next: '.searchPaginationNext',
						loader: '<?php echo osc_current_web_theme_url('images/loader.gif'); ?>'
						loaderDelay: 100,
						triggerPageTreshold: 3,
						trigger: 'More items',
						tresholdMargin: 0,
						history : false
					});
				</script>

do you understand the difference? in line 4?

Osclass forums

News:

Author Topic: Infinite scroll items (Read 10072 times)

jungica

Infinite scroll items

frosticek

Re: Infinite scroll items

jungica

Re: Infinite scroll items

frosticek

Re: Infinite scroll items

jungica

Re: Infinite scroll items

luisma22

Re: Infinite scroll items

jungica

Re: Infinite scroll items

Legion

Re: Infinite scroll items

luisma22

Re: Infinite scroll items

jungica

Re: Infinite scroll items

jungica

Re: Infinite scroll items

luisma22

Re: Infinite scroll items

Legion

Re: Infinite scroll items

jungica

Re: Infinite scroll items

jungica

Re: Infinite scroll items