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" ;
Related
I want to resize the space where the scrollbar moves.
I don't want it to affect how much I can scroll.
Look at the following pictures (my drawings) to better understand what I mean.
I'm using chrome so webkit is viable.
Thanks to all of your answers!
(P.S. I would love to have reduce the image size, yet I don't know how to! My apologies!).
Without nesting another element and play with its height you could simply use a huge border-bottom and place a visible border around the element using the outline property, e.g.
div {
width: 200px;
height: 300px;
outline: 1px #9bc solid;
border-bottom: 50px transparent solid;
}
Codepen demo
Result
You can't change the height of the scrollbar but you can redesign the scrollbar with -webkit-scrollbar like this:
::-webkit-scrollbar {
width: 5px;
height: 10px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #808080;
}
I need to somehow set the twitter widget to more than 520px width.
Does anyone know a workaround for this? I think I had some workarounds working for a while but recently they have stopped working.
The the problems are caused by the div inside the iframe with the class
class="root timeline ltr customisable-border twitter-timeline twitter-timeline-rendered"
It has the style
.timeline {
max-width: 520px;
margin-bottom: 10px;
background-color: #fff;
border-radius: 5px;
}
Note the max-width property, if this is removed than it is possible to set the width to any size > 520px, but the problem is that it is impossible as far as I know to manipulate with the content inside the iframe since it is in different domain.
If its a minor size increase you need you could apply a CSS 2D transform to scale it up slightly.
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.
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
So I'm using CSS :hover to replace a submit button background. When I mouse over the button the old background image disappears (so it looks like nothing is there) for a moment and then reappears with the new background. I thought that perhaps the button image file size was too large but its only 1.4kb. Is there a way to prevent this, caching or pre-loading, or something along those lines?
Is this only on the initial page display / hover?
This will be because the image file is only loaded on request - i.e. the hover action.
To avoid this, both button states should be stored in a single file. You then just need to adjust the background-position property to display the correct half of the image for it's current state.
Here's a rough example (note that button.png contains both image states and is 40 pixels high):
button {
background-image: url(button.png);
width: 60px;
height: 20px;
background-position: 0 0;
}
button:hover {
background-position: 0 -20px;
}
You could, maybe, use a technique that's similar in intent, albeit not execution, to Bryn's answer, above.
.button {background-image: url(img/for/hover-state.png)
background-position: top left;
background-repeat: repeat-x;
background-color: #fff;
height: 1.5em;
width: 5em;
}
.button span
{background-image: url(img/for/non-hover-state.png);
background-position: top left;
background-repeat: repeat-x;
background-color: #000;
height: 1.5em;
width: 5em;
}
.button:hover span
{background-color: transparent;
background-image: none;
}
The similarity I mentioned is to have both images present on the document in order to avoid the hover-flicker. On hover of the button the background-image of the span will disappear, and reveal the hover state, rather than having to load it on-demand.
The bonus is that, although I specified the height/width above this technique will work for dynamic re-sizing, not relying on fixed-width sizes of images (or it's as fluid as your design can allow it to be).
It's because it takes time for the "hover" image to download before it displays. To prevent this, you can use a sprite image technique.
Example: Using Sprite Images with INPUT for a Hover Effect