It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
I am using a script for limit the paragraph for few words only so for that m using the script of readmore..but the problem is it collapse the paragraph wherever I click on text whereas I want it to be collapse when Clicked on >>more link..so I request anyone to help me out of this what to do that it will not accept the click on text.
<!--readmore script-->
<script type="text/javascript">
$(function () {
// Grab all the excerpt class
$('.excerpt').each(function () {
// Run formatWord function and specify the length of words display to viewer
$(this).html(formatWords($(this).html(), 15));
// Hide the extra words
$(this).children('span').hide();
// Apply click event to read more link
}).click(function () {
// Grab the hidden span and anchor
var more_text = $(this).children('span.more_text');
var more_link = $(this).children('a.more_link');
// Toggle visibility using hasClass
// I know you can use is(':visible') but it doesn't work in IE8 somehow...
if (more_text.hasClass('hide')) {
more_text.show();
more_link.html(' » hide');
more_text.removeClass('hide');
} else {
more_text.hide();
more_link.html(' « more');
more_text.addClass('hide');
}
return false;
});
});
// Accept a paragraph and return a formatted paragraph with additional html tags
function formatWords(sentence, show) {
// split all the words and store it in an array
var words = sentence.split(' ');
var new_sentence = '';
// loop through each word
for (i = 0; i < words.length; i++) {
// process words that will visible to viewer
if (i <= show) {
new_sentence += words[i] + ' ';
// process the rest of the words
} else {
// add a span at start
if (i == (show + 1)) new_sentence += ' <span class="more_text hide">';
new_sentence += words[i] + ' ';
// close the span tag and add read more link in the very end
if (words[i+1] == null) new_sentence += '</span> » more';
}
}
return new_sentence;
}
</script>
<!--readmore script-->
<body>
<p class="excerpt">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.<br><br>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like)....</p>
</body>
What about these small script? DEMO http://jsfiddle.net/uEXvk/
HTML
<p class="excerpt">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.<br><br>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like)....</p>
CSS
a {
color: blue;
cursor: pointer;
}
JQUERY
var orgContent = $('.excerpt').html();
var txtContent = $('.excerpt').text().substr(0, 50) + '... <a id="morelink">more</a>';
$('.excerpt').html(txtContent);
$("body").on("click", '#morelink', function(){
$('.excerpt').html(orgContent);
$('<a id="lesslink"> less</a>').appendTo('.excerpt');
});
$("body").on("click", '#lesslink', function(){
$('.excerpt').html(txtContent);
});
Related
I have a div and want to have it's background color filled based the scroll position from top. Below is my code -
HTML
<div> 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. </div>
<div id='Div'>
</div>
<div> 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.
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
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</div>
CSS
#Div {
background-color: red;
height: 20px;
width: 0%;
}
J-query
$(window).scroll(function(){;
w = Math.floor( $(window).scrollTop() );
if (w > 5) {
$('#Div').animate({ width: '100%' }, 1000);
} else {
$('#Div').animate({ width: '0%' }, 1000);
}
});
This is running well, but I found there is a delay in the response time. Filling is not happening quickly based on the cursor position as I need to wait for few seconds to see the filling starts.
Fiddle - http://jsfiddle.net/bogaso/5r3afz7n/11/
Is there any way to make the response time instantaneous?
Any help will be highly appreciated.
Concept
Define two named animations using css #keyframes rules, one to expand the color bar, one to shrink it. Contingent on the scroll position, start the proper animation. In order to select the right one and to restrict the animation start on crossing the scroll offset threshold, a css class colorized is introduced to record state ( in this case: scroll offset > 5 ). Only if the state has changed, an animation is started. The combination of current scroll offset and presence/absence of class colorize determine which animation to select.
Jquery is not needed to manage the animation, the DOM API does suffice.
See it in action at this fiddle.
Code
HTML
<div><!-- ... long text .....></div>
<div id='Div'>
</div>
<div><!-- ... even longer text .....></div>
CSS
#Div {
background-color: red;
height: 20px;
width: 0%;
}
#keyframes colorize {
from { width: 0%; }
to { width: 100%; }
}
#keyframes decolorize {
from { width: 100%; }
to { width: 0%; }
}
JS
$(window).scroll(function(){
let w = Math.floor( $(window).scrollTop() );
let e = document.querySelector('#Div');
if (w > 5) {
if (! e.classList.contains("colorized")) {
// Adjust the scrolling state proxy
e.classList.add("colorized");
// Animation name. Links the code to the CSS spec of start/end values of the animated attribute
e.style.setProperty ( 'animation-name', 'colorize' );
// Animation starts immediately
e.style.setProperty ( 'animation-delay', '0s' );
// It takes that long for the complete animation to complete.
e.style.setProperty ( 'animation-duration', '2s' );
// The final state of the animated attribute persists.
e.style.setProperty ( 'animation-fill-mode', 'forwards' );
// The animation is run exactly once for each triggering event
e.style.setProperty ( 'animation-iteration-count', '1' );
}
} else {
if (e.classList.contains("colorized")) {
e.classList.remove("colorized");
e.style.setProperty ( 'animation-name', 'decolorize' );
e.style.setProperty ( 'animation-delay', '0s' );
e.style.setProperty ( 'animation-duration', '2s' );
e.style.setProperty ( 'animation-fill-mode', 'forwards' );
e.style.setProperty ( 'animation-iteration-count', '1' );
}
}
});
Extension
In the version shown the colored bar jumps to full width when the decolorize animation starts. Visually this is not appealing if the inverse colorize animation is in progress. A more sophisticated solution would read the current width of the color bar div and set the start value of the respective #keyframe animation accordingly.
I have a div and i want to show the scroll cue only on hover. I achieved the same but it's adjusting the content on hover. How can i make avoiding the jerk. I want to achieve using overflow:auto property alone not scroll property. Any ideas. Also please suggest only with pure CSS with cross browser compatibility.
body{
margin:0;
height:100%;
width:100%;
overflow:hidden
}
.outer{
position:relative;
height:100%;
width:100%;
float:left
}
.inner{
height:600px;
width:100%;
overflow-y:hidden;
float:left;
position:relative;
padding:0 10px;
box-sizing:border-box
}
.inner:hover{
overflow-y:auto
}
<div class="outer">
<div class="inner">
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.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
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.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
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.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
This is because of the scrollbar width. It adds up to the width of your div. One work around is to override the right-padding value in the .inner:hover selector to offset the added scrollbar width.
body{
margin:0;
height:100%;
width:100%;
overflow:hidden
}
.outer{
position:relative;
height:100%;
width:100%;
float:left
}
.inner{
height:600px;
width:100%;
overflow-y:hidden;
float:left;
position:relative;
padding:0 16px;
box-sizing:border-box
}
.inner:hover{
overflow-y:auto;
padding-right:0px;
}
<div class="outer">
<div class="inner">
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.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
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.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
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.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
Another alternative would be to hide/show the scrollbar element itself instead of replying on over-flow-y. Check out this answer.
I want to know if is it possible to create a theme with css where we can fixed the top and the left, and in the same time the theme must be responsive.
Thank you
I have created my own code just check out below Code snippet:-
.main-container{position:absolute; top:0; left:0;width:100%;height:100%;background:#eee}
header{background:#aaa;height:100px;}
.second-row{width:100%;background:#999; height:calc(100% - 100px); height:-moz-calc(100% - 100px); height:-webkit-calc(100% - 100px); }
aside{width:200px;height:100%; background:#666;float:left;}
.right-blk{width:clac(100% - 200px); width:-moz-clac(100% - 200px); width:-webkit-clac(100% - 200px); height:100%; background:#ddd;overflow:auto;}
<div class="main-container">
<header>
this is fixed header
</header>
<div class="second-row">
<aside>
this is fixed left block
</aside>
<div class="right-blk">
<div><div class="lc"><h2 class="what"><span>What is Lorem Ipsum?</span></h2><p><strong>Lorem Ipsum</strong> 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></div><div class="rc"><h2 class="why"><span>Why do we use it?</span></h2><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div>
<div><div class="lc"><h2 class="what"><span>What is Lorem Ipsum?</span></h2><p><strong>Lorem Ipsum</strong> 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></div><div class="rc"><h2 class="why"><span>Why do we use it?</span></h2><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div>
</div>
</div>
</div>
I was experiencing an issue in IE11, where if a bulleted list was next to a floated images, the bullets were staying to the left, whereas the text was wrapping around (as expected) the the right.
div {
padding: 20px;
}
img {
float: left;
margin-right: 20px;
}
<div>
<img src="http://placebear.com/300/300" />
<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.</p>
<ul>
<li>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</li>
<li>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</li>
<li>'Content here, content here', making it look like readable English.</li>
<li>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</li>
<li>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</li>
</ul>
</div>
I managed to solve the issue by pulling the bullets inside the li but now, I'd like to align the bullets with the p tags (aka respect the image's margin). This is what I have so far:
div {
padding: 20px;
}
img {
float: left;
margin-right: 20px;
}
ul {
list-style-position: inside;
padding: 0;
}
li {
text-indent: -1em;
padding-left: 1em;
}
<div>
<img src="http://placebear.com/300/300" />
<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.</p>
<ul>
<li>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</li>
<li>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</li>
<li>'Content here, content here', making it look like readable English.</li>
<li>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</li>
<li>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</li>
<li>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</li>
<li>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</li>
<li>'Content here, content here', making it look like readable English.</li>
<li>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</li>
<li>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</li>
</ul><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>
</div>
Would this work? (adding overflow: hidden to the <li>)
div {
padding: 20px;
}
img {
float: left;
margin-right: 20px;
}
ul {
list-style-position: inside;
padding: 0;
}
li {
text-indent: -1em;
padding-left: 1em;
overflow: hidden;
}
<div>
<img src="http://placebear.com/300/300" />
<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.</p>
<ul>
<li>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</li>
<li>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</li>
<li>'Content here, content here', making it look like readable English.</li>
<li>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</li>
<li>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</li>
<li>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</li>
<li>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</li>
<li>'Content here, content here', making it look like readable English.</li>
<li>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</li>
<li>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</li>
</ul><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>
</div>
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
}
?>