Appending more views to a webview after scrolling down - javascript

I have some items, let's say 50, which are in HTML format. When the application starts I'm showing the first 10 items in a webview. After the user scrolls down to the 10th item I want to load the next 10 items.
Can anybody suggest me how to do achieve this. I've searched for this and found this link however it didn't work for me. Any help would be appreciated.
This is more look like facebook feed loading.But like in facebook we can use endless apdapter.But here the problem is i want to load items in a webview.Please give me some idea,how to do it.

After Struggling and searching a lot I got this answer please check.
So it will append the new document in the Html part with id question with the new Data
function appendText(extraStr) {
document.getElementById('question').innerHTML = document.getElementById('question').innerHTML + extraStr;
}

Related

How to update href links in all the html pages?

To explain, I have a blog website, It contains an Index page, which lists out the blogs to read, if I click on a blog it takes me to that blog page. The index page also has a Recent post tab in the navbar to take me to the recent blog.
Now, I have around 20 blogs which are stored in different html pages which also having the recent post tab in the navbar.
Now, how do I update the 'href' of Recent post on all the 20 blog html pages to the recent blog. It takes time manually to update and save them in all the 20 html documents.
I know this question isn't related to html specific thing, rather code management I suppose. All the help would be appreciated.
Thank you in advance.
Probably the best solution would be to pick some static site generator to learn.
If you want to do it with javascript, one solutions would be to create a single javascript file which generates links and then include that on every page.
most-recent-posts.js:
(function () {
var recentPosts = [
{
title: 'post title',
href: '/posts/title.html',
}
];
var containerElement = document.getElementById('most-recent-posts');
containerElement.innerHTML = recentPosts
.map(function (post) {
return '<li>'+post.title+'</li>'
})
.join('');
})();
And then adding something like this to all pages where you want to show the list:
<ul id="most-recent-posts"></ul>
<script src="most-recent-posts.js"></script>
What if you use a conditional statement. Something similar to if this HTML tag exists, let it be replaced by the newer HTML tag. Then just make sure that the script is running on all pages.

Where each variable is equal to spans content add class

The Question and Codes
I am struggling with the below code:
$('.rdsubs-mysubscriptions table tbody tr td a').each(function() {
var subItem = $(this).html();
//console.log(subItem);
var subItemStripped = subItem.substring(12);
console.log(subItemStripped);
$('body').find('span:contains("subItemStripped")').addClass('HELLO');
}); // end of each function
When I check the console for subItemStripped then it shows this:
Framework
Content
Slideshow
Which means (in my head at least ;-)) that for each span that is inside the body it should find one of these subItemStripped and where it finds a match it should add the class hello but this is not happening.
Actually, nothing is happening.
When I change this line:
$('body').find('span:contains("subItemStripped")').addClass('HELLO');
to
$('body').find('span:contains("Framework")').addClass('HELLO');
It works nicely. So am I putting the variable subItemStripped wrongly in there or has it something to do with the .each() function.
I tried the below things to make it work
With the above code I tried a couple of variations before I came here:
$('body').find('span:contains(subItemStripped)').addClass('HELLO');
$('body').find("span:contains('subItemStripped')").addClass('HELLO');
I also tried it with completely different sets of code I gathered from other SO posts but none of those worked. Why I don't know.
$("span").filter(function() {
return $(this).text() === subItemStripped;
}).addClass("hello");
$("span").filter(function() {
return $(this).text() === subItemStripped;
}).css("font-size", "6px");
Why do I need this
I know I don't have to explain why I need this but it could be useful in coming up with other great ideas if the above is not feasible.
I have a webpage and on that page is a menu filled with products that a user can download if he/she has access.
Each menu item has a span with the title in it. Those titles are built up like: Framework Content Slideshow
On this same page is also a component that shows all the users subscriptions.
With the above code, I look to all the subscriptions of the user. Which returns
CompanyName Framework CompanyName Content CompanyName Slideshow
Then I Strip .substring(12) all the parts that I know are not present inside the menu. Which leaves me with Framework Content Slideshow
At this point, I know that some menu titles and the stripped item are the same and for every match, I want to add a class upon which I can then add some CSS or whatnot.
Hopefully, the question is clear and thanks to everyone in advance for helping me out.
#gaetanoM You are completely right. Right after I posted the question I came on this site:
jQuery contains() with a variable syntax
And found the answer which is the same as you are saying!
$('body').find("span:contains('" + subItemStripped + "')").addClass('HELLO');
Thanks so much!
#gaetanoM Can you make your comment in an answer? Then I can select it as the accepted answer. I am answering this question now just to make sure it has an answer. As people get punished for asking questions that don't get answers.

How to use a random HTML file in JavaScript?

I'm having problems trying to figure this out, specifically because I'm really new to javascript. So, I have this place in my page where I want to have a random html file that I will make in html and I will like to link to it. I want it to be randomized every time the page refreshes, because I will do lots of these html files.
So, is this possible? I've searched for answers but all of the randomized html questions I've found are about the whole page. I just want a little part of the page to be randomized, similar to the random image I have in the same webpage.
The page I'm using for testing is this one: http://vannapruebas.jcink.net/ , I would like to use the toggle that says "búsquedas" for this. So, any help? thanks and exuse my poor english!
All you have to do is make a list of all your html, then you pick one randomly with -> Getting a random value from a JavaScript array.
I used jQuery just for easier demo
var listOfHTML = ["sample/your.html","sample/another.html"];
$('#magic').on('click',function(e){
var randomHTML = listOfHTML[Math.floor(Math.random()*listOfHTML.length)];
$.get(randomHTML,function(response){
$('#yourDiv').html(response);
//do your animation when completed
});
});
<div id="yourDiv"></div> <button id="magic">búsquedas</button>

How to make a div with dynamic content automatically scroll to the bottom?

I have googled around and found a few solutions to this problem, but none of them seem to work in my situation. I have tried hidden inputs to scroll to, that stay at the bottom
document.getElementById('scrollToMe').scrollIntoView();
I have tried
$("#postbox").scrollTop($("#postbox")[0].scrollHeight);
and a few others. Here is my situation
I have a chat room (http://novaplasm.topiacloud.com/Chat). When you type anything, it enters it into the div "postbox" using Knockout. Every time you enter new content, it appends it. I want to make it so you can always see the latest message, without having to scroll yourself. I can't seem to do this for the life of me. Thanks in advanced!
First get a reference to your postbox and chat message div
var pbox = $('#postbox');
var chat_div = $('<div></div>').attr('class', 'chat_msg').text(msg);
Here msg is your chat message
Then you have to scroll down using the 'animate' method like this
chat_div.appendTo(pbox);
var height = pbox.scrollTop() + pbox.height() + $('#postbox').filter('.chat_msg:last').scrollTop();
pbox.animate({'scrollTop' : height}, 1000);
Here the animation is happening over 1 sec.
Refer jQuery documentation for more detailed explanations on jQuery methods.
Live fiddle example

Auto pagination of set number of items (with auto scroll)

I am trying to find a jQuery script that will take list items and virtually paginate them into 9 items per page. I have seen similar scripts on Dynamic drive, but they do not auto-play.
For example: http://www.dynamicdrive.com/dynamicindex17/virtualpagination.htm
Demo #1 here is almost perfect if it auto-played with a slide or fade effect. Is there a script out there that does this? Or is it easy to modify this script?
Any help is appreciated!
Thanks.
"autoplay" as you described can be achieved with a setInterval. Now I dont know the internals of that script, but something sort of like this should work.
// New image every 3 seconds
setInterval(function() {
slideShowObj.next();
}, 3000);
Where "slideShowObject" is some object that has a next function that shows the next item. Filling in that middle line is up to you.

Categories