I have a webpage that uses an external CSS file for rendering my web pages on my site. All of my pages pretty much follow the same format as far as the layout is concerned and I have different sections in the Site.css file for each page. For some reason, one web page is not rendering the CSS correctly. I have a div defined with an Id and it isn't recognizing the id in the div even though it is defined in the CSS file. If I use a different id then it renders according to that Id's CSS. Specifically, the background color is not being set. Here is a screen shot of the site with the CSS. As you can see from this screen shot, the <div id="Devotions"> is not picking up the CSS.
CSS Issue
If I change the Id to ChristianFormaion, the page renders as I want it and the CSS is displayed as shown in the screen shot below.
Css no Issue
In the View, Devotions appears in the dropdown when I set the Id for the div. Here is the view code:
#{
ViewBag.Title = "Devotions";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="Devotions">
<h1 class="devotions_center">DEVOTIONS</h1>
<div class="devotions_body">
<p><img src="~/images/Devotions_cross.jpg" alt="Assumption B.V.M." width="53" height="79" align="right" class="padding15" /></p>
<h2><a name="CharismaticPrayerGroup" id="CharismaticPrayerGroup"></a>Charismatic Prayer Group</h2>
<p>The Assumption Charismatic Prayer Group has been meeting every Monday evening since 1973 to offer praise, thanksgiving and petitions to our God, Father, Son and Holy Spirit. The purpose of our prayer meeting is to seek a close personal relationship with Jesus and experience the working of the Holy Spirit in our lives in a deeper way. The word “charismatic” refers to the charisms or gifts of the Holy Spirit which we prayerfully seek through praise, both verbally and in song, scripture reading, sharing of answered prayer, prophecy and petition. Some of our members have been involved for over forty years and have experienced many answers to prayer and personal transformation. We meet every Monday evening at 7:15 in the Rectory Meeting Room. If you have any questions, contact Jean Ambs at 215-355-4974.</p>
</div>
<div class="devotions_body">
<h2><a name="Exposition" id="Exposition"></a>Eucharistic Adoration</h2>
<p>Eucharistic Adoration is held every Tuesday, beginning immediately after the 8:30 a.m. Mass and concluding at 6:45 p.m. with Evening Prayer from “The Liturgy of the Hours” followed by Benediction. Stop in for a visit any time. Better still, consider signing up for a holy hour of personal prayer before the Blessed Sacrament. Bring your needs to the Lord! For more information contact Deacon Eric at 215-357-1221, ext. 24, or email deaconeric.abvm#gmail.com</p>
</div>
<div class="devotions_body">
<p><img src="~/images/Devotions_bible.jpg" alt="Assumption B.V.M." width="86" height="73" align="left" class="padding15" /></p>
<h2><a name="FaithSharing" id="FaithSharing"></a>Faith Sharing</h2>
<p>A Bible/Faith Sharing Group meets on Wednesday mornings after the 8:30 Mass in the Mary Chapel, September through May. We use the “Word Among Us” monthly publication and focus on the Scripture for the following Sunday. Come grow with us in gaining insight into readings for Mass. Everyone is invited to join our informal group. Contact Theresa Poitras at 215-357-3933 or email theresaj38#verizon.net</p>
</div>
<div class="devotions_body">
<h2><img src="~/images/Devotions_rosary.jpg" alt="Assumption B.V.M." width="172" height="89" align="right" /><a name="Rosary" id="Rosary"></a>Rosary</h2>
<p>Prayed in Church at 8:00 AM before the 8:30 AM daily Mass.</p>
<h2><a name="PrayerPhoneTree" id="PrayerPhoneTree"></a>Prayer Line</h2>
<p>A group of parishioners volunteer to pray for the special intentions of our parish. If you have a request that you would like prayers for, please call Ginger Henry at 215-357-3394.</p>
</div>
<div class="devotions_body">
<h2><a name="Miraculous" id="Miraculous"></a>Miraculous Medal Novena</h2>
<p>Prayed in Church Thursday mornings following the 8:30 AM Mass.</p>
</div>
<div class="devotions_body">
<h2><img src="~/images/Devotions_Mary.jpg" alt="Assumption B.V.M." width="84" height="96" align="right" /><a name="LegionofMary" id="LegionofMary"></a>Legion of Mary</h2>
<p>The Legion of Mary is a lay Catholic organization founded by the Servant of God, Frank Duff, in Dublin, Ireland on September 7, 1921. Long before the recognition that the laity is vital to the work of the Catholic Church after Vatican Council II, the Legion of Mary, as a lay apostolic association with the approval of the Catholic Church and the intercession of Mary Immaculate, seeks the holiness of its members as they actively invite other people to holiness by doing the works assigned them by their Spiritual Director. In our parish, Our Lady of the Assumption Praesidium, the basic unit of the Legion, meets on Thursdays at 6:45 p.m. in the Mary Chapel, which is to the right of the church vestibule as you enter our church.</p>
<p>Currently, Father Mike Davis, Spiritual Director, asks the legionaries to visit homebound parishioners, residents of nursing homes and to bring the Pilgrim Virgin Statue to parishioners’ homes as requested. The primary purpose of the Pilgrim Virgin Statue home visitation is to help families to respond to the requests of the Blessed Mother Mary during the 1917 apparitions at Fatima: to return to God, make reparation for sins and to pray the Rosary for Peace. For more information, please contact Elaine Flood at 215-962-4312 or email lainey39forever#yahoo.com</p>
</div>
</div>
Here is the CSS in the Site.css file for devotions:
/* ========================================================================================*/
/* devotions.aspx */
#Devotions {
background-color: #dee4fe;
padding: 5px;
}
.devotions_body {
padding: 5px 15px 15px 15px;
margin-left: auto;
margin-right: auto;
}
.devotions_center {
text-align: center;
}
.devotions_left {
text-align: left;
}
.devotions_right {
text-align: right;
}
.devotions_color {
color: #005bac;
color: #006699;
}
Here is the CSS for the ChristianFormation:
/* ========================================================================================*/
/* christianformation.aspx */
#ChristianFormation {
background-color: #dee4fe;
padding: 5px;
}
.christianformation {
color: #B4C1E3;
border-width: 0;
padding-right: 3px;
vertical-align: middle;
}
.christianformation_hr {
margin-bottom: 15px;
border-top: 1px solid black;
}
Any help in identifying why the Devotions CSS is not rendering is greatly appreciated.
How can I make sure that 50 characters are shown in block (width:100px;) with CSS if User posts 50 characters on one line.
Now, my view is below.
<div class='example-wrapper'>
<%= simple_format(#user.content , class:'example') %>
</div>
If User posts 50 characters on one line(without making a line break) in #user.content, it is sticking out from browser.I don't mean that I use overflow:hidden;.Although I use white-space:normal; , nothing changes. Please tell me how to do it.
Now, scss is below.
.example-wrapper{
background-color:red;
max-width:100px;
}
.example{
max-width:100px;
white-space:normal;
}
You can use the truncate method. An example:
truncate("Once upon a time in a world far far away", length: 17)
# => "Once upon a ti..."
Read more here: http://api.rubyonrails.org/classes/ActionView/Helpers/TextHelper.html#method-i-truncate
With your example it would be something like this:
<div class='example-wrapper'>
<div class='example'>
<%= trucate(simple_format(#user.content), length: 50) %>
</div>
</div>
I want to display Beowulf on my webpage, the full poem. My code so far:
<head>
<title>Beowulf</title>
<style type="text/css">
body {padding: 10% 25%;}
pre {font-family: "Times New Roman"; font-size: 100%;}
</style>
</head>
<body>
<h3>Beowulf</h3><br>
<pre>Now Beowulf bode in the burg of the Scyldings,
leader beloved, and long he ruled
in fame with all folk, since his father had gone
(...)
of furious flame. Nor far was that day
when father and son-in-law stood in feud
for warfare and hatred that woke again. (...)</pre>
</body>
Now how to get every fifth line numbered? I would like to position the numbers on the extreme edge of the right side.
I would appretiate if you tried to explain this issue to me as didatically as possible. I am a friend of simplicity and I would give preference to codes that shouldn't be bigger than the Beowulf poem itself (if you get the message!), so preferably css.
If javascrpit is the only way to get there, I would kindly ask you to formulate your answer in the most didactical way you can. My programming skills are "lower-intermediate" and unfortunately I didn't find any concrete information on the web, not even at w3schools. Thank you for your answers!
CSS styles elements or pseudo-elements, not text lines. So you need to modify your HTML or use JS.
For example, you can get the text, split it into lines, and wrap each one inside a list item of an ordered list.
The, you can use a CSS counter to associate each line with its number, :nth-child to select each 5n-th line, and a pseudo-element to insert the counter. To align the numbers properly, you can use CSS tables.
var old = document.getElementById('poem'),
poem = document.createElement('ol');
poem.id = 'poem';
old.textContent.split('\n').forEach(function(line) {
var li = document.createElement('li');
li.textContent = line;
poem.appendChild(li);
});
old.parentNode.replaceChild(poem, old);
body {padding: 10% 25%;}
#poem {
font-family: "Times New Roman";
display: table;
padding: 0;
counter-reset: line;
}
#poem > li {
display: table-row;
white-space: pre;
counter-increment: line;
}
#poem > li:nth-child(5n+1):after {
content: counter(line);
display: table-cell;
text-align: right;
color: #aaa;
cursor: default;
}
<h3>Beowulf</h3><br>
<pre id="poem">Now Beowulf bode in the burg of the Scyldings,
leader beloved, and long he ruled
in fame with all folk, since his father had gone
away from the world, till awoke an heir,
haughty Healfdene, who held through life,
sage and sturdy, the Scyldings glad.
Then, one after one, there woke to him,
to the chieftain of clansmen, children four:
Heorogar, then Hrothgar, then Halga brave;
and I heard that -- was -- 's queen,
the Heathoscylfing's helpmate dear.
To Hrothgar was given such glory of war,
such honor of combat, that all his kin
obeyed him gladly till great grew his band
of youthful comrades. It came in his mind
to bid his henchmen a hall uprear,
ia master mead-house, mightier far
than ever was seen by the sons of earth,
and within it, then, to old and young
he would all allot that the Lord had sent him,
save only the land and the lives of his men.
Wide, I heard, was the work commanded,
for many a tribe this mid-earth round,
to fashion the folkstead. It fell, as he ordered,
in rapid achievement that ready it stood there,
of halls the noblest: Heorot he named it
whose message had might in many a land.
Not reckless of promise, the rings he dealt,
treasure at banquet: there towered the hall,
high, gabled wide, the hot surge waiting
of furious flame. Nor far was that day
when father and son-in-law stood in feud
for warfare and hatred that woke again. (...)</pre>
Is this what you wanted? http://jsfiddle.net/g1xh9tjj/7/
JS:
$(function() {
var text = $('pre').text(),
textLines = text.split(/\n/g),
index = 1,
occurance = 5,
paragraphNumber = occurance,
output = '<div>1</div>';
textLines.forEach(function(entry, arrayIndex) {
if (arrayIndex > 0) {
output += '<br />';
}
if (index === occurance) {
output += '<div>'+paragraphNumber+'</div>'+entry;
index = 1;
paragraphNumber += occurance;
return;
} else {
output += entry;
}
index++;
});
$('pre').html(output);
});
CSS:
pre {
width: 400px;
}
pre div {
float: right;
}
Result will be:
1Now Beowulf bode in the burg of the Scyldings,
leader beloved, and long he ruled
in fame with all folk, since his father had gone
away from the world, till awoke an heir,
5haughty Healfdene, who held through life,
sage and sturdy, the Scyldings glad.
Then, one after one, there woke to him,
to the chieftain of clansmen, children four:
Heorogar, then Hrothgar, then Halga brave;
10and I heard that -- was -- 's queen,
the Heathoscylfing's helpmate dear.
To Hrothgar was given such glory of war,
such honor of combat, that all his kin
obeyed him gladly till great grew his band
15of youthful comrades. It came in his mind
to bid his henchmen a hall uprear,
ia master mead-house, mightier far
than ever was seen by the sons of earth,
and within it, then, to old and young
20he would all allot that the Lord had sent him,
save only the land and the lives of his men.
Wide, I heard, was the work commanded,
for many a tribe this mid-earth round,
to fashion the folkstead. It fell, as he ordered,
25in rapid achievement that ready it stood there,
of halls the noblest: Heorot he named it
whose message had might in many a land.
Not reckless of promise, the rings he dealt,
treasure at banquet: there towered the hall,
30high, gabled wide, the hot surge waiting
of furious flame. Nor far was that day
when father and son-in-law stood in feud
for warfare and hatred that woke again. (...)
There is no clean CSS solution, just approximate and a bit awkward hack for finite length text. Itʼs flaw is clearly visible: no automatic counter, just positioned generated content with static text:
body {padding: 10% 25%;}
pre {font-family: "Times New Roman"; font-size: 100%;}
div {
margin-left: -2em;
padding-left: 2em; /* …create space for numbers */
overflow: hidden; /* …and prevent them from leaking */
}
pre {
position: relative;
}
pre:before {
content: '\a\a\a\a 5\a\a\a\a 10\a\a\a\a 15\a\a\a\a 20'; /* and so on */
position: absolute;
top: 0;
left: -2em;
width: 2em;
text-align: right;
color: gold;
}
<div>
<pre>Now Beowulf bode in the burg of the Scyldings,
leader beloved, and long he ruled
in fame with all folk, since his father had gone
away from the world, till awoke an heir,
haughty Healfdene, who held through life,
sage and sturdy, the Scyldings glad.
Then, one after one, there woke to him,
to the chieftain of clansmen, children four:
Heorogar, then Hrothgar, then Halga brave;
and I heard that -- was -- 's queen,
the Heathoscylfing's helpmate dear.
To Hrothgar was given such glory of war,
such honor of combat, that all his kin
obeyed him gladly till great grew his band
of youthful comrades. It came in his mind (…)</pre></div>
I have put numbers left, because I overlooked sentence about "extreme edge of the right side" first.
Given the following embedding code:
<iframe src="https://www.google.com/calendar/embed?
title=2014 PLIDAM International Symposium (Paris)&
dates=20140611/20140615&
mode=WEEK&
showNav=1&
showDate=1&
showPrint=1&
showTabs=1&
showCalendars=0&
showTz=1;
height=600&
wkst=2&
bgcolor=%23666666&
src=vdfmfbp0msroletduigs2qtkoc%40group.calendar.google.com&
color=%232952A3&
ctz=Europe%2FParis"
style=" border:solid 1px #777 " width="800" height="600" frameborder="0" scrolling="no"></iframe>
Is there a parameter to set the hours to display/focus_on from 09:00 to 18:00 (6pm), aka the working hours ? Same for days, is there someways to just display/focus_on the rights 4 days only.
Fiddle here
There doesn't appear to be a way to do this through the API, currently. I would use javascript/jQuery to remove the elements you don't want to show in the DOM after the iframe has finished loading.
So, you could delete the Wednesday column, if you know the column index, by something like this:
$("tr").each(function() {
$(this).filter("td:eq(3)").remove();
});
You can also scroll a specific div into view:
https://stackoverflow.com/a/4884904/5129424
$("#myImage")[0].scrollIntoView();
I am trying to clean up user entered HTML code that has a lot of inline CSS especially spans with styles and I'm not sure where to start. Does anyone know of a way to merge the spans and the styling using JavaScript? I have found ways to convert inline styles by moving all the styling to a style sheet, but that is not yet possible to store the CSS page in our system as it is right now. (Hopefully that will be a goal in the near future, but not my call)
An example - turn this mess:
<span style="font-size: large;"><span style="font-family: arial black,avant garde;"><span style="font-size: xx-large;"><span style="font-size: large;"><span style="font-family: arial black,avant garde;"><span style="font-size: xx-large;"><span style="color: #000000;"><span style="font-size: x-large;"><span style="font-size: large;"><span style="font-family: arial black,avant garde;"><span style="font-size: xx-large;"><span style="color: #000000;"><span style="font-size: x-large;">Home</span></span></span></span></span></span></span></span></span></span></span></span></span>
into this:
<span style="font-size: x-large;color: #000000;font-family: arial black,avant garde;">Home</span>
How about this?
window.onload = function(){
var spans = document.querySelectorAll('span');
for (var i = 0; i < spans.length; i++)
{
if (spans[i].hasChildNodes() && spans[i].childNodes.length == 1
&& spans[i].firstChild.tagName == 'SPAN')
{
var parent = spans[i];
var child = spans[i].firstChild;
// Copy new properties to child.
for (var j = 0; j < parent.style.length; j++)
{
var prop = parent.style[j];
if (child.style.getPropertyValue(prop) === "")
{
child.style.setProperty(
prop,
parent.style.getPropertyValue(prop),
''
);
}
}
// Replace parent with child.
parent.parentNode.insertBefore(child, parent);
parent.parentNode.removeChild(parent);
}
}
}
This will find all spans, and merges those which only have a single span child.
This will disregard the use of !important, but I presume that's not being used anyway.
Also, it won't return exactly the same property values since getPropertyValue normalizes them.
Edit:
The above example code reduces the 13 spans in your example down to just one for me, though, Safari throws away some of the styles in the process.
It's fairly simplistic, of course, and just based on one example, since I have no idea what kind of span soup you might be running into, or what kind of results exactly you might be looking for.
For example, you might want to merge spans like this too: <p>foo<span style="font-size: x-large"> <span style="font-size: small">bar</span></span></p>? You'd end up losing the font size on that space, but that'll only make a tiny difference.
I'm sure there are plenty more cases like that, so it'll come down to how clean you want the end result to be, and how much time you want to spend on fixing all the corner cases.
You can find more information about the DOM methods I used in Mozilla's DOM reference for CSSStyleDeclaration and element, for example.