Suppose I have a web http://mayxaydungchina.com whose body contents can be dynamically populated using ajax or the Load() method.
How do I remove an existing to an external css file or an external <script> file from the head section of my web page?
I thought about using the append and prepend methods but I was thinking that they do not remove the existing link to an external css or an external script file.
I need to remove existing external css and scripts before adding new ones to help make my page load faster.
Related
I'm creating a web application to display reports which are being fetched from Tableau server. I use tableauSoftware.viz() function to get the reports and display them.
I'm using tableau_v8.js file.
An iframe is generated dynamically using tableau_v8.js file. This iframe contains an HTML document that uses dojo framework to create UI components on HTML page.
On the click of a button on the UI which was generated inside the iframe, some new HTML DIV tags gets added dynamically.
I think these DIV tags are being added because of some script or functions being called on the in the JavaScript (i.e. tableau_v8.js) file or because of some request being POSTED on to the tableau server, but I don't have a clear understanding on how these elements are being generated.
How do I find a way to understand the dynamic creation of HTML document as well as other HTML components inside an iframe?
How should I go about this issue?
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.
I want to include a file based on the page name or another unique element using Javascript for each html page on my website.
The script would need to identify the element then load the correct file.
My website pages end with the extension .html -- If I could change them to .php I would and I would be set, but I cannot change the structure.
So for example, a script would check the beads.html for a unique element then it would load the beads-nav.html file that's associated with that element. jewelry.html would load the jewelry-nav.html file, etc.
You can load external pages via ajax.
With jquery it could be as easy as this: $('#result').load('ajax/test.html');
Taken from here.
It's a known fact that jQueryMobile loads pages with ajax and is not including in DOM the header content in every pages.
I need to load a custom js file in some pages, how can I achieve this? Until now I have placed the .js files in the body, but there are some problems with the code there too so it's not a good workaround. Until I can find a solution I will use the rel="external" workaround, but I really need to find an answer to my question.
You could try including the custom script within the data-role="page" div in pages where you want to use those javascript.
From JQM docs:
Another approach for page-specific scripting would be to include
scripts at the end of the body element. If you include your custom
scripting this way, be aware that these scripts will execute when that
page is loaded via Ajax or regular HTTP, so if these scripts are the
same on every page, you'll likely run into problems. If you're
including scripts this way, we'd recommend enclosing your page content
in a data-role="page" element, and placing scripts that are referenced
on every page outside of that element. Scripts that are unique to that
page can be placed in that element, to ensure that they execute when
the page is fetched via Ajax.
You could use some javascript to dynamically add the js file to the DOM.
This is demoed here: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
I have a classic ASP application that I've been constantly trying to modularize. Currently, almost all pages are divided in to two pages:
an outer page that contains the layout, header, sidebar, footer
an inner page that contains ASP code
The outer pages use dreamweaver templates so updating layout and replicating changes is easy. The inner pages are managed by me. Now here is the problem:
I had to add a lightbox to one page, I chose Lightbox 2 which requires Prototype. I ended up adding Prototype on every page, assuming that sooner or later I'll upgrade all pages, forms, ajax requests and other javascript to use Prototype. I've now added two other plugins -- Modalbox and Protofade; each with a pair of .JS and .CSS files. Since I'll be using these three plugins on specific set of pages I am wondering if I can load the required CSS and JS files dynamically. I do not want to access the document head and add include files there (i.e. by bloating the <head> tag with about a dozen <script> and <link> tags), I'll have to do this from inside a DIV where all ASP code is supposed to go.
You can add scripts dynamically by adding script elements to the document; details and sample code on the this page from Unofficial Prototype & script.aculo.us wiki. E.g.:
var element;
var script;
element = /* ...grab the element you want to add to; I'd use $$('head')[0] */;
if (element) {
script = new Element('script', { type: 'text/javascript', src: 'dynamic.js' });
element.appendChild(script);
}
Adding stylesheet links should be essentially the same. Although that page has you adding to the head, you've said you don't want to do that (though I'm not clear why not, since you're doing it dynamically on the user's machine), but it should still work regardless of where you add them.