Picture to get understanding of my question!
So, this is the site I made for fun and It's a little dice game where you can guess the outcome of the dice. Anyways, as you can see there is a border under the other div. That's where the output comes from the dice game.
After rolling the dice.
So my question is:
Is there a way to make the CSS style before doing the 'game' different than after playing the game? (Border width: 0px; before and 1px after) Or is there a better way to do this instead of changing the CSS??
Edit by Martijn: The code given in the question makes to question obfuscated and didn't really need to be added. IMO it decreased the value of this question.
Yes, but first no: PHP can not change css. PHP is serverside, meaning it's build on a server and the result gets send to your browser. CSS styles the htmlpage on your computer, your computer´s browser calculates how big everything should be etc.
You can however, add a class to the html, depending on the result. This class can be styles.
You have not provided code, so´ll write you a small demo.
$indicationClass = ""; // not good or bad, so no class
if( $Guess=="correct" ){ $indicationClass = "CorrectAnswer"; }
elseif( $Guess=="wrong" ){ $indicationClass = "WrongAnswer"; }
<div id="ImTheResultDisplayer" class="<?=$indicationClass;?>">
The color of my text will change!
</div>
This isn't perfect code, but it does demonstrate my point.
If this is done via AJAX or Javascript (meaning the page never refreshes, you can use the same principle.
There is no way to modify your CSS with PHP
Try to learn Javascript add "movement" and other things to your web page, this language allows you to modify the style of your website after this is served by the server
Its a long way on web development but I wish you luck
Related
This is more of a general information question involving endnotes than a "check my code" one. That's because I can find almost no (useful) information on the subject and don't have the skills to create this myself. But I still think it's useful to create a general brainstorm session / forum thread on the net about this.
The issue: I've written about 60 articles, a dozen of them book-length or near book-length on a site that has been manually designed with HTML5, CSS3, jquery and PHP - the latter two mainly with pre-existing code. I'm very happy with it except for one thing: endnotes! It takes forever to update them.
An average article has 120 endnotes (up to 550). It happens frequently, especially during the writing/proofreading process, that I need to add more information or want an additional endnote. That means anywhere from 2 to 30 minutes of copy-pasting "[113]s", "[114]s" around. It's hopelessly inefficient.
Ordinarily I dislike the uninspirational Wiki CMS platforms, but they have one huge benefit: cite.php plugins. Like this one:
https://www.mediawiki.org/wiki/Special:ExtensionDistributor?extdist_name=Cite&extdist_version=REL1_26&extdist_submit=
Once you have this, you just put an URL between <ref> </ref> and an endnotes gets automatically generated below a {{reflist}} tag. It's explained here:
https://en.wikipedia.org/wiki/Help:Footnotes
Footnotes are created using the Cite.php software extension. This
extension adds the HTML-like elements <ref>...</ref>, <references />
and <references>...</references>. The elements are also used in a
number of templates; for example, it is becoming more common to use
{{reflist}} rather than <references /> as it can style the reference
list.
I've checked out the plugin and it, of course, is much more than just a few lines of PHP.
My main question is if anyone is aware if this type of code has been created for custom designed websites. Or if someone has an idea how to program this manually? If it's not too hard, I might try it myself in the near future or hire a programmer.
P.S. I did study HTML5 solutions for endnotes in the past. Can't remember the details, but they were terrible. It's crucial to have one type of tag, with each one generating a new automatic endnote.
{{ }} is not standard HTML tags, but usually in some modern MVC frameworks they are used as replacement for PHP syntax like echo $foodNote which is the same as {{ $foodNote }}.
A MVC framework like Laravel use it as part of blade template.
But in the provided link you have in your question, the {{reflist}} is just referring to the content inside the tags like <ref>Content of the reference</ref>.
The provided Cite.php helper file is parsing the content inside tags like <ref>...</ref> to variable reflist inside a curly braces with the same content.
It should be not very difficult to program such thing.
Here is a simple PHP script to handle footnotes automatically. The only significant caveat is that your web page file name must end in .php or .phtml (not all web servers support .phtml). This is no problem because the web server will treat the file exactly as a .html file, except it watches for PHP tags so it can process the embedded PHP scripts.
Here is the script.
<?php
function footnote($footnote){
global $Footnotes, $FootnoteCount;
$FootnoteCount++;
$Footnotes[$FootnoteCount] = "$footnote";
print "<sup>$FootnoteCount</sup>";
}
function PrintFootnotes(){
global $Footnotes, $FootnoteCount;
for($i = 1;$i < $FootnoteCount + 1;$i++){
print "<sup>$i</sup>$Footnotes[$i]<br />";
}
}
?>
You can put the script at the top of each page.
Better yet, save the script in a file named FootnoteFunctions.php. Of course, you can name it what you want or put it in a file with other functions. Just change the following include as appropriate. Next, put the following in the head of your HTML document:
<?php include("FootnoteFunctions.php"); ?>
Put this where you want the footnotes to appear at the bottom of the page:
<?php PrintFootnotes(); ?>
To create a footnote insert the following where you want the footnote number in the text (with your text between the quotes):
<?php footnote("footnote text here") ?>
That's it.
You can embellish the script as desired. For example, to pop up the footnote text as a tooltip, add title="$footnote" to the tag. You can also put a table tag, etc, in the printing function to make the footnote numbers and text line up nicely.
Here is my page explaining line by line how the script works. It also has an embellished version with the features mentioned above.
https://vocademy.net/textbooks/WebDatabase/Footnotes/PageSetup.php?Page=3&CourseDirectory=WebDatabase
I know it sounds nasty, but I really came only to find a solution if possible, since I need to fix it fast. Using CSS is not working since it's a bit of hack, and my elements only recognize style="margin-left: 50px;" if I add this in HTML.
There was a simple solution by adding STYLE directly into HTML, but another problem I found is Mozilla or Opera is displaying things differently. For example in Chrome margin-left: 50px is ok, but in Mozilla it must be set to 55px.
So, I wonder if there is a Javascript that finds which web browser version someone is using and add a different number at style="margin-left: --px;"
You can detect the browser and browser version using the following code:
if ($.browser.msie && $.browser.version == '6.0') {
$('#myElement').css('margin-left', '20px');
}
Refer to the jQuery docs # http://api.jquery.com/jQuery.browser/. The .browser function has been deprecated as of jQuery 1.3, but was not removed until version 1.9.
this will help you - browser detect
http://www.quirksmode.org/js/detect.html
if you need to change your page based on the browser, that is best done with a server-side language such as PHP. You can use http://php.net/manual/en/function.get-browser.php to get the browser version, and echo the stylesheet into the head.
see this:
http://api.jquery.com/jQuery.browser/
if ($.browser.webkit) {
alert( "this is webkit!" );
}
Won't work with 1.9.1. you have to use migrate JS.
I want to include the same navigation menu on multiple pages, however I do not have PHP support, nor can I affect my server in any other way.
I want to avoid simply copying and pasting the html onto all the pages as this would make updating the menu a pain.
The two options I can think of are as follows:
1) Have all the content exist on one page, then determine which content to show based on a keyword appended to the url:
example.com/index?home
example.com/index?news
2) Include a javascript file that has a function that writes the menu out and call the function on each page
function setupMenu() {
$("#nav").html("<ul class='nav'><li>home</li><li>news</li></ul>");
}
With Option 1, the updating process would consist of editing one nav menu on the one page
With Option 2, updating would mean changing the function in the javascript file
My concern with Option 1 is that the page would have to load a lot of content that it wouldn't need to display. My concern for Option 2 may seem trivial but it is that the code can get messy.
Are there any reasons doing it one way would be better than the other? Or is there a third superior option that I'm missing?
You have a few options, each with its own advantages and drawbacks:
Server Side Includes, or SSI. If you don't have PHP there's a good chance you don't have SSI either, and this option requires some irritating mucking-about with your .htaccess file. Check Dominic P.'s answer for a writeup of SSI. The benefit of SSI over JavaScript or Frames is that it doesn't require the user to have JS enabled - which a lot of users don't - and it also doesn't present any navigational difficulties.
Frames. You could either use standard frames to put the navigation in its own separate file, and with the correct styling it would be seamless. You could also use an iframe to place your navigation in an arbitrary part of the site, like a sidebar or whatever. The downside to frames, particularly standard frames, is that they tend to make bookmarking, links and the forward/back buttons behave oddly. On the upside, frames don't need browser compliance or server support.
JavaScript. You can refer to any of the other answers for excellent explanations of the JS solution, particularly if you're using jQuery. However, if your site isn't otherwise dynamic enough that your users will want to have JavaScript enabled, this will mean that a large number of your viewers will not see the menu at all - bad, definitely.
-
Yes use .load jQuery ajax function
$('#result').load('ajax/menu.html');
That way your code stays clean, and you can just edit the includes in seperate HTML files just like PHP.
You should consider AJAX for this task. Include a third party library like jQuery and load the separate HTML files inside placeholders, targeting them by ID.
E.g, in your main HTML page:
<div id="mymenu"></div>
Also, in your main HTML, but in the HEAD section:
$('#mymenu').load('navigation.html');
But your best bet would be to switch to a hosting that supports PHP or any other server-side includes. This will make your life a lot easier.
Check out Server Side Includes. I don't have a whole lot of experience with them, but from what I recall, they are designed to be a solution to just your problem.
Server-side includes: http://www.freewebmasterhelp.com/tutorials/ssi/
You can use HTML Imports http://w3c.github.io/webcomponents/spec/imports/
Here is an example from http://www.html5rocks.com/en/tutorials/webcomponents/imports/
warnings.html contains
<div class="warning">
<style scoped>
h3 {
color: red;
}
</style>
<h3>Warning!</h3>
<p>This page is under construction</p>
</div>
<div class="outdated">
<h3>Heads up!</h3>
<p>This content may be out of date</p>
</div>
Then index.html could contain
<head>
<link rel="import" href="warnings.html">
</head>
<body>
...
<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;
// Grab DOM from warning.html's document.
var el = content.querySelector('.warning');
document.body.appendChild(el.cloneNode(true));
</script>
</body>
I swear I came across a tool that did this like a year ago and I cannot find it. I have searched and searched, especially here on stack, but nothing seems quite right.
Reason for this is to to create alternate style sheets for existing sites without having to empty out an existing style sheet etc. Thanks for any assistance!
Primer
...undercoats your CSS by pulling out all of your classes and id's and placing them into a starter stylesheet. Paste your HTML in to get started.
http://primercss.com
Bear CSS
...is a handy little tool for web designers. It generates a CSS template containing all the HTML elements, classes & IDs defined in your markup.
http://bearcss.com/
If you are not scared of programmatic solutions, it's super easy to write your own "parser" with jQuery:
$("*[id*=]").each( function() {
if(this.id !== "") {
console.log("."+this.id+" {");
console.log("");
console.log("} ");
console.log("");
}
});
Which incidentally can also be turned very easily into a bookmarklet with tools such as this one:
javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.3.2",function($,L){$("*[id*=]").each( function() {if(this.id !== "") {console.log("."+this.id+" {");console.log("");console.log("} ");console.log("");}});});
Otherwise I'd recommend giving this CSS generator a go or bear CSS like yckart suggests.
Try the CSS button on http://spruce.flint.umich.edu/~jalarie/jaa_kcd2.htm
I am trying to customize the links on my site that are inserted via php. The reason they are inserted via php is for checking user login and editing the log options (the links in question) depending on their status so removing them from php is a no go as far as I can see. I've tried inline and external styling, and though, if I remember correctly, it has worked in the past for other things, it just will not work for these links. Anyone have any good ideas?
Here is the (immediate) code:
$logOptions = $PM_envelope . ' home profile settings logout' ;
The styles are this:
.loginmenulinks a:link {
color:#09C;
text-decoration:none;
font-family:GeosansLight, sans-serif;
font-size:12px;
}
same for hover, etc.
I call for this in a div in the header:
<div><?php echo $logOptions; ?></div>
Why in the world is there "no way to customize" the CSS of a link that PHP generated? PHP generates HTML, HTML and CSS are on the browser side. The browser has no way of knowing what came from PHP and what didn't, so how can it discriminate against such dynamic content?
<?php echo "Text"; ?>
CSS:
.blah {color: orange;}
Suddenly, an orange link appears.
Are you forgetting to maybe specify any styles in the first place?
You may add additional classes or id's to the a-tags to gain the ability to add your stylessheets from an external resource.
However it is not a good Idea to keep such things in your PHP Code, you should use some seperation between a view and a logical layer in your application.
Furthermore you should not use but css to gain spacing, as it is not intended to do that.