We Keep Coding

Closest parent selector in AngularJS

I have a working code to close a custom popup using jQuery, but I want a solution using AngularJS instead of jQuery.
Anyone can help me out to find this.closest() in AngularJS.
I want to hide .popOverlay on click of .popClose using AngularJS, not jQuery. And I don't want to use perticular class/id becoz I have many popups like this, I want to a common solution for all of them.
Here is my working jQuery Code:
function popClose(e)
{
$(e).closest('.popOverlay').fadeOut('slow');
}
.popOverlay { background:rgba(0,0,0,.5); width:100%; height:100%; overflow-y:auto; position:fixed; left:0; top:0;}
.popBox { background:#fff; border-radius:5px; position:relative; width:400px; max-width:90%; padding:20px; margin-left:auto; margin-right:auto; margin-top:50px;}
.popClose { display:inline-block; position:absolute; top:5px; right:10px; cursor:pointer; color:#f00; font:bold 16px Arial, Helvetica, sans-serif;}
.heading { color:#0077c8; font:bold 16px Arial, Helvetica, sans-serif; margin-top:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popOverlay">
<div class="popBox">
<a class="popClose" onClick="popClose(this)">x</a>
<h3 class="blue-heading">This is a custom popup.</h3>
</div>
</div>

To achieve expected result, use ng-hide on div with class-popOverlay and set it to true on click of x
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<div class="popOverlay" ng-hide="closePop">
<div class="popBox">
<a class="popClose" ng-click="popClose()">x</a>
<h3 class="blue-heading">This is a custom popup</h3>
</div>
</div>
</div>
JS:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.popClose= function(){
$scope.closePop= true;
};
});
http://codepen.io/nagasai/pen/XKgEbE

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popOverlay" ng-hide="popclose">
<div class="popBox">
<a class="popClose" onClick="popClose("true")">x</a>
<h3 class="blue-heading">This is a custom popup.</h3>
</div>
</div>
function popClose(status)
{
if(status=="true"){
$scope.popclose=true;
}
}
try this. it worked for me

you can use "bootstrap modal" instead.
visit http://getbootstrap.com/javascript/#modals

Unable to change text color using jQuery

I am unable to change the text color using jQuery.I have gone through other similar questions and tried to implement the solutions but somehow its not working. Not sure where I am going wrong. please help. I have created a demo
CODE
HTML
<div class="wrapper">
<button class="addItem">Add Item</button>
<button class="removeItem">Remove Last Item</button>
<div class="clear">
</div>
<div class="colr blue">blue</div>
<div class="colr red">red</div>
<div class="clear">
</div>
<ul class="items">
<li class="newItem">ONE</li>
<li class="newItem">ONE</li>
</ul>
</div>
CSS
.clear{
clear:both;
}
.colr{
height:20px;
width:50px;
float:left;
color:white;
padding:10px;
margin:10px;
text-align:center;
cursor:pointer;
}
.blue{
background:blue;
}
.red{
background:red;
}
jQuery
$(document).ready(function(){
$('.addItem').click(function(){
$('.items').append("<li class=\'newItem\'>NEW ITEM</li>");
});
$('.removeItem').click(function(){
$('.items li:last-child').remove();
});
$('blue').click(function(){
$('.items').css('color','blue');
});
$('red').click(function(){
$('.newItem').css('color','red');
});
});

Here you can try this code
$('.blue').click(function(){
$('.items').css('color','blue');
});
$('.red').click(function(){
$('.newItem').css('color','red');
});
Js fiddle link click here

Add icons inside textbox area onfocus event, using bootstrap and javascript

Does anybody knows how can I add some bootstrap icons to my textarea. Icons should show on focus and hide on focus out. This textarea is similary, if not the same as Facebook Add new status textarea.
All I was able to do is to expand and shrink textarea onfocus/focusout events, using JavaScript.
This is the code I have:
HTML:
<div class="jumbotron" style="height:150px">
<div class="col-lg-12">
<textarea class="expand" rows="3" cols="20"></textarea>
</div>
</div>
JS:
<script type="text/javascript">
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
});
$('textarea.expand').focusout(function () {
$(this).animate({ height: "2em" }, 500);
});
</script>
CSS:
.expand
{
height: 2em;
width: 50%;
}
I've also try using .css in JS and trying to add icon, but I suppose I don't do this right way, cause nothing gets shown.
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
$(this).css('glyphicon glyphicon-camera');
});
Textarea should behave like this:
OnFocusOut:
OnFocus:
Can someone help me, and give me an idea on how to do this...Because I'm pretty bad in JS.

One Simple answer can be creating a sibling div element to the textarea which will contain all the icons, show the div of focusing the textarea and hide it on focusout of the textarea

This example is using the selector
.parent:hover .links{}
but could be edited to
.parent:focus .links{}
if desired. However, to show you this in action, i've designed a simple demo below:
.parent{
height:100px;
width:70%;
background:red;
position:relative;
}
.parent:hover .links{
display:block;
}
.links{
display:none;
position:absolute;
bottom:0;
}
<div class="parent">
<div class="child">
<div class="links">
facebook twitter etc
<img src="http://placekitten.com/g/20/20" alt="" />
</div>
</div>
</div>
An example using Sibling selectors
Here is a working example of using the sibling selector
input:focus + .items
which selects the class .items of which has a sibling of 'input' which has a focus (i.e. what you're looking for)
#parent{
height:100px;
width:80%;
background:red;
position:relative;
}
.items{
bottom:0;
padding:5px;
display:none;
}
input:focus + .items{
display:block;
}
<div id="parent">
<input type="text" placeholder="enter text"/>
<div class="items">
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
</div>
</div>

Toggle Between two Divs [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am facing a Problem in making Some Toggle Effect with JQuery between Two divs . I am at very poor level on jQuery. and with that knowledge I failed to make to toggle between two divs .
Current code in JS fiddle : http://jsfiddle.net/WSCBu/
I have Three Divs Class name Blue , Gray and orange . What I am trying to make is : when page loads Only two div Blue and Gray will Show and when I click the Text "Show" on Gray div The gray div will Hide and Orange Div will show . and When I click "Hide" text in Orange div this Orange div will Hide and again will show Gray div . May be it can be done with toggle function ? I am really not sure how . Hope for the Experts it may easy one ! I will very thankful if anyone Show me the process .
here is HTML
<div class="blue"></div>
<div class="gray">
<p> Show --> </p>
</div>
<div class="orange">
<p> -- Hide </p>
</div>
Css
.blue{
height:100px;
width:250px;
background:#1ecae3;
float:left;
}
.gray{
height:100px;
width:100px;
background:#eee;
float:left;
}
.orange{
height:100px;
width:150px;
background:#fdcb05;
float:left;
}

As you guessed, toggle() will do the job. When either .gray or .orange is clicked, we toggle the visibility of both:
$('.orange').hide();
$('.gray, .orange').on(
'click',
function()
{
$('.gray, .orange').toggle()
}
);
$('.orange').hide();
$('.gray, .orange').on('click',
function() {
$('.gray, .orange').toggle()
}
);
.blue {
height: 100px;
width: 250px;
background: #1ecae3;
float: left;
}
.gray {
height: 100px;
width: 100px;
background: #eee;
float: left;
}
.orange {
height: 100px;
width: 150px;
background: #fdcb05;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue"></div>
<div class="gray">
<p>Show --></p>
</div>
<div class="orange">
<p>-- Hide</p>
</div>

DEMO
$('.orange').hide();
$('.gray p').click(function(){
$('.gray').hide();
$('.orange').show();
});
$('.orange p').click(function(){
$('.gray').show();
$('.orange').hide();
});
Shorter code with .toggle()
DEMO
$('.orange').hide();
$('.gray p,.orange p').click(function(){
$('.gray,.orange').toggle();
});

Use following js :
jQuery('.gray').click(function(){
jQuery(this).hide();
jQuery('.orange').show();
});
jQuery('.orange').click(function(){
jQuery(this).hide();
jQuery('.gray').show();
});
Here is the working fiddle : http://jsfiddle.net/WSCBu/6/

Similar to above answer:
$('.gray').click(function () {
$(this).toggle();
$('.orange').toggle();
});
$('.orange').click(function () {
$(this).toggle();
$('.gray').toggle();
});
Demo.

$(".gray").click(function(){
$(".gray").toggle();
$(".orange").show();
});
$(".blue").click(function(){
$(".blue").toggle();
$(".orange").show();
});
$(".orange").click(function(){
$(".blue").toggle();
$(".gray").toggle();
$(".orange").toggle();
});
DEMO

$('.orange').hide();
$(".gray p").click(function(){
$(".gray").hide();
$(".orange").show();
})
$(".orange p").click(function(){
$(".orange").hide();
$(".gray").show();
})

Add a class show to the two div and then you can use a toggle method. example http://jsfiddle.net/WSCBu/21/
shown here.
<div class="blue"></div>
<div class="gray show" style="display:none";>
<p> Show --> </p>
</div>
<div class="orange show">
<p> -- Hide </p>
</div>
$(document).on('click','.show',function(){
$('.show').toggle();
});

I guess it should as simple as the following code. Please forgive the code alignment. Answering it via my cell phone :)
<style>
.blue{
height:100px; width:250px; background:#1ecae3; float:left; }
.gray{
height:100px; width:100px; background:#eee; float:left; }
.orange{ height:100px; width:150px; background:#fdcb05; float:left; display:none;}
</style>
<div class="blue"></div>
<div class="gray"> <p> Show --> </p> </div>
<div class="orange"> <p> -- Hide </p> </div>
<script>
$(".gray p").click(function() {
$(".gray").hide();
$(".orange").show();
});
$(".orange p").click(function() {
$(".gray").show()
$(".orange").hide();
} );
</script>

Simulate this slider effect with jquery (instead of mootools) [Horizontal accordion effect]

I can use javascript and everything else, but before reinventing the wheel, I would like to know if there is already a similar plugin for jquery because I would like to use that framework and not mootools.
I don't have problems with money, expecially for a 5€ template, but really I would like to use jquery because I studied it and not mootools.
The template: http://www.globbersthemes.com/demo/upsilum/
EDIT 1: I changed the title for future references for people that know the correct name of this type of effect, thanks to everyone.

i always liked the jquery tools tabs for this - see http://flowplayer.org/tools/demos/tabs/accordion-horizontal.html

Here a plugin that might interest you : http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html

Here, I reinvented the wheel. But had looot of fun! :)
Tested in all modern browsers + IE 6-7-8
Instead of using 'title' images now you can use classic editable text!
Set desired 'start' tab
EDIT: added/fixed title support (rotaion for IE 6-7-8)
H - ACCORDION DEMO
The simple HTML:
<div id="acc">
<div class="title"><p class="button">Title 1</p></div>
<div class="cont">Cont 1</div>
<div class="title"><p class="button">Title 2</p></div>
<div class="cont">Cont 2</div>
<!-- more tabs here.... -->
</div>
The CSS style Ex:
.title{
cursor:pointer;
position:relative;
float:left;
width:20px;
height:200px;
background:#444;
color:#ccc;
padding:15px;
border-left:3px solid #aaa;
}
.cont{
position:relative;
float:left;
width:300px;
background:#999;
height:200px;
padding:15px;
}
.slide{
position:relative;
float:left;
overflow:hidden;
width:0px;
}
.active{
background:#cf5;
color:#444;
}
.button{
white-space:nowrap;
margin-top:180px;
font-size:20px;
line-height:25px;
text-align:left;
}
And the fun part: jQuery !
//+IE678//// HORIZONTAL ACCORDION // roXon //////
var curr = 3; // set desired opened tab
var contW = $('.cont').outerWidth(true);
$('.cont').wrap('<div class="slide" />');
$('.slide').eq(curr-1).width(contW).prev('.title').addClass('active');
$('.title').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.slide').stop().animate({width:0},700);
$(this).next('.slide').stop().animate({width:contW},700);
});
// TITLE ROTATION IE 6-7-8 FIX //
var titleH = $('.title').height();
var btn = $('.button');
btn.css('-webkit-transform','rotate(-90deg)');
btn.css('-moz-transform','rotate(-90deg)');
btn.css('transform','rotate(-90deg)');
if($.browser.msie && $.browser.version<="8.0"){
btn.css({
filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)',
width: titleH+'px',
position:'absolute',
marginTop:'0px'
});
}
One more thing- you'll just have to wrap the accordion into a positioned 'container' with set height and width to avoid accordion elements 'dance' on window resize.