I have a bool called isStarted that is initially set to false.
I have two divs, one that has:
hidden={isVisible}
and the other has:
hidden={!isVisible}
I have a href link that has a onclick that calls a function which changes the bool value to it's inverse value. I confirm this by also console.logging the bools value. Each time I click it the value changes.
However the the divs do not change visibility, it just keeps showing the first one.
div1:
<div
className="relative"
hidden={isVisible}
> div1 </>
div2:
<div
className="relative"
hidden={!isVisible}
> div 2 </>
I also confirmed these divs show independently by manually setting the isVisible to true and false at the start.
EDIT:
This way works to change the visibility also, but only works the first time when the app goes live:
{isVisible && <div>wow</div>}
However when I click and change the isVisible value it still won't change the divs.
The hidden HTML attribute does not exist. You might be looking for the display CSS attribute.
<div style={{ display: none }} />
Offtopic personal suggestion: I'd suggest you starting learning React using TypeScript from the beginning. TS will warn you when an attribute does not exist and help you on your learning path.
EDIT:
It is display: none (removes the element) or visibility: hidden (hides but still takes space. I might have been on drugs when writing this.
Related
I am mapping of array of object which multiplies my component, its working properly but the problem is when I add another object to it somehow its hidden not sure why
{EditMultiObject.map((object, key) => (
<SubFormEditCom
key={key}
identifyNumber={key}
onEditBasicChange={onEditBasicChange}
onEditCalendarChange={onEditCalendarChange}
onEditChangeUrl={onEditChangeUrl}
lastObject={EditMultiObject.length === key + 1 ? true : false}
onEditAddNewObject={onEditAddNewObject}
/>
))}
You will noticed the first element is the initial object I set the second is the one I created when I click a add button. The style on the second div is missing(the newly added one) an inline style, note that I didnt even put an inline style in my code I assume it was added by react
I think I know now whats the solution for this I think its because of the third party library
We have a popup modal in our Angular application which contains, among other things, a <span> element which should appear, and then fade, when a certain button is clicked. This all works as expected. But there is one problem. When the modal first loads, the <span> momentarily appears, then fades out. The behavior is consistent with the <span> having ng-show set to true, but then set to false at the time the modal is loaded, triggering the fade out transition.
Here is the <span>:
<span id="fileLinkCopied" data-ng-show="copyLinkClicked"
class="text-fade float-right">file copied to clipboard</span>
But the varible $scope.copyLinkClicked is set to false when the controller loads, and hence we would expect to never even seen the <span> being rendered at load time.
Here is the relevant CSS:
.text-fade {
transition: all linear 500ms;
opacity: 1;
}
.text-fade.ng-hide {
opacity: 0;
}
This problem was discussed in this SO question, but no definitive solution was given. We have pondered turning off the animation for this element, but this may have problems as well.
Any solution which gets the job done within normative usage of Angular would be greatly appreciated.
One quick workaround would be to add another span tag as the parent of your span element. You can then add an ng-if condition to the parent element and use a variable that is set to false initially in the if condition. This would make sure that the child span is not rendered when the page loads and therefore you wouldn't see the animation. You can then set the value of that variable to true on document ready event.
Here is the <span>:
<span ng-if="firstLoad "><span id="fileLinkCopied" data-ng-show="copyLinkClicked"
class="text-fade float-right">file copied to clipboard</span><span>
In your controller add the following:
$scope.firstLoad = false;
angular.element(document).ready(function () {
$scope.firstLoad = true;
});
There is a lot of information on how to use ng-class and ng-style on elements. But I was wondering if there is a way to use angular to change the "settings" of a class.
So for example, say that you had a css class that looked as follows:
.testclass {
color: red;
background-color: blue;
}
I want to use angular to change the color:red to color:black, without attaching angular to the HTML DOM object, but via the class instead.
OK, this isn't a very useful example. What I was really planning to use it for was to hide part of ck-editor (class cle_top) and I want to set the whole class to hidden when someone clicks a button (and visible if the click it again).
======== To make it clearer, this is the bit of HTML I want to hide =======
<span id="cke_1_top" class="cke_top cke_reset_all" role="presentation" style="height: auto; -webkit-user-select: none;"><span id="cke_8" class="cke_voice_label">
Editor toolbars</span><span id="cke_1_toolbox" class="cke_toolbox" role="group" aria-labelledby="cke_8" onmousedown="return false;">
<span id="cke_11" class="cke_toolbar" aria-labelledby="cke_11_label" role="toolbar"><span id="cke_11_label" class="cke_voice_label">
But I need to do it without being able to add angular hooks in the HTML code (like adding ng-class to the span, which would have been a simple solution)
Attached is a JSfiddle that shows my problem, and as you can see, the toolbar button does nothing.
http://jsfiddle.net/vrghost/uqvo3ceh/
Which kind of works now, it adds the class invisible to the span, however, it does not hide the span that it is looking at.
Use the same process on a test text and it works...
Don't know of anything that will edit the class itself, but that probably isn't want you want to do. Other options are:
1) Create a second class, that comes after the first one in your CSS file that adds / changes the properties you want. Ex:
.testclass {
color: red;
background-color: blue;
}
.newclass {
color: green; // change property in first CSS class
display: none; // or hide
}
Then apply the second class conditionally:
<div class="text-class" ng-class="{newclass: hideScopeFlag}">blah</div>
2) Simply use ng-if, ng-hide, or ng-show if all you are doing is hiding something. Ex:
<div class="text-class" ng-hide="hideScopeFlag">blah</div>
or
<div class="text-class" ng-show="!hideScopeFlag">blah</div>
Why not simply toggle the class off/on for that element when the user clicks the button? (Edit: You said you want to "set the whole class to hidden" - I am assuming you mean to remove the class?)
To answer your question though, you can do this with JavaScript using document.styleSheets.
See this Stack Overflow question and the blog post it references. It mentions that there may be some browser compatibility issues. I have not investigated this.
EDIT: This implementation of 'ng-toggle' will allow you to hide or show an element with a single button.
The simplest solution without messing with the stylesheets is to add a new rule like
.visibleOff .testclass {
color: black;
}
and then you just need to toggle the "visibleOff" class on a parent element (the wrapper or the body element) of the editor.
To hide certain elements in the DOM you can also use a $scope variable that acts as a boolean. You can set it to false by default and on button click toggle it to true and back.
$scope.hidden = false;
$scope.toggleHide = function(){
$scope.hidden = !$scope.hidden;
}
In your dom you can then wrap your element with an ng-hide="hidden" attribute like so:
<div ng-hide="hidden">...</div>
<button ng-click="toggleHide()">togglehide</button>
A plunker example can be found here: http://plnkr.co/edit/?p=preview
If anyone wanted to know how to do this, potentially this could be useful for other things as well.
Created a function that uses document.querySelector to find the element, then just do a toggle to turn on or of, and that, as they say, is it folks.
$scope.toolBarVisible = function(){
console.log("Changing visibility");
var element = document.querySelector( '.cke_top' );
console.log("Just to do some debugging we check " + element);
var myEl = angular.element( element );
myEl.toggle();
element = document.querySelector( '.cke_bottom' );
myEl = angular.element( element );
myEl.toggle();
var myEl2 = angular.element( document.querySelector( '.test' ) );
myEl2.toggleClass("invisible")
}
And for those that are looking closely, yes, it hides the bottom as well, and all without changing ckeditor or the code.
Hope someone finds it helpful.
I have the following in to show and hide the clear button based upon if the searchQuery is empty or not. When a user starts typing in the input box, the button shows instantly.
However, when the user either clicks the clear button or deletes all input, there is a noticeable lag before the clear button is removed. I have tried ng-show as well, and have received the same results. Any ideas why this lag might exist?
HTML
<button ng-if="search.cardsQuery.length" class="button-icon" ng-click="clearSearchQuery()">
<i class="ion-android-close search-cards"></i>
</button>
CONTROLLER
$scope.clearSearchQuery = function() {
$scope.search.cardsQuery = '';
};
Check the css class on the element you're applying ng-if/ng-show to. Look for the transition effect. If the class has a transition, it may be the cause to the delay:
.button-icon {
transition: all .5s;
}
Its a common problem seen among the developers. Even trying with ng-if causes the same issue. I can suggest a simple solution for you.
Open your css file for the particular html file and add below line.
**.ng-hide { display: none !important }**
Hope, it will help.
$scope.$evalAsync();
Worked for me :)
My page is divided into sections : #page-1 and #page-2
See Plnkr: http://plnkr.co/edit/RZJLmsWDfs63dC0QuDJi
<body>
<section id="page-1">
This is page 1. It takes the whole height of the browser. User has to scroll down to see page-2.
</section>
<section id="page-2">
<span class="animated bounce">This is page 2 </span>
</section>
</body>
Animation classes are being applied to different elements in #page-2.
However by the time the user scrolls down to these elements, the animation has already finished. Hence they just look like static objects.
Is there anyway I can detect when #page-2 is currently being viewed and then call a function to addClass('animated bounce') to certain elements ?
I would like to achieve this in angularjs if possible
I have found a angularjs directive that is probably helpfull for you in this case. Inview tries to solve this exact problem by reporting to you if a dom element is visible on the screen. Unfortunately I have been unable to test my solution because I couldn't find a minified js file of Inview but I assembled some code that should work:
<section id="page-2" in-view="{$inview ? isFocused=true;}">
<div ng-class="{'animated bounce': isFocused}">This is page 2 </div>
</section>
The $inview is supposed to be true whenever the element is in visible in the browser. This leads to the scope variable isFocused being set to true and therefor the animation class is added to your div.
This should work as you have intended in your question, if it does not work for some reason please let me know so I can improve my answer.