Here i am trying to make a text editor which has two characteristics.
It will increase size with the increasing amount of text .
2.It can be pulled up or down with mouse( i haven't implemented it yet,so it is out of question now)
I have put a down side indicator image at the bottom of the editor div.
problem is:
1.When text reaches at the bottom it interacts with the indicator image.I want it in such a way so that,when text reaches a sudden point
above the indicator image it will expand downward.
2.indicator image comes after i enter a character in the editor.I want it to appear from the beginnning.
3.There is an issue with ENTER key.The text pointer comes to the image and new line is added with the second enter.
That's the overall situation.I tried my best to explain the problems.How can i fix this ? If there is any better way to do this please let me know.
#editor{
position:relative;
width:400px;
height:auto;
border:1px solid black;
word-wrap: break-word;
padding-left:4px;
padding-right:4px;
box-sizing:border-box;
overflow-y:scroll;
}
<div id='editor' contenteditable='true' ><img src='http://s22.postimg.org/rh9bx9a3h/ind.png?noCache=1437598902' style='position:absolute;bottom:0px;left:200px;cursor:n-resize;'/> </div>
Try this:
HTML:
<div id='editor' contenteditable='true' ></div>
CSS:
#editor{
position:relative;
width:400px;
height:auto;
border:1px solid black;
word-wrap: break-word;
padding-left:4px;
padding-right:4px;
padding-bottom: 1em;
box-sizing:border-box;
overflow-y:scroll;
line-height: 1em;
background: no-repeat center bottom url("http://s22.postimg.org/rh9bx9a3h/ind.png?noCache=1437598902");
}
Take a look at it in action with this jsfiddle: https://jsfiddle.net/v4nwgcot/
Related
Im having a bit of trouble getting the review order (in this case enquiry) section to stick to the bottom of the header on scroll.
Ive gone through a few jquery examples with no luck and am now playing around with the sticky position for the element. Using a codepen example and playing around with it ive got it to work alright and have tried replicating it on the page through the inspector with no luck.
Codepen example
HTML
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">MAIN CONTENT</div>
<div class="second-content">SECOND CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
CSS
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:1000px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
height:50px; background:#aaa; border-color:red;
}
.main-content{
display:inline-block;
width:49%;
height:900px;
}
.second-content{
display:inline;
width: 49%;
height: 200px;
position: sticky;
top:0;
}
https://codepen.io/elad2412/pen/QYLEdK
Website URL
https://trolleys.wpengine.com/
Based on my understanding you would need jQuery to stop it from going through the footer as well correct?
Ive tried going about this a few different ways and tried it on a few different elements, some of which have stuck for a little while but i need to catch the whole column.
This is an example that best shows what im after, tried implementing this but couldnt get it working.
http://jsfiddle.net/bryanjamesross/VtPcm/
Fixed,
Had to give the form a few extra attributes, i was applying them to an outer div.
form.checkout {
height: 1500px;
position:relative;
display:block;
}
I am new in javascript and jquery.
I am working with a self project called Bookmark Visualization and I need to make dropable link as an inner div and it will be clickable. I make my div Content Editable.
Html
<div id="field" contenteditable="true">This is a test #hath</div>
Style
#mydiv{ width: 300px; height: 300px; border: 1px solid #000; }
Is there anyone to make me feel great.
Thanks in advance
You can make a div clickable by using an a class...
HTML
<div id="my-clickable-div"></div>
CSS
#my-clickable-div {position:relative; float:left; width:100%; height:200px; background:#000;}
a.my-clickable-div {display:block; height:100%; width:100%; text-decoration:none;}
I have 3 div boxes (with fixed width and dynamic height) that are set next to each other. This works fine in Chrome. But in Mozilla and IE, the boxes don't stay same, they break down themselves and sits on top of each other, what I definitely don't want to happen. Even if I minimize the window size (it happens with all browsers) the boxes break down and don't stay in the same row. I want to get rid of this problem. I want that whatever size the window have or what ever browser is used, the boxes shouldn't break down. They must still be able to fit next to each other.
See here
[NOTE/SIDE INFO: I have set the width of my each box 253 px because the max-width of my bosy is set as 1200px, and 253px is estimated so that they all can fit inside 1200px]
This piece of code I am working on:
.HTML:
<div class="box">box1box1box1box1box1<br>
</div>
<div class="box">Box2Box2Box2Box2Box2<br>
</div>
<div class="box">box3box3box3box3box3<br>
</div>
.CSS:
.box {
display:inline-block;
margin-top:100px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
margin-bottom:60px;
margin-left:70px;
padding:15px;
width:253px;
border: 4px solid gray;
border-radius:5px;
}
All you need to do is to put your content in a block-level container element with a width that's wide enough for the elements to not wrap to the next line:
http://jsfiddle.net/o8r97fhf/
HTML:
<div class="container">
<div class="box">box1box1box1box1box1<br /></div>
<div class="box">Box2Box2Box2Box2Box2<br /></div>
<div class="box">box3box3box3box3box3<br /></div>
</div>
CSS:
.container {
width:1161px;
}
.box {
display:inline-block;
margin-top:100px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
margin-bottom:60px;
margin-left:70px;
padding:15px;
width:253px;
border: 4px solid gray;
border-radius:5px;
}
The reason why it is doing this is because the <div class="box" /> elements have "display:inline-block;" - making them act more like an element such as <img /> where it has a height and width, but it is displayed inline, and if there's not enough room on one line, the elements will wrap to the next line.
Another thing you can try with the container <div /> element is to put "white-space: nowrap;" on it instead of specifying a particular width on it.
One thing I do when I'm messing around with CSS like this is, I will put a temporary "background-color:#F0F;" on the container <div /> element so I can see exactly what the dimensions look like, and what is really going on in the page.
Here's what I'm trying to do. I want to create a sort of slide show effect on the main content. If the user click on the right or left arrow on this div, it will move forward/backward to the next "slide/text". The content inside this div or slide includes image, texts, hyperlinks, and can be styled by CSS. My question is, what's the best route to create this effect? I do not want to use flash. I am thinking of a combination of HTML5, CSS3, and jQuery and/or javascript. Does anyone have or know of examples similar to what I've described? Your suggestions or opinions are much appreciated.
There is lot of slide show scripts available, you can also try this
<div class="mosaic-slide" style="z-index: 10;">
<!-- The mosaic-slide div and the tiles are generated by jQuery -->
<div class="tile" style="..."></div>
<div class="tile" style="..."></div>
<div class="tile" style="..."></div>
<div class="tile" style="..."></div>
</div>
</div>
css:
#mosaic-slideshow{
/* The slideshow container div */
height:500px;
margin:0 auto;
position:relative;
width:670px;
}
.mosaic-slide{
/* This class is shared between all the slides */
left:80px;
position:absolute;
top:25px;
border:10px solid #555;
/* CSS3 rounded corners */
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}
.tile{
/* The individual tiles */
height:60px;
width:60px;
float:left;
border:1px solid #555;
border-width:0 1px 1px 0;
background-color:#555;
}
Demo: http://demo.tutorialzine.com/2010/03/mosaic-slideshow-jquery-css/demo.html
I inserted a .swf file to my page inside a div, and I tried to make it vertically aligned to the middle of this div, but it didn't work, only horizontally but that's not what I want.
I tried to place this file in another div inside the main div and change the alignment of this div as well.
Any suggestions?
Here is a good way I use to center elements horizontally and vertically:
<div style="position:fixed; top:0; left:0; width:100%; height:100%;">
<div style="height:100%; display:table; margin:0 auto;">
<div style="vertical-align:middle; display:table-cell;">
<div><p>This is a fully-centered div!</p></div>
</div>
</div>
</div>
Hmm... its kinda hard to answer without a code snippet.
Here is an article for creating wrappers around Flash content: http://livedocs.adobe.com/flex/3/html/help.html?content=wrapper_13.html
Scroll down to the table, where they start talking about "align" or just do a page search for the word "align" to see what they have to say.
Here is also a quick idea, I have noooo idea whether or not it works, just food for thought:
div.SWFContainer object, div.SWFContainer embed {
display: inline-block;
margin: auto 0px auto 0px;
width: auto;
vertical-align: middle;
}