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.
Related
Sorry if my question is trivial, I am a beginner and am not quite sure how to approach this problem.
I am writing a blog that has a MENU bar at the top of the page. Since I don't want to update all menus on every html page, I wish to source the containing my menu from a different html page.
I have tried using an iframe or frameset, but those will unfortunately cut my dropdown menu off at the bottom. This means I either have to remove those or make a frame so large that it is large enough for the dropdowns, but that will squish the rest of the page down. Also, if I clicked any of the menu options, the page that would be updated would be the frame itself :|.
I was therefore wondering if it is possible to call a small portion of pre-existing code into an html file? I have also tried the .load() function of JQuery, but even simple tutorials don't seem to work for me.
Does anyone know a way to either import the div into an html file, or a way to get my .load() function to work? I have added the .load() tutorial I used below.
PAGE THAT CONTAINS THE DIV
<html>
<head>
</head>
<body>
<p>This is demo text.<p>
</body>
</html>
PAGE THAT RECEIVES THE DIV
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#content').load("new.html");
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
Build the menu as a PHP file, then pull it in using an include function:
<?php include("/yourMenu.php"); ?>
It's that simple. Changing /yourMenu.php will change it on every page. Hope that helps!
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 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.
So I just discovered the bootstrap and I'm trying to implement it into my small webpage/app so that I can make my form/console box more visually appealing.
After integrating bootstrap as an external resource in jsfiddle, the prototype of my app/page still works. See:
code to make the red box go away
jsfiddle
As you can see, the jsfiddle version of my app is working properly
But when implementing bootstrap into the actual site, everything is out of wack...
Actual site
As you can see, the main image and output of text is completely gone and the structure of the form/console is also gone.
Can anyone explain what's going on here?
Am I integrating the CSS file incorrectly or am I just implementing bootstrap incorrectly, in general? Here's some the of the HTML file uploaded to the server:
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
...
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="textualizer.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Or does it have something to do with the CSS selectors and maybe they get altered after integrating bootstrap and that's why it's not working in the actual site? I'm totally lost here as to why it works in the jsfiddle but not with the actual site. (usually when I'm completely lost on something of this magnitude, the answer ends up being the most simple thing that I just happen to overlook)....
As you can see in bootstrap docs, it has some markup with css classes to get what you wanted. example, <div class="container"> </div>, <button type="button" class="btn btn-default">Submit</button> etc. It will not get applied automatically to your html page by just adding the css reference. Since you used your custom css styling in jsfiddle it works fine. However, since you have not used your custom css in your website, it will render as plain html markup without any styles.
Hence, please change the markup with bootstrap layout and classes for your website and see the result. If you wish to override colors, etc, you can use a custom css file just after the bootstrap core css file as:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mycustomstyle.css">
You can make overrides to the bootstrap core styles in mycustomstyle.css file. Just read bootstrap docs thoroughly to get an idea about using it in a website/web application.
Ok - first of all I know this isn't ideal - however we have inherited a problem and some badly thought out SSI html.
So some background: We have implemented a responsive site which has to include some SSI code from the client for global top nav and footer - so far so good. However the SSI needs to change from DESKTOP to MOBILE as the site is resized/loaded on a mobile device. We do all this client side at the moment. We have a trigger at break points to alter the dom to do all the responsive stuff.
A similar example is here http://www.conrandesigngroup.com. (Resize the browser to see what happens.)
Normally we would load the SSI into holding pages and AJAX the code in to the appropriate place using some kind of selector.
The problem: The SSI is not fully formed HTML, it looks something like this:
<!-- desktop ssi -->
</head>
<body>
Whole bunch of desktop html...
<div class="content">
Then the SSI we have for the mobile site is:
<!-- mobile ssi -->
<script>some script...</script>
</head>
<body>
Whole bunch of mobile html...
<div class="content">
So you will notice there is a closing</head> and an opening <body> and at the end there is an opening <div>. So there is no way we can select this and replace using the DOM. We were thinking of using comments either side of the code and using a javascript regex to replace the code. Im not sure if this would actually update the browser.
So in desktop mode the whole page will look like this:
<html>
<title>my page</title>
<head>
...all the head stuff
<!-- START of ssi -->
<!-- desktop ssi -->
</head>
<body>
Whole bunch of desktop html...
<div class="content">
<!-- END of SSI -->
...all the page HTML
</div>
</body>
</html>
So thats fine - the HTML is all put together serverside and we can open and close the tags correctly. The problem is how would we change the HTML INSIDE the comments using client side code <!- START of ssi -->...<!-- END of SSI -->
In the end its not really a SSI question - rather a way to change a bit of HTML which is not wrapped up nicely in an element.
Anyone come across this issue before or have any suggestions?
The common denominator is this:
The body element contains the content
Both the mobile and desktop content start with the first child of the body
The code to empty the first element would be the same for both versions:
document.getElementsByTagName("body")[0].firstChild.innerHTML = "";
Wrap the code in a pre element to make it easy to modify.
References
W3C DOM4