I am using google line chart api and no matter how big i make the div chart dimentions, it always shows a horizontal and vertical scroll bar. how can i stop this from happening.
CONTEXT: editable HTML of https://code.google.com/apis/ajax/playground/?type=visualization#line_chart (using Firefox or Chorme).
Instructions for help you in the problem:
suppose you need a box with width=500px and height=400px.
check Javascript at new google.visualization.LineChart(), if the width and height inicializations are 500 and 400.
check if style of the HTML tag (perhaps div) of renderization place (id="visualization") is style="width: 800px; height: 400px;".
check if style of the HTML parent tag (any) of renderization place is bigger than 500 and 400, or is 100%.
Another solution is by "HTML cut": use overflow:hidden.
EXAMPLE OF CASE WITH SCROLL
// ... piece of your javacascript.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 800, height: 400,
vAxis: {maxValue: 10}}
);
} google.setOnLoadCallback(drawVisualization);
<!-- ... piece of your HTML -->
<div id="container" style="width:400px;overflow:scroll;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</div>
HTML SOLUTION (fix the container width)
<!-- ... piece of your HTML -->
<div id="container" style="width:800px;overflow:scroll;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</div>
ANOTHER SIMPLE HTML SOLUTION (use overflow:hidden)
<!-- ... piece of your HTML -->
<div id="container" style="width:400px;overflow:hidden;">
<div id="visualization" style="width: 800px; height: 400px;"></div>
</div>
... or reduce all, Javascript and HTML widths and heights, etc.
Using :
<script src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
var data = new google.visualization.DataTable();
//init your data
var options = {
width: "100%", height: "100%",
//other options
}
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
</script>
....
<body>
<div id="chart"></div>
</body>
You ensure that the graph will fit the div you're using.
Then to resize the graph set style="width: ...px; height: ...px;" with the desired size :
<body>
<div style="width: 800px; height: 400px;" id="chart"></div>
</body>
Related
I want to create a sticky footer using Laravel 6 and Bootstrap 4. I tried to create it but I failed.
These are my files:
layout.blade.php:
<body>
#auth
#include('../inc/navbar')
#endauth
<div class="container" id="app">
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
#yield('content')
</div>
#auth
#include('../inc/footer')
#endauth
</body>
footer.blade.php:
<nav class="navbar fixed-bottom bg-custom justify-content-end">
<b>Powered by Me</b>
</nav>
app.scss
body {
background-color: rgb(241, 230, 131);
}
nav {
height: 50px;
background-color: rgb(131, 215, 241);
}
I tried using the fixed-bottom class but in this way the footer remains always in the same position at the bottom of the screen even if the user scrolls a page with a lot of content. Can someone help me?
See the code below! Happy 2020!
//style
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
padding-top: 100px;
}
footer {
margin: auto auto 0 auto;
}
//html
<html>
<body>
<header>
<nav>..</nav>
</header>
<main>
<p>Lorem ipsum dolor sit amet!</p>
</main>
<footer></footer>
</body>
</html>
According to the docs the markup should be like below. See example here. The mt-auto class (margin-top:auto) in the example below sticks the element to the bottom of the page.
You've added both nav and fixed-bottom classes which aren't required, although you could probably achieve it with the fixed-bottom if you wanted to.
<footer class="footer mt-auto py-3">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
If you're still having problems, make sure your markup validates to make sure you don't have faulty html
I am trying to place the HOT element with (height:100%) inside position:fixed container.
But the vertical scrolling does not work - only blank rows in FF39, GC44, and IE11.
I have also tried to set dynamically the height of HOT element to the values of parent container, e.g.
var ex = $('#example').parent();
$('#example').height(ex.height());
It works fine in GC and FF, but there are issues with scrolling in IE11. If you move the vertical scrollbar to the bottom, it shows the last row at ~66700. But the last row number should be 100000.
<!DOCTYPE html>
<html>
<head>
<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css">
</head>
<body>
<div style="position:fixed;top:20px;bottom:0;left:0;right:0; overflow:hidden; border: 1px solid green">
<div style="position:fixed; top:40px;left:5px;right:5px;bottom:5px;border: 1px solid red">
<div id="example" style="overflow:auto; height:100%"></div>
</div>
</div>
<script type="text/javascript">
var data = Handsontable.helper.createSpreadsheetData(100000, 10);
var container = document.getElementById('example');
var hot = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true,
stretchH: 'all',
contextMenu: true
});
</script>
</body>
</html>
Does anyone know any CSS/layout tricks how to get Handsontable work correctly when using 100% of space of the parent container?
Thanks
I wasn't aware of that bug but to be honest I never use height:100%. Instead, why don't you manually calculate the height using the offset:
let height = $(window).height() - $("#hot-container").offset().top;
And if you want it to always keep the 100% height, even on resize, then add:
$(window).resize(function(){
hotInstance.updateSettings({
height: $(window).height() - $("#hot-container").offset().top;
})
});
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function show1() {
document.getElementById("img1").display = 'block';
}
function hide1() {
document.getElementById("img1").display = 'none';
}
</script>
</head>
<body>
<span onMouseOver="show1()" onMouseOut="hide1()">Corporate Team Outing - LNT</span>
<div id="img1" style="display:none">
<img src="" alt="image 1" />
<img src="" alt="image 2" />
</div>
</body>
</html>
i want that when u put mouse on text it show image in div i m trying to do it but it not working.
Forget javascript for this one! CSS is the answer. Put a hover state on ID:img1 and the images inside the div (if u don't do the latter, mousing over the images will cancel out the div mouse over. So it will look like this (not inline styles due to mouse over states declaration):
#img1 {
Background-image: none;
}
#img1:hover, img1:hover img {
Background-image: url(your URL);
}
You could change the IDs to classes, so the CSS can be reused and keep the IDs for coding (javascript etc)
I have a jsfiddle here to illustrate my question
http://jsfiddle.net/ttmt/DgnLd/1/
It's just a simple button with a hidden div. The button slide toggles the hidden div.
I would like to have div filled with a random color each time it opens.
At the moment it's picking two random colors - when the div is opening and when the finished opening.
How can I stop the second color and just have one.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<style type="text/css">
•{
margin:0;
padding:0;
}
#wrap{
margin:20px;
}
#btn{
width:100px;
height:50px;
background:red;
color:white;
padding:10px;
margin:0 0 50px 0;
}
#infoDiv{
width:500px;
height:300px;
display:none;
}
</style>
</head>
<body>
<div id="wrap">
CLICK
<div id="infoDiv">
</div>
</div>
<script>
$(document).ready(function(){
alert('here');
var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];
$('#infoDiv').hide();
$('#btn').bind('click', function(){
$('#infoDiv').slideToggle('slow', function(){
var ranNum = Math.floor(Math.random()*color_arr.length);
var col = color_arr[ranNum];
$('#infoDiv').css({'background': col});
});
});
});
</script>
</body>
</html>
$(document).ready(function(){
var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];
$('#infoDiv').hide();
$('#btn').bind('click', function(){
var ranNum = Math.floor(Math.random()*color_arr.length);
var col = color_arr[ranNum];
$('#infoDiv:hidden').css({'background': col});
$('#infoDiv').slideToggle('slow');
});
});
Try that -- I've moved your Random color picker out of the SlideToggle callback as that will only run once the slide was finished which from your question I assumed you didn't want.
It also only changes the color of the info div if it's hidden by checking the visible selector, you can read more about that here
Let me know if that works for you
Does anyone know how to modify jquery tools tooltip:
http://flowplayer.org/tools/tooltip.html
to use event special hover:
http://blog.threedubmedia.com/2008/08/eventspecialhover.html
jQuery tools tooltip doesn't rely on hover method, so just loading the plugin is insufficient.
Source for event hover:
http://threedubmedia.googlecode.com/files/jquery.event.hover-1.0.js
Here's the source for jquery tools tooltip:
http://flowplayer.org/js/tools/tools.tooltip-1.1.1.js
I've been trying to get this to work for a while. Thanks in advance.
#Jourkey, What I understood from question is that you want to show the tooltip only when HOVER event is reported by jquery.event.hover plugin. If this is the case then after lot of trial and error I got it like this:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.event.hover-1.0.js"></script>
<script type="text/javascript" src="tools.tooltip-1.1.1.js"></script>
<style type="text/css">
div.hovering{background-color:yellow;}
div.normal{background-color:white;}
#demotip { display:none; background:transparent url(tooltip/white.png);
font-size:12px; height:60px; width:160px; padding:25px; color:#0505ff;}
</style>
<div id="rect" style="height:200px;width:200px;border:2px blue groove;"
class="normal" title='This is testing tooltip'></div>
<div id="demotip"> </div>
<span id="btnShow" style="border:1px solid black;">click</span>
<span id="btnClose" style="border:1px solid black;">close</span>
JavaScript:
<script type="text/javascript">
var api; //TO TAKE CARE OF TOOLTIP OBJECT
var hovering=false; //TO TRACK IF HOVERING STARTED BY HOVER PLUGIN OR NOT
$(document).ready(function(){
$.tools.tooltip.conf.position=["center","right"];
$.tools.tooltip.conf.api=true;
$.tools.tooltip.conf.effect='fade';
$.tools.tooltip.conf.onBeforeShow = function(a){
return hovering;};
$.tools.tooltip.conf.onBeforeHide = function(a){
return !hoveRing;};
var api = $("#rect[title]").tooltip("#demotip");//CREATE TOOLTIP
$("#btnShow").click(function(){
hovering=true;
api.show();});
$("#btnClose").click(function(){
hovering=false;
api.hide();});
$.event.special.hover.delay = 500;//REPORT HOVER AFTER DELAY OF 500MS
$("#rect").hover(function(){},//HOVER START (BEFORE HOVERING)
function(){
hovering=true;
api.show();}, //HOVERING
function(){
hovering=false;
api.hide();}//HOVER END
);
});
</script>