I have HTML and JS code that should display the daily verse from ourmanna.com API. However, the verse is not always displaying. I was wondering if it's a problem on their side or my side?
here is the html code:
<div class="col-md-6">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="daily-verse">
<h2>Daily Verse</h2>
<div class="body-daily-verse">
<div id="ourmanna-verse">Loading...</div>
<script src="https://www.ourmanna.com/verses/api/js/" type="text/javascript"></script>
<p class="daily-verse-text">
</p>
<br />
<p class="verse-reference"></p>
</div>
</div>
</div>
</div>
</div>
Thanks very much
If you look at the script returned by ourmanna, you see the problem is a not escaped quote in the mannaverse:
var mannaverse='"'If you can'?" said Jesus. "Everything is possible for him who believes."';
Correct would be
var mannaverse='"\'If you can\'?" said Jesus. "Everything is possible for him who believes."';
So you cannot do anything about it, it is a ourmanna-problem.
Related
so I have a page. there's a search bar. if the search bar has no text inputted, the page displays two partials, one for featured apps and one for most popular. but if someone inputs any text at all into the search bar then the featured apps and most popular apps partials disappear and the search results partial shows up. instead what happens is neither partials load. there's just a big blank space where they should be.
I tried doing this with jQuery but was having no luck. so now I'm back to trying to use dynamic partials but am also having no luck with that. if this can only be done with something like jQuery please let me know.
I was briefly trying to use a handlebar helper but I could not link it to the input id="searchApps" element without throwing an error because it keeps saying searchApps is undefined.
index.hbs (if this is missing any divs it's cause it's just part of the code)
<div class="col-2 offset-1">
<div class="column-side">
<div class="sidebar">
<input id="searchApps" type="text" placeholder="Search apps...">
{{!-- so once someone types the first character here the searchResults partial should render. and it should be dynamic so results should further refine with each additional character typed--}}
{{>sidebar}}
</div>
</div>
</div>
{{#if 'searchApps.length === 0'}}
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
{{else}}
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
{{/if}}
here is the jQuery I tried in the index.hbs file just before the </body> tag
<script type="text/javascript">
$('#searchApps').on('change', function(){
if ($(this).val() == ""){
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
} else {
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
}
});
</script>
so anyone know how I can do this?
thanks
For example:
<div class="div1">
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
<div class="div5">
</div>
...
</div>
Imaging that the blocks are big ones, and the browser view cannot hold all of them at the same time. Is there a way if I can get idea that a particular block get displayed and viewed by user?
My page code looks like this:
<div id="wrap">
<div id="panel">
<div id="answerData">
<div id="bodyData">
----some contents here ----
</div>
</div>
</div>
</div>
The data got wrapped between bodyData are populated automatically, so I want to make these data scrollable when they are overflowed.
And I added
<script>
$(document).ready(function () {
$('#wrap').fullpage();
})
</script>
below div section, but nothing happened, anyone can help me? I followed a tutorial video, don't know how to initialize fullpage.
Check the fullPage.js docs where everything is explained in detail and with plenty of examples.
You are not following the required HTML structure which is the following:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
You can also check this video tutorial.
Having the following html:
<html>
<body>
<div id="first">
1
<div class="first-first">
<p>1.1</p>
</div>
<div class="first-second">
<p>1.2</p>
</div>
</div>
<div id="second">
2
<div class="second-first">
<p>2.1</p>
</div>
<div class="second-second">
<p>2.2</p>
</div>
</div>
</body>
</html>
How could I extract an element from the HTML keeping his parent-child structure? e.g. if I want to extract the class 'second-first', I will have a html object that looks like this:
<html>
<body>
<div id="second">
2
<div class="second-first">
<p>2.1</p>
</div>
</div>
</body>
</html>
So #first and .second-second will be removed.
jsfiddle
I've tried different approaches but with no success at all, also if someone knows how to do that with a time complexity less than O(n^2) would be great to know.
Thanks a lot!
I'm trying to automate a clicking of a link within a class list. Currently I have a working script that will pick the first item in the container using the querySelector(), one line of code wrapped in a function.
To have more usability, I was wondering if I could modify the code so that the script searches within each item in the container trying to match a title of the listing or name with a defined variable, to the users desire, and once found, clicks the link for that particular item.
<div class="item-wall">
<div class="grid-item" data-column-index="0" data-pdpurl="http://www.LINK1.com">
<div class="grid-item"> … </div>
<div class="content">
<div class="grid-item-details-wrapper">
<div class="grid-item-image"> … </div>
<div class="grid-item-info-wrapper no-chipper">
<a href="http://www.LINK1.com">
<div class="product-name">
<p class="griditem-display-name nsg-font-size--regular nsg-text--dark-grey">
PRODUCT1
</p>
<p class="griditem-subtitle nsg-font-size--regular nsg-text--medium-grey"> … </p>
</div>
<div class="product-price-wrapper"> … </div>
</a>
</div>
<div class="grid-item-extras"> … </div>
</div>
</div>
</div>
<div class="grid-item" data-column-index="1" data-pdpurl="http://www.LINK2.com">
<div class="grid-item"> … </div>
<div class="content">
<div class="grid-item-details-wrapper">
<div class="grid-item-image"> … </div>
<div class="grid-item-info-wrapper no-chipper">
<a href="http://www.LINK2.com">
<div class="product-name">
<p class="griditem-display-name nsg-font-size--regular nsg-text--dark-grey">
PRODUCT2
</p>
<p class="griditem-subtitle nsg-font-size--regular nsg-text--medium-grey"> … </p>
</div>
<div class="product-price-wrapper"> … </div>
</a>
</div>
<div class="grid-item-extras"> … </div>
</div>
</div>
</div>
<div class="paging-bar hidden"> … </div>
<div class="spacer"></div>
</div>
Sorry for being so verbose. The web page has an 'item-wall' with several items, 2 are only shown here. I wish to be able to set a variable as a string in the script and be able to use something along the lines of .contain() to find an instance of the matching product name in the wall and then have it open the link corresponding to the selection.
Thanks for any input!
/////////////////////////////////////////////////////////////////////////////////////////////
EDIT: Thanks to #Barmar for the working console function:
function product_click(product) {
$(".griditem-display-name:contains("+product+")").closest("a").click();
}
product_click("Desirable here")
Now I am at a loss as to how to make this function operational in an script. I've tried with scriptish in firefox and have tried writing this to a .js file and loading it as an unpacked extension in chrome to no avail. It seems as though the function/script won't load. If anyone has any thoughts, they'd be greatly appreciated.
Thanks again!
If I understand you correctly, I think this is it:
function product_click(product) {
$(".griditem-display-name:contains("+product+")").closest("a").click();
}