I've been asked to create a page with a header and sidebar where the sidebar is 100% the height of the page minus the heading height, without a vertical scrollbar. The following works in FF, Chrome, and IE9+, but the polyfill doesn't do anything in IE8.
I've tried the following 2 polyfill calc libraries in IE8, and neither work. Am I doing something wrong, or do the libraries not work in the given scenario? I've tried loading the script using Modernizr as per the example, as well as loading the script directly at the end of the page without effect.
https://github.com/CJKay/PolyCalc
https://github.com/closingtag/calc-polyfill
Code Example:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="modernizr.custom.js"></script>
<style>
body,html{
height: 100%;
color: white;
margin:0;
padding: 0;
}
.heading{
background:red;
height: 100px;
}
.box{
background: blue;
width:200px;
height: 100%;
height: calc(100% - 100px);
}
</style>
</head>
<body>
<div class="heading">Heading</div>
<div class="box">Sidebar</div>
<!--MUST be placed after styles have loaded-->
<!--<script type="text/javascript" src="./calc.min.js"></script>-->
<!--<script type="text/javascript" src="./polycalc.js"></script>-->
<script>
jQuery(document).ready(function() {
});
Modernizr.load({
test: Modernizr.csscalc,
// nope: 'calc.js'
nope: 'polycalc.js'
});
</script>
</body>
</html>
The CSSParser library is required for the CJKay Polycalc to work. This works in IE7+.
<!--CSSParser required for CJKay Polycalc
https://github.com/Schepp/CSS-Filters-Polyfill
copy following files to: js/css_parser
- contentloaded.js
- css-filters-polyfill-parser.js
- css-filters-polyfill.js
- cssParser.js
-->
<script>
var polyfilter_scriptpath = "js/css_parser/";
</script>
<script type="text/javascript" src="js/css_parser/cssParser.js"></script>
<!--
CJKay Polycalc
https://codeload.github.com/CJKay/PolyCalc/zip/master
-->
<script type="text/javascript" src="js/polyfill/cjkay-polycalc.js"></script>
Related
I want to make a javascript (a javascript animation) as a preloader for a website for my project.
Something along the lines of this:
http://soulwire.github.io/Plasmatic-Isosurface/
I want this to run first and until the elements of my page are downloaded and after that it should turn off and show the completely loaded page
Is this possible?
Thanks
Here's a sample HTML Code I want to test it on
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript preloader</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="preloader"></div>
<canvas id='canvas'></canvas>
<script src="js/index.js"></script>
<img src="https://wallpaperscraft.com/image/stars_sky_shore_84534_1920x1080.jpg" alt="safe"></img>
</body>
</html>
**EDIT TO CODE APOLOGIES
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Preloader Testing</title>
<style>
.preloader{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas class="preloader" id='canvas'></canvas>
<script src="js/index.js"></script>
<img src="https://wallpaperscraft.com/image/stars_sky_shore_84534_1920x1080.jpg" alt="safe"></img>
</body>
<script>
//after window is loaded completely
window.onload = function(){
//hide the preloader
document.querySelector(".preloader").style.display = "none";
}
</script>
</html>
You can show the preloader by default. And once the web page is completely loaded, you just hide it. Here is a code sample
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript preloader</title>
<link rel="stylesheet" href="css/style.css">
<style>
/*Styling preloader*/
.preloader{
/*
Making the preloader floating over other elements.
The preloader is visible by default.
*/
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
}
</style>
</head>
<body>
<div class="preloader"><span class="preloader-js"></span></div>
<canvas id='canvas'></canvas>
<script src="js/index.js"></script>
<img src="https://wallpaperscraft.com/image/stars_sky_shore_84534_1920x1080.jpg" alt="safe"></img>
</body>
<script>
//after window is loaded completely
window.onload = function(){
//hide the preloader
document.querySelector(".preloader").style.display = "none";
}
</script>
</html>
Thanks
Put everything you need for your animation in a div with an id and everything you need for your content in another. Give your content display: none in your stylesheet. Now you can use window.onload to change the styles document.getElementbyId().style.display = none/inline
I am trying to use SapUI5 and JQuery $("#draggable").draggable(); function to drag some div around my html page.
problem is - they interfere with each other - SAPUI5 library also have a varibale named draggable (I want to use JQuery draggable() function).
as a result I get Uncaught TypeError: $(...).draggable is not a function(…)
how to solve it? my code is below.. It simulates the problem. notice that once I remove the script tag of SAPUI5 it is working fine and I can drag the div..
Thanks in advance!
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Draggable - Default functionality</title>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; border:1px; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script id='sap-ui-bootstrap'
type='text/javascript'
src='https://sapui5.hana.ondemand.com/1.38.10/resources/sap-ui-core.js'
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.m,sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal"
>
</script>
<script>
$(function() {
$("#draggable").draggable();
} );
</script>
</head>
<body>
<div id="draggable">
<p>Drag me around</p>
</div>
</body>
</html>
You should move the Jquery scripts at the bottom
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Draggable - Default functionality</title>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; border:1px; }
</style>
<script id='sap-ui-bootstrap'
type='text/javascript'
src='https://sapui5.hana.ondemand.com/1.38.10/resources/sap-ui-core.js'
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.m,sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal"
>
</script>
<script>
$(function() {
$("#draggable").draggable();
} );
</script>
</head>
<body>
<div id="draggable">
<p>Drag me around</p>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
</html>
Other option is to import the thirdparty libraries.
<script>
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');
$(function() {
$("#draggable").draggable();
} );
</script>
You could wrap those calls in a function to make it less ugly =)
I really need help with this one. I would like to replace the default scrollbar on my iframe with the "perfect scrollbar".
I have downloaded the perfect scrollbar. I also have included the needed files into my html document. According to the documentation, I set up the style of content container inside my iframe. The result is, that when I load my main page and move the mouse cursor on iframe, the "perfect-scrollbar" appears, but the default scrollbar remains. Next issue is, that the new scrollbar is not functional at all. It starts on the top of the iframe content and it ends at the bottom of the iframe content so I can not scroll with it.
HTML of my iframe content page:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" media="all" href="../css/iframestyle.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/perfect-scrollbar-0.4.8.min.css" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar-0.4.8.min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar-0.4.8.with-mousewheel.min.js"></script>
<script type="text/javascript" src="../js/scroll.js"></script>
<title>TITLE</title>
</head>
<body>
<div id="amfCont">
..... // content to be scrolled
</div>
</body>
</html>
CSS:
#amfCont {
font-family:"Verdana";
text-align:justify;
position:relative;
overflow:hidden;
}
JS (included scroll.js)
$(document).ready(function() {
"use strict";
$('#amfCont').perfectScrollbar();
});
Can anyone point out what do I have wrong here?
Try jQuery Scrollbar in your iframe.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Scrollbar Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css">
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<script>
jQuery(function($){
$('.page-wrapper').scrollbar();
});
</script>
<style type="text/css">
html, body, .page-wrapper {
border: none;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
.page-content {
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="page-wrapper scrollbar-macosx">
<div class="page-content">
[CONTENT HERE]
</div>
</div>
</body>
</html>
In example above I've used scrollbar-macosx class, but you can choose any from predefined styles or make your own custom scrollbar - it's fully CSS customizable.
#amfCont needs a height property for this plugin to work. Here's the example from the docs.
#container {
position: relative;
height: 100%; /* Or whatever you want (eg. 400px) */
}
I'm studying Jquery, and I was trying to do a simple SlideShow, but nothing happens...
Here's my HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/Style.css">
<meta charset="UTF-8">
<title>SlideShow</title>
</head>
<body>
<div id="slides">
<img src="imgs/1.jpg">
<img src="imgs/2.jpg">
<img src="imgs/3.jpg">
</div>
<script type="text/javascript">
$(function(){
$("#slides").cycle({
fx: 'fade',
speed:2000,
timeout:4000,
});
})
</script>
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
</body>
</html>
My Css:
*{
margin: 0;
padding: 0;
}
#slides{
width: 1024px;
height: 768px;
margin: 0 auto;
overflow: hidden;
}
I also tried to change, this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
for this:
<script src="js/jquery-1.11.0.js"></script>
Nothing...
You need to include jQuery before your Cycle plugin, so reverse the order of your scripts here:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
Also, it's better to include CSS before Javascript as well as putting your Javascript at the bottom of your page before closing </body> tag.
I am having trouble getting the Javascript to work. All three are in the same folder. Also Chrome takes a while to open, but Firefox is instant. Thanks.
My HTML:
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
<div>Hover Over Me!</div>
</body>
</html>
My CSS:
div {
height: 100px;
background-color: #ABCDEF;
font-family: Verdana, Arial, Sans-Serif;
font-size: 1em;
text-align: center;
}
My Javascript:
$(document).ready(function(){
$('div').mouseenter(function(){
$(this).fadeTo(1000, 1);
});
$('div').mouseleave(function(){
$(this).fadeTo(1000, .25);
});
Order of script files: Since your script file is using jQuery it should be included after the jQuery library.
Please have a look at the browser console to see whether there is any error as the first step of debugging client side script issues
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div>Hover Over Me!</div>
</body>
</html>
Also you are missing closing brackets at the bottom of script
$(document).ready(function () {
$('div').mouseenter(function () {
$(this).fadeTo(1000, 1);
});
$('div').mouseleave(function () {
$(this).fadeTo(1000, .25);
});
});
Demo: Plunker