I'd like some child div of a main div be hidden by default an visible when you hover over the main div.
I'm trying to have that native in angular and forget the .hover() way in jquery.
I though about using ng-show on the child div and then updating the binding when I hover the main div. Is there a directive to listen for hovering?
You're on the right track. You can actually use the ngMouseenter and ngMouseleave directives to do this.
<span ng-mouseenter="show = true" ng-mouseleave="show = false">
Mouse over me.
</span>
<div ng-show="show">Hello!</div>
Here's a working Plunker: http://plnkr.co/edit/Ro80nR7HT7OGGPCXjz7E?p=preview
#Swordfish0321 is also right - you can write a very simple directive to listen specifically for the hovering if you'd like, but it may not be necessary. We use mouseenter and mouseleave for tooltips in UI Bootstrap, for example.
Thanks to #JoshDavidMiller for a very succinct answer. I had a need to do this in an ng-repeat and couldn't quite figure out an elegant way to do it. Using a boolean on the scope was showing the edit controls for all elements in the list instead of just the one I was hovering over. I almost stooped to whipping out angular.element (i.e. JQuery) and attaching hover handlers myself so they could manually show just the controls for the hovered element. I am glad I didn't stoop to such evil ways.
<div ng-repeat="item in items" ng-mouseenter="item.showEdit = true" ng-mouseleave="item.showEdit = false">
<span class="glyphicon glyphicon-edit" ng-show="item.showEdit"></span>
Mouse over me.
</div>
Simply attach the property to the item rather than $scope. In a few situations I couldn't add random keys to the items in my list so I mapped my array to a new one where the item is actually a property on a wrapper object, then I could attach any properties I wanted to the wrapper object without polluting the item keys.
Related
I am new to css and flex. Below is the working url in stackblitz.
https://stackblitz.com/edit/angular-ivy-bh8m8u?file=src/app/app.component.html
I have a left panel and main panel and a click button on the top of the page.
Requirement 1 On the click of the button i want to open the side panel. For some reason the side panel is not opening.
Requirement 2. I want to update the css to use flex if is possible because i am new to flex also
Please help.
Your sidePanelOpen variable isn't updating, and your sidePanel element is translated -150%, so it's off to the left of the screen
Never done any Angular but using the power of logic I've figured out half your answer. Now all you need to do is read a quick CSS tutorial
You originally were just setting this variable true. Using ! you can negate the sidePanelOpen value and get a toggle action going
.ts
openSideBar() {
this.sidePanelOpen = !this.sidePanelOpen;
console.log(this.sidePanelOpen);
}
Here you had the toggled class being set on the wrong element.
.html
<div [ngClass]="{'toggled' : sidePanelOpen}" class="sidebar" id="sidePanel">
<div>
<span id='close'>x</span>
<h4>Bangalore </h4>
</div>
</div>
Lastly, the toggled class won't do anything unless you have some css to hide your side panel
.css
#sidePanel.toggled {
display: none;
}
We have a set of moving clouds (implemented using divs) in a home page of a web project. IE 10 focus on these elements with tabs even though they are not focus enabled elements (no tab index).
Without a code sample, I'd purely be guessing.
Something to try is to set the div's tabindex to -1.
<div class="pretty-cloud" tabindex="-1" />
The other option is that there is an element inside these divs which is tab focussable. Try the trick above to make it so they aren't, if you still want to use that type of element.
I am building a bootstrap-grid column inside of which I have a panel.
Inside this panel I have a datepicker and there must a lot of other controls so I would need to be able to scroll down (y-axis only) inside the panel.
Unfortunately the datepicker popup window is partially hidden because of the overflow-z and overflow-x styling which enables the scrolling :
<div style="height: 480px;overflow-y: scroll;overflow-x:hidden;">
...
</div>
Is it possible to overcome this with some CSS trick?
I have found an answer on SO when the element poping out can be placed outside of the div but in my case I'm using a directive from the Angular-strap library so I need to place it inside.
I have set up a plunker to illustrate the issue (you need full-view to see it) : plunker
Well, since no one bothered to answer, I just found the answer today, which was actually very simple.
I just needed to add this in the attributes :
data-container="body"
Plunker here
JSFiddle (The *:focus rule is to illustrate which element is marked as having focus.)
What I'm wondering is why, when I click a menu item, it gets the focus... but clicking a menu item does not give it focus.
What's wrong with the CSS to make it behave this way?
focus is generally only for elements that can receive keyboard or other input, so by this heuristic lis don't qualify. This question has more about it..
In the specs, CSS doesn't explicitly define what elements can be in those states, so it's hard to come up with a set rule for what can and can't be set to focus.
What might work for your purposes is active, which you can view here.
There is a small trick - if you want an item which not have focus anabled by default you should make it tabbable by seting its tabindex="N" - N is a number. As simple as that. if you add tabindex to your clickable items they will get focus when you click. If a tag can be tabbed it have to be able to get focus. Adding tabindex attribute to all nodes of the menu is very simple if you have jQuery loaded:
$(function() {
$('#navbar *').attr('tabindex', '1');
});
end everithing comes in place. You can do it using pure JavaScript of course.
I am not a clean CSS coder, so this may be the crux of my problem... but...I've cobbled together an interactive map from this tutorial: http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/.
My solution: http://www.paideiaschool.org/testing/barb_map.htm
I think I have the initial "rollovers" of the map working-- (I've only coded the first two buildings in the upper left of the map) and am happy with that.
My problem is I want the legend of the map to do the same things as the rollovers of the map. I've come up with a clumsy solution that works (labeled '1509'), but not well in all browsers, and that tells me I have gone wrong somewhere.
I'm trying to avoid javascript as well.
What is the main problem?
Here's an updated jsFiddle for part one
Here's the basics:
<div id="city-map">
<div class="pop-up">...</div>
<div class="pop-up">...</div>
...
</div>
We use an image map with anchor tags as "hot spots". We use CSS to absolutely position these "hot spots" in the proper location and we do the basic background image sprite "trick", the same you did in your original code.
However, I updated your sprite image to have two "hover" images. When making an image hover map with none-square image spots (like buildings overlapping each-other), a single hover state runs into problems with a "neighbor" icon showing up in the hot spot slice. This is due to due HTML blocks being square and not being able to draw odd shapes. We solve this by having extra images states so you can make the neighbors still look un-highlighted.
Pop-up box
<div class="pop-up">
<h1 class="title">Mac</h1>
<div class="content">Some Content</div>
</div>
All the pop-up boxes have this HTML format. I position: absolute; them off to the side with the standard left:-999em; trick. I crafted the CSS to give them a standard pop-up location with a slight space between the hot-spot box and the pop-up box. This helps ensure your mouse will "hover out" of the hot-spot when reaching for a new hot-spot. Otherwise, you'll hover over the pop-up box and it won't go away until you over off both.
<div id="city-map-legend">
<div id="glamour-photo">
<img src="..." id="mac-img" />
<img src="..." id="admin-img"/>
...
</div>
<div id="cml-list">
<h2>Around Campus</h2>
<ul>
<li><a id="mac-list" href="#">Mac</a></li>
...
</ul>
</div>
</div>
For the "map legend", I have a group of "glamour images" and a list of links. Pretty standard stuff. The key is how they're all tied together with their ID's. JavaScript will use this to swap images and CSS states as we tie the three elements (map, glamour image, and list of links) together.
ID's in the map are the straight up ID name like "mac". ID's in the glamour images are "[id]-img" (ie. "mac-img"). And ID's in the list are "[id]-list" (ie. "mac-list").
<script type="text/javascript" src="*"></script>
* = http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
I recommend using jQuery to help do easy JavaScript-ing and loading it from Google API for easy Content Delivery Network benefits.
All that's really left is the JavaScript event.
$(document).ready(function() {
// highlight map when legend link is hovered
$('#cml-list a').hover(
// hover over
function(){
// get id code
var id = $(this).attr('id');
// tokenize string to get main id code
var tokens = id.split('-');
id = '#' + tokens[0];
// add active class to map id
$(id).addClass('active');
},
// hover out
function(){
// clear all .active classes from map
$('#city-map a').removeClass('active');
}
);
});
What happens above is we tell JavaScript to trigger anytime someone hovers a list link. There are two events when hovering, in and out.
When someone hovers into a link, we get the base ID value from it and all we do is apply a CSS class "active" to the map "hot spot".
".active" class will basically "turn on" the map item as if it was hovered (if you notice in the CSS, all the :hover selector styles are also shared with a '.active' class).
When we hover out, we simply tell jQuery to remove all 'active' classes. All that's left to do is swap also write some code that does the same thing for the "glamour" images. Simply turning them on (display:block) or off (display:none). The one catch is that there should probably be a default image that we always turn back on if nothing else is selected unless we just want the previously activated glamour image to stay active, that works too.
I've not gotten to that bit of code yet. I'll see I can update it later and maybe leave a little bit for you to play around with.
update
I developed it mostly in Chrome and a little Firefox. I just checked
it in IE7/8/9 and it seemed to work fine.
I updated the jsFiddle to include glamour image swapping. I also had a small CSS bug where I placed the float in the wrong spot. So, work off the latest one.
NOTE I did not do the CSS for all the locations. I did several with some examples, but left the rest for you. =)
Btw, I updated your map image and uploaded it on imgur.com => http://i.imgur.com/n7spM.png