As the continuation of my previous Question How to make the textbox above the slider.
The textbox needs to be displayed in the centre of both slider.
How can i do this ?
Here is the Jsfiddle that i have.
http://jsfiddle.net/Cv9DM/12/
css :
.view-fifth:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
}
Note : Make the Result Tab little wide to make the two slider visible in Horizontal
The horizontalized screen is given below
Edit : Expected output :
Check this
Changed CSS for input
<input type='text' style="z-index:999;position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -82px; width:160px; padding: 4px;">
added a div to wrap both the slides .outer
.outer {
position: relative;
height: 200px;
float: left
}
Is this what you want?
Fiddle: fiddle
<div>
<input type='text' style="z-index:999;position: absolute;
top: 70px;
left: 230px;">
<div class="view view-fifth">
<img src="http://s15.postimg.org/aranu1b5n/image.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
Read More
</div>
</div>
<div class="view view-fifth">
<img src="http://s15.postimg.org/aranu1b5n/image.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
Read More
</div>
</div>
</div>
if you need to input box vertically center you can use this property. see the DEMO.
input[type="text"]{
position: relative;
top: 50%;
transform: translateY(-50%);
z-index:1;
position:fixed;
left:18em;
top:9em;
}
According to your edit, you need to use position:fixed instead of position:absolute.
<div style="z-index:999;position: fixed; top: 50px; left:0; right:0; margin:0px auto;"><input type='text' /></div>
DEMO
You can refer this one too
with use of jQuery
<div class="view-ten clearfix">
<input type='text' class='textbox' style="z-index:999;position: absolute;"/>
</div>
<div class="view view-fifth"></div>
<div class="view view-fifth"></div>
Related
Recently I changed some transitions (changing two parent divs, respectively to "relative" and "absolute" respectively
I have a chat function for iOS and before this it was working fine, but since then, the chat input has jumped up about half the screen (the height of the keyboard).
Here's my code:
<div style="position: relative">
<div style="position: absolute">
<div>
<div id="messages-container" style="transform: translate3d(0px, 0px,
0px);">
<div id="messages">
<div class="message left">
<span>Test from merchant</span>
</div>
<div class="message left">
<span>Another test</span>
</div>
<div style="float: left; clear: both; height: 6rem;"></div>
</div>
</div>
<div class="msginput" style="transform: translate3d(0px, 0px, 0px);">
<textarea placeholder="Message..." class="textareainput"
name="msginput" rows="1"></textarea>
<div class="sendbutton">SEND</div>
</div>
</div>
</div>
</div>
Now, msginput is pretty normal I feel:
.msginput {
border-top: 1px solid #d1d4d9;
border-bottom: 1px solid #d1d4d9;
z-index: 100;
bottom: 0;
left: 0;
position: fixed;
width: 100%;
background-color: #f2f2f2;
padding-bottom: 0px;
margin-bottom: 0px;
transition: transform 0.2s;
}
Now obviously it's hard to demonstrate this as I can't generate a keyboard, but I hope that someone will have seen something similar in the past - it seems like it would probably be a common use-case. Note, without the keyboard, the fixed layout works perfectly fine, and without the top level divs for the animations it works fine.
What could be going on? I'm sure it's some setting in one of my divs.
I am able to calculate when the keyboard changes and move the input box accordingly, but this looks bad (even with animation), as it shifts to near the top of the screen
This is the library I am using:
https://github.com/ionic-team/cordova-plugin-ionic-keyboard
I am not using it with Ionic, and it doesn't need to be. I am doing this in a React app, but I don't think that's relative to this question.
I have some trouble with CSS.
I have code (example):
<div class="background" style="background: url(sample.jpg) no-repeat;">
<div class="text-title">Title</div>
<div class="text">Random stuff</div>
</div>
What I want to do is, that when hovering on this background image - it should get opacity to lets say 0.3, but how to make it, that inside items would stay the same opacity 1?
Here's the best trick in the book. https://jsfiddle.net/xbxvr8as/
If you have trouble with CSS then this might well bend your brain but the jsfiddle is as pared down as you can get it. Play with it by removing single styles to see what happens.
The crux is to relative:position your element. Then you can add a "pretend" extra div-like thing using the :after pseudo-element. You give this pseudo-element a bunch of properties - the most important probably being position:absolute which allows it to sit straight underneath the text.
HTML
<div id="a">
some stuff in here .....
</div>
CSS
#a{position:relative}
#a:after{
content:" ";
position:absolute;
display:block;
top:0;left:0;right:0;bottom:0;
background-color:#f00;
z-index:-1;
opacity:0.2;
}
You could use a pseudo element.
<div class="background">
<div class="text-title">Title</div>
<div class="text">Random stuff</div>
</div>
.background {
position: relative;
background-color: yellow; /* added for illustrative purposes */
min-height: 150px; /* added for illustrative purposes */
}
.background:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.3;
background-image: url('http://lorempixel.com/output/abstract-q-c-640-480-3.jpg');
background-repeat: no-repeat;
}
jsFiddle: http://jsfiddle.net/3kbf5p5x/
You could put the background on an absolutely-positioned element within the outer element, and then control its opacity independently:
<div style="position: relative">
<div class="background" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(sample.jpg) no-repeat;">
</div>
<div class="text-title">Title</div>
<div class="text">Random stuff</div>
</div>
Note that to do that, we have to make its container positioned via position: relative.
Live Example:
body, html {
height: 100%;
}
.outer {
width: 100%;
height: 100%;
}
.background {
opacity: 0.5;
}
<div class="outer" style="position: relative">
<div class="background" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(http://onlyfreewallpaper.com/download/sea-coast-night-sky-stars-milky-way-1024x768.jpg) no-repeat;">
</div>
<div class="text-title">Title</div>
<div class="text">Random stuff</div>
</div>
I have a container div with an image overlayed on top of it.
I want to center this container div within a basic popin. I am sure it has something to do with the overlay approach I am using within the CSS, but I cannot figure it out. How can I center the container dev within the popin?
EDIT: There are several of these blocks placed in-line.
CSS and HTML are as follows:
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; left: 0; }
.popin{
background:#fff;
padding:15px;
box-shadow: 0 0 20px #999;
border-radius:2px;
}
#underlay1 {
width: 320px;
height: 320px;
position: relative;
}
#underlay2 {
width: 320px;
height: 320px;
position: relative;
}
<div class="row">
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay1"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay2"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
</div>
Underlay is receiving an image from an API. overlayimage.gif is another image being placed on top.
Just remove float: left; from .containerdiv and give text-align: center; to .popin will solve your issue.
You can center absolute div like following way:
left: 50%;
transform: translate(-50%, 0px);
http://jsfiddle.net/5z2k1b1r/
Edit:
use margin: 0 auto; for #underlay as per your expected output.
Check Fiddle
Since a week I try to open a box with html5 css3 and some javascript.
The final result should be in the first step (button1) "open the box" (like a package) the second should be the "unfolding effect".
It work almost close in this example:
http://jsfiddle.net/Rases/wprt40nr/
<div id="cube">
<figure class="front">Cover</figure>
<figure class="top">TOP!</figure>
<figure class="back">Back</figure>
<figure class="right">R1</figure>
<figure class="right2">R2</figure>
<figure class="left">Left1</figure>
<figure class="left2">Left2</figure>
<figure class="bottom">Bottom</figure>
</div>
but as i learned some parts are not really connected. That's the reason why it's overlap to the step3
So I connected the parts in each other and replace the figure with div tags as you see here.: http://jsfiddle.net/Rases/71gy2qu9/
<div id="cube">
<div class="top">TOP! <div class="front">Cover</div></div>
<div class="back">back </div>
<div class="right">Right1 <div class="right2">Right2</div></div>
<div class="left">left1 <div class="left2">Left2</div></div>
<div class="bottom">bottom </div>
</div>
But this one didn't worked very well and I googled about the diffrent between div and figure and find out the coordinate System woks diffrent
My next idea was to replace the div-tags with the span-tag, because i saw it in section 6: http://rupl.github.io/unfold/
<div class="sandbox">
<div class="cube rotate labels">
<span class="top side"></span>
<span class="left side"></span>
<span class="right side"></span>
<span class="bottom side"><span class="back side flat"></span></span>
</div>
</div>
Here you can see the folding effect in the second part of section 6
so I try this version: http://jsfiddle.net/Rases/1b6a87t0/
<div class="box" >
<div id="cube">
<span class="top">TOP!<span class="front">Front</span></span>
<span class="back">BACK</span>
<span class="right">Right1<span class="right2">Right2</span></span>
<span class="left">Left1<span class="left2">L2</span></span>
<span class="bottom">Bottom</span>
</div>
</div>
In the last version of the box is connected but the unfolding effect from step1 to step2 looks wacky. I can't find the mistake and the css have diffrent coordinates the rest ( box and cube is the same )
here is the CSS - Code from my last example
/******* cube-Style *******/
.box {
width: 248px;
height: 234px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #000;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(0deg) translateZ(-116px);
-moz-transform: rotateX(0deg) translateZ(-116px);
-o-transform: rotateX(0deg) translateZ(-116px);
transform: rotateX(0deg) translateZ(-116px);
-webkit-transition: -webkit-transform 3s;
-moz-transition: -moz-transform 3s;
-o-transition: -o-transform 3s;
transition: transform 3s;
}
#cube span {
display: block;
position: absolute;
font-size: 15px;
margin: 0px;
font-weight: bold;
color: white;
text-align: center;
}
Update: today I tryed http://matthewlein.com/ceaser/ on the first example but it don't work because the one end move in a circle and the other hand move in a line
The problem on the first example is still, that the Layers are not connected very well:
So I have to work with the other examples but in this case there is a error for the first open effect. (open the box)
Just Remember: Step one open the box, Step two flat the box.
I can't find the bug... thanks for your support.
I looked at your second example from http://rupl.github.io/unfold/ and added more sides + 2 buttons to control the single steps:
http://jsfiddle.net/uu98t6en/
All you have to do now is to adjust the flat classes to the point where you want to start and do an animation by defining "step"-Classes or just one-by-one.
$(".buttton1").click(function()
{
$(".step1").addClass("flat");
});
$(".buttton2").click(function()
{
$(".step2").addClass("flat");
});
$(".reset").click(function()
{
$(".step1, .step2").removeClass("flat");
});
Example:
http://jsfiddle.net/uu98t6en/2/
I hope this was helpful.
-moritz
I need to insert a image to be zoom in and out but some website told me that it is suppose to be use with path="image url". The image didn't appear so i want to use background-image: url("image url"). So how do i put it in to allow image to show?
<style type="text/css">
#html{
height:100%;
}
#body{
height:100%;
margin:0px;
padding:0px;
}
#hr{
border:0;
width:50%;
}
</style>
<body>
<div id="outerDiv0">
<div id="outerDiv" style="position:relative;height:99%;width:100%;border:1px solid black;overflow:hidden;">
<div style="position: absolute; top: 10px; left: 10px; z-index: 1">
<img src="zoomin_off.gif"
onclick="ZoomIn()" alt="zoomin"/>
</div>
<div style="position: absolute; top: 10px; left: 90px; z-index: 1">
<img src="zoomout_off.gif"
onclick="ZoomOut()" alt="zoomout"/>
</div>
<div id="Nav" style="display:none;position: absolute; top: 70px; left: 20px; z-index: 1"><div><img src="prev.gif" alt="prev"/></div>
<div style="position: absolute; top: 0px; left: 79px;"><img src="next.gif" alt="next"/></div></div>
<div id="imageTiles" style="position:relative;top:0;left:0;z-index:0;width:100%;"></div>
<div id="imageLabels" style="position:relative;top:0;left:0;z-index:1;width:900000px;height:900000px;"></div>
</div>
<div id="overlay"><div id="theScale"></div><div id="theInfo">
</div>
<div id="Thumb0"><div id="Thumb"></div><div id="Thumb2"></div></div>
</div>
<div id="wheelMode">Mouse Wheel:<input type="radio" onclick="wheelMode1()" /> Zoom<input type="radio" onclick="wheelMode2()" /> Next/Prev</div>
<div id="coords" style="position:absolute;top:2px;right:10px;z-index:10;"></div>
</div>
Without any example code we can only guess. Maybe your div did not have any dimensions. Try adding width and height with css to your div:
<div style="width:300px;height:300px;background:url('http://webpage/path/to/image.jpg')"></div>
Can you try this,
CSS:
.Bg{
width:300px;
height:300px;
background-image:url('imagepath');
}
HTML:
<div class='Bg'></div>
Its hard to understand what exactly you want to do,however if you want to add background image to div you can do it as follows
<div class="show">
some text
</div>
in CSS
.show
{
background-image:url('paper.gif');
//other css properties of div
}
ref