I to created a project for windows 8 in javascripts/html. Now I want change the background of body when I change page.
I tried to set the background body but when I navigate into the app and I use the backbutton the backgroud don't update correctly. The problem is that remains the last background of the previus page.
If you're setting the background through each page's CSS, it won't work because CSS is cumulative across WinJS page navigations. That is, because you're just doing DOM replacement and not actually navigating away from the main host page (default.html typically), then each time you hit a page control HTML file that loads another CSS file for the first time, that new CSS gets loaded on top of the old. However, going back to a page that references a CSS file that's already been loaded will not force a reload.
There are a few strategies for handling this, but if you're setting a style on body then it's easiest to set the background style from JavaScript within each page's processed or ready methods, and not rely on the CSS loading behavior.
You have probably only one body in all your app, so you have to change it to the right background every time youenter a page, included the first page.
I suggest you do it in the ready event of every page so that it will refresh also when you click on the backbutton.
Related
Good day,
I have taken over a Drupal site that uses iframes for the main content area. I have a minor issue that I'd like to correct.
When a user clicks a link to a page that has a lot of content, then uses the browser's back button to navigate to the previous page, the old content appears, but the iframe's src does not change. I'm using some javascript to set the height of the page dynamically, so when the previous page has less content, there's a huge amount of empty space between the content and the footer.
Here's a diagram that hopefully illustrates what I'm working with:
So upon returning to the previous page, via the browser back button, the footer is pushed way down below because the source has not changed, and therefore the page isn't rendered again.
I've not really used iframes because they aren't great to work with. I'm wondering, is there a way to force the source of the iframe to change when using the browser back button?
I'm developing a chrome extension. My background script and content script both get loaded when the page loads, but the problem I am facing is for instance on Facebook or Twitter when I scroll down and the site dynamically adds new content to the page. My background script and content script don't recognize that the page has loaded new content and doesn't do what it is supposed to do.
Is there any way to detect new content and make the background script re-launch?
My background script is set to persistent: true in the manifest, I was hoping that would do something useful but apparently not. Any help is appreciated. Thanks.
Sites with infinite scroll add new content dynamically to the page without changing its url (that is without using history.pushState/popState) so built-in chrome.webNavigation API won't work.
An established routine in such cases is to use a MutationObserver attached to document.body or the container element to which the new content is appended.
Alternatively you can add listeners for the events used by the js framework of the site, for example FB.Event on facebook or pjax events on github.
I have all my JavaScript files linked on the bottom of my page. This way, the HTML can get rendered before loading any of the scripts. The only problem is that the HTML shows to the user before the scripts finish "decorating" the HTML elements. Is there an elegant way to show the user a splash page to your app before the scripts and styles kick in?
You can create a div with position: fixed and a high z-index covering the whole screen as first element in body. A loading animation or text can be shown inside.
The very last line of the body then is a JavaScript which sets display: none to that div.
In your HTML you can write you splash page and overwrite this with real content (which is hidden by default) by using javascript once it is loaded.
However there is a huge drawback to this solution: what if somebody has JS disabled?
Demo: http://jsfiddle.net/FDcNx/
I am building a web application which I intend it to work like a traditional 'software': as few page reload, and page redirect as possible.
My solution to page reload and redirect is to have them as 'tabs' within the app, so when you click on another tab, the div of your current content will shrink to 0 width.
My question is: how do I prevent the content (writtent in JS, w/ PHP backend) in a tab to load unless when it's clicked on?
(Assuming this is what I should do to reduce unnecessary load)
Just don't load it until the link/button/etc. to the tab is clicked.
See also the jQuery tab implementations.
If your back-end is in PHP, you should control what you send to the client from there.
By the time the js gets the code, it is too late to control what not to load. You can hide it, or remove it, but it has already been loaded.
So, to reduce unnecessary load, and as a good practice, you should only send to the client the active 'tab'. That has to be done in PHP in your case.
I have a web application that uses quite a bit of JavaScript.
When the page loads, it's very clear visually that something is blocking the rendering of a particular portion of the web site. This portion is generated by a Tabber Tabify JavaScript library.
How can I determine what's blocking the HTML rendering specifically so that I can modify my code to prevent this blocking?
Can I use Firebug, or some other tool, to walk through my HTML/JavaScript to determine where the HTML rendering is being blocked and if so, how?
UPDATE:
YSlow gives my web-application a score of "A" and Page Speed give a score of 94/100.
UPDATE 2:
The live site is linked below.
http://www.elite.com
What I'm specifically referring too is the actual Tabs themselves being rendering (and NOT the panel content inside the tab panes). It seems strange to me that the Tab headings themselves are taking so long to generate on the first (empty cache) page load.
A few possibilities:
Loading scripts in your page will block rendering (the only fix for this is to put them in the head (blocks initial rendering) or at the end just before the </body> or load them after the page is loaded (e.g. onload)
Whatever the Tabber/Tabify tool is, needs time to process content... see if there is a way to optimize it.
Either way, if you post some code we can likely be of more help
Update:
If I load the page with my cache cleared, I see content rendering on the screen, then hiding (as it becomes hidden tab content)
Changing the non-visible content to display:none; when loading, and then only setting it back to display:block; once the Tabify stuff is done might help (a) speed up the rendering and (b) remove any flash of content that later gets hidden.
The RadComboBox'es you have load inline (which means the scripts block rendering)... if you can delay this until the onload event fires it will speed up rendering.
I would move the Unica Page Tag (tracking) to the end of your page too.
You have 8 external script files - if there is any way you can combine them it would be good.
You don't have gzip turned on for most of those script files
All of your static content (images, css, scripts) don't have an expires header which means they won't get cached, which means pages won't load fast after the first page.