Develop Reference

Is there a way to edit how this widget loads on my website, to be responsive

I'm using a code for a GPA Calculator widget to run on my website, it was working fine, but now, it seems that it is changed from the source, and became unresponsive.
I've asked them for a new code with no response from their side.
Now, I'm trying to fix this from my side, and need your help!
Code:
<!-- Calculators.tech Widget -->
<div id="ppsWidgetCode" data-calculator-slug="gpa-calculator" data-calculator-keyword="GPA Calculator" data-config=""></div>
<div style="text-align: center; font-size:12px; color:#333;"><p>GPA Calculator provided by calculators.tech</p></div>
<script type="text/javascript" src="https://www.calculators.tech/assets/lib/js/calculator-widget.js"></script>
Here is how it looks like:
Previously, it was more like this:
I don't want to have this scroll option, I want it to show a complete shape of the calculator.
Is there a way to edit this from my side till I get any response from the calculator developer?

Looks like they have removed height attribute on iframe. Try this script below which tries to modify height on iframe when it finishes loading
<!-- Calculators.tech Widget -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
function renderCalc() {
setTimeout(function() {
$('iframe#ifr').css('height', '100%');
}, 3000)
}
</script>
<div id="ppsWidgetCode" data-calculator-slug="gpa-calculator" data-calculator-keyword="GPA Calculator" data-config=""></div>
<div style="text-align: center; font-size:12px; color:#333;">
<p>GPA Calculator provided by calculators.tech</p>
</div>
<script type="text/javascript" src="https://www.calculators.tech/assets/lib/js/calculator-widget.js" onload="renderCalc()"></script>
onload event fires when DOM elements gets loaded but still there is no way to find when the assets get loaded like images etc of the document embedded in . For mitigating that issue the timer of 3 sec is used

Using script tag to include JavaScript in program via a CSS file?

I have never seen this before. I have always included JavaScript in my HTML files. Is this jsfiddle doing it wrong or am I naïve?
http://jsfiddle.net/relly/jjwwd4mq/
CSS file in jsfiddle:
</style> <!-- remove this, it is just for jsfiddle -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<style>
.grid {
width: 500px;
height: 250px;
}
I have trouble googling the issue of using a <script> tag in a CSS file, it gets conflated with other issues like executing JavaScript in a CSS file.
Also, what part should be removed? Just the top line? I am baffled by the </style> followed later by another <style>...

Apparently jsfiddle implements their CSS/JavaScript sections simply using <style></style> and <script></script> tags inside an HTML file.

hide body until external resources(loaded asynchronously) load

So, I have various external resources like google material icons and so on which are loaded using the link and script tags:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
How can I hide the body until all these resources(loaded via link and script) are loaded completely? Can I do this using custom directives? And also, I am NOT using jQuery.
EDIT:
The reason I want this is that google's material design icons are included in the following way:
<i class="material-icons">
visibility
</i>
So, while the material icons css is still loading, I can see all these icon texts, 'visibility' in my case on the screen in their textual form. And, only when the css loads, does the text translate to icon form. I'll add a screenshot soon.

Hide your body in our CSS, and show it when the event DOMContentLoaded is triggered
JAVASCRIPT
document.addEventListener("DOMContentLoaded", function(event) {
document.body.style.display = 'block';
});
CSS
body {
display:none;
}

Just add display:none for body tag in header :-
<html>
<head>
<style>
body{
display: none;
}
</style>
/* Load all your external CSS and JS */
</head>
<body>
<script>
$(document).ready(function(){
$(body).css("display", "block");
})
</script>
</body>
</html>
It may help you.

Using this: https://github.com/typekit/webfontloader
Will output a class to HTML tag while loading fonts, this way:
.wf-loading
.wf-active
.wf-inactive
.wf-<familyname>-<fvd>-loading
.wf-<familyname>-<fvd>-active
.wf-<familyname>-<fvd>-inactive
With that you can do anything from html > to any other tag, body for example, so:
.wf-loading body{display:none;}
.wf-active body{display:block;}
Also you have callbacks to use via js, take a look, it´s working: http://fiddle.jshell.net/m2d6k8er/ it´s just a very basic example of course.

Edit 2
OP's issue concerning loading external scripts may need further testing with async and defer attributes. The following links will help in that direction:
Async and Defer (non-blocking JavaScript with HTML5)
JavaScript Execution Order; Asynchronous JavaScript
Promises - Thinkster
In 3 Minutes, JavaScript Loading of Scripts
MDN
Deep dive into the murky waters of script loading
Here's the JS equivalent of Harsh's code (if placed at the closing </body> tag):
EDIT 1
delayedBy(ms) is triggered by the onload event of <body>. You can adjust the delay.
function delayedBy(ms) {
setTimeout('visible()', ms);
}
function visible() {
var body = document.getElementsByTagName("body")[0];
body.style.visibility = "visible";
}
body {
visibility: hidden;
}
<body onload="delayedBy(1000);">
<h1>Here I am!</h1>
</body>

Can I not use embedded <style> CSS on Android?

I'm debugging a site on an Android HTC Sense. The site uses a lot of inserted content, which comes along with it's own CSS and JS like:
// wrapper id = snippet_id
<html>
<head>
<style type="text/css">
#snippet_id div {border: 1px solid red !important;}
div {border: 1px solid blue !important;}
</style>
</head>
<body>
<div>Hello World</div>
</body>
<html>
This is inserted into an existing page, so it sort these snippets are sort of like iFrames I guess.
Question:
Problem is, that while Javascript works fine, all CSS I'm specifying using <style> tags is being ignored. Any idea why?
EDIT:
Works on:
- Android 4.0.1
Does not work on:
- Android 2.3.1
- IOS 4.1
If I add the CSS to the main.css file being requested when the page loads, all is ok. If it's inside my gadget, it's not working.
EDIT:
So from what I can see, <style> does not seem to work on classes and id. If I use regular HTML elements as selectors it works.
EDIT:
My dev-site is here. I'm using a plugin called renderJs, which encapsultes HTML snippets (along with their CSS and JS) into resuable gadgets. Gadgets content will be appended to the page body, so although a gadget can act as a standalone HTML page, it can also be part of a page.
Example code from my page (I stripped out all gadgets but one below):
index.html - include index_wrapper gadget
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Organization" lang="en" class="render">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/overrides.css">
<script data-main="../js/main.js" type="text/javascript" src="../js/libs/require/require.js"></script>
<title></title>
</head>
<body class="splash">
<div data-role="page" id="index">
<div id="index_wrapper" data-gadget="../gadgets/index_wrapper.html"></div>
</div>
</body>
</html>
The page has a gadget called index_wrapper link - code below:
<!DOCTYPE html>
<head></head>
<body>
<div id="index_social" data-gadget="../gadgets/social.html"></div>
<p class="mini t" data-i18n="gen.disclaimer"></p>
</body>
</html>
Which has another gadget called social here. This gadget includes some CSS, but on the devices in question, it is ignored (just saw, I'm missing a </div> in the index_wrapper, so trying to see if that fixed the problem, too).
The code below includes my fix:
<!DOCTYPE html>
<head>
<style type="text/css" scoped>
// will be ignroed
.el {width: 1px;}
.menu_social {text-align: center; margin: 1em 0;}
.action_menu {display: inline-block;}
.follow_us {display: inline-block; margin: 0; padding: 0 .5em 0 0;}
...
</head>
<body>
<div class="menu_social">
<div>
<span class="el ui-hidden-accessible"></span><!-- fallback for CSS not working -->
<div data-role="controlgroup" data-type="horizontal" data-theme="c" class="action_menu">
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
(function () {
$(document).ready(function() {
var gadget = RenderJs.getSelfGadget();
// fallback for old devices which cannot load <style> css
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/social.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
// trigger enhancement
$(this).trigger("render_enhance", {gadget: gadget.dom});
});
})();
//]]>
</script>
</body>
</html>
So aside from probably missing a closing </div> I'm still wondering why my embedded CSS is not working.

Looking at the generated HTML code (i.e., code as modified by JavaScript) of the demo page suggests that style elements are generated inside body. Although such elements are allowed by HTML5 drafts when the scoped attribute is present, support to that attribute seems to be nonexistent, and the style sheet is applied globally. It is possible however that some browsers do not apply it at all, at least when the style element is dynamically generated.
A better approach is to make all style sheets global to the document, preferably as external style sheets, and use contextual selectors to limit the rules to some elements only. And possibly using JavaScript to change classes of elements, rather than manipulating style sheets directly.

Ok. Ugly workaround:
In the inline section, set this:
<style>
.el {width: 1px;}
</style>
In the page, set hide an element el like this:
// ui-hidden-accessible is a JQM class, moving the item out of view
// since it uses pos:absolute, is needed to not break
// selects on the page (compare to JQM ui-icon)
<span class="el ui-hidden-accessible"> </span>
Then check for the width when running inline Javascript (which works) and require the inline CSS as a separate file, when the width is not at 1px
// fallback for old devices which cannot load <style> css
// gadget is my iframe-look-a-like
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/translate.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
Ugly and an extra HTTP request, but at least the CSS is working then.

Is it possible to use Bootstrap without it taking over the entire style?

Is there an easy way to use Bootstrap in an existing project?
Currently it adds styles for table,a etc. which messes up everything in the page.
I really love the modal window, some buttons, but I don't want to hunt bootstrap css all the time to switch items back to default styles.

Bootstrap 3 // Less 1.4.0 edit:
After Bootstrap 3 and Less 1.4.0 has come out, bootstrap has started using the :extend() pseudo selector. This means that certain things will fail in the original code I've posted (you'll get some .bscnt .bscnt form-horizontal code which means you have to nest two divs inside eachother, which is just dumb). The easy way to fix this is to remove the first two lines from bootstrap.less (#import variables.less and #import mixins.less) and instead import these files outside of the .bs-cnt scope:
#import "variables.less";
#import "mixins.less";
.bscnt {
#import "bootstrap.less";
}
You can also download bootstrap from here: Bootstrap source and then enter the "less" directory and add a file called "bootstrap-custom.less" where you'll enter the following content:
.bs-cnt {
#import "bootstrap.less";
}
"bs-cnt" for BootStrap-CoNTainer. You can make it longer if you want, but remember that it'll be pasted in a lot of places in the compiled CSS, so it's to save space in the end file.
After you've done this, simple compile the bootstrap-custom.less file with your favourite less compiler (SimpLESS is pretty good if you're on Windows), and then you'll have a compiled bootstrap file that only works when you place a container element with the class of "bs-cnt".
<div class="bs-cnt">
<button class="btn btn-success btn-large">This button will be affected by bootstrap</button>
</div>
<button class="btn btn-danger">This however; Won't</button>

You can use the "customize" feature on the bootstrap website to get only those features you want: Twitter Bootstrap Download Page. Most of bootstrap's rules are explicit. You'll probably only want to leave out the reset rules which are implicit by default.

I think the link in answered section is not already updated. Here is where you can customize your Bootstrap directly on GetBootstrap site:
Customize and download - GetBootstrap

Using IFrame
Just make one html document with bootstrap in it, have your bootstrap element that you want on that page, and use Iframe to get it on the other one..
element_name.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Element</title>
</head>
<body>
<!--Code for the actual element-->
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
iframe {
border: none;
}
</style>
</head>
<body>
<iframe src="element.html"></iframe>
<!--Other stuff on the page-->
</body>
</html>
The element in the element.html will be integrated in the index.html like it's own element, without even importing a single bootstrap stylesheet in the index.html and there is no need to make custom bootstraps, which can be tedious.

You can tag the styles you want to not get overwritten by a special tag. Just put the !important tag. It can take a long time to paste it after every line of code but it'll be worth the time. Or you can use the bootstrap.css file instead of the bootstrap link and delete all the styles that are overriding your styles. You can download the bootstrap css file here