We recently changed our front-end and start using Metronic responsive theme.
I have a left menu like:
Now since this is responsive if you click top left of the menu it resizes perfectly like this:
The problem is even if you resized it( for ex: small), when you click a link (or when page is refreshed), regardless of the size it automatically displays the big menu.
if (resize) { use -> page-header-fixed page-sidebar-closed }
else { use ->page-header-fixed }
I know it must be something like that but how to implement this in php?
EDIT: I have an body class inside index.php like :
</head>
<body class="page-header-fixed">
<?include "left.php"?>
left.php is the page that has the left menu.
body class is the css class that I need to check
Do this setting must be stored on your database? If not, why not use localStorage and manage it with - and only - JavaScript?
I don't know your menu code, but if you can watch it open and close event, you can just use:
window.localStorage.setItem("menu", 1); // 1: open - 2: closed
Then on page load read it:
window.localStorage.getItem("menu");
No need to set ajax requests to the server nor cookies and that kind of crap.
You should perhaps add another js condition to test minimum offsetWidth before choosing css classes.
Otherwise, I wonder if you added responsive CSS #media min-width on both classes, page-header-fixed page-sidebar-closed.
If your JS doesn't overide these classes, CSS should do the job to keep your menu on "small size" look.
In any case you need a variable to store the state of your menu i.e., big or small.
If you want to do it with PHP you can use session variables and use ajax to update that value when the menu is resized.
OR you can set a cookie with Javascript for the same purpose. I would go for this option.
Either way you will need to check the value of the cookie / session var and change the class of your menu depending on it.
---EDIT---
Or as our respectful fellow programmer says, it might be a good idea to use localStorage since the information doesn't need to be sent to the server.
Related
In the site i'm developing i would like to have users set their own custom "css" on their profile pages.
For example, i give users the ability to select a background color for <body> with a js color picker.
Then with php i create a 'css-ready' string and save it on db.
What i am asking is: how i can make this css apply everytime a user enter another user profile?
Probably will be there a lot of thing a user can customize, so there will be a big css string and i need something that will be cross browser and if possible that work also without javascript..
Thank you.
You could try a php file with header for content-type text/css which echos the CSS according to one fetched from Database, you could add default CSS to your website and just create a last in list of link tags the path to that php files, this way you have a default CSS to fall back and customized CSS to be applied on top of default if defined any..
This can be done with Handler in asp.net. I am sure there will be similar solution available in PHP also. First you need to save the style properties in a database for each user. Make sure that the syntax of the styles (selector name, curly brackets, semi-colons, etc.) are in order. You can get the user information from session object or pass the variable with query string to the handler.
The response received from the handler can directly be put between tags as content type - text/css like this:
And with this you should be ready to go!
However, it will lead to performance losses as everytime the page loads, the entire file will be loaded (in normal css file, it is loaded only once). It will be a better idea to save only those items in database which you really want your user to customise. You may cascade it with your parent css file for better performance.
you can use this is user-profile.tpl.php
<?php
if(isset($account->user_css)){
?>
<style>
<?php echo $account->user_css; ?>
</style>
<?php
}
?>
I need to change values in a stylesheet from an admin panel using php. I know I can do this inserting the values to my MySql database but isn't there a better way?
So far I have converted my style.css to style.php and it looks like this:
<?php
header("Content-type: text/css");
$pageBG = '#ff0';
?>
What I want to do is to change the hex value (#ff0) from my admin panel with a color picker.
You are asking too much.
A color picker needs at least javascript
An admin control panel needs at least a database + an auth plataform
You should open another question with more specific stuff.
If you want the easiest way you can just edit your style.css file and make your changes by hand.
If you want to use color picker it's a frontend issue not related to having it configurable at all. If you want to make admin panel's or site's look customizable, there's no other way than storing some settings in database. You may utilize INI files, but's that only other container. One tip: Generate CSS file and don't regenerate it until you tell you script to. If you save new settings - regenerate it, other way use the already existent one.
You cannot change css, though you can dynamically generate it.
Supposing you are using apache you can have .css files go through php before being served. thus you could have something like
.dynamicColor
{
color: <?= $color ?>;
} /* $color must be exctracted from mysql */
more general solution would be to create a php script createCSS, which would load variables from mysql and include prebuilt css script (like in previous example) and set content-type header to text/css
I want to include a page preloader for all pages on my application. Something like what Gmail displays when its loading the entire page in the background. I don't want a prelaoding bar just the mechanism to display immediately a preloading message while the entire page loads in the background and upon successful load is displayed.
Take for an example the site: http://www.emirates.com/ae/english/ just run a search for any flight - you see a preloading message after which teh page is loaded. I don't see any redirects here.
How do I implement this - my site is built using php and tonnes of javascript.
Your HTML writes out a pre-loading message, and you then set up a javascript onload event. This event calls JavaScript code to load whatever data you need via AJAX, then finally hide the loading message and shows the actual page.
Of course, this means people with no JavaScript will have problems - you have to sort something for them or decide you can live without them.
ADD: Oh, and you may want to check the disability laws in your country before deciding you can live without them - you may have a legal responsibility to make your site accessible to the disabled. I've only ever used this technique on sites that rely on JS so heavily they can't run without it. Note GMail has 2 interfaces - one JS and one plain HTML. This is how they make their service accessible.
ADD: http://code.google.com/p/bobchess/ is some code I've done that does this. A loading message and then an onload event to start the application.
I would use a wrapper DIV element for all the content of your <body> element and hide it via CSS visibility property. Did work with javascript and at the end I would display the DIV element. The preloader would be absolutely positioned and hiden when DIV element would be displayed.
Visibility property has the advantage that the layout will be ready when you change it to value visible (not as with the property display)
EDIT: I think that you can almost always avoid pre-loaders. You can speed up your sql queries by indexes. Display less results and so on. I personally don't like to wait and preloader doesn't comfort me much.
I agree with MartyIX but the problem is the number of queries your system can handle, indexing is an option but it depends on volume of transactions on your servers. I do think we missed the whole point though, pre-loaders we meant to beautify the site, so the customers don't see ugly blank page while they wait :)
In my site I am applying a stylesheet depending upon the resolution of the viewer's monitor. By using screen.width in javascript i do this. But now I have a doubt that can I use the same technique to change the whole content of the site depending upon the resolution, i.e, for higher resolutions more contents and for lesser, fewer. Or you please suggest me some other technique to do this.
You could detect the resolution and use this to apply a class to the body of your page and use this to tell CSS to show/hide certain columns. I can provide sample code if you let me know which framework / no framework you're working with.
Here is reallly basic example in plain javascript:
window.onload = function(){
var resolution = 'res'+screen.width;
document.getElementsByTagName('body')[0].className= resolution;
}
This also has the advantage that a page will always display regardless of whether JavaScript is enabled or not. If JavaScript is enabled you can tailor the page to the resolution, if not the user will still see your content.
Have your initial page load return an empty container and execute an ajax call that will populate it with the content. The ajax call can pass the resolution as a parameter so you can return the appropriate content accordingly.
As you're already serving alternate stylesheets based on the screen width, you can just set the content that you don't want for that given stylesheet to display:none.
How can I give the user the ability to change the style of a webpage, of course I have to make several CSS files , but how can I make the code that permits the change upon the user's choice
We're all pretty unlikely to give an answer as thorough as A List Apart's.
They even provided some freely-usable code for you.
You would basically have css classes for all the major components of the page such as header, content, footer, nav_menu items, heading, etc. Everything that you want the user to be able to customize you would create a css class/ID for it.
Then you would show all these classes to the user and let him either type in the CSS code manually, or show him dropdown boxes with all the possible colors, for example, or other settings.
When the user changes an option, you could use javascript to change that property of the css ID/class he selected. E.g if he changes the background color of the header from black to blue, you could do this:
document.getElementById("header").style.background-color="#ABCDEF";
(Jquery might have an easier way of doing this)
At the end of the page you could have a submit button which would POST all the css settings to a php script, which would write these settings to the database. Then you would do a query like:
SELECT css_id,css_class,css_code FROM css_styles WHERE user_id='$user_id';
This would return all the css code, and then you would put this in the <head> command instead of an external css file.