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
Related
How to create folder with specific name in javascript? I don't want to create folder in PC, but just create HTML's div with specific content inside. The name should be entered when I click "create new folder" and after I hit enter div appears just below "create new folder" section. I don't want to hard code all elements and so on, so maybe there is an easier way to do that?
I want to create something like this, but appending this code in javaScript would be nonsense
<div class="new_folder">
<div class="folder_icon">
<div class="folder_icon_border">
<div class="folder_icon_bubble"></div>
<div class="folder_icon_bubble"></div>
<div class="folder_icon_bubble"></div>
</div>
</div>
<div class="folder_name">
<p class="folder_name_txt"></p>
</div>
<div class="folder_do">
<div class="icon" ng-click="someFunction()"></div>
</div>
</div>
There's multiple method to do that, it's just an append of html in a container.
You can try something like this
$(document).ready(function(){
$("#buttonCreateFolder").click(function()
{
var name=$("#folderName").val();
if(name!="")
{
var div="<div class='folder'><span class='fname'>Folder : "+name+"</span> Your content here</div>";
$(".container").append(div);
$("#folderName").val("");
}
});
});
.folder{
position:relative;
background-color:yellow;
width:300px;
height:150px;
margin:20px;
border:solid 1px #999;
padding:40px 10px 5px 10px;
display:inline-table;
}
.fname{
position:absolute;
width:100%;
text-align:center;
border-bottom:solid 1px black;
top:0;
left:0;
height:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<input type="text" id="folderName" name="folderName" placeholder="Folder Name"> <button id="buttonCreateFolder">
Create Folder
</button>
<div class="container">
</div>
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
I've made a small directive for my AngularJS application, here is the directive template:
<div style="width:100px; height:30px; background-color:white;">
<div style="background-color:khaki; width:100%; height:30px; text-align:center;" >
<span ng-if="show_label" ng-dblclick="ChangeTitle($event)">{{ GetTitle() }}</span>
<textarea style="z-index:1000000"></textarea>
</div>
</div>
<div style="width:100px; height:120px; background-color:skyblue;" >
<div style="height:24px; width:24px; background-color:orange; position:relative; top:50px; left:50px;
z-index:2000; cursor:hand; cursor:pointer;" ng-click="SwitchRoot()" onclick="SwitchRoot2()"></div>
</div>
I have a small problem: my text area (or text box) doesn't receive any input, meaning that I cannot type anything in the textbox!
what is the problem? what is going wrong here?
please help me! been stuck for very long. I coded the exact same thing in my html file but it is not working at all.
i inserted the javascript under the HEAD section.
Here is my fiddle
The HTML:
<div id="content">
<div id="colone">
<div id="introbox" class="test">
</div>
<div id="infobox" class="test">
<div style="border-bottom:1px solid #666;width:160px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;">
INFO
</div>
</div>
</div>
<div id="coltwo">
<div id="aboutbox" class="test">
<div style="border-bottom:1px solid #666;width:250px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;">
ABOUT
</div>
</div>
<div id="gallerybox" class="test">
<div style="border-bottom:1px solid #666;width:260px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;">
GALLERY
</div>
</div>
</div>
<div id="colthree">
<div id="contactbox" class="test">
<div style="border-bottom:1px solid #666;width:180px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;">
CONTACT US
</div>
</div>
<div id="extrabox" class="test">
<div style="border-bottom:1px solid #666;width:160px;margin-top:20px;margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;">
EXTRAS
</div>
</div>
</div>
The JavaScript:
$(document).ready(function() {
$(".test").hover(function() {
$(".test").not($(this)).css({
"opacity": 0.1
});
}, function() {
$(".test").css({
"opacity": 1
});
});
});
Only three posibilities here
The script should be placed in header section of your web page as it is called onload
Second is the jQuery library version which on jsfiddle its 1.7.2 so either your jQuery version is old or you are not using the library at all
Third is that you must be missing <script></script> tags as jsfiddle don't need it
The most probably cause for the same is that the script needs to be executed after the DOM is ready which is something ensured by jsfiddle.
It would be great if you provide a link to the fiddle.
Sounds like you have not included JQuery in your header. Add the following:
<script src="jquery_js_goes_here"></script>
I'd grab the latest and look at using the available cdn (or google's cdn) E.g
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
Hope that helps.
I have two buttons and two divs(I put one above another). I made "info" class visible and "info2" hidden. I need when pressed on "Global" button - "info" div is shown and on the "Asia" button - "info2" div. I tried this code but it's not working:
$('.corpo_button_asia').click(function(){
$('.info').hide;
$('.info2').show;
});
$('.corpo_button_global').click(function(){
$('.info').show;
$('.info2').hide;
});
Here is html code:
<div clas"corpo_buttons">
<div class="corpo_buttons_global">
Global
</div>
<div class="corpo_buttons_asia">
Asia
</div>
</div>
<div class="info">
Info1
</div>
<div class="info2">
Info2
</div>
and css:
.corpo_buttons
{
height:50px;
}
.corpo_buttons_global
{
position:absolute;
z-index:10;
width:50px;
float:left;
background-color:rgb(23,55,94);
color:#FFF;
padding:2px;
border:thick;
border-color:rgb(23,55,94);
border-width:1px;
border-style:solid;
}
.corpo_buttons_asia
{
position:relative;
z-index:2;
left:45px;
width:50px;
float:left;
padding:2px;
background-color:rgb(197,197,197);
padding:2px;
border:thick;
border-color:rgb(23,55,94);
border-width:1px;
border-style:solid;
}
.info
{
position:absolute;
margin-top:21px;
width:150px;
height:60px;
border:thick;
border-color:#000;
border-width:1px;
border-style:solid;
text-align:left;
padding:5px;
font-size:10px;
}
.info2
{
margin-top:21px;
width:150px;
height:60px;
border:thick;
border-color:#000;
border-width:1px;
border-style:solid;
text-align:left;
padding:5px;
font-size:10px;
visibility: hidden;
}
Notwithstanding the class error noticed by #Sorpigal, the other problem is that you don't actually call .show and .hide because you've omitted the parentheses after the function names.
They should say .show() and .hide() !
This could be related to your "visibility: hidden;" in .info2. I'd suggest trying it with "display: none;" instead.
The way the jquery show/hide methods work is by toggling the display from none to block and back again. Chances are it's not paying attention at all to your visibility state.
If your absolutely dependant on visibility in your css you can change the code to toggle that one instead:
$('.info').css('visibility', 'hidden');
$('.info2').css('visibility', 'visible');
The problem is that your class assignment reads <div class="corpo_buttons_asia"> but in jquery you say .corpo_button_asia - note the "button" vs "buttons"
Fix this first.
Try with this:
DEMO jsBin
$('.corpo_buttons_asia').click(function(){
$('.info').hide();
$('.info2').show();
});
$('.corpo_buttons_global').click(function(){
$('.info').show();
$('.info2').hide();
});
Check Corrected one as Below
<div>
<div class="corpo_buttons">
<div class="corpo_buttons_global">
Global
</div>
<div class="corpo_buttons_asia">
Asia
</div>
</div>
<div class="info">
Info1
</div>
<div class="info2">
Info2
</div>
</div>
</form>
<script language="javascript">
$('.corpo_buttons_global').click(function(){
$('.info').hide();
$('.info2').show();
});
$('.corpo_buttons_asia').click(function(){
$('.info').show();
$('.info2').hide();
});
</script>
your html class names does not match with jquery selectors.
<div clas in the 1st line of your html should be as <div class=.
anyway I created a jsfiddle for you. hope this helps
http://jsfiddle.net/5MvHZ/1/