I would be great doing things like
<define tag="myTag" options="3">
<h1> #1 </h1>
<ul>
<li> #2
<li> #3
</ul>
</define>
and then use it:
<myTag option="foo" option="bar" option="bean" />
I regard macros as
really big advantage.
A work-around is using a macro processor like m4, or using php to simulate the macros efect. Any other technique to consider?
Perhaps obvious, but the C preprocessor can do the job.
index._html
#define _em(a) <em> a </em>
#define _image(a, b) <img src="a" b/>
#define _list(a, b, c) <h1> a </h1> \
<ul> \
<li> b </li> \
<li> c </li> \
</ul>
<!-- ___________________________________________________ -->
<!doctype html>
<html>
#define _theTile The Bar Title
#include "head._html"
<body>
_list(foo, bar, bean)
This is really _em(great)
_image(media/cat.jpg, )
_image(media/dog.jpg, width="25%" height="10px")
</body>
</html>
Being head._html
<head>
<meta charset="utf-8"/>
<title> _theTile </title>
<!-- more stuff ... -->
</head>
Then,
cpp -P index._html > index.html
produces:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title> The Bar Title </title>
<!-- more stuff ... -->
</head>
<body>
<h1> foo </h1> <ul> <li> bar </li> <li> bean </li> </ul>
This is really <em> great </em>
<img src="media/cat.jpg" />
<img src="media/dog.jpg" width="25%" height="10px"/>
</body>
</html>
If you want to do it in the text-editor level, consider using Zen Coding.
In javascript
<!doctype html>
<html>
<script>
function em(a) {
var text = " <em> $a </em>".replace("$a", a);
document.write(text);
}
function image(a, b) {
var text = '<img src="$a" $b />'.replace("$a", a).replace("$b", b);
document.write( text );
}
function list(a, b, c) {
var text = '<h1> $a </h1> \
<ul> \
<li> $b </li> \
<li> $c </li> \
</ul>'
.replace("$a", a).replace("$b", b).replace("$c", c);
document.write (text);
}
</script>
<body>
<p>
<script> list("foo", "bar", "bean") </script>
<p> This is really <script> em("great") </script>
<p>
<script> image ("prosper.jpg", 'width="35%"') </script>
</body>
</html>
Pros: no prepocessing needed.
Cons: A bit annoying (always write <script> </script>). No direct way to include external html (afaik).
Now with php:
<!-- index.php -->
<?php
function list_($a, $b, $c) {
echo "
<h1> $a </h1>
<ul>
<li> $b </li>
<li> $c </li>
</ul>
";
}
function em($a) {
echo "<em> $a </em>";
}
function image($a, $b) {
echo "<img src=\"$a\" $b/>";
}
?>
<!doctype html>
<html>
<?php
$theTitle='The Bar Title';
include 'head.php';
?>
<body>
<? list_(foo, bar, bean) ?>
This is really <? em(great) ?>
<? image('media/cat.jpg', '' ) ?>
<? image('media/dog.jpg', 'width="25%" height="10px"') ?>
</body>
</html>
<head>
<meta charset="utf-8"/>
<title> <? echo "$theTitle"; ?> </title>
<!-- more stuff ... -->
</head>
Then
$ php index.php > index.html
gives
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title> The Bar Title </title>
<!-- more stuff ... -->
</head>
<body>
<h1> foo </h1>
<ul>
<li> bar </li>
<li> bean </li>
</ul>
This is really <em> great </em>
<img src="media/cat.jpg" />
<img src="media/dog.jpg" width="25%" height="10px"/>
</body>
</html>
I've written a single-class, zero-installation macro system aimed straight at HTML coding. You'll find it here:
aa_macro.py
Related
<?= data["message"] ?>. <br />
<br />
<!-- <?=
$documentFolder = \".data["documentFolder"].\";
?> -->
<br>
<a href=""
data["message"] evaluates fine
But I'm having trouble updating the href between the quotes;
I've tried escape characters, building the html element separately but that is not evaluated
any ideas/suggestions welcome
Building an anchor tag href with templated html
GS:
I just made a dialog to test it
function myfunk() {
let t = HtmlService.createTemplateFromFile('ah1');
t.data ={url:"https://google.com",label:"Link"};
let ui = t.evaluate();
Logger.log(ui);
SpreadsheetApp.getUi().showModelessDialog(ui,'Modeless Dialog');
}
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div>
<?=data.label?>
</div>
</body>
</html>
Dialog:
I am following this Link to understand the basic framework of PHP Web app but I am not able to understand how can I switch back and forth to the different layouts (Articles, Portfolio) through navigation bar?
All different layout must be like index.php.
Image you have articles.php and portfolio.php. There content would be like:
Articles.php:
<?php
// load up your config file
require_once("/path/to/resources/config.php");
require_once(TEMPLATES_PATH . "/header.php");
?>
<div id="container">
<div id="content">
<!-- Your article content here!!! -->
</div>
<?php
require_once(TEMPLATES_PATH . "/rightPanel.php");
?>
</div>
<?php
require_once(TEMPLATES_PATH . "/footer.php");
?>
and portfolio.php:
<?php
// load up your config file
require_once("/path/to/resources/config.php");
require_once(TEMPLATES_PATH . "/header.php");
?>
<div id="container">
<div id="content">
<!-- Your portfolio content here!!! -->
</div>
<?php
require_once(TEMPLATES_PATH . "/rightPanel.php");
?>
</div>
<?php
require_once(TEMPLATES_PATH . "/footer.php");
?>
But everytime you add a new page, you must update your header.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple Site</title>
</head>
<body>
<div id="header">
<h1>Simple Site</h1>
<ul class="nav global">
<li>Home</li>
<li>Articles</li>
<li>Portfolio</li>
<li>Any other page</li>
</ul>
</div>
This is what actually I wanted to achieve
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Calculator</li>
<li>Blog</li>
<li>About</li>
</ul>
</nav>
I am sending the page variable to the index and then it is rendering the layout accordingly through this way.
if (isset($_GET["page"])){
$page=$_GET["page"];
}
else {
$page = "home";
}
renderLayoutWithContentFile($page .".php", $variables);
tried to ask this question earlier but made a total mess of it. so thought i'd try it again but clearer this time.
how can you get php variables to display in loaded content using JQuery?
index.php:
<!doctype html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
$(document).ready(function(){
$('#clickMe').click(function(){
$('#parent').load('loaded.php #child', {},function(){
});
});
});
</script>
</head>
<?php
session_start();
$test = "this should display php string";
$_SESSION['another'] = "Session variable String";
echo ' tests to see if they work below <br>';
echo $test."<br>";
echo $_SESSION['another']."<br><br>";
?>
<button name="clickMe" id="clickMe" class="clickMe">Click me</button>
<div class="parent" name="parent" id="parent" style="background-color:yellow; height:200px; width:200px;">
</div>
<body>
</body>
</html>
loaded.php:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div name="child" id="child" class="child">
<p1> html loads fine..</p1><br>
<?php echo $test ?><br>
<?php echo $_SESSION['another'] ?>
</div>
</body>
</html>
As stated by #Fred -ii- in the comments, you only have to fetch the session in your index.php file to do this.
If you want to get a part of another web page inside index.php :
Your index.php should contain this call :
$(document).ready(function(){
$('#clickMe').click(function(){
$('#parent').load('loaded.php'); // No need for additional parameters
});
});
You don't need to select a part of the HTML, return just what you need :
loaded.php :
<?php session_start() ?>
<p>Example text</p>
<?php echo $_SESSION['another'] ?>
hi i'm doing my web programming h/w and got a problem
this is code :
<!DOCTYPE html>
<html>
<head>
<title>Music Viewer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="http://www.cs.washington.edu/education/courses/cse190m/09sp/labs/3-music/viewer.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="header">
<h1>190M Music Playlist Viewer</h1>
<h2>Search Through Your Playlists and Music</h2>
</div>
<ul>
<?php
$songs = glob("songs/*.mp3");
foreach ($songs as $songfile) {
$text = file_get_contents($songfile);
file_put_contents($songfile, strrev($text));
basename($songfile)
?>
<li><a href <?= "$songfile" ?>> <?= basename($songfile) ?></a> </li>
<?php
}
?>
<?php
$txt = glob("songs/*.txt");
foreach ($txt as $textfile) {
$textt = file_get_contents($textfile);
file_put_contents($textfile, strrev($textt));
basename($textfile)
?>
<li><a href <?= "$textfile" ?>> <?= basename($textfile) ?></a> </li>
<?php
}
?>
</ul>
</body>
</html>
this is about showing the song lists in the folder using glob
and i wanna apply same css style from html code which is
<link href="http://www.cs.washington.edu/education/courses/cse190m/09sp/labs/3-music/viewer.css" type="text/css" rel="stylesheet" />
how to do this ???
I cannot seem to get this to work. I have a small JS file that switches banners depending on the time of day, but it seems that doing an external reference in my PHP file does not work. It works fine in an HTML page.
This is the code in the JavaScript file.
function getStylesheet() {
var currentTime = new Date().getHours();
if (7 <= currentTime && currentTime < 19) {
document.write("<img src='images/banner_day.jpg'>");
} else {
document.write("<img src='images/banner_night.jpg'>");
}
}
getStylesheet();
And here is the reference code I used to call the JavaScript file. Its in a PHP file.
<script src="http://beta.website.com/wp-content/themes/theme/scripts/banner.js"></script>
Everything on the PHP page shows up in the browser, except for the banner that I tried to call with the script.
Here is the entire PHP file code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="main">
<div class="container">
<div id="header">
<div id="logo">
<img src="http://beta.dfdfdf.com/wp-content/themes/asdafd/images/logo.png" />
</div>
<div id="shadow2"></div>
<div id="shadow1"></div>
<ul id="menu">
<li>df</li>
<li>df</li>
<li>fd df df</li>
<li>The asfdssd asdfds</li>
<li>sf</li>
<li>df</li>
<li>dfd</li>
</ul>
<div id="slogan"><big>"fasfdsads2005."</big></div>
<div id="loginDiv">Login Panel Here</div>
</div>
<div id="banner">
<script src="http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js"></script></div>
<div class="sidebar">
Sidebar Content<br />
<br /><br />
blah
blah
blah
</div>
<div class="content">
Main Content
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="footer">
<div class="container">
<div class="footer_column long">
<h3>Cadsfadsfafdfsd.com All Rights Reserved</h3>
<p>dsafasdfdffadffadsdafsdfsadafsdfsadfas</p>
</div>
<div class="footer_column2">
<h3>More Links</h3>
<ul>
<li><a href="http://aadfsdfsdfa.
com">asfsdfa</a></li>
<li><a href="http://ItsNotch.
com">ItsNotch</a></li>
<li><a href="http://adfasfsfaf.
com">adsfasf</a></li>
<li><a href="http://twitter.
com/safs">Twitter</a></li>
<li><a href="https://www.facebook.com/group.php?gid=10215yy20340498">Facebook Fan Page
</a></li>
</ul>
</div>
<div class="footer_column2">
<h3>RSS</h3>
<ul>
<li>RSS Feed</li>
<li>What is RSS?</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Try changing your Javascript to this:
window.onload = function () {
// Uncomment this line to make sure the script is loading/running, then delete it
// alert('Hello, your Javascript is running');
// Declare variables
var currentTime, bannerDiv, newImg;
// Get currentTime
currentTime = new Date().getHours();
// Get 'banner' div
bannerDiv = document.getElementById('banner');
// Get create a new <img>
newImg = document.createElement('img');
// Assign a src="" attribute depending on the time
newImg.src = (currentTime > 7 && currentTime < 19) ? 'images/banner_day.jpg' : 'images/banner_night.jpg';
// add the new image to the document
bannerDiv.appendChild(newImg);
};
And put it in the <head> of the document, so change
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<!-- ....... -->
<div id="banner">
<script src="http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js"></script>
</div>
<!-- ....... -->
...to:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js"></script>
</head>
<body>
<!-- ....... -->
<div id="banner"></div>
<!-- ....... -->
If it still doesn't work, one of two things is happening:
Your javascript file is not actually at http://beta.adsfasfasfd.com/wp-content/themes/adfadsf/scripts/banner.js so the script cannot be loaded/run. Uncomment the first line to confirm that the script is running.
Your banner images cannot be found at images/banner_night.jpg - make sure your relative paths are correct.
Have you made sure that you've actually got the <script></script> in your head? I certainly can't see it there (unless it is in <?php wp_head();>?).
Having attempted to navigate to http://beta.website.com/wp-content/themes/theme/scripts/banner.js it returns a 404, you'll need to fix this issue first.
Remember that javascript is client side, and all you want to do with php is spit out the tags somewhere for the browser to deal with.
It might be path problem.
What is you images (full) path?
What is you page (full) path?
As it is now it looks for images directory beneath your current page. Is this correct?