I have a js file that has the code for navigation for a site with ~600 pages..
Now I want to change the menu(colors, background, links etc) and I don't want to edit the JS file as the code here is like using images for the menu..so I was thinking that I will create a php file or html file and then call it inside that js file. Is this something possible?
Please advise.
You could have the js render an iframe instead of an img and pass along the url to the php/html.
You need to understand the difference between PHP, HTML and JS. They each occupy a different domain in web programming. PHP is for server side logic, HTML is a structural language and JS is an action-oriented language intended to function on top of the HTML that exists in the page (and may be rendered in JS).
All programmers have at one point tried to "hack" code like you are doing, by trying to find a band-aid fix to a complicated solution. It is not worth it. You will lose performance in the best of cases and either fail outright or lose browser compatibility and user interface quality the vast majority of the time.
In short, take your time and edit the JS. You can always do a find/replace on images to strip them out and insert CSS class declarations in their place. Do it right and you'll save yourself a big headache later on.
Related
I like to generate CSS constants using PHP and I'm wondering if there's a way to do this that will still leverage cacheing. Right now I'm defining everything in the index.php file and while it's a web app and so the extra 20-80kb of css isn't toooooo relevant, it would be nice to have it cached so my question is twofold:
What's the most optimal way to generate CSS using PHP (or a similarly cross-browser solution that doesn't need to render using JS ala LESS or SASS)
Does the procedural generation of CSS values using PHP get ignored by the end-browser if the values are unchanged? In other words, if I don't touch the layout for a month and somebody visits twice in that month, does the very fact that PHP is outputting the data break cacheing or, so long as the data is identical, will the cache still be respected by most modern browsers?
Thank you!
While i am still learning css html5 and Jquery, combined with the information from the internet, i came up with a idea to program the css in to different chapters, and call them in to the head section when need it.
from my understanding, via google it is faster to load css styles in the head as a <style></style>.
This way i will only have the css at the page that i need, and it will be better readable for me, becouse i dont use html css styling in dreamweaver anyway.
My css is now so big it is taking tomutch time to find it all.
even with dreamweaver search box.
Does any one have experience with this, or see any problems i might incounter?
Thanx in advance..
The only way to create structure if you're working in a big php project is to save a blank html page, load the existing css on to that page, use the css options/panels in dreamweaver and load the body parts you need in there.
If your using a dynamic css location link, other wise, i think dreamweaver will do just fine in php.
Not sure becouse i never used it that way...
Situation
i try'd to make more sence doing it this way, but i have just put everything back, becouse i got a unknown error, did not investigate it further. And the <style></style> has the highest level of design, meaning all the rules that where set, will be overwritten, things will get complicated fast if you start moving parts aspecialy if have a multi css styling site, so it is not recommended if you already have a big project, do it from the start...
Edit * 27-11-2015
I found the solution, i am using classes to slowely but surely replace the css file...
my head was spinning over this idea for a long time . and i though this is the right plce to ask for help ..
so what i want to do is make a really simple php file that make a search and replace in css files but the problem that i have is that a single css file can (as you all know ) have a 100 or more background tags and all i want to edit is one of them .. and what is some body added a line before or after ... so search and replace for the whole section of the css file that i want to replace well be useless unless it is all the same ..
i really have a bad time explanning but i hope that you get the main idea ..
all i want is some guidelines in this .. help is really appreciated/
I wouldn't suggest directly editing a linked CSS file through PHP (file_get_contents()) or something, but rather conditionally link different CSS files. Or perhaps, conditionally change what you need to change through CSS directly in HTML with PHP. For example, need to change background (for some reason) for different users, you would conditionally change the image source through PHP.
Why exactly do you want to do this? Maybe a CSS alternative like LESS is a viable option (it has support for variables etc)
You can either use php to load a stylesheet.php that is dynamically generated or use javascript to "compile" it on the client side (like LessCss)
I apologize for my english. Correct the title if it's necesary, please.
I want different pages of my web site to have different images in some background divs.
I'm using one CSS file for all the site.
For example, the supportingText div for the "about me" page has different image than "my project page".
Right now I use inside every pages (aboutMe.html, myProject.html) for any supportingText div a style attribute for this task.
And for example:
When I want to let surfers change entire web site style design I can change to a different CSS file of course.
But if my pages have some different images, as I explained before, should I change others html files to do it?
I know that probably there is a solution in some way like in php.
Consider that I don't know anything about php but if you explain in very easy way won't be a problem to understand!! ;)
Is there a solution in javascript?
I'm using only XHTML and CSS.
EDIT
Thank you!
You have been very kind.
I understood everything except one concept that I hope you can clarify.
I have many divs with background images, as:
title - myPicture - navigation - supportingText
All of those have a grey levels images.
I would like users can change aspect of the web site.
Something like three options:
black and white pages
green pages
orange pages
So in this case I need to set divs images in a JavaScript script into html file as your example!
So the CSS file only is helpfull for dimension and all other staffs but not anymore for images background? Is it?
Thank you a lot!
I agree with John in that you really shouldn't hardcode style attributes into the HTML. But if for whatever reason you have to you can easily change them using JavaScript.
document.getElementById('supportingText').style.backgroundImage = 'url("image.jpg")';
or if you're using jQuery
$('#supportingText').css('background-image', 'url("image.jpg")');
Update:
Assuming you're using a button to trigger the change, the code (which you would put in your HTML document) would look something like this:
<script type="text/javascript">
function changeBackground(divId, newImage) {
document.getElementById(divId).style.backgroundImage = 'url("' + newImage + '")';
}
</script>
<button onclick="changeBackground('supportingText', 'image.jpg');">Change Background</button>
Essentially what you're doing here is creating a button which calls a JavaScript function (changeBackground()), and you're passing in the ID of the div that you want to change, and the name of the image file that you want to change it to. You could have multiple buttons with different values in the 'supportingText' and 'image.jpg' parameters.
Answer to Part 2:
You can apply styles via CSS or JS (as above). However anything you do in JS will override your CSS. It's really up to you how you divide it up.
If you have hard coded your styles, even just some of them, into your HTML and you want these values to change when someone chooses a new stylesheet then you're in a tough position. Hardcoding those styles into your HTML makes your code inflexible and leaves you unable to make things such as switching stylesheets dynamically easy either with PHP or JavaScript.
Your best bet is to remove the hardcoded style rules from your HTML and place them into your stylesheet. Then switching the stylehseet can be done easily with PHP or JavaScript.
If you can't remove them then you'll need to write your own JavaScript to do this which will be tedious as it will need to dynamically alter each page when it loads. Not only will this probably take a long time to do and be error prone but it can hurt your website's performance if it isn't done well.
Basically, by hardcoding style rules into your HTML you've tied your own hands and have no good options available to you. I recommend removing the hardcoded styles and making sure you avoid doing it again in the future. Not only to avoid issues like this but to make your site faster by allowing your CSS to be cached.
I'm creating a website from scratch and I was really into this in the late 90's but the web has changed alot since then! And I'm more of a designer so when I started putting this site together, I basically did a system of php includes to make the site more "dynamic"
When you first visit the site, you'll be presented to a logon screen, if you're not already logged on (cookies). If you're not logged on, a page called access.php is introdused.
I thought I'd preload the most heavy images at this point. So that when the user is done logging on, the images are already cached. And this is working as I want. But I still notice that the biggest image still isn't rendered immediatly anyway. So it's seems kinda pointless.
All of this has made me rethink how the site is structured and how scripts and css files are loaded. Using FireBug and YSlow with Firefox I see a few pointers like expires headers and reducing the size of each script. But is this really the culprit?
For example, would this be really really stupid in the main index.php? The entire site is basically structured like this
<?php
require("dbconnect.php");
?>
<?php
include ("head.php");
?>
And below this is basically just the body and the content of the site.
Head.php however consists of the doctype, head portions, linking of two css style sheets, jQuery library, jQuery validation engine, Cufon and Cufon font file, and then the small Cufon.Replace snippet.
The rest of the body comes with the index.php file, but at the bottom of this again is an include of a file called "footer.php" which basically consists of loading of a couple of jsLoader scripts and a slidepanel and then a js function.
All of this makes the end page source look like a typical complete webpage, but I'm wondering if any of you can see immediatly that "this is really really stupid" and "don't do that, do this instead" etc. :) Are includes a bad way to go?
This site is also pretty image intensive and I can probably do a little more optimization.
But I don't think that's its the primary culprit. YSlow gives me a report of what takes up the most space:
doc(1) - 5.8K
js(5) - 198.7K
css(2) - 5.6K
cssimage(8) - 634.7K
image(6) - 110.8K
I know it looks like it's cssimage(8) that weighs the most, but I've already preloaded these images from before and it doesn't really affect the rendering.
To speed a little, you could assemble all your images on the same image sprite, so that you have only 1 request to download all the images. But that requires you to fine tune your css to let display just the small subset of your image.
To have a better explanation, check out : http://css-tricks.com/css-sprites/
Another answer that could seem a little stupid but I like to think of this when I make a website : Just Keep It Simple. I mean do all your JS add real value, do all this images are fine, could you display less, make a lighter design ? I'm not criticizing your work at all, just suggest you...
I used the following approach on an extranet project:
Using jQuery and a array of file names, I ajax in all the images, .js and .css files so that they are preloaded in the cache. As I iterate through the array, I update a progress bar on the screen that indicates that the site is loading - much like a flash loader.
It worked well.
What I will do is show by default the loading page with pure CSS and HTML then wait for the jQuery to load and preload the images with ImageLoader. Once you are done redirect to the normal website since the images will be already in the cache they won't be loaded again.
Another optimization you can do is minify all JS files and combine all except the jquery.js. Put the jquery.js first into your HTML so it loads first. Also put your SCRIPT tags at the bottom of the HTML.
It sounds like you have pretty much nailed preloading, if you have loaded it once, and the expiry header is set correctly, you have preloaded it, no matter what kind of content it is.
File combination can be key to a quick website, each extra file will add load time, in the worst cases of network and server lag you might add up to a second extra for each separate file. More commonly it will be around 100 - 200 milliseconds per file.
If not already minified, minify the scripts, and put them in the same file, just remember to keep the order. I have no idea why Ivo Sabev wouldn't include jQuery.
Same thing with the CSS files.
How much have you done about testing image compression? There can really be a gain from trying out different compression settings and comparing size vs. quality. For PNG images IrfanView with PNGOUT can often make files 25% smaller than other programs, on top of that, a very big gain in size reduction can be achieved by reducing the image to 8 bit colour, with a lot of graphic elements you simply can't tell the difference. Right here on Stack Overflow there is a great example of well compressed and stacked images in the editor control buttons: http://sstatic.net/so/Img/wmd-buttons.png