I have a small web app. My clients use it on their site. To make it look seamless (a part of their own site), they put my app inside an iframe on their website. This way I don't have to worry about the header and footer (branding/styling etc). Now for some reason, the specs have changed and now the app will not be inside iframe. This leads to the problem that I will have to maintain a consistent header and footer branding/styling for each client. I have many clients and it is not possible for me to maintain each one of them and keep it updated all the time.
So, I am trying to come up with solutions that will allow me to inherit the header and footer from client and use it on my site. I was thinking about telling the client to maintain a header and a footer html file (and maintain it as per their branding). I will then make an AJAX call and call their HTML content on my page. This way I never have to worry about header and footer.
What other ways you can suggest I can solve this problem? Any experiences with such situations? How did you deal with it?
I know this is not a specific programming question but I thought this is the best place to get answer.
Thanks
Instead of placing your web app inside an iframe you can place the header and footer inside an frame in your web app.
Since you are using PHP, I may recommend you include a "templates" directory and you can apply the template, based upon the client profile.
In general, store the client header and footer HTML file location in your Database, and look up which template to use. Then in your PHP header file, include something like:
define('CLIENT_HEADER', '**header string returned from your database**');
define('CLIENT_FOOTER', '**footer string returned from your database**');
define('DEFAULT_HEADER', '**default header location in template dir**');
define('DEFAULT_FOOTER', '**default footer location in template dir**');
if (isset(CLIENT_HEADER)){
include(CLIENT_HEADER);
} else {
include(DEFAULT_HEADER);
}
...
the body of your webpage
...
if (isset(CLIENT_FOOTER)){
include(CLIENT_FOOTER);
} else {
include(DEFAULT_FOOTER);
}
Of course, you would need to customize this to your particular application, but this would automatically load the proper header/footer once loaded into the database. It don't think it will work if the header or footer file isn't located on the PHP server, unless you mess with the php.ini file (I'm not an expert at that level, maybe someone else can comment on that).
I hope that helps!
Related
I'm creating a "static" website, and I would like to have url like this :
http://www.my-website/my-page-1 or http://www.my-website/my-page-2
I use the jQuery method load() to load the content of my web pages.
Here is my index.html :
<body>
<nav>
<ul >
<li id="my-page-1-menu-item" class="menu-item" onclick="changeState('my-page-1')">
<span><a>Link 1</a></span>
</li>
<li id="my-page-2-menu-item" class="menu-item" onclick="changeState('my-page-2')">
<span><a>Link 2</a></span>
</li>
</ul>
</nav>
<!-- Content, loaded with $.load() -->
<div id="content"></div>
</body>
I know how to change my url without reloading the page, using the history API
Here is my javascript :
function changeState(url) {
window.history.pushState(url, 'Title', url);
loadStateData(url);
}
function loadStateData(state) {
var content = '#content';
$(content).load( 'views/' + state + '.html');
// Manage menu style
$('.menu-item').removeClass('active');
$('#' + state + '-menu-item').addClass('active');
}
With this code I'm able to reach http://www.my-website/my-page-2 by clicking on Link 2, but if I refresh my webpage or if I type http://www.my-website/my-page-2 directly in the browser address bar, I got a 404 error.
I'm not very comfortable with .htaccess URL rewritting but I think it should solve my problem.
And I don't want to use AngularJS, or other framework like that (except if its a really lightweight framework)
You need to ensure that when you use JavaScript to:
Modify the DOM of the current page so it is effectively a different page
Change the URL to identify the different page
…that you also make sure that the server can generate that page itself as well.
That way if the JavaScript fails for any reason then everything will still work. This is a basic principle that best practise is to follow.
This will probably involve duplicating your logic server side, and that will probably be a lot of work. Robustness + client side performance hacks do not work together cheaply. Consider isomorphic JS and taking page snapshots with a headless browser as techniqes to speed this up.
I'm not very comfortable with .htaccess URL rewritting but I think it should solve my problem.
It certainly won't solve it well. You could use it to divert every request back to your homepage (so you have duplicate content on every URL) and then use client side JS to read location and work out what content to load but then you might as well use hashbangs since you'll have thrown out every advantage of using pushState but added duplicate content URLs to your site (and invested a pile of work into creating those duplicate content URLs).
Doing that without any server-side rewrites sounds impossible. When you refresh the page, HTTP server needs to give you contents of proper file, based on URL.
But.. if you really want to make URL rewriting client side you can make one, universal rewrite as it is often done in case of PHP-based websites that do rewriting internally (not by .htaccess or nginx rules, but using PHP script).
When there's no such file like "/my-page-2" on webserver, just redirect client to /index.html?url=/my-page-2 and dispatch to proper subpage using JavaScript.
I'm trying to find a code in Javascript to make one header for multiple pages in HTML put i culdn't find can you please advise ?
Javascript is a client-side language, executed in a single-page-environment by the client (normally a browser).
If you want your site to take advantage of templating across multiple pages
eg. including the same header on multiple pages
then you are better off using a server-side language executed by the server.
Server-side languages include:
PHP
ASP
Ruby on Rails
Node.js
and others.
You could use a html preprocessor (for example Jade). There's something called mixins. Mixins allow you to create reusable blocks of code.
Create the common header and place in its own file. Then in all other pages, create an empty element with an id of something like "header". Then have each page make an AJAX call upon page load to fetch that file and place the result of the AJAX call in the empty div.
You could also do this with an iframe and just set its source to the header file.
I have the following problem:
HTML blank page on server 1.
WordPress site on server 2.
What I need is to call the content from www.wordpress.site/sample-page/ to HTML page on server 1, but not the entire page, only the part that I can edit from wp-admin; so without header and footer.
Also, I don't know if there is any other method, but I need it to be done via JavaScript/jQuery or Ajax.
I've used Google, but is hard to get a tutorial for this, I've tried a lot of tutorials, but none is what I need, and I don't know that much JavaScript to make it work.
SO, can someone help me please?
BIG Thanks!
Andrei
L.E.:
I've found this working: http://jsfiddle.net/mdawaffe/hLWdH/
It is working as it is written, if I try to change the domain with mine, will not work.
What script do I have to implement on the server from which the content is called (taken)?
For more information, as you asked:
I have a HTML + CSS + JS template that I will use with phonegap (if you don't know about it, try it, it's very useful) to create a mobile app for Android, iOS, and BlackBerry.
Now, I have this site: m.trafficvoice.ro (I hope I can post links here).
In the 'live stream' page (it's called services.html), I have a HTML5 audio tag/player.
What I need, is to get from www.trafficvoice.ro/whatever-the-name-page, the content, but only the part that I can edit in WordPress (so without header and footer).
Why? Because in the future there will be more stream to add, and maybe some of them will be down due to unknown reason, so I need to update that page, without making an update for the entire app, upload it to the store, wait for approval, the client to download it, etc.
Big thanks!
Andrei
Could you just use an iframe instead? You could modify a template in your theme to not display header/footer and then use that in the iframe.
I have a javascript file that other people use on their site. It creates a button and loads a css file that is hosted on our server:
style.setAttribute('href', 'http://mysite.com/assets/some.css');
The user can call it in their site like so:
<script type="text/javascript" src="http://mysite.com/global.js"></script>
I want to give the user the ability to upload their own CSS file on my web app that will replace the one that I am setting in global.js.
Currently, I added a custom_css:binary column in the Users table that will hold the CSS file, but this requires the user to stay signed in on the site. I'm not sure if this is the right way to approach this or if there is a better way to do it. Also, what are some security risks to this approach?
I'm using RoR for the backend.
Any help would be great!
UPDATE 1
I'm able to store the uploaded JS file and load the custom CSS, but it's currently checking the current_user - this means the stylesheet will not be rendered for the users. How can I work around this?
I was able to find the solution myself.
There are several ways to approach this:
Add a query string to the JS src
Scrape the page for a certain element that gets generated by your script
I opted for option 1. When I detect a dynamically generated query string, I send that over to the controller in the params hash and load the css file accordingly.
I wonder if anyone has found a way to send at mid rendering the head tag so CSS and Javascript are loaded before the page render has finished? Our page takes about 523ms to be rendered and resources aren't loaded until the page is received. I've done a lot of PHP and it is possible to flush the buffer before the end of the script. I've tried to add a Response.flush() at the end of the Masterpage page_load, but the page layout is horribly broken afterward. I've seen a lot of people using an update panel to send the content using AJAX afterward but I don't quite know what impact it would have on the SEO.
If I don't find a solution I guess I'd have to go the reverse proxy route and find a way to invalidate the proxy cache when the pages content change.
Do not place the Flush on code behind but on your html page as:
</head>
<%Response.Flush();%>
<body >
This can make something like fleekering effect on the page, so you can try to move the flush even a little lower to the page.
Also on Yahoo tips page at Flush the Buffer Early
http://developer.yahoo.com/performance/rules.html
Cache on Static
Additionally you can add client cache on static content like the css and javascript. In this page have all the ways for all iis versions.
http://www.iis.net/ConfigReference/system.webServer/staticContent/clientCache
Follow up
One more think that I suggest you to do after I see your pages is to place all css and javascript in one file each. And also use minified to minimize them.
I use this minified http://www.asp.net/ajaxlibrary/Download.ashx with very good results and real time minified.
Consider using a content-delivery-network (CDN) to host your images, CSS and JS files. Browsers have either an eight or four connection limit per domain - so once you use those up the browser has to wait for the resources to be freed up.
By hosting some files on the CDN you get another set of connections to use concurrently, allowing everything to load faster.
Also consider enabling GZIP on your server if you haven't already. This compresses files on the fly, resulting in smaller transfers.
You could use jQuery to execute your js as soon as it is loaded.
$.fn.ready(function(){
//Your code here
})
Or you could just take the standalone ready function -> $(document).ready equivalent without jQuery
You could do a fade-in or show once the document has been loaded. Just set body display:none;