Develop Reference

Solution for hyphen word [duplicate]

This question already has answers here:
Regex to match words with hyphens and/or apostrophes
(7 answers)
Closed 4 months ago.
I am wondering about this case:
Is it possible to do something like that?
if word, for example co-worker is hyphen, jquery can take detect and take word and replace with class inside?
Example:
<span class="hyphenated-word">co-worker</span>
I think something about preg.replace function, but not sure how to detect word.
Can anybody give me a tip for this?

You could use a regex to detect any hyphenated word:
function highlightHyphenated(element) {
// Regular expression matching any group composed by:
// - `[A-Za-zÀ-ÖØ-öø-ÿ]+` one or more letters (including accented ones), followed by
// - `-` a hyphen, followed by
// - `[A-Za-zÀ-ÖØ-öø-ÿ]+` one or more letters (including accented ones)
const re = /([A-Za-zÀ-ÖØ-öø-ÿ]+-[A-Za-zÀ-ÖØ-öø-ÿ]+)/gim;
if (re.test(element.innerText)) {
element.innerHTML = element.innerHTML.replace(re, '<span class="hyphenated">$1</span>');
}
}
document.querySelectorAll('p').forEach(el => highlightHyphenated(el));
.hyphenated {
display: inline-block;
background-color: yellow;
font-weight: bold;
}
<p>Lorem ipsum dolor sit-amet, consectetur adipiscing elit. Etiam orci tortor, aliquet quis mollis in, posuere id ipsum. Vestibulum quis nibh augue. Sed id congue ex. Suspendisse eget elit fringilla, commodo mi vitae, luctus odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus quam vitae leo eleifend, a laoreet neque varius. Morbi quis posuere risus, at scelerisque dui. Morbi sit amet lorem purus. Pellentesque auctor ut libero sed tempor. Integer vitae erat id leo porttitor blandit. Duis cursus lacus quis mauris facilisis, dapibus auctor nisl feugiat. Donec consectetur dolor eu suscipit aliquam. Fusce magna ante, luctus a arcu at, volutpat blandit tortor. Vivamus bibendum sem id mauris dapibus, et ultricies elit fermentum. Aliquam eu efficitur ipsum. Pellentesque eu velit ipsum.</p>
<p>Sed-fermentum lorem a ipsum sodales, vel vestibulum odio hendrerit. Aenean auctor ipsum in urna finibus, eu vulputate massa rutrum. Curabitur id eros pulvinar, dapibus justo nec, euismod sem. Ut ornare turpis velit, non aliquet est rhoncus eu. Etiam ex dolor, congue eleifend nisl eget, tempus dictum nulla. Integer ultricies enim eu mattis sagittis. Aliquam malesuada condimentum semper. Aliquam erat volutpat. Integer in dapibus sapien, tempor venenatis nisi. Curabitur eget sapien vitae nisi pulvinar volutpat aliquet ut augue. Cras pretium congue est, at pulvinar velit egestas vitae. Pellentesque non dui et urna posuere mattis.</p>
<p>Fusce consectetur vel purus a rutrum. Nulla vitae-metus nec eros facilisis porta. Ut quis sem ac nibh finibus porta egestas ac neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque sagittis nisl ante, vel placerat dui fermentum eu. Quisque placerat placerat neque. Nullam vel euismod nisl. Nullam aliquet enim vitae odio ultricies tincidunt. Nullam sagittis arcu at eleifend commodo. In hac habitasse platea dictumst. Nunc nibh lacus, pharetra nec sapien quis, congue pharetra felis. Vivamus porta, ex et convallis sagittis, ex dui porttitor augue, et tempus neque risus quis diam. Morbi eget leo lectus.</p>
<p>Sed at justo euismod, luctus lorem ut, dignissim libero. Curabitur vel auctor neque, vel ultrices nulla. Duis in aliquet-ligula. Aliquam sed est nisl. Aliquam enim orci, congue eget erat sed, imperdiet pharetra est. Fusce efficitur a tortor-nec fringilla. Sed sed tempus tellus, efficitur ornare lorem. Proin risus sem, mollis et lectus nec, rhoncus accumsan magna. Mauris hendrerit ligula eu est pretium, id bibendum ante tincidunt. Nam cursus vehicula diam, in eleifend magna blandit at. Vestibulum sit amet bibendum elit.</p>
<p>Donec magna est, placerat in vehicula eget, convallis non metus. Proin posuere ultricies neque a scelerisque. Quisque eu ex quis magna varius-vulputate. Sed venenatis dapibus iaculis. Cras lacinia ex et ante mollis, et condimentum ante porta. Sed tempus diam at fringilla condimentum. Aenean est ex, sollicitudin at blandit ac, dapibus eu mauris. Sed a tincidunt arcu. Maecenas sagittis cursus eros, ut commodo neque maximus id. Aenean accumsan purus eu tortor eleifend, vel volutpat turpis tempus. Vestibulum et metus non eros rhoncus placerat. Donec congue enim libero. Cras placerat, urna eu tincidunt aliquam, nisl odio viverra felis, id volutpat ipsum libero a leo.</p>
If you do not care about accented letters, you can replace [A-Za-zÀ-ÖØ-öø-ÿ]+ with [A-Za-z]+

Top Tab Navigator height problem when wrapped in ScrollView

I have this basic Tab component wrapped in a ScrollView:
const MyTab = () => {
return (
<ScrollView>
<View style={{flex:1}}>
<Tab.Navigator
initialRouteName="GeneralInformations"
>
<Tab.Screen name="GeneralInformations" component={LoremIpsum} />
<Tab.Screen name="TransactionsTab" component={LoremIpsum} />
</Tab.Navigator>
</View>
</ScrollView>
)
}
Each screen have this basic View component:
const LoremIpsum = () => (
<View>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum augue a mi semper, et aliquet arcu tempor. Suspendisse ante nunc, iaculis quis purus nec, consectetur molestie nibh. Etiam non ex facilisis, placerat erat vitae, blandit eros. Pellentesque ac posuere urna. Vivamus tempor diam a condimentum gravida. Ut et placerat justo. Duis a rutrum odio. Nulla sed dolor rhoncus, vestibulum velit eget, cursus neque. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque interdum magna a fermentum efficitur. Nunc non tellus vitae leo luctus dignissim.
Integer laoreet suscipit sem id ullamcorper. Aliquam euismod sodales nisl sit amet imperdiet. Praesent fermentum magna tellus, nec tristique quam fringilla sit amet. Sed ut risus non urna congue maximus. Sed eros leo, dictum eget metus vitae, laoreet porttitor leo. Nullam sed lacinia neque. Nulla facilisi. Vestibulum vel aliquam elit, et faucibus lorem. Sed sit amet tincidunt eros.
Proin imperdiet orci vel accumsan pharetra. Quisque nec lorem nec purus cursus feugiat at ac lorem. Sed luctus porttitor ante, a mollis dui facilisis non. Mauris venenatis ultricies nisi sed ornare. In a volutpat ex. Quisque at arcu a ante vestibulum pellentesque. Morbi eu semper sem, eu imperdiet odio. Etiam non eleifend ligula. Phasellus gravida tellus a ligula efficitur feugiat. Nulla ligula mauris, consequat ac mollis in, tincidunt aliquet sapien. Suspendisse ultricies quam ac velit ultricies mattis.
Sed dictum semper pellentesque. Donec ultricies diam a justo consectetur tincidunt. Fusce cursus dignissim nisi. Aliquam ut commodo nulla, non fringilla risus. Donec egestas massa et ligula accumsan, at condimentum ex pellentesque. In non interdum sapien, sed efficitur libero. Nulla eu neque eleifend, sodales risus ac, dictum sapien. Sed molestie quam sit amet lacinia vehicula. Suspendisse pellentesque maximus libero quis laoreet. Sed vel nisl non magna feugiat lobortis. Proin ac dui sit amet dolor pulvinar placerat. Nam quis sem eu mi vulputate ornare. In rhoncus nunc vitae nibh fringilla maximus.
Nullam ornare volutpat vulputate. Praesent quis purus sem. Duis facilisis, ipsum sit amet efficitur finibus, turpis velit molestie sapien, eget commodo sapien nisi et massa. In enim mauris, sollicitudin eu est non, elementum mollis turpis. Maecenas mauris magna, sodales sed odio sit amet, consequat feugiat sapien. Cras blandit non massa non dictum. Vestibulum finibus eu felis sed sollicitudin. Aliquam dignissim semper felis, vel lacinia augue egestas nec. Curabitur gravida, lacus non mattis mattis, lectus leo lacinia ante, eu laoreet erat sem ut ex. Fusce ante orci, aliquet nec mi ac, tincidunt semper est. Quisque lobortis, ante viverra lacinia gravida, ipsum nisl ornare enim, vitae sollicitudin libero tellus nec ligula. Cras ultrices metus eget ex faucibus, sed sodales est pretium. Cras ac purus enim. Sed dui dolor, porttitor non odio vel, efficitur sagittis diam. Mauris malesuada libero vitae purus rhoncus ornare. Quisque turpis mi, ullamcorper eget felis ac, molestie aliquam lectus.
Maecenas nulla lacus, ornare vitae mauris ut, placerat porta augue. Mauris eget ullamcorper tellus. Mauris accumsan lacus eu diam tincidunt tincidunt. Vestibulum accumsan ultricies purus, nec pretium eros ultrices ut. Morbi facilisis at est vel hendrerit. Nunc justo orci, tincidunt in condimentum eu, consectetur quis tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sit amet sem varius, convallis ante non, semper mauris. Maecenas aliquet aliquet justo, a aliquam nunc. Suspendisse dignissim, tortor nec imperdiet condimentum, mauris purus malesuada enim, at mattis arcu felis at dui. Maecenas vitae lacus tincidunt, commodo massa ut, feugiat diam. Nam elementum quam vitae enim rhoncus tempor. Phasellus sit amet placerat quam. Cras dolor erat, sollicitudin a metus vel, aliquet commodo neque.
Cras vel pellentesque ipsum. Fusce et dictum augue. Quisque vulputate in purus quis molestie. Proin id nunc aliquet, blandit tortor ut, tristique lectus. Aliquam malesuada nulla a leo varius ullamcorper. Nam aliquet semper lorem et vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus sagittis, mauris id lobortis mattis, ligula ante tincidunt nisi, sodales imperdiet leo mi et nisl. Curabitur consectetur mollis tortor, ut tincidunt augue aliquet sed.
</Text>
</View>
)
But the default behavior is that the components don't show up:
However, if I manually set the height of the parent View (that wraps my Tab.Navigator component) the components starts to show up, but not the entire component, just as much as the height value. Ex, if I set height:500:
Set height:'100%' also doesn't work either because it only shows up to the height of the screen, but the component is bigger than it.
I need to show the entire LoremIpsum component, and I need the ScrollView to work. The only way I got it is by manually setting the height (as I said before) but I want to use components with different heights.
I really need to use this ScrollView parent... anyone know what is this?

Realm string compression

I am trying to store long strings in Realm (possibly exceeding their 16MB limit). To reduce their size I am attempting to use the lz-string tool to achieve this. However, when I attempt to store the string into Realm I am getting the following error:
[Error: basic_string::resize]
Here is the text before compression:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a ex quis lacus hendrerit sodales vitae nec leo. Vivamus imperdiet nisi eu quam condimentum, nec porttitor magna blandit. Mauris arcu leo, euismod sed tortor id, elementum congue nibh. Aliquam erat volutpat. Donec tempor magna eget ultricies vestibulum. Morbi ac turpis aliquet nibh rutrum auctor vitae id quam. Maecenas vel nunc erat. Vestibulum vulputate mauris at neque faucibus iaculis. Vivamus luctus, nunc quis maximus pellentesque, nisl sapien consequat sapien, id vestibulum nulla quam sit amet metus. Aliquam vel varius erat.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam fermentum sit amet lectus quis pharetra. Duis tempor pretium mi quis dapibus. Donec lobortis justo ex. Maecenas dapibus odio non urna maximus pretium. Vivamus et convallis odio.
Sed sed molestie lectus. Nam et diam et lectus sagittis sagittis ornare et sem. Quisque consequat nunc eu libero hendrerit pharetra. Aliquam ac tempus massa. Donec sed dolor tristique, consectetur nunc nec, fringilla orci. Proin lobortis ipsum vel lorem aliquet posuere. Praesent dapibus metus iaculis, aliquet tortor eget, blandit sem. Vivamus eleifend consectetur ullamcorper. Suspendisse elementum diam libero, eu vestibulum arcu sagittis nec. Etiam at pellentesque augue, vel iaculis dolor. Cras quis dictum urna. Ut ultricies aliquet arcu a porttitor. In vel purus eget ex mattis porttitor ut congue massa. Duis sagittis nisl elit, id mattis magna pulvinar a.
Integer ac rhoncus purus. Ut vitae orci eros. Curabitur ullamcorper massa id risus efficitur, et laoreet ex consequat. Nunc nec suscipit est. Phasellus ac est ex. Etiam odio erat, ultrices in fermentum in, pretium non justo. Phasellus posuere nisl eu odio placerat, quis luctus arcu auctor. Nunc eu ligula sem. Nam non pharetra nisl. Suspendisse congue augue hendrerit, sagittis ex quis, mattis est. Aenean sed nibh vel sem tincidunt gravida vel vitae mauris. Morbi a dui sed lorem tristique accumsan ac at neque. Donec nec enim nulla.
Nullam vitae aliquam leo, eu auctor diam. Suspendisse a venenatis orci. Proin ut tellus eleifend, finibus erat non, egestas tortor. Phasellus sed augue pulvinar, porta arcu sed, luctus felis. Suspendisse at gravida felis, eu tempus lectus. Phasellus imperdiet enim eget vulputate facilisis. Nunc magna tellus, condimentum non elementum eu, faucibus et mi. Morbi nec nisl et purus sollicitudin mollis. Nam eget arcu vitae nisl tincidunt tristique id sed est. Nulla lobortis diam hendrerit nunc pretium varius eu a lectus.
And here is the text after compression:
᐀⌠搞삜ᓀ똠▀ᰌ␄쨁떄疐ׄČ᎔聨䀘쨀臒泆䩳奴ඓ『戎㸲è䀀冁丛曤⮈Ǣ#ꘁ⇰偩鴈\u0016熘ಱ⠸⯢刀ᮙ䔡鮷휊ಀ櫈⹔온ࢨ瀰簴鸂죢飚顔谬糔⫘ఠꢰ꒤摄ࠔ⋌樀䘆雒 눔�ᐰ䘾僴為瀸₤Մ져嵎ᦤ�ꊘ炱閦㈀芒㨩鄔Ҙ꒨㬲"Ⳟ鳡╥ᗢ∱飸ꐶ䋎⹊䖕还㋵낕ホ誁桬ᛤ昲ᥢƀ᳡䠦蜈蛥⁹왉⨯텀산偌➓೅쭭䠁ྴ㯤腲㵐ܝꋔ곑ロ㱰ᴢ쀆撎꒙邆䞀耤ᄈ駰頎㆛≍죨甲Ċႋ⨥᜻•➠⢠謜춉뜠᪍챺ؽ褚딦줂䕓凈ợ᫜ኔ⚹嫈傹⩀ؐ㎠�上顨挣에倡ᐝΥ訊憬஛ᢈ챌-䳅似⣴ˊᒗڎꛌ⪼澝̠ω뗢섛⡂ꈲ錌咮发䜘ೆ셤㣨沾㜗㶇趐䙉䦕囙\u0001䒊⥮摚欳癐㴾楉腝㴲둨੓轘梇죱僰⊬섏ှ 訉簇駃鏨倥䁑ᖱ舰棘묇袘ⁿ∃�ᐉ‷ୱ⨪骫句ࠨ갓㤄嬄᪞超㠂얀2ꃀㄌ紓蝫₋ᎇ磈\u001c雎䇰順袆䄔뉙䂦㄰ՏÑ̅ሀ㴠髉␧⠤馥䤒▍拘ꠓ븠㫌肺鐮䥰㉻븠檜䛁౸℃쌼ȑ䎨髬✁묖ꒇ⃃태越⌠亖ᗘ죲ᐌ⅁ぬꁘⴡ⅁⸈쓹ᘉᇀ奂蒠⻀憩蕺ʐꤠ꺔╞䂌뎑܃�ࠍ偐딹ꢂ凢뢄枥蔔灜༈ࠓ̀ᘲ㬜恄딤械䢈˫㉉䠤腤삝ᦛ毚銢⛒⑲䪒惤㈱⋤㪩ꬮ莓䈠⳴㾨⣮鎁଀좡芏箾簴ꒂᄔಀʫ邏ᡚ㵥ࣶ偹ń凵㈀ब슸ꕃ✊蹃䚂ʔ蔞藺㍽䄛䒰胳⏧⌠ৎ﬽賫힨쵤㖣쓬詽㍱ꠌ븆鐔蛄胊�쏜㰐⌂頬ᆍ㭰�ڎ룮⋋Ĉ큺蛜Ԁ࡮ꭕƴ횥⑦ꁢ㘖਻狜뛦䍰崹b쁰ేɨ虧ⱦ覦搕ꂹDZ敏鬁ꪄ䂇첅ḧ鈄왛㬽ƌ볎⹖磀ធణ噤泎宓࡝꟡좩쒋렓㕆锋ꁄ띅藰롪bピي瞮㻑⋄젂⚙緤蠌ᡚ梒鏗礃鋹険뛛둘厛ܲ玔☂罙嘤䨯჊悷䰾㤯⟎䖇ƍ�쩠叺ꈌ㌈䈇爂—ᮀ瀿쓙ꈮ櫉縿쐄쁗䉿Ⴇﳂ뼗兀ࣀ 乌脻⋰岏쩁䠡恕⎠お�ꬪἼ鴭┶�쬤玫≁鹄೩޵ྡྷ썐쏶唤⇪蹗☇ϳꝑ쬵섀뻊ᆁ˩ࡘᝇ롶鼐ꌀ厾⍮ꄐ⪟Ꮻⷥꭆ갅ൂ둶蠕ਢ䂊ဃ둸䇰၇�肊ข퐙氣傄⑤麋仭앐ᙨ蒜ꄒКㄎ鏠ن褸ʏ貝姇콸긹渧ڑ뎤Ꭴ耷釔급ऩᘹ逜ঀ⫄ứ꒩ꆈₒࡀ찾ํ碧卞魘쒊蠼㝲⑅ᒓ豠ᰱ㶄偘⠈愘韫䉗ꄇ쪒쳩頃䲼凼㐜蠆廊㧘璖\u0000
According to the demo on the site above, the text is 5430 bytes before compression and 1480 bytes afterwards, clearly well under 16MB in both cases.
Not sure if the website is implying that only the default JS local storage implementation is supported from the way it refers to local storage. Other than that, has anyone tried using this compresison tool with Realm and gotten it to work? Or seen this error?

Having read the API, I realised that the compress(string) method returns an "invalid" UTF-16 string. Using compressToUTF16(string)/compressToBase64(string) and their respective decompress methods do not give the error (although the former is not working for me but that's a separate issue).

Reveal image as user scrolls down

I was checking this website: http://www.flagofplanetearth.com/
You can see, the images reveal more as you scroll down.
I have seen such an effect on only a few other websites and was wondering how it is done. I don't even know what it's called so couldn't really search for it.
Thanks.

It's called a parralax effect.
Here's a great documentation on how it works
Cheers!

That's a parallax effect.
Simple method: (fixed image)
.parallax {
background-attachment: fixed;
}
Advanced method: (what you saw)
1) Use same CSS
2) Use the following JS:
var parallax = document.getElementById('parallax');
window.addEventListener('scroll', function() {
var ypos = window.pageYOffset;
parallax.style.backgroundPositionY = (ypos * -0.5) + "px";
});
Check out this:
var parallax = document.getElementById('parallax');
window.addEventListener('scroll', function() {
var ypos = window.pageYOffset;
parallax.style.backgroundPositionY = (ypos * -0.5) + "px";
});
#parallax {
background-image: url('http://lorempixel.com/400/400/abstract/');
background-attachment: fixed;
min-height: 400px;
}
<div id="parallax"></div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et arcu est. Praesent nec lacinia mi. Nulla augue erat, egestas at tortor et, gravida aliquet erat. Proin in rutrum velit. Vestibulum volutpat, leo et rutrum gravida, mauris urna malesuada justo, ut condimentum diam neque non nisi. Aenean malesuada, nisi non dapibus imperdiet, leo libero iaculis dolor, in convallis augue ante nec urna. Suspendisse vulputate vel ex dictum aliquet. Aliquam dapibus scelerisque dapibus. In ut lorem a leo feugiat iaculis cursus sit amet lectus. Integer id ante sed mi egestas tincidunt. Duis maximus augue eu ipsum ultrices dictum.
<br><br>
Proin eget enim auctor, vehicula dui eget, vulputate leo. Donec pulvinar diam interdum, vulputate erat nec, blandit risus. Fusce tristique velit libero, porttitor egestas libero feugiat ullamcorper. Maecenas bibendum tristique efficitur. Cras fringilla ac eros nec iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ut sapien molestie, molestie magna nec, consectetur velit. Etiam vestibulum pretium quam ac imperdiet. Nullam quis nisl eget felis vestibulum bibendum nec id velit. In vel commodo nisi, nec euismod quam. Duis ultrices pretium imperdiet.
<br><br>
Pellentesque quis velit lectus. Morbi id tincidunt libero. Fusce id convallis nulla, sed porttitor eros. Morbi eget libero vel mi efficitur placerat. Fusce sed commodo ex. Nulla gravida enim et elementum fringilla. Vestibulum arcu dui, suscipit ut mauris ut, iaculis aliquam tellus. Praesent in volutpat justo. Morbi volutpat metus at magna rhoncus, in molestie odio vestibulum. In vel euismod nibh. Phasellus ac dictum velit. Donec tincidunt lacus a diam tempor luctus ac ut eros. Etiam condimentum nunc in ex malesuada vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<br><br>
Fusce tortor magna, fringilla sit amet dignissim in, euismod quis augue. Phasellus egestas erat eu pellentesque blandit. Vivamus vitae pellentesque arcu. Quisque commodo, leo sed auctor tincidunt, erat sem blandit nulla, quis vestibulum magna lorem sed tellus. Suspendisse ultricies hendrerit eleifend. Cras viverra, diam vitae vulputate mattis, quam augue aliquet odio, sit amet dapibus felis odio id lectus. Proin sit amet ornare mauris, quis sodales diam. In hac habitasse platea dictumst. Quisque eget hendrerit tellus. Suspendisse vulputate non dui vel auctor.
<br><br>
Curabitur volutpat eros tellus, ut fringilla nibh cursus eget. Aenean sed urna et nulla aliquet tempor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque euismod fermentum risus, sit amet semper enim. Morbi pulvinar sapien a commodo tempor. Duis ut tellus malesuada, consequat neque a, accumsan nibh. Pellentesque convallis neque sed odio tempor, quis vestibulum eros viverra. Nunc tincidunt ligula ut dolor mattis, eget mollis velit scelerisque. Fusce sed enim sollicitudin, aliquam mi non, mattis diam. Nullam faucibus massa id nisl sagittis, id pharetra enim pharetra. Ut a varius libero, ac malesuada arcu.</div>

loading data by scrolling using javascript

I am displaying data on my page and when i click on load more data button it will load more data on the same page below the data that was already displayed. I want to convert this feature so that more data will be loaded as the user scrolls down the page rather than clicking on load more data. Here is what i have and what i have attempted.
html view
<section id="rosterImages">
<section id="users">
<div id="nameImage">
<figure id="content" class="thumbnail">
<img width="158" height="158" alt="Gravatar" data-bind="attr:{src: GravatarUrl}"/>
<figcaption>
<a title="Email" id="emailIcon" class="icon-envelope icon-white" data-bind="attr:{'href':'mailto:' + Email()}"></a>
</figcaption>
</figure>
</div>
</section>
</section>
Javascript Scroll
$(window).scroll(function (e) {
if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.7) {
$('#users').append(Next());
}
});
Next method
Next = function () {
var _page = $.views.Roster.ViewModel.CurrentPage() + 1;
$.views.Roster.ViewModel.CurrentPage(_page);
$.views.Roster.GetPage("/api/Roster", 9, _page);
};
the next method works if i link it up to a button but not with a scroll.

We just implemented something similar and our method was almost like the other answer except for the check to see if you had actually reached the end of the page
<script>
$(window).scroll(function () {
//Will check if the user has reached bottom of a PAGE
//-10 makes it such that you don't have to scroll all the way to the bottom
//can be adjusted as needed for footers, etc,
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
alert('Scrolling should be called now');
$('#users').append(Next());
}
});
</script>

Is it fine if you try loading data when User Scroll's to END of the PAGE,
Then you can possibly try :-
<script>
$(window).scroll(function () {
//Will check if the user has reached bottom of a PAGE
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert('Just checking if End of the Scroll Works');
$('#users').append(Next());
}
});
</script>
[Updated]
I tried the same with $(document).ready(function () {));, and it works like charm:-
$(document).ready(function () {
// Handler for .ready() called.
$(window).scroll(function () {
alert("Scrollbar Initiated");
//Will check if the user has reached bottom of a PAGE
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert("Scrollbar appended");
$('#users').append(Next());
}
});
});
The complete code which I tried was something like below:-
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<script>
$(document).ready(function () {
// Handler for .ready() called.
$(window).scroll(function () {
//Will check if the user has reached bottom of a PAGE
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert("Scrollbar appended");
$('#users').append(Next());
}
});
Next = function () {
var text = "..............Appended to Lipsum......................";
return text;
};
});
</script>
<body>
<div id="users">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed tellus mauris, non tincidunt libero. Nullam eros tellus, posuere sit amet tempus laoreet, mattis fringilla nisl. Maecenas commodo arcu ac mauris sagittis nec iaculis justo vulputate. Nulla eros justo, consectetur fringilla iaculis gravida, eleifend quis metus. Suspendisse ut ante justo. Proin mollis pellentesque elit, in eleifend erat rhoncus vel. Aenean magna odio, pharetra in rhoncus et, venenatis sed nunc. Mauris convallis, nunc et gravida sagittis, leo urna porttitor lacus, vel pellentesque felis arcu eu metus. Suspendisse eget neque id risus pharetra sollicitudin.
</p>
<p>
Fusce fermentum sollicitudin neque eu vestibulum. Donec adipiscing fermentum varius. Ut ut libero lacus, ut viverra dolor. Praesent bibendum elementum dui at consequat. Pellentesque pulvinar, lacus eu auctor aliquet, mi eros egestas orci, sit amet condimentum erat tortor nec felis. Aliquam erat volutpat. Donec fermentum molestie tempor. Donec non facilisis metus. Nam convallis tempor ipsum in scelerisque. Mauris cursus metus sed justo pretium fringilla. Nulla cursus scelerisque tellus vel ornare. Etiam sit amet sapien diam, ut commodo mi. Vestibulum nec enim id metus feugiat aliquet. Integer varius faucibus odio vel eleifend. Nunc convallis lectus at quam consequat ac accumsan nunc sodales.
</p>
<p>
Nunc elementum augue quis velit hendrerit vel aliquam dui porta. Pellentesque sollicitudin tincidunt elit ac cursus. Sed iaculis, magna facilisis tincidunt ultricies, risus augue semper est, sit amet cursus lectus arcu iaculis elit. Nullam in massa felis, sit amet tempus urna. Vestibulum condimentum urna quis tortor volutpat sodales. Nullam sed nisl est, eget pulvinar elit. Pellentesque sagittis congue urna, nec molestie quam lacinia nec. Ut rhoncus fringilla tellus, eget molestie nibh mattis quis. Nunc nec purus elit. Cras vitae felis ac arcu iaculis egestas. Pellentesque aliquet, urna et ultrices porta, metus arcu consequat neque, quis vehicula quam magna sed risus. Nulla a nunc neque, sed fermentum risus. Vestibulum pellentesque elementum suscipit. Nulla dolor massa, lacinia vel vulputate ac, eleifend eu odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc lacinia justo in ante ornare consequat.
</p>
<p>
Sed dapibus quam ut augue luctus rhoncus. Aliquam cursus semper velit ac feugiat. Nullam erat magna, adipiscing id pharetra vel, elementum ut odio. Phasellus facilisis, justo id adipiscing posuere, lectus tellus vehicula nunc, nec vulputate elit ligula vitae nisi. Nunc tristique velit et turpis viverra vel condimentum nibh varius. Vivamus magna ante, adipiscing et iaculis sed, rutrum sit amet diam. Nunc semper orci non risus rutrum eget ullamcorper nulla volutpat. Suspendisse auctor quam vitae nisl blandit vulputate. Praesent justo mi, condimentum non malesuada sit amet, molestie ac massa. Phasellus dictum tincidunt massa, sed dictum urna rutrum id. Praesent eu gravida risus.
</p>
<p>
Nullam et neque tortor, ut accumsan nisl. Nullam pulvinar fermentum velit, eu tristique arcu sollicitudin eget. Praesent rhoncus malesuada mauris at fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ac massa lacus, et eleifend turpis. Proin fringilla imperdiet eros at venenatis. Fusce eu tempor lorem. Morbi ipsum tortor, condimentum quis pretium posuere, scelerisque sed purus. Maecenas in augue nunc, et ultrices risus. Fusce convallis tempus varius. Pellentesque eget nulla magna, ac ornare nibh. Morbi euismod dolor et nisl molestie in ornare eros gravida. Praesent sit amet lorem hendrerit diam ultrices egestas nec quis felis. Suspendisse nec nisl erat, ut ornare risus. Nulla nec pretium sapien.
</p>
<p>
Proin urna tellus, commodo in rhoncus non, elementum aliquam nisl. In consequat pretium dolor vel sollicitudin. Aliquam quis mauris eu elit hendrerit ultrices a et justo. Phasellus nec sodales felis. Pellentesque venenatis mauris in magna fringilla vitae fringilla erat tempor. Proin posuere augue eu odio volutpat ultrices. Donec pulvinar interdum eros in auctor. Sed molestie, lacus id posuere elementum, erat odio eleifend ligula, vel euismod nibh libero sit amet dolor. Phasellus ac augue urna. Pellentesque feugiat suscipit semper. Pellentesque luctus tempus tincidunt. Ut scelerisque, eros et porta euismod, neque elit ornare quam, quis posuere sem nulla et velit. Nam purus neque, accumsan nec lacinia ut, varius vel arcu. Nullam at orci sem, et aliquet augue. Nam imperdiet suscipit feugiat. Suspendisse dictum mi eget magna commodo at tristique odio dictum.
</p>
<p>
Ut a magna nec nulla ultrices faucibus. Praesent et est est. Aliquam vulputate lobortis tincidunt. Phasellus rhoncus imperdiet aliquet. Nullam id mi neque, sit amet tristique urna. Integer adipiscing, ipsum vel vestibulum vulputate, nulla ipsum blandit orci, et elementum quam lorem vitae mauris. Quisque consectetur ornare euismod. Nam vel iaculis risus. Proin lobortis dignissim lacus, sed feugiat lacus ultrices quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Nullam bibendum posuere adipiscing. Suspendisse potenti. Praesent nisi sem, scelerisque et semper vitae, pulvinar eget nunc. Mauris ultrices ultricies sem, pulvinar convallis augue aliquet eu. Curabitur sed purus eu turpis congue egestas. Sed tempus orci quis elit hendrerit pretium. Nam dictum nibh non orci vestibulum elementum. Phasellus sit amet velit volutpat erat elementum venenatis. Quisque facilisis egestas libero, a gravida nibh rhoncus quis. Quisque risus diam, viverra eu lacinia eu, ultrices non eros. Curabitur placerat imperdiet neque, ut cursus purus posuere eu. Proin sed ipsum leo, vitae rutrum diam. Suspendisse placerat risus nec nisl adipiscing vitae sagittis ipsum hendrerit. Phasellus sollicitudin orci mauris, sit amet sollicitudin lectus. Vivamus et bibendum justo.
</p>
<p>
Duis sed metus ac mi fermentum congue in vel nisl. Integer nunc magna, pulvinar a venenatis a, accumsan varius libero. Integer facilisis urna non enim viverra a porttitor ante lobortis. Pellentesque pharetra gravida porttitor. Morbi iaculis nibh sed urna malesuada ac facilisis mi vestibulum. Praesent euismod aliquam laoreet. Praesent at dolor eget augue convallis viverra vel ut ante. Praesent dictum est et nisi dictum ut vestibulum erat ullamcorper. Donec aliquam, quam in euismod pulvinar, augue mauris gravida lorem, a porta nunc felis at felis. Nam eget libero urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean iaculis massa sed purus tempor eu laoreet odio venenatis. Integer ultrices felis id ante pharetra bibendum. Sed at lorem vitae nunc vestibulum egestas. Fusce vel malesuada neque.
</p>
<p>
Sed non pretium sem. Aliquam id elit malesuada mi commodo dignissim ac sit amet diam. Integer fringilla arcu id est tincidunt non vestibulum eros commodo. Sed dictum sapien in nisi dapibus id pretium ipsum rutrum. Nulla justo diam, auctor sit amet venenatis sed, volutpat non ante. Aenean eu tristique augue. Suspendisse nisl nibh, eleifend et adipiscing in, volutpat sed enim. Nunc eros urna, gravida vitae interdum eget, volutpat et ipsum. Suspendisse eget turpis varius magna pretium fermentum. Nam neque turpis, tristique ac semper eu, pellentesque sit amet dolor. Integer aliquam aliquam tortor, sit amet dignissim quam laoreet at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sit amet mi augue. Maecenas pretium accumsan sollicitudin.
</p>
<p>
In at neque quam, sed sollicitudin eros. Praesent venenatis, neque quis molestie dapibus, nisl nibh tincidunt elit, sodales fermentum quam purus sed dolor. Nullam bibendum, nisl a scelerisque accumsan, dui nibh dapibus mi, ut pellentesque arcu massa aliquam lectus. Cras fermentum, libero eget pulvinar elementum, nibh orci fermentum justo, a bibendum lectus nisl sit amet felis. Mauris at lorem quis est auctor tristique. Quisque dui libero, congue vel fermentum vel, congue quis libero. Aenean cursus dolor at augue sodales rutrum. Aenean egestas vulputate nulla, at porta tortor venenatis id. Vivamus sit amet lectus vitae lorem pellentesque mollis sed a diam. Donec consectetur mi non sapien sagittis faucibus. Proin at lacus purus, in lobortis lorem. Praesent ac arcu justo, at elementum erat. Quisque vulputate accumsan turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tempor erat vel tellus pellentesque tincidunt. Duis dolor mi, placerat id molestie laoreet, semper ut nibh.
</p>
<p>
Suspendisse potenti. Sed eu risus dolor, vel semper libero. Sed accumsan est eget urna vulputate pretium. Integer varius venenatis quam. Praesent lacus diam, condimentum quis luctus in, convallis vitae est. Suspendisse potenti. Phasellus interdum mauris ut nisi feugiat sodales. Vivamus condimentum, leo sed placerat rhoncus, eros lacus ultricies sem, sit amet tempor libero nisl et lacus. In sed odio arcu. Proin id diam a lacus tristique posuere. Integer luctus urna et nulla ultrices interdum.
</p>
<p>
Vestibulum a eros quam, et laoreet nisi. Duis convallis tincidunt augue nec pulvinar. Nunc malesuada urna ut sem placerat consequat. Nulla sollicitudin venenatis quam sollicitudin gravida. Curabitur elementum quam sit amet dolor euismod non dapibus elit tincidunt. In turpis augue, luctus et iaculis a, molestie at risus. Praesent sit amet ante ac ipsum fringilla dignissim. Aliquam elit orci, feugiat faucibus laoreet eu, sodales interdum velit. Aliquam dolor mi, pharetra vel suscipit id, tempor eu arcu. Aliquam sem turpis, rutrum quis porta sed, faucibus quis eros. Proin quis varius velit.
</p>
</div>
</body>
</html>