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
Related
i want to move an img by button click. I know this question has been asked a lot, but i couldnt use them.
Heres the relevant HTML:
<button class="ggE" (click)="gegenEnemy(chosenHero, actualEnemy);moveFist(); ...
<div class="col">
<img id="img" class="fist" src="...">
This is the function (typescript):
moveFist(): void {
document.getElementById('img').classList.add('fist');
}
And my css, which makes the picture move from left to right:
.fist {
width: 70px;
height: 70px;
position: relative;
animation-name: example;
animation-duration: 2s;
}
#keyframes example {
0% {left:50px; top:20px;}
100% {left:450px; top:20px;}
}
So why cant i connect it with a button click?
First of all validate your HTML code
<button class="ggE" onclick="moveFist();">button</button>
<div class="col">
<img id="img" class="" src="https://via.placeholder.com/150">
<div>
Edits:
function moveFist(){
document.getElementById("img").classList.remove("fist");
// element.offsetWidth = element.offsetWidth;
// Do this instead:
void img.offsetWidth;
document.getElementById("img").classList.add("fist");
}
set the width of img by it's offset width that is,
img.offsetWidth;
Can you something like this ?
function moveFist(){
document.getElementById("img").classList.remove("fist");
// element.offsetWidth = element.offsetWidth;
// Do this instead:
void img.offsetWidth;
document.getElementById("img").classList.add("fist");
}
img{
width: 70px;
height: 70px;
position: relative;
left:50px;
animation-duration: 2s;
top:20px;
}
.fist{
position:relative;
animation-name: example;
}
#keyframes example {
0% {left:50px; top:20px;}
100% {left:450px; top:20px;}
}
<button class="ggE" onclick="moveFist()">button</button>
<div class="col">
<img id="img" class="" src="https://via.placeholder.com/150">
<div>
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>
This is the configuration:
#media print {
body {
visibility: hidden;
}
#printhtml {
visibility: visible;
left: 0;
top: 0;
}
}
And yet other divs on my page, apart from printhtml, are showing up when printing the entire page. I tried setting those divs to display:none and it worked. But the space they used to occupy (now blank) continues to exist and the print output always has 3 blank pages.
What am I missing here?
Btw, below is the other section of the page with the script and HTML codes. The divs stubborn1, stubborn2, and stubborn3 are the ones continuing to show up. Again, they disappear when I set them to display:none but are replaced with blank spaces when printing, which shouldn't be the case.
<script>
function myFunction() {
window.print();
}
</script>
<div style="width:78%; float:left;">
<div id="printhtml">
I want to print this page
</div>
<hr>
<a title="View Page in PDF" href="/pdf-URL"><img src="/image1.png" /></a> <img src="/print.png" />
</div>
<div id="stubborn1" style="width:20%; float:right;"><img src="/image2.jpg" style="position:fixed; margin-top:-70px; z-index:21;" />
</div>
<div id="stubborn2" ><img src="/image3.png" style="position:fixed; margin:215px 0px 0px 20px; z-index:21;" /></div>
<div id="stubborn3" ><img src="/image4.png" style="position:fixed; margin:215px 0px 0px 122px; z-index:21;" />
</div>
Don't hide the entire body
Give the body contents in the div tags and give the class as 'hide'
and use this
#media print {
.hide {
display:none;
}
#printhtml {
visibility: visible;
left: 0;
top: 0;
}
}
I'm trying to make an animated menu that when I hover over it , the background (or image) reduces and at the same time the text expands.
Thats my style sheet :
.menus {
float: left;
background-image: url(images/menus_bg.png);
width: 208px;
height: 283px;
}
.menusimg {
width: 208px;
height: 283px;
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
background-image: url(images/menu1.png);
}
.menusimg:hover {
background-size: 80% 80%;
}
.menusimg, .menusimg:hover {
-webkit-transition: background-size 0.2s ease-in ;
}
.menustxtbox {
font-family: MP;
padding-top: 240px;
width: 208px;
height: 283px;
color: #4c4c4c;
font-size: large;
text-shadow: gray 0.1em 0.1em 0.2em;
}
.menustxtbox:hover {
padding-top: 235px;
font-size: x-large;
color: #4fa3f9;
}
.menustxtbox, .menutxtbox:hover {
-webkit-transition:font-size 0.1s linear;
-moz-transition:font-size 0.1s linear;
}
and the html :
<div class="menus">
<div class="menusimg">
</div>
<div class="menustxtbox">
Text
</div>
</div>
Any ideas? A simple Java script or anything that will solve this problem? :)
Thank you in advance ^^
I second what ntgCleaner said.
In addition you can use:
$('.menus').hover(function(){
$('.menusimg').addClass('active');
$('.menustxtbox').addClass('active');
}, function(){
$('.menusimg').removeClass('active');
$('.menustxtbox').removeClass('active');
});
And your css would have:
.menusimg.active, .menusimg.active{
-webkit-transition: background-size 0.2s ease-in ;
}
etc.
Well, without any code to see that you've done anything or tried anything with javascript, I would suggest this:
Change your CSS to make real sizes of font size first:
.menustxtbox {
font-size:40px;
}
then make some jquery
$('.menus').hover(function(){
$('.menusimg').animate({width: "100px"});
$('.menustxtbox').animate({fontSize: "90px"});
}, function(){
$('.menusimg').animate({width: "208px"});
$('.menustxtbox').animate({fontSize: "40px"});
});
Then delete your :hover css styles
And if you want to use hover, I would suggest looking into hoverintent
UPDATE for a comment below
To do this for each separate menu item, you will have to name things a certain way. Here's an example.
HTML
<div class="menu">
<div class="menuItem" id="menu1">
<div class="menusimg"></div>
<div class="menustxtbox"></div>
</div>
<div class="menuItem" id="menu2">
<div class="menusimg"></div>
<div class="menustxtbox"></div>
</div>
<div class="menuItem" id="menu3">
<div class="menusimg"></div>
<div class="menustxtbox"></div>
</div>
</div>
Then with jQuery, you will have to use $(this) and .children()
$('.menuItem').hover(function(){
$(this).children('.menusimg').animate({width: "100px"});
$(this).children('.menustxtbox').animate({fontSize: "90px"});
}, function(){
$(this).children('.menusimg').animate({width: "208px"});
$(this).children('.menustxtbox').animate({fontSize: "40px"});
});
When you use $(this), you will do whatever you want to the specific thing you are trying to use. Then you just go up or down from there using parent or children to do something to either of those.
Basically I'm making a navigation bar and due to Jquery doing a lot of resizing to make a website look 'pretty' I don't want to use a horizontal list and so each button is created like so:
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
(yes they're all image buttons for good reason)
but the only problem is they're fixed and set to "top 0" at the top of the page and as a result cannot sit next to each other but rather overlap, any idea on how I can I still keep the position to fixed and they top to 0 yet keep them next to each other?
HTML
<div id="top">
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
</div>
CSS
#top a.button { position: fixed; top: 0; padding: 12px; background: url('glacial_ice.jpg'); text-decoration: none; color: black; border-radius: 0px 0px 25px 25px; }
#top { position: relative; top:0; padding-left: 25px; }
Init function (runs on $(document).ready())
$('a.button').animate({
height: '+=5px',
}, 20, function() {
$('a.button').animate({
opacity: 0.6,
height: '-=5px',
}, 20);
});
Thanks
Put them all in a container, i.e. id="header", give the header position:fixed;top:0;etc...
Then, for each of the link/buttons give them:
position:relative;display:inline-block;float:left;
if you want them centered, then in the #header use text-align:center; and remove float:left from the links
So the container will be fixed, but the buttons inside will be relative and not overlap.
hope this helps!
very crude example
http://jsfiddle.net/6SCTZ/
<div id="header">
<div class="button">button1</div>
<div class="button">button2</div>
<div class="button">button3</div>
</div>
CSS:
#header { position:fixed;top:0;width:100%;height:30px;background:black; text-align:center }
.button {position:relative;display:inline-block;color:white;margin:0 5px 0 5px;}
Just put whatever elements need to be fixed within a container element (in this case, I'll use a div with an ID of "top_fixed").
Consider the following html:
<div id='top_fixed'>
<a href='http://google.com'>Google</a>
<a href='http://yahoo.com'>Yahoo</a>
</div>
<div id='tall'></div>
Now, the following CSS:
a { display: inline; }
#top_fixed { position: fixed; top: 0; left: 0; width: auto; }
#tall {height: 2000px; background: #000;}
DEMO: http://jsfiddle.net/mHKNc/1/