I have three divs that need to be the same height and have a button at the same level, but are containing varying amounts of text above and below the button.
Right now I'm just specifying heights to compensate for how long the text might be, but if it's not that long, there's too much padding, and it still might not be high enough.
This needs to work with IE9+, and the latest chrome and firefox. I'm starting to think the best solution is javascript unless there's a CSS miracle. display: flex looked promising, but don't think it'll work with IE9
See image below. The space between the titles and the buttons should be controlled by the longest title. Right now it's just a hard coded height. Similarly card heights should be controlled by the tallest card, but it's currently hard coded.
Here's a solution using display:table which should get you started:
HTML
<div id="wrapper"> <!-- Sets the size of the entire section -->
<div id="row1"> <!-- Becomes your table row -->
<div id="cell1"> <!-- Becomes the table cell -->
<p>Information</p>
</div>
<div id="cell2">
<p>A section of text</p>
</div>
<div id="cell3">
<p>Some text and other stuff - even divs.</p>
</div>
</div>
</div>
CSS
#wrapper {
height:100%;
width:100%;
}
#wrapper div {
border:1px solid black;
}
#row1 {
display:table; /* Creates the table */
}
#row1 > div {
display:table-cell;
width:30%; /* Sets the width of each table cell */
height:auto; /* Expands the height of the entire row as content is added */
}
Here's a CodePen demo with a mockup. The nice thing about this is that you can still use HTML5 and CSS3 for all of your content and styling.
Here's an example of how to handle it with a <table> instead of divs--that way no js is required:
Table Demo
Related
There is a code like that(simplified):
<style>
.contentblock{
background-color:green;
}
.thereisaproblem{
background-image:url(image.png);
background-attachment:fixed;
}
.fix{
position:fixed; /* text is centred too if thats important*/
}
</style>
<body>
<div class="thereisaproblem" id="id1">
<div class="fix"> Fixed text </div>
</div>
<div class="contentblock">
Website content 1
</div>
<div class="thereisaproblem" id="id3">
<div class="fix"> Another fixed text </div>
</div>
<div class="contentblock">
Website content 2
</div>
</body>
I need "Fixed text" to be visible only in a div with id 1, and "Another fixed text" to be visible only in a div with id 3".
When I tried to do it simply by position:fixed; text overlapped in both divs. Using z-index can only prevent 3 from being visible in 1 and vice versa. Always one of texts can be visible in the wrong div. Is there any solution to make fixed like effect but with text visible only in one div? It would be best to use just html/css, but if jscript/jquery is needed then it's ok.
there is link to jsfiddle
Basicly, if you check the jsfiddle, I want other text to be visible in the place of the first one when you scroll down to another div. You can ignore the problem of fixed text being on top of solid blue divs.
Now I understand.
CSS SOLUTION
.thereisaproblem{
position:relative;
}
.fixed{
position:absolute; // FIXED IS RELATIVE to window
// ABSOLUTE is relative to first positioned parent
}
JAVASCRIPT SOLUTION
I'll post with jQuery but it's not necesssary, it can be done just as fine with simple good old javascript.
All the code does is if the user has scrolled 100px from the top then it hides whatever div has the class top (in your case is what you had with #1), and shows the div with class bottom. Otherwise, it does the opposite. You'd have to see what's the best distance for you to use to satisfy your purpose.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 100) {
$('.top').hide();
$('.bottom').show();
}
else {
$('.bottom').hide();
$('.top').show();
}
});
In regards to CSS:
.contentblock{
position:relative;
z-index:2;
}
.fixed{
position:fixed;
z-index:0:
}
.bottom{
display:none;
}
Notice how initially the div (third div) is in display none so that only the first div is visible.
<div class="thereisaproblem top" >
<div class="fixed">
Fixed text visible in first div
</div>
</div>
<div class="contentblock">
Website content
</div>
<div class="thereisaproblem bottom">
<div class="fixed">
Fixed text visivle in third div
</div>
</div>
<div class="contentblock">Webs content 2</div>
Without defining actual positions for your fixed text to go, it will always default to top: 0; left: 0; of the next parent to have a position: relative;. Defining position will fix your overlapping issue, however, the functionality you are asking for to have text be input in certain divs depending on ID will require javascript/jquery, or even PHP.
JSFiddle: https://jsfiddle.net/DTcHh/19451/
I am building a website using Bootstrap 3. On scroll I have an image that sticks to the page by changing position to fixed. This works however it always shifts out of place once it turns fixed. I am aware this has something to do with the margins (and I have played with pixels and this seems to practically solve the problem, the margin-left needs to be a % for the responsive website). Here's the code:
HTML
<div class="row">
<div class="col-sm-5">
<h2 class="white">Some Text</h2>
</div>
<div class="col-sm-7">
<img class="img-responsive screen-phone" src="img/phone.png">
</div>
</div><!--END ROW-->
CSS
.screen-phone{
max-width:300px;
margin-top:25px;
margin-left:25%;
z-index:999;
}
Javascript
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop()>1120){
$('.screen-phone').css('position','fixed').css('top','0');
}else{$('.screen-phone').css('position','static');
};
});
});
Try this
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.screen-phone{
max-width:300px;
margin-top:25px;
//margin-left:25%;
z-index:999;
float:right;
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function(){
// var stickyPhone = ($#)
$(window).scroll(function () {
if ($(this).scrollTop()>500){
$('.screen-phone').css('position','fixed').css('right','0');
}else{$('.screen-phone').css('position','relative');
};
});
});
I Removed the margin-left and added a float right. Then on the JS i changed the position to left:0. It seams to work.
I made several changes that made it work:
Move the class name to the div element instead of the img element
Make the CSS changes only when necessary by using a boolean variable
The 500 pixel test was too long for the size of the text. When invoked, the change in size due to the image being fixed would shrink below 500 forcing another change, and so on.
See the updated jsfiddle: https://jsfiddle.net/DTcHh/19475/
Alright, I figured this out. What needs to be done is you put a separate class on the containing DIV. You give it left:(whatever your percent value is here). You take margin-left OFF the containing image. If using Bootstrap like me, you'll have to get around margin issues you can create two classes like I did to remove the margin of the row and col-sm-7. In my case I did:
.screen-phone{
max-width:300px;
margin-top:25px;
/*Removed margin-left:25%*/
z-index:999;
}
.sticker{
left:25%
}
.zero-row{
margin:0;
}
.no-margin{
width:0;
}
HTML:
<div class="row zero-row">
<div class="col-sm-5">
<h2 class="white">Some Text</h2>
</div>
<div class="col-sm-7 no-margin sticker">
<img class="img-responsive screen-phone" src="img/phone.png">
</div>
</div><!--END ROW-->
Updated Fidde: https://jsfiddle.net/1chkghhq/1/
First of all i'm new at scripting and need your help. I'm trying to achieve the following:
I have four projects i want to show on my website. These projects are visable by images. When people hover over the image a div called "info" will show the additional information of the project they hover on.
So to be clear, data which will be triggered by hovering goes to the same div "info":
Hover over image 1 -> load information of project 1 to -> div "info"
Hover over image 2 -> load information of project 2 to -> div "info"
etc.
A friend told me to use ajax and xml, is that a good combination?
Thanks for the help
You are right that a good way to load content dynamically on a page is to use Javascript and XML. A great way to get into using JavaScript is to load a library to help you operate on the contents of an HTML page. I definitely recommend JQuery.
I would highly recommend not loading the information from separate files, unless the content is a whole bunch of very large images.
Take look at this video: JQuery for Designers they do some really great videos that helped me understand JQuery when I was first starting. The page that I just linked to has some great techniques for switching content into the same place, and will give you some important UX (user experience) tips as well.
Ajax is the best choice to get the data....
But the variations comes at what type of Data...
if you need values from database JSON would be my choice
or
never mind any data can be smoothly framed
if you dont have too much hand on scripting
Just use Jquery Plugins to retrieve data using simple calls
Fancybox plugin CLICK HERE...
and the GUIDE to how to use
GUIDE TO USE FANCYBOX CLICK HERE.....
Thank you all for the response.
I solved the problem temporarily by using the technique given by Mark, using html and css. But, i think using javascript could make things easier and more organised. My knowledge about scripting is not good enough. I posted my html for others underneath.
I still have the question how to use the id of a image as a parameter for retrieving a specific part of information. For example: i have an image with id=img1 and a xml file containing with sub parameters. So when i hover over the image js gets the id of that image and then loads the specific part of the xml onto the "info"div and not the whole xml. (to answer the question of adam, the data type is just text)
enter code here
<!DOCTYPE html>
<html>
<head>
<style>
div.maincontent{
border: none;
margin:0px;
padding:0px;
}
div.leftcol, div.rightcol {
/*
* Note that the left column and the right column use position fixed
* to make placement of the elements on top easier.
*/
position:fixed;
top:0px;
width:200px;
height: 100%;
background-color: green;
color: white;
}
div.leftcol{
left:0px;
}
div.rightcol{
right:0px;
}
div.middlecontent{
/*
* Note the left and right margin to place the div.
* With this margin you can
*/
margin:0px 200px 0px 200px;
position: absolute;
top:0px;
left:0px;
}
div.square{
float:left;
margin:0px;
width:200px;
height:200px;
border:10px solid black;
background-color: blue;
}
div.left_content, .right_content {
/*
*Initially do not display the div.left_content
*and div.right_content.
*I still set the all the styles here the divs have in common.
*/
margin:0px;
position:fixed;
margin:0px;
top:0px;
width:200px;
height: 100%;
background-color: blue;
color:white;
display: none; /* do not display */
}
div.square:hover > div.left_content {
/*
*When you hover over a square take from the children
*those with div.left_content and display them.
*The left one is displayed on top of the left div.leftcol
*/
left:0px;
display:block;
}
div.square:hover > div.right_content {
/*
*When you hover over a square take from the children
*those with div.right_content and display them.
*The right one is displayed on top of the right div.rightcol
*/
right:0px;
display:block;
}
</style>
</head>
<body>
<div class="maincontent">
<div class="leftcol">
<p>
Hover over the blue divs in the middle
</p>
<p>
This trick uses the > to find children of an element.
The children are only displayed when hovering over the parent element.
Look at the CSS how that is done. for instance for the left div it is
div.square:hover > div.left_content
</p>
<p> something inside the left column</p>
</div>
<div class="rightcol">
<p>something inside the right column</p>
</div>
<div class="middlecontent">
<div class="square">
<!--
this div has two children
a div with class="left_content" and
a div with class="right_content"
-->
<div class="left_content">
<p> first div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> first div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> second div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> second div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> third div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> third div </p>
<p> something as right content </p>
</div>
</div>
</div>
</div>
</body>
</html>
Please no jQuery - only JavaScript or better yet simply CSS
You can see the problem here: Try to resize div.
I have a series of div tags that have dynamic content and need to be re-sizable by users. When the inner content has a hover event,it grabs the event and the user can't re-size. The dynamic content can be any size -usually bigger than the outer div. I'd love to solve this with css, but adding padding or margins to the outer div does not seem to help. This only has to work on latest Firefox and Chrome. This is not the exact code, but it's show the problem - at least in FireFox:
<head>
<style>
#inner:hover {
display:block;
color:#FF00FF;
background-color:grey;
width:500px;
height:400px;
}
</style>
</head>
<div id="outer" style="resize:both;width:20px;overflow:hidden;">
<div id="inner" style="width:90px;height:90px;">
foobar<br>
foobar<br>
foobar<br>
foobar<br>
foobar<br>
foobar
</div>
</div>
I am new to CSS and Javascript. I want to create a specific area (I use the div tag) in the page where once a link is clicked within, the area will expand and an additional content would be displayed. I managed to create a code which does the job only partially: the new content is displayed after the click but this content is not displayed within the area border. In few words the area is not expanded, only a new content is displayed...any suggestion?
I really like this jQuery accordion method:
Live Demo: http://jsfiddle.net/kbZDv/1/
It's easy to use, style and looks good.
All you need to do is include the latest version of jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
Here is the HTML markup:
<p class="trigger">Click here to expand and reveal more information</p>
<div class="toggle_container">
<div class="block">
<p>Content goes here.</p>
</div>
</div>
The basic (yet to be styled) CSS:
p.trigger{
margin-bottom:7px;
margin-top:-5px;
}
.toggle_container{
margin-bottom:10px;
}
.toggle_container p{
margin:0px;
}
.toggle_container{
background:#f0f0f0;
clear: both;
font-size:100%;
}
And the all important jQuery to make it work:
$(".toggle_container").hide();
$("p.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("normal");
});
You could use a jquery plugin like div expand?
http://plugins.jquery.com/plugin-tags/div-expand
or perhaps a jquery exander plugin
http://plugins.learningjquery.com/expander/demo/index.html