Ladda 10 till på ul list

[moztwanted]

Var hälsad främling!

 

Jag sitter och håller på med en ul lista som ser ut som följande:

<ul>

<li><a href="#"><img src"#"></a></li>

</ul>

 

Listan innehåller mer än 200 objekt, med länk och bilder (thumbs).

 

Drömmen vore att ha en lista där den visar 10 objekt och en knapp nedanför där man kan klicka att den visar 10 objekt till:

 

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

<li>10</li>

 

#### Visa 10 till ####

 

osv...

 

Jag behöver endast ha en "visa 10 till" funktion, ingen "dölj" och skälet till att jag söker ett svar här är att jag trots en hel del google sökningar o tester inte hittat en simpel funktion så undrar självklart om just DU, vet ett smidigt sätt att ha en funktion jag efterfrågar?

 

 

 

 

[Jonas__B]

Det finns lite olika sätt - den vanliga orsaken varför man döljer från början är att man vill minska lasten på sidan och ladda in på begäran av användaren.

Vid klick så hämtar scriptet data från en annan sida och lägger in i listan.

En annan metod är att informationen redan ligger där men göms med css - och scriptet kan visa informationen då användaren klickar.

 

Detta medför därför till följdfrågor: kan du hämta information om 10 nästa bilder genom ett ajaxanrop till en sida?
Urlen skulle eventuellt leda till "getnextimages.php?skip=10"

Den sidan levererar en array - eller jsonobjekt på 10 nästkommande bilder som läggs till i listan.

Om scriptet lyckats att hämta och lägga in, ändrar man på urlen till skip=20

[moztwanted]

Hejsan igen.
 
 
Tyvärr så kan jag inte använda mig av en databas - det är den enda begränsningen jag har.... Annars så funderade jag på att ha ul listan delad i olika sidor dvs.  sida-1, sida-2, sida-3 etc.
 
Snubblade förbi detta nyss:
http://www.joshuawinn.com/maximum-list-items-jquery-hide-after-x-number-bullets/ MEN problemet där är att den visar resten av alla 180+ ul list - items om jag valt att endast visa 20 och ha en "visa fler (180)...
 
Skulle behöva få den att funka lite som i mitt huvud dvs.
 
<ul class="first">
<li>1...</li>
<li>2...</li>
<li>3...</li>
<li>4...</li>
<li>5...</li>
###visa fler (180)### (efter klick visar den 5 till dvs.

<li>6...</li>
<li>7...</li>
<li>8...</li>
<li>9...</li>
<li>10...</li>
###visa fler (175)### (efter klick visar den 5

Och inte som den nu gör när den visar alla objekt...

Jag är inte så van vid js men sitter i skrivande stund och googlar på om man kan lägga till något i js -filen för att begränsa vad den visar, bifogar js här, ifall någon vet vad man kan lägga till/ändra för att få den att funka...

Om det ens är möjligt med andra ord


 

[moztwanted]

$(document).ready(function() {

$('#content ol').hideMaxListItems();

$('#content ul.first').hideMaxListItems({ 'max':1, 'speed':500, 'moreText':'Ladda fler ([COUNT])' });

$('#content ul.second').hideMaxListItems({

'max':1,

'speed':2000,

'moreText':'MORE OF THEM',

'lessText':'READ more <em>Can Use HTML</em>',

'moreHTML': '<div class="maxlist-more"><a href="#"></a></div>'

 

 

// HIDE MAX LIST ITEMS JQUERY PLUGIN

// Version: 1.36

// Author: Josh Winn

// Website: www.joshuawinn.com

// Usage: Free and Open Source. WTFPL: http://sam.zoy.org/wtfpl/

(function($){

$.fn.extend({

hideMaxListItems: function(options)

{

// OPTIONS

var defaults = {

max: 3,

speed: 1000,

moreText:'READ MORE',

lessText:'READ LESS',

moreHTML:'<p class="maxlist-more"><a href="#"></a></p>', // requires class and child <a>

};

var options = $.extend(defaults, options);

 

// FOR EACH MATCHED ELEMENT

return this.each(function() {

var $thisList = $(this);

var op = options;

var totalListItems = $thisList.children("li").length;

var speedPerLI;

 

// Get animation speed per LI; Divide the total speed by num of LIs.

// Avoid dividing by 0 and make it at least 1 for small numbers.

if ( totalListItems > 0 && op.speed > 0 ){

speedPerLI = Math.round( op.speed / totalListItems );

if ( speedPerLI < 1 ) { speedPerLI = 1; }

} else {

speedPerLI = 0;

}

 

// If list has more than the "max" option

if ( (totalListItems > 0) && (totalListItems > op.max) )

{

// Initial Page Load: Hide each LI element over the max

$thisList.children("li").each(function(index){

if ( (index+1) > op.max ) {

$(this).hide(0);

} else {

$(this).show(0);

}

});

 

// Replace [COUNT] in "moreText" or "lessText" with number of items beyond max

var howManyMore = totalListItems - op.max;

var newMoreText = op.moreText;

var newLessText = op.lessText;

 

if ( howManyMore > 0 ){

newMoreText = newMoreText.replace("[COUNT]", howManyMore);

newLessText = newLessText.replace("[COUNT]", howManyMore);

}

 

// Add "Read More" button, or unhide it if it already exists

if ( $thisList.next(".maxlist-more").length > 0 ){

$thisList.next(".maxlist-more").show();

} else {

$thisList.after(op.moreHTML);

}

 

// READ MORE - add text within button, register click event that slides the items up and down

$thisList.next(".maxlist-more")

.children("a")

.html(newMoreText)

.off('click')

.on("click", function(e){

var $theLink = $(this);

 

// Get array of children past the maximum option

var listElements = $theLink.parent().prev("ul, ol").children("li");

listElements = listElements.slice(op.max);

 

// Sequentially slideToggle the list items

// For more info on this awesome function: http://goo.gl/dW0nM

if ( $theLink.html() == newMoreText ){

$(this).html(newLessText);

var i = 0;

(function() { $(listElements[i++] || []).slideToggle(speedPerLI,arguments.callee); })();

}

else {

$theLink.html(newMoreText);

var i = listElements.length - 1;

(function() { $(listElements[i--] || []).slideToggle(speedPerLI,arguments.callee); })();

}

 

// Prevent Default Click Behavior (Scrolling)

e.preventDefault();

});

}

else {

// LIST HAS LESS THAN THE MAX

// Hide "Read More" button if it's there

if ( $thisList.next(".maxlist-more").length > 0 ){

$thisList.next(".maxlist-more").hide();

}

// Show all list items that may have been hidden

$thisList.children("li").each(function(index){

$(this).show(0);

});

}

});

}

});

})(jQuery); // End jQuery Plugin

[moztwanted]

Pardon att jag inte lägger in koden snyggare här, Min laptop kombinerat med IE = Problematiskt att skapa inlägg här

[ChromaWoods]

Något sådant?

http://jsbin.com/huvazi/edit?html,css,js,output

 

EDIT: Kanske ska förklara vad som händer också..

 

Funktionen showMore tar listans poster, en trigger (i detta fall en knapp) och hur många som ska viass i ett svep. Den lägger start-index som ett data-attribut på knappen och räknar upp den varje gång, och sen körs en jQuery slice för att ta fram rätt räcka av poster i listan. När sidan laddas körs funktionen en gång för att ta fram de första posterna. De är dolda m.hj av CSS från början.

[moztwanted]

Stort tack CromaWoods för en supersmidig och jättebra lösning på frågan!

[moztwanted]

Hoj, koden funkar perfekt och listan laddas snyggt men jag har en följdfråga på den: kan man på något sätt använda sig av en sökruta för att söka igenom hela listan och visa resultaten som är "dolda"?

 

Jag har provat mig fram med en hel del snygga sökfunktioner, men sökningarna begränsas alltid till den synliga delen av ul listan, ingenting från under "ladda 10 till" dyker upp på resultaten, är helt logiskt att den inte kan visa dem när man ändå dolt dem under ladda fler resultat men måste ändå passa på och fråga