bootstrap square and rectangle responsive with the same height

bootstrap square and rectangle responsive with the same height - javascript

Is it possible via css to have a square and a rectangle with the same height within a row in bootstrap?
I need javascript to achieve this goal or I can with only css?
something like this http://codepen.io/mp1985/pen/VvrWbQ but as you can see the 2 elements haven't the same height.
<div class="col-sm-8">
<div class="rect-responsive">
<div class="content">
Hello rectangle
</div>
</div>
</div>
<div class="col-sm-4">
<div class="square-responsive">
<div class="content">
Hello square
</div>
</div>
</div>

I saw a similar problem somewhere here. You might find it useful.
Not an exact solution but you can also try something like this:
<style type="text/css">
div[class*="col-"] > .square-responsive,
span[class*="col-"] > .square-responsive,
ol[class*="col-"] > .square-responsive,
ul[class*="col-"] > .square-responsive,
li[class*="col-"] > .square-responsive{
padding-bottom:100%;
}
div[class*="col-"] > .rect-responsive,
span[class*="col-"] > .rect-responsive,
ol[class*="col-"] > .rect-responsive,
ul[class*="col-"] > .rect-responsive,
li[class*="col-"] > .rect-responsive{
padding-bottom:50%;
}
.square-responsive,
.rect-responsive{
position:relative;
overflow:hidden;
background-color: red;
}
.square-responsive > *,
.rect-responsive > *{
position:absolute;
}
.square-responsive > .content,
.rect-responsive > .content {
width:100%;
height:100%;
}
</style>
<div class="row">
<div class="col-sm-6">
<div class="square-responsive">
<div class="content">
Hello
</div>
</div>
</div>
<div class="col-sm-6">
<div class="square-responsive">
<div class="content">
Hello
</div>
</div>
</div>
</div>

check this
CSS:
.rect-responsive {
background-color: red;
}
.square-responsive {
background-color: yellow;
}
JS:
$(window).ready(function(){
$(".square-responsive").height($(".square-responsive").width());
$(".rect-responsive").height($(".square-responsive").width());
console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});
$(window).resize(function () {
$(".square-responsive").height($(".square-responsive").width());
$(".rect-responsive").height($(".square-responsive").width());
console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});
DEMO:
JSFIDDLE
$(window).ready(function() {
$(".square-responsive").height($(".square-responsive").width());
$(".rect-responsive").height($(".square-responsive").width());
console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});
$(window).resize(function() {
$(".square-responsive").height($(".square-responsive").width());
$(".rect-responsive").height($(".square-responsive").width());
console.log($(".rect-responsive").height() + " " + $(".square-responsive").height())
});
.rect-responsive {
background-color: red;
}
.square-responsive {
background-color: yellow;
}
<head>
<title>Example of Twitter Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
p {
padding: 50px;
font-size: 32px;
font-weight: bold;
text-align: center;
background: #f2f2f2;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-8 col-xl-8 col-xs-8">
<div class="rect-responsive">
<div class="content">Hello rectangle</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-xl-4 col-xs-4">
<div class="square-responsive">
<div class="content">Hello square</div>
</div>
</div>
</div>
</div>
</body>
</html>

Related

Passing Javascript value into CSS?

I'm trying to pass my javascript value (a percentage) into the css 100% width line which is currently at 30%. This currently creates a table that populates outward, starting at 0 and then going out to 30%, I want to be able to implement my Javascript value (c2_percent) instead of the 30% value. If anyone can help that would be great. Thanks
<div class="bar-graph bar-graph-horizontal bar-graph-one">
<div class="bar-one">
<span class="rating-a1">A1</span>
<div class="bar" id="rating-a1" data-percentage=""></div>
</div>
<div class="bar-two">
<span class="rating-a2">A2</span>
<div class="bar" data-percentage="11%"></div>
</div>
<div class="bar-three">
<span class="rating-a3">A3</span>
<div class="bar" data-percentage="7%"></div>
</div>
<div class="bar-four">
<span class="rating-b1">B1</span>
<div class="bar" data-percentage="10%"></div>
</div>
<div class="bar-five">
<span class="rating-b2">B2</span>
<div class="bar" data-percentage="20%"></div>
</div>
<div class="bar-six">
<span class="rating-b3">B3</span>
<div class="bar" data-percentage="5%"></div>
</div>
<div class="bar-seven">
<span class="rating-c1">C1</span>
<div class="bar" data-percentage="9%"></div>
</div>
<div class="bar-eight">
<span class="rating-c2">C2</span>
<div class="bar" id="c2-rating" data-percentage=""></div>
</div>
<div class="bar-nine">
<span class="rating-c3">C3</span>
<div class="bar" data-percentage="5%"></div>
</div>
<div class="bar-ten">
<span class="rating-d1">D1</span>
<div class="bar" data-percentage="5%"></div>
</div>
</div>
#-webkit-keyframes show-bar-eight {
0% {
width: 0;
}
100% {
width: 30%;
}
}
<script>
for(let i = 0; i < 1; i++) {
const c2_security_values = Array.from(document.querySelectorAll('.security-value-c2'));
const c2_security_values_inner = c2_security_values.map((element) => element.innerText);
const c2_summed_values = c2_security_values_inner.reduce((accumulator, currentValue) => parseInt(accumulator) + parseInt(currentValue));
const total_security_values = Array.from(document.querySelectorAll('.individual-market-value'));
const total_security_values_inner = total_security_values.map((element) => element.innerText);
const total_summed_values = total_security_values_inner.reduce((accumulator, currentValue) => parseInt(accumulator) + parseInt(currentValue));
const c2_percent = c2_summed_values / total_summed_values
}
</script>

Out of the top of my head, I would add this line after calculating c2_percent in the script (make sure to have your c2_percent defined outside of the loop, and set it as a variable, not a constant).
document.getElementById('c2-rating').setAttribute("data-percentage", c2_percent * 100 + '%');
As you don't provide any other data about the rest of the page, the styles, etc. I cannot tell if this would even work.
Do you pretend to modify the width of the c2-rating?
This only modifies the value of the data-percentage attribute.
To modify the css width attribute, you can try
document.getElementById('c2-rating').setAttribute("style","width:" + (c2_percent * 100) + '%');
I have made a snippet that shows that it would work, it all will depend on the rest of the page in your project.
<html>
<head>
<style>
.bar-graph {
font-family: Arial, Helvetica, sans-serif;
}
.bar-graph div {
padding: 5px 0px;
}
.bar-graph div span {
display: inline-block;
font-weight: 600;
margin: 5px 5px;
float: left;
}
.bar-graph .bar {
border: 1px solid #ccc;
background-color: #eee;
height: 30px;
}
#-webkit-keyframes show-bar-eight {
0% {
width: 0;
}
100% {
width: 30%;
}
}
</style>
</head>
<body>
<div class="bar-graph bar-graph-horizontal bar-graph-one">
<div class="bar-one">
<span class="rating-a1">A1</span>
<div class="bar" id="rating-a1" data-percentage=""></div>
</div>
<div class="bar-two">
<span class="rating-a2">A2</span>
<div class="bar" data-percentage="11%"></div>
</div>
<div class="bar-three">
<span class="rating-a3">A3</span>
<div class="bar" data-percentage="7%"></div>
</div>
<div class="bar-four">
<span class="rating-b1">B1</span>
<div class="bar" data-percentage="10%"></div>
</div>
<div class="bar-five">
<span class="rating-b2">B2</span>
<div class="bar" data-percentage="20%"></div>
</div>
<div class="bar-six">
<span class="rating-b3">B3</span>
<div class="bar" data-percentage="5%"></div>
</div>
<div class="bar-seven">
<span class="rating-c1">C1</span>
<div class="bar" data-percentage="9%"></div>
</div>
<div class="bar-eight">
<span class="rating-c2">C2</span>
<div class="bar" id="c2-rating" data-percentage=""></div>
</div>
<div class="bar-nine">
<span class="rating-c3">C3</span>
<div class="bar" data-percentage="5%"></div>
</div>
<div class="bar-ten">
<span class="rating-d1">D1</span>
<div class="bar" data-percentage="5%"></div>
</div>
</div>
<input type="range" min="0" max="100" value="0" class="slider" id="c2RatingSlider" value="43" onchange="updateC2()">
<script>
updateC2();
function updateC2() {
var c2_percent = document.getElementById("c2RatingSlider").value / 100;
document.getElementById('c2-rating').setAttribute("data-percentage", c2_percent * 100 + '%');
document.querySelectorAll('.bar').forEach((bar) => {
const percentage = bar.getAttribute('data-percentage');
bar.setAttribute("style", "width:" + percentage);
});
}
</script>
</body>
</html>

How to generate group in jsplumb angular and add nodes to it dynamically after the group is created in angular 7

I would like to create a jsplumb group and then add nodes to it dynamically. But I can find in the document that one node needs to created and then after that only it can be added to the group. But in my case I have to add the group first and then I will drag drop the node. Both should have same jsplumb instance so that I can save the node values as well as group values.
I got this code from the main documentation.
HTML
<!doctype html>
<html>
<head>
<title>jsPlumb - groups demonstration</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link rel="stylesheet" href="../../css/jsplumbtoolkit-defaults.css">
<link rel="stylesheet" href="../../css/main.css">
<link rel="stylesheet" href="../../css/jsplumbtoolkit-demo.css">
<link rel="stylesheet" href="demo.css">
</head>
<body data-demo-id="groups">
<a style="margin:10px 0 0 10px;display:inline-block" href="https://jsplumbtoolkit.com"><img src="../../img/logo-jsplumb-green.png"></a>
<div class="jtk-demo-main">
<!-- demo -->
<div class="jtk-demo-canvas canvas-wide flowchart-demo jtk-surface jtk-surface-nopan" id="canvas">
<div class="group-container" id="container1" group="one">
<div class="title"></div>
<ul>
<li>Elements constrained to group (<strong>constrain:true</strong>)</li>
<li>Elements are draggable to other groups </li>
<li>Deletes group and children</li>
<li>Not droppable (<strong>droppable:false</strong>)</li>
</ul>
<div class="del" delete-all></div>
<div class="node-collapse"></div>
<div id="c1_1" class="w" style="left:30px;top:35px">1.1</div>
<div id="c1_2" class="w" style="left:160px;top:140px">1.2</div>
</div>
<div class="group-container" id="container2" group="two">
<div class="title"></div>
<ul>
<li>Elements are reverted on drop outside (<strong>revert:true</strong>)</li>
<li>Elements not draggable to other groups (<strong>dropOverride:true</strong>)</li>
<li>Deletes group only</li>
</ul>
<div class="del"></div>
<div class="node-collapse"></div>
<div id="c2_1" class="w" style="left:30px;top:40px">2.1</div>
<div id="c2_2" class="w" style="left:150px;top:160px">2.2</div>
</div>
<div class="group-container" id="container3" group="three">
<div class="title"></div>
<ul>
<li>Elements may be dragged outside bounds (<strong>revert:false</strong>)</li>
<li>Elements are draggable to other groups</li>
<li>Deletes group only</li>
</ul>
<div class="del"></div>
<div class="node-collapse"></div>
<div id="c3_1" class="w" style="left:30px;top:35px">3.1</div>
<div id="c3_2" class="w" style="left:80px;top:162px">3.2</div>
</div>
<div class="group-container" id="container4" group="four">
<div class="title"></div>
<ul>
<li>Elements pruned on drop outside (<strong>prune:true</strong>)</li>
<li>Elements are draggable to other groups</li>
<li>Deletes group and children</li>
</ul>
<div class="del" delete-all></div>
<div class="node-collapse"></div>
<div id="c4_1" class="w" style="left:30px;top:35px">4.1</div>
<div id="c4_2" class="w" style="left:110px;top:150px">4.2</div>
</div>
<div class="group-container" id="container5" group="five">
<div class="title"></div>
<ul>
<li>Elements orphaned on drop outside (<strong>orphan:true</strong>)</li>
<li>Elements are draggable to other groups</li>
<li>Deletes group only</li>
<li>Not droppable (<strong>droppable:false</strong>)</li>
</ul>
<div class="del"></div>
<div class="node-collapse"></div>
<div id="c5_1" class="w" style="left:30px;top:35px">5.1</div>
<div id="c5_2" class="w" style="left:140px;top:130px">5.2</div>
</div>
<div class="group-container" id="container6" group="six">
<div class="title"></div>
<ul>
<li>No connections shown when group collapsed (<strong>proxied:false</strong>)</li>
<li>Elements are draggable to other groups</li>
<li>Deletes group and children</li>
</ul>
<div class="del" delete-all></div>
<div class="node-collapse"></div>
<div id="c6_1" class="w" style="left:160px;top:45px">6.1</div>
<div id="c6_2" class="w" style="left:30px;top:150px">6.2</div>
</div>
<div class="group-container" id="container7" group="seven">
<div class="title"></div>
<ul>
<li>Elements are draggable to other groups, using ghost proxy (<strong>ghost:true</strong>)</li>
<li>Deletes group and children</li>
</ul>
<div class="del" delete-all></div>
<div class="node-collapse"></div>
<div id="c7_1" class="w" style="left:30px;top:35px">7.1</div>
<div id="c7_2" class="w" style="left:90px;top:150px">7.2</div>
</div>
<div class="group-container" id="jananicontainer" group="janani">
<div class="title"></div>
<ul>
<li>Elements are draggable to other groups, using ghost proxy (<strong>ghost:true</strong>)</li>
<li>Deletes group and children</li>
</ul>
<div class="del" delete-all></div>
<div class="node-collapse"></div>
<div id="jananinode1" class="w" style="left:30px;top:35px">Janani node 1</div>
<div id="jananinode2" class="w" style="left:90px;top:150px">Janani node 2</div>
</div>
<div class="w" id="standalone" style="left:455px;top:280px" title="drag me into a group. if you want to.">?</div>
<div class="events"><h3>Events</h3><div id="events"></div></div>
</div>
<!-- /demo -->
<!-- explanation -->
<div class="description">
<h4>GROUPS</h4>
<p>Demonstrates all of the ways you can use Groups.</p>
</div>
<!-- /explanation -->
</div>
<!-- JS -->
<script src="../../dist/js/jsplumb.js"></script>
<!-- groups -->
<script src="../../src/group.js"></script>
<script src="../demo-list.js"></script>
<script src="demo.js"></script>
</body>
</html>
js
jsPlumb.ready(function () {
var j = window.j = jsPlumb.getInstance({Container:canvas, Connector:"StateMachine", Endpoint:["Dot", {radius:3}], Anchor:"Center"});
j.bind("connection", function(p) {
p.connection.bind("click", function() {
j.detach(this);
});
});
var evts = document.querySelector("#events");
var _appendEvent = function(name, detail) {
evts.innerHTML = "<br/><strong>" + name + "</strong><br/> " + detail + "<br/>" + evts.innerHTML;
};
j.bind("group:addMember", function(p) {
_appendEvent("group:addMember", p.group.id + " - " + p.el.id);
});
j.bind("group:removeMember", function(p) {
_appendEvent("group:removeMember", p.group.id + " - " + p.el.id);
});
j.bind("group:expand", function(p) {
_appendEvent("group:expand", p.group.id);
});
j.bind("group:collapse", function(p) {
_appendEvent("group:collapse", p.group.id);
});
j.bind("group:add", function(p) {
_appendEvent("group:add", p.group.id);
});
j.bind("group:remove", function(p) {
_appendEvent("group:remove", p.group.id);
});
// connect some before configuring group
j.connect({source:c1_1, target:c2_1});
j.connect({source:c2_1, target:c3_1});
j.connect({source:c2_2, target:c6_2});
j.connect({source:c3_1, target:c4_1});
j.connect({source:c4_1, target:c5_1});
j.connect({source:c1_1,target:c1_2});
j.connect({source:c2_1,target:c2_2});
// NOTE ordering here. we make one draggable before adding it to the group, and we add the other to the group
//before making it draggable. they should both be constrained to the group extents.
j.draggable(c1_1);
j.addGroup({
el:container1,
id:"one",
constrain:true,
anchor:"Continuous",
endpoint:"Blank",
droppable:false
});
j.addToGroup("one", c1_1);
j.addToGroup("one", c1_2);
j.draggable(c1_2);
j.draggable(c2_1);
j.addGroup({
el:container2,
id:"two",
dropOverride:true,
endpoint:["Dot", { radius:3 }]
}); //(the default is to revert)
j.addToGroup("two", c2_1);
j.addToGroup("two", c2_2);
j.draggable(c2_2);
j.draggable(c3_1);
j.addGroup({
el:container3,
id:"three",
revert:false,
endpoint:["Dot", { radius:3 }]
});
j.addToGroup("three", c3_1);
j.addToGroup("three", c3_2);
j.draggable(c3_2);
j.draggable(c4_1);
j.addGroup({
el:container4,
id:"four",
prune:true,
endpoint:["Dot", { radius:3 }]
});
j.addToGroup("four", c4_1);
j.addToGroup("four", c4_2);
j.draggable(c4_2);
j.draggable(c5_1);
j.addGroup({
el:container5,
id:"five",
orphan:true,
droppable:false,
endpoint:["Dot", { radius:3 }]
});
j.addToGroup("five", [c5_1, c5_2]);
j.draggable(c5_2);
j.draggable(c6_1);
j.addGroup({
el:container6,
id:"six",
proxied:false,
endpoint:["Dot", { radius:3 }]
});
j.addToGroup("six", [c6_1, c6_2]);
j.draggable(c6_2);
j.draggable(c7_1);
j.addGroup({
el:container7,
id:"seven",
ghost:true,
endpoint:["Dot", { radius:3 }]
});
j.addToGroup("seven", [c7_1, c7_2]);
j.draggable(c7_2);
// the independent element that demonstrates the fact that it can be dropped onto a group
j.draggable("standalone");
//janani test start
j.draggable(jananinode1);
j.addGroup({
el:jananicontainer,
id:"janani",
ghost:true,
endpoint:["Dot", { radius:3 }]
});
j.addToGroup("janani", [jananinode1,jananinode2]);
j.draggable(jananinode2);
j.connect({source:"jananinode1",target:"jananinode2"});
//janani test end
//... and connect others afterwards.
j.connect({source:c3_1,target:c3_2});
j.connect({source:c4_1,target:c4_2});
j.connect({source:c5_1,target:c5_2});
j.connect({source:c5_1,target:c3_2});
j.connect({source:c5_1,target:container5, anchors:["Center", "Continuous"]});
j.connect({source:c5_2,target:c6_1});
j.connect({source:c6_2,target:c7_1});
// delete group button
j.on(canvas, "click", ".del", function() {
var g = this.parentNode.getAttribute("group");
j.removeGroup(g, this.getAttribute("delete-all") != null);
});
// collapse/expand group button
j.on(canvas, "click", ".node-collapse", function() {
var g = this.parentNode.getAttribute("group"), collapsed = j.hasClass(this.parentNode, "collapsed");
j[collapsed ? "removeClass" : "addClass"](this.parentNode, "collapsed");
j[collapsed ? "expandGroup" : "collapseGroup"](g);
});
jsPlumb.fire("jsPlumbDemoLoaded", j);
});
css
.w {
position:absolute;
width:30px;
height:30px;
border:1px solid black;
font-size:12px;
border-radius:3px;
text-align:center;
background-color:WhiteSmoke;
opacity:0.7;
z-index:10;
color:black;
cursor:move;
}
.w:hover {
background-color:#629f8d;
}
.group-container {
position: absolute;
width: 200px;
height: 200px;
border-radius: 12px;
background-color: WhiteSmoke;
font-size: 12px;
cursor:move;
}
.group-container ul {
margin-left:25px;
padding: 0;
}
.group-container ul li {
list-style-type:circle;
margin-bottom: 7px;
}
.large {
width:600px;
height:600px;
}
.group-container.collapsed {
height:40px;
}
.title {
background-color:#ABC1BB;
padding-right:16px;
font-size:13px;
height:30px;
}
#container1 { left:20px;top:50px; }
#container2 { left:250px;top:50px; }
#container3 { left:480px;top:50px; }
#container4 { left:710px;top:50px; }
#container5 { left:600px;top:340px; }
#container6 { left:370px;top:340px; }
#container7 { left:140px;top:340px; }
.del, .node-collapse {
position:absolute;
top:5px;
right:5px;
background-color:white;
padding:1px;
cursor:pointer;
font-size:13px;
width:20px;
height:20px;
border-radius: 50%;
text-align:center;
display:block;
}
.del:after {
content:"X";
}
.node-collapse {
right:29px;
text-align: center;
}
.node-collapse:after {
content:"-";
}
.group-container.collapsed .node-collapse:after {
content:"+";
}
.del[delete-all] {
background-color: pink;
}
.jtk-connector path {
stroke-width:1;
}
.jtk-group-collapsed .w, .jtk-group-collapsed ul, .jtk-group-collapsed .container, .jtk-group-collapsed .name {
display:none;
}
.jtk-drag-hover {
outline:4px solid cornflowerblue;
}
.katavorio-ghost-proxy {
outline:2px solid red;
}
.events {
position:absolute;
right:0;
top:0;
border-left:4px solid #58775d;
bottom:0;
width:156px;
font-size: 11px;
padding-left:11px;
background-color: white;
}
#events {
position: absolute;
right: 0;
top: 0;
border-left: 1px solid #58775d;
bottom: 0;
width: 256px;
font-size: 11px;
padding-left: 11px;
background-color: white;
}
.events h3 {
font-size: 20px;
margin-top: 10px;
}
The drag drop nodes will get populated in the sides and it will be cloned that logic is done.

I followed the JSplumb documentation on master.. and added the similar code by creating a separate component and css file. Automatically When I dropped the created nodes inside the group it got added to the group. Delete is also working fine but for minimize we need to make the changes based on the class collapsed which gets added to the group div.

Active on next div and on another remove

I have this solution for simple slider, but I need to preserve class .active like as the first class .row
And the buttons will switch .active class like as the first class .row
Currently, it only switches to the .row class but I need to switch to the .first and .second class.
Here is my actual solution:
$(function(){
$("#next").click(function(e) {
var activeelement = $('.active');
if(activeelement.next().length)
activeelement.removeClass('active').next(".row").addClass('active');
else
activeelement.removeClass('active').closest('.main').find('> .row:first').addClass('active');
});
$("#back").click(function(e) {
var activeelement = $('.active');
if(activeelement.prev().length)
activeelement.removeClass('active').prev().addClass('active');
else
activeelement.removeClass('active').closest('.main').find('> .row:last').addClass('active');
});
});
.main .row {
display: none;
}
.main .row .active {
color: blue;
}
.main .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="main">
<div class="row active">
<div class="first active">sss</div>
<div class="second active">ss</div>
</div>
<div class="row">
<div class="first">sss2</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss3</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss4</div>
<div class="second">ss</div>
</div>
</div>
Back
Next
Thanks.

Use children()
$(function(){
$("#next").click(function(e) {
var activeelement = $('.active');
if(activeelement.next().length-1){
activeelement.removeClass('active').next(".row").addClass('active').children().addClass('active').parent().prev(".row");
activeelement.children().removeClass('active');
}
else{
activeelement.removeClass('active').closest('.main').find('> .row:first').addClass('active').children().addClass('active');
activeelement.children().removeClass('active');
}
});
$("#back").click(function(e) {
var activeelement = $('.active');
if(activeelement.prev().length-1){
activeelement.removeClass('active').prev(".row").addClass('active').children().addClass('active');
activeelement.children().removeClass('active');
}
else{
activeelement.removeClass('active').closest('.main').find('> .row:last').addClass('active').children().addClass('active');
activeelement.children().removeClass('active');
}
});
});
.main .row {
display: none;
}
.main .row .active {
color: blue;
}
.main .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="main">
<div class="row active">
<div class="first active">sss</div>
<div class="second active">ss</div>
</div>
<div class="row">
<div class="first">sss2</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss3</div>
<div class="second">ss</div>
</div>
<div class="row">
<div class="first">sss4</div>
<div class="second">ss</div>
</div>
</div>
Back
Next

Change parent-parents background on child hover

I have following HTML code:
.background {
width: 100%;
height: 800px;
margin: 0 auto;
background-image:url("backimage1.jpg");
background-size: cover;
}
<div class="background">
<div class="wrapper">
<div class="box1">
<span class="title">Pozitivan feedback naših klijenata i njihovih potrošača</span><br />
<span class="description">Vrhunski kvalitet naših proizvoda</span>
</div>
</div>
</div>
What I would like is to when hover on "box1"to change background-image to something else. I know that I can't do that with CSS, tried few things with JS, but seems like I'm only able to select parents element, not parents-parent element though. Any suggestions?

document.getElementsByClassName('') can be use to select element by class name.
<html>
<head>
<style>
.background {
width: 100%;
height: 800px;
margin: 0 auto;
background-image:url("backimage1.jpg");
background-size: cover;
}s
</style>
<script type="text/javascript">
function changeBgMouseOver() {
var x = document.getElementsByClassName("background");
x[0].style.backgroundImage = "url('backimage2.jpg')";
}
function changeBgMouseOut() {
var x = document.getElementsByClassName("background");
x[0].style.backgroundImage = "url('backimage1.jpg')";
}
</script>
</head>
<body>
<div class="background">
<div class="wrapper">
<div class="box1" onmouseover="changeBgMouseOver()" onmouseout="changeBgMouseOut()">
<span class="title">Pozitivan feedback naših klijenata i njihovih potrošaca</span><br />
<span class="description">Vrhunski kvalitet naših proizvoda</span>
</div>
</div>
</div>
</body>
</html>

Using jquery hover function - changing the background-color :
In your case you can try this with background-image css property
$(document).ready(function(){
$(".box1").hover(function(){
$(this).parent().css("background-color","coral");
}, function(){
$(this).parent().css("background-color","");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background">
<div class="wrapper">
<div class="box1">
<span class="title">Pozitivan feedback naših klijenata i njihovih potrošača</span><br />
<span class="description">Vrhunski kvalitet naših proizvoda</span>
</div>
</div>
</div>

Here is JQ solution for you it's pretty straightforward:
$(".box1").hover(function(){
$('.background').css("background", "url(https://placebear.com/200/300)");
}, function(){
$('.background').css("background", "url(https://placebear.com/300/300)");
});
.background {
width: 100%;
height: 800px;
margin: 0 auto;
background-image:url("https://placebear.com/300/300");
background-size: cover;
}
.box1 {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background">
<div class="wrapper">
<div class="box1">
<span class="title">Pozitivan feedback naših klijenata i njihovih potrošača</span><br />
<span class="description">Vrhunski kvalitet naših proizvoda</span>
</div>
</div>
</div>

Just using ".closest()" should be fine, ".parent().parent()" could also be a solution.
$(document).ready(function(){
$(".box1").mouseover(function(){
$(this).closest(".background").css("background-image","url('anotherimage.jpg')");
});
});
$(document).ready(function(){
$(".box1").mouseover(function(){
$(this).parent().parent().css("background-image","url('anotherimage.jpg')");
});
});

how can I append divs with seperative classes on click dynamically?

I have a div with a link inside of it. as you see in snippet when the link is clicked it appends a new div beside. it is working!
but what i want is when every time link is clicked a new seperative class should be dynamically adding to 'project-list'.
$(".click").click(function () {
$(".container").append('<div class="project-list"><div class="projects-name"> div1</div><div class="project-box">Content</div></div>');
});
.container{
width:100%
}
.project-list{
width:100px;
background:#e8e8e8;
border-radius:5px;
padding:10px 20px;
display:inline-block;
margin:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="project-list">
<div class="projects-name"> div1</div>
<div class="project-box">Content</div>
<div class="ProjectSetting">
<a class="click" href="#">click</a>
</div>
</div>
</div>
if it is not clear ask me below.

var i=0;
$(".click").click(function () {
i++;
var toAppend = '<div class="project-list newClass'+i+'"><div class="projects-name"> div1 [newClass'+i+']</div><div class="project-box">Content</div></div>';
$(".container").append(toAppend);
});
.container{
width:100%
}
.project-list{
width:100px;
background:#e8e8e8;
border-radius:5px;
padding:10px 20px;
display:inline-block;
margin:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="project-list">
<div class="projects-name"> div1</div>
<div class="project-box">Content</div>
<div class="ProjectSetting">
<a class="click" href="#">click</a>
</div>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

bootstrap square and rectangle responsive with the same height - javascript

Related

Passing Javascript value into CSS?

How to generate group in jsplumb angular and add nodes to it dynamically after the group is created in angular 7

Active on next div and on another remove

Change parent-parents background on child hover

how can I append divs with seperative classes on click dynamically?

Categories

Resources