i need to slide down a div from top of page to center. i tried(pleas check the code) but it is sliding from button to down.what i need is ,when i click button , one div slide from top of the page to center.when i click the close button , it should close the div. please give me some suggestion or ref link.
<div id="divtbl" >
<table style="width:100%">
<tr>
<td>
Table Names
</td>
</tr>
<tr>
<td>
Table Names 1
</td>
</tr>
<tr>
<td>
<input type="button" value="Add New Feild" onclick="addnewrow()" />
</td>
</tr>
</table>
</div>
<div id="divpopup" style="display:none;" class="pop">
<table style="width:100%">
<tr>
<td>
display Names
</td>
</tr>
<tr>
<td>
display Names 1
</td>
</tr>
<tr>
<td>
display Names 2
</td>
</tr>
</table>
</div>
<style type="text/css">
.pop
{
font-size:12px;
top:0px;
position:absolute;
}
</style>
<script type="text/javascript">
function addnewrow() {
try
{
$("#divpopup").slideToggle("slow");
}
catch (e) {
alert(e.message);
}
}
</script>
Try this to position your popup div at center of the page-
.pop
{
font-size:12px;
top:40%;
left:40%;
position:absolute;
}
Related
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
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
I have three div's, when user clicks on "1", div1 with id divOne12 should be displayed, when user clicks on 2 div2 with id divTwo12 should be displayed and div1 should be hidden, when user clicks 3 div3 with id divThree12 should be displayed and previous shown div should be hidden.
Again if user clicks Div2 previous shown div should be hidden and div2 with id divTwo12 should be displayed.
Please find the fiddle :http://jsfiddle.net/0p7djjnc/7/ .
Please suggest javascript changes.Thanks.
HTML code:
<table>
<tr>
<td>
<table>
<tr>
<td>
<div id="divOne12">
<div>
<table border="1">
<tr><th>Column1</th><th>Column2</th></tr>
<tr>
<td> Col1- data1
</td>
<td> Col2 - data1
</td>
</tr>
<tr>
<td> col1 - data2
</td>
<td> col2 - data2
</td>
</tr>
<tr>
<td> col3 - data3
</td>
<td> col3 - data3
</td>
</tr>
</table></div> </div><div id="divTwo12">Div 2</div>
<div id="divThree12">Div 3</div>
</td></tr>
<tr>
<td>
<table width="170px" border="1">
<tr>
<td>
Static Row
</td>
<td id="one12" class="navigateTest" onclick="navigate()"><b>1</b></td>
<td id="two12" class="navigateTest" onclick="navigate()"><b>2</b></td>
<td id="three12" class="navigateTest" onclick="navigate()"><b>3</b></td>
</tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
Css code to hide div's:
#divTwo12{
display: none;
}
#divThree12 {
display: none;
}
--EDIT--
DIV id are dynamic in my application, how can i retrieve dynamic div id in javascript function, please suggest.
Maybe you could use some data attribute:
<td id="one12" class="navigateTest" data-target="divOne12"><b>1</b></td>
<td id="two12" class="navigateTest" data-target="divTwo12"><b>2</b></td>
<td id="three12" class="navigateTest" data-target="divThree12"><b>3</b></td>
$(function () {
$('.navigateTest').click(function () {
var t = $(this).data('target');
$('#'+t).show().siblings('div').hide();
});
});
UpdatedFiddle
$(document).ready(function(){
$('#divOne12').hide();
$('#divTwo12').hide();
$('#divThree12').hide();
$('#div1').click(function(){
$('#divOne12').show();
$('#divTwo12').hide();
$('#divThree12').hide();
});
$('#div2').click(function(){
$('#divOne12').hide();
$('#divTwo12').show();
$('#divThree12').hide();
});
$('#div3').click(function(){
$('#divOne12').hide();
$('#divTwo12').hide();
$('#divThree12').show();
});
});
See Updated Fiddle here
Works for dynamic divs
HTML
<img id="img1" data-id="div1"/>
<img id="img2" data-id="div2"/>
<img id="img3" data-id="div3"/>
<img id="img4" data-id="div4"/>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
JQUERY
$("#img1").on('click', function() {
$("div").hide();
$('#'+$(this).data('id')).show();
});
Simply replace show / hide with what you want to show or hide when the img is clicked.
HTML:
<table>
<tr>
<td>
<table>
<tr>
<td>
<div id="divone12">
<div>
<table border="1">
<tr><th>Column1</th><th>Column2</th></tr>
<tr>
<td> Col1- data1
</td>
<td> Col2 - data1
</td>
</tr>
<tr>
<td> col1 - data2
</td>
<td> col2 - data2
</td>
</tr>
<tr>
<td> col3 - data3
</td>
<td> col3 - data3
</td>
</tr>
</table></div> </div><div id="divtwo12">Div 2</div>
<div id="divthree12">Div 3</div>
</td></tr>
<tr>
<td>
<table width="170px" border="1">
<tr>
<td>
Static Row
</td>
<td id="one12" class="navigateTest" onclick="navigate()"><b>1</b></td>
<td id="two12" class="navigateTest" onclick="navigate()"><b>2</b></td>
<td id="three12" class="navigateTest" onclick="navigate()"><b>3</b></td>
</tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
JQUERY:
$(function(){
$('.navigateTest').click(function(){
$("div[id^='div']").hide();
var id=$(this).attr('id');
var divId='div'+id;
$('#'+divId).show();
});
});
CSS:
#divtwo12{
display: none;
}
#divthree12 {
display: none;
}
Problem:
http://jsfiddle.net/7ZDbB/1/
If I click the first and second row's deny button,
the third row's deny button can't click just in IE 11.
I tested on IE8、IE9、IE10、Firefox and Chrome, and not this problem.
This is source code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#main table{ border-collapse:collapse; width:100%; }
#main td{ border:1px solid #EEA; padding:4px 6px; }
#main table tr.excepted td{ background:#F99; }
form table {background:#FEFEF1}
</style>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body >
<div id="base">
<div id="main">
<form accept-charset="UTF-8" action="" method="post">
<input id="product_ids" name="product_ids" type="hidden">
<table>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>product info</th>
</tr>
</thead>
<tbody>
<tr id="a_tr1_d_1084">
<td colspan="2">
<input type="button" value="allow" id="adAllowd_1084" style="display: none;">
<input type="button" value="deny" id="adExceptd_1084" onclick="onDenyBtnClicked('d_1084')">
</td>
<td>
<table>
<tbody>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</tbody>
<tbody>
<tr>
<td>subheader1</td>
<td>subheader2</td>
<td rowspan="2">
other info
</td>
</tr>
<tr>
<td colspan="2">
image
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>product info</th>
</tr>
</thead>
<tbody>
<tr id="a_tr1_d_1085">
<td colspan="2">
<input type="button" value="allow" id="adAllowd_1085" style="display: none;">
<input type="button" value="deny" id="adExceptd_1085" onclick="onDenyBtnClicked('d_1085')">
</td>
<td>
<table>
<tbody>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</tbody>
<tbody>
<tr>
<td>subheader1</td>
<td>subheader2</td>
<td rowspan="2">
other info
</td>
</tr>
<tr>
<td colspan="2">
image
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>product info</th>
</tr>
</thead>
<tbody>
<tr id="a_tr1_d_1090">
<td colspan="2">
<input type="button" value="allow" id="adAllowd_1090" style="display: none;">
<input type="button" value="deny" id="adExceptd_1090" onclick="onDenyBtnClicked('d_1090')">
</td>
<td>
<table>
<tbody>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</tbody>
<tbody>
<tr>
<td>subheader1</td>
<td>subheader2</td>
<td rowspan="2">
other info
</td>
</tr>
<tr>
<td colspan="2">
image
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div id="allowAdSubmitButton"><input name="commit" type="submit" value="submit button"></div>
</form>
<script type="text/javascript">
var $j = jQuery;
function onDenyBtnClicked(adId) {
$j('#a_tr1_'+adId).addClass('excepted');
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
$j("#product_ids").val(adId);
}
// -->
</script>
</div>
</div>
</body>
</html>
I solved this problem by adjust javascript code order,like this
$j('#a_tr1_'+adId).addClass('excepted');
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
↓
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
$j('#a_tr1_'+adId).addClass('excepted');
But I really don't know the reason, because I change any of follow 11 points , the problem can be solved.
delete table border-collapse style
#main table{ border-collapse:collapse; width:100%; }
delete td border style
#main td{ border:1px solid #EEA; padding:4px 6px; }
delete td background style
#main table tr.excepted td{ background:#F99; }
delete table backgroud style
form table {background:#FEFEF1}
delete submit button
delete javascript code that add 'excepted' css to tr
$j('#a_tr1_'+adId).addClass('excepted');
delete javascript code that show allow button and hide deny button
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
delete javascript code that set value to 'product_ids'
$j("#product_ids").val(adId);
delete first colspan attribute on per row
delete first rowspan attribute on per row
delete second colspan attribute on per row
I'm quite puzzled and really don't get what is causing the problem. I'm hoping someone can help me, thank you.
This is an odd issue for sure. It appears to be a bad painting issue in IE 11 that prevents interacting with the page.
Take notice that after you click 2 deny buttons (order does not matter) the hover states of all the allow/deny buttons go away. Then click down and drag off of the submit button, and viola - all of the buttons (and text) are now interactive again.
Applying some best-practices to your code coincidentally fixes this issue as well. If you are using jQuery - you should not be using inline onclick attributes. A main goal of jQuery is to separate behavior from content. A better way to bind your click events would be to add a class to your deny and allow buttons then bind the click to them or to their closest static parent (in case your rows are being dynamically added). Also, since you're already toggling a class on the nearest parent, you may as well use that class to show/hide the correct button.
New JS:
$(function() {
$('#main').on('click', '.button-deny', function() {
$(this).closest('tr').addClass('excepted');
$("#product_ids").val($(this).data('ad-id'));
});
});
Additional CSS:
.excepted .button-deny,
.button-allow { display:none; }
.excepted .button-allow { display:inline-block; }
Relevant HTML Update:
<input type="button" value="allow" class="button-allow" data-ad-id="d_1084" />
<input type="button" value="deny" class="button-deny" data-ad-id="d_1084" />
And here's an updated fiddle - http://jsfiddle.net/7ZDbB/6/
If I can pinpoint the specific painting issue that is causing this issue, I'll update this answer.
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.