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.
Related
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.
I am attempting to load a script that is on one of my web servers into a page that is on a hosted site with another service. Currently, I am using an iframe to make this work. The issue I have is the iframe cannot dynamically expand based on the php's output.
What has been suggested to me is trying to inject the php output into a div but I don't think that I can do that cross domain.
I am going from a web server at example.net/scripts, which I have full access to, and loading it in a page on example.us, which I have very limited access to since it is a hosted service (namely enjin).
What I need is a solution that will allow me to call the php script from the web server and display its output on the page in an element that can expand based on the output from the script. When it pulls the php script, it needs to display within the CSS parameters that are predefined in the CSS for the div (min-height, max-height) but only at the height of the elements of returned in the script.
To further clarify, I am using the php script to do a foreach loop for json output from an API from TwitchTV. When the foreach loops runs it builds an element structure for each of the returned results to display them as desired. I end up overflowing out of the iframe if i have too many returns and if i have no returns, it just returns a string and displays it, but at that point the iframe's height is too high.
Any examples anyone can give me or solution suggestions?
Since you can AJAX, your solution would be to use AJAX to call the code on the non-locked down site, and return the box with the stuff in it. On the locked-down site, process that code and then just stick it in a <div> on the locked-down site. And of course that div can expand to fit the content like usual.
If, for some reason, you have to use the iframe, just gather the height of the box with javascript (you could hide the box off to the left if need be with left: -9999px). Use that height information to set the height of the iframe. So you are basically loading the content of the iframe twice. Once through ajax just to get the height, and once through the actual iframe.
I don't really see any reason that the iframe should be necessary -- the process in the first paragraph should work fine.
I have created some free HTML Templates, to share them for free, but I would like to know where my templates are installed.
What I have in my mind, in order to track the template installation, is to create a php script that will generate a single pixel image. I would like to use that image to collect information about the web site that loads my picture.
So, how can I know which server is requesting my image? Any ideas?
Try using $_SERVER['HTTP_HOST']. Or if you need something else, try here : http://www.php.net/manual/en/reserved.variables.server.php
Obviously whatever you do could be stripped out, since once your template code is obtained the user could just delete the reference to track back to your script.
A pixel loading off of your server would work, you could access the data within $_SERVER to find out some information about the request and look for a referrer.
A better idea, IMO, is to write some javascript code that lives on your server and is included via a <script src="..."></script> tag on your template. This would allow you to "phone home" by dynamically creating an image source tag to fire this pixel off to your server with more information about the source.
For example, you could so something as simple as this:
(function()
{
var img = document.createElement('img'),
src = "//www.yourserver.com/path/to/pixel.php?domain=" + document.domain;
img.src = src;
})();
This would fire a pixel to your server and contain the domain that loaded your template. You could add a bunch more code that identifies the browser, uniquely tracks the user - see what kind of traffic the site is getting, whatever.
Be sure you don't use any 3rd party JS libraries, as you don't want to inject dependencies/increase load time on the site.
When you generate your single pixel image, include information that you're interested in such as this. Then check your server logs.
echo '<img src="onepixel.png?servedby='.$_SERVER['HTTP_HOST'].">';
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 :)
Basically I want to replicate the page changing effect found here, at http://timvandamme.com/
But instead of using #values I want to use PHP includes, mainly because I want the site to be as uber-seo-friendly as possible... but still have this nice effect.
So is there a way of doing this? I have a main index file which includes other php files in the centre using the usual 'GET' method, so my pages look like: "index.php?page=about"
In my jQuery code I want to have a declaration where if I click the navigation, the content scrolls up, then once the relevant PHP file has loaded, have the content scroll back down and show the new page content (whilst also of navigated to the new page in the address bar, so if the user clicks the back button in their browser, they return to the previous page).
I know how to code the scrolling bits, it's just literally the ajax loading includes / page navigation parts I'm struggling to work out :\
Any help would be MUCH appreciated! Thanks in advance.
Use standard links in your navigation. In your onClick function, use event.preventDefault() to prevent the pages from redirecting your actual users (but they still appear as normal links to search engines).
Foo
<script>$("a").click(function(event){
event.preventDefault();
navigate($(this).attr('href'));
});</script>
Use the onClick function of the links to change the page's content with AJAX (just like it appears on the site you linked), but additionally set up each "page" (using error documents, mod_rewrite or something) to display its content, but allow navigation in this same way. By doing so, you will have the same functionality with the search-friendliness you desire.
To add to the others, some search engines understand this problem and offer site map utilities. You can check out google's site map solutions here:
http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156184
The site map will allow you to explicitly inform google about certain uri's (like http://timvandamme.com/#about).