How can I center the text beside the textarea?
http://jsfiddle.net/47NyA/
Thank you!
Pure css
http://jsfiddle.net/47NyA/7/
This could work for you:
<html>
<head>
<title>
</title>
<style type="text/css">
/* style here */
div#main{
position:relative;
vertical-align:middle;
}
textarea{
}
div.right{
position:absolute;
top:45%;
right:0px;
width: 100px;
}
</style>
</head>
<body>
<div id="main">
<textarea></textarea>
<div class="right">
TEXT
</div>
</div>
</body>
</html>
JavaScript solution:
This could work for you:
http://jsfiddle.net/47NyA/4/
Let me know if it does the trick.
<script type="text/javascript">
jQuery(document).ready(function(){
// set init (default) state
var t = jQuery('#text_area');
t.data('x', t.outerWidth());
t.data('y', t.outerHeight());
t.mouseup(function(){
var th = jQuery(this);
if (th.outerWidth()!= th.data('x') || th.outerHeight() != th.data('y'))
// set new height/width
th.data('x', th.outerWidth());
th.data('y', th.outerHeight());
$("#center_text").css("margin-top", (th.outerHeight()/2 - 20) + "px");
});
});
</script>
Try with This
<div style="display:table">
<label for="textarea">Description</label><br>
<textarea id="textarea" style="display: table-cell;"></textarea>
<div style="vertical-align: middle; display: table-cell; width:100px; text-align:center; border:#f00 1px solid;">Text</div>
</div>
also check in Fiddle
You can use Javascript to get height of textarea, and update the line-height of the on the right, set text align to be center
Related
I want to insert a little green square between words on my WordPress homepage. I wrote the html:
<div class="x"><center><p
style="border:10px; border.
style:solid;
border-color:#00ff00; padding:
0.0em; width: 2px; height:
2px;">
</p></center></div>
Pen: https://codepen.io/adsler/pen/KOXzPw
Site: http://4309.co.uk
Every other page I can access and edit but not the same for homepage.
Here you go.
go to your appearance, customise, add'text widget' then add the html code. If you were to add the css, you would need to go to --> appearance --> additional css
Have a great day!
Austin
It will be work
<div class="x"><center><p >Write Something<span style="border:10px; border-style:solid; border-color:#00ff00; padding: 0.0em; width: 2px; height: 2px;"></span> New</p></center></div>
Pen: https://codepen.io/shakil-shaikh/pen/xvXdEX
3 divs. Div one for top, div two for the square, and div three for bottom. If you need more explanation, I can elaborate.
Check below.
Box ‘one’ would be where text one goes, ‘center’ is where you would style the geometric shape, and ‘box2’ is where the second string of text will go.
When I get to my computer I’ll see if I can write out the full code for you to use.
<div id=box1></>
<div id=center></>
<div id=box2></>
Is this what you want to accomplish?
<!doctype html>
<head>
<meta char="utf-8">
<title>box test</title>
<style>
#content {
margin:25px auto;
}
#text-1 {
border:#000000 2px solid;
width:20%;
height:20%;
margin-bottom:10px;
}
#shape {
border:#000000 2px solid;
width:20%;
height:20%;
}
#text-3 {
border:#000000 2px solid;
width:20%;
height:20%;
margin-top:10px;
}
</style>
</head>
<body>
<div id=content>
<div id=text-1>text one</div>
<div id=shape>shape</div>
<div id=text-3>text two</div>
</div>
</body>
<html>
Does this work? the position property allows you to put your div's anywhere on the website. Just remember that the attribute allows for stacking. Just use the left/right/top/bottom attribute.
#container {
width:1000px;
}
#x {
position:absolute;
top:0px;
left:0px;
background-color:blue;
}
#center {
position:absolute;
top:0px;
left:150px;
}
#y {
position:absolute;
top:0px;
left:300px;
background-color:#ffff00;
}
<div id="container">
<div id="x">Write something</div>
<div id="center">middle</div>
<div id="y">New</div>
</div>
I have html script like :
<html>
<head></head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
then I want to access the div by url, if url is:
example.com#div1
I want to hide div2 and if url is:
example.com#div2
then I want to hide div1
How do I solve that with css?
It is possible through CSS using pseudo selector
<html>
<head>
<style type="text/css">
.my-div {
background-color: green;
display: none;
height: 100px;
width: 100px;
}
.my-div:target {
display: block;
}
</style>
</head>
<body>
<div id="div1" class="my-div">Div 1</div>
<div id="div2" class="my-div">Div 2</div>
</body></html>
Make sure you always hit with #div1 in url e.g. example.com/#div1 or example.com/#div2 else it will show blank page
I did this recently, don't think you can do with CSS only.
this will load correct div on page load, including when the user uses back in browser.
<script>
$(document).ready(function() {
if (window.location.hash) {
var hash = window.location.hash.substring(1);
changeTab(hash);
}
else {
changeTab('div1');
}
});
function changeTab(divNo) {
$('.divclass').hide();
$('#' + divNo).show();
window.location.hash = '#'+divNo;
}
</script>
if you use a button to change divs just use:
onclick="changeTab('div1');"
set your div's class attribute to a type like 'divclass'
How to target outer div based on url?
The CSS pseudo-class :target is perfectly suited to this:
div {
float:left;
width: 300px;
height: 150px;
}
#div1, #div2 {
display:none;
line-height: 150px;
color: rgb(255,255,255);
font-size: 72px;
text-align: center;
font-weight: bold;
}
#div1 {
background-color: rgb(255,0,0);
}
#div2 {
background-color: rgb(0,0,255);
}
#div1:target, #div2:target {
display:block;
}
<div>
<p>Display Div1 (but not Div 2)</p>
<p>Display Div2 (but not Div 1)</p>
</div>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
I have this code and idk how to make it so when I click on the items in the "menu" to not redirect to other pages but to change the src of the iframe.. should I change the
Code:
<html>
<head>
<title> First attempt at html/css </title>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#menu {
background-color:#eeeeee;
height:470px;
width:200px;
float:left;
text-align:center;
padding:5px;
}
#content {
float:left;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1> Movies Gallery</h1>
</div>
<div id="menu">
The Maze Runner <br>
Guardians of The Galaxy <br>
The Guest <br>
Edge of Tomorrow
</div>
<div id="content">
<iframe src="the_maze_runner.html" width=1110px height=475px frameborder=0></iframe>
</div>
<div id="footer">
Copyright Andrew.Xd 2014
</div>
</body>
</html>
I'm still a starter in this domain so I really have no idea how should I modify the code to obtain what I intend to.
You can simply add a target to your menu-items and a name to your iframe, like so:
<a target="frameName" href="the_maze_runner.html" style="text-decoration:none">The Maze Runner</a>
<iframe name="frameName" src="the_maze_runner.html" width=1110px height=475px frameborder=0></iframe>
Or did I missunderstand the question?
css is a markup language, so you will not be able to do what you want with css.
However, you can give your iframe an id and change the source using javascript. This SO post explains it perfectly, I could not do a better job :p
If you have jQuery (you should!) then you can do something like this:
function Start() {
$('#menu').click(function (e) {
e.preventDefault();
$('#content').find('iframe').prop('src', "whateverURL");
});
}
$(Start);
Since you want to cancel the href in the <a> tags, why not remove them completely and replace them with <div> tags?
You can't modify properties of DOM elements using css. Use js/jQuery:
$(document).ready(function() {
$("#menu a").click(function(e) {
e.preventDefault(); //so browser will not follow link.
$("#content iframe").attr("src", $(this).attr("href"));
});
});
#header {
background-color: black;
color: white;
text-align: center;
padding: 5px;
}
#menu {
background-color: #eeeeee;
height: 470px;
width: 200px;
float: left;
text-align: center;
padding: 5px;
}
#content {
float: left;
}
#footer {
background-color: black;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header">
<h1> Movies Gallery</h1>
</div>
<div id="menu">
The Maze Runner
<br>
Guardians of The Galaxy
<br>
The Guest
<br>
Edge of Tomorrow
</div>
<div id="content">
<iframe src="the_maze_runner.html" style="width:1110px; height:475px" frameborder=0></iframe>
</div>
<div id="footer">
Copyright Andrew.Xd 2014
</div>
Its not Css code, its a JS code.
you need to to connect you items to an event listner take the href value on put it on the iframe
//jquery on load mathod//
$(function(){
$('#menu a').click(function(e){
e.preventDefault();
$('iframe ').attr('src',$(this).attr('href'));
});
});
I have a canvas with height of 480. I am using Easeljs to load images in canvas . Each row contains 3 images. The images loaded beyond the height of canvas(480) are hidden. I need to add vertical scrollbar to view those images. How can i implement this.
thanks,
sathya
Here is how to add a vertical scrollbar to canvas that allows scrolling up/down over a larger image: http://jsfiddle.net/m1erickson/a9KDB/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style>
body{ background-color: ivory; }
div, canvas {
position:absolute;
}
.wrapper {
top:10px;
left:10px;
width: 300px;
height: 300px;
border: 2px solid black;
margin:30px 0 2;
overflow: hidden;
background-color:green;
}
.vertical-scroll {
left:320px;
top:10px;
border: 1px solid green;
width: 20px;
height: 300px;
}
.vertical-scroll div.bar {
left:0px;
top:0px;
width: 20px;
background-color: blue;
height: 20px;
}
#mycanvas {
left:0px;
top:0px;
}
</style>
<script>
$(function(){
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
var wrapper;
var canvasHeight;
var vScrollHeight;
var canvasWrapperHeight=300;
$(".bar").draggable({
containment: "parent"
});
$(".bar").on("drag", function (event, ui) {
var ctop=(-ui.position.top * canvasHeight / canvasWrapperHeight);
canvas.style.top = ctop + "px"
});
var img=new Image();
img.onload=function(){
canvas.width=this.width;
canvas.height=this.height;
canvasHeight=this.height;
vbarHeight=canvasWrapperHeight*canvasWrapperHeight/canvasHeight;
document.getElementById("vbar").style.height=vbarHeight+"px";
ctx.drawImage(this,260,0,300,this.height,0,0,300,this.height);
}
img.src="http://sciencedude.blog.ocregister.com/files/2008/02/zot1-copy.jpg";
}); // end $(function(){});
</script>
</head>
<body>
<div class="wrapper" id="wrap1">
<canvas id="mycanvas" width="300px" height="300px" />
</div>
<div class="vertical-scroll" id="vscroll">
<div class="bar" id="vbar"></div>
</div>
</body>
</html>
wrap the canvas with a div, then set a height for the div, and finally apply overflow-y:auto and overflow-x: hidden property to the div.
overflow-y:auto shows the vertical scrollbar when needed
overflow-x: hidden hides the horizontal scrollbar
http://jsfiddle.net/V92Gn/3509/
<div style="height:200px;width:480px; overflow-y:auto;overflow-x: hidden;">
<canvas id="canvas" style="background:navy" width="480" height="820"></canvas>
</div>
I don't know about any ScrollBar-Solutions for EaselJS and it's not possible to do this via HTML.
So you would have to code your own scrollbar, if you have trouble with that, there should be a quite a few tutorials for that to be found online for ActionScript3 you can easily adapt those for EaselJS.
Another option would be to extend the height of the canvas itself and add a scrollbar to it's parent container, I'm not sure though if that'd be a very good solution.
i'm now starting designing with proper mark-up and organization.
and now, i have problem with my div border. it does not enclose all ot the div's content.
this is my html snippet:
<div id="paneMiddle">
<div id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div>
<img src="img/flower1.jpg" />
<span id="itemName">Ballpen</span>
<br/><span id="itemPrice">Php 90.00</span>
</div>
</div></div>
and here's my css:
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
why doesn't this work?
thanks
See if adding the clearfix class to your div fixes anything
http://www.webtoolkit.info/css-clearfix.html
Without more info, I can only assume that the combination of flower1.jpg and the other contents are wider than 590 pixels. When you specify a concrete width for an element in CSS, it will adhere to that width, even if its contents are larger.
Also, important to point out that the > direct descendant selector is not supported in IE.
Whenever I have trouble like this, I make a minimal self-contained example for testing. This one works perfectly although I've used a local image. When I reduce the width to 50 pixels, the image extends beyond the right-hand side of the border so this may be the problem you're having. What exactly is outside the border in your case?
Based on your further comments that you float:left the image div, the following shows what might be your problem. If you run this code, you'll see the the first bordered div no longer encloses the image. Is that the problem you're seeing?
<html>
<head>
<style type="text/css">
div#x{
float:left;
}
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
</style>
</head>
<body>
<div id="paneMiddle">
<div id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div id="x">
<img src="img/flower1.bmp" />
<span id="itemName">Ballpen</span>
<br/>
<span id="itemPrice">Php 90.00</span>
</div>
</div>
<div id="subPaneLatestItems2">
Hello
</div>
</div>
</body>
</html>
Including the cleardiv fix (shown here) appears to fix the problem:
<html>
<head>
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
div#x{
float:left;
}
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
</style>
</head>
<body>
<div id="paneMiddle">
<div class="clearfix" id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div id="x">
<img src="img/flower1.bmp" />
<span id="itemName">Ballpen</span>
<br/>
<span id="itemPrice">Php 90.00</span>
</div>
</div>
<div id="subPaneLatestItems2">
Hello
</div>
</div>
</body>
</html>
Just something to note your image doesn't have a title or more importantly alternate text maybe you haven't got around to this, but its point that needs looking into. Alternate text allows a users to understand what might have been there if for example the images don't load up or they have images turned off. It is also an accessbility issue if user are using a screen reader a description of the image is useful to them.
<img src="img/flower1.jpg" alt="Photo of a Daisy" title="This is a Daisy" />