Develop Reference

can some body help me with ng-mouseover and ng-mouseleave in angularjs?

I have a code like this in my html:
<div ng-mouseover="show_up()" ng-mouseleave="dont_show_up()" class="contain">
<img src="image/first_image.jpg">
<div class="overlay" ng-style="overlay">
show songs
</div>
</div>
<div ng-mouseover="show_up()" ng-mouseleave="dont_show_up()" class="contain">
<img src="image/second_image.jpg">
<div class="overlay" ng-style="overlay">
show songs
</div>
</div>
and this is my js code :
$scope.show_up = function () {
$scope.overlay={
"height":"100%"
};
};
$scope.dont_show_up = function () {
$scope.overlay={
"height":"0"
};
}
this is what I need to happen: whenever I hover on my first image it should add the style "height:100%"
to my first image, not both of them!
and when I hover on my second image it should add the style "height:100%"
to my second image, not both of them!
how can I fix this problem?

One solution would be passing some value to show_up() and dont_show_up() function, which identifies an image, say 1, 2 and then, inside function, change overlay variable to array and update appropriate item. ng-style="overlay" must be also changed to ng-style="overlays[0]"
--Edit
<div ng-mouseover="show_up(0)" ng-mouseleave="dont_show_up(0)" class="contain">
<img src="image/first_image.jpg">
<div class="overlay" ng-style="overlays[0]">
show songs
</div>
</div>
<div ng-mouseover="show_up(1)" ng-mouseleave="dont_show_up(1)" class="contain">
<img src="image/second_image.jpg">
<div class="overlay" ng-style="overlays[1]">
show songs
</div>
</div>
$scope.show_up = function (index) {
$scope.overlays[index] = {
"height":"100%"
};
};
$scope.dont_show_up = function (index) {
$scope.overlays[index] = {
"height":"0"
};
}
Well that becomes difficult to maintain when number of images increase
Second solution.
You can store all images as an array of objects and apply ng-repeat directive to loop through them.
<div ng-repeat="image in images" ng-mouseover="show_up(image.id)" ng-mouseleave="dont_show_up(image.id)" class="contain">
<img ng-src="image.src">
<div class="overlay" ng-style="image.overlay">
show songs
</div>
</div>
$scope.show_up = function (id) {
$scope.images.find(image => image.id === id).overlay = {
"height":"100%"
};
};
$scope.dont_show_up = function (id) {
$scope.images.find(image => image.id === id).overlay = {
"height":"0"
};
}

Not sure what you are trying to achieve since you state you want the image to change from 0 - 100% on the mouseover - but the ng-style is applied to the overlay. I assume you are trying to overlay the text over the image?
Anyway you don't need angular or even javascript for this - just CSS and apply a :hover on the parent level and style on the child element and you can achieve the desired outcome without the cost of the js.
.overlay {
height: 0;
overflow: hidden
}
.contain:hover .overlay {
height: 100%;
}
<div class="contain">
<img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg" height="150">
<div class="overlay">
show songs
</div>
</div>
<div class="contain">
<img src="https://images-na.ssl-images-amazon.com/images/I/61W2FTW9ePL._AC_SL1500_.jpg" height="150">
<div class="overlay">
show songs
</div>
</div>

how to resize the image in angularjs?

<div class="row" data-ng-repeat="row in imageDataUrls" >
<div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
<img alt="img" class="img-responsive"data-ng-src="{{imageDataUrl.url}}" />
</div>
</div>
I am showing the image using data URLs, but how can I get the current height and width in pixel to resize it proportionally in angular js?
I have some algorithm to resize it independently

I'm not sure what data imageDataUrl has in it but you can get the image dimensions in JavaScript easily:
var img = new Image();
img.onload = function() {
console.log(this.width + 'x' + this.height);
}
img.src = 'http://lorempixel.com/400/200/';

as pointed by mvermand comment, you can just add CSS to your class or directly height/width attributes.
<div class="row" data-ng-repeat="row in imageDataUrls" >
<div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
<img alt="img" class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/2000px-SNice.svg.png" width="300"/>
</div>
</div>
If using only height or width, the other attribute is calculated to respect the image proportions.
Now, regarding the size you want, you can also use percents - like width="100%" to use the full width.
Cheers

If your goal is to resize proportionally, why not resize using CSS percentages?
CSS:
.smaller {
width: 80%;
}
Your Code:
<div class="row" data-ng-repeat="row in imageDataUrls" >
<div class="col-sm-3" data-ng-repeat="imageDataUrl in row" >
<img alt="img" class="img-responsive smaller" data-ng-src="{{imageDataUrl.url}}" />
</div>
</div>

you can get/set the height and width properties with angular.element("selector").height or width.

Remove Link on scroll

In my application I have 4 links with different IDs and 4 DIV with same ID as each link (I use them for anchor-jumping).
My current code:
One
Two
Three
Four
<div class="col-md-12 each-img" id="1">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="2">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="3">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="4">
<img src="img/album-img.png">
</div>
Sometime users just scroll to second div id="2" first before they click on buttons and when they do so, they are sent to top id="1" first instead of continue to next ID id="3".
Only one button is visible at a time with use of CSS and when link is clicked, I remove that link.
CSS
a.btn{display: none}
a.btn a:first-child{display: block !important;}
jQuery
$(document).ready(function(){
$('a.btn').click(function () {
$(this).remove(); // remove element which is being clicked
});
});
How can I achieve so if user scroll down, each link that has same ID as the DIV get removed.
For instance: If user scroll down to <div class="col-md-12" id="1">, One gets removed and Next link would be Two to click on.
PS: This is for a dynamic page and IDs will change, so we need another selector maybe
This is what I have tried until now, but problem is that it removes all the links and not first one only
$(function() {
var div = $('.each-img').offset().top;
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
$('.each-img').each(function(){
if (scrollTop >= div) {
$("a.btn:eq(0)").remove();
//$("a.btn:first-child").remove();
}
});
});
});
PS: The way HTML & CSS is setup doesn't need to like this and I can change it to whatever that will be better for the function

It's no problem to make it dynamic:
JSFiddle: https://jsfiddle.net/rc0v2zrw/
var links = $('.btn');
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
links.each(function() {
var href = $(this).attr('href');
var content = $(href);
if (scrollTop > content.offset().top) {
$(this).hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:fixed; top:0; left:0; right:0">
One
Two
Three
Four
</div>
<div class="col-md-12" id="1">
<img src="http://lorempixel.com/400/500/">
</div>
<div class="col-md-12" id="2">
<img src="http://lorempixel.com/450/500/">
</div>
<div class="col-md-12" id="3">
<img src="http://lorempixel.com/480/500/">
</div>
<div class="col-md-12" id="4">
<img src="http://lorempixel.com/500/500/">
</div>

I think this is more or less what you're after:
JSFiddle
https://jsfiddle.net/wc0cdfhv/
It's good to cache the position of your elements outside the scroll function, this way it doesn't need to be calculated every time.
You should also keep in mind this won't scale too well if you have dynamic content but if you're just working with 4 static links it will do fine.
Code
$(function() {
var scroll1 = $('#1').offset().top;
var scroll2 = $('#2').offset().top;
var scroll3 = $('#3').offset().top;
var scroll4 = $('#4').offset().top;
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop >= scroll4) {
$("#go1, #go2, #go3, #go4").hide();
}
else if (scrollTop >= scroll3) {
$("#go1, #go2, #go3").hide();
$("#go4").show();
}
else if (scrollTop >= scroll2) {
$("#go1, #go2").hide();
$("#go3, #go4").show();
}
else if (scrollTop >= scroll1) {
$("#go1").hide();
$("#go2, #go3, #go4").show();
}
else {
$("#go1, #go2, #go3, #go4").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:fixed; top:0; left:0; right:0; background:#CCC">
One
Two
Three
Four
</div>
<div class="col-md-12" id="1">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="2">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="3">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="4">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>

use scrollEvent listener
$(window).scroll(function(e){
if($(this)).scrollTop >= $('div#1').offset().top){
$("a#1").hide();
}
});
Use Something like that and it will work .. Hope this helps

Replace a smaller image with a larger one (after the larger image loads)

I have a few images of superheroes. These are in divs along with much larger images of astronomical objects. These larger images take a while to load. I want the astronomical images to replace the superhero images after they've loaded.
Here's what I have so far: https://jsfiddle.net/vmpfc1/5typ7pnp/1/
HTML:
<body>
<div class="image-wrapper">
<div class="pix"style="background: url('http://baltimorepostexaminer.com/wp-content/uploads/2012/07/spider-man2_pole_4681.jpg'); height:200px;width:200px;">
</div>
<div class="true-image" style="background: url('http://m1.i.pbase.com/o9/27/876727/1/151851961.JlvdQ9xW.GreatCarinaKeyholeandRedHoodNebulae3454x2566pixelsimproved3.jpg')"></div>
</div>
<div class="image-wrapper">
<div class="pix"style="background: url('https://upload.wikimedia.org/wikipedia/en/7/75/Comic_Art_-_Batman_by_Jim_Lee_%282002%29.png'); height:200px;width:200px;">
</div>
<div class="true-image" style="background:url(' https://www.nasa.gov/sites/default/files/706439main_20121113_m6triptych_0.jpg')"></div>
</div>
</body>
js:
setTimeout(function () {
$('.true-image').attr('style').on('load', function () {
$('.pix')({
'background-image': 'url(' + $(this).attr('src') + ')'
});
});
}, 0);
css:
.true-image {
display : none;
}
I am a javascript newbie -- is there a decent way to make the larger space images replace the superhero placeholders?
Is there an easier way to do this in HTML5?

Edited Answer to reflect changes:
<div style="background-image: url('https://i.imgur.com/sOcRl3M.jpg'); height:400px;width:400px" rel="https://i.imgur.com/xr7CRQo.jpg">
</div>
<div style="background-image: url('https://i.imgur.com/1m0NwgN.png'); height:400px;width:400px" rel="https://i.imgur.com/nlFPkc4.jpg">
</div>
Then you can have jQuery to loop through all images which has a rel attribute. 2 or 2,000 images, it does not matter.
$('div[rel]').each(function() {
var rel = $(this).attr('rel');
var self = $(this);
var img = new Image();
$(img).load(rel, '', function() {
self.css('background-image', 'url('+rel+')');
});
});
You can see it working here: https://jsfiddle.net/83zLumuk/4/

If image width is less than X, add class

As the title suggests, I'm looking to have a little bit of jQuery - if an image is less than a defined width, it adds a class a certain element. This, for me, seems pretty easy but for some reason it's not working.
$(document).ready(function() {
var image = $('.work-each img');
if (image.width() < 500) {
$('.work-text').addClass('work-text-small');
}
});
This, should, add a class 'work-text-small' to the element 'work-text' if the image found under each .work-each is less than 500px.
Example of HTML (for each)
<div class="work-each">
<div>
<img src=""/>
<div class="work-text">
<p>Title</p>
<p>Text</p>
</div>
</div>
</div>
<div class="work-each">
<div>
<img src=""/>
<div class="work-text">
<p>Title</p>
<p>Text</p>
</div>
</div>
</div>
<div class="work-each">
<div>
<img src=""/>
<div class="work-text">
<p>Title</p>
<p>Text</p>
</div>
</div>
</div>
Thanks,
R

Use load instead, when DOM is ready only img tag is defined but the image isn't loaded yet. Its size comes when it's fully loaded
$(window).load(function () {
var image = $('.work-each img');
if (image.width() < 500) {
$('.work-text').addClass('work-text-small');
}
});
However as #rdck pointed if there are more images with class=".work-each img" code won't work so in that case you go trough each image and apply the class
$(window).load(function () {
var image = $('.work-each img');
image.each(function () {
var that = $(this);
if (that.width() < 500) {
that.next('div.work-text').addClass('work-text-small');
}
})
});

If you get dimensions using server code and set class accordingly, there would be no need to wait for image to load and css would immediately take effect as soon as html exists