Blogger: hide hidden <div> on main page? - html

If I use mathjax on blogger then I want to put macros in a "hidden" <div> command like:
<div style="display: none;">
\( \newcommand{\al}{\alpha} \)
</div>
This works fine for the main blog post, but on the main page, the "summary" of the blog post displays the macro verbatim, it is NOT hidden there (i.e. I see \newcommand{\al}{\alpha} ) .
Is there some way to get my main blogger page to respect the "hidden" div style?
I have isolated the problem to this very simple example, and the <div> is still not hidden on the main page

Related

Why does the requests library omit the contents of a div element while fetching this page?

I'm trying to scrape a webpage to retrieve a piece of information I found using inspect element.
A search results page contains the following div:
<div id="se-search-serp">
...
</div>
Using inspect element, I can find the desired tags inside this element:
<div class="sc-fznyAO kChtze">
<div data-area="main" class="sc-fznKkj sc-pcxhi kVWWZA">
<h1 class="sc-qXFOy hZbUVv automation-total-books-found">500 results in Books</h1>
<div class="sc-pQfvp hBInHv">
<div class="sc-qXHHN kITAEN"><ul id="search-results-tabs" role="tablist" data-test="tabs" class="sc-pAyMl frsGKv">
<li role="presentation">
<a role="tab" id="search-results-tabs_tabheader_0" data-test="search-results-tabs_tabheader_0" href="#search-results-tabs_tabpanel_0" data-index="0" tabindex="-1" class="sc-pITNg jukMUo">All Matches</a></li>
...
I would like to access this content through the Python Requests library. However, when I request the page and print out the text, the contents of this div are missing. Here's the string of relevant text in the very long output:
...
<div id="se-search-serp"></div>
...
I have checked that this is the div that contained the content in expect element. It has the same place in the hierarchy and no other divs of the same id exist on the page.
What is going on here? I've observed that many of the tags within <div id="se-search-serp"> belong to classes with illegible names ("sc-fznyAO","sc-qXFOy", etc.)like the ones shown above. I cannot find any tags like these in the printed page text, although they do show in inspect element. Could this be relevant?
And finally, is there any way to access this content through the requests library?
Edit: The site url I am using is: https://www.chegg.com/search/the%20art%20of%20electronics/#p=1

<br> is appearing after <span> element on the front end, but it is not in the back end. How do I get rid of it?

I am using the Enfold theme from Kriesi, the Avia layout builder, the 'tab' setup in the Avia layout builder, the plugin 'Ultimate FAQ', and shortcodes from that plugin to pull through different categories of FAQs.
In my first tab, I have this code:
<span class="ewd-ufaq-expand-all"><span class="ewd-ufaq-toggle-all-symbol">c</span> Expand All</span>
<span class="ewd-ufaq-collapse-all ewd-ufaq-hidden"><span class="ewd-ufaq-toggle-all-symbol">C</span> Collapse All</span>
[select-faq faq_id='6486']
[ultimate-faqs include_category='a-to-c']
[ultimate-faqs include_category='d-to-h']
[ultimate-faqs include_category='i-to-n']
[ultimate-faqs include_category='o-to-v']
[ultimate-faqs include_category='w-to-z']
The <span> stuff is code from the FAQ creator to expand/collapse all FAQ answers. Here is my page, if you use the page inspector it shows two <br>s between the expand/collapse control and the FAQ.
But I didn't put any <br> there. I don't know where they're coming from.
I'm going to guess that this is a Wordpress question.
By default Wordpress injects <br> tags into the content where a new line occurs. It's designed to help content writers. You won't see it in the text editor as it's added behind the scenes via a 'filter'.
Unfortunately the only way you're going to overcome your problem is to write PHP or JS code in the theme file itself. HTML and CSS will not work here. There's a question that deals with this problem using filters here.
EDIT: Something you could try is removing any whitespace between elements to stop the tags being injected i.e;
<span class="ewd-ufaq-expand-all"><span class="ewd-ufaq-toggle-all-symbol">c</span> Expand All</span><span class="ewd-ufaq-collapse-all ewd-ufaq-hidden"><span class="ewd-ufaq-toggle-all-symbol">C</span> Collapse All</span>[select-faq faq_id='6486']
[ultimate-faqs include_category='a-to-c']
[ultimate-faqs include_category='d-to-h']
[ultimate-faqs-include_category='i-to-n']
[ultimate-faqs include_category='o-to-v']
[ultimate-faqs include_category='w-to-z']
This will largely depend on how the editor works though so no promises.
This works via console. Try placing it in a script tag prior to the end of the body element.
jQuery(function() {
jQuery('span.ewd-ufaq-collapse-all').next('br').remove();
});

html navigation page-jump

I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:
<div id="navbar-type">
<ul>
<li>BEAR SOUP</li>
<li>FIAT MOTORS</li>
<li>NEWSEUM</li>
<li>TEXAS PARKS</li>
<li>ZACH THEATRE</li>
<li>GUINNESS</li>
</ul>
</div>
How can I fix the code so that the items above the page-jump are visible?
Thanks
you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:
BEAR SOUP
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>
There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.
I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.
Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.
BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?

Expression Engine tags causing DIV to disappear!? How can I solve this?

I am using Expression Engine to develop a site. I have created the page I want in a template file and now I am making use of EE's tags to make the content dynamic.
{exp:channel:entries channel="test123"}
{test123}
<div class="panel" style="margin-bottom:10px;">
<div class="paneldiv" style="background-color: red;">
hello there
</div>
</div>
{/test123}
{/exp:channel:entries}
The above code makes my DIV disappear. But if I remove the tags, the DIV shows up.
Its also worth noting that when the tags are in and I click "view rendered template" the DIV shows up.
Very strange! I've been bashing my head all day!
I believe you are using the {test123} tag incorrectly. First, I'm assuming that {test123} refers to a Channel Field within the 'test123' Channel. If so, then you simply need to remove the {/test123} ending tag, as data field tags are usually single-variable tags.
The reason your div content is disappearing is that EE is failing to process {test123} as a variable pair, and therefore it doesn't show the content within.

Can I set CSS to put a whole <p> on a single page (generated content in SalesForce)?

I'm working in SalesForce. I have a page that generates a PDF based on user specified paramaters. The trouble is that most sometimes the <p> run between pages and it looks terrible.
Is there a way (using CSS or HTML) to force a page break if the <p> will run between pages?
page-break = <div style="page-break-after:always;"></div>
Not breakable area = <div style="page-break-inside:avoid"> Not breakable html area </div>