Why does WinJS Navigation app apply css to any visited page? - javascript

I develop WinJS Navigation app (Windows 8.1/WP 8.1) and there's one problem: I've linked .css file to only one .html file, but when I go to any other .html page and if it has any same class then app applies .css from first page I went!
I don't link that .css to host (default.html).
It's not depending on which Visual Studio I use.
I have same bug in WinJS 2.0, 3.0 and 4.4.0.
There's a question: why does WinJS do this? Is there any solution or workaround?
You can reproduce my problem on your VS2013 or VS2015: zip (debug Windows project, not WindowsPhone).

When using WinJS navigation and page controls, the "navigations" are happening with DOM replacement inside the single context of default.html or whatever your root app page is, and not by dumping default.html (and all the CSS/JS that's been loaded) and initialized a new page context.
This single-page navigation model provides several benefits: it preserves the global JavaScript context and allows you to do animations/transitions to move elements on and off the page. If you truly navigate to a new page altogether, you'd reset the JS context and would always navigate through a blank page.
The side-effect, as you're seeing, is that any and all CSS that gets loaded in the course of page navigations is cumulative. That is, a "navigation" in WinJS does not reset any contexts, including CSS, and this can be tricky to manage.
There are several ways around this:
Use a global CSS file and avoid using page-specific CSS unless you know something is unique to a page.
Make sure each page has a top-level div with a page-name class like <div class="page1"> and then scope all styles for that page in your CSS using .page1 selectors.
Specifically load and unload CSS files by modifying <link> tags in the page header. This is really the only way to unload CSS, but also means reloading and reparsing the CSS files which will cause a page to re-render.
Generally speaking, I think option 2 is best and most portable.
For a longer writeup, see the section "Page-Specific Styling" in Chapter 3 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, and I've written up similar material on my blog, http://www.kraigbrockschmidt.com/2013/05/02/css-loading-behaviors-winjs-page-controls/.

Related

Just adding js script to typo3

I have the following problem.
I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.
In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.
Would be nice to get any help.
Cheers,
Andrej
It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:
page.includeJSFooter.scripts = fileadmin/js/scripts.js
Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).
Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.
For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array
I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)
You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button
Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript:

Wordpress theme blocking Javascript widget from displaying

I am trying to implement this widget into a client's website.
This is the widget: http://www.tripadvisor.com/Widgets-g294458-d6694228-c6-a_widgetKey.selfserveprop-Interesting_Times_Bureau-Bucharest.html
This is the page with the widget: http://interestingtimes.ro/tripadvisortest/
The theme is blocking the Javascript. I switched to the default wordpress theme and it was working ok.
Any suggestions?
PS: I renamed the plugins folder to deactivate them, but it did not work.
Most of your Javascript is being deferred to the footer, and cached. I wonder if your theme is making the JS cache... I see you are on the Jupiter theme, seen here: http://support.artbees.net/support/solutions/articles/1000089339-how-to-add-custom-css-and-javascript
You can try inserting how their support recommends, via the custom box. You can also do a crazy workaround, though not awesome for SEO - create an html page, insert the code into the blank html page, and iframe it into the page you need it on. This causes the JS to execute in a separate environment, so the JS caching that Jupiter theme is doing will not affect it.
I personally dislike themes that do that with JS, having a theme too JS dependent is rough on mobile, and can be rough with plugin conflicts, it is more for people looking for the JS features, and do not mind operating within the tightly predetermined confines of the theme.

Difference between bootstrap.css and web.css file?

I was following this tutorial on Microsoft's developer network concerning using asp.net and mvc model with sql database. Here is the link to the tutorial that I was following
http://www.asp.net/mvc/tutorials/mvc-5/introduction/getting-started.
So basically, I wanted to play around with the design of the file which is defined in these three files bootstrap.css, bootstrap.min.css, and web.css.
As to my understanding , bootstrap is an html, css, and javascript framework which has the design for the elements already defined. In Visual Studio, I began to edit the bootstrap.css file by changing background-color of the jumbotron element. However, when I saved the file and ran my web application , I noticed that the color remained the same and did not change. But, when I defined the design for the .jumbotron element in the web.css file, the element's background color changed accordingly to red.
Essentially, what I want to know is if bootstrap.css is restricted for editing within the template?
What is Bootstrap
I think you're trying to refer to the Twitter Bootstrap that is used all around the Internet. It contains most of the Styling techniques for the Elements, such as buttons, inputs etc.
When you edit a website's Stylesheet, (Bootstrap.css is a Style sheet and its name doesn't make it write/edit protected file) you get the style that you've applied to it.
http://getbootstrap.com/
Web.css
This file might be the default Style sheet that was created by the Developers at Microsoft while creating the Template for the Website that you're using.
Secondly, when you edit and create this file, it is also a Style Sheet which means it would apply the style to your website and all the web pages who are refering to it.
You're right. It has all the pre-defined methods and contains all of the contents and styles required to make a web page responsive. For more: https://en.wikipedia.org/wiki/Responsive_web_design
What might have caused this problem would be cache. When you first loaded the web page, it would have captured the New Style sheet from the file System and would have applied the styles. But second time it would have loaded the File from the Cache.
https://en.wikipedia.org/wiki/Cache_(computing)
This way, the browser would load the last successive layout of the Web Page. Without loading a new StyleSheet from the File System.
I really think, you need to reload the page using CTRL + F5 button. This would be helpfull in this manner! Because Bootstrap.css is editable and you can edit it. It doesn't prevent editing, only caching would be the problem here.

loading JS files in spring mvc

Is there any way if i can load javascript and css files in spring mvc, such that it is not readable whenever someone view source of the web page ?
I want to do this without doing minification.
I also looked for other options like & dont know which one to user.
NO. Well, not really.
You can't add js and css to the DOM and have it work without being in the DOM. You could dynamically load them, but they will still be visible in the DOM inspector in any browser, but will not be visible to your run of the mill user right clicking and doing view source.

Loading JavaScript / CSS files

I load a page with JavaScript and CSS files included in it from multiple iframes embedded in my flex application, are these JavaScript and CSS files loaded multiple times in the browser for each iframe? If yes how can I avoid it or what are the best practices?
Thanks
So here's a test on JSBin: http://jsbin.com/olome5/edit
I loaded in the home page of Google 3 times, using different iframes.
As you can see from the image below, the JS resources were loaded 3 times, even though they were the exact same files -- not loaded from cache. This means that resources brought in through your iframes, at least if they're brought in simultaneously, are all loaded.
How you could avoid this scenario, I'm not sure. Instead of using iframes, you could use AJAX to load the content right into the DOM of your container page, that way, the JS / CSS would only need to be loaded into the container page and it would apply to all elements loaded within.
Of course, this is tricky for JS, because all of the content brought in would then have to have the events re-attached after they were brought in, etc. This can be made easier with something like jQuery, but still isn't a small amount of effort.

Categories