We Keep Coding

Angular 2 change mouse icon over image or div

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>

Open popups on specific places of an image?

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.

Trouble With jquery.matchHeight

I'm trying to match the height of the content area and sidebar on the following site:
http://www.dev-cheweng.co.uk.gridhosted.co.uk/about/
I've added the following line of code to my file js.js
$('.height-page').matchHeight();
Here is the class for my content area:
<div id="content" class="grid_8 height-page">
And my sidebar:
<aside id="sidebar" class="grid_4">
<div class="content height-page">
The script appear to be loading fine, just they're not matching the height. All I get output for both elements is along these lines:
<div class="grid_8 height-page" id="content" style="">
I did originally target each element in the Js with their individual IDs / classes, but couldn't get that to work either. So then I thought maybe I can only apply the height matching to specific classes, hence me going with .height-page , but of course that doesn't work either
Can anyone see what I'm doing wrong?

From the docs:
$(function() {
$('.item').matchHeight();
});
Will set all elements with the class item to the height of the
tallest.
That means that you have to give your sidebar and your content area the same class (at the moment they don't have a common class)
Here's a demo of it working as expected.

Store multiple CSS classes in an array

I'm still pretty new to JQuery and JavaScript as a whole, so bear with me. I tried searching the web for an answer to my question and experimented a little bit, but I'm coming up dry. Anyway, is there a way to store multiple CSS classes in an array with JavaScript?
I'm writing some simple JQuery for a friend's portfolio website such as this:
$('.item.two').click(function(){
$('.content.item, .current.item').show();
$('.content.item, .content.item, .content.item, .current.item, .current.item, .current.item').hide();
$('.item.one, .item.three, .item.four').fadeTo(0, 0.5);
$('.item.two').fadeTo(0, 1.0);
});
All this is doing is hiding certain elements and only showing them when their corresponding icon is clicked on. This is also turning the opacity from 50% off the main class to 100% when clicked on.
There's nothing wrong with the code itself, it serves its intended purpose. But is there a way to clean this code up a bit by just holding those classes into a reusable array? I feel like it should be possible, but I'm not sure how.
Thanks!
EDIT: Sorry, I wasn't clear that I'm actually using 4 different classes to hide or show. So instead of the previous bit it's actually
$('.item.two').click(function(){
// this is the content i want to show on click
$('.content.itemTwo').show();
// this is the content that i want to hide/remain hiding on click
$('.content.itemOne, .content.itemThree, .content.itemFour').hide();
// these are icons representing the content
$('.item.one, .item.three, .item.four').fadeTo(0, 0.5);
$('.item.two').fadeTo(0, 1.0);
});
Also, here is my HTML some of you are requesting. Like I said, what I'm trying to make happen, happens. I just feel like there's a better way of making it happen.
<!-- these are icons representing the written content-->
<div class="item one">
<div class="fs1" aria-hidden="true" data-icon=""></div>
</div>
<div class="item two">
<div class="fs1" aria-hidden="true" data-icon=""></div>
</div>
<div class="item three">
<div class="fs1" aria-hidden="true" data-icon=""></div>
</div>
<div class="item four">
<div class="fs1" aria-hidden="true" data-icon=""></div>
</div>
<!-- this is the written content to be shown upon clicking corresponding icon -->
<div class="content itemOne">
<h3>itemOne</h3>
<p>....</p>
</div>
<div class="content itemTwo">
<h3>itemTwo</h3>
<p>...</p>
<div class="content itemThree">
<h3>itemThree</h3>
<p>...</p>
</div>
<div class="content itemFour">
<h3>itemFour</h3>
<p>....</p>
</div>
Looking at it now, I probably don't need the extra selectors on the .content or .item.

If I correctly understood , you are trying to change the element that is clicked.
$('.item.two').click(function(){
// there is no reason to show and then hide all
$('.content.item, .current.item').hide();
$('.item').not(this).fadeTo(0, 0.5);
$(this).fadeTo(0, 1.0);
});
check if this works for you
Edit another approch could be using index suffix in classes in loop
eg
you could use class1, class2, class3 instead.
$('.item.two').click(function(){
// this is the content i want to show on click
$('.content.itemTwo').show();
// this is the content that i want to hide/remain hiding on click
$('.content.itemOne, .content.itemThree, .content.itemFour').hide();
// these are icons representing the content
$('.item.one, .item.three, .item.four').fadeTo(0, 0.5);
$('.item.two').fadeTo(0, 1.0);
});
to
for(var i=1;i<=4;i++){
$('.item.'+i).click(function(){
// this is the content i want to show on click
$('.content.class'+i).show();
// this is the content that i want to hide/remain hiding on click
$('.content class').hide();
// these are icons representing the content
$('.item').not(this).fadeTo(0, 0.5);
$(this).fadeTo(0, 1.0);
});
}
Hope you can get approch from it

Use the push method like
var arrayClass = [];
$('.item.two').click(function() {
arrayClass.push($(this));
});
alert(arrayClass);

You mean you are trying to select a list of items using jQuery because you have been using a lot of clases? You can do this by using jquery index, with eq and the this selector.
Here is a full description on how to use the index feature to make your code shorter
http://api.jquery.com/index/

You do not have to repeat same class over and over and do not need to store classes in array.
Change
$('.content.item, .content.item, .content.item, .current.item, .current.item, .current.item').hide();
To
$('.content.item').hide();
You can store classes in string instead of array in this case $('.item.one, .item.three, .item.four')
classesSet = ".item.one, .item.three, .item.four";
$(strClassesSet).fadeTo(0, 0.5);

How do I target an <a> inside a <div>?

I have this code : http://jsfiddle.net/Qchmqs/BSKrG/
<div class="step"><-- this is darned wrong
<div id="step2"><a>Darn</a></div>
<div id="step2"><a>Darn</a></div>
<div id="step2"><a>Darn</a></div>
</div>
<div class="step"><-- this works fine
<div id="step2"><a>Darn</a>
<a>Darn</a>
<a>Darn</a></div>
</div>
The first block is three links inside three separate divs inside a surrounding div
The bottom block has the links inside one parent div
I am trying to change the background of an active link, but it won't turn off in the upper block.
The script works well with the bottom links but not working as expected with the upper ones
PS : The active class should be toggled only from the Links i have a lot of other scripts in the page that uses the .active links from this list.

For starters, do what JamesJohnson said and remove the multiple IDs. They can only cause you problems down the road.
In the upper links, the a tags aren't siblings because you put each one in its own div. So you need to do this to remove classes from the other as:
$(this).parent().siblings('div').children('a').removeClass('active');
http://jsfiddle.net/mblase75/BSKrG/1/
Unfortunately, that breaks the functionality on the lower links. You can achieve success in both places by adding andSelf to the parent siblings:
$(this).parent().siblings('div').andSelf().children('a').removeClass('active');
http://jsfiddle.net/mblase75/BSKrG/2/

It's not working on the upper ones because you're assigning the same id to the divs. You should probably use the class attribute instead:
<div class="step2"><a>Damn</a></div>
<div class="step2"><a>Damn</a></div>
<div class="step2"><a>Damn</a></div>
After making the above changes, you should be able to do this:
$(".step2 a").text("Hello World!");

maybe this:
<div class="step">
<div id="step2"><a>Damn</a>
<a>Damn</a>
<a>Damn</a></div>
</div>
<div class="step">
<div id="step2"><a>Damn</a>
<a>Damn</a>
<a>Damn</a></div>
</div>

Using radio inputs you can create this effect without any JS at all, which degrades gracefully from its intended appearance (a red backgrounded "damn") to damn with radios next to it (sending the same information).
ironically, this example at JSfiddle: http://jsfiddle.net/YvQdj/
My memory is a bit fuzzy, but I'm pretty sure this doesn't work in older versions of IE without some finagling.