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.
Related
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
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
Look at this URL in Chrome and Firefox.
http://gymshuffle.com/contact.html
If FF, there's uninterpreted PHP code on the page. In Chrome there isn't.
What would cause the PHP to display in Firefox?
That's interesting, it looks like Chrome realizes that what's between >?php and? < isn't a browser tag, and is instead maleformed HTML, and never lets it get to the rendered HTML tree. You can see a much simpler version of the same thing here
Source code
<?php echo ('test'); ?>
test
URL:
http://alanstorm.com/testbed/chrome-php.html
If you view source with Chrome the PHP code isn't displayed. If you do it with Firefox it is.
The important thing to remember here is that your PHP code isn't being executed. Chrome downloads the page with the raw PHP code in it, sees the raw PHP code, and removes it before rendering the page.
Update: Saw an upvote on this in 2015 -- and it looks like Chrome now does display the mentioned code.
Your http server is not configured to send .html-files through the php-interpreter. Try to rename your file from index.html to index.php. Chances are good that this will probably work - but really, please ask your server administrator for help in this configuration issue.
Regards
rbo
Firefox is considering everything from the <?php to the /> in the first <br /> tag to be one big HTML tag. Chrome is just ignoring everything in the PHP tags. In order to make the PHP work you have to change the file extension to .php
PHP is a server-side language, so none of the processing is done by the browser.
That's interesting. If you look at the html source, you can see the php code in FF, but not in Chrome. Perhaps a MIME issue? You could also try changing the file extension to .php.
PHP is server-side. The browser has nothing to do with the interpretation of it.
I have page which created dynamically.
Now I want to add ajax function, so I want to add if statement to change the outputs.
if(js is on){
...
...
echo "js is on";
}else{
...
echo "js is off";
}
Is there any way I can detect if js is on with php?
Or is there any way I can remove/hide it by jquery?
Thanks in advance.
PHP is executed before any browser action takes place, so no, PHP cannot directly detect whether the user has Javascript on or off.
You must provide a bit more info on what you're doing for us to find you a workaround. In PHP, it is possible to detect whether the call was made via AJAX or not using the $_SERVER['X_HTTP_REQUESTED_WITH'] global variable which jQuery will set automatically.
If you need to show an element when Javascript is enabled, you can first hide the element with CSS and enable it with Javascript/jQuery. The same goes the other way around also.
You can't do that in PHP because the page is rendered by the time you know. And apart from some crazy redirect scenario, your best bet may be to use CSS + JS to show/hide what you need:
What I normally do (and your mileage may vary depending on what you need to show/hide) is this:
<html>
<head>
... other stuff here, title, meta, etc ...
<script type="text/javascript">document.documentElement.className += " js"</script>
... everything else
</head>
Then you can use CSS to hide/show based on if JavaScript is enabled/disabled:
/* Hide by default, show if JS is enabled */
#needsJS { display: none }
.js #needsJS { display: block }
/* Show by default, hide if JS is enabled */
.js #fallback { display: none }
It can't do it directly, and workarounds for it are usually awkward and wasteful.
Use progressive enhancement technique instead.
Just make the website working without JS. If everything is fine, you can attach JS functionality with e.g. jQuery.
This is also called unobtrusive JavaScript.
So you basically don't distinguish between client with JS and client without JS. You don't provide different output. You set up your HTML code in such a way that you can easily identify the elements that should JS functionality an this functionality in a programmatic way.
This way is even easier for you as you don't have to think about different outputs and it guarantees that the site is also working without JS.