Snorlax Snorlax - 1 month ago 13
HTML Question

Angular: ngView and functions not working right away?

http://zhang-jason.com/projects.php#/feature

On my website, if you scroll down to the third section that says "Victorious Gaming" and hover over the arrows on the left and right, no text shows up. However, the second time and thereafter you hover over the arrows, the text correctly shows up. Why do they not work the very first time? The same applies to when you hover over the text "Victorious Gaming"

In my Controller, I have:

projectApp.controller("featuredController", ["$rootScope", "$scope", function ($rootScope, $scope) {
$scope.leftArrow = function(){
$(function(){
$(".left-arrow a").hover(function(){

$('.left-info').css('opacity','1');

}, function(){
$('.left-info').css('opacity','0');

});
});
};
$scope.rightArrow = function(){
$(function(){
$(".right-arrow a").hover(function(){

$('.right-info').css('opacity','1');

}, function(){
$('.right-info').css('opacity','0');

});
});
};

$scope.bigWords = function(){

$(function(){
$(".big-word-padding").hover(
function() {
$('.blur-background').fadeOut(700);
$('.big-word-padding').find('h2').css('color','blue');
$('.color-blue').css('color','white');

}, function() {
$('.blur-background').fadeIn(300);
$('.big-word-padding').find('h2').css('color','white');
$('.color-blue').css('color','blue');

});
$(".big-word-padding").hover(
function() {
$('.blur-background').fadeOut(700);
$('.big-word-padding').find('.m-title').css('color','white');
$('.big-word-padding').find('#manga-title').addClass('textShadowM');
$('.big-word-padding').find('.m-title').addClass('textShadowManga');
$('.color-blue').css('color','white');

}, function() {
$('.blur-background').fadeIn(300);
$('.big-word-padding').find('.m-title').css('color','rgb(26, 107, 156)');
$('.big-word-padding').find('#manga-title').removeClass('textShadowM');
$('.big-word-padding').find('.m-title').removeClass('textShadowManga');
$('.color-blue').css('color','blue');

});
});
};
}]);


My HTML:

<div class="ng-container" ng-controller="featuredController">
<div ng-view class="view-animate">

</div>
</div>


External HTML file(templates/featured-proj.html):

<div class="big-feature">
<div class="big-background second-background"></div>
<div class="blur-background second-background"></div>
<div class="big-word">
<div class="big-word-padding" ng-mouseover="bigWords()">
<h2> Victorious <span class="color-blue">Gaming</span></h2>
<h3>UI Developer. Design.</h3>
<hr>
<a href="http://league.victoriousgaming.com/landing" target="_blank"><i class="fa fa-caret-right fa-3x" aria-hidden="true" id="arrow-project"></i></a>
</div>
</div>
<div class="left-arrow">
<a href="#/feature3" ng-mouseover="leftArrow()"><i class="fa fa-angle-left" aria-hidden="true"></i></a>

</div>
<div class="left-info">
My Art
</div>
<div class="right-arrow">
<a href="#/feature2" ng-mouseover="rightArrow()"><i class="fa fa-angle-right" aria-hidden="true"></i></a>

</div>
<div class="right-info">
Mangahere
</div>
<!-- <ul class="nav navbar-nav navbar-right">
<li><a href="#/feature"><i class="fa fa-shield"></i> Home</a></li>
<li><a href="#/feature2"><i class="fa fa-shield"></i> About</a></li>
<li><a href="#/feature3"><i class="fa fa-comment"></i> Contact</a></li>
</ul> -->



<div class="info-vic">
<div class="row-vic">
<div class="left-vic"></div>
<div class="right-vic"></div>
</div>
<div class="row-vic">
<div class="left-vic"></div>
<div class="right-vic"></div>
</div>
<div class="row-vic">
<div class="left-vic"></div>
<div class="right-vic"></div>
</div>
</div>
</div>


And my config for routing:

projectApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/feature', {
templateUrl : 'templates/featured-proj.html'
})

// route for the about page
.when('/feature2', {
templateUrl : 'templates/featured-proj-2.html'
})

// route for the contact page
.when('/feature3', {
templateUrl : 'templates/featured-proj-3.html'
})
.otherwise( { redirectTo: '/feature' } );
}]);


Bonus question:
Why is my url ending like:
http://zhang-jason.com/projects.php#/feature

and not

http://zhang-jason.com/projects.php/#/feature

(missing the '/' after php)

Answer

First, you have an extra $(function(){ ... }) wrapper both in leftArrow() and rightArrow().

In addition, the hover effect gets set only when when those functions are called for the first time. During that call, the opacity will not be modified.

I would replace ng-mouseover="leftArrow()" with ng-mouseenter="leftArrowShow()" ng-mouseleave="leftArrowHide()" and then define these functions like:

$scope.leftArrowShow = function() {
    $('.left-info').addClass('show');
};
$scope.leftArrowHide = function() {
    $('.left-info').removeClass('show');
};

And then, in CSS, have:

.left-info.show {
    opacity: 1;
}

rightArrow() would be handled in a similar manner.