I'm trying to make draggable items contained in a position:absolute DIV.
It works well when dragged over a div declared earlier in the code, but this item will never appear over a [position:absolute] div declared later in the code, even when setting lower Z-index to this DIV...
Here's an example
$(function(){
$(".myClass").draggable({stack:".bg"});
}(jQuery));
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div style="position:absolute;background-color:#3FF;width:200px;height:200px;border:1px solid #000;left:0px;top:0px;z-index:10;">
<div class="myClass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0F6;border:1px solid #000;z-index:100;">Draggable</div>
</div>
<div style="position:absolute;background-color:#FFC;width:200px;height:200px;border:1px solid #000;left:205px;top:0px;z-index:10;">
<div class="myClass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0F6;border:1px solid #000;z-index:100;">Draggable</div>
</div>
<div style="position:absolute;background-color:#9CF;width:200px;height:200px;border:1px solid #000;left:205px;top:205px;z-index:10;"></div>
Any idea of how i could solve that issue ?
Thx.
The problem is your z-index on the parents elements. One easy way to resolve your problem is to simply remove them.
Or you can manipulate them on start and stop so the draggable parent is always at the top.
See here with manipulating on start and stop, but removing it from your HTML should also work.
$(function() {
$(".myClass").draggable({
stack: ".myClass",
start: function(e, ui) {
ui.helper.parent().css('z-index', 30);
},
stop: function(e, ui){
ui.helper.parent().css('z-index', 10);
}
});
}(jQuery));
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div style="position:absolute;background-color:#3FF;width:200px;height:200px;border:1px solid #000;left:0px;top:0px;z-index: 10;">
<div class="myClass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0F6;border:1px solid #000;z-index:100;">Draggable</div>
</div>
<div style="position:absolute;background-color:#FFC;width:200px;height:200px;border:1px solid #000;left:205px;top:0px;z-index: 10;">
<div class="myClass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0F6;border:1px solid #000;z-index:100;">Draggable</div>
</div>
<div style="position:absolute;background-color:#9CF;width:200px;height:200px;border:1px solid #000;left:205px;top:205px;z-indx: 10;"></div>
Related
Demo here.
The tooltip is not showing completely,because I think there is no place for it to show,But is there any other way we can make it happen?I cannot change the position to relative and the overflow have to be hidden.
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container-fluid">
<div style="margin-left:40px;border:1px solid;overflow:hidden;position:absolute;width:150px">
<div class="row" style="margin-top:80px;margin-left:50px">
<button class="btn btn-default" tooltip="This tooltip is clipped" tooltip-placement="left">#1</button>
</div>
</div>
</body>
</html>
You can append the tooltip element to the document's body instead of the containing element.
tooltip-append-to-body $ C (Default: false, Config: appendToBody) - Should the tooltip be appended to '$body' instead of the parent element?
Add this to your button
tooltip-append-to-body="true"
Forked demo
try with tooltip-placement="left auto"
so it will adjust and take automatically which side get place.
I use metro-ui-css for my webapp, the look and feel is great. Now I load a word document (with its own style) into a DIV. After word document is loaded, it will override some metro-ui-css style rules, so that the look and feel becomes unexpectedly...
To simplify the problem, I create a demo below. After clicking the button, I want only text below to be blue, not all of them. The question is besides using <iframe>, is it possible to isolate the style definition?
function insert() {
$('#fragment').html(`
<html>
<head>
<style>*{color:red}</style>
</head>
<body>
<div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`
);
}
<html>
<head>
<style>*{color:blue}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p>OUTER CONTENT SHOULD BE BLUE</p>
<button onclick="insert()">Load into DIV</button>
<div id="fragment" style="margin-top:10px;border:1px dashed black">PLACEHOLDER</div>
</body>
</html>
I understand you can't modify the html and you must change the function so the div has red text. You can do that by changing in <style>div{color:red;}</style>
function insert() {
$('#fragment').html(`
<html>
<head>
<style>div{color:red;}</style>
</head>
<body>
<div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`);
}
<html>
<head>
<style>*{color:blue}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p>OUTER CONTENT SHOULD BE BLUE</p>
<button onclick="insert()">Load into DIV</button>
<div id="fragment" style="margin-top:10px;border:1px dashed black">PLACEHOLDER</div>
</body>
</html>
Since CSS :scope is experimental and the loaded content is out of control, you could do like this, where you give the outer most body a unique id and use that to get highest possible specificity for your controlled elements.
Also, when target your controlled elements, you need to make sure to use highest specificty possible, so those rules doesn't override the loaded one's, or get overridden by the uncontrolled content rules.
As you see when click the button, its text gets red but not the wrapped elements.
function insert() {
$('#fragment').html(`
<html>
<head>
<style>*{color:red}</style>
</head>
<body>
<div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`);
}
#outer-body > .wrapper * {
color: blue
}
#outer-body > .wrapper .other {
color: lime;
margin: 10px 0;
}
#outer-body > #fragment {
margin-top:10px;
border:1px dashed black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="outer-body">
<div class="wrapper">
<p>OUTER CONTENT SHOULD BE BLUE</p>
<div class="other">
Other text target with its class
</div>
</div>
<button onclick="insert()">Load into DIV</button>
<div id="fragment">PLACEHOLDER</div>
</body>
I simply want to swap contents of two divs when pressing a button using AJAX.
I made a simple jsfiddle just to demonstrate what I mean.
So I want to swap A with B and B with A at the same time (while the red and green box stay at the same place) using onclick.
.box1 {
border: 2px solid green ;
}
.box2 {
border: 2px solid red ;
}
<div id="rank1" class="box1">
B
</div>
<div id="rank2" class="box2">
A
</div>
use jquery to do this
include jquery js in html head tag
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
and following script to change the content
<script>
$(document).ready(function(){
$('#sbutton').click(function() {
var div1_value = $( "#rank1" ).html();
var div2_value = $( "#rank2" ).html();
$( "#rank1" ).html(div2_value);
$( "#rank2" ).html(div1_value)
});
});
</script>
add a button in your html body
<input type="button" id="sbutton" value="Change"/>
I have 5 div's all with the same class name like this:
CSS:
.test:hover{
color:red;
}
HTML:
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
Imagine for a moment these Div's are in different parent div's on the page...
I'm trying to find a way so they all change to color:red if i hover my mouse over any of the 5 rather than just the one in question changing...
I can't wrap them in a parent and give that parent a hover how ever... they are not sharing the same parents in the first place.
Does CSS provide a way to do this or am I going to have to rest to JavaScript?
One (plain/vanilla) JavaScript approach that works (in compliant browsers, which support [].forEach(), and document.querySelectorAll()), given that CSS cannot (yet) perform this task, is:
function classToggle (evt, find, toggle) {
[].forEach.call(document.querySelectorAll('.' + find), function(a){
a.classList[evt.type === 'mouseover' ? 'add' : 'remove'](toggle);
});
}
var els = document.querySelectorAll('.test');
for (var i = 0, len = els.length; i<len; i++){
els[i].addEventListener('mouseover', function(e){
classToggle(e, 'test', 'highlight');
});
els[i].addEventListener('mouseout', function(e){
classToggle(e, 'test', 'highlight');
});
}
JS Fiddle demo.
References:
Array.prototype.forEach().
document.querySelectorAll().
Element.classList.
Function.prototype.call().
You could use JQuery to pretty easily achieve what you want... copy this to an .html file to test it...
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$(".test").hover(
function() {
$(".test").css("background-color", "red");
}, function() {
$(".test").css("background-color", "");
}
);
});
</script>
</head>
<body>
<div class="test">My Div</div><br />
<div class="test">My Div</div><br />
<div class="test">My Div</div><br />
<div class="test">My Div</div><br />
<div class="test">My Div</div>
</body>
</html>
It's impossible to select element's parent via CSS nowadays. So also it's impossible to select element by one element and general parent. It's like a tiny proof.
Here is the code:
css:
.sample{
background: none repeat scroll 0 0 #FFFFFF;
height: 105px;
opacity: 0.1;
position: absolute;
top: 0;
width: 5%;
}
.sample:hover ~ div{
color:red;
cursor:pointer;
}
html:
<div class="sample"></div>
<div class="container">
<div class="test">1111</div>
</div>
<div class="container">
<div class="test">2222</div>
</div>
<div class="container">
<div class="test">3333</div>
</div>
<div class="container">
<div class="test">4444</div>
</div>
<div class="container">
<div class="test">5555</div>
</div>
Check the demo here: http://jsfiddle.net/eN49z/
Quick answer: it is not possible via CSS-only to achieve the effect that you are looking for, as CSS is unable to travel up the parent, but only down the DOM tree to affect elements.
You can, however, rely on JavaScript to achieve the effect. In my example I have chosen to rely on jQuery. You can use various methods to get all other <div>s with the class test, but it depends on how they are nested - are they nested under parents that are siblings, and the level of nesting and etc.
Here is an example markup of the scenario you have described:
<div>
Parent 1
<div class="test"></div>
</div>
<div>
Parent 2
<div class="test"></div>
</div>
<div>
Parent 3
<div class="test"></div>
</div>
The CSS would be simple. The .hover class (not the :hover state) is added dynamically by jQuery (see below):
.test:hover, .test.hover {
background-color: red;
}
The JS would be something like:
$(function() {
$(".test").hover(function() {
// Find '.test' in all siblings of a specific '.test' parent
$(this).parent().siblings().find(".test").addClass("hover");
}, function() {
// You can refine the criteria of which '.test' should be selected.
$(document).find(".test").removeClass("hover");
});
});
http://jsfiddle.net/teddyrised/fHwFf/
Does anyone know how I would generate random div widths?
They would need to be between 150px and 300px.
The height of the div is not important as the content I'm going to put inside should automatically stretch them.
Thanks!
Currently using this code
<head>
<script type='text/javascript'>
$(document).ready(function(){
var x = Math.floor((Math.random()*150)+150);
$('#stat').width(x+'px');
});
</script>
</head>
<body>
<div id="stat" style="float:left; background-color: red;">hello</div>
</body>
using javascript's random() and some jquery you can do something like this:
$(document).ready(function(){
var x = Math.floor((Math.random()*150)+150);
$('div').width(x+'px');
});
<div>hello</div>