I am very new to Angular2 and front end development in general,
I am trying fo make dome divisions clickable but the problem is that the mouse is not changing the shape to the hand when it comes over the div content
I want the app to print something when I click on "PRODUCTS" and it is doing it but the mouse shape is not changing over "PRODUCTS"
example.component.html
<div (click)="navigateToProducts()" > PRODUCTS</div>
example.component.ts
public navigateToProducts(){
console.log("navigateToProducts");
}
I think you should add a class to your div like that :
<div (click)="navigateToProducts()" class="myClass"> PRODUCTS</div>
(or ng-class, I don't know I don't use angular)
and then in your css file :
.myClass {
cursor: pointer;
}
hope this help !
You can write in-line css to change mouse shape
<div style="cursor:pointer" (click)="navigateToProducts()" > PRODUCTS</div>
Related
i need your help.
I have profile page, i researched lots of websites, but i can't found, can you help me?
I need to center all all of the items, and my image has to be like ANGELA YU (image of the top, you can see).
Please help
<div className="asd">
<img alt="123" src={asd}></img>
<div className="top-container">
<div></div>
<div className="user-profile-img">
<img alt="profileImg" src={user.photoURL}></img>
</div>
</div>
<div className="middle-container">
<p>Your email: example#gmail.com</p>
<p>Your user id: 123213213213</p>
<p>Your display name: ASDSADASDSA</p>
</div>
</div>
Try to create a common class .textCenter{text-align:center} and use it in the each parent <div> example <div className="middle-container textCenter"> the all the child elements in this will be aligned center to that <div>.
If you want the name in 2 lines as you shown in the above sample image then you need to give max-width to the name tag example: max-width:'50px'
Just add text-align:center to the classes that you want the text to be centered. Here you can see how to center an image. Just google.
I suggest using flexbox.
You can wrap the content you want to center in a div, and apply this CSS to it :
display:flex;
justify-content:center;
Here is a cool website to learn flexbox.
I have an Image in a HTML page. I want to display different information when the mouse is hovering over different areas of that image. For example, I want to display information-1 when the mouse is over point-1 on the image. And when leaving i want the information-1 to hide and when the mouse is hovering over point-2 i want to popup information-2. Is this possible with JS using any kind of library?
Yes It's possible.
You can approach in 2 ways:
Image Maps - Just a link with a tutorial
Use CSS to positionate transparent elements above the image and show some text when one of this is hovered.
I made this pen to show you an example with method 2. With method 1 is kinda the same, you just need to change a little bit the code.
HTML
<div class="img-wrapper">
<img src="http://i.imgur.com/ZY0gdtF.jpg" alt="">
<div class="cloud">
<p>Hey a cloud!</p>
</div>
<div class="tree">
<p>Tree here</p>
</div>
<div class="grass">
<p>Green Grass</p>
</div>
</div>
JS
$('.cloud, .grass, .tree').hover(function(){
$(this).find('p').show();
}, function(){
$(this).find('p').hide();
});
Of course all of this is just a sample.
While the first method allows you to define a shape, the second doesn't.
Using method 1 will let you define more accurate areas, but it can be hard. Method 2 is simplier but less accurate. Your needs, your choice.
I try to develop some charts which should have online values. I have found this nice and free dashboard :
[http://jiji262.github.io/Bootstrap_Metro_Dashboard/][1]
I use Web sockets to change values of charts and it works very nice. I use justgage([http://justgage.com/][2]) plug-in. As you can see there are some square shapes with different colors(Disk Space Usage,Bandwidth,memory,CPU etc.) and i want to change color of these squares according to values.
Here is div construction :
<div class="span2" onTablet="span4" onDesktop="span2">
<div ID="ID1" class="circleStatsItemBox green">
<div class="header">Machine 1</div>
<span class="percent"></span>
<div class="circleStat">
<div id="g1"></div>
</div>
<div id="f1" class="footer">
<span class="number">cards/hour</span>
</div>
</div>
</div>
g1 is justgage gauge and i use this code to change div class : (to change of square)
$('#ID1').addClass('circleStatsItemBox green').removeClass('circleStatsItemBox orange');
But this code changes title and footer color as same with body color. I want that footer and header color should be arranged according to new div class (for example according to circleStatsItemBox orange at my sample)
Thanks
try to remove before adding:
$('#ID1').removeClass('circleStatsItemBox orange').addClass('circleStatsItemBox green');
try with toggleClass in jquery.
ToggleClass: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
$('#ID1.circleStatsItemBox').toggleClass('orange green');
I'm using ui.bootstrap.progressbar (code here: https://github.com/angular-ui/bootstrap/blob/master/src/progressbar/progressbar.js) and I'm trying to extend it to support some custom HTML (or just text) on the progess bar. It looks something like this in vanilla Bootstrap:
<div class="progress">
<div class="bar" style="width: 60%;">This thing is at 60%</div>
</div>
http://plnkr.co/edit/WURPlkA0y6CK7HYt3GL1?p=preview
I'm new at directives, so I this is what I tried:
in ProgressBarController I added a label variable
var label = angular.isDefined($attrs.label) ? $scope.$eval($attrs.label) : '';
also modified the object the controller returns to include the label. Then added the bar.label in the directive's template like so:
<div class="progress">
<progressbar ng-repeat="bar in bars"
width="bar.to" old="bar.from"
animate="bar.animate" type="bar.type">
</progressbar>
{{bar.label}}
</div>
The progressbar appears just fine, but I cannot see the value of the label.
What am I doing wrong? Thanks in advance.
This turned out to be pretty straightforward.
All I had to do was:
modify the progress directive and add transclude: true
modify the progress.html to include an ng-transclude directive, like so
:
<div class="progress">
<span ng-transclude></span>
<progressbar ng-repeat="bar in bars" width="bar.to" old="bar.from" animate="bar.animate" type="bar.type"></progressbar>
</div>
After this, text put between the <progressbar></progressbar> will render on the progressbar, however some CSS modifications are also needed to make the text appear in the correct position.
But every progressbar and every text needs additional positioning, so this part is still not a complete solution. Setting the wrapper's position to relative and the <span>'s to absolute is one step but still not enough.
Hey I'm looking for some help - I'm more of a designer than a coder but I am trying to learn :)
I do have this kinda working but I can't figure out how to get the thumbnail image to resize to the height of the expanded div - as it expands.
I have a container div and inside that div I have multiple "expandable" divs which contain information about different products.
Each of these expandable divs has a title, a thumbnail image and a price of the product (as well as a plus sign image to expand the div itself).
When the div is expanded there is some more information about the product on show.
But when the div is expanded, I would also like the "price" to disappear (as it's now visible in the expanded information) and I would like the image to automatically scale to the height of the expanded div.
So the product information will be on the on the left hand side of the div and the image will be taking up the right half of the div (with the minus button on top of it.
This is my html
<div class="expandingContentContainer">
<div class="expandingContent">
<div id="expandingContentHeader" style="display:inline; float:left">
<h4>Portable navigation system</h4>
</div>
<div id="expandingContentThumb" style="display:inline;">
<img src="images/thumbnails/audio-portable-navigation-thumbs.jpg" />
</div>
<div id="expandingContentPrice" style="display:inline;">
<img src="images/assets/icon_pound.png" />Price: £200
</div>
<div id="expanderSign">
<img src="images/assets/icon_plus.png" />
</div>
<div id="expanderContent" style="display:none">
<p>Bluetooth voice dialling without the hassle of having to train the device. Reads text messages out loud and features a stylish 2,8" colour display. Play back music and phone calls via the OE-audio system.</p>
<p><img src="images/assets/icon_pound.png" />Price: £200</p>
<p><img src="images/assets/icon_tick.png" />Availability: Most models<img src="images/assets/icon_hash.png" />Part Number: 3600-78-474<img src="images/assets/icon_pencil.png" />Legal: N/A</p>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#expanderSign").click(function(){
$("#expanderContent").slideToggle();
if ($("#expanderSign").text() == "+"){
$("#expanderSign").name("−")
}
else {
$("#expanderSign").text("+")
}
});
});
</script>
Sounds like something you could solve entirely with CSS. As long as the container-div has a fixed height, you should be able to set the height of the img-element to height: 100%, causing the image to scale accordingly. However, this will not work while the display-mode of the container is set to display: inline. You will have to use display: inline-block to be able to set the height of the div.
In order to get a good help you should add a link to your website or the css files.
You will need some changes in the css and maybe (depending on the support you need) some javascript (jquery or zepto).
You could also use a pre build library but it's really not necessary.