Hello Stack overflow community. I am just getting better at coding and this is probably my first of many questions. I cant post images till I reach 10 rep so the image representation of what i need is in the link below.
https://6ff6bf8640d4ef91208a73a6d9d14f00ce70afa0.googledrive.com/host/0B667ouzaQ0tXbGQ5RXJFaHI2NlU/Stack%20Question%201.png
I have created a div class="tile". and a mobile html page with two columns. Each "tile" div has a image"img" and a button"a href". I want them to wrap as tiles and not cut in half the way they are in the image. Here is my simplified code:
<hmtl>
<body>
<div class="2 columns">
<div class="tile">
<h3 ><img class="tileimg " src="anyimage"></h3>
<button>More</button>
</div>
<div class="tile">
<h3 ><img class="tileimg " src="anyimage"></h3>
<button>More</button>
</div>
</body>
</html>
<style>
.2 column{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;}
</style>
The tile gets split into two part but i just want them to stick together. I am using HTML. CSS. Javacrpt and Jquery and Jquery mobile.1.4.5 Trying to create a mobile web based app.
Can I use JavaScript to force them to stick together? whatever you guys think is the best solution. I've been searching all over the web. and Stackoverflow
Use this CSS. It tells to do its best not to break inside the tile so both elements stock together. Found at http://css-tricks.com/almanac/properties/b/break-inside/
.tile{
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
}
set display:inline-block for .columns
Set display: inline-block; to the tiles.
<div class="tiles">
<div class="tile">...</div>
<div class="tile">...</div>
...
</div>
&
.tiles {
column-count: 2;
...
}
.tile {
display: inline-block;
}
Columns work essentially by automatically wrapping on whatever line of flow content they deem necessary. By telling them the tiles are inline-block (i.e. inline elements), you're basically saying that the whole tile is like a "letter" or a "word" - a single unbreakable item on a "line" of flow content.
On a sidenote, your classes in HTML and CSS don't match. I'd advise against using just numbers and instead suggest using either something like class="columns columns-2", or (better) using semantic markup like class="tiles".
You can use table to put them side by side as in your image...
<table>
<tr>
<td>
<div class="tile">
<h3 ><img></h3>
<button>More</button>
</div>
</td>
<td>
<div class="tile">
<h3 ><img></h3>
<button>More</button>
</div>
</td>
</tr>
</table>
Related
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
I'm working on a dynamic php gallery.
The thumbnails will all have the same width but various heights. They'll be placed from left to right. So, I don't want to use a five columns pattern.
I guess it's not possible to do it only with CSS, so maybe you know any jquery script that would do the job? I guess this kind of gallery pattern is quite common...
http://i.stack.imgur.com/Xwdx0.png
Here's the pure css solution using css3 columns. This isn't going to work in older browsers, read here (click). Live demo here (click).
You can use masonry.js, isotope.js, or packery.js for more compatible js solutions.
<div class="col-5">
<div class="sm"></div>
<div class="lg"></div>
<div class="sm"></div>
<div class="sm"></div>
<div class="lg"></div>
<div class="lg"></div>
<div class="sm"></div>
<div class="lg"></div>
<div class="lg"></div>
<div class="lg"></div>
</div>
css:
.col-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.col-5 > div {
display: inline-block;
}
.sm {
height: 75px;
}
.lg {
height: 125px;
}
You could try using/jigging a Jquery plugin like the following:
http://codecanyon.net/item/jquery-tiles-gallery/2281417
or
http://codecanyon.net/item/jbmarket-image-gallery/full_screen_preview/3028128?ref=lamdang
If you're trying to make the layout the 'pintrest' way, you can have an array of x columns and iterate through each column to check for the shortest height, and add the next box in that column.
That way you would know it works for all browsers [unless they have js disabled] and then you can style the width of the columns.
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>
One more time today i stumbled upon a problem i always have with css layouts. I'd like to have 5 divs in a horizonzontal row. Let's say for example their widths should be:
1 : 60 px,
2 : 30 %,
3 : 40px,
4 : *
5 : 100px
where * stands for "fill up the remaining space". Back in the old days that's been the way we layouted width tables. Nowadays due to accesibility reasons html tables are banned for layouts. This is just an example. I'm searching for a general solution.
Does someone know a generator, a lightweight javascript solution (can be a jQuery plugin), a tutorial, a book, or a magician which can help me to solve this problem for now and forevermore?
Allthough a javascript based solution is possible a non-script solution would be preferred.
You can use display:table to create this effect, I made a quick fiddle
This makes the individual div's act like table cells, and the section is the table, I used a section just to have cleaner code, a div would work too.
You will notice the table cells get smaller than you specified if the window size is too small, this is because of the table's default behaviour. To combat this just add a min-width (with the same value as the width)
http://jsfiddle.net/lnplnp/bFrmD/
#div1 {
width: 60px;
}
#div2 {
width: 30%;
}
#div3 {
width: 40px;
}
#div4 {
}
#div5 {
width: 100px;
}
.layout {
display:table;
}
.cell {
display: table-cell;
}
<html>
<head>
<title>DIV LIKE TABLE</title>
</head>
<body>
<div class="layout">
<div id="div1" class="cell">1</div>
<div id="div2" class="cell">2</div>
<div id="div3" class="cell">3</div>
<div id="div4" class="cell">4</div>
<div id="div5" class="cell">5</div>
</div>
</body>
</html>
Cross your finger ! With recent broswers you can do it now !
I'm trying to get the following effect in the jQuery Mobile framework:
|-------------------------------------------------|
|[button1] HeaderText/Image [b1] [b2] [b3] |
|-------------------------------------------------|
Where [b1], [b2] and [b3] are small image buttons in the Header.
Is this even possible currently?
just simple like this
<div class="ui-btn-right">
</div>
I have had troubles with this in the past. Trick is, force all of your links to be data-role="button" and wrap said links in a container with class="ui-btn-[left/right]" (respectively) This takes care of the traditional header button positioning and markup.
<div data-role="header">
<div class="ui-btn-left">
Button1
</div>
<h1>HeaderText/Image</h1>
<div class="ui-btn-right">
B1
B2
B3
</div>
</div>
Seems as if it is possible, check out this link:
Grouped buttons on the jQuerymobile Framework website.
This is how i did it. Some of the styling may not be necessary as the class used on the parent div should be enough.
<div data-type="horizontal" style="top:10px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right">
Team Call
Logout
</div>
In order to use your own image buttons on the right side you'll need to either float or position a div to the right, then add your buttons.
Then you'll need to override the jQuery mobile styles for those specific buttons to prevent them from getting the rounded, gradient button style that's automatically added by the library.
#header {
float: right;
}
#header .ui-btn-up-b,
#header .ui-btn-hover-b,
#header .ui-btn-down-b
#header .ui-btn-active {
border: 0px;
background: none;
}