Develop Reference

JsPlumb´: if source `div `is child of `div` with `position:absolute` -> targed endpint wrong drawn

I have the following setup: https://jsfiddle.net/b6phv6dk/1/
It basically contains two blue div elements with jsPlumb connectors.
The source div is the child of a third black div element that has an offset of 100px from the top, applied with position: absolute;.
It seems like jsPlumb takes the difference in position of the black div to the blue source div ( which is 0px ) and draws the connection according to this absolute position of the blue source div ( because the targed endpoint would be right if the blue sourcedivwould be at the global position0px 0px`):
If I remove the position: absolute; from the blackDiv the target endpoint is drawn correct, but I have a setup where I have nested div elements that hold their relative position to each other by:
.item {
position: absolute;
top: value;
left: value
}

Try encapsulating all elements in a container:
<div id="container">
<div class="blackDiv">
<div id="item_left" class="item"></div>
</div>
<div id="item_right" class="item" style="top: 100px; left:250px;"></div>
</div>
and setting it on the jsplumb instance:
jsPlumb.setContainer("container");
https://jsfiddle.net/b6phv6dk/2/

CSS or Javascript - display fallback text if background image not loaded [duplicate]

This question already has answers here:
CSS background image alt attribute
(11 answers)
Closed 6 years ago.
How can I display text instead of logo, if the logo graphic file isn't loaded or missing? I have div with background PNG image:
<div class="iHaveBgImage">
this text should be displayed if bg image is not loaded
</div>
.iHaveBgImage { background-image: url('img.png') }
It doesn't have to be pure CSS, Javascript solution is allowed. I was thinking of onerror event, but it works with images, not elements that have image backgrounds.
EDIT:
I was told this has been answered before, but there is another situation. I didn't say one can alter DOM, only apply CSS and JS. Second, in that other solution is sugested I should use title attribute and I tried it and it doesn't display text, only hovers it.

Try it this way:
HTML
<div class="iHaveBgImage">
<p>this text should be displayed if bg image is not loaded</p>
</div>
CSS
.iHaveBgImage { background-image:
url('https://s31.postimg.org/yqv51r5xn/6936671_hd_wallpapers_for_ipad.jpg');
color:red;
}
.iHaveBgImage > p {
position: relative;
z-index: -1;
}
Works perfectly https://jsfiddle.net/s0gt2eng/

This is what I suggested in the duplicate tag:
.iHaveBgImage{
width:500px;
height:200px;
background-image: url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-5.jpg');
}
<div class="iHaveBgImage" title="this text should be displayed if bg image is not loaded">
</div>
Alternative using span tags:
span.image:before{
content:" "; background:url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-5.jpg');
display: block;
position:absolute;
width:500px;
height:200px;
}
<span class="image">alternate text</span>

One workaround to this would be to change
<div class="iHaveBgImage">
this text should be displayed if bg image is not loaded
</div>
.iHaveBgImage { background-image: url('img.png') }
To :
<img src="img.png" alt="Seems like this image failed to load" />
Alternatively I am not sure if the following would work, but you can MAYBE do something along the lines of:
<img class="iHaveBgImage" alt="Seems like this image failed to load" />
.iHaveBgImage { background-image: url('img.png') }
EDIT: Something that just popped up in my head that could possibly also work would be to have:
<div class="iHaveBgImage">
<p class="bgText">this text should be displayed if bg image is not loaded</p>
</div>
.iHaveBgImage {
background-image: url('img.png')
}
.bgText {
z-index: -9999;
}

Try this
P.hidden {
visibility: hidden;
}
.iHaveBgImage {
background-image: url('https://s31.postimg.org/yqv51r5xn/6936671_hd_wallpapers_for_ipad.jpg');
color: red;
width:700px;
height:300px;
}
<div class="iHaveBgImage">
<p class="hidden> This text should be displayed if bg image is not loaded</p>
</div>
if you want to use text visible to text use <span></span> tag and create css span {display: block;} or
html
<p class="hidden> This text should be displayed if bg image is not loaded</p>
CSS
P.hidden {
visibility: hidden;
}

Add image over text using jquery

I'm trying to add an image over some text that I have. This is similar to retailmenot.com's reveal coupon code. When a user clicks on the image the image is removed and reveals the text underneath while simultaneously linking the user to an external url.
The base layer can be as follows:
<div class="base">
<h3>Some text</h3>
</div>
I want to load an image with the following over it when the text is clicked:
<div class="overlay">
<img src="http://example.com/image.jpg"/>
</div>
The height of the base layer with class "base" is variable, so the image has to be resized to fit it. I have a working example where I place the image and then resize it, but this creates issues when javascript may not be enabled as the image fails to be resized and looks messy. I want the script to fall back to just showing the underlying text if javascript is disabled.
How can I add and automatically resize such an overlay on page load using jquery or javascript?

You can do it like this:
$(document).ready(function () {
//Set overlay position and dimension to same as base
$base = $(".base");
$overlay = $(".overlay");
$overlay.offset($base.offset());
$overlay.height($base.outerHeight());
$overlay.width($base.outerWidth());
$overlay.show();
//Hide overlay on click (show hidden text)
$(".overlay").click(function () {
$(this).fadeOut();
});
});
and with css:
.overlay{
/* Hide overlay if no js */
position: absolute;
display: none;
}
Check it out here: JSFiddle

If you can have the overlay in the base, as such:
<div class="base">
<h3>Some text</h3>
<div class="overlay">
<img src="http://example.com/image.jpg"/>
</div>
</div>
You can css this, no need for javascript:
.base{
position: relateive;
}
.overlay{
position: absolute; /* or fixed if scrollbars involved */
display: none;
left: 0;
right: 0;
top: 0;
bottom: 0;
/* or replace right and bottom with: */
/* width: 100%;
height: 100%; */
}
You can now use javascript to toggle visibility:
$('.overlay').fadeIn();

Let your html page has this following code
<div class="base">
</div>
Don't place any code about your image in html page. And then in your jQuery code.
var img = '<img src="http://example.com/image.jpg"/>';
var txt = 'Some text';
$(document).ready(function(){
$(this).find('.base').html(txt).show();
$(this).find('.base').click(function(){
if($(this).html() == img)
$(this).html(txt).show();
else
$(this).html(img).show();
});
});
This will solve your issue.

How to set a 'div' height same with his neighbor?

I am using bootstrap as my CSS framework. Now I have some dynamic content in the left side div, and some static content in the right div. I want to the height of right side div auto change base on the height of left side div. Is that possible?
<div class="container-fluid">
<div class="row-fluid">
<div class="span5 offset1">
<div class="well">
Dynamic Content
</div>
</div>
<div class="span5">
<div class="well" style="height: 330px; overflow-x: hidden; overflow-y: scroll;">
Static Content
</div>
</div>
</div>

You could do this
<div class="wrapper">
<div class="dynamic">
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
Dynamic Line <br />
</div>
<div class="static">
Static<br />
Static<br />
</div>
</div>
CSS
.wrapper {
position: relative;
width: 400px;
overflow: auto;
}
.dynamic {
position: relative;
background-color: yellow;
width: 200px;
}
.static {
position: absolute;
background-color: orange;
width: 200px;
float: left;
left: 200px;
top: 0px;
bottom: 0px;
right: 0px;
}

I think jQuery is the best solution to achieve this. Check out my fiddle:
http://jsfiddle.net/PHjtJ/
$(document).ready(function() {
var dynamic = $('.dynamic');
var static = $('.static');
static.height(dynamic.height());
});

the solution depends on the behavior you want in the case where the static column is larger than the dynamic one. [I actually think you want the second scenario.]
Notice: both case are pure CSS, and without specifying any height whatsoever.
also, not specifying a margin of any sort, so you can change the width of the column at your will, without the need to calculate the margin/position again and again..
if you want the dynamic column to enlarge, and to be as the static height:
so you actually want the columns to always be a the same height.
and that can be easily achieved with CSS table layout styling.
in that case: See this Fiddle (the script is only for adding dynamic content, this is a pure CSS SOLUTION)
if you want the dynamic column to stretch only to its content height, and the static one to have the same height + a scroller.
in that case: see this Fiddle (again: the script is only for adding dynamic content, this is a pure CSS SOLUTION)
in both cases, the static column grows if the dynamic one become longer.

Use Javascript/jQuery to find which box has the biggest height. Then set the same height to all the divs.
<script type="text/javascript">
jQuery(document).ready(function($) {
var description = jQuery("div.description");
var big =0;
description.each(function(index, el) {
if(jQuery(el).height() > big)
big =jQuery(el).height(); //find the largest height
});
description.each(function(index, el) {
jQuery(el).css("min-height", big+"px"); //assign largest height to all the divs
});
});
</script>

Is it possible to position one element relative to another dynamically sized element using only styles?

Is it possible to position one element relative to another specific element using only CSS styles if some of the dimensions are dynamic?
I know I can easily do this with jQuery, but I'm trying to push everything into the stylesheet that I possibly can rather than leaning on javascript.
Here is code that does more or less what I'm trying to accomplish, though I'd like to get rid of the javascript and still have the same effect:
http://jsfiddle.net/EaHU7/
Content:
<div id="reference">
Some text - lorem ipsum, or short, shouldn't matter. See CSS
</div>
<div id="relative">
Relative
</div>
CSS:
div#reference {
min-height:200px; /* could be thousands of pixels */
width:500px;
padding:1em;
border-style:solid;
border-width:1px;
}
div#relative {
width:50px;
height:50px;
padding:1em;
background:orangered;
border-style:solid;
border-left-style:none;
border-width:1px;
}
JS:
var reference = $("div#reference");
var refPos = reference.offset();
var refWidth = reference.outerWidth();
var refHeight = reference.outerHeight();
var relative = $("div#relative");
var relHeight = relative.outerHeight();
relative
.css({
"position":"absolute",
"left":(refPos.left + refWidth) + "px",
"top":(refPos.top + refHeight - relHeight) + "px"
})
.show();
Screenshot:

Yes. There are many ways to do this. you can do it with absolute positioning by placing the orange square within your text div and set its right value to "-50px" and its bottom value to "0px"
div#reference {
position: relative;
}
div#relative {
position: absolute;
right: -50px;
bottom: 0px;
}
and your HTML like this:
<div id="reference">
Some text - lorem ipsum, or short, shouldn't matter. See CSS
<div id="relative">
Relative
</div>
</div>
Try something like this. The orange square should stay at the bottom and to right at all times no matter what the size of the reference div is.