I want to change the height of at element when I have a click event. The height is set to auto, but when the event is fired I want to draw the chart with a different height..
My HTML looks like:
<table class="col-sm-12">
<tr>
<td>
<div class="col-sm-12" style="height: 300px; overflow: auto !important; text-align:left" id="errorTable">
</div>
</td>
<td>
<table class="col-sm-12">
<tr> <td style="height:300px; width:100%" id="Chart"></td></tr>
<tr> <td id="errorDetails" style="height:100%; width: 100%"></td></tr>
</table>
</td>
</tr>
</table>
and part of the javascript:
document.getElementById('Chart').setAttribute("style", "height:75");
document.getElementById('Chart').style.height = "75px";
Have tried everything, but nothing works...
Now I have found out that when i predefined the height of ID= "chart" to 100% then I am able to change if afterwards. But this does not work for me. I need to set the size of the height of the Chart to 300px in the start and then change it. But i does not work....
When you try to apply height to td tags it wont get applied.
For more details on this click here
So you may have to put a div inside your td tag and apply height to it.
HTML
<table class="col-sm-12">
<tr>
<td>
<div class="col-sm-12" style="height: 300px; overflow: auto !important; text-align:left" id="errorTable">
</div>
</td>
<td>
<table class="col-sm-12">
<tr>
<td >
<div id="Chart" style="height:300px; width:100%">
</div>
</td>
</tr>
<tr>
<td>
<div id="errorDetails" style="height:100%; width: 100%">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
Javascript
document.getElementById('Chart').style.height = "75px";
Here is a working jsfiddle
Related
Below the structure where i have problem
<tr>
<td>1</td>
<td>2</td>
<td>
<button onclick=someFunc() class='btn'>DoSomething</button>
</tr>
</tr>
<tr>
<td colspan='3' style = "height: 400px; width: 500px">
<div id='container'></div>
</td>
</tr>
And here i can't get access to column with id colspan ='3' and div with id 'container' when button pressed.
I know its very noob question, but i'm new in javasript and can't find specific question with good explanation.
Here I'm trying to get access to my div
$(".btn").click(function(){
$(this).parent('tr').next('td').hide();
});
EDIT
Its table of some information order. And when button clicked accordingly div must hide or show graph. Graph will be in div with class = "container". So my thought is to show some statistic information, and if user want to show graph i show him it.
The button's parent is td not tr you need to use closest() to find the tr containing the button, then use .next() to get the next tr element and .find('td') to find the td inside it
jQuery(function($) {
$(".btn").click(function() {
$(this).closest('tr').next().find('td').hide();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>
<button onclick=someFunc() class='btn'>DoSomething</button>
</td>
</tr>
<tr>
<td colspan='3' style="height: 400px; width: 500px">
<div id='container'>soemthing</div>
</td>
</tr>
</table>
And when button clicked accordingly div must hide or show graph.
Try substituting .toggle() for .hide()
Yes, I can make like this. But i have hundreds block of codes like
above. And accordingly hundreds divs with id "container". I want
special make special function that hides only in block where
button i pressed.
Try changing id=container to class=container , then select container to toggle utilizing .index()
$(".btn").on("click", function(e) {
// substituted `.toggle()` for `.hide()`
$(".container").eq($(this).index(".btn")).parent().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>
<button class='btn'>DoSomething</button>
</td>
</tr>
<tr>
<td colspan='3' style = "height: 400px; width: 500px">
<div class='container'>a</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<button class='btn'>DoSomething</button>
</td>
</tr>
<tr>
<td colspan='3' style = "height: 400px; width: 500px">
<div class='container'>b</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<button class='btn'>DoSomething</button>
</td>
</tr>
<tr>
<td colspan='3' style = "height: 400px; width: 500px">
<div class='container'>c</div>
</td>
</tr>
</tbody>
</table>
$(this).parents('tr').next('tr').hide()
this might work
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>
<button onclick='someFunc(this)' class='btn'>DoSomething</button>
</td>
</tr>
<tr>
<td colspan='3' style="height: 400px; width: 500px">
<div id='container'>soemthing</div>
</td>
</tr>
</table>
<script>
function someFunc(BTN){
$(BTN).closest('tr').next('tr').find('td').hide();
}
</script>
Demo
How can I edit specific div's using Angular? I have a upset of div's at my page, containing tablerows with data. When I click on a edit-button on a specific div, I want that to bed editable.
How can I bind the click event to that particular div? I have done something like this now:
<div ng-show="summary.abbData.service_type == 'NaoLan'" class="col-md-6" style="background-color: #ffffff; width: 325px; margin-left: 15px;">
<h5 class="bg-primary rmpad15" style="margin-top: 1px; padding: 5px;">{{summary.abbData.service_type}}<button type="button" ng-click="editAbb(customer.id)" class="btn btn-default btn-xs" style="float: right; margin-top: -3px;"><span class="glyphicon glyphicon-pencil"></span></button></h5>
<table class="table table-condensed pad1">
<tbody>
<tr>
<td><strong>Hastighet</strong></td><td>{{summary.abbData.service}}</td>
</tr>
<tr>
<td><strong>Läghenhetsnr</strong></td><td>{{summary.abbData.apartment}}</td>
</tr>
<tr>
<td><strong>Månadsavgift</strong></td><td>{{summary.abbData.month_fee}}kr</td>
</tr>
<tr>
<td><strong>Anslutningsavgift</strong></td><td>{{summary.abbData.conn_fee}}kr</td>
</tr>
<tr>
<td><strong>Bindningstid</strong></td><td>{{summary.abbData.fixation}}mån</td>
</tr>
<tr>
<td><strong>Registreringsdatum</strong></td><td>{{summary.abbData.reg_date}}</td>
</tr>
</tbody>
</table>
</div>
As you can see, I have ng-click, but I don't know how to bind the div to the click event. ANyone?
please see here jsbin.com/zataro/2/edit?html,output
<tr>
<td><strong>Läghenhetsnr</strong>
</td>
<td>
<span ng-hide="edit.apartment">{{summary.abbData.apartment}}</span>
<input ng-model="summary.abbData.apartment" type="text" ng-show="edit.apartment" />
</td>
<td>
<button ng-click="edit.apartment=!edit.apartment">
<span ng-show="!edit.apartment">Edit</span>
<span ng-show="edit.apartment">Save</span>
</button>
</tr>
I'm attempting to refresh a div and am ending up with a duplication of the div ie; one inside of the other. I'm currently using jQuery, Struts2, and the Struts2 jQuery plugin for my view.
what it is currently doing:
<div id="nameVolumeWrapper....>
<div id="nameVolumeWrapper....>
</div>
</div>
refresh script
<script>
function reloadContent() {
$('#nameVolumeWrapper').load('${jsonAction} #nameVolumeWrapper');
}
</script>
Element that calls the refresh script
<sj:select href="%{jsonURL}"
id="utility"
name="selectedUtility"
list="utilityList"
headerKey="-1"
headerValue="Please Select A Utility"
onchange="reloadContent()"
onChangeTopics="reloadSecondList"/>
div that I'm attempting to reload
<sj:div id="nameVolumeWrapper" listenTopics="reloadSecondList"
effect="pulsate" effectDuration="1000"
cssStyle="height:250px; overflow-y: scroll; width:910px;
margin-left:auto; margin-right:auto;">
<table id="pricingInput" class="footable" style="width: 800px;
table-layout: fixed; margin-left: auto; margin-right: auto;
margin-bottom:50px;">
<thead>
<tr>
<th style="text-align: center;">Account Name</th>
<th style="text-align: center;">Annual kWh Volume</th>
<th style="text-align: center">Rate Class</th>
<th style="text-align: center;">Add Another?</th>
</tr>
</thead>
<tbody>
<tr>
<td><s:textfield name="nameHolder" /></td>
<td><s:textfield name="volumeHolder" /></td>
<s:url id="jsonURL" action="jsonAction" namespace="/"/>
<td>
<sj:select href="%{jsonURL}"
id="rate_class" name="rateHolder"
list="rateClassList"
headerKey="-1"
headerValue="Please Select a RateClass"
reloadTopics="reloadSecondList"/>
</td>
<td>
<input type="button" class="addButton" value="Add" />
<input type="button" value="Delete" onclick="deleteRow(this)">
</td>
</tr>
</tbody>
</table>
long story short, how do I modify my javascript or div definition to make it so that the div doesn't duplicate when the javascript is called?
you could do something like this:
$.get("${jsonAction} #nameVolumeWrapper", function(data) {
$('#nameVolumeWrapper').html($(data).html());
});
Or if that doesn't work you could do:
var wrapper = $('#nameVolumeWrapper');
wrapper.load('${jsonAction} #nameVolumeWrapper', function() {
wrapper.children('#nameVolumeWrapper').unwrap();
});
In a webpage, when a button is click, a table hidden is shown within another table. However, each time, when the hidden table is toggled, the width of the outside table would resize itself. The fiddle demo is here: http://jsfiddle.net/bEK8f/5/
I hope the initial width of the outer table would take into account of the size of the inner table. Therefore, the outer table width should not change by showing/hiding the inner table.
As cebirci showed below, fixing the width of the outer table and using the fixed layout would work. Note sure if the width of the outer table can be decided based on the hidden table. In this way, there is no need to manually set the outer table width.
Thank you very much!
I also include my code below:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(e){
e.preventDefault();
$('#cat1').toggle();
});
$("#calculate").click(function(e){
var diff = $('#diff').val();
var sd = $('#sd').val();
var effect = diff/sd;
$('#es').val(effect.toFixed(2));
$('#cat1').toggle();
});
});
</script>
<style>
table{border: 1px solid black;}
</style>
</head>
<body>
<table style="width:500px;table-layout: fixed;">
<tr class="row2">
<th class="col0">Effect size <button id="show">Show</button></th><td class="col1"><input type="text" id="es" value="0.1"></td>
</tr>
<tr class="cat1" id='cat1' style="display:none">
<th class="col0" id='test'></th>
<td class="col1">
<table>
<tr><th class="col0 centeralign" colspan="2"> Effect size calculation </th></tr>
<tr><td>Difference</td> <td> <input type="text" id="diff" value=".1"> </td></tr>
<tr><td>sd</td> <td> <input type="text" id="sd" value="1"> </td></tr>
<tr><td></td> <td> <button id="calculate">Calculate</button> </td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You should use th tag for only header row of your table. In your table using td is better because you dont have any header row for titles etc..
In your html, your new table is appearing in a cell, and the cell is small for your table so it resizes. You can use colspan for merging two cells of your second row.
Your html code can be like that:
<table style="width:340px;table-layout: fixed;">
<tr class="row2">
<td class="col0">Effect size <button id="show">Show</button></td>
<td class="col1"><input type="text" id="es" value="0.1" /></td>
</tr>
<tr class="cat1" id='cat1' style="display:none">
<td class="col1" colspan="2">
<div style="display:inline"><table style="width:100%">
<tr><th class="col0 centeralign" colspan="2"> Effect size calculation </th></tr>
<tr><td>Difference</td> <td> <input type="text" id="diff" value=".1" /> </td></tr>
<tr><td>sd</td> <td> <input type="text" id="sd" value="1" /> </td></tr>
<tr><td></td> <td> <button id="calculate">Calculate</button> </td></tr>
</table></div>
</td>
</tr>
</table>
And jsfiddle link is http://jsfiddle.net/bEK8f/2/
Currently I'm using following CSS to show a hover box:
.box {
width: 500px;
padding: 3px;
background: #404040;
color: #fff;
font: normal 12px Arial, Sans-serif;
position: absolute;
}
the javascript function:
function showBox(i,j){
if(i==1){
document.getElementById("box"+j).style.display='block';
} else if(i==2) {
document.getElementById("box"+j).style.display='none';
}
}
the html code:
<div style="height:175px;overflow:auto;">
<table>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,1);" onmouseout="showBox(2,1);" id="hover1">Hover Me 1</p>
<div id="box1" class="box">I'm hover box 1.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,2);" onmouseout="showBox(2,2);" id="hover2">Hover Me 2</p>
<div id="box2" class="box">I'm hover box 2.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,3);" onmouseout="showBox(2,3);" id="hover3">Hover Me 3</p>
<div id="box3" class="box">I'm hover box 3.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,4);" onmouseout="showBox(2,4);" id="hover4">Hover Me 4 </p>
<div id="box4" class="box">I'm hover box 4.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,5);" onmouseout="showBox(2,5);" id="hover5">Hover Me 5</p>
<div id="box5" class="box">I'm hover box 5.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,6);" onmouseout="showBox(2,6);" id="hover6">Hover Me 6</p>
<div id="box6" class="box">I'm hover box 6.</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<p onmouseover="showBox(1,7);" onmouseout="showBox(2,7);" id="hover7">Hover Me 7</p>
<div id="box7" class="box">I'm hover box 7.</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
If you run this you will find that a hover box is appeared when you hover on any "Hover ME X" text. This works fine until you have not scrolled down in div. When you scrolled down in div the hover box is showing in wrong position. How can I overcome this issue?
If you use
position: absolute;
And you use negative and positive margins, you will be able to place the div wherever you want (eliminating the need for using anything other than position: absolute), the margins will just be relative to wherever the div is placed in the code.
Another bug with the coding is that the div shows up (at least in my browser {chrome}) before you even hover above the text that activates it. A very quick fix for this, to ensure the proper functionality in all (or most) browsers, is to add the following style to the CSS style "box":
display: none;
This will hide the DIV by default, in turn, stopping it from showing up on the page load. Then when you hover above the text the "display: block" in the JavaScript will overwrite it, so there will be no issues.
The final outcome of my "box" css style is:
padding: 3px; margin-left:-10px; margin-top:15px; color: #fff; font: normal 12px Arial, Sans-serif; position:absolute; display:none; padding: 10px 7px 10px 7px; border:#333333 1px solid; border-radius:3px; width:224px;
The problem is your positioning the box absolutely:
position: absolute;
Instead try positioning relative or fixed.
position:fixed;
Here the problem is that until u scroll the page the div will be positioned in the proper position, and when scroll down u have to keep in mind that ur page have extended from the default screen size, so when positioning the div you have to consider the facts scroll top and scroll left, then only you have the div positioned correctly. Try defining expressions within the css or manually write your own function to position the div.
Hope this helps you.