I created an html page with days of the week
Mon Tue Wed Thu Fri Sat Sun
The corresponding page is linked to each day
I would need that when the page opens, the day is automatically highlighted based on the day of the week and that there is a bar under the day to highlight it
Example: if today is Friday, Fri becomes a different color than on other days
I've seen similar things on web pages, but I don't know where to start. Is there anyone who can help me?
Thanks
Jump to PostYou need to use a programming language such as javascript. I’m on my phone right now so I can’t really toe out code, but there’s a link to a resource here: https://www.w3schools.com/jsref/jsref_getday.asp
This …
Jump to PostHi,
What you’re asking for involves logic. If this, then that. If it’s this day of the week, then do that. This means your webpage doesn’t look 100% exactly the same 100% of the time.
Therefore, you need a programming language (other than HTML markup) to do what you …
Jump to PostIn PHP, you can make use of the date function
Something like this should work, although this code is completely untested, so I'm not sure if it has any typos or is bug-free.
…
Jump to PostCheck out momentJS, I use momentJS for anything date & time related.
You include the JS file in a script tag
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js">you generally put this inside the<head>…
You need to use a programming language such as javascript. I’m on my phone right now so I can’t really toe out code, but there’s a link to a resource here: https://www.w3schools.com/jsref/jsref_getday.asp
This lets your web browser know the day of the week. You then just need to use javascript to color the text differently based on the day.
I looked at the link you posted but couldn't find what I was looking for. Maybe even my little experience in this area. I'm taking my first steps. Maybe I try to re-explain what I need, maybe I was unclear.
If today is Saturday
color red (the color of my choice) the word Sat
and put the bar below.
This example:
Thanks again for your patience and help
Hi,
What you’re asking for involves logic. If this, then that. If it’s this day of the week, then do that. This means your webpage doesn’t look 100% exactly the same 100% of the time.
Therefore, you need a programming language (other than HTML markup) to do what you want.
In my previous post, I suggested you use Javascript since it is used and understood by virtually every modern day web browser, and you can just stick a couple of lines of javascript code in your html to do what you want.
However, I’m now seeing that you’ve tagged this question PHP. Php is a server side language that takes some configuring of your web server in order to set up and use. Are you already using php? You can use php to accomplish what you’re looking to do as well, although, unless you’re already using php for this project, it’s a little more complicated to get started.
Hi Dani,
first of all I have to thank you for your availability and kindness.
What I am asking is to try to carry out a project that is taking me a long time not because it is complicated, but because I am self-taught, without any kind of training. What I can do is a set of copy / paste, suggestions, notions acquired wandering here and there on the web. I've been stopping at this for two weeks now and I can't seem to get through. I found this solution on a web page dedicated to a cinema and it was just what it did for me. I tried downloading that page to understand how it works but nothing. (I don't know if possible attach the link). I have already asked you for help for another matter and I was able to make it happen, it was in Php. If you have to use Php to solve the problem, so be it, guiding me step by step, maybe I will succeed.
Thanks again.
In PHP, you can make use of the date function
Something like this should work, although this code is completely untested, so I'm not sure if it has any typos or is bug-free.
<?php
// Set the day of week variable to 0 (for Sunday) through 6 (for Saturday)
$day_of_week = date('w');
?>
<html>
<head>
<title>Calendar</title>
<!-- CSS stylesheet -->
<style type="text/css">
<!--
We say that the nth <td> element of #calendar-days should be colored red
where n is the value of day_of_week plus 1
So, if it's Tuesday, $day_of_week should be set to 2, so we color the 3rd <td> element red
-->
#calendar-days td:nth-of-type(<?= $day_of_week ?> + 1) { color: red }
</style>
</head>
<body>
<!-- First Row of Calendar Table -->
<table>
<tr id="calendar-days">
<td>Sunday</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
</tr>
</table>
</body>
</html>Check out momentJS, I use momentJS for anything date & time related.
You include the JS file in a script tag <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"> you generally put this inside the <head> tag
Then put the actual script AFTER the html divs where you want to do the conditional, as the html elements need to be created before the script can run and find them:
<p class='monElements'>Mon</p>
<p class='tueElements'>Tue</p>
<p class='wedElements'>Wed</p>
<p class='thuElements'>Thu</p>
<p class='friElements'>Fri</p>
<p class='satElements'>Sat</p>
<p class='sunElements'>Sun</p>
<script type='text/javascript'>
if(moment().format('E') == 1){
//moment is a datetime object, no specification defaults to the exact time NOW
//.format('E') tells it to return the day of week, 1 is monday
document.querySelectorAll('.monElements').forEach(function(elements){
elements.style.color = 'red';
});
//updates all elements with the class name "monElements" to have the style color = red
}
</script>I just discovered document.querySelectorAll putting together the example for you, pays off helping out!
Also make use of the browser console when you are testing javascript, you can test code in there to make sure it works and test what is wrong, ctrl+shift+j on Chrome and ctrl+shift+k on firefox. The console is like a javascript command line, you write javascript and it runs it live on the page. It will also tell you errors or notices in the javascript on the current webpage.
For instance you can put document.querySelectorAll('a').forEach(function(elements){elements.style.color = 'red';}); into the console and run it to turn all of the a tags on your page to red, I used this to test the code in my reply (as the moment JS site has the moment JS script loaded on it I set all the a tags on the momentJS home page red cause it's monday).
Thanks as soon as I get home I will try your solution. I will let you know. Good day
I tried to enter the code you wrote down but I can not get anything to work, surely I am wrong to make the entries. Let's see if I understand:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js">inside the <head> tag.
This is the code I have on my page:
<!-- Section -->
<div class="container section" id="afterHeader">
<div class="row">
<div class="col-sm-12">
<div class="tabs movies">
<ul>
<li><a href="#mon">Mon</a></li>
<li><a href="#tue">Tue</a></li>
<li><a href="#wed">Today</a></li>
<li><a href="#thu">Thu</a></li>
<li><a href="#fri">Fri</a></li>
<li><a href="#sat">Sat</a></li>
<li><a href="#sun">Sun</a></li>
</ul>
<div id="mon">
etc etc etcWhere should I enter yours?
Do I need to download some other files separately to put in the site directory?
I'm going crazy for this !!!!
darkbox, have you tried my PHP solution?
Dani, yes I tried your code but it doesn't work. Surely it's my problem, I got a doubt: the part from "html" ok I know where to insert it, this?
<?php
// Set the day of week variable to 0 (for Sunday) through 6 (for Saturday)
$day_of_week = date('w');
?>Do I need to create a file to put in the directory and how to name it? Excuse me, but I'm a little clueless!
Hey Darkbox, I wrote a simple function to highlight based on the day of week. I made it using the code in put in your reply so it should fit to your page.
<script type='text/javascript'>
function displayMoviesForDay(dayOfWeek = 0){
document.querySelectorAll('.movieDiv').forEach(function(elements){
elements.style.color = 'unset';//reset color of all movies
});
document.querySelectorAll('.movieDiv'+dayOfWeek).forEach(function(elements){
elements.style.color = 'red';//highlight only movie on that day
});
}
</script>
<div class="container section" id="afterHeader">
<div class="row">
<div class="col-sm-12">
<div class="tabs movies">
<ul>
<li><a href="javascript:" onclick="displayMoviesForDay(1);">Mon</a></li>
<li><a href="javascript:" onclick="displayMoviesForDay(2);">Tue</a></li>
<li><a href="javascript:" onclick="displayMoviesForDay(3);">Today</a></li>
<li><a href="javascript:" onclick="displayMoviesForDay(4);">Thu</a></li>
<li><a href="javascript:" onclick="displayMoviesForDay(5);">Fri</a></li>
<li><a href="javascript:" onclick="displayMoviesForDay(6);">Sat</a></li>
<li><a href="javascript:" onclick="displayMoviesForDay(0);">Sun</a></li>
</ul>
<div id="mon">
<div class='movieDiv movieDiv1'>a Mon Movie</div>
<div class='movieDiv movieDiv1'>a Mon Movie</div>
<div class='movieDiv movieDiv1'>a Mon Movie</div>
<div class='movieDiv movieDiv1'>a Mon Movie</div>
</div>
<div id="tue">
<div class='movieDiv movieDiv2'>a Tue Movie</div>
<div class='movieDiv movieDiv2'>a Tue Movie</div>
<div class='movieDiv movieDiv2'>a Tue Movie</div>
<div class='movieDiv movieDiv2'>a Tue Movie</div>
</div>
<div id="wed">
<div class='movieDiv movieDiv3'>a Wed Movie</div>
<div class='movieDiv movieDiv3'>a Wed Movie</div>
<div class='movieDiv movieDiv3'>a Wed Movie</div>
<div class='movieDiv movieDiv3'>a Wed Movie</div>
</div>
<div id="thu">
<div class='movieDiv movieDiv4'>a Thu Movie</div>
<div class='movieDiv movieDiv4'>a Thu Movie</div>
<div class='movieDiv movieDiv4'>a Thu Movie</div>
<div class='movieDiv movieDiv4'>a Thu Movie</div>
</div>
<div id="fri">
<div class='movieDiv movieDiv5'>a Fri Movie</div>
<div class='movieDiv movieDiv5'>a Fri Movie</div>
<div class='movieDiv movieDiv5'>a Fri Movie</div>
<div class='movieDiv movieDiv5'>a Fri Movie</div>
</div>
<div id="sat">
<div class='movieDiv movieDiv6'>a Sat Movie</div>
<div class='movieDiv movieDiv6'>a Sat Movie</div>
<div class='movieDiv movieDiv6'>a Sat Movie</div>
<div class='movieDiv movieDiv6'>a Sat Movie</div>
</div>
<div id="sun">
<div class='movieDiv movieDiv0'>a Sun Movie</div>
<div class='movieDiv movieDiv0'>a Sun Movie</div>
<div class='movieDiv movieDiv0'>a Sun Movie</div>
<div class='movieDiv movieDiv0'>a Sun Movie</div>
</div>
</div>
</div>
</div>
</div>When you generate the html for your movie divs you just need to add the day of week into the code through PHP like Dani suggested:
<div class='movieDiv movieDiv<?php echo date('w', strtotime('2021-01-10'));?>'>a <?php echo date('w', strtotime('2021-01-10'));?> Movie</div>
<div class='movieDiv movieDiv<?php echo date('w', strtotime('2021-01-11'));?>'>a <?php echo date('w', strtotime('2021-01-11'));?> Movie</div>
<div class='movieDiv movieDiv<?php echo date('w', strtotime('2021-01-12'));?>'>a <?php echo date('w', strtotime('2021-01-12'));?> Movie</div>
<div class='movieDiv movieDiv<?php echo date('w', strtotime('2021-01-13'));?>'>a <?php echo date('w', strtotime('2021-01-13'));?> Movie</div>
<div class='movieDiv movieDiv<?php echo date('w', strtotime('2021-01-14'));?>'>a <?php echo date('w', strtotime('2021-01-14'));?> Movie</div>
<div class='movieDiv movieDiv<?php echo date('w', strtotime('2021-01-15'));?>'>a <?php echo date('w', strtotime('2021-01-15'));?> Movie</div>
<div class='movieDiv movieDiv<?php echo date('w', strtotime('2021-01-16'));?>'>a <?php echo date('w', strtotime('2021-01-16'));?> Movie</div>I put in example dates so you can see it, but the value of strtotime should be the variable that has the date of the movie in your database - so it calculates the day of week for you. or if you are manually just writing the code then just do <div class='movieDiv movieDiv0'>a Sunday Movie</div> for each movie on sunday and change the 0 to whichever day you want it to be highlighted for.
Hi Biim, first of all I thank you for your kindness, patience and availability. Today I tried all afternoon trying to enter the various codes but nothing. This is the link to see the page. Click Here The page is loaded in html and php. I did the php conversion via a tool, but I'm not sure it's right. Here the codes:
Code Html
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>xxx</title>
<link rel="icon" type="image/png" href="images/favicon.png" />
<link href="css/slick.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/venobox.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<!-- Navigation -->
<div class="navbar" role="navigation">
<div class="container section" id="afterHeader">
<div class="row">
<div class="col-sm-12">
<div class="tabs movies">
<a class="style1"><span class="style2">Programmazione...</span></a>
<ul>
<li><a href="#thu">Gio</a></li>
<li><a href="#fri">Ven</a></li>
<li><a href="#sat">Sab</a></li>
<li><a href="#sun">Dom</a></li>
<li><a href="#mon">Lun</a></li>
<li><a href="#tue">Mar</a></li>
<li><a href="#wed">Mer</a></li>
</ul>
<div id="mon">
<div class="row movie-tabs">
<div class="col-md-2 col-sm-3">
<a href="images/chiuso.jpg">
<img src="images/chiuso.jpg" alt="Chiuso" />
</a>
</div>
<div class="col-md-10 col-sm-9">
<h3 class="no-underline">CLOSED MON<br>
</h3>
<p></p>
<div class="row">
<div class="col-md-4 col-sm-3 running-time">
<hr class="space-10" />
</div>
</div>
</div>
</div>
</div>
<div id="tue">
<div class="row movie-tabs">
<div class="col-md-2 col-sm-3">
<a href="images/chiuso.jpg">
<img src="images/chiuso.jpg" alt="Chiuso" />
</a>
</div>
<div class="col-md-10 col-sm-9">
<h3 class="no-underline">CLOSED TUE<br>
</h3>
<p></p>
<div class="row">
<div class="col-md-4 col-sm-3 running-time">
<hr class="space-10" />
</div>
</div>
</div>
</div>
</div>
<div id="wed">
<div class="row movie-tabs">
<div class="col-md-2 col-sm-3">
<a href="images/chiuso.jpg">
<img src="images/chiuso.jpg" alt="Chiuso" />
</a>
</div>
<div class="col-md-10 col-sm-9">
<h3 class="no-underline">CLOSED WED<br>
</h3>
<p></p>
<div class="row">
<div class="col-md-4 col-sm-3 running-time">
<hr class="space-10" />
</div>
</div>
</div>
</div>
</div>
<div id="thu">
<div class="row movie-tabs">
<div class="col-md-2 col-sm-3">
<a href="images/chiuso.jpg">
<img src="images/chiuso.jpg" alt="Chiuso" />
</a>
</div>
<div class="col-md-10 col-sm-9">
<h3 class="no-underline">CLOSED THU<br>
</h3>
<p></p>
<div class="row">
<div class="col-md-4 col-sm-3 running-time">
<hr class="space-10" />
</div>
</div>
</div>
</div>
</div>
<div id="fri">
<div class="row movie-tabs">
<div class="col-md-2 col-sm-3">
<a href="images/chiuso.jpg">
<img src="images/chiuso.jpg" alt="Chiuso" />
</a>
</div>
<div class="col-md-10 col-sm-9">
<h3 class="no-underline">CLOSED FRI<br>
</h3>
<p></p>
<div class="row">
<div class="col-md-4 col-sm-3 running-time">
<hr class="space-10" />
</div>
</div>
</div>
</div>
</div>
<div id="sat">
<div class="row movie-tabs">
<div class="col-md-2 col-sm-3">
<a href="images/chiuso.jpg">
<img src="images/chiuso.jpg" alt="Chiuso" />
</a>
</div>
<div class="col-md-10 col-sm-9">
<h3 class="no-underline">CLOSED SAT<br>
</h3>
<p></p>
<div class="row">
<div class="col-md-4 col-sm-3 running-time">
<hr class="space-10" />
</div>
</div>
</div>
</div>
</div>
<div id="sun">
<div class="row movie-tabs">
<div class="col-md-2 col-sm-3">
<a href="images/chiuso.jpg">
<img src="images/chiuso.jpg" alt="Chiuso" />
</a>
</div>
<div class="col-md-10 col-sm-9">
<h3 class="no-underline">CLOSED SUN<br>
</h3>
<p></p>
<div class="col-md-4 col-sm-3 running-time">
<hr class="space-10" />
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/headhesive.min.js"></script>
<script src="js/matchHeight.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/venobox.min.js"></script>
<script src="https://use.fontawesome.com/4dfd2d448a.js"></script>
<script src="https://use.fontawesome.com/6809180726.js"></script>
<script src="js/custom.js"></script>
</body>
</html>Code Php:
<?php
echo "<!DOCTYPE html>\n";
echo "<html lang=\"en\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n";
echo " <head>\n";
echo " <meta charset=\"utf-8\">\n";
echo " <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n";
echo " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n";
echo " <title>xxx</title>\n";
echo " <link rel=\"icon\" type=\"image/png\" href=\"images/favicon.png\" />\n";
echo " <link href=\"css/slick.css\" rel=\"stylesheet\">\n";
echo " <link href=\"css/bootstrap.min.css\" rel=\"stylesheet\">\n";
echo " <link href=\"css/venobox.css\" rel=\"stylesheet\">\n";
echo " <link href=\"css/style.css\" rel=\"stylesheet\">\n";
echo " <link href=\"https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700\" rel=\"stylesheet\">\n";
echo " <link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n";
echo " </head>\n";
echo " <body>\n";
echo " <div class=\"wrapper\">\n";
echo " <!-- Navigation -->\n";
echo " <div class=\"navbar\" role=\"navigation\">\n";
echo " <div class=\"container section\" id=\"afterHeader\">\n";
echo " <div class=\"row\">\n";
echo " <div class=\"col-sm-12\">\n";
echo " <div class=\"tabs movies\">\n";
echo " <a class=\"style1\"><span class=\"style2\">Programmazione...</span></a>\n";
echo " <ul>\n";
echo " <li><a href=\"#thu\">Gio</a></li>\n";
echo " <li><a href=\"#fri\">Ven</a></li>\n";
echo " <li><a href=\"#sat\">Sab</a></li>\n";
echo " <li><a href=\"#sun\">Dom</a></li>\n";
echo " <li><a href=\"#mon\">Lun</a></li>\n";
echo " <li><a href=\"#tue\">Mar</a></li>\n";
echo " <li><a href=\"#wed\">Mer</a></li> \n";
echo " </ul>\n";
echo " <div id=\"mon\">\n";
echo " <div class=\"row movie-tabs\">\n";
echo " <div class=\"col-md-2 col-sm-3\">\n";
echo " <a href=\"images/chiuso.jpg\">\n";
echo " <img src=\"images/chiuso.jpg\" alt=\"Chiuso\" />\n";
echo " </a>\n";
echo " </div>\n";
echo " <div class=\"col-md-10 col-sm-9\">\n";
echo " <h3 class=\"no-underline\">CLOSED MON<br>\n";
echo " </h3>\n";
echo " <p></p> \n";
echo " <div class=\"row\">\n";
echo " <div class=\"col-md-4 col-sm-3 running-time\">\n";
echo " <hr class=\"space-10\" />\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo " </div> \n";
echo " </div>\n";
echo " <div id=\"tue\"> \n";
echo " <div class=\"row movie-tabs\">\n";
echo " <div class=\"col-md-2 col-sm-3\">\n";
echo " <a href=\"images/chiuso.jpg\">\n";
echo " <img src=\"images/chiuso.jpg\" alt=\"Chiuso\" />\n";
echo " </a>\n";
echo " </div>\n";
echo " <div class=\"col-md-10 col-sm-9\">\n";
echo " <h3 class=\"no-underline\">CLOSED TUE<br>\n";
echo " </h3>\n";
echo " <p></p> \n";
echo " <div class=\"row\">\n";
echo " <div class=\"col-md-4 col-sm-3 running-time\">\n";
echo " <hr class=\"space-10\" />\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo " <div id=\"wed\">\n";
echo " <div class=\"row movie-tabs\">\n";
echo " <div class=\"col-md-2 col-sm-3\">\n";
echo " <a href=\"images/chiuso.jpg\">\n";
echo " <img src=\"images/chiuso.jpg\" alt=\"Chiuso\" />\n";
echo " </a>\n";
echo " </div>\n";
echo " <div class=\"col-md-10 col-sm-9\">\n";
echo " <h3 class=\"no-underline\">CLOSED WED<br>\n";
echo " </h3>\n";
echo " <p></p> \n";
echo " <div class=\"row\">\n";
echo " <div class=\"col-md-4 col-sm-3 running-time\">\n";
echo " <hr class=\"space-10\" /> \n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo " </div> \n";
echo " </div>\n";
echo " <div id=\"thu\">\n";
echo " <div class=\"row movie-tabs\">\n";
echo " <div class=\"col-md-2 col-sm-3\">\n";
echo " <a href=\"images/chiuso.jpg\">\n";
echo " <img src=\"images/chiuso.jpg\" alt=\"Chiuso\" />\n";
echo " </a>\n";
echo " </div>\n";
echo " <div class=\"col-md-10 col-sm-9\">\n";
echo " <h3 class=\"no-underline\">CLOSED THU<br>\n";
echo " </h3>\n";
echo " <p></p> \n";
echo " <div class=\"row\">\n";
echo " <div class=\"col-md-4 col-sm-3 running-time\">\n";
echo " <hr class=\"space-10\" />\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo " <div id=\"fri\">\n";
echo " <div class=\"row movie-tabs\">\n";
echo " <div class=\"col-md-2 col-sm-3\">\n";
echo " <a href=\"images/chiuso.jpg\">\n";
echo " <img src=\"images/chiuso.jpg\" alt=\"Chiuso\" />\n";
echo " </a>\n";
echo " </div>\n";
echo " <div class=\"col-md-10 col-sm-9\">\n";
echo " <h3 class=\"no-underline\">CLOSED FRI<br>\n";
echo " </h3>\n";
echo " <p></p> \n";
echo " <div class=\"row\">\n";
echo " <div class=\"col-md-4 col-sm-3 running-time\">\n";
echo " <hr class=\"space-10\" />\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo " <div id=\"sat\">\n";
echo " <div class=\"row movie-tabs\">\n";
echo " <div class=\"col-md-2 col-sm-3\">\n";
echo " <a href=\"images/chiuso.jpg\">\n";
echo " <img src=\"images/chiuso.jpg\" alt=\"Chiuso\" />\n";
echo " </a>\n";
echo " </div>\n";
echo " <div class=\"col-md-10 col-sm-9\">\n";
echo " <h3 class=\"no-underline\">CLOSED SAT<br>\n";
echo " </h3>\n";
echo " <p></p> \n";
echo " <div class=\"row\">\n";
echo " <div class=\"col-md-4 col-sm-3 running-time\">\n";
echo " <hr class=\"space-10\" />\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo " </div> \n";
echo " </div>\n";
echo " <div id=\"sun\">\n";
echo " <div class=\"row movie-tabs\">\n";
echo " <div class=\"col-md-2 col-sm-3\">\n";
echo " <a href=\"images/chiuso.jpg\">\n";
echo " <img src=\"images/chiuso.jpg\" alt=\"Chiuso\" />\n";
echo " </a>\n";
echo " </div>\n";
echo " <div class=\"col-md-10 col-sm-9\">\n";
echo " <h3 class=\"no-underline\">CLOSED SUN<br>\n";
echo " </h3>\n";
echo " <p></p> \n";
echo " <div class=\"col-md-4 col-sm-3 running-time\">\n";
echo " <hr class=\"space-10\" />\n";
echo " </div>\n";
echo " </div>\n";
echo " </div>\n";
echo " </div> \n";
echo " </div>\n";
echo " <script src=\"js/jquery-2.2.4.min.js\"></script>\n";
echo " <script src=\"js/jquery-ui.min.js\"></script>\n";
echo " <script src=\"js/bootstrap.min.js\"></script>\n";
echo " <script src=\"js/headhesive.min.js\"></script>\n";
echo " <script src=\"js/matchHeight.min.js\"></script>\n";
echo " <script src=\"js/modernizr.custom.js\"></script>\n";
echo " <script src=\"js/slick.min.js\"></script>\n";
echo " <script src=\"js/venobox.min.js\"></script>\n";
echo " <script src=\"https://use.fontawesome.com/4dfd2d448a.js\"></script>\n";
echo " <script src=\"https://use.fontawesome.com/6809180726.js\"></script>\n";
echo " <script src=\"js/custom.js\"></script>\n";
echo " </body>\n";
echo "</html>";
?>Would you be able to copy your codes and Dani's inside, at least I can understand where I'm wrong and what I "don't". I try to learn, but difficult!
Thanks again
Sorry for the delay, I don't go on the internet that frequently (suprisingly!) I am doing a lot on local networks and internet is restricted hence I don't see my emails often so it is nothing personal.
I gave an example of how you can use php around HTML, the PHP you posted is pretty pointless, it is just a text print out of HTML through PHP. PHP is PRE hypertext processing, you use it to connect to a database for instance and process data before it gets sent to the user, or do some calculations to generate HTML for you etc.
I got this working in my browser for you, I think you should learn the basics on javascript and what it is for and PHP and what that is for. I find when I am using these languages that things get a lot simpler when you understand and find out all about each language cause then you can think with it and solve your problems better. It sounds like you would like to use different bits of javascript to make the page more immersive and do things for the user and look nicer - so I would go down that road.
<?php
$title = 'Some Title: '.date("Y-m-d");
?>
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $title;?></title>
<link rel="icon" type="image/png" href="images/favicon.png" />
<link href="css/slick.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/venobox.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type='text/javascript'>
function displayMoviesForDay(dayOfWeek = 0){
document.querySelectorAll('.movieDiv').forEach(function(elements){
elements.style.color = 'unset';//reset color of all movies
});
document.querySelectorAll('.movieDiv'+dayOfWeek).forEach(function(elements){
elements.style.color = 'red';//highlight only movie on that day
});
}
</script>
</head>
<body>
<div class="wrapper">
<!-- Navigation -->
<div class="navbar" role="navigation">
<div class="container section" id="afterHeader">
<div class="row">
<div class="col-sm-12">
<div class="tabs movies">
<a class="style1"><span class="style2">Programmazione...</span></a>
<ul>
<li><a href="#thu" onclick="displayMoviesForDay(1);">Gio</a></li>
<li><a href="#fri" onclick="displayMoviesForDay(2);">Ven</a></li>
<li><a href="#sat" onclick="displayMoviesForDay(3);">Sab</a></li>
<li><a href="#sun" onclick="displayMoviesForDay(4);">Dom</a></li>
<li><a href="#mon" onclick="displayMoviesForDay(5);">Lun</a></li>
<li><a href="#tue" onclick="displayMoviesForDay(6);">Mar</a></li>
<li><a href="#wed" onclick="displayMoviesForDay(0);">Mer</a></li>
</ul>
<div id="mon">
<div class="row movie-tabs">
<div class="col-md-2 col-sm-3">
<a href="images/chiuso.jpg" class="movieDiv movieDiv1">
<img src="images/chiuso.jpg" alt="Chiuso" />
</a>
</div>
<div class="col-md-10 col-sm-9">
<h3 class="no-underline">CLOSED MON<br>
</h3>
<p></p>
<div class="row">
<div class="col-md-4 col-sm-3 running-time">
<hr class="space-10" />
</div>
</div>
</div>
</div>
</div>
<div id="tue">
<div class="row movie-tabs">
<div class="col-md-2 col-sm-3">
<a href="images/chiuso.jpg" class="movieDiv movieDiv2">
<img src="images/chiuso.jpg" alt="Chiuso" />
</a>
</div>
<div class="col-md-10 col-sm-9">
<h3 class="no-underline">CLOSED TUE<br>
</h3>
<p></p>
<div class="row">
<div class="col-md-4 col-sm-3 running-time">
<hr class="space-10" />
</div>
</div>
</div>
</div>
</div>
<div id="wed">
<div class="row movie-tabs">
<div class="col-md-2 col-sm-3">
<a href="images/chiuso.jpg" class="movieDiv movieDiv3">
<img src="images/chiuso.jpg" alt="Chiuso" />
</a>
</div>
<div class="col-md-10 col-sm-9">
<h3 class="no-underline">CLOSED WED<br>
</h3>
<p></p>
<div class="row">
<div class="col-md-4 col-sm-3 running-time">
<hr class="space-10" />
</div>
</div>
</div>
</div>
</div>
<div id="thu">
<div class="row movie-tabs">
<div class="col-md-2 col-sm-3">
<a href="images/chiuso.jpg" class="movieDiv movieDiv4">
<img src="images/chiuso.jpg" alt="Chiuso" />
</a>
</div>
<div class="col-md-10 col-sm-9">
<h3 class="no-underline">CLOSED THU<br>
</h3>
<p></p>
<div class="row">
<div class="col-md-4 col-sm-3 running-time">
<hr class="space-10" />
</div>
</div>
</div>
</div>
</div>
<div id="fri">
<div class="row movie-tabs">
<div class="col-md-2 col-sm-3">
<a href="images/chiuso.jpg" class="movieDiv movieDiv5">
<img src="images/chiuso.jpg" alt="Chiuso" />
</a>
</div>
<div class="col-md-10 col-sm-9">
<h3 class="no-underline">CLOSED FRI<br>
</h3>
<p></p>
<div class="row">
<div class="col-md-4 col-sm-3 running-time">
<hr class="space-10" />
</div>
</div>
</div>
</div>
</div>
<div id="sat">
<div class="row movie-tabs">
<div class="col-md-2 col-sm-3">
<a href="images/chiuso.jpg" class="movieDiv movieDiv6">
<img src="images/chiuso.jpg" alt="Chiuso" />
</a>
</div>
<div class="col-md-10 col-sm-9">
<h3 class="no-underline">CLOSED SAT<br>
</h3>
<p></p>
<div class="row">
<div class="col-md-4 col-sm-3 running-time">
<hr class="space-10" />
</div>
</div>
</div>
</div>
</div>
<div id="sun">
<div class="row movie-tabs">
<div class="col-md-2 col-sm-3">
<a href="images/chiuso.jpg" class="movieDiv movieDiv0">
<img src="images/chiuso.jpg" alt="Chiuso" />
</a>
</div>
<div class="col-md-10 col-sm-9">
<h3 class="no-underline">CLOSED SUN<br>
</h3>
<p></p>
<div class="col-md-4 col-sm-3 running-time">
<hr class="space-10" />
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/headhesive.min.js"></script>
<script src="js/matchHeight.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/venobox.min.js"></script>
<script src="https://use.fontawesome.com/4dfd2d448a.js"></script>
<script src="https://use.fontawesome.com/6809180726.js"></script>
<script src="js/custom.js"></script>
</body>
</html>We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.