i want to drag items around inside a div that is rotatable, but it doesnt work correctly
anyone knows how to fix that? Here is the code
<div class="wrap">
<div class="inner"></div>
</div>
CSS:
.wrap{
position: absolute;
top: 20px;
left:20px;
width:200px;
height:200px;
background-color:red;
-moz-transform: rotate(80deg);
transform: rotate(80deg);
}
.inner{
position: relative;
top: 20px;
left:20px;
width:20px;
height:20px;
background-color:blue;
}
https://jsfiddle.net/27ey90xw/
Related
I wrapped the iframe with the below <div> classes, but no matter where I put the CSS, it doesn't pick up the CSS,it just isn't working
HTML:
<div class="auto-resizable-iframe">
<div>
<iframe frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/{$id}"></iframe>
</div>
</div>
And here is the CSS, I tried putting it in global.css, and every other css area, but nothing....
.auto-resizable-iframe {
max-width: 820px;
margin: 0px auto;
}
.auto-resizable-iframe > div {
position: relative;
padding-bottom: 75%;
height: 0px;
}
.auto-resizable-iframe iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
I have one div containing an image and a translucent window over it that is draggable and resizable. I am using the parent div as the containment parameter for the respective jQuery UI interactions. But when I resize the window, I can only resize it to 10px less than the parent width. No matter which image I use. No issues resizing to the full height. No issues dragging to the far right or bottom.
Here is the code (Try it here - JS Fiddle)
HTML:
<div id="container">
<div id="navi">
<img src="http://www.mountainevolution.com/Cento%20Fonti/images/dscn7587.jpg" />
</div>
<div id="infoi">
</div>
</div>
CSS:
#container {
width: 100px;
height: 100px;
position: relative;
}
#infoi {
position: absolute;
top: 0px;
left: 0px;
background-color: lightblue;
border: solid 1px navy;
width: 100px;
height: 100px;
opacity: 0.5;
}
#navi {
padding: 0px;
position: absolute;
}
#navi img {
display: block;
}
JS:
$("#infoi").draggable({
containment: "#navi"
});
$("#infoi").resizable({
containment: "#navi"
});
I have played around with margins and padding, and also looked at other questions on StackOverflow. None of them are similar to mine. There are some questions on problems with using resizable and draggable together. In my case, removing draggable does not affect the issue, so I don't think it is a problem with using them together.
I made a simple flippable element using common techniques and found some strange behavior in Mobile Safari on iOS 7 (older version also may be affected, unfortunately I can't test them at the moment older versions also seem to be affected), please see the images below or visit a demo directly on your iOS device.
Editable markup and stylesheet
Full screen view to visit on your iOS device
<div class="flippable">
<input id="flippable-trigger" type="checkbox">
<label for="flippable-trigger" class="flippable-faces">
<div class="flippable-face-front">
Front
</div>
<div class="flippable-face-back">
Back
</div>
</label>
</div>
body {
font: 1em/0 Arial;
background-color: silver;
}
.flippable {
position: relative;
float: left;
width: 10rem;
height: 10rem;
-webkit-perspective: 800;
}
.flippable input[type="checkbox"] {
display: none;
}
.flippable-faces,
.flippable-face-front,
.flippable-face-back {
position: absolute;
width: 100%;
height: 100%;
}
.flippable-faces {
-webkit-transform-style: preserve-3d;
-webkit-transition: 600ms;
}
.flippable-face-front,
.flippable-face-back {
position: absolute;
width: 100%;
height: 100%;
line-height: 10rem;
text-align: center;
-webkit-box-shadow: 0 0 1rem gray;
-webkit-backface-visibility: hidden;
}
.flippable-face-front {
color: black;
background-color: white;
}
.flippable-face-back {
color: white;
background-color: black;
-webkit-transform: rotateY(180deg);
}
.flippable input[type="checkbox"]:checked ~ .flippable-faces {
-webkit-transform: rotateY(180deg);
}
It appears that repositioning your divs fixes the issue. I don't have an answer as to why that was happening though. Sorry. Working Example | Example for iPhone
<div class="flippable">
<input id="flippable-trigger" type="checkbox" >
<label for="flippable-trigger" class="flippable-faces">
<div class="flippable-face-back">
Back
</div>
<div class="flippable-face-front">
Front
</div>
</label>
</input>
</div>
I'm having some difficulty getting my website to display properly when viewed on the iPhone and iPad. The website displays properly when viewed on every desktop browser I've tried (safari, chrome, firefox), however, on the iPhone/iPad there is a tiny gap/space between the IMG and right box.
It works fine in Firefox. What is the problem?
Here's an inline link to JsFiddle.
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/>
<div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
#wrapper {
border-top: 8px solid #457b91;
max-width: 488px;
margin: 0 auto;
overflow: hidden;
}
#wrapper img {
width: 32%;
float: left;
}
#subject {
background-color: green;
float: right;
width: 68%;
padding-bottom: 32%;
position: relative;
}
#subject_wrapper {
padding-top: 12%;
position: absolute;
height: 100%;
width: 100%;
}
#subject span {
font-family: Thonburi;
font-size: 34px;
color: #ffffff;
display: block;
padding: 0 20%;
}
#subject span:nth-child(2) {
font-size: 18px;
line-height: 8px;
}
I don't have an iPd or iPhone to hand to check this, but try commenting out the space between your elements, thus:
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/><!--
--><div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
It's a pretty ridiculous fix, but it work for inline block elements, like menus made up of LIs.
Heading
I need to align tags beside the price in featured products (the tags in the example feature the text "Aussie Made").
I need to vertically align the "Aussie Made" images beside the price (bottom align). The price can dynamically change in width and height. Can someone give me some ideas on how to make the "Aussie made" image/icon float on the right and still be on the bottom of the div aligned?
I tried to put
position:absolute;
bottom:0px on the div containing the Aussie Made icon. However it didn't work. Can someone please help me on this?
Did you try using position RELATIVE?
As in relative to the PARENT container?
This should give you an ideia:
CSS
.container{position:relative; height:200px; width: 200px; outline: 1px solid #000; }
.image { position: absolute; bottom:0px; right:0px; width: 10px; height: 10px; outline: 1px solid #000; }
HTML
<div class="container"><div class="image"></div></div>
I beg your pardon, your quite right, its ABSOLUTE not RELATIVE...
Although Absolute position actually makes the contents relative to the parent.
See the photo below.
and the code...
<style type="text/css">
.Main
{
position: absolute;
left: 400px;
top: 200px;
width: 469px;
height: 280px;
}
.Photo
{
width: 469px;
height: 280px;
z-index: 1;
}
.Caption
{
position: absolute;
left: 0px;
top: 250px;
width: 461px;
height:32px;
padding-left: 8px;
background-color: #FF0000;
color: #FFFFFF;
font-family: tahoma;
font-size: 20pt;
text-align: left;
vertical-align: middle;
z-index: 2;
}
.Price
{
position: absolute;
left: 330px;
top: 215px;
width: 122px;
height: 40px;
text-align: center;
vertical-align: middle;
z-index: 3;
color: #CC3300;
font-size: 20pt;
background-color: #FFFF00;
}
.MiniText
{
top: 4px;
color: #111111;
font-size: 8pt;
font-weight: bold;
font-family: Tahoma;
}
</style>
<div style="left: 0px; top: 0px; height: 800px;">
<div class="Main">
<img class="Photo" alt="" src="http://202.92.83.79/medias/sys_master/images/8796157247518/Package-img1.jpg" />
<div class="Price" style="z-index: 4">
<div class="MiniText">First of it's kind!</div>
£100.97p
</div>
<div class="Caption" style="z-index: 3">Sooper Dooper Wotsit Thingy</div>
</div>
</div>