I have a javascipt code something like
<script type="text/javascript" src="http://ads..........." ></script>
this script shows a banner. i want to use onClick event with this script without disturbing the banner click. is that possible?
Yes if the banner is not wrapped in an iframe that is cross domain, but the question is...
onClick event on what? the banner? the page? another element?
use addEventListener/addEvent or a JS library to add the event. If this kills the banner be sure to take the banner's onclick property and add it as well to the banner.
Those scripts usually produce dynamic content via document.write. If you examine the resulting DOM (e.g., via Firebug in FireFox, or Dev Tools in Chrome, etc.), you can get an idea of what the resulting structure is. If there's a top-level image or link, you can hook it with a DOM2 handler (addEventListener is the standard form; IE uses attachEvent instead; Javascript libraries like Prototype or jQuery can help iron out the inconsistencies for you). That would let you see a click without disturbing its underlying action (provided you don't cancel the event, but you have to do that on purpose, so you should be okay.)
Process that click through the handler, e.g.
<!-- Banner image -->
Related
I am trying to hide my preloader with JavaScript once the DOM and at least the top content has been loaded. The problem is that my page has several iframes which can slow the process down a lot.
My understanding is that if I use jQuery's $(document).ready to hide the preloader, it will be hidden too soon. On the other hand, if I use $(window).load, the waiting time may be too long. So, is there a middle-way solution, - kind of like window.load but without waiting for iframes?
EDIT:
My page has stuff like Facebook Like button Google Translate and a few other scripts that work via iframes. These are not critical elements, and I would not like to wait for them to load fully.
On the other hand, CSS files like Bootstrap, jQuery, etc. are curcially important for the presentation, and therefore to show the page (hide preloader) w/o having these loaded first would be premature.
Thanks.
You could use $(document).ready to determine if a particular element is loaded before hiding your loader.
Or if you have partial views, to have a $(document).ready function in one of those pages js do the loader hide job.
Since you did not provide more info, these are closer to guesses than real solutions.
I think you're looking for document.onload, which will fire when the DOM tree is ready. I believe that it fires before iframes, which all get their own onload callback/event handler.
You can also try placing the script tag at the end of your html file without begin inside an onload or ready function. This will cause it to load the html content, then fire the Javascript.
EDIT
A thought just occurred to me, which may or may not be useful. You probably have an idea about when you want your script to execute. In whatever browser you are using, check the network tab of the development console. There may be some other element's onload function you want to wrap your code in. For example, if you have a background image you want to make sure loads before your code executes, you may want to use it's onload.
As Petre said, lack of info in the question makes answering difficult.
So sometimes when working with the Moovweb SDK a client will AJAX in a content spot, but it will be in the incorrect area?
I cannot use tritium to move this content, because the area I want to move it to is inserted after page load!
Example:
<div class="where-i-want-to-move-it"></div>
<div class="content-area-i-want-it-moved-from">
<p class="content-i-want-moved">Hi! This was ajaxed in at a later date!</p>
</div>
How can I detect that this p tag was added through AJAX when I cannot control their JS to fire a specific event or fire a different call back?
One option would be to listen to node changes -- see this post -- and assuming you can target the correct mutation event, move the content manually in JavaScript.
Our firm avoids using MutationObserver because older versions of Android and IE don't recognize it.
Instead, we have begun implementing CSS Animations. You can insert CSS into your .ts file to assign animation #keyframes to an element. We then add a JS listener to listen for "webkitAnimationStart". So now when the AJAX'd content loads, the listener is instantly triggered, and we can now manipulate the new DOM using JS.
It is an excellent trick, and is cross-browser compliant when fully implemented.
Regardless of whether I'm trying to go to index.html#ExistingAnchor or index.html#NotExistingAnchor or any other anchor which might or might not exist on the page I'd like some javascript function to be run.
<html>
<body>
<a name="ExistingAnchor"></a>
</body>
</html>
What javascript code can I use to achieve it?
The page may already be loaded so I'd be just visiting HTML anchors on the same page from the browser address bar without reloading the page.
Also, having visited a number of anchors on the same page when I'm using the Back and Forward browser history buttons, I'd like some JavaScript function to be run as well so that I could identify what anchor I'm currently on - could you please advise this as well?
On modern browsers you can implement onHashChange event, on IE6/7 you're going to need to use some trickery involving iFrames and window.setTimeout.
The jQuery history plugin will achieve what you want if you use jQuery, if not you can study it and port it for your needs.
http://tkyk.github.com/jquery-history-plugin/
i see that that template has some code to see if the client has the required version, and it does stuff if it has or it doesn't
and there is a <object> tag inside <noscript>
question: if the stuff is gonna work with the <object> tag anyway why would you need all that stuff above with the control of version if it has or not ?
What is inside the noscript tag is only run in the case that the user has turned off javascript in their browser. This is required for the Flex page to still work in that case.
The other code is inside of a script tag, and handles the creation of the flash object smoother than the brute force method in the object tag. It would prefer to use this method, but in the case that scripting is disabled, it will use the object method instead in an effort to still give the user what they want on the page.
That is why it seems that it appears twice in the page. For any given browser only one section should actually run.
How can I only load the HTML of a page into an IFRAME, without automatically triggering the download of all the css,scripts,images,videos on the page?
Or can you get an event the moment the DOM is "ready".. when the initial HTML has loaded and nothing much more.
To get only the HTML contents, try using an AJAX call. That would, of course, return the content in a variable, but you might process it as you see fit afterward.
There is no cross-browser way to do this. Some browsers provide events that fire when the DOM loads, like DOMContentLoaded for Gecko.
jQuery implements this functionality. I suggest you either use jQuery for this:
$(document).ready(function () {
// Function is called when the DOM is loaded.
});
Or check how jQuery implements it. See the bindReady function in the jQuery source code.
The short answer is "You can't".
Internet Explorer supports a propriatry attribute which can prevent scripts from executing, but it isn't cross browser and doesn't deal with images or stylesheets.
A number of JS libraries implement a custom event that fires when the DOM is ready - but browsers load resources in parallel, so while that event may fire before all images and stylesheets are loaded, it is unlikely to fire before the other elements start to download.
If you really want the page to load without those things - process it on the server to strip out the HTML that includes them.
Set 'Content-type' for that HTML page to text/plain.