I have two set of div containers with input tags with same classes to both.
only difference is when input box of each clicked the resepctive parent div will add "frame-focus" class. what i want is if input is clicked and frame-focus class is exist, hide the div which has class "panel-set" of which the focus class exist.
Please check my div containers below. please advice how to proceed this
Ex:
<!--- here is 1st div container which input box is selected-->
<div class="block">
<div class="frame frame-focus">
<input name="set1">
<div class="panel-set"></div>
</div>
</div>
<!-- here is 2nd div -->
<div class="block">
<div class="frame">
<input name="set1">
<div class="panel-set"></div>
</div>
</div>
Use the child selector or the direct child selector to hide the .panel-set which is a child of .frame-focus:
.frame-focus > .panel-set {
display: none;
}
<!--- here is 1st div container which input box is selected-->
<div class="block">
<div class="frame frame-focus">
<input name="set1">
<div class="panel-set">1</div>
</div>
</div>
<!-- here is 2nd div -->
<div class="block">
<div class="frame">
<input name="set1">
<div class="panel-set">2</div>
</div>
</div>
html
<div class="block">
<div class="frame frame-focus">
<input name="set1">
<div class="panel-set">1</div>
</div>
</div>
<!-- here is 2nd div -->
<div class="block">
<div class="frame">
<input name="set1">
<div class="panel-set">2</div>
</div>
</div>
jquery
$(document).ready(function(){
$("input").click(function() {
$(this).siblings('.panel-set').hide();
});
});
Example jsfiddle
Related
I need to style rows like in picture.
The problem is I want to have fixed elements no matter if previous or next element will disappear. Also the whole table is resizable and buttons should overlap text if text will be too long
<div class="someRow">
<div class="someText"></div>
<div class="buttonsContainer">
<div *ngIf="someExpression1" class="button1"></div>
<div *ngIf="someExpression2" class="button2"></div>
<div *ngIf="someExpression3" class="button3"></div>
<div class="button4"></div>
</div>
</div>
<div class="buttonsContainer">
<div class="row">
<div class="col-4">
<div *ngIf="someExpression1" class="button1"></div>
</div>
<div class="col-4">
<div *ngIf="someExpression2" class="button2"></div>
</div>
<div class="col-4">
<div *ngIf="someExpression3" class="button3"></div>
</div>
</div>
I have a webpage where I bind a click event on the element. When user clicks on the particular element. I want to get generate the XPath of the element starting from html or body tag. i.e "The Absolute Xpath"
Suppose in below html sample I click on span having text as "USA" so the Absolute Xpath would be
/html[1]/body[1]/div[2]/div[1]/div[1]/span[1]
<html>
<body>
<div class="header">Countries</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>India</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>USA</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>UK</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>France</span>
</div>
</div>
</div>
</body>
</html>
Do we have any library where it can help me generate the XPath where I pass the element Dom and it can generate it?
I came across few libraries but that help detect the Content inside the html based on provided Xpath.
You need to loop through clicked element and it parents to do this work. So you can call a function nesting to do this work.
var xpath;
$("*").click(function(e){
xpath = '';
addXpath($(this));
console.log(xpath);
e.stopPropagation();
});
function addXpath($ele){
var tagName = $ele[0].tagName.toLowerCase();
var index = $ele.parent().children(tagName).index($ele)+1;
xpath = '/'+tagName +'['+index+']'+ xpath;
!$ele.parent().is(document) ? addXpath($ele.parent()) : "";
}
body {background: green}
.header {background: orange}
.row_in {background: yellow}
.row_in_in {background: blue}
span {background: red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">Countries</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>India</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>USA</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>UK</span>
</div>
</div>
</div>
<div class="row">
<div class="row_in">
<div class="row_in_in">
<span>France</span>
</div>
</div>
</div>
I'm looking to get my highlighter (blue bar) to stay on the element that is clicked on. I want to keep the hover animation but also include the option to have it stay on the <div> the user clicks. Any insight is greatly appreciated.
Pen: https://codepen.io/chriskaram/pen/eGXrOp
<div class="demo">
<div class="demo__content">
<h2 class="demo__heading">Assessment</h2>
<div class="demo__elems">
<div class="demo__elem demo__elem-1">Novice Assessment</div>
<div class="demo__elem demo__elem-2">Apprentice Assessment</div>
<div class="demo__elem demo__elem-3">Advanced Assessment</div>
<span class="demo__hover demo__hover-1"></span>
<span class="demo__hover demo__hover-2"></span>
<span class="demo__hover demo__hover-3"></span>
<div class="demo__highlighter">
<div class="demo__elems">
<div class="demo__elem">Novice Assessment</div>
<div class="demo__elem">Apprentice Assessment</div>
<div class="demo__elem">Advanced Assessment</div>
</div>
</div>
<div class="demo__examples">
<div class="demo__examples-nb">
<div class="nb-inner">
<div class="example example-adv">
<div class="example-adv">
<div class="example-adv__top">
<div class="example-adv__top-search"></div>
</div>
<div class="example-adv__mid"></div>
<div class="example-adv__line"></div>
<div class="example-adv__line long"></div>
</div>
</div>
<div class="example example-web">
<div class="example-web__top"></div>
<div class="example-web__left"></div>
<div class="example-web__right">
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
<div class="example-web__right-line"></div>
</div>
</div>
<div class="example example-both">
<div class="example-both__half example-both__left">
<div class="example-both__left-top"></div>
<div class="example-both__left-mid"></div>
</div>
<div class="example-both__half example-both__right">
<div class="example-both__right-top"></div>
<div class="example-both__right-mid"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In this example, I just focused on demo__element-3.
Check this link: https://codepen.io/anon/pen/GMbYdz
These are the modifications to be made:
CSS:
Add .active to all demo__hover-3:hover styles(in css).
(ie, add .demo__hover-3.active to .demo__hover-3:hover)
Element:
Add class
active to demo__hover elements.
(in this case, it become
<span class="demo__hover demo__hover-3 active"></span>)
Jquery:
Add jquery to add active to element if user clicks it.
Just like the bootstrap manu when you click one option it will add a class 'active' to element <li>
i have a html like this
<div class="main" ng-controller="firstcontroller">
<div class="submain">
<div class="first" ng-show="display">displayed</div>
<div class="second" my-directive>click</div>
</div>
<div class="submain">
<div class="first" ng-show="display">displayed</div>
<div class="second" my-directive>click</div>
</div>
<div class="submain">
<div class="first" ng-show="display">displayed</div>
<div class="second" my-directive>click</div>
</div>
</div>
I have controller like this
app.controller('firstcontroller',function($scope)
{
$scope.display=false;
});
my directive coding like this
app.directive('myDirective',function(scope, element, attrs)
{
return function()
{
element.bind('click',function()
{
element.prev().show();
//alert(element.prev().attr('class'));
// element.parent().find('.main').append('<div>Some text</div>')
});
}
});
here initially div will be hidden if div has class name fist , only div having class name second will be displayed . so when we click on click div we have to show only previous div of that clicked div..... how to show previous div of clicked div in angular.js ?
I get the feeling that the question is missing information. E.g. are the .submain divs hardcoded, or created by iteration?
If however this is indeed the case, the directive is redundant. Change the HTML as:
<div class="main" ng-controller="firstcontroller">
<div class="submain">
<div class="first" ng-show="display[0]">displayed</div>
<div class="second" ng-click="display[0] = !display[0]">click</div>
</div>
<div class="submain">
<div class="first" ng-show="display[1]">displayed</div>
<div class="second" ng-click="display[1] = !display[1]">click</div>
</div>
<div class="submain">
<div class="first" ng-show="display[2]">displayed</div>
<div class="second" ng-click="display[2] = !display[2]">click</div>
</div>
</div>
And the controller:
app.controller('firstcontroller',function($scope) {
$scope.display=[false, false, false];
});
<div class="row-fluid">
<div class="span12 clearfix">
<div class="span1">{1}</div>
<div class="span3">{2}</div>
<div class="span7"><input type="text" name="image_url[]" class="text required img_url" value="{0}" /></div>
<div class="span1">remove</div>
</div>
</div>
<div class="row-fluid">
<div class="span12 clearfix">
<div class="span1">{1}</div>
<div class="span3">{2}</div>
<div class="span7"><input type="text" name="image_url[]" class="text required img_url" value="{0}" /></div>
<div class="span1">remove</div>
</div>
</div>
When I click remove link,I want remove it main container div(row-fluid).
I tried but it doesn't work.
$(this).closest('div').closest('div').closest('div').remove();
Have you tried
$(this).parents('div.row-fluid').remove();
Demo
You function doesn't work because closest begins with the current element, so looking for a div starting from a div will always return...itself!