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];
});
Related
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 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
for example I have this html code:
<div class="product">
<p>Name1<p>
</div>
<div class="product">
<p>Name2<p>
</div>
<div class="product">
<p>Name3<p>
</div>
<div class="product">
<p>Name4<p>
</div>
<div class="settings">
<p>SETTINGS<p>
</div>
I made settings class to display nothing in css, unless I click on one of 4 p elements in product class. After click the settings class appears at the bottom as it should be.
How should I make that if I click for example Name2 then settings class appears after Name2 and not at the bottom?
Use $(this) to target the element you clicked on, combined with insertAfter() to add the content to this element.
Run the code snippet below and click on any of the elements with the classname product to see how this works.
$(".product").click(function(){
$(".settings").insertAfter($(this));
});
$(".product").click(function(){
$(".settings").insertAfter($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Name1
<p>
</div>
<div class="product">
<p>Name2
<p>
</div>
<div class="product">
<p>Name3
<p>
</div>
<div class="product">
<p>Name4
<p>
</div>
<div class="settings">
<p>SETTINGS
<p>
</div>
You can use .insertAfter() :
$(function(){
$('.product p').click(function(){
$('.settings').insertAfter($(this).closest('.product '))
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Name1<p>
</div>
<div class="product">
<p>Name2<p>
</div>
<div class="product">
<p>Name3<p>
</div>
<div class="product">
<p>Name4<p>
</div>
<div class="settings">
<p>SETTINGS<p>
</div>
You can do it like,
$(".product > p").click(function(){
var $parent = $(this).parent(".product");
$parent.siblings(".settings").insertAfter($parent);
});
by using .insertAfter()
DEMO
Got a product loop, where I need to change images on click. Like in every product loop, there is a whole bunch of divs with same classes. Which in my case get affected. Can't isolated them. Initial image does disappear. But not a single one, that's intended, but all of them. And no new images appear
html of the single product
<div class="product">
<div class="galwrap displaytable">
<div class=" galitem galitem1"></div>
<div class=" galitem galitem2"></div>
</div>
<div class="displaytable galcolors">
<div class="displaytablecell galcolor galcolor1"></div>
<div class="displaytablecell galcolor galcolor2"></div>
</div>
</div>
and jquery
$(".product").each(function () {
$(this).find(".galcolor2").click(function () {
$(".galitem").hide();
$(this).parent().find(".galitem2").show();
});
});
http://jsfiddle.net/h1twaf1y/
http://jsfiddle.net/q72nw00t/2/
Javascript:
$(".galcolor2").click(function(){
$(".galitem").hide();
$(this).parent().parent().find(".galitem2").show();
});
HTML: (this is just a section repeated over and over again)
<div class="product">
<div class="galwrap displaytable">
<div class=" galitem galitem1">this will be hidden</div>
<div class=" galitem galitem2" style="display: none">this will be shown</div>
</div>
<div class="displaytable galcolors">
<div class="displaytablecell galcolor galcolor1"></div>
<div class="displaytablecell galcolor galcolor2">click this</div>
</div>
</div>
----------
<div class="product">
<div class="galwrap displaytable">
<div class=" galitem galitem1">this will be hidden</div>
<div class=" galitem galitem2" style="display: none">this will be shown</div>
</div>
<div class="displaytable galcolors">
<div class="displaytablecell galcolor galcolor1"></div>
<div class="displaytablecell galcolor galcolor2">click this</div>
</div>
</div>
----------
<div class="product">
<div class="galwrap displaytable">
<div class=" galitem galitem1">this will be hidden</div>
<div class=" galitem galitem2" style="display: none">this will be shown</div>
</div>
<div class="displaytable galcolors">
<div class="displaytablecell galcolor galcolor1"></div>
<div class="displaytablecell galcolor galcolor2">click this</div>
</div>
</div>
Basically you want to listen for any clicks on ALL .galcolor2, then when that is clicked, hide all .galitem, and then only show the RELATED .galitem2 by going up two levels to the div.product and finding the correct item
The problem in your initial code, is that you only went up ONE level with parent() to div.galcolors where you should have instead went up TWO levels with parent().parent(), up to div.product.
You want to find .galitem relative to the item clicked, the way you can find that is to use $.closest(). Closest will travel up the DOM tree (starting with the current node) until it finds a matching selector, which is much better than using parent because you're not dependent on the DOM structure making your code less brittle and easier to read. So your code would look like this instead:
$(".product").each(function(){
$(this).find(".galcolor2").click(function(){
$(".galitem").hide();
$(this).closest(".product").find(".galitem2").show();
});
});
<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!