Im looking for a way to make the content div expandable on click of the iframe to display the iframe content correctly, the code is:
<div id="content">
<div id='outerdiv'>
<iframe src="http://mywebsite.com" id='inneriframe' scrolling="no"></iframe>
</div>
</div><!-- end of content -->
CSS is
#content
{
width: 790px;
height:auto;
padding: 5px 55px 0;
}
#outerdiv
{
width:790px;
height:446px;
overflow:hidden;
position:relative;
}
#inneriframe
{
position:absolute;
top:-268px;
left:-230px;
width:1280px;
height:1198px;
}
Any suggestions would be appreciated.
At first we must cleanup your CSS code:
#iframe{
position: absolute;
width: 100px;
height: 100px;
}
Now we must wrote some in Jquery:
var iframeDoc = $('#iframe').contents().get(0);
var start = "big";
$(iframeDoc).bind('click', function( event ) {
if(start == "big"){
$("#iframe").animate({width:"100%", height:"100%"}, 1000);
return start = "small";
} else if(start == "small") {
$("#iframe").animate({width:"100px",height:"100px"},1000);
return start = "big";
}
});
Use:
<iframe id="iframe" src=""></iframe>
JSFiddle: http://jsfiddle.net/YuWSy/
Related
i have a sticky transparent header using the following css code on my website www.obviagency.com
CSS CODE:
#site-header-inner {
height:0px;
z-index:170;
margin:0 auto;
width:100%;
position:fixed;
top:0;
margin-top:10px;
}
i would like to change the background color on scroll to white. can someone please help me because nothing i've tried works:/
thank you
You would have to use JavaScript with a scroll event listener. I used blue as an example so you can see the change and added a transition property to the header so it would transition smoothly.
let header = document.getElementById('site-header-inner');
document.addEventListener('scroll', function() {
// Get the scroll position
let scrollPos = window.pageYOffset;
if ( scrollPos > 100 ) {
header.style.backgroundColor = "white";
} else {
header.style.backgroundColor = "blue";
}
});
#site-header-inner {
height:50px;
z-index:170;
margin:0 auto;
width:100%;
position:fixed;
top:0;
margin-top:10px;
background-color: blue;
transition: all 0.3s;
}
#section {
height: 1000px;
}
<header id="site-header-inner">
</header>
<section id="section">
</section>
Inside of #container (position:relative) I have 2 divs: both are 50% wide, the #first one is very tall (position:relative) and the #second one is at least 2000px tall.
Is there any way to make #second stop scrolling when it's bottom reached, but keep scrolling the other content? Would be great without making extra parent div for it.
Fiddle: https://jsfiddle.net/Moor/ha4zybpb/
#container{
position:relative;
}
#first{
width:50%;
background:#333;
height:10000px;
}
#second{
position:absolute;
right:0;
top:0;
width:50%;
height:2000px;
background:limegreen;
}
<div id="container">
<div id="first"></div>
<div id="second"></div>
</div>
A jquery "sticky" solution..
https://jsfiddle.net/cusjptLr/4/
var sh = $('#second').height();
$(window).scroll(function(){
if (($(window).scrollTop() + $(window).innerHeight()) >= sh) {
$('#second').addClass("sticky");
}
});
#second.sticky {
position: fixed;
bottom: 0;
top: initial;
}
One way to achieve this would be to use position:sticky - although please be sure to check that the browser compatability for it meets your requirements.
*{margin:0;padding:0;}
#first{
background:#333;
display:inline-block;
height:10000px;
vertical-align:bottom;
width:50%;
}
#second{
background:linear-gradient(0deg,#f00,#090);
bottom:0;
display:inline-block;
height:2000px;
position:sticky;
vertical-align:bottom;
width:50%;
}
<div id="container"><div id="first"></div><div id="second"></div></div>
This is not a complete answer, but it might help you on your way -
check the scroll position and viewport height, and compare it to the height of the second element -
check this fiddle for my example. done with jquery
updated fiddle
$( document ).ready(function() {
console.log( "ready!" );
var secondHeight = $('#second').height();
console.log(secondHeight);
var stopper = 0;
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
var viewportHeight = $(window).height();
// Do something
console.log(scroll+viewportHeight);
if(secondHeight <= scroll+viewportHeight) {
console.log('stop it here');
stopper = 1;
} else {
stopper = 0;
}
console.log(stopper);
if(stopper == 1) {
$('#second').css('position','fixed');
console.log('making it fixed');
} else {
$('#second').css('position','absolute');
console.log('making it absolute');
}
});
});
Like many others I wanted to show an enlarged image when hovering over a thumbnail. I used a hover selector to enlarge the image which worked fine.
Instead of having the image shrink when I moved off the image, I wanted the image to shrink when I moved off area that was occupied by the original thumbnail which was 100px X 100px.
I put a div around it, sized it and put the :hover on it rather then the image. I thought because the enlarged image was positioned absolute it wouldn't enlarge the div.
The image still enlarges but it does not shrink unless the cursor moves off the enlarged image.
div.hov:hover >.thumbnail {
position:fixed;
top:100px;
left:50px;
width:800px;
height:auto;
display:block;
z-index:999;
}
div.hov{
width:101px;
height:101px;
float:left;
overflow:visible;
margin: 10px;
}
<p>
<div class="hov"><img src="./gm1.png" class="thumbnail" height="100" width="100" /></div>
<div class="hov"><img src="./gm2.png" class="thumbnail" height="100" width="100" /></div>
</p>
Is there any way to achieve this? The hosted version is here.
one way to do this is to show a new modal div on top of the original image. that way your original div doesn't enlarge. however, you'll need to use some javascript or jQuery
heres a fiddle to demonstrate: http://jsfiddle.net/k3oq1899/1/
don't mind the code, I put it together very quickly for you, but you can clean it up a bit.
html
<div class='image'>
<img src='http://www.online-image-editor.com//styles/2014/images/example_image.png'/>
</div>
<div id='modal'></div>
css
.image {
display: inline-block;
width: 100px;
height: auto;
}
img {
width: 100%;
height: 100%;
display: inline-block;
}
#modal {
display: none;
position: absolute;
top: 0;
left: 0;
}
jquery
$(function() {
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function (event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
if($('#modal').css('display') != 'none') {
$('#modal').css({
top: currentMousePos.y,
left: currentMousePos.x + 12
});
}
});
$('.image').on('mouseover', function() {
var image = $(this).find('img');
var modal = $('#modal');
$(modal).html(image.clone());
$(modal).css({
top: currentMousePos.y,
left: currentMousePos.x + 12
});
$(modal).show();
});
$('.image').on('mouseleave', function() {
$(modal).hide();
});
});
Instead of enlarging the image, think of actually creating two images, one big and one small one. Once you hover over the small one, you can make the big image visible or invisible when moving out of it.
use absolute positions, display:block and display:none and check if the z-index is right.
But is this really necessary?
The hovering does not seem convenient to me....
You can put an invisible DIV with same dimensions over the thumbnail, put it on top with z-index and use it for the hover-event. But you need a few lines of javascript (with jQuery in my example).
HTML
<div class="box">
<div class="thumbnail">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="">
<div class="overlay"></div>
</div>
<div class="large-image">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="">
</div>
</div>
Javascript (jQuery)
$('.overlay').hover(
function () {
$(this).closest('.box').addClass('show-large-image');
},
function () {
$(this).closest('.box').removeClass('show-large-image');
});
CSS
.box {
padding: 200px;
}
.thumbnail {
position: relative;
display: inline-block;
border: 1px solid #888;
}
.overlay {
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.large-image {
display: none;
position: absolute;
top: 0;
left: 0;
width: 500px;
}
.large-image img {
width: 100%;
}
.box.show-large-image .large-image {
display: block;
}
Example: http://jsfiddle.net/dx0d1ceh/
I'm trying to set a max-height to an image. It works well in Safari and Chrome, but not in Firefox/Opera/IE. Now I read that html and body heights should be put at 100%, and it did work when I used jsfiddle. However, it doesn't work in my page (memo-designs.com/portfolio.php).
The following is the source of the page:
<!DOCTYPE html>
<html>
<head>
<title>memodesigns</title>
<link rel='stylesheet' href='style/stylesheet.css'>
<script type = 'text/javascript'>
function displayImage(image, link) {
document.getElementById('img').src = image;
document.getElementById('mylink').href = link;
}
function displayNextImage() {
if (x < images.length-1){
x++;
} else {
x = 0;
}
displayImage(images[x], links[x]);
}
function displayPreviousImage() {
if (x > 0){
x--;
} else {
x = images.length-1;
}
displayImage(images[x]);
}
function startTimer() {
setInterval(displayNextImage, -1);
}
var images = [], links = [], x = 0;images[0] = "http://memo-designs.com/items/doublek-01.png"
links[0] = "http://memo-designs.com/items/doublek-01.png"
images[1] = "http://memo-designs.com/items/memodesigns.png"
links[1] = "http://memo-designs.com/items/memodesigns.png"
</script>
</head>
<body style = 'background-color: #000000'><div id = 'menucontainer'>
<div id = 'menu'>
<p>
<ul>
<li><a class = 'menu' href = '/'>HOME</a></li>
<li><a class = 'menu' href = 'about.php'>ABOUT</a></li>
<li><a class = 'menu' href = 'portfolio.php'>PORTFOLIO</a></li>
<li><a class = 'menu' href = 'rates.php'>RATES</a></li>
<li><a class = 'menu' href = 'contact.php'>CONTACT</a></li>
</ul>
</p>
</div>
</div>
<div id = 'contentcontainer' style = 'padding-top: 0%; max-height: 100%; overflow: hidden; background-color: #000000'>
<p>
<img id= 'img' src = 'http://memo-designs.com/items/doublek-01.png' style = 'max-height: 100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;'>
<img class = 'arrow' onclick = 'displayPreviousImage()' id= 'img' src = 'style/graphics/larrow.png' style = 'position: absolute; left: 0; top: 40%;'>
<img class = 'arrow' onclick = 'displayNextImage()' id= 'img' src = 'style/graphics/rarrow.png' style = 'position: absolute; right: 0; top: 40%;'> </p>
</div>
</body>
</html>
And the css stylesheet (only part of it is shown here):
*{
margin: 0;
padding: 0;
}
html{
margin: 0;
min-width: 100%;
height: 100%;
min-height: 100%;
}
body{
margin: 0px;
background-color: #f3f4f4;
min-width: 100%;
height: 100%;
min-height: 100%;
}
Would appreciate any help as to what I'm doing wrong :)
First of all I recommend you to start using a CSS-Reset like Normalize.css . It makes browsers render all elements more consistently and in line with modern standards.
Your HTML notation might also cause inconsistency across browsers. Turn things like <div id = 'menu'> into <div id="menu">. This makes it also more readable IMHO.
Inline style attributes make maintaining the pages a pain and may override things you didn't intent to. They also need to be applied to every single element thus also increasing download time. Using classes / id's is the way to go. Also pseudo-elements can't be used with inline styles. I advice to only use them for quick changes during development. I use the element inspector from Chrome / Firefox to change things quickly and instantly see how the changes look, copy/pasting the edits afterwards.
So, make sure to put all css into your stylesheet. It's also considered as a best practice for maintainability and better download speed (minify the files for production) of your pages.
You surely have heard about jQuery before. Try using it. jQuery makes developing things like image sliders a breeze (once you understand the syntax, but it's a low learning curve). Furthermore, there are LOTS of ready-to-use plugins for jQuery.
Another "good practice" is to put your javascripts at the very end of your document just before the </body> tag. Read more about this here and here.
Ok, enough tips. Let's get the hands dirty:
The HTML Part:
<!DOCTYPE html>
<html>
<head>
<title>memodesigns</title>
<link rel="stylesheet" href="/assets/css/normalize.css">
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
<div id="menuContainer">
<div id="menu">
<p>
<ul>
<!-- Instead of writing in CAPITALS use the text-transform:uppercase; css property -->
<li><a class="menu" href="/">Home</a></li>
<li><a class="menu" href="about.php">About</a></li>
<li><a class="menu" href="portfolio.php">Portfolio</a></li>
<li><a class="menu" href="rates.php">Rates</a></li>
<li><a class="menu" href="contact.php">Contact</a></li>
</ul>
</p>
</div>
</div>
<div id="contentContainer">
<p>
<!-- NOTE: Use IDs only once, else use classes to share css styles -->
<img id="img" src="http://memo-designs.com/items/doublek-01.png">
<img class="arrow left" src="style/graphics/larrow.png" onclick="displayPreviousImage()">
<img class="arrow right" src="style/graphics/rarrow.png" onclick="displayNextImage()">
</p>
</div>
<!-- Put the JavaScript at the end of the document just before the closing body tag -->
<script>
var images = [], links = [], x = 0,
baseUrl = "http://memo-designs.com/items/";
images[0] = baseUrl + "doublek-01.png";
links[0] = baseUrl + "doublek-01.png";
images[1] = baseUrl + "memodesigns.png";
links[1] = baseUrl + "memodesigns.png";
function displayImage(img, link)
{
document.getElementById('img').src = img;
document.getElementById('mylink').href = link;
}
function displayNextImage()
{
if (x < images.length-1) x++;
else x = 0;
displayImage(images[x], links[x]);
}
function displayPreviousImage()
{
if (x > 0) x--;
else x = images.length-1;
displayImage(images[x]);
}
function startTimer()
{
setInterval(displayNextImage, -1);
}
</script>
</body>
</html>
...and the CSS:
/* Assuming you'll use a CSS-Reset */
body {
background-color: #f3f4f4;
font:
...
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#menuContainer { ... }
#menu { ... }
#menu ul { ... }
/* Making the menu labels all UPPERCASE */
#menu ul > li {
text-transform: uppercase;
}
#contentContainer {
background-color: #000;
padding-top: 0;
overflow: hidden;
/* IMPORTANT: Set a fixed pixel height here to make the images use up the given space */
height: 200px; /* change 200 to your needs */
}
#img {
display: block;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#contentContainer .arrow {
position: absolute;
top: 40%;
}
#contentContainer .arrow.left {
left: 0;
}
#contentContainer .arrow.right {
right: 0;
}
Ok, try out the suggestions and the code example. Tell us if and what helped.
Good luck and happy coding!
Background
I am working on a browser-based UI that needs to fill the entire screen without any scrolling. The basic layout is like this:
What I want to achieve
The title div should has a fixed height (2em) and the rest 4 divs/panels should devide the remaining space of the screen according to percentages I set.
What I've tried
The best solution I've found is " CSS - How to force elements to 100% of remaining/available space of parent element without extending beyond it? ", which involves using a container div with position:absolute. This works across all browsers, but requires some additional DIVs to be created. Also, panel 2 can sometimes be forced to start on the next line due to inaccuracies in percentage widths.
My previous solution was based on CSS3 Flexbox, but the model is flawed as it does not resize child elements that have a percentage height after stretching the container boxes (at least Chrome doesn't). (The newer flex-* attributes are only implemented in Chrome and the standard is still changing.)
I have also tried the calc() function; however, it's not yet implemented in Chrome. Also, it requires hard-coding the height of the title element in two places, which I've been trying to avoid.
Edit:
What am I looking for
Just to be clear, I am not asking for a perfect/pure-CSS solution (as none seems to exist). If anyone can suggest any jQuery plug-in or open-source framework that can do this, it would be good enough for me.
In addition, I don't require any backwards compatibility with browser releases before 2012. (As long as the solution uses technology that is implemented in some browser and is going to be implemented by Firefox and Chrome in the near future, it's good enough for me.)
A little something thrown together:
http://jsfiddle.net/gDTGn/2/
Here is a pure CSS version:
http://jsfiddle.net/t0nyh0/KHzsg/63/
The trick to this technique is using position:absolute and using top, bottom, and height to create a fixed header with expanding panels. It is also really important to use:
box-sizing: border-box;
-moz-box-sizing: border-box;
to make the height and width calculations consistent across browsers. Tested and works in IE9, Firefox, and Chrome.
Pure CSS solution: http://jsfiddle.net/ehqcx/7/embedded/result/
This assumes you set width that don't sum up than more than 100%, the small gap at the right side can usually be fixed by using the same background or the background of the page. An alternative is to introduce some Javascript that sets the width of the last panel correctly, but that should be some trivial jQuery code... $("#panels .small:last").width(browser width - other small panels);
Should work correctly for the height, think away the jsFiddle header which takes away some height...
Edit:
Meh, seems the #title is bugging me... http://fiddle.jshell.net/ehqcx/7/show/light/
ECMAScript is the way to go, leaving my answer in place because of the other simplicity... :(
HTML:
<div id="content">
<div id="title">Title!</div>
<div id="panels">
<div id="panel0" class="small">0</div>
<div id="panel1" class="small">1</div>
<div id="panel2" class="small">2</div>
<div id="panel3" class="wide">3</div>
</div>
</div>
CSS:
* { margin, padding: 0px; }
#content { background-color: black; }
#title { background-color: red; }
#panels { background-color: orange; }
#panel0 { background-color: purple; }
#panel1 { background-color: brown; }
#panel2 { background-color: orange; }
#panel3 { background-color: green; }
html, body, #content, #panels { max-height: 100%; height: 100%; max-width: 100%; width: 100%; }
#panels .small { float: left; }
#panels .wide { clear: both; }
#title { height : 2em; }
#panels .small { height: 75%; }
#panels .wide { height: 25%; }
#panel0, #panel1, #panel2 { width: 33.33%; }
It's possible using the new CSS3 flexbox model. It was basically designed to solve the problem you are facing.
Here is a simple example:
CSS:
*{margin:0 padding:0;}
html{height:100%;}
body{height:100%; display:box; box-orient:vertical;}
body > div {box-flex:1; border:1px solid black;}
.header {box-flex:0; height:4em;}
.content {
display: box;
box-orient: horizontal;
}
.content div {
box-flex: 1;
border:1px solid black;
}
HTML:
<html>
<body>
<div class="header">Title</div>
<div class="content">
<div>Panel 0</div>
<div>Panel 1</div>
<div>Panel 2</div>
</div>
<div>Panel 3</div>
</body>
</html>
It has good support in Chrome, Safari, and Firefox, with planned support in IE.
edit 2:
Tested it in
Chrome/Safari: some 1 or two pixel failure, because of percent calculations
FireFox: Perfect
IE9: Perfect
Opera: Can't have decimal places in percentage width values. This is bad
lte IE8: Does not support Array reduce function. One has to make one up (like from here: Array.reduce), Then it works at least in IE8
edit 1:
I added horizontal layout and window resize function
I've fiddled around a bit:
This is just a demonstration: To have a full fledged application you have to add the programming for the horizontal layout. But it's start
http://jsfiddle.net/HerrSerker/PmHtf/
Here is the code
HTML
<div class="full-stretch">
<div class="flex-layout flex-layout-vertical">
<div class="flex-layout-fixed" style="height:50px; text-align: center">
<div class="padding">Title</div>
</div>
<div class="flex-layout-consume flex-layout-consume-3" style="text-align: center">
<div class="flex-layout flex-layout-horizontal">
<div class="flex-layout-consume flex-layout-consume-1" style="text-align: center">
<div class="padding">Panel 0</div>
</div>
<div class="flex-layout-consume flex-layout-consume-1" style="text-align: center">
<div class="padding">Panel 1</div>
</div>
<div class="flex-layout-consume flex-layout-consume-1" style="text-align: center">
<div class="padding">Panel 2</div>
</div>
</div>
</div>
<div class="flex-layout-consume flex-layout-consume-1" style="text-align: center">
<div class="padding">Panel 3</div>
</div>
</div>
</div>
CSS
.full-stretch {
position: absolute;
top: 2px;
right:2px;
bottom:2px;
left: 2px;
}
.padding {
position: absolute;
top: 2px;
right:2px;
bottom:2px;
left: 2px;
border: 1px solid darkGray;
background: lightBlue;
border-radius: 10px;
}
.flex-layout {
position: absolute;
top: 0;
right:0;
bottom:0;
left: 0;
overflow: hidden;
}
.flex-layout-consume {
height: 100%;
float:left;
overflow: hidden;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.flex-layout-vertical > .flex-layout-consume {
width: 100%;
}
.flex-layout-fixed {
height: 100%;
float:left;
overflow: hidden;
position: relative;
}
.flex-layout-vertical > .flex-layout-fixed {
width: 100%;
}
jQuery
(function($) {
var flex = function() {
$('.flex-layout').each(function() {
var fixed = $(this).children('.flex-layout-fixed');
if ($(this).hasClass('flex-layout-horizontal')) { // horizontal
var fixed_widths = $(this)
.children('.flex-layout-fixed')
.get()
.reduce(function(total, elem) {
return (total + $(elem).outerWidth())
},0)
;
var remain_width = ($(this).outerWidth() - fixed_widths)/$(this).outerWidth() * 100; // percent
var consumers = $(this)
.children('.flex-layout-consume')
.get()
;
var count_consumers = consumers
.reduce(function(total, elem) {
var cm = parseInt($(elem).attr('class').match(/flex-layout-consume-(\d+)/)[1]);
$(elem).data('consume_multiplicator', cm);
return total + cm;
},0)
;
var consumers_tic = (remain_width/count_consumers)
$(consumers).each(function() {
$(this).width(Math.round((consumers_tic * $(this).data('consume_multiplicator'))*1000)/1000+'%')
})
} else if ($(this).hasClass('flex-layout-vertical')) { // vertical
var fixed_heights = $(this)
.children('.flex-layout-fixed')
.get()
.reduce(function(total, elem) {
return (total + $(elem).outerHeight())
},0)
;
var remain_height = ($(this).outerHeight() - fixed_heights)/$(this).outerHeight() * 100; // percent
var consumers = $(this)
.children('.flex-layout-consume')
.get()
;
var count_consumers = consumers
.reduce(function(total, elem) {
var cm = parseInt($(elem).attr('class').match(/flex-layout-consume-(\d+)/)[1]);
$(elem).data('consume_multiplicator', cm);
return total + cm;
},0)
;
var consumers_tic = (remain_height/count_consumers)
$(consumers).each(function() {
$(this).height(Math.round((consumers_tic * $(this).data('consume_multiplicator'))*1000)/1000+'%')
})
}
})
};
$(function() {
flex()
$(self).resize(flex)
})
}(jQuery))
I might be missing something in your question, but see if this is what you are looking for. Pure CSS solution that works in all browsers down to IE7.
http://jsfiddle.net/nyHgM/1/
This is my suggestion (pure css)... Tested on IE7+, Chrome & FF http://jsfiddle.net/victmo/hKGUe/
HTML
<div id='header'></div>
<div id='col0'></div>
<div id='col1'></div>
<div id='col2'></div>
<div id='footer'></div>
CSS
div{
position:absolute;
}
#header{
top:0px;
left:0px;
right:0px;
height:3em;
}
#footer{
bottom:0px;
left:0px;
right:0px;
height:2em;
}
#col0,
#col1,
#col2{
top:3em; /* header height */
bottom:2em; /* footer height */
width:33.33%;
}
#col0{ left:0%; width:30%; } /* left = 0 */
#col1{ left:30%; width:40%; } /* left = 0 + 30 */
#col2{ left:70%; width:30%; } /* left = 30 + 40 */
/* Colors */
#header{ background:#bbb; }
#col0{ background:#ccc; }
#col1{ background:#ddd; }
#col2{ background:#eee; }
#footer{ background:#aaa; }