If there an easy way to fix the width of the html table columns at the time the page is rendered. I DO NOT want to specify the pixel or percent width of the columns in my code. However, once the page is created and the widths determined based on the initial content in the table I do not want the widths to change, even if the size of the cell content changes.
Just so you understand what i'm trying to do, if I have the content of a cell change(from normal to bold for example), say when I hover over the row, the size of the columns will change. This looks quite odd.
To be honest I didn't understand the answer you gave to my comment, but I'll attempt at an answer anyway :-)
What you maybe need is to wrap the content of each cell in a div (or some other block element) and set it's width. That should limit the widening of the cells, however as I hinted at im my comment, the wider content will overflow, which most like look ugly. However you didn't really specify what you want the wider content to do...
<style type="text/css">
#the-table td .wrap {
overflow: hidden; /* try different values for different effects */
}
</style>
<script type="text/javascript">
$(function(){
$('#the-table th, #the-table td').wrapInner(function() {
return $("<div/>").css("width", $(this).width() + "px");
});
});
</script>
Live example: http://jsfiddle.net/Vx5Zq/
Notice how the letter F is cut off on hover.
I think this should do the trick (not checked though):
var w = $('#myTable td.leftCol').outerWidth();
$('#myTable td.leftCol').css({width: w+'px'});
[EDIT]
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("table td").each(
function() {
var w = $(this).outerWidth();
alert(w+'px');
w *= 2;
$(this).css({width: w+'px'});
alert(w+'px');
}
);
}
);
</script>
</head>
<body>
<table>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
</table>
</body>
</html>
Adding some width to your current tds will stop the resizing when the the text goes bold.
First set your table using css to fixed rendering:
<style type="text/css">
#mytable{ table-layout: fixed; }
</style>
Then you can use jquery to add 2px of width to your tds like so:
<script type="text/javascript">
$(function(){
$('#mytable td').each(function(){
var $this = $(this) // cache this td
// set style to 2px wider
$this.css({ width: $this.outerWidth() + 2, height: $this.outerHeight() + 2 });
})
});
</script>
Related
I'm trying to set an element's width equal to another element's width.
The problem is that when the 2nd element has a percentage width, jQuery's .width() function returns the incorrect width when the page is first loaded.
If I do the same after the page is loaded, such as in an onclick function, then .width() returns the correct size of the element.
It is just when the page is first loaded, as if css hasn't finished calculating the actual elements width from the percentage.
Here is some code :
CSS :
#first {
width:50%;
}
Javascript :
$(function(){
function resizeResults() {
$("#results").css("width", $("#first").width());
}
resizeResults();
});
So, that will not return the correct size of the #results element. If I call this function via an onclick method, then it sets it to the proper width. JavaScript/jQuery should account for css percentages being loaded before executing code, right?
You must change this:
function resizeResults() {
$("#results").css("width", $("#first").width());
}
to this:
function resizeResults() {
$("#results").css("width", $("#first").width() + 'px');
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<style>
div {
height: 100px;
background-color: #acacac;
margin: 10px;
}
</style>
<script>
$(function ()
{
function resizeResults()
{
$("#results").css("width", $("#first").width() + 'px');
}
resizeResults();
});
</script>
</head>
<body>
<div id="first" style="width:200px;">Div first</div>
<div id="results" style="width:400px">Div result</div>
</body>
</html>
I'm using JQuery to have my .wrapper div snap back to its original margin-top after being moved to margin-top. The original margin-top is dependent on browser height. I'm trying to do this by storing the original margin-top value into a variable, and using it for JQuery animate when I want to .wrapper div to snap back later on.
$(document).ready(function() {
//Adjust .wrapper Margin-top to adjust position to 1/4 of Window Broswer Height
var marginWindowSpace = ($(window).height()) / 4;
$(".wrapper").css("margin-top", marginWindowSpace);
var originalMargin = $(".wrapper").css("margin-top").toString();
});
$(".title").click(function() {
$("#results-container").empty();
$(".wrapper").animate({
'margin-top': originalMargin
}, 200);
$(".title-tag, .or, .random-article, .random-article-underline").fadeIn(500);
$("footer").addClass("footer-pos1");
});
QUESTION: Why wont my the animate margin-top accept my variable (where the original margin-top value is stored), even when converted to string? I don't want to use a static value as my margin-top.
If you want to see the app code, it's here. http://codepen.io/myleschuahiock/pen/zqvvNZ
Any help is appreciated! Thanks!
EDIT: I changed the click function to $('.go-back'), but the animate for magin-top should still be the same
Move the whole $(".title").click(function(){}) into the $(document).ready(function(){})
The problem exists because at the time of the initialisation of the $(".title").click(function(){}) originalMargin is not set yet because the document is not ready yet.
Do like this. there are some errors in your animate part.margin-top should be correct as marginTop and your string should convert as int and do like this.I implement as an example.hope this will help to you.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div.testing{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
div.two{
width: 200px;
height: 200px;
background-color: green;
position:
}
</style>
<body>
<div class="testing"></div>
<br><br>
<h3 class="clk">Click me!</h3>
<div class="two"></div>
<script type="text/javascript">
$(document).ready(function(){
var one = $(".testing").css("margin-top").toString();
var vaL = parseInt(one,10);
$(".clk").click(function(){
$(".two").animate({'marginTop':vaL+'px'},1000);
});
});
</script>
</body>
</html>
note :
var one = $(".testing").css("margin-top").toString();
int this part get the margin-top value as a string.
var vaL = parseInt(one,10);
convert it to an integer.
then the animate part
$(".two").animate({'marginTop':vaL+'px'},1000);
I want to start page at the center horizontally and vertically when it had loaded (not at top), anyone any suggestions? Or at a specific height if that is possible. Thank you!
You can Do it like this:
$(document).ready(function() {
$(window).scrollTop($(window).height()/2);
$(window).scrollLeft($(window).width()/2);
});
You can change the position to what suit your needs.
Also you can use $(window).scrollTo($(window).width()/2, $(window).height()/2);
not sure what you are asking but have you tried relative coordinates ?
like >>
/*i put this all css selector for canceling all margins, paddings so i can remove default browser prefereces for the same*/
/*border box is just that any size od div is not changed after addinational padding*/
*{margin:0;padding:0;box-sizing:border-box;}
body{
position:absolute;
width:100%;height:100%;
background-color:red;
padding-top:10%;
padding-left:10%;
padding-right:10%;
padding-bottom:10%;
}
centerd{
/*relative dimensions wont work if not display:block;*/
display:block;
width:100%;height:100%;
background-color:blue;
}
<!doctype html>
<html>
<meta charset = "UTF-8" />
<title>Center Content</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<body>
<centerd>
<!--html5 element, you can create your own -->
</centerd>
</body>
</html>
for more information visit : it is cool way to know enough about html, css, javascript etc.
Although not sure if this is what you are looking for:
To center a container (a DIV element say) horizontally, give it a fixed width and auto left and right margins in CSS:
div#container
{ width: 1024px; /* a fixed width container */
border: thin solid green; /* debug, to see */
margin-left: auto;
margin-right: auto;
}
then an anonymous JavaScript function to center a container vertically after load using its margin-top property:
function ()
{ var e = document.getElementById("container");
var eHeight = e.offsetHeight;
var clientHeight = document.documentElement.clientHeight;
var marginTop = 0;
if(clientHeight > eHeight)
{ marginTop = (clientHeight - eHeight) >> 1; // integer divide by 2
}
e.style.marginTop = marginTop + "px";
}
added to the page using jQuery's ready() function for the window, and HTML
<div id="container">
hello this is page content
</div>
centers a container element in the viewport where possible
Old question but I just use:
function Scrolldown() {
window.scroll(250, 400);
}
window.onload = Scrolldown;
Hi I am trying to run this code that finds the width of div which is inside another div. but it is not running properly. How to do this?
i want the width of div mitem1
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#mydiv {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script language="JavaScript">
$('.menubar').each(function(menu){
var len = $(this).find('.mitem').text().length;
alert(len);
});
</script>
</head>
<body>
<div class="menubar">
<table border="1"><tr>
<td><div class="mitem1">Home</div></td>
<td><div class="mitem1">Communities<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></div></td>
<td><div class="mitem1">Project Gallery</div></td>
<td><div class="mitem1">For Our Customer</div></td>
<td><div class="mitem1">Our Services</div></td>
</tr></table>
</div>
</body>
</html>
$('.menubar .mitem1').each(function() {
alert($(this).width());
});
Here's a fiddle
If you want to get the width, including the padding and border (and margin, optional), use outerWidth()
ISSUE 1
You forgot to add jQuery in your page. Add it:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
ISSUE 2
You must put your code in document ready:
$(function () {
});
ISSUE 3
Now you can iterate over your items, and for accessing the width of element, use .width() method in jQuery:
$(function () {
$('.menubar .mitem1').each(function() {
var width = $(this).width();
// now do anything you want with width
});
});
I'm trying to come up with a script that will have a number of thumbnails across (in width) the browser. I want it to be able to be flush and not have gaps on the sides. The thumbnails should always be the same size, and I'm guessing that the only way is the change the spacing between each image. But can someone help me out? Let me know if my question is unclear.
EDIT: here's an example: http://www.beautyineverything.com/
Thank you!
Something like this?
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>sandbox</title>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
<script type='text/javascript' src='js/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
var MAX_IMAGE_WIDTH = 240;
$(function(){
$(window).resize(resizeImages).resize();
});
function resizeImages() {
var containerWidth = $('.imageContainer').innerWidth();
var numberOfImages = Math.ceil(containerWidth / MAX_IMAGE_WIDTH);
var imageWidth = Math.ceil(containerWidth / numberOfImages);
var imageWidthLast = containerWidth - (numberOfImages - 1) * imageWidth;
$('.imageContainer .image').css('width', imageWidth);
$('.imageContainer .image:nth-child(' + numberOfImages + 'n)').css('width', imageWidthLast);
$('.imageContainer .image').each(function(){
$(this).text($(this).innerWidth());
});
}
</script>
<style type='text/css'>
.imageContainer {
border:1px solid black;
overflow:hidden;
}
.image {
width:160px;
height:160px;
float:left;
}
</style>
</head>
<body>
<div class='imageContainer'>
<?php
for ( $n = 10; $n < 30; ++$n) {
$backgroundColor = '#' . sprintf('%02x%02x%02x', $n * 8, $n * 8, $n * 8);
echo "<div class='image' style='background-color:{$backgroundColor};'></div>";
}
?>
</div>
</body>
</html>
Resizing images could be written in a bit smarter way so that instead of 223+223+223+223+223+223+223+216 they would be 223+222+222+222+222+222+222+222. For this, width of each column should be calculated individually, so that widths of columns vary only by 1px max.
This might sound primitive but tables were designed for something like this only.
one solution is to have a table and put your images as background-image of the cells. (or put it inside and give it a height and width 100%) Its is easy to keep control over the cell size and margins/padding.. that is why they were so popular for structural stuff.
Before ruling the idea out, do note that (apart form the fact that i HATE to use tables for designing and positioning stuff, but do not hesitate to use it for what it was meant to be) making tables will reduce the amount of code to be written. use css to size the cells and table. use inline to put background image. no js functions wat-so-ever.
please drop a comment if you disagree of if i am missing something :)