Here is a basic sketch of what I want to achieve, but without inserting any kind of HTML entitites (Plunker: http://plnkr.co/edit/nt1pPUujTSLEXIAagS7d?p=preview):
.container {
padding: 40px;
}
.underlined {
border-bottom: 1px solid red;
padding-bottom: 0;
}
.skew-text {
transform: rotate(-45deg);
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<!-- Original -->
<div class="container">
<div class="skew-text">
<span>
I'm a little teapot, short and stout
</span>
</div>
</div>
<!-- Aligned -->
<div class="container underlined">
<div class="skew-text">
<span class="text">
I'm a little teapot, short and stout
</span>
</div>
</div>
</body>
</html>
Basically, I would like each line of text in the rotated div to align with the red line, rather than left side of the rotated container. Is this possible only using CSS?
You could make the lines different elements, that would do the trick:
.container {
padding: 40px;
}
.underlined {
border-bottom: 1px solid red;
padding-bottom: 0;
}
.skew-text {
transform: rotate(-90deg);
width: 100px;
}
.line {
transform: rotate(45deg);
}
<div class="container underlined">
<div class="skew-text">
<span class="text">
<div class="line">I'm a little</div>
<div class="line">teapot,</div>
<div class="line">short and</div>
<div class="line">stout</div>
</span>
</div>
</div>
update
It is going to be very hard.
I've created a function that splits the text into elements if a linebreak would normally happen by checking the element's height change if we append the words one by one, but if the length of the string isn't the same as we started with, it will not look pretty. You will want to find something to fix that.
It does create a baseline for the text on the bottom, but the height of the text is unpredictable for now.
var para = $('.text');
var lines = [];
para.each(function(){
var current = $(this);
var text = current.text();
var words = text.split(' ');
current.text(words[0]);
var height = current.height();
var lineNr = 0;
lines.push("");
for(var i = 1; i < words.length; i++){
current.text(current.text() + ' ' + words[i]);
if(current.height() == height){
lines[lineNr] += words[i] + " ";
}
if(current.height() > height){
height = current.height();
lineNr ++;
lines.push("");
lines[lineNr] += words[i] + " ";
}
}
$('.text').html("");
for(var line in lines){
var p = document.createElement('p');
$(p).html(lines[line]);
$('.text').append(p);
}
});
.container {
padding: 40px;
}
.underlined {
border-bottom: 1px solid red;
padding-bottom: 0;
}
.skew-text {
transform: rotate(-90deg);
width: 100px;
transform-origin: 50% 50%;
}
p {
margin:0;
padding:0;
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container underlined">
<div class="skew-text">
<span class="text">
I'm a little teapot, short and stout
</span>
</div>
</div>
You can get this result with CSS shapes. You can exclude from the span a triangular area, that makes it flow as you want.
The problem is that this feature doesn't have much support . See the snippet in Chrome , Safari or Opera.
.container {
padding: 40px;
}
.shape {
float: left;
width: 120px;
height: 120px;
-webkit-shape-outside: polygon(0 0, 100% 100%, 0% 100%, 0 0);
shape-outside: polygon(0 0, 100% 100%, 0% 100%, 0 0%);
}
.skew-text {
transform: rotate(-45deg);
width: 120px;
}
<div class="container">
<div class="skew-text">
<div class="shape"></div>
<span>I'm a little teapot, short and stout</span>
</div>
</div>
Related
So I'm not that great at programming sorry, but I use stack overflow and other sources to add site functionality and learn a little more each time. I'm using a Flexible Grid System to display my main content, specifically to re-arrange navigational buttons on the page.
This works great for me, but I've been using an ancient onMouseOver effect to display text when the user moves over an image button link and I'm not happy with the way it looks, and using flex creates issues with text legibility when the sizing gets small.
Ideally, I'd like to use a css overlay on my buttons so I can replace the image with text and format it to my liking. I've tried MANY different overlay solutions, but they all seem to use grid layouts and I can't get them to work with my flex layout for some reason.
Either the images get cropped, or the text can't completely cover the image due to layering issues, or (If I use the grid layout) I lose the flexible resizing capabilities that I really like on the site.
I'm hoping that this is a really simple fix. I'm assuming I need to add a container to my flex layout to place the content over the top of the image, but a hint to where to start would be really appreciated.
Here's a link to the buttons in the flex layout with no overlay:
https://megaauctions.net/megaflextest.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MEGA Main Flex Buttons</title>
<link rel="stylesheet" href="css/test-code-buttons-no-action-compact.css" type="text/css"/>
</head>
<body>
<div class="buttoncontainer">
<buttonhomea class="buttonhomea column grad-yellow">
<a href=#><img src="http://www.megaauctions.net/images/btn-auctions.gif" /></a>
</buttonhomea>
<buttonhomeb class="buttonhomeb column grad-babyblue">
<img src="http://www.megaauctions.net/images/btn-buying.gif" />
</buttonhomeb>
<buttonhomec class="buttonhomec column grad-salmon">
<img src="http://www.megaauctions.net/images/btn-selling.gif" />
</buttonhomec>
</div>
</body>
</html>
and the CSS...
.buttoncontainer {
margin: 0 auto;
top: 0px;
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: space-evenly;
text-align: center;
background: url('http://www.megaauctions.net/images/bkg-subs-deep.gif');
}
.column {
--columns: 12; /* number of columns in the grid system */
--width: var(--width-mobile, 0); /* width of the element */
padding: 0px;
margin: 9px 1px 2px 1px;
flex-basis: calc(var(--width) / var(--columns) * 94%);
}
/****** VIEWPORTS START ******/
#media (min-width: 350px) {
.column {
--width-mobile: var(--width-mobile);
--width: var(--width-mobile);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:157px;
}
}
#media (min-width: 512px) {
.column {
--width-tabletp: var(--width-tablet);
--width: var(--width-tabletp);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:157px;
}
}
#media (min-width: 650px) {
.column {
--width-tablet: var(--width-mobile);
--width: var(--width-tablet);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:300px;
}
}
#media (min-width: 900px) {
.column {
--width-desktop: var(--width-tablet);
--width: var(--width-desktop);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:315px;
}
}
/****** VIEWPORTS END ******/
.buttonhomea, .buttonhomeb, .buttonhomec {
--width-mobile: 12;
--width-tabletp: 4;
--width-tablet: 4;
--width-desktop: 4;
height: 100%;
}
.grad-yellow {
background-color:#f3d250;
background-image:linear-gradient(140deg,#f3d250,#EEA315);
}
.grad-babyblue {
background-color:#90CCF4;
background-image:linear-gradient(140deg,#90CCF4,#578FEE);
}
.grad-salmon {
background-color:#F78888;
background-image:linear-gradient(140deg,#F78888,#E7298C);
}
code in fiddle:
https://jsfiddle.net/mattcomps/gfb7k43h/
...and an overlay example of what I'm trying to achieve:
https://megaauctions.net/megaflextestbuttonaction.htm
<html>
<head>
<title>CSS Grid Cards</title>
<link rel="stylesheet" href="css/test-code-buttons-working-grid-compact.css" type="text/css"/>
</head>
<body>
<div class="container">
<section class="cards">
<a href="#" class="card grad-yellow">
<div class="card__overlay grad-yellow">
<div class="card__title">Auctions</div>
<div class="card__description">
Description goes here.
</div>
</div>
<div class="card__image" style="background-image:url('http://www.megaauctions.net/images/btn-auctions.gif')"></div>
<div class="card__content">
</div>
</a>
<a href="#" class="card grad-babyblue">
<div class="card__overlay grad-babyblue">
<div class="card__title">Buying</div>
<div class="card__description">
Description goes here.
</div>
</div>
<div class="card__image" style="background-image:url('http://www.megaauctions.net/images/btn-buying.gif')"></div>
<div class="card__content">
</div>
</a>
<a href="#" class="card grad-salmon">
<div class="card__overlay grad-salmon">
<div class="card__title">Selling</div>
<div class="card__description">
Description goes here.
</div>
</div>
<div class="card__image" style="background-image:url('http://www.megaauctions.net/images/btn-selling.gif')"></div>
<div class="card__content">
</div>
</a>
</section>
</div>
</body>
</html>
and the CSS...
.container{
background-image:url(http://www.megaauctions.net/images/bkg-subs-deep.gif)
}
.cards{
display:grid;
gap:1rem;
margin:0 auto;
padding:1rem;
}
#media (min-width:59em){
.cards{
grid-template-columns:repeat(2,1fr)
}
}
.card{
display:grid;
grid-template-columns:repeat(2,1fr);
grid-template-rows:300px 1fr auto;
color:#fff;
}
#media (min-width:31.25em){
.card{
grid-template-columns:160px (2,1fr);
grid-template-rows:1fr auto
}
}
#media (min-width:50em){
.card{
grid-template-columns:300px (2,1fr)
}
}
#media (min-width:59em){
.card{
grid-template-columns:160px(2,1fr)
}
}
.card__overlay{
min-height:300px;
display:none
}
#media (min-width:59em){
.card__overlay{
position:relative;
opacity:0;
display:grid;
justify-items:center;
align-items:center;
grid-column:1/4;
grid-row:1/3;
transition:opacity .3s ease-in-out}
}
.card:hover .card__overlay{
min-height:300px;
opacity:1
}
.card__content span{
display:inline-block;
border:2px solid #fff;
padding:1rem 3rem;
color:#fff;
}
.card__image{
grid-column:1/3;
grid-row:1/2;
min-height:157px;
background:no-repeat
}
#media (min-width:31.25em){
.card__image{
grid-column:1/4;
grid-row:1/3
}
}
.card__content{
grid-column:1/3;
grid-row:2/3;
padding:1.5rem}
#media (min-width:31.25em){
.card__content{
grid-column:2/4;
grid-row:1/2}
}
.grad-yellow {
background-color:#f3d250;
background-image:linear-gradient(140deg,#f3d250,#EEA315);
}
.grad-babyblue {
background-color:#90CCF4;
background-image:linear-gradient(140deg,#90CCF4,#578FEE);
}
.grad-salmon {
background-color:#F78888;
background-image:linear-gradient(140deg,#F78888,#E7298C);
}
code in fiddle:
https://jsfiddle.net/mattcomps/2eLzkwts/
Thanks!
Hope this answers your query
JSFIDDLE
what i have done is giving relative style to the parent buttonhomea .
then on hover showing the hidden div.
.card__overlay{
position: absolute;
width: 100%;
height: 100%;
top: 0;
opactity:0;
z-index:-1;
}
.buttonhomea{
position:relative;
}
.buttonhomea:hover .card__overlay{
opacity:1;
z-index:1;
}
and added html
<div class="card__overlay grad-yellow">
<div class="card__title">Auctions</div>
<div class="card__description">
Description goes here.
</div>
</div>
under each buttonhomea class
I have the following HTML structure:
<div class="products-container">
{foreach from=$cart.products item=product}
<div class="product" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}">
...
</div>
</div>
Now I have a javascript that can remove any div .product.
Is there a way to fade the deleted div out of the DOM to the right and animate the other divs 'moving up to the free space'?
A simple example
let btt = document.querySelector('button');
let products_cnt = document.querySelector('.products');
let products = document.querySelectorAll('.product');
products[0].addEventListener('transitionend', function() {
[...products].forEach((p) => p.parentNode.removeChild(p))
});
btt.addEventListener('click', function() {
this.setAttribute('disabled', 'disabled');
products_cnt.classList.add('products--delete');
})
div {
border: 1px #9bc solid;
height: 60px;
width: 200px;
margin: 10px;
color: #69A;
font: 1em system-ui;
}
button {
margin-bottom: 3em;
cursor: pointer; }
.products {
overflow-x: hidden; }
.product {
font-weight: bold;
transition: transform 1.5s 0s, opacity 1.25s 0s;
transform: translateX(0);
opacity: 1;
}
.products--delete .product {
transform: translateX(100vw);
opacity: 0;
}
<button type="button">Remove product/s</button>
<section class="products">
<div>Not a product</div>
<div class="product">Product</div>
<div class="product">Product</div>
<div>Not a product</div>
<div class="product">Product</div>
<div>Not a product</div>
</section>
Explanation: when you click the button the class .products--delete is added to the .products_container element: this starts a CSS transition over the .product elements.
Finally, when the transitionend event occurs on a single product element just remove from the DOM all products.
You can use css transitions in your CSS. The part of removing may be different for you. Please click the product to remove it.
let productsRy = Array.from(document.querySelectorAll(".product"));
productsRy.forEach((p,i)=>{
p.style.top = i * (3 + 1) * 16 +"px";
p.addEventListener("click",()=>{
container.removeChild(p);
productsRy = Array.from(document.querySelectorAll(".product"));
productsRy.forEach((p1,i1)=>{p1.style.top = i1 * (3 + 1) * 16 +"px";})
})
})
.products-container{position:relative;}
.product{
position:absolute;
padding:1em;
margin:.5em;
height:3em;
outline:1px solid; width:200px;
height:auto;
transition: all 1s;
}
}
<div class="products-container" id="container">
<div class="product" data-id-product="a" data-id-product-attribute="a">
product a
</div>
<div class="product" data-id-product="b" data-id-product-attribute="b">
product b
</div>
<div class="product" data-id-product="c" data-id-product-attribute="c">
product c
</div>
</div>
CSS really doesn't have the ability to modify an object in the same manner as JavaScript. you can do this easily.
$(".product").fadeTo("slow", 0.00, function(){
$(this).slideUp("slow", function() {
$(this).remove();
});
});
What is the best way of achieving this without any visible flickering and any wierdness?
The fiddle to start out: http://jsfiddle.net/35qec14b/2/
$('.element').on('click', function(e){
this.remove();
});
.element {
position:relative;
width: 200px;
margin:5px;
padding:20px;
cursor:pointer;
background: rgb(150,200,250);
transition:1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
(click to remove)
<div class="element">Element 1</div>
<div class="element">Element 2<br>Second line</div>
<div class="element">Element 3</div>
<div class="element">Element 4<br>Second line</div>
<div class="element">Element 5</div>
Note: the removed element must disappear instantly in this case, as it would appear in another location and we don't want it to be visible in two places simultaneously.
Ideas so far:
transform:translateY for ALL elements below the removed one (probably performance intensive for large lists)
Animate/transform margin of the first element below, from removed element's height to 0 (leveraging chained animations? step-start?)
Replace the removed element with a transparent placeholder and animate it's own height to 0
The best that comes to mind is to hide it, clone it for its new location (not showed here), and then animate its height
When one animate both margins, paddings and height, it becomes not so smooth, so I added an extra inner wrapper for the content so the animation only animates the height
$('.element').on('click', function(e) {
this.style.height = $(this).height()+ 'px';
this.classList.add('hide-me');
(function(el) {
setTimeout(function() {
el.remove();
}, 500);
})(this);
});
.element {
position: relative;
width: 200px;
overflow: hidden;
}
.element > div {
margin: 5px;
padding: 20px;
background: rgb(150, 200, 250);
}
.element.hide-me {
animation: hideme .5s forwards;
opacity: 0;
}
#keyframes hideme {
100% {
height: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
(click to remove)
<div class="element">
<div>
Element 1
</div>
</div>
<div class="element">
<div>
Element 2
<br>Second line
</div>
</div>
<div class="element">
<div>
Element 3
</div>
</div>
<div class="element">
<div>
Element 4
<br>Second line
</div>
</div>
<div class="element">
<div>
Element 5
</div>
</div>
Here's the jQuery approach using .animate()
$('.element').on('click', function(e){
var $this = $(this), $next = $this.next();
$next.css({
marginTop: $this.outerHeight(true)
}).animate({
marginTop: 5
}, 200);
$this.remove();
});
.element {
position:relative;
width: 200px;
margin:5px;
padding:20px;
cursor:pointer;
background: rgb(150,200,250);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
(click to remove)
<div class="element">Element 1</div>
<div class="element">Element 2<br>Second line</div>
<div class="element">Element 3</div>
<div class="element">Element 4<br>Second line</div>
<div class="element">Element 5</div>
And here is a CSS transition approach
$('.element').on('click', function(e){
var $this = $(this), $next = $this.next();
$next.css({
marginTop: $this.outerHeight(true)
});
setTimeout(()=>{
$next.addClass('hide');
setTimeout(()=>{
$next.css({marginTop: ''}).removeClass('hide');
}, 250)
}, 20);
$this.remove();
});
.element {
position:relative;
width: 200px;
margin:5px;
padding:20px;
cursor:pointer;
background: rgb(150,200,250);
}
.element.hide {
transition: margin-top 0.25s linear;
margin-top: 5px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
(click to remove)
<div class="element">Element 1</div>
<div class="element">Element 2<br>Second line</div>
<div class="element">Element 3</div>
<div class="element">Element 4<br>Second line</div>
<div class="element">Element 5</div>
Even though you are concerned that using transforms could have a negative performance, I think that the opposite is true.
Bear in mind that other solutions involve massive reflows, that probably are more performance intensive on the CPU (transforms most probably are handled by the GPU).
However, solving this with this with transforms is a little bit hard to code. Specially changing the amount of pixels that need to be moved, and injecting them into the style.
See a posible solution. I have used just JS to make it more portable.
If you are concern about performance, the result of findKeyframesRule could be assigned to a variable and reused.
document.addEventListener('DOMContentLoaded', setEvent, false);
function setEvent() {
var elements = document.getElementsByClassName('element');
for (var n = 0; n < elements.length; n++) {
elements[n].addEventListener('click', remove, false);
}
}
function remove(event) {
var current = event.currentTarget;
var elements = document.getElementsByClassName('move');
for (var n = 0; n < elements.length; n++) {
elements[n].classList.remove('move');
}
window.setTimeout(function() {
remove2(current);
}, 0);
}
function remove2(current) {
var next = current.nextElementSibling;
if (!next) {
return;
}
var top1 = current.offsetTop;
var top2 = next.offsetTop;
var diff = top2 - top1;
var newTransform = 'translateY(' + diff + 'px)';
var rule = findKeyframesRule('move');
var style = rule.cssRules[0].style;
style.transform = newTransform;
next.classList.add('move');
current.style.height = '0px';
}
function findKeyframesRule(rule) {
// gather all stylesheets into an array
var ss = document.styleSheets;
// loop through the stylesheets
for (var i = 0; i < ss.length; i++) {
var ss1 = ss[i];
// loop through all the rules
if (!ss1.cssRules) {
alert('you are using Chrome in local files');
return null;
}
for (var j = 0; j < ss1.cssRules.length; j++) {
// find the keyframe rule whose name matches our passed parameter
if (ss1.cssRules[j].type == window.CSSRule.KEYFRAMES_RULE && ss1.cssRules[j].name == rule)
return ss1.cssRules[j];
}
}
return null;
}
.element {
position: relative;
width: 200px;
overflow: hidden;
}
.element>div {
margin: 5px;
padding: 20px;
background: rgb(150, 200, 250);
}
.move,
.move~.element {
animation: move 2s;
}
#keyframes move {
from {
transform: translateY(60px);
}
to {
transform: translateY( 0px);
}
}
(click to remove)
<div class="element">
<div>
Element 1
</div>
</div>
<div class="element">
<div>
Element 2
<br>Second line
</div>
</div>
<div class="element">
<div>
Element 3
</div>
</div>
<div class="element">
<div>
Element 4
<br>Second line
</div>
</div>
<div class="element">
<div>
Element 5
</div>
</div>
Here i am implementing an Image slider
My problem is when i hover my image slider i want to stop my css transition property.
I tried using addclass and removeclass but failed
Here is my code
HTML
<div id="container">
<img src="http://worksheetgenius.com/Next_button.jpg" width="106px;" id="right"/>
<img src="http://worksheetgenius.com/Previous_button.jpg" width="106px;" id="left"/>
<div id="slider">
<div id="slide1" class="slide transition">
<img src="http://s.cghub.com/files/Image/030001-031000/30883/37_max.jpg"/>
</div>
<div id="slide2" class="slide transition">
<img src="http://www.f-16.net/attachments/83_1093_207.jpg" />
</div>
<div id="slide3" class="slide transition">
<img src="http://www.sportbikes.net/forums/attachments/fz6/37654d1111746148-all-fz6-riders-show-us-your-bike-imag0005-edited-downscaled.jpg" />
</div>
<div id="slide4" class="slide transition">
<img src="http://3.bp.blogspot.com/-fpTz_1UegJM/TZ6eQWXTueI/AAAAAAAAASY/TsYJ5xZyixQ/s1600/banner_239.jpg" />
</div>
</div>
</div>
CSS
#slider
{
overflow:hidden;
height:363px;
position:absolute;
left:180px;
top:159px;
padding:0px;
margin:0px;
background: url("header_bg.jpg") repeat-x scroll 0 0 #FFFFFF;
width:1000px;
}
#slide1
{
position:absolute;
left:0px;
z-index:1;
}
.slide
{
position:absolute;
left:1000px;
}
.transition
{
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.notransition
{
-webkit-transition: none;
transition: none;
}
#right
{
position:absolute;
top: 287.5px;
right: 127px;
z-index: 99;
}
#left
{
position:absolute;
top: 287.5px;
left: 127px;
z-index: 99;
}
Script
var t=setInterval(function(){$("#right").click()},5000);
$(document).ready(function()
{
var present=1;
var next=2;
var total_slide=document.getElementById("slider").childElementCount;
$("#right").click(function()
{
present_slide="#slide"+present;
next_slide="#slide"+next;
$(present_slide).css("left","1000px");
$(next_slide).css("left","0px");
present++;
next++;
if(present==(total_slide+1))
{
present=1;
next=2;
for(i=1;i<=total_slide;i++)
{
$("#slide"+i).css("left","1000px");
}
$("#slide1").css("left","0px");
}
});
$("#left").click(function()
{
if(present==1)
{
next_slide="#slide"+total_slide;
present_slide="#slide"+present;
$(present_slide).css("left","1000px");
$(next_slide).css("left","0px");
present=total_slide;
next=1;
}else
{
next_slide="#slide"+(present-1);
present_slide="#slide"+present;
$(present_slide).css("left","1000px");
$(next_slide).css("left","0px");
present--;
next--;
}
if(next==0)
{
present=(total_slide-1);
next=total_slide;
}
});
$(".slide").on('mouseenter',function()
{ $(this).removeClass('transition').addClass('notransition');});
$(".slide").on('mouseleave',function()
{$(this).removeClass('notransition').addClass('transition');});
});
In the above provided code i used to classes transition and no transition.
I also tried with CSS as follows
.slide:hover
{
-webkit-transition: none;
transition: none;
}
I was doing a similar idea and I ended up using this cycle plugin for jquery Malsup Cycle. I then used this piece of code but you can find all of the options at the link above.
$(document).ready(function(){
$('#slider').cycle({
fx: 'scrollLeft',
speed: 1000,
timeout: 5000,
pause: 1
});
});
Setting the pause flag to one gets your desired functionality where it will stop animating on hover. I hope this helps!
HTML
<div id = "slider">
<div>
Slide 1
</div>
<div>
Slide 2
</div>
<div>
Slide 3
</div>
<div>
Slide 4
</div>
</div>
You just need to link to the plugin in the html and this should provide the desired functionality as I see it. You can put whatever content you want in the divs. I used a picture of our clients' logos with a short description as a banner on our company's page.
EDIT: I changed the selector to match the id that you used. HTML added.
i have one div and on below of that div am showing one div with the iframe which loads the html page in same page dynamicaly..but what happens is the div with an iframe overlay the upper division as the iframe containg html haev long height..so can any one please tell me how i can put the div which contains iframe below the upper div tag regardless of which content loaded in the iframe.and also i want to make it look same in chrome as well as mozila..
following is my structure...
<div class="row-fluid">
<div class="span3" id="media_select">
<label
style="float: left; padding-top: 5px; padding-bottom: 10px; padding-right: 10px; padding-left: 22px"> Media
</label><select style="width:125px" name="mediatype" id="mediatype"
data-placeholder="- Select Ad Type -" class="chzn-select"
tabindex="4">
<option value="0">Select All</option>
<%
List<mediatype> media_typelist = mediatypeLocalServiceUtil
.getAllMediaType();
for (mediatype media_typelistitem : media_typelist) {
%>
<option value=<%=media_typelistitem.getPrimaryKey()%>><%=media_typelistitem.getMedianame()%></option>
<%
}
%>
</select>
</div>
<div class="span3">
</div>
//This is the div which i want to fixed just below the upper division
<div class="bordercolor" id="mydiv" style="display: none; text-align: center">
<IFRAME SRC="" id="reportpreview" style="text-align: center;"
marginheight="0" frameborder="0" onLoad="sizeFrame();"></iframe>
</div>
height of iframe assigned dynmaiclly within following script:-
function sizeFrame() {
var F = document.getElementById('reportpreview');
if(F.contentDocument) {
F.height = F.contentDocument.documentElement.scrollHeight+30; //FF 3.0.11, Opera 9.63, and Chrome
} else {
F.height = F.contentWindow.document.body.scrollHeight+30; //IE6, IE7 and Chrome
}
}
///css for report preview id //an Iframe
#reportpreview {
float:center;
margin-top:10%;
margin-bottom:10%;
zoom: 1.2;
-moz-transform: scale(1.2);
-moz-transform-origin: 2 0;
-webkit-transform: scale(1.2);
-webkit-transform-origin: 2 0;
width: 720px;
min-height: 37px;
}
#reportpreview {
clear:left;
float:center;
margin-top:10%;
margin-bottom:10%;
zoom: 1.2;
-moz-transform: scale(1.2);
-moz-transform-origin: 2 0;
-webkit-transform: scale(1.2);
-webkit-transform-origin: 2 0;
width: 720px;
min-height: 37px;
}
add clear:left to iframe div