Extjs 4.2.2 - scrollable text behind image in textarea - javascript

I'm searching high and low to achieve what has been done in this fiddle:
http://jsfiddle.net/wNTe6/1/
I need the same effect for an Extjs-Textarea.
(background-image seems to be outdated, I used an image-URL of a random-image)
I need a teaxtarea with a (background?-) image (center/middle) and text.
The text should be scrollable, but has to disappear behind the image.
At the very moment, text is scrolling above my background-image (which is understandable).
My textarea (Extjs):
var txtField = Ext.create('Ext.form.field.TextArea', {
name: 'transitionTextArea',
width: transWidth,
height: 100,
border: false,
value: 'Transition Transition Transition Transition Transition Transition',
readOnly: true,
fieldCls: 'transition-style'
});
CSS-Class:
.transition-style {
background-image: url('../images/icons/processControl/transition_160x32.png');
background-repeat: no-repeat;
text-align: center;
vertical-align: middle;
border: 0px;
padding-top: 30px;
}
Can anyone please help me?
Any help would be highly appreciated!
-nemesis-

Well, I'll give it a shot, but it's not very elegant.
Here is the Fiddle.
Changes in HTML.
<div class='imgdiv'>
<img src='http://minionslovebananas.com/images/check-in-minion.jpg' width='100' height='120'>
</div>
Changes in CSS.
.imgdiv {
margin: 40px auto;
position: relative;
top: 20%;
left: 5%;
border: 1px solid red;
height: 120px;
width: 100px;
}
Make the outer div with the same height as the scrollable div, but slightly less wide to not cover up the scroll bar. Make its position absolute.
Insert the image in a div and make the div position relative, and you can move it around.
I'll bet someone can give us a nice ELEGANT solution.

Related

How was this css effect achieved?

I ran into two different website few days back, which was a responsive site but images had different css rules. I'm not sure if only css was used or some javascript. For example in responsive sites, when a window is made small, the images also turns small, so does the text and with different break points size of text can be manipulated.
1) What I saw was on the first website, the height of the image remained the same but the image within it shrunk when the screen was made small. I can compare this to a camera's zoom in and zoom out effect. When the window was made small, the image zoomed out. when the window size was made big, the image zoomed in (all the while height remained the same).
2) On the second website, I noticed that when the screen was made small, the image(100% width) slid to the left of the screen, but the height remained the same.
Two different websites:
Wondering how this was done?
What you are describing is simply images with fluid-height and fixed-height.
In the first example image is set to max-width: 100% and height: auto which resizes according to screen size.
In the second example there is a container div with max-width: 100% and overflow: auto which simple does not allow the image surpass window size and you have an image with fixed height.
Fluid height:
.fluid-height{
max-width: 100%:
height: auto;
width: 100%;
}
<p>Fluid width and height</p>
<img class="fluid-height" src="https://images.unsplash.com/photo-1491308056676-205b7c9a7dc1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a4dc6385e23451fd8aa3458688757100&auto=format&fit=crop&w=4506&q=80">
Fixed height:
div{
max-width: 100%;
overflow: hidden;
}
img{
height: 500px;
}
<p>Fixed height</p>
<div>
<img class="fixed-height" src="https://images.unsplash.com/photo-1522206052224-9c5ad951dd74?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6276d94baf7d9a4b6962be8d9e8aeb4b&auto=format&fit=crop&w=8100&q=80">
</div>
Responsive scaling on websites
Right side image scales with the div that surrounds it.
|container
--|image
|end container
Setting width:50%; on the image makes it take up 50% of the container.
The container scales with the viewPort or window.
The container has display: inline-block; so that other elements can fit next to it.
Example:
red element is the container,
blue represents the window.
Javascript is only there to scale the blue window on button press.
document.addEventListener("DOMContentLoaded", function() {
let counter = 1;
let button = document.getElementById("scale");
let tmpWindow = document.getElementById("pretend");
button.addEventListener("click", function(e) {
counter++;
var nextWidth = parseInt(tmpWindow.style.width) - (10 * counter);
tmpWindow.style.width = nextWidth + "px";
});
});
.test-window {
/*width: 700px;*/
border: 5px solid blue;
}
.container-right {
display: inline-block;
vertical-align: top;
border: 5px solid red;
width: 50%;
height: 100%;
line-height: 0;
}
.container-right img {
width: 100%;
}
.container-left {
display: inline-block;
width: 200px;
border: 5px solid black;
}
<div>
<button id="scale">Shrink window size</button>
</div>
<div id="pretend" class="test-window" style="width:700px;">
<div class="container-right">
<img id="img-right" src="https://lorempixel.com/200/200/" />
</div>
<div class="container-left">
<p>Dante, astray in a wood, reaches the foot of a hill which he begins to ascend; he is hindered by three beasts; he turns back and is met by Virgil, who proposes to guide him into the eternal world. Midway upon the road of our life I found myself within
a dark wood, for the right way had been missed. </p>
</div>
</div>
figured this out:
.somediv {
background-image: url("baloon.jpeg");
background-size: cover;
background-position: center;
}

Issues getting a background image to appear

I am unsure of why I cannot get a background-image to appear in the following snippet. The url is correct and I have set size to the image. Also, how can you align a background-image in the center of a page? I know there are properties like right top, but I do not see one for center vertically and horizontally.
Thanks.
$("#arrow-icon").slideToggle(1000);
.arrow {
height: 400px;
width: 100%;
background-color: blue;
text-align: center;
}
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="arrow">
<div id="arrow-icon">
<!-- <img src="http://optimumwebdesigns.com/icons/down-arrow.ico"> -->
</div>
</div>
The problem is that the div is smaller that the picture.
You can get around this with the background-size property
Example:
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
background-size:100% 100%;
}
fiddle - https://fiddle.jshell.net/800modgt/
Or you can change the div width and height to the image width and height...
And in terms of centering, simply use:
background-position: center;
That said, I'm noticing that it's not center on the page on the Fiddle previously posts. You can use
margin:auto;
to center a <div> horizontally
You might consider for the positioning using CSS3 for positioning, as it's very versatile in changing position of a div and how far it slides out. Here is a JSFiddle. It's for side animation, but it will work for just a standard up/down, too.
https://jsbin.com/yovaqo/edit?html,css,js,output

Is there a way to make the hover area larger than the image?

I was wondering if there is a way to make the hover area bigger than the image?
For example, I have an image that is 72px x 61px and when I hover over it, it changes to a different image. What I would like to know is if I can hover outside the image but still trigger the change in the image.
Sorry if this is confusing, I tried to post an image but since I just signed up I am not able to.
This is a working example, just hover in the gray colored region
.outer {
border: 1px solid;
padding: 60px;
width: 300px;
background-color: #ddd;
}
.outer:hover>img {
content: url('http://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg');
}
<div class="outer">
<img src="http://goo.gl/7VYJyX" />
</div>
Yes. Put it in a container (<div>, <a>, whatever), add padding to the container (to increase the area).
If what you're doing is in JS, attach the hover handler to the container instead of the image.
If you're doing CSS, something like this should be helpful:
.container:hover img{
/* styles for img when .container is hovered*/
}
Is this what you are going for. her is my fiddle https://jsfiddle.net/pdjoh1dy/1/
HTML
<div id="hover-example">
<div id="img-holder">
</div>
</div>
CSS
#hover-example{width: 500px; height: 500px; border-style: solid;}
#img-holder{margin: 25%; width: 50%; height: 50%; background-color: blue;}
#hover-example:hover > #img-holder{
background-color: red;
margin: 10%;
width: 80%;
height: 80%;
}
You could also set the image to display: block and add padding, if it does not mess with your layout.

Showing only a part of image in div using css

What I have :
I have a div of width 200px X 200px
and image inside it of size 400px X 400 px.
What I want to do :
I want to show only a part of image inside div
Is it possible using only css.If not ? Then what are the other ways
(Note : I don't want to set image to background of the div)
What I have done so far :
Fiddle : http://jsfiddle.net/5Hbr3/1/
<div id="sample">
<img src="image.jpg" />
</div>
I want to show image from 100,100 to 300,300.
and scrollbar should disappear.
Any help will be appreciated.
Thanks
Use position: relative on the parent element and position: absolute on the child images.
#sample {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
border: 1px solid black;
}
#sample img {
position: absolute;
top: -100px;
left: -100px;
}
<div id="sample">
<img src="data:image/jpeg;base64,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"
/>
</div>
To make the scrollbar disappear, use overflow: hidden (as in the JSFiddle)
Here is a method to tackle your problem:
http://jsfiddle.net/5Hbr3/5/
#sample{
background: url(image-data.jpg);
background-position: -100px -100px;
width: 200px;
height: 200px;
}
This method allows you to achieve the same result using one element instead of two, and is also cross-browser compatible. I'd recommend this approach instead of absolutely positioning the image inside the container div.

jcarousel width issue

I'm using jCarousel on a website I'm creating for my company. I'm using the default javascript that came with jCarousel.
<ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px;width: 2084px;">
The width is being generated by the javascript that jCarousel came with but I can cypher though it to figure out where to change the value.
Any help would be great.
Here is a link to what I'm working on: http://marcbrigham.com/lynxems/index.html
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 245px;
height: 75px;
}
Taken from the default Tango skin that´s used in the examples.
What skin/theme/CSS are you using? jCarousel needs to change the width to enable the slide but the wrapper element should be using overflow: hidden;.
UPDATE
This CSS edit makes it look OK but if you need it to cover the whole width of #mainhome you should consider changing the size of the images.
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 765px;
padding: 20px 40px;
height: 200px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 775px;
height: 190px;
}
Another option could be adding margin: 0 40px; to .jcarousel-skin-tango .jcarousel-clip-horizontal.
You can also create a CSS style and add !important to it, which will override the inline styles. For example:
#carousel {
width: 1000px !important;
}
While this works, I'm finding that if the container is too wide, you'll be able to scroll beyond just the items within it. I'm still looking for a workaround for this.
There's also a new version (0.3.0) but there aren't any really good examples on the developers site yet.
just add a style to your css:
.jcarousel-list-horizontal {width: x}
Al

Categories