I'm facing the following issue: I'm working with Angular1.x and I have a subpage with small, clickable images and some other stuff below these imgs.
Only the images should be visible, all the other things should be hidden.
When the user clicks on an image, this hidden-visible has to flip, so the whole image session goes hidden and the content below comes visible.
I have a jQuery solution, but I'm seeking a more semantic one with Angular.
(function($){
$(document).ready(function(){
$('.showOverlay').click(function(){
$('#container').hide();
$('#box').show();
});
$('.hideOverlay').click(function(){
$('#container').show();
$('#box').hide();
});
});
})(jQuery);
I hope this piece of code explains the idea behind.
When you click "Show overlay", it will call the showOverlay() function, same for "Hide overlay":
<div ng-click="showOverlay()">Show overlay</div>
<div ng-click="hideOverlay()">Hide overlay</div>
<div ng-show="container">Shown when $scope.container is true</div>
<div ng-show="box">Shown when $scope.box is true</div>
Add the following functions in your controller:
$scope.showOverlay = function() {
$scope.container = false;
$scope.box = true;
}
$scope.hideOverlay = function() {
$scope.container = true;
$scope.box = false;
}
I would suggest using ng-hide:
in your html
<div ng-hide="myValue"></div>
<button ng-click="show()">show</button
<button ng-click="hide()">hide</button
then in your javascript:
$scope.show = function(){
$scope.myValue = false;
}
$scope.hide = function(){
$scope.myValue = true;
}
Is there any instance when both the container and box should be visible? If not, I dare say you should use the same variable for both of them, like so:
<img ng-src="{{img}}.png" ng-click="hideImage()" ng-show="imageShown">
<div ng-click="showImage()" ng-show="!imageShown">
And in your controller:
$scope.hideImage = function() {
$scope.imageShown = false
}
$scope.showImage = function() {
$scope.imageShown = true
}
Maintaining two variables for values that always mirror each other just seems irresponsible.
Related
I have an angular function
$scope.show = function(el){
if($scope.steps[el] == true){
$scope.steps[el] = false;
}
else{
$scope.steps = [];
$scope.steps[el] = true;
}
}
When I call It by click this
<span class="" ng-click="show('getDate')">text</span>
Then a class 'shown' adds in this div
<div class="form-block steps second" ng-class="{shown : steps.getDate}">
but I don't get the class when call the fanction in this cod
$(document).on('click', "li", function() {
$scope.show('getDate');
console.log($scope.steps);
});
but in console i get this log
[getDate: true]
LI tag generated with JS by jquery.formstyler http://dimox.name/jquery-form-styler/ from SELECT tag
As #charlietfl stated this is happening due the fact that you updated your DOM outside of the "Angular" world. Thus, resulting of angular not knowing you did such a change.
In order to fix it you should force angular to digest by using the keyword $apply.
Example:
$(document).on('click', "li", function() {
$scope.$apply(function () {
$scope.show('getDate');
});
console.log($scope.steps);
});
Important Note: Most of the time It's poor behavior to use jQuery rather than the AngularJS way.
Thanks for #Bhojendra Nepal for noticing the bug.
i want to add class to multiple divs after click on button.
here is my code :
$scope.noneStyle = "noneVisible";
$scope.bodyCon = "notRotate";
$scope.addStyle = function () {
if ($scope.noneStyle === "noneVisible" && $scope.bodyCon ==="notRotate") {
$scope.noneStyle = "visibleStyle";
$scope.bodyCon = "rotate";
}
else
$scope.noneStyle = "noneVisible";
$scope.bodyCon = "notrotate";
}
HTML
Click
<aside class="rightbar {{noneStyle}} {{visibleStyle}}"></aside>
<div class="container-fluid {{bodyCon}} {{rotate}}"></div>
here is the Demo:http://jsfiddle.net/sadeghbayan/dbnb2f9x/
You are trying to print scope variables in your markup visibleStyle and rotate that are not defined in the scope.
You are using these names as strings, not javascript variables. Fix this, and everything should work fine.
The reason why your solution isn't working, is because the {{noneStyle}} is immediately parsed as text.
You can use ng-class to achieve this.
I've edited your JsFiddle to achieve this:
http://jsfiddle.net/dbnb2f9x/3/
myApp.controller('mainCtrl', function ($scope) {
$scope.noneStyle = false;
$scope.bodyCon = false;
//Toggle the styles
$scope.toggleStyle = function () {
//If they are true, they will become false
//and false will become true
$scope.bodyCon = !$scope.bodyCon;
$scope.noneStyle = !$scope.noneStyle;
}
});
and in the HTML:
<div ng-app="myApp" ng-controller="mainCtrl">
Click
<aside ng-class="{'noneStyle' : noneStyle}"class="rightbar"></aside>
<div ng-class="{'bodyCon' : bodyCon}" class="container-fluid"></div>
</div>
when the bodyCon $scope variable is true, the class 'bodyCon' will be added to the div because of this rule:
ng-class="{'bodyCon' : bodyCon}"
You can add mutliple statements:
ng-class="{'bodyCon' : bodyCon, 'helloWorldClass' : myVariable == 'helloWorld'}"
In above example the class: "helloWorldClass" will be added when $scope.myVariable equals 'helloWorld'
Hope this helps you with your problem!
I am using 'slideToggle' to open a couple divs on a site and want to ensure all of the divs are closed before another is opened. Is there a way to run a if..then to ensure a toggled div isn't open before opening another?
Here is my script;
<script type="text/javascript">
$(function()
{
$("a#toggle").click(function() {
$("#contact").slideToggle(500);
return false;
});
$("a#toggle_about").click(function(){
$("#about").slideToggle(500);
return false;
});
});
</script>
Calling tag;
<li>Contact Me</li>
And called div;
<div id="contact">blah, blah...</div>
And CSS;
#contact{display: none; padding: 7px; font-size: 14px;}
Thanks,
------EDIT------
This seems to work ok, I can control the transition by setting speed to 500 or 0. It just seems like a lot of code for a simple if..then.
Thanks for the suggestions and possible solutions.
<script type="text/javascript">
$(function()
{
$("a#toggle").click(function(){
if ($("#about").is(':hidden')){
$("#contact").slideToggle(500);
return false;
}else{
$("#about").slideToggle(500);
$("#contact").slideToggle(500);
return false;
}
});
$("a#toggle_about").click(function(){
if ($("#contact").is(':hidden')){
$("#about").slideToggle(500);
return false;
}else{
$("#contact").slideToggle(500);
$("#about").slideToggle(500);
return false;
}
});
});
</script>
Fiddle Example
If you add appropriate classes to your html and change the href to target the div it needs to open, you can significantly simplify your code.
<ul>
<li>Contact Me</li>
<li>About Me</li>
</ul>
<div id="contact" class="toggleable">blah, blah...</div>
<div id="about" class="toggleable">blah, blah...</div>
Now you can handle both links with a single event.
$(".toggler").click(function (e) {
e.preventDefault();
var target = $(this).attr("href");
$(".toggleable").not(target).hide();
$(target).slideToggle();
});
the end result is when you click on "Contact Me", about will hide if it is open, and contact will show if it is hidden or hide if it is shown.
http://jsfiddle.net/nYLvw/
You could implement a helper function to collapse any visible elements with a certain class, and then call that every time you're about to toggle a div.
The markup:
<div id="contact" class="toggle-content">blah, blah...</div>
The code:
function hideToggleContent() {
$('.toggle-content:visible').slideUp( 500 );
}
$(function() {
$("#toggle").click( function() {
var isVisible = $("#contact").is(':visible');
hideToggleContent();
if( isVisible ) {
return false;
}
$("#contact").slideDown( 500 );
return false;
});
$("#toggle_about").click( function() {
var isVisible = $("#about").is(':visible');
hideToggleContent();
if( isVisible ) {
return false;
}
$("#about").slideDown( 500 );
return false;
});
});
You might also check out the jQuery UI accordion, it's default behavior accomplishes the same. http://jqueryui.com/accordion/
UPDATE: Added Fiddle Link For Example
There are several ways to solution this problem.
Whenever you are tweening for effect, and you want to only tween if not already tweening, you will want to track the state of your tween.
Typically, you might have a trigger/toggler, and a target. I like to use closures to accomplish the state tracking. I might use something like this:
$(function () {
// closures
var $togglers = $('[selector][, selector]');
var $target = $('[selector]');
$target.tweening = false;
var tweenStop = function () {
$target.tweening = false;
};
var togglerClick = function () {
if (!$target.tweening) {
$target.tweening = true;
$target.slideToggle(500, tweenStop);
}
};
// handle the event
$togglers.click(togglerClick);
});
>> SAMPLE FIDDLE <<
i would like to create a one-page website where on click of the button the impressum-div will fade in. Another Click on the same button would then fadeOut the impressum-div.
I already managed it to fadeIn the div on click.
But when I try to use "if" the whole thing doesn't work anymore.
I already found some tipps here and tried them all but nothing really worked for me..
Here my Script-Code:
<script type="text/javascript">
$(document).ready(function() {
function display() {
if (document.getElementById("impressum").style=="none") {
$('#impressum').fadeIn();
}
if (document.getElementById("impressum").style=="block") {
$('#impressum').fadeOut();
}
}
});
</script>
I tried this in several versions (with .click() and so on..), so this is probably totally wrong.
Here my HTML-Code:
<input type="button" id="iButton" value="Impressum" onclick="javascript:display()"/>
<div id="impressum" style="display:none">
<p>Here Impressum</p></div>
Help is very much appreciated, if you could post a complete Function it would bethe best because i am only putting parts wildly together..
Greetings
Just use fadeToggle()
<input type="button" id="iButton" value="Impressum" onclick="javascript:display()" />
<div id="impressum" style="display:none">
<p>Here Impressum</p>
</div>
then
$(document).ready(function () {
$('#iButton').click(function () {
$('#impressum').stop(true).fadeToggle();
})
});
Demo: Fiddle
HTML
<div id="impressum" style="display:none">
<p>Here Impressum</p>
</div>
JavaScript
$('#iButton').click(function () {
$('#impressum').stop(true).fadeToggle();
});
fiddle: http://jsfiddle.net/xKpLe/
You cannot retrieve the display value like that, you need to use window.getComputedStyle:
var elem = document.getElementById("impressum"),
display = window.getComputedStyle(elem,null).getPropertyValue("display");
Fiddle Demo
/* 1: <div onclick="display(this);"></div>*/
var display = function(elm){
var status = G(elm).attrib('data-display')||'false';
if(status=='false'){
G(elm).css({display:'block'});
G(elm).attrib('data-display', 'true');
return false;}
if(status=='true'){
G(elm).css({display:'none'});
G(elm).attrib('data-display', 'false');
return false;}
};
/* 2 */
/* elm.onclick = display;*/
var display = function(ev){
var elm = this||G(ev).source(); //Choice
var status = G(elm).attrib('data-display')||'false';
if(status=='false'){
G(elm).css({display:'block'});
G(elm).attrib('data-display', 'true');
return false;}
if(status=='true'){
G(elm).css({display:'none'});
G(elm).attrib('data-display', 'false');
return false;}
};
I am a jquery newbie and i am creating boxes with jquery and then "deleting" them. But I want to use the same code to delete the box in the scope of the created element and the scope of a already created element.
Html:
<button id="create">Cria</button>
<div id="main">
<div class="box">
<a class="del-btn" href="#">Delete</a>
</div>
</div>
JS:
var box = {
create: function() {
var box = $('<div class="box">');
var delBtn = $('<a class="del-btn" href="#">Delete</a>');
box.appendTo('#main');
delBtn.appendTo(box);
},
destroy: function(elem) {
elem.fadeOut();
}
}
function deleteBox () {
}
$(function() {
$('#create').click(function() {
box.create();
});
$('.del-btn').click(function() {
var elem = $(this).parent();
box.destroy(elem);
return false;
});
});
If I put the delete event inside the create click event, I just can delete the dynamically created element. If I put it outside, then I can just delete the element in the HTML. I know this is a simple question, but I can't figure out how to solve it. Thanks
You can use delegated-events approach:
$("#main").on("click", ".del-btn", function() {
var elem = $(this).parent();
box.destroy(elem);
return false;
});