I'm kind of new at programming so bear with me because this is probably easy to solve but I just don't really have much practise.
I've been working on an automatic "daily tip" system, with tips each day for the first 3 months (60 days).
Basically a code that changes text every day for 60 days. After the 60 days, the idea I had was for the code to to reset and go back to the first tip, on the first day.
However, I can't seem to find a way to make the code place a different text when it gets back to sunday (0). It displays the first text again, instead of the second text I had planned.
I have no idea how to make it and have been stuck for 3 days thinking about this. I heard about these forums and decided to give it a go.
I don't know if I was clear, but if not, the idea is basically to:
if - Week1, sunday(0): Tecna: Need any guidance with our website? Visit the forums! They're the most practical way to get help from people just like you, as well as from the minimods! Plus, you get virtual coins for each message you post!
if - Week 2, sunday(0): Tecna: According to cyberpsychology, the nickname and avatar you chose and represent yourself with on the web can tell others a lot about you. So, choose carefully!
If you guys could find a way to make this work, I'd be very, very grateful! I have been browsing different topics related to this, but none attempted a text change if the week ends, resetting after 7 days. I want it to reset after 60.
function Horoscopo() {
var data = new Date();
var dia = data.getDay()
var mes = data.getMonth()
var diames = data.getDate()
// Weekly Tips
if (dia == 0) {
$("strong.tip").html("<span class='formalFont'>Why do you hear the sea in a seashell? Abandoned by the mollusks and other undersea animals, shells can be put up against your ear. The ambient noise around the shell will resonate inside the shell, creating a sound similar to crashing waves!</span>");
}
if (dia == 1) {
$("strong.tip").html("<span class='formalFont'>Need any guidance with our website? Visit the forums! They're the most practical way to get help from people just like you, as well as from the minimods! Plus, you get virtual coins for each message you post!</span>");
}
if (dia == 2) {
$("strong.tip").html("<span class='formalFont'>The forums are the best hangout spots to spend time with friends! Endless chats, tons of games, contests, stories... there's just so much fun! I don't even know where to begin!</span>");
}
if (dia == 3) {
$("strong.tip").html("<span class='formalFont'>Put your feet in the spotlight! I have two choices for you: round toe boots from the 60s, with a low heel or wedge -- or heels wrapped in soft legwarmers!</span>");
}
if (dia == 4) {
$("strong.tip").html("<span class='formalFont'>Vain Pirates? Not exactly! Pirates wore earrings because they believed piercing the ear could improve eyesight. It also helped them be recognized after death!</span>");
}
if (dia == 5) {
$("strong.tip").html("<span class='formalFont'>What's the largest city in the world? It's Tokyo, the capital of Japan with a staggering 35.7 million people! Second is New York, followed by Sao Paulo and Seoul!</span>");
}
if (dia == 6) {
$("strong.tip").html("<span class='formalFont'>The plants need plenty of water this season! Whatever you do, don't water them when the sun is high in the sky, that causes the leaves to burn! The ideal time is around sunset.</span>");
}
</script>
<body onload="Horoscopo();">
<div style="width:200px; float:left; padding-bottom:10px;">
<div style="padding-bottom:0px;">
<div style="background:url(../medias/images/Horoscope/totd_stella.png); width:207px; height:auto; background-repeat:no-repeat; background-color:#78cce4;">
<table style="border: 0px; cellpadding: 0px; cellspacing: 0px">
<tbody>
<tr>
<td>
<div class="menuBlackFont" style="text-align: left; color:#FFFFFF; padding-top: 5px; padding-left: 10px; padding-bottom: 120px;">
<span>Tip of the Day</span>
</div>
<div style="background:url(../medias/images/Horoscope/speech_bubble_top.png); width:200px; height:33px;">
</div>
<div style="background:url(../medias/images/Horoscope/speech_bubble_center.png);
width:200px; background-repeat:repeat-y;">
<div style="padding-left:15px; padding-right:15px;">
<strong class="tip"><span class="formalFont"></span></strong>
</div>
</div>
<div style="background:url(../medias/images/Horoscope/speech_bubble_bottom.png); width:200px; height:25px;"></div>
</td>
</tr>
</tbody>
</table>
</div>
<p></p>
</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.
At http://communitychessclub.com/ the chessboard diagrams have an annoying orange flash for 1/2 second before the image loads.
How can I css style this to make the background some other color than orange?
The relevant code that produces the diagram:
<div class='hide-for-small-only left set_pic' style = 'clear: left; overflow: auto; margin-top:0.5rem;'>
<a data-tooltip class="has-tip" title = ". Harold Stenzel - . Igor Nikolayev (FM)" href = "basic.php?game=5402">
<img class="box lazyload" height="256" width="256; background:beige; " alt="diagram" src="images/x.gif"
data-src= "./ChessImager/diagram.php?fen=r1bq1rk1/ppp3pp/8/3p4/1Q1Pn3/2N2N2/PP3PPP/R4RK1&square_size=30&ds_color=(121,146,164)&ls_color=(241,235,226)" /> </a> </div>
since you are using an external third party stylesheet ( and even link to it directly) you should look there by yourself.
http://foundation.zurb.com/docs/ color scheme seems to match your tone of orange
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'm trying to display an address right aligned in the footer of my page like this:
1234 south east Main St.
Nowhere, ID 45445
(555) 555-5555
in my markup I have this:
<address>
1234 south east Main St.
Nowhere, Id 45445
(555) 555-5555
</address>
How can I get this to layout properly without inserting <br /> in each line using css?
hey try to use this use this
.address
{
white-space:pre;
text-align:right;
}
You're going to have to add extra elements in there, either <br> as you suggest, or else something like:
<address>
<div class="street">1234 south east Main St.</div>
<div class="state">Nowhere, Id 45445</div>
<div class="telnum">(555) 555-5555</div>
</address>
First it's a good practice in this case to give an id to the address. Of course if you don't use another address again, it's not necessary. Then:
address#company_address
{
white-space: pre;
text-align: right;
}