Develop Reference

Add style if there are more than one image

I'm using a text editor for posts that creates <p> for each part of the content.
Sometimes the content contains 1 image or more and sometimes no images.
.post{
background-color: #000;
margin-bottom: 20px;
color: #fff
}
.post img + img{
width: 50%
}
<div class="post">
<p>First Post</p>
<p>
<img src="http://placehold.it/300x300/200">
</p>
</div> <!-- .post -->
<div class="post">
<p>Second Post</p>
<p>
<img src="http://placehold.it/300x300/200">
<img src="http://placehold.it/300x300/200">
</p>
</div> <!-- .post -->
So If there are two images, I want each one to take 50% of the width.
I can set the width of the second image:
.posts img + img{
width:50%
}
But how to select the first one?
Here is a live fiddle:
http://jsfiddle.net/zjwhgq81/14/
I need a x-browser compatible solution that is supported in most of the browsers on different browsers.
Please don't suggest adding a class or an id to the img, As I mention I'm using a text editor.

Try this:
Select post with one child
.post p img:first-child:nth-last-child(1) {
width: 100%;
}
Select post with more child
/* Select the first of more */
.post p img:nth-child(1) {
width:60%
}
/* Select others of more except the first */
.post p img:nth-child(n+2) {
width: 10%;
}
.post{
background-color: #000;
margin-bottom: 20px;
color: #fff;
width:100%;
}
.post p img:first-child:nth-last-child(1) {
width: 100%;
}
.post p img:nth-child(1) {
width:60%
}
.post p img:nth-child(n+2) {
width: 10%;
}
<div class="post">
<p>First Post</p>
<p>
<img src="http://placehold.it/300x300/200">
</p>
</div> <!-- .post -->
<div class="post">
<p>Second Post</p>
<p>
<img src="http://placehold.it/300x300/200">
<img src="http://placehold.it/300x300/200">
</p>
</div> <!-- .post -->

.post p img:first-child, .post p img:last-child {
width:50%;
}
.post p img:last-child:first-child {
width:100%
}
or
.post p img {
width:50%;
}
.post p img:last-child:first-child {
width:100%
}
when there is only one image the first and last is the same so you can set that to either 100% or anything you want.

enter code hereYou can use Jquery to determinate the width of each img. For me, the easiest way to do it would be like this:
for (let i = 0; i < $('.post p').length; i++) {
let items = $($('.post p')[i]).children();
items.css('width', (100 / items.length) + '%');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h2 {
text-align: center;
text-shadow: 1px 1px #111;
padding: 20px 0;
}
p {
padding: 0;
display: flex;
}
.post{
background-color: #999;
margin-bottom: 20px;
color: #fff;
}
.post img {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
<h2>First Post</h2>
<p>
<img src="http://placehold.it/300x300/200">
</p>
</div>
<div class="post">
<h2>Second Post</h2>
<p>
<img src="http://placehold.it/300x300/200">
<img src="http://placehold.it/300x300/200">
</p>
</div>

How to give opacity for div when it is set Overflow=visible

I have 1 div and 1 image tag , one upon the other. Div is smaller than image.
I have set overflow=visible for div. My question is that, when I insert an image to image tag, the content which is overflowed through div should be opacity=0.5 like this.
for me it shows like this.. any help
<div style="border-style: solid; border-width: 2px; height: 5cm; width: 8cm;top: 20px; left: 20px; position: relative; overflow: visible;" id="divimg">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg" style="height: 7cm; width: 10cm;" />
</div>

If you can change HTML to something like this:
<div id="holder">
<div id="overlay">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg" />
</div>
<div id="box"></box>
</div>
CSS:
#holder {
width:500px;
height:250px;
position:relative;
overflow:hidden;
}
#overlay {
width:500px;
height:250px;
opacity:0.5;
}
#displayimg {
width:500px;
height:250px;
}
#box {
width:250px;
height:100px;
background-color:black;
position:absolute;
left:200px;
top:70px;
overflow:hidden;
}
#box #ima {
position:absolute;
width:500px;
height:250px;
display:block;
}
And little JQuery magic:
$('#box').append('<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="ima" /> ');
$('#ima').offset($('#holder').offset());
$( "#box" ).draggable();
$( "#box" ).draggable({
drag: function() {
$('#ima').offset($('#holder').offset());
}
});
Since you have mentioned dragging, i have imported JQuery UI in fiddle:
http://jsfiddle.net/y3c41d10/1/
For resizing, you will have to do some calculations, but it is doable, i hope...

Here is the demo for your requirement.
.outter_div{width:400px; height: 200px;position: relative;}
.outter_div:after{content:"";border:50px solid rgba(255,255,255,0.5);position: absolute; top: 0;width: 300px;height: 100px;}
img{width: 100%;position:}
<div class="outter_div">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg"/>
</div>
JSFiddle demo

This is what I came up with:
<div class="container">
<div class="main">
<div class="sub">This is a text</div>
</div>
</div>
.main {
background-image:url(http://lorempixel.com/g/200/200/);
position: relative;
}
.container {
width:300px;
height:300px;
}
.sub {
text-align: center;
padding:15px;
border: solid 30px rgba(255, 255, 255, 0.5);
color:white;
}
Here is the JSFiddle demo

fullpage.js sticky header won't stick

I've got a problem with my sticky header not sticky in the fullpage.js environment.
I've got a site where I did get it to work but the way it worked can't be correct because it's full of errors and bad coded pieces.
Now Question is do I look at the css part for the fixed position or does my problem finds itself in the javascript.
Code:
<script type="text/javascript">
var $window = $(window);
var nav = $('#main-navigation');
$window.scroll(function(){
if ($window.scrollTop() >= 300) {
nav.addClass('fixed-header');
}
else {
nav.removeClass('fixed-header');
}
});</script>
<script type="text/javascript">
$(function(){
$('#topnav ul li a').on('click', function(e){
e.preventDefault();
var scrolldiv = $(this).attr('href');
$(scrolldiv).animatescroll({padding:50});
});
});
</script>
#CHARSET "ISO-8859-1";
/* Reset CSS
* --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
a{
text-decoration:none;
}
table {
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
strong{
font-weight: bold;
}
ol,ul {
list-style: none;
margin:0;
padding:0;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
margin:0;
padding:0;
color:#444;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}
/* Custom CSS
* --------------------------------------- */
body{
font-family: arial,helvetica;
color: #333;
color: rgba(0,0,0,0.5);
}
.wrap{
margin-left: auto;
margin-right: auto;
width: 960px;
position: fixed;
}
h1{
font-size: 6em;
}
p{
font-size: 2em;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.section{
text-align:center;
}
/*StickyHeaderNavigationMenu*/
header{position:fixed;bottom:0;z-index:99900; width:100%;
}
.fixed{
position: fixed;
bottom:0; left:0;
width: 100%;
z-index:10000; }
.fixed-header {
position:fixed;
top:0px; left:0;
width: 100%;
}
nav {
width:100%;
height:60px;
background:#36A8B5;
postion:fixed;
z-index:10000;
bottom:0px;
left:0;
}
nav ul {
list-style-type: none;
margin: 0 auto;
padding-left:0;
text-align:center;
width:100%;
}
nav ul li {
display: inline-block;
line-height: 60px;
margin-left: 35px;
}
nav ul li a {
text-decoration: none;
color: #FFFFFF;
}
<header>
<div class="header">
<nav id="main-navigation">
<ul>
<li>Schools</li>
<li>Gallery</li>
<li>About Us</li>
<li>About Us</li>
<li>Snorkeling</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<div id="fullpage">
<div class="section " id="section0">
<div class="layer2"></div>
<div class="layer">
<h1>Fixed elements</h1>
<p>Create your own headers and footers</p>
</div>
<video autoplay loop muted controls id="myVideo">
<source src="imgs/flowers.mp4" type="video/mp4">
<source src="imgs/flowers.webm" type="video/webm">
</video>
</div>
<div class="section" id="section1">
<div class="slide" id="slide1"> <h1>We provide the best high level snorkel gear for great value!</h1></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"><h1>Make your own great experience and enjoy New Zealand’s unique underwater Sea Life!</h1></div>
<div class="slide" id="slide4"><h1>After a day on the beach, relax in our Garden Café and Restaurant and recharge your batteries with some awesome food to your liking.
Your adventure starts here!</h1></div>
<div class="slide" id="slide5"></div>
<div class="slide" id="slide6"><h1>
Not a strong swimmer? – No worries, we offer:<br/>
<ul style:"list-style-type:none">
<li> 5 mm wetsuits – fitted to your needed size</li>
<li> masks, snorkels, weight belts, fins</li>
<li> optical masks available</li>
</div>
<div class="slide" id="slide7"></div>
<div class="slide" id="slide8"></div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Enjoy it</h1>
</div>
</div>
</div>
I've added other pieces of the side to show the hierarchy in the section and to make it scrollable.

Set div's left value based on grandparent element

I have an absolute div nested inside a relative div. I want the absolute div's left value to be relative to the grandparent's position, but still allow it's height to be relative to it's parent element. Here is where the page is: http://pixeloft.com/clients/supportcenter/facilitators/
I want the left value of the bio element to always have the left value of the first "Frank Abdale" on click.
Is this possible by setting the div's left value through js?
Here is my code: http://jsfiddle.net/6RQ3u/
HTML:
<div class="person">
<div class="person-info"> <a class="showBio" target="1">
<h4>Name 1</h4></a>
<div class="arrow" id="arrow-1">^</div>
</div>
<div class="bio-wrapper">
<div class="bio" id="bio-box-1"><a class="hideBio" target="1">X</a>Bio</div>
</div>
</div>
<div class="person">
<div class="person-info"> <a class="showBio" target="2">
<h4>Name 2</h4></a>
<div class="arrow" id="arrow-2">^</div>
</div>
<div class="bio-wrapper">
<div class="bio" id="bio-box-2"><a class="hideBio" target="2">X</a>Bio</div>
</div>
</div>
<div class="person">
<div class="person-info"> <a class="showBio" target="3">
<h4>Name 3</h4></a>
<div class="arrow" id="arrow-3">^</div>
</div>
<div class="bio-wrapper">
<div class="bio" id="bio-box-3"><a class="hideBio" target="3">X</a>Bio</div>
</div>
</div>
CSS:
.person a h4 {
color: #000;
font-weight: normal;
font-size: 18px;
line-height: 21px;
width: 100px;
}
.bio {
border-top: 18px solid #387496;
position:absolute;
width:618px!important;
float:left;
background-color:#d8edf4;
padding:15px 170px;
top:284px;
left:-19px;
display:none;
z-index:200;
clear: both;
}
.person {
width:164px;
margin-right:20px;
float:left;
display:inline;
margin-bottom:30px;
position: relative;
}
.person-info {
float:left;
}
.showBio {
float:left;
}
.hideBio {
float:right;
color:#fff!important;
font-size:11px;
position: absolute;
right: 10px;
top: -14px;
}
.arrow {
display:none;
background: url('images/bio-arrow.jpg') no-repeat -2px -6px #fff;
float: left;
display: block;
clear: both;
width: 30px;
height: 15px;
text-indent: -3000px;
}
a{cursor:pointer;}
JQuery:
jQuery(function () {
jQuery('.bio').hide();
jQuery('.arrow').hide();
jQuery('.showBio').click(function () {
jQuery('.bio').hide();
jQuery('.arrow').hide();
jQuery('#bio-box-' + $(this).attr('target')).slideToggle('fast');
jQuery('#arrow-' + $(this).attr('target')).slideToggle('fast');
});
jQuery('.hideBio').click(function () {
jQuery('#bio-box-' + $(this).attr('target')).slideToggle('slow');
jQuery('#arrow-' + $(this).attr('target')).slideUp();
});
});
Thanks for all your help!

set random images in multiple div sizes

I have a gallery grid that has four div containers. I want to enclose whatever image inside the divs, keeping in mind that each div box has a different height and width. The should be centered in the div leaving reasonable padding on all sides. Please check the link to get a better understanding JsFiddle
http://d.alistapart.com/fluid-images/3-4.png
Any help is highly appreciated.
enter code here
<div id="body">
<div class="container">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container h2">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container h3">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container w2">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
.container {
height:100px;
width: 100px;
overflow: hidden;
position: relative;
margin-bottom: 10px;
float: left;
background: #CCC;
border-radius: 5px;
cursor: pointer;
box-shadow: 4px 0 2px -2px rgba(0, 0, 0, 0.4);
}
.magic {
max-width:90%;
height:70%;
}
.h2 {
height: 210px;
width: 220px;
}
#body {
margin: 10px;
}
.h3 {
width: 340px;
height: 210px;
}
.w2 {
width: 220px;
}

I'm not sure that i understood your problem... if you use
.magic {
max-width:100%;
max-height:100%;
}
with big pictures what is the problem ?
you want them to fill the entire div AND respecting theire size ratio ?

I recommend adding these images as a background-image property to a block-level div, such as:
<div class="container">
<div class="magic" style="background-image: url(SOURCEHERE.JPG)"></div>
</div>
With additional CSS like:
.container{
width: 100px; /* or some other width */
height: 100px; /* or some other height */
padding:20px; /* this will add a little margin around your image */
box-sizing:border-box; /* padding will be calculated with the container dimensions */
}
.magic{
width:100%;
height:100%;
background-size:contain;
background-position:center center;
background-repeat:no-repeat;
box-sizing:border-box;
}
jsfiddle: http://jsfiddle.net/PDL2U/