I want to know how these analytics and advertisers are called from 'online.wsj.com' HTML source. Upto the following point, HTML code in Firebug is consistent with the one in I accessed via 'view source page'.
Firefox view source page:
<'!--[if IE 8]><'link rel="stylesheet" href="http://sc.wsj.net/djstyle/1/ie8/ASIA_WSJ/0_0_WAH_0001_public-20140522122816.css" type="text/css" /><![endif]-->
<'script type="text/javascript" language="javascript" charset="utf-8"><!--
var userName = '(none)';
Firebug:
<'!-- [if IE 8]><link rel="stylesheet" href="http://sc.w… -->
<'script type="text/javascript" src="http://beacon.krxd.net/optout_check?callback=Krux.ns._default.kxjsonp_optOutCheck"><'/script>
<'script async="" src="//cdn.krxd.net/ctjs/controltag.js.36fec01aa23444783514e74efb6b7d64"><'/script>
<'script type="text/javascript" async="" src="http://cdn.cxense.com/cx.js"><'/script>
Is it 'jsexec' calling these third-party domains?
PS: I am newbie to web-programming and I would highly appreciate you kind input.
Thanks.
The View Page Source option in Firefox shows you the raw HTML source as it came from the server.
The HTML panel inside Firebug on the other side provides a live view on the HTML source. That means it is updated on changes done to the HTML structure through JavaScript.
These changes can also be expanded and highlighted within the panel checking the options Highlight Changes and Expand Changes within the HTML panel options menu:
To answer your question: Yes, the third-party scripts are added dynamically via JavaScript.
Related
My browser extension has an onboarding page, and I've implemented AlertifyJS in the tag of the HTML file as follows:
<head>
<link rel="stylesheet" href="alertify.min.css"/>
<script src="alertify.min.js"></script>
<script type="module" src="onboarding.ts"></script>
</head>
No surprises here and this works fine. However, I now want to have Alertify dialogs not just on the onboarding page, but also on external websites on which the extension is activated. How do I get alertify.min.js and alertify.min.css into my content.ts script, such that it can bring up dialogs on any website?
Thanks in advance.
I have a WowSlider that is not working when running the main page of my Wordpress website with https. The images in the slider appear stacked statically one after another. When running the Wordpress website with http, the slider works fine (provides the transition effect expected).
I am trying to figure out how to modify my website such as to launch a javascript with https, not http. I want to launch the javascript as
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script> (*)
but not as
<script type="text/javascript" src="http://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script> (**)
But since I have not been able to manually edit the source code behind the main page, I have not been able to get (*) to work.
Hence the question: How to modify the Wordpress site (php scripts?) such as to implement (*)?
I have come to understand that the problem has to do with contention between http and https.
My problem resembles the one from
jQuery slider not working in https URL
I believe the same solution will apply. I should launch the javascript using
<script type='text/javascript' src='//wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
or
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
The hypothesis above is supported by an observation from
https://www.allbookcovers.com (***)
Here a corresponding WowSlider operates fine with https.
When analyzing the code behind (***), I noticed the following:
<!-- Start wowslider.com Head section -->
<link rel="stylesheet" type="text/css" href="js/engine1/style.css" />
<script type="text/javascript" src="js/engine1/jquery.js"></script>
<!-- End WOWSlider.com section -->
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-magento-fix.js"></script>
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js"></script>
In my website, the javascript is launched with http, not https:
<script type="text/javascript" src="http://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script>
I tried to comb through my Wordpress website to figure out where jquery.js was being launched. I found the following in
\\wp-includes\script-loader.php(963):
scripts->add( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4' ); (****)
It was not clear to me how to modify this such as to result in
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script>
getting added to the main page, since (****) made no direct reference to http.
Any suggestions?
I withdraw the question. I appear to have stumbled on a solution. As I was getting ready to hand-edit the PHP files comprising my website, or even go into the PHP database and manually edit the content, I stumbled on a plugin called "Really Simple SSL". I installed the plugin. And vuha! My problems went away.
Link to Fiddle
The prompt works when the 'Frameworks & Extensions' is set to jQuery 2.0.2
but when I add...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
...to replace JSFiddle's jQuery 2.0.2 and I set 'Frameworks & Extensions' back to 'No-Library (pure JS)' the prompt does not work anymore.
After trying dozens of variations the prompt still fails to run. What is causing this difference in behavior?
This happens due to the way JSFiddle "inserts" the code in the output page.
Your fiddle uses 4 ways to input code:
the HTML box (top left),
the CSS box (top right),
the JavaScript box (bottom left) and
the "External Resources" (left menu).
The output part (bottom right) will print what you place on the above boxes like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by Birdlaw</title>
<!-- Here goes the selected JS lib (jQuery 2.0.2 in your example) -->
<!-- Selected Extensions are here (in your case, bootstrap, then bootbox) -->
<style type="text/css">
<!-- Content of the CSS (top right) box goes here -->
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
//<!-- Content of the JavaScript (bottom left) box goes here -->
//<!-- Actually, this can be configured (the second combo at left menu - "onLoad") -->
});//]]>
</script>
</head>
<body>
<!-- Content of the HTML box goes here -->
</body>
</html>
As you can see, taking jQuery out of the selected framework and placing it in the HTML box has different outcomes.
Selecting it as framework places it before the Extension (bootstrap and bootbox) files. When it is in the HTML box, it is placed after the Extension files, thus yielding the error (because those files need jQuery).
How to make it work? If you want to place jQuery in the HTML box "manually", then place all of the Extensions files there as well, in the correct order. This will make it work as expected.
Here's an updated fiddle, containing the fix above.
Because when you do that, the order that the JS files are loaded is different. The bootstrap and other files are loaded BEFORE the jQuery file. So when it looks for the file, it is not there and throws an error. Look at the console.
The problem is that you had the bootstrap external library being loaded before jQuery was being load(if you didn't want it to be loaded by JSfiddle interface and on your HTML page), and bootstrap needed jQuery to be already loaded to be able to initialized.
ie: this can't be on the HTML section if you bootstrap to work
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js"></script>
I've updated your fiddle with the correct order:
http://jsfiddle.net/gjkooofv/13/
Notice on external libraries that jquery is the first then goes all the other ones.
im using this Color Picker Jquery plugin (http://colpick.com/plugin)
Problem is, i tried same simple code in in .html but when i change just extension to .php, the Color Picker doesnt work, while everything else works.
A simple button and added the important scripts like colpick.js and colpick.css.
Example:
index.html
<html>
<head>
<script src="jquery-2.1.3.min.js"></script>
<script src="canvasSettings.js"></script>
<script src="colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="colpick.css" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<button id="idColor">Show Color Picker</button>
</body>
</html>
canvasSettings.js
$(document).ready(function()
{
alert("First");
$('#idColor').colpick();
alert("Second");
});
So in index.html, when you click on button, it opens the Color Picker and both alert's show up, all good here.
Problem is, when i change index.html to index.php (when using an php server), the site loads up normaly, button shows up and "First" alert shows up.
But when it reaches the $("#idColor").colpick({}) it doesnt process, "Second" alert doesn't show up.
Have in mind that $("idColor").val() works.
Is there any special way to change this .html into .php even tho the html code is the same?
You've misdiagnosed the problem. It has nothing to do with serving up the HTML from PHP instead of a static file.
Here you load jQuery:
<script src="jquery-2.1.3.min.js"></script>
Then you load the plugin which binds itself to jQuery:
<script src="colpick.js" type="text/javascript"></script>
Then you load jQuery again (but a different version):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
This overwrites the previous jQuery object and the colour picker plugin that you had bound to it.
Decide which version of jQuery you are going to use (the faster 2.x or 1.x with support for old versions of IE).
Load it before you load the plug in (you are currently doing that for 2.x but not 1.x)
Don't load the other version
SOLVED!
The problem was caused by:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
after i removed that, it worked.
Still need to find a bypass around that, why it caused the problem.
I am trying to use jquery autocomplete plugin in my application.
It works well on IE and FF
Chrome is behaving wierdly and not calling the function.
<script type="text/javascript" src="/GIM-WebUI/jquery/jquery-latest.js">jQuery.noConflict();</script>
<link rel="stylesheet" href="/GIM-WebUI/jquery/autocomplete-main.css" type="text/css" />
<script type="text/javascript" src="/GIM-WebUI/jquery/autocomplete.js"></script>
I kept alert dialog box in my autocomplete function. Both FF and IE pop up the alert message but not chrome. Am I doing something wrong here?
Its erroring out when I call .autocomplete on some dom element. Thank you.
I suspect the problem is here:
<script type="text/javascript" src="/GIM-WebUI/jquery/jquery-latest.js">jQuery.noConflict();</script>
-^- -^-
A script tag may either have a src attribute or have code content, not both; from the docs:
If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.
I suspect you probably want:
<script type="text/javascript" src="/GIM-WebUI/jquery/jquery-latest.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
...but only if you really want jQuery not to use the $ symbol (e.g., you'll always use the jQuery symbol instead).
Off-topic: Chrome has a good set of tools built-in for helping you diagnose problems. Press Ctrl+Shift+I to see them (or select the Developer Tools from the wrench menu in the upper right-hand corner). You can look for errors in the Console, set breakpoints, walk through code in the debugger, etc...