As described here How to ng-hide and ng-show views using angular ui router, I have the following markup:
<div class='container'>
<div ng-show='$state.includes('state1')></div>
<div ng-show='$state.includes('state2')></div>
</div>
Using flex-box in css:
.container {
display: flex;
flex-direction: column;
}
Now it when I switch between the two states both divs are displayed for a blink of an eye resulting in an ugly blink effect.
I tried ng-cloak from Angularjs - ng-cloak/ng-show elements blink, but without any success.
I can't use ng-if since I use 'Sticky State' from ui-router-extras, which requires the DOM to persist.
$state won't be available to use in HTML so
1) you can do something like this in Ctrl
$scope.state = $state;
but i won't recommend this
2) In HTML
<div class='container'>
<div ng-show="showThis('state1')"></div>
<div ng-show="showThis('state2')"></div>
</div>
In Controller
$scope.showThis = function(type){
return $state.includes(type);
}
Even though you already mentioned that you have tried ng-cloak, I think that the right answer to your issue is indeed ng-cloak with the:
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
style configuration. I have made an example on CodePen.io that show exaclty this solution working with Angular UI Router. As you can see in the example, the whole view blinks as you mentioned but, if you add the 'ng-cloak' directive to the:
<div ng-app="myApp">
which will then become:
<div ng-app="myApp" ng-cloak>
you will see that Angular protects the view from being showed (blinking). And that is exactly the purpose of the of the 'ng-cloak' directive.
Hope this example help you solving you issue.
You can use ng-style to remove the flicker effect.
<div class='container'>
<div ng-style="{'display': $state.includes('state1') ? 'block' : 'none'}"></div>
<div ng-style="{'display': $state.includes('state2') ? 'block' : 'none'}"></div>
</div>
I'm not sure why ng-show triggers a flicker effect with sticky states, but this workaround fixes the issue.
Related
I have a website I am trying to do something like this, when I click on 1, I want the background of this element to change to white and when I click on the second one the background of the first one will disappear and pass to the next one...I have been trying to do this for a long time help me I don't know how to do it
<div class="oval">1</div>
<div class="oval">2</div>
<div class="oval">3</div>
When we need make "something" exclusive we use one unique variable
selectedIndex:number=-1
If you want not unselected
<div class="oval" [class.selected]="selectedIndex==0"
(click)="selectedIndex=0">
1
</div>
<div class="oval" [class.selected]="selectedIndex==1"
(click)="selectedIndex=1">
2
</div>
<div class="oval" [class.selected]="selectedIndex==2"
(click)="selectedIndex=2">
3
</div>
If you want unselected
<div class="oval" [class.selected]="selectedIndex==0"
(click)="selectedIndex=selectedIndex==0?-1:0">
1
</div>
<div class="oval" [class.selected]="selectedIndex==1"
(click)="selectedIndex=selectedIndex==1?-1:1">
2
</div>
<div class="oval" [class.selected]="selectedIndex==2"
(click)="selectedIndex=selectedIndex==2?-1:2">
3
</div>
NOTE: I use [class.selected], so we use a .css
.selected{
background:red;
}
You can use style.background or style.background-color using (condition)?value:null, e.g., for the first div
[style.background]="selectedIndex==0?'red':null
Like #Kwright02's comment you can do it with css:
.myclass:focus {
background-color: green;
}
But important: The element must be focusable. So a div isn't, a button is as example.
Second way (add a click handler and change the background directly):
// HTML
<div (click)="onClick($event)">test</div>
// Code
onClick(event: any) {
event.target.style["background-color"] = "green";
}
Note: This is not the way to go in Angular. Here use property binding and bind a style to a condition as example.
Instead of add a click listener to each control you can use Angular's HostListener like this:
#HostListener("document:click", ["$event"])
onAllClick(event: any) {
event.target.style["background-color"] = "green";
}
I have a situation where I need to access a div which is dynamically generated by jQuery mobile.
How can I access this using CSS ? I need to change UI of the inside div.
Following is the HTML structure.
<div id="myCreatedDiv">
<div class="jQueryMobileCreatedDiv">
/* I need to access this div */
</div>
</div>
Note: Above structure I found in chrome's element inspector
My original code is as follows
<div id="one" class="myDiv" ui-body-d ui-content">
<input name="anyName" id="jQueryTextBox"/>
</div>
It would be very helpful if anyone can help me for the same.
Thanks in advance!
You can acces div inside .jQueryMobileCreatedDiv is like this:
var divInside = $('.jQueryMobileCreatedDiv').children("div");
Use this CSS selector:
#myCreatedDiv > div { /* Your CSS here */ }
You can use it.
$('#myCreatedDiv').find('#one');
or
$('.jQueryMobileCreatedDiv').parents('#myCreatedDiv').find('#one');
You can use the class of the generated div
#myCreatedDiv > .jQueryMobileCreatedDiv {
}
Does anyone know why the following code isn't working:
The image remains towards the left of the screen.
HTML:
<div class"footerimg">
<img src="./img/logo2.png" width="100px;" height="100px;">
</div>
CSS:
.footerimg {
float:right;
}
Additional Info:
This div is inside another div called footer, but that shouldn't affect anything should it?
The CSS file IS linked to the page, I have started the style the footer.
error :
<div class"footerimg">
should be
<div class = "footerimg">
__^^^^__missing equal sign
try this:
footerimg>img{float:right;}
and add this in your html code:
class="footerimg"
you forgot the '='
class on the same div
<div class"myClass1 myClass2">
Can myClass1 behave like this
.myClass1 .myClass2 {background:#ff0000}
in css?
Yes you can use (multiple) as many classes as you wish but syntax is without any spaces:
.myClass1.myClass2 {background:#ff0000}
They can overwrite behavior.
In you example you have actually specified a child selector.
e.g
.myClass1 .myClass2 {background:#ff0000}
Would effect the div myClass2 if nested in myClass1
<div class"myClass1">
<div class"myClass2">
</div>
</div>
What you want is
.myClass1.myClass2 {background:#ff0000}
Which would work with
<div class"myClass1 myClass2">
</div>
This is the basis of how OOCSS works.
You can concatenate classes like this, .myClass1.myClass2, leaving out the gap in between. It's not a cascade in your case.
I do believe there are issues in older browsers when doing this, however.
you need to wright,.myClass1.myClass2 {background:#ff0000}
this will apply to those elements having both of this class.
This will affect classes as following
.myClass1 .myClass2 {background:#ff0000}
<div class="myClass1">
<div class="myClass1">
</div>
</div>
myClass1 will only be affected by such elements
.myClass1{
}
I’m not entirely clear what you’re asking, but if you want to style an element based on whether it has two specific classes on it, you can do so like this:
.myClass1.myClass2 {
background:#ff0000;
}
This will give all elements that have a class of myClass1 and a class of myClass1 a red background, e.g.
<div class="myClass1">This won’t have a red background.</div>
<div class="myClass2">This won’t have a red background.</div>
<div class="myClass1 myClass2">This will have a red background.</div>
<div class="myClass1 myClass2 myClass3">This will have a red background.</div>
Is there a fast way in CSS to remove all of the styles applied to an element? For example, say a tab menu of some sort:
<div class='outer'>
<div id='d1'></div>
<div id='d2'></div>
<div id='d3'></div>
<div id='d4'></div>
</div>
The CSS is applied...
.outer { foo:blee; bar:blah; bas-bloo:snork; /*...long long list...*/ }
Now, I want #d3 (for example) to return to default styling, but I don't want to explicitly unset all of the parent styles:
#d3 { remove-styles:all } /* <- [I made this up, obviously] */
Pipe dream or possibility?
In CSS3, yes. You could use the negation pseudo-class:
.outer:not(#d3) { foo:blee; etc etc }
Too bad CSS3 support is a little lacking at the moment with most browsers...
With CSS level less than 3, you're screwed. Sorry.
No. Not feasibly possible. Just override it.