HTML HTML/JS/JQuery - Problema pulsante "load more"

[N1ketas]

Ciao ragazzi,

Premetto di non essere un grande esperto di Js, ma sto testando alcune cose su un sito in html/css/Js. Vorrei creare qualcosa di semplice per gestire la paginazione dei contenuti senza utilizzare linguaggi particolari. Ho provato ad aggiungere un pulsante "Carica più articoli".

I problemi che ho sono due.

1. Quando clicco sul bottone per caricare altri articoli mi compare solamente un articolo nonostante ogni click del bottone ne richiami 6. Se provo a ridimensionare la scheda compaiono gli altri articoli.

2. Quando clicco sul bottone per caricare gli articoli, l'unico articolo che viene caricato copre in parte il footer e non si adatta allo spazio.

Potete aiutarmi a risolvere questi due problemini? In allegato vi lascio il codice relativo o eventualmente potete trovare i file di test sulla repository github

Anteprima qui: https://n1ketas.github.io/test/

File qui: https://github.com/N1ketas/test

 

[_Daniele18]

Ciao, ho dato uno sguardo alla pagina web..
Analizzando il codice, ho notato che quando si preme il sul <div> "Load More" viene settato la proprietà css "display: block" a tutti quei <div> con classe "moreBox", cioè le "Stories".
Quindi i tuoi div sarebbero visibili agli utenti.

I problemi sono due:

• Il div "container" delle "stories" è settato in maniera errata rispetto a pagina. Mi riferisco al suo attributo css "height". Infatti se provi ad aumentare l'altezza del div "Container" allora vedrai in totale 6 <div class="...... moreBox">
• I div con classe "moreBox", cioè per intenderci, le "stories" hanno tutte un posizionamento assoluto rispetto al loro "Container", per cui nonostante riuscissi a risolvere il punto precedente, non risolveresti la situazione.

Secondo me la soluzione è la seguente:

Settare il posizionamento di ciascun div.moreBox a "relative". Così facendo potrai rimuovere l'attributo "height" al div "Container" poichè la sua altezza si regolerà rispetto al suo contenuto.

N.B.: ovviamente, riferendomi ai <div class="...... moreBox"> gli attributi "top", "right", "bottom", "left" devono essere tolti, al massimo usare "margin" e/o "padding"