How to create a scrollable textarea with scrolling background image? - javascript

I would like to add a background image to the textarea that scrolls along with the content. I'm programming in HTML/JavaScript/CSS specifically for mobile Safari.
I've attempted a variety of things but nothing seems to work.
I tried placing the textarea on top of the image and then scrolling the background image whenever the textarea is scrolled. It works more or less fine when I'm typing text, but the native scrollbars (which I don't want to get rid of) make it look a wreck on mobile Safari.
I tried using a contentEditable div container but that seemed to throw problems too (again with the scrolling).
Is it possible to have a textarea with native scrolling with a background image that scrolls?

A background image can be applied to an input or text element as shown:
check the fiddle jsfiddle
html
<div class="outer">
<textarea></textarea>
</div>
css
.outer { width: 310px; height: 250px; padding: 5px; border: 1px solid #666; -webikit-border-radius: 3px; -moz-border-radius: 3px; overflow:auto;overflow-x:hidden }
textarea{
background: #fff url('http://www.toddle.com/images/300_words_background.gif') 0 -220px no-repeat;
width: 302px;padding:5px; height:99em;
}
Note: The difference between the two is that the content within the div (assuming it's coded correctly) will be included as search engine usable text whereas the textarea content will not.

Related

creating unscrollble background image using html and css only

i am trying to make a web page which background is fixed (meaning width is 100% and height does not scroll ) but the main div of the page which contain all the content of the page is scroll-able in y direction. you can see the effect here http://btemplates.com/2016/blogger-template-topgames/demo/. is it possible to achieve this effect using html and css only ? if not then how it can be done with javascript?
Yes, you can easily do that using a background image. If you inspect the page you can see how they did it.
CSS:
body {
background: url('<<Your URL Here>>'), center top no-repeat fixed;
}
content-wrapper {
width: 960px;
margin: 46px auto 0px;
padding: 0px;
}
HTML:
<body>
<content-wrapper>
</content-wrapper>
</body>
In the future, right-click the page and inspect the HTML and CSS and you should be able to figure most things out.

Cursor moves outside contenteditable div with placeholder css on clicking inside 2-3 times in Firefox

I have created a editor using div with content editable true and used a placeholder created by CSS. This works fine in all browser but Firefox.
Following is the code in html and css
HTML -
<div contenteditable="true" data-placeholder="in case this div is empty"></div>
CSS -
div{
padding:5px;
margin: 1em;
border:1px solid gray;
}
div:empty:before {
content: attr(data-placeholder);
color: gray;
}
If we run above code in Firefox (I am using version 27) and click inside content editable div 2-3 times then cursor changes its position and I cannot write anything inside div. However, if we click outside div and again click inside div I get focus successfully and we can write in it. Please help how to fix this.
You need to set the :before pseudo element position to absolute, like so:
div:empty:before {
content: attr(data-placeholder);
color: gray;
position: absolute;
top: 0;
left: 0;
padding: 6px;
width: 100%;
height: 100%;
}
but once you do it introduces this caret positioning issue due to this Firefox bug. Pick your poison >:(
Can you try giving display block to the CSS of placeholder? It worked for me.

DIV with background image

We have applied the backgroud image(round corner image from web site) for DIV control. and then dynamically added more statement in DIV control.
How we will increase the height and width for the image?
Please give us some suggestions.
Try using css3
.div {
background: #eee;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Or you will need to do all kinds of messy stuff like resizing the background image, or splitting them off into 'corners' and all that... a huge headache
Using javascript you can change the background-size.
Note - It's a CSS3 feature.
Within style tag
.div_class_name
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
when content changes in div you can use the following syntax to change the size
document.getElementById("eleId").style.backgroundSize="60px 80px" ;

Scrollbar Inside and On Top of the Div

I am wondering if it is possible to have a scrollbar inside and on top of the DIV as oppose to next to it? I am developing a chrome extension where I have a DIV that contains information on the far right side of the page. When the DIV exceeds the height of the page, a scrollbar appears next to this DIV as oppose to inside and on top of the DIV. In addition, I am wondering if it is possible to get the scrollbar to fade when the user does not hover over it?
I have modified the appearance of the scrollbar by using -webkit in the css. Here is a snippet of what I have done:
#sidebar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
#sidebar::-webkit-scrollbar-track-piece {
background-color: #f3f3f3;
-webkit-border-radius: 0px;
}
#sidebar::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #ccc;
-webkit-border-radius: 0px;
}
As far as having the "inner" scrollbar, you can make the illusion of this by wrapping the DIV with another DIV of equal height and with the desired permanent width. Then set the inner DIV to 100% width, and it will adjust as the scrollbar appears. As far as the fade, I don't believe the scrollbar is part of the DOM, so Javascript is out, but you may be able to use the animate property in CSS http://fvsch.com/code/transition-fade/test1.html

Image doesn't grow in width to equal parent div's width

I have a really simple page, with a div. Inside that div is an image that sits at the top of the div some text that sits below the image.
My Problem: The image is supposed to have a width equal to the divs width, ie, the image is supposed to stretch to the width of the div. But what happens is that the image stretches only about 80% of the width of the div, so theres a gap on the right side of the image.
How can I make the image stretch all the way to the right so its width is the same as the divs width? I think you can see my problem in JSFiddle(complete with uploaded images): http://jsfiddle.net/ajEmm/ but I also encourage you to show the HTML in IE, the image is a link so it will show.
NOTE: This problem only occurs in IE, in firefox the image correctly stretches to the width of the div
<html>
<head>
<style type="text/css">
<!--
body { background-color: RGB(218,238,248); }
.content { padding-top: 2%; margin: 10px; margin-top: 0; width: 58%;
max-width: 58%; float: left; color: #454545; }
#announcement { margin: 5%; margin-top: 0%; margin-bottom: 5%; border-color: #99CCFF;
border-width:thin; border-style:solid; border-right-width:thick;
border-top-width:0px; border-bottom-width:thick; background-color: #FFFFFF; }
-->
</style>
</head>
<body>
<div class="content">
<div id="announcement">
<img class="anncHeading" src="http://i54.tinypic.com/qs1lsg.png" width="100%" height="60%" alt="1"/>
<p><b>Announcements</b></p>
<p>Planning on hosting an indoor/outdoor event? We have large, modern educational facilities & surounding gardens available for hire & lease at an economical rate.</p>
</div>
</div>
</body>
</html>
Woah, woah woah.
PLEASE write it in a structured, easy-to-digest format. It will help you out in the long run as you learn code (whether it's css, php, js, etc...)
Your code is formatted poorly. I updated your fiddle: http://jsfiddle.net/ajEmm/3/ (plugged everything in the HTML box so you can just copy and paste it into your page file)
Because some users have massive screen resolutions, width: 58%; could be incredibly large. Using a percentage-based width like that is good practice, but usually reserved for site containers and core elements. When using images in fluid layouts, special precautions must be taken (to avoid warping, etc). In your specific case, the image you have IS NOT IDEAL for the code you have. I would suggest one of two things:
Set the container width at 450px, which is the width of your image; or,
Rewrite the way your page works, and use a really long header image without text. If you would like to do this, I'm available to help you. Let me know and I'll make a fiddle and write instructions for ya. :)

Categories

Resources