VS2010 WebApp .js+.css able to be embedded fully within HTML code? - javascript

So I'm looking to take HTML code for a slideshow and insert it into an HTML box for an app.
However, obviously the .js and .css dependencies need to go with it, or else it won't function properly.
Is there a way/program that allows me in VS to take those classes and insert them within the HTML file so that they are all read at once, and the slideshow works? Ideas?
Thanks,
D.

Use external files to allow the browser to cache them. Put the reference to the external files in your master page.

Related

Is it better to have a single .js file or copy the script in every page?

I'm building a website which uses three, identical JavaScript functions in a lot of HTML pages.
Is it better to link all the pages to a single .js file or copying the script to every HTML page which uses it?
I recommend putting the script into a separate file and link to it. If you want to make changes to the code, you only have to do it once. => Removing redundancy. On the other hand, you reduce the amount of requests to the webserver, because each script tag will create an extra GET request. But I gladly pay this price for low redundancy!
I prefer to use one file and link to it.
But if the functions are pretty small google will be happy if you put them in the footer of your page directly above the body tag. I would do this only if you use a template where you have one footer for all pages and don't need to edit every single page.

How to embed HTML5/CSS + js music player on single wordpress page?

I have an html 5, css, and javascript audio player that I'm trying to add to one page on my wordpress site.
I tried to paste the html into my page's text editor, while installing the JS and CSS folders for the player in my child theme's folder, which didn't work.
I tried placing the CSS for the player styling in my child themes CSS file, and that didn't work. I also tried linking to the style sheets and js scripts from the header.php file, which wasn't working for me.
My first thoughts are that because the html is showing up as it should, the css and JS files aren't being called. So I just need to figure out the path structure of how wordpress creates pages? Yet I know wordpress does something with a database to display the pages?
I saw some documentation about using I think it was either php or JS functions to call scripts or something and I don't understand enough of those languages to be able to make sense of it yet.
I'm still working with my developer, but he's 7 hours ahead of me and asleep. I just want to put the hardcoded version of the player and a few songs on my site for now so I can do some testing/see how it looks.
I hope that this question meets the SO req's. I tried to search on my own and I know the answer is out there, I just don't know enough to understand it yet. Trying to get a head start
The path to your Child theme's folder should be '/wp-content/themes/name-of-theme/'. You can use that in your header to call the files from wherever you might have placed them in your Child theme's folder.
To hard code the HTML, pasting it in the WordPress page editor should work fine unless there is another JS call or some weird iFraming going on.. if that's the case, you can simply create a Page Template (https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/#creating-custom-page-templates-for-global-use) and paste the code there. You'll likely want to just copy an existing page template from your Theme, take out the inner loop, and replace it with your video code.
Adding the links to your 'header.php' file would be considered bad practice. You would want to create a 'functions.php' file inside your Child theme and call the JS/CSS from there. You can also find this within the WordPress codex (they literally give examples you can copy/paste and change your file names).

BabylonJS Execute Script from External File

I'm having a (simple) issue, but I have no idea how to fix it. Essentially, every tutorial I have come across for Babylon puts all of the Javascript code inside < script > tags in the main HTML page.
However, I would like to have all of my Javascript code inside a separate file. I have tried every way of loading it as I could think of, though I am a novice at Javascript (I am decent at C++, and I can see the similarities); yet I was unable to make it load. (It works fine when called from the HTML page itself).
Does anyone know what (if anything) I can do in order to be able to load my scripts from external files, and still get everything to work? Thanks in advance!
2 options:
register to the DOMContentLoaded event in your external JS file
reference your JS file with the tag at the end of the HTML page
You can find a sample in one of my tutorials here: http://blogs.msdn.com/b/davrous/archive/2014/11/18/understanding-collisions-amp-physics-by-building-a-cool-webgl-babylon-js-demo-with-oimo-js.aspx
Enjoy and thanks for using Babylon.js! :)
David

using squishit and rendering external minifiedjs at the end of body element

I have master page and child page in my aplication. At runtime i determine the js & css to be included in master page pre-init method and render the js & css using squish it (bundlecss.AsCached & bundlecss.Render) method. In master page Head control the file is included using Bundle.Css().RenderNamed method.
Now my requirement is to include the external js file at the end of body element to enable faster rendering of web page. When i called Bundle.Css().RenderNamed at the end of the body element, the js file is not included in the page.
Is it not possible to specify the location where the minified js should be included in page html when using squish framework ?
Thanks in advance.
Brahmaiah
You probably don't want to do things this way. The cached/named bundles are for scenarios where you can't (or don't want to) create physical files. The way you're doing it here just creates more complexity. Bundle.JavaScript().Add("~/file.js").Render("~/blah") will still cache the bundle, but it uses the file on disk (only created once).
Are you really calling Bundle.Css().RenderNamed("javascript bundle name")? If so you need to change the call to Bundle.JavaScript().RenderNamed. If this is just a typo it would help to see more code / markup.

jQuery in CSS style sheet

I’m working on making my web site fade in and out every time I click a link to another page. I need to use jQuery to do this. Do I need to put the jQuery code on every page or can I write jQuery into the CSS Stylesheet? If so, how do I format the CSS Stylesheet to accept jQuery?
I’m experimenting with the code from this forum post: Fade Out between pages – CSS-Tricks
Edit to question based on comments
So, I now know that I can’t put JavaScript in CSS file. What’s the best way to put JavaScript code that applies to all pages in a site? I want to write this transition code and then not have to write/edit it into every page.
Save the JavaScript in a file with the extension .js, for example main.js. Then give it a public URL, in a similar way that your CSS files are accessible from a URL. An example URL: http://example.com/js/main.js. You might do that by putting it in a js folder in your public_html folder on your server – it depends on your server.
Then, near the end of each page’s HTML, right above </body>, add this HTML tag:
<script src="/js/main.js"></script>
The script tag with a src attribute will load the JavaScript at the given URL and then run it immediately.
I recommend putting it at the end of your <body> element and not inside the <head> because the script prevents the rest of the page from loading and displaying to the user while the script runs. If you make the script run only at the very end of the page, the page is already loaded and the user can see all of its content.
you need to do a $.fadeout on the window.beforeunload event, bye
PD: in a js file, not in a stylesheet, you can´t use JS in a stylesheet. bye.

Categories

Resources