I have a javascript file that needs to count how many classes (.wrapper) there are in a external html page.
So far i have been using this for a count (it was previously all on the same page).
var adCount = $('.wrapper').size();
alert(adCount);
But i can't seem to find anything that would allow me to run this statement on a different page than the code is runing on. I was hoping to add something like this.
var adCount = $('js/sliderExternal.html .wrapper').size();
alert(adCount);
They are in the same directory but I'm keeping the pages seperate as the external page needs to be updated constantly and i don't want it in the middle of a page of code. (This page may be updated by people who don't code at all). Anyway, any help on this would be much appreciated.
If you need any more information ask away!
Thanks.
This should work:
$.get('js/sliderExternal.html', function(data){
$(data).find('.wrapper').size();
})
Also see API Doc for $.get().
You would have to load the page into your html first using document.load() and append() it to your DOM structure. Once you do this you can use JQuery to find the number of classes within it.
Load that external html inside some div having visibility false.something like this:
$('#id_of_div').load(external_url)
and then find the length using:
var numItems = $('.wrapper').length
Related
I've been trying to figure if there was some sort of way to count all tags on my webpage so far haven't had any luck so I came to my last resort you guys!
Basically what I want is to detect all script tags getting a total where I can than
for example
if(scriptCount != 5) {
//send warning that this user may be using an outside script
}
Just get them and use length, of course you have to actually do this after all the script tags are available in the DOM, which means in the last script tag on the page, or inside a DOM ready handler.
var scriptCount = document.getElementsByTagName('script').length
send warning that this user may be using an outside script
You shouldn't.
There are many browser addons which add script tags to a page which are visible to the page's JS code. No user will tell you that they are happy because you warned them. But you will likely lose users who think that your page behaves oddly.
If you want to prevent "cheating", then this idea won't work either.
In my project,
I have created a code snippet which can be copied and then put in any website. It shows my content on other websites.
What I am using now is :
<script type='text/javascript'>
var user = 'abc';
var age = '23';
document.write('<iframe src="http://www.mysite.com/page.php?user='+ user + '&age=' + age + '" ></iframe');
</script>
In page.php,
I do some processing based on user and age and show dynamic content.
My approach works fine.
But when I look into some good standard ways to do such tasks, I find a different way.
Take an example of google adsense code.
<script type='text/javascript'>
var a = 'somedata';
var b = 'someotherdata';
</script>
<script type='text/javascript' src='http://www.google.com/adsenseurl.js'></script>
I guess, since a and b are global; adsenseurl.js must be using it and may be finally they are showing it on iframe.
So, now the question.
What's the advantage in using google's approach and whats wrong in my approach ?
p.s. I know I should try to avoid using iframes but I dont see any other way to accomplish this.
The main difference between your approach and adSense is in my opinion that your code has to be placed where the ads have to appear and loading a script like adsense, they can place the iframe in the DOM after examining the page - using
var myIframe = document.createElement('iframe');
.
.
someDOMObject.appendChild(myIframe);
and/or manipulating the zindex to float the iframe above the page
Lastly the iFrame is useful (regardless of "oh noes - iframes are evil" you may hear) since you can use any css and jquery you like. If the page you are on already has styled divs and old versions of jQuery you will have a lot more work to make it look like you want.
Why use an iframe? If your user loads the <script src='yoursite.com/something.js'></script>, you immediately have access to his DOM and you can do whatever you want via that something.js. In the same way that you load jQuery from some CDN - it can be immediately used to modify the DOM.
Otherwise there's really no difference except that:
Instead of embedding a potentially big amount of code that your user has to maintain, he just provides the necessary variables and simply links to a script on your page.
You can update the js code on your server and make sure that all your users are immediately (minus caching) up-to-date with the new functionality.
There might be other advantages, but these two should suffice I believe.
I am working on some code that uses jQuery to parse data out of html documents from the web. This decision was made because jQuery, with its awesome ability to select objects on a page, makes it excellent for parsing.
The code works like this (where 'html_string' is the html of a whole web page):
var page = $(html_string);
The problem I am having is that javascript is being evaluated and executed within the html_string as well. This results in new threads being formed that in some cases, contain infinite loops that make repeated requests to the server and eventually crash the whole client-side of application (not the server).
Is there a way to somehow prevent the execution of javascript in this situation. In this situation, the execution of javascript is an unwanted side effect.
Thanks so much!
Here is a crappy little jsfiddle that shows you the js does not run when you load the html_string into $. When you click run you will see an immediate alert 'wtf'. Three seconds later, the html is loaded into $ and the body is updated to say 'moo', you should not see the alert.
http://jsfiddle.net/9BAkE/
One way would be to parse the html string befor you wrap it with jQuery.
Something like:
var page = html_string;
//then find the script tag (untested code)
int beginning_of_script = page.indexOf('<script>');
int end_of_script = page.indexOf('</script>');
// remove the script
page = page.remove(beginning_of_script, end_of_script);
You could load this syntax into the browser initially as a comment
<script>
/* var page = $(html_string); */
</script>
and then extract the contents of the comment later. The advantage here is that the browser is not going to parse and execute the comment on page load.
You can also explore using jQuery's .load() function, not sure if that will suit your needs.
If you donot care having one extra element, check this! http://jsfiddle.net/UbCFc/4/
I am inspecting a website, which has tons of JS files loaded from several servers along with jQuery. Number of js files is really big. Some are within the regular scripts tags. Others are loaded dynamically via ajax.
I am interested in certain elements of the DOM which are manipulated because of some js file. I see the dynamic loaded elements in firebug. I needed to know exactly which JS script creates/updates them.
I searched the js files for the classes and the IDs of the elements,so I can have some clue about which js file affects them, but I found nothing.
Is there any direct way using Firebug to know exactly which JS file manipulates certain DOM elements?
Thanks in advance.
Not in a direct way.
Use EventBug addon
Then search by the function signature in your script panel to drill down to the js file
Hope this helps!
You should be able to go to Script tab in firebug, then look at the toolbar right below the script tab you can select all the javascript files included on the page.
If you have an idea which file it is coming from then select that file and then look through the code and set break points on functions you think the event is coming from by clicking on the respective line number, then refresh the page and perform the event that calls the javascript.
You might have to put in a few before you narrow it down, but the break points will make it alot easier to tell which functions are being called for which events.
I have a web page that loads an external chat script, but the script loads before all my CSS and jQuery kick in, so my page looks all messed up for a few seconds. Need help figuring out how to launch my chat script once the page is done loading...I think it can be done by adding the script into my jQuery setup, but I'm not sure how to do that.
here's the code, it's self-explanatory enough not to be familiar with the actual software.
<script>
var online_text = "Chat Online Now";
var offline_text = "Chat Not Available";
var check_back = 1; // this lets the script check the operator status without being logged in
</script>
<script src="http://my.domain/chat/file.php"></script>
I think what happens is that the .php file will write my online or offline text with the necessary chat link, and that's why I have to put the script in the place where I want the chat text to display.
hope that makes sense...and hopefully the community can help me figure out how to solve the problem. thanks!
UPDATE: here's where I am so far, unfortunately the #chaticon element is empty, even if I replace the script with simple text. Using jQuery 1.4.2 by the way:
$(document).load(function() {
var online_text = 'Chat Online Now';
var offline_text = 'Chat Not Available';
var check_back = '1';
$("li#chaticon").html('<script type="text\/javascript" src="http:\/\/my.domain\/chat\/file.php"><\/script>');
});
Check out using the JQuery function $(document).ready().
It will hold off running until your entire document is loaded and ready to go.
$(document).ready(), which was previously mentioned, will only wait until the DOM is ready for manipulation (i.e., the node hierarchy has been fully constructed). This will not, however, wait until any additional resources (images, style sheets, etc.) have been loaded, which sounds like what you're wanting to do.
If you need all of these additional resources to be loaded first, then use $(document).load(). This will wait until all additional resources have finished loading (and hence the page will have been fully rendered).
Stephen,
As per Dave's advice of putting the $(document).ready() function on the page i.e:
$(document).ready(function() {
var online_text = "Chat Online Now";
var offline_text = "Chat Not Available";
var check_back = 1;
// do any other stuff here
});
also, make sure the js files are loaded at the bottom of the page, just ahead of the closing </body> tag and the css is loaded in the <head> tag. This may or may not sort the above issue, but is recognised as 'good practice' in terms of page configuration.
jim
thanks jmar777, I agree there's some re-evaluating that needs to be done here...the chat script is a mix of document.write, php/mysql and some dom-oriented stuff. Not worth toying with for hours.
So I ended up putting the code from my original post into a PHP function and returning it to a variable all the way at the top of the page, this way it would be written a little bit earlier than if it were written on the fly while my page were loading. And I made a few tiny tweaks to my CSS file so that the part of the page that was getting strange-looking while the chat script loaded wouldn't look as strange.