En cours

Google Material Design and Infinite Scroll

So, I am using infinite scroll ([url removed, login to view]).

However when the main content is inside of "mdl-js-layout" the infinite scroll function does not work (shown below)

So, if I remove the `mdl-js-layout` in the most outer div, then infinite scroll works otherwise it does not work.

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-drawer">

<header class="mdl-layout__header">

Head

</head>

<main class="mdl-layout__content">

<div class="rfp_hide" id="rhm_post_show">

<?php

if ( get_query_var('paged') ) {

$paged = get_query_var('paged');

} elseif ( get_query_var('page') ) {

$paged = get_query_var('page');

} else {

$paged = 1;

}

$args = array(

'paged'=>$paged,

'posts_per_page' => 5,

'orderby' => 'date',

'order' => 'DESC'

);

$loop = new WP_Query( $args );

global $post, $paged;

while ( $loop->have_posts() ) : $loop->the_post();

?>

<div class="rhm_post_container">

Post

</div>

<?php endwhile; ?>

<?php wp_reset_postdata(); ?>

</div>

<nav id="rh_nav_below">

<ul>

<li class="rh_nav_previous"><?php previous_posts_link( '&laquo; PREV', $loop->max_num_pages) ?></li>

<li class="rh_nav_next"><?php next_posts_link( 'NEXT &raquo;', $loop->max_num_pages) ?></li>

</ul>

</nav>

</main>

</div>

<script>

var container = [url removed, login to view]('#rhm_post_show');

var msnry = new Masonry( container, {

// options

itemSelector: '.rhm_post_container',

gutter: 10

});

var ias = $.ias({

container: '#rhm_post_show',

item: '.rhm_post_container',

pagination: '#rh_nav_below',

next: '.rh_nav_next a',

delay: 100

});

[url removed, login to view]('render', function(items) {

$(items).css({ opacity: 0 });

});

[url removed, login to view]('rendered', function(items) {

[url removed, login to view](items);

});

[url removed, login to view](new IASSpinnerExtension());

[url removed, login to view](new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>You reached the end!</em></p></div>'}));

</script>

I asked the developer and got the following response:([url removed, login to view])

> MDL is targeting static content for now, so use-cases with infinite scroll are not supported by us right now. However, there are people who have made MDL work with dynamic sites and you can probably get valuable help by heading over to StackOverflow and using the material-design-lite tag.

Does anyone what I should try? If you think you can solve it, then please contact me for payment option.

Thanks!

Compétences : jQuery / Prototype, PHP

Voir plus : ul com, text em, material design css, infinite design, html 5 google sites, html 5 align, google material design lite, google js, google-docs.com, google docs.com, global response, global p, docs google com, google style text ads script, horizontal text scroll web design, change design infowindow google map, design path google maps, seo web design freelancing google adsense, design kart google sketchup, design specification google calendar, free mafia style text based scripts, scroll writing design, google maps api text box

Concernant l'employeur :
( 18 commentaires ) Calgary, Canada

N° du projet : #8516747

Décerné à :

thiagoloureiro88

I'm interested in the job and am ready to start working with you. If you are interested please contact me

25 $ CAD en 3 jours
(3 Commentaires)
1.8

1 freelance a fait une offre moyenne de 25 $ pour ce travail

gambanetwork

A proposal has not yet been provided

25 $ CAD en 1 jour
(1 Commentaire)
0.0