Parsing multiple html / text files - html

Hi I wanted help in a situation where I have a folder called 'slides' and I have multiple text / html files in it like:
slide1.html
slide2.html
slide3.html
and so on.....
The structure of these files is like this:
<h2>Title of the Slide</h2>
<p><img src="tick_icon.jpg" width="227" height="227" alt="icon" longdesc="http://longdescription" /></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
3 properties Title, Image and the Description. One in each line.
I have some 10 - 12 files like this. I wanted a function which will loop and parse all these files in the folder called 'slides' and return values of each line (of the 3 lines) as variable so that I can place them within my code for layout.

You could use
foreach(glob('slides/*.html') as $fileName) {
$fname = basename( $fileName );
$curArr = file($fname);
$slides[$fname ]['title'] = $curArr[0];
$slides[$fname ]['image-links'] = $curArr[1];
$slides[$fname ]['description'] = $curArr[2];
}
and you will end up with one big $slides array which will have the filenames as keys and the 3 sub keys, title, image-links, and description. This is assuming that each of the "slides" have the extension .html and that the content of each slide is definitively on 3 lines.

What language would you want this in? HTML is not a programming language. You can also not accomplish this in Javascript as it has no filesystem-handling routines, and would almost certainly not be allowed to poke around the server's directory structure in any case.
You could accomplish this in PHP using something like:
<?php
$filelist = glob("/path/to/files/slide*.html");
foreach($filelist as $file) {
echo <<<EOL
$file<br />
EOL
}
?>

Related

How can I auto scroll when clicking on my nav bar to a specific part of my page?

I'd like to know if it's possible to auto-scroll when I'm clicking on my nav bar title right to a specific part of my page? Is it possible without using jQuery?
Very much possible without the use of Javascript or Jquery. I've created a basic version of the behavior you're looking for. This is possible using ids in your HTML. Please see the example.
a {
font-size: 10rem;
}
html {
scroll-behavior: smooth;
}
<div class="container">
<!-- potential navbar component -->
About<br>
<img src="https://dummyimage.com/1500/000/fff&text=I'm+a+dumb+image+simply+for+scroll+behavior.">
<h1 id="about">About</h1> <!-- goes to this spot of page because of id -->
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<img src="https://dummyimage.com/1500/000/fff&text=I'm+a+dumb+image+simply+for+scroll+behavior.">
</div>

Scroll to element which is inside the iframe div

Hi there i have iframe in which there is a div and inside div there is one span
<iframe id="rFrame">
<div id="resarcbTabBox">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus <span id="highLightYellow">PageMaker</span> including versions of Lorem Ipsum
</div>
</iframe>
The content inside div is huge, but i pasted just small. The iframe is vertically scrollable, what i am trying to do is, i just want to scroll to the <span> position.
I am using jquery.scrollTo.min.js.
So far i tried various code but no luck, here are some of my effort, but not luck
$("#rFrame").scrollTo("#highLightYellow", 10);
$('#rFrame').contents().find('#resarcbTabBox').scrollTo("span#highLightYellow", 10);
will anybody put me on right track, what mistake i am making.
Thanks in advance.
Fiddle : https://jsfiddle.net/vivekSalve/orLvgf8n/2/

Avoid break on header and first few sentences of text using css

I have a header and a block of text under it. I want the header and the first three sentences to avoid a page break, using the css property page-break-inner: avoid. Then I want the rest of the sentences to continue as usual.
I've written the following code but the sentences after the first 3 are starting on a new line, because I've set the span containing the header and the first three sentences as display: inline-block. I would set that span as display: inline but I read somewhere that page-break-inside won't work on inline elements.
.avoid-break {
page-break-inside: avoid;
}
span.avoid-break {
display: inline-block;
}
<span class="avoid-break">
<div>Subtite</div>
<span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
</span>
</span>
<span>
This should continue on the line above! It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span>
A css solution:
remove span.avaoid-break
This is very specific to the code displayed, I would not use this in a production environment.
var spans = document.getElementsByTagName('span');
spans[1].innerHTML += spans[2].innerHTML
spans[2].remove()
IDs will make this much more usable:
<span class="avoid-break">
<div>Subtite</div>
<span id="text-box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
</span>
</span>
<span id="extra-text">
This should continue on the line above! It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span>
Javascript:
var textbox = document.getElementById('text-box');
var extratext = document.getElementById('extra-text');
textbox.innerHTML += extratext.innerHTML;
extratext.remove()

align text left of a block quote

I have a blockquote and a paragraph that i'm trying o have the text align left of the blockquote like an img like here
http://www.ironspider.ca/graphics/alignment.htm
how would i do that?
<p>
skcaskckascksakcosaocksocksoososkososooososocsosokoskcoskosopapckpefjwjfoejfiewfoiewjfjwefjewfowefwefowefjwejfoewfowejfjewfoewfoewofejwofjejfiejiejfej
<blockquote>
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
okfoefjpowejfoewjfjewfjeiowfjoewjfowejfoewofewofjewjfoiewjfoiewfoiewiofjewo
</p>
like this
You should use CSS rather than the HTML align attributes, that are in your example.
Use float: right and give the block quote a width to suit your needs.
More about floats:
https://css-tricks.com/all-about-floats/
.float-right {
width: 50%;
float: right;
}
<p>
<blockquote class="float-right">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
skcaskcka scksakc osaocksocks oososk osos ooo so socsosokosk coskos opapc kpe fjwjfoejfie wfoi ewjfj wefjewfo wefwefowef jwejfoewfo wejfjew foew foewofej wofjejfie jiejfej okfoef jpowejfoewjfjewfjeio wfjo ewjfowej foe wofe wofjew jfoiew jfoiew foiewiofjewo
</p>
Here you go buddy. Check out the following codepen link.
You basically need to use a css property called float. It specifies whether an element should float or not. Here you need float:right; to move it to the right. Give the amount of width you want to give and bingo. Its done !
Note:- You cannot use this property if your element is absolute positioned.
You can get more information on float here.
.blockquote-text{
float: right;
width: 30%;
background-color: #ddd;
}
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
<blockquote class="blockquote-text">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem IpsumLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>

html code for numbered list in html such as (a)

I need to create list elements with numbered as (a) , (b) , etc....
I have tried as below
<ol type="a">
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</li>
<li> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</li>
</ol>
However rather than having a. ... and b. ... I want (a) ... and (b) ....
Is there a special type for numbered letter list with brackets around?
Need it to work on IE7 also
IE 7 Workaround (?)
var i =0;
// A is #65 in Unicode
$("ol").children()
.prepend('<span class="li-counter">(' + String.fromCharCode(64+(i++)) + ')' );
Generaly, people uses CSS counters and ":before" pseudo-element.
ol {
counter-reset: my-counter;
}
ol li:before {
content: "(" counter(my-counter, lower-alpha) ")";
counter-increment: my-counter;
margin-right: 5px;
font-weight: bold;
}
There is a similar question about custom ol numbering:
Ordered list (HTML) lower-alpha with right parentheses?
http://jsfiddle.net/dd63m/10/
No, there is no HTML way to generate numbering such as “(a)”. The type attribute of ol has a very limited set of values. There are some more values for the corresponding CSS construct, the list-style-type property, but even for it, it’s a matter of setting the style of “numbers”, not punctuation around them.
The usual approach nowadays is to use CSS counters and generated content, but that does not work on IE 7.
Assuming the markup and content cannot be changed, this leaves just the JavaScript way. You would then replace the ol element e.g. by a div element, with the li elements changed to div elements, with content like “(a)” prepended to them, and with suitable styling (margins).