We Keep Coding

Button on ng-mouseover & ng-mouseleave won't get shown as expected - AngularJS

I've a problem that I wasn't able to solve for a while now, even looking to other Q/A on SO.
I would like to switch from a button to another one with an ng-show.
When ng-mouseovertriggers, I would like to hide the current button, button-db, and show a second one, button-shout
When ng-mouseleave triggers, I would like to do the opposite, hiding button-shout and showing button-db.
I'm already able to make this work with the following code:
HTML:
<div class="footer">
<div ng-show="hoverEdit" class="half button-db"
ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
<span class="shout-value">200</span>
</div>
<div ng-show="!hoverEdit" class="half button-shout"
ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
<div class="icon-over" ng-src="./assets/css/img/logo-white-m.png"
style="width: 29px; height: 21px;"></div>
</div>
<div class="half button-action">
<span class="icon-cart" ng-src="./assets/css/img/icon-cart.png"
style="width: 29px; height: 21px;"></span>
</div>
</div>
JS:
$scope.hoverEdit = true;
$scope.hoverIn = function(){
$scope.hoverEdit = false;
};
$scope.hoverOut = function(){
$scope.hoverEdit = true;
};
With the code above I'm able to get the following starter situation:
button-db on the left and button-action on the right
And I would like that, when ng-mouseover triggers, button-db (The Purple Rectangle) gets hidden while button-shout (~Green Rectangle with another image) gets shown and vice-versa (this is actually working), like in the following image:
What I'm trying to achieve -> button-shout on the left at button-db's place
But, instead, I get the following result:
What I get instead, when I go over button-db I get this uknown blank div instead of button-shout
button-shout doesn't get shown and it is not present in the DOM and it does not have height and width even if I managed to build it like I did with the other buttons.
I'm using the following CSS classes:
half gives dimensions to the buttons and sets their position
.pod .footer .half {
display: table-cell;
padding-top: 1px;
padding-left: 8px;
padding-right: 8px;
vertical-align: middle;
height: 45px;
}
button-db has both :before and :after with a little images and shout-value to handle the int number between them
.pod .footer .button-db {
background-color: #6ab5ac;
text-align: center;
color: #fff;
background-color: #6455a0;
}
.pod .footer .button-db .shout-value {
margin-top: 0px;
padding: 2px;
color: #fff;
display: inline-block;
position: relative;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
.pod .footer .button-db .shout-value:before {
content: "";
display: inline-block;
background-image: url("./assets/css/img/shout-megaphone-white.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 30px;
height: 23px;
position: absolute;
left: -17px;
top: 0px;
}
.pod .footer .button-db .shout-value:after {
content: "";
background-image: url("./assets/css/img/shout-db-white.svg");
background-size: contain;
background-position: right center;
background-repeat: no-repeat;
width: 28px;
height: 27px;
position: absolute;
right: -19px;
top: -1px;
vertical-align: super;
font-size: 12px;
display: inline-block;
padding: 0;
padding-top: 0px;
font-weight: 500;
}
.pod .footer .button-db .shout-value .db {
vertical-align: super;
font-size: 10px;
display: inline-block;
padding: 0;
}
.pod .footer .button-db .db-value {
margin-top: 0px;
padding: 2px;
color: #fff;
display: inline-block;
position: relative;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
.pod .footer .button-db .db-value:after {
content: "dB";
background-image: none;
width: 28px;
height: 23px;
position: absolute;
right: -19px;
top: 0px;
vertical-align: super;
font-size: 12px;
display: inline-block;
padding: 0;
padding-top: 0px;
font-weight: 500;
}
button-shout button to get shown when ng-mouseover triggers; It does not need any :before and :after, it only has 1 image and no values
.pod .footer .button-shout {
background-color: #6AB6AC;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #fff;
line-height: 30px;
}
button-action cart button, button-shout would look pretty much like it but for the color and the image
.pod .footer .button-action {
background-color: #ffae00;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #fff;
line-height: 30px;
}
The functionalities I implemented using both ng-mouseover and ng-mouseleave work perfectly as I want. I don't get why button-shout has no dimensions and does not get shown at button-db's place when doing ng-mouseover.
I already tried using ng-if, adding and removing classes, using z-index and display: none & display: block but I always get this problem.
I noticed that button-shout inherits nothing except for half's placement.
Here is a little Plunker I put up with only two buttons to let you understand how it should work. It works on the Plunker but not in my application.
When mouseover triggers, one button hides and the other one is shown and when mouseleave triggers, the old one is shown back.
1) Have you any idea on why it doesn't get shown properly?
2) How can I fix this?
I hope I've been as much clear as possible, Thanks in advance.

To be honest i'm not really sure of what the problem is so i'll post here a snippet that try to reproduce what you currently have. Feel free to tell us if this snippet reproduces your problem and for answeres to use it as a base for an answer.
Note : in your HTML i removed the ng-mouseleave on 1st element and ng-mouseenter on 2nd because they were conflicting each other and throw duplicate events.
angular.module("app", []).controller("ctrl", ['$scope', function($scope){
$scope.hoverEdit = true;
$scope.hoverIn = function(){
console.log("HOVER IN");
$scope.hoverEdit = false;
};
$scope.hoverOut = function(){
$scope.hoverEdit = true;
console.log("HOVER OUT");
};
}]);
.pod .footer .half {
display: table-cell;
padding-top: 1px;
padding-left: 8px;
padding-right: 8px;
vertical-align: middle;
height: 45px;
}
.pod .footer .button-db {
background-color: #6ab5ac;
text-align: center;
color: #fff;
background-color: #6455a0;
}
.pod .footer .button-db .shout-value {
margin-top: 0px;
padding: 2px;
color: #fff;
display: inline-block;
position: relative;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
.pod .footer .button-db .shout-value:before {
content: "";
display: inline-block;
background-color: black;/*url("./assets/css/img/shout-megaphone-white.svg");*/
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 30px;
height: 23px;
position: absolute;
left: -17px;
top: 0px;
}
.pod .footer .button-db .shout-value:after {
content: "";
background-image: white;/*url("./assets/css/img/shout-db-white.svg");*/
background-size: contain;
background-position: right center;
background-repeat: no-repeat;
width: 28px;
height: 27px;
position: absolute;
right: -19px;
top: -1px;
vertical-align: super;
font-size: 12px;
display: inline-block;
padding: 0;
padding-top: 0px;
font-weight: 500;
}
.pod .footer .button-db .shout-value .db {
vertical-align: super;
font-size: 10px;
display: inline-block;
padding: 0;
}
.pod .footer .button-db .db-value {
margin-top: 0px;
padding: 2px;
color: #fff;
display: inline-block;
position: relative;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
.pod .footer .button-db .db-value:after {
content: "dB";
background-image: none;
width: 28px;
height: 23px;
position: absolute;
right: -19px;
top: 0px;
vertical-align: super;
font-size: 12px;
display: inline-block;
padding: 0;
padding-top: 0px;
font-weight: 500;
}
.pod .footer .button-shout {
background-color: #6AB6AC;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #fff;
line-height: 30px;
}
.pod .footer .button-action {
background-color: #ffae00;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #fff;
line-height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div class="pod">
<div class="footer" ng-app="app" ng-controller="ctrl">
<div ng-show="hoverEdit" class="half button-db"
ng-mouseover="hoverIn()">
<button class="shout-value">100</button>
</div>
<div ng-show="!hoverEdit" class="half button-shout"
ng-mouseleave="hoverOut()">
<button class="shout-value">200</button>
</div>
<div class="half button-action">
<button class="shout-value">300</button>
</div>
</div>
</div>
Of course since i don't have the images, i changed them to black and white background. What i can see is that i have a black crap that seems to not be in the right place, however this doesn't seems to be what your problem is.

Check if mouseover trigger the function or not. Mouseover should change value on ng-show value from false to true in your html.

I may be mis-reading, but why are any functions needed here? If you are just trying to toggle a class, how about this? it will not require any controller functions.
https://plnkr.co/edit/HMACVKTlLzbkfWhy4v1S?p=preview
<div class="half"
ng-init="hover = false"
ng-class="hover ? 'button-shout' : 'button-db'"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false">
<div class="icon-over">300</div>

How to make square in Twitter Bootstrap around the item?

I am trying to make some web page as show in image .I am able to make almost 90%.But I have one issue
how to make square as shown in image (a square which have triangle in bottom.I know we can make square using border .but how to make triangle in that bottom triangle
how to make contend scrollable mean my contend it not scrolling I already use overflow:auto and scroll
)
.bg {
background: #597A4D!important;
width: 100%!important;
}
.nav_bar {
background: #597A4D!important;
border-style: none;
height: 44px;
border: 0px!important;
border-radius: 0px!important;
}
.display_menu li a{
font-size: 1.2em!important;
color: #ffffff!important;
}
ul.display_menu li:last-child{
background:#3C86D7;
}
.rowClass {
display: block;
margin-top: 3%;
}
.rowClass >div {
padding: 3em;
text-align: center;
}
.text_row div{
display: block;
border: 1px ;
padding: auto;
color: #ffffff;
margin-top: 3%;
}
.rowClass span {
display: block!important;
color: #ffffff;
}
.logo_image{
width: 60px;
height: 60px;
}
.email_div label {
color: #ffffff;
font-weight: bold;
text-align: center;
}
.email_div{
width: 50%;
margin: auto;
}
.email_div label {
}
.email_div input {
background: transparent;
border: 1px solid #3C86D7;
display: inline;
width: 50%;
}
.email_div button {
display: inline;
}
.wrapper{
overflow: auto!important;
overflow: scroll!important;
}
Here is my plunker: http://plnkr.co/edit/G8mp53rQlF562hEkgmgT?p=preview

just do this
.wrapper{
overflow: auto!important;
overflow: scroll!important
height: 200px;
}
or desired height instead of
.wrapper{
overflow: auto!important;
overflow: scroll!important;
}
it will start scrolling because it will only scroll if data is overflowing
and for shape this article may help but you don't need to use any thing just use bootstrap tooltip

Try this for the overflowing
.wrapper{
overflow: auto!important;
overflow: scroll!important
height: 250px;
}
to get an idea to make those box with shapes,
See this DEMO

Fading in an object when hovering over another one

I'd like to slide down a tooltip element when hovering on another element.
I tried using jQuery, but i'm experiencing that nothing will be faded in if I hover on countbox1. countbox1 is a timer made with javascript.
I don't think the script is wrong. I think it doesn't detect jQuery for some reason.
I also tried to download jQuery and put this in the "src:" directly.
$(document).ready(function(){
$("#countbox1").onmouseover(function(){
$("#tooltip").fadeIn();
});
$("#countbox1").onmouseout(function(){
$("#tooltip").fadeOut();
});
});
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
}
#tooltip {
width: 500px;
margin-left: auto;
margin-right: auto;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
margin-bottom: -5px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="home">
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p>
<div id="countbox1"></div>
<hr style="width: 500px;">
</div>

If all you want is the tooltip to enter the screen on hover of something else, I'd suggest using CSS transition.
If you nest the <p id="tooltip"> within the #countbox1 and put a :hover-event on that, you can get exactly the thing you want.
HTML
<div id=home>
<div id="countbox1">
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p>
</div>
<hr style="width: 500px;">
</div>
CSS
#home {
height: 50%;
background: red;
}
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
height: 50px;
background: #f4f4f4;
}
#countbox1:hover #tooltip {
opacity: 1;
}
#tooltip {
width: 500px;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
height: 30px;
background: #0000ff;
position: absolute;
left: 50%;
margin-left: -250px;
top: -15px;
opacity: 0;
transition: all 1s;
}
Here's a working demo. Hover over the grey area for the tooltip to enter the view.
Here's a working demo where the tooltip enters the screen from the top.

You might be using deprecated methods.
Replace your code for the one below, and try again:
$(document).on('ready',function(){
$("#countbox1").on('mouseover',function(){
$("#tooltip").stop(true).fadeIn();
});
$("#countbox1").on('mouseout',function(){
$("#tooltip").stop(true).fadeOut();
});
});

You should use mouseover instead of onmouseover:
$(document).ready(function(){
$("#home").mouseover(function(){
$("#tooltip").fadeIn();
});
$("#home").mouseout(function(){
$("#tooltip").fadeOut();
});
});
#countbox1 {
width: 400px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: bebas;
font-size: 70px;
color: white;
cursor: default;
}
#tooltip {
width: 500px;
margin-left: auto;
margin-right: auto;
color: white;
font-family: mix_thin;
font-size: 18px;
text-align: center;
margin-bottom: -5px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body>
<div id=home>
<p id="tooltip">Wochen:Tage:Stunden:Minuten:Sekunden</p><div id="countbox1"></div>
<hr style="width: 500px;">
</div>
</body>
Check it out also on this JSFiddle.

fixed header jumps after scrolling down the page

I have found a few questions similar to this, but were unable to help me.
When I scroll down the page the header/navigation bar doesn't move "smoothly" with the page. After I reach a certain amount down the page, the header "jumps", but after that it's fine.
I have the following code for a fixed header:
$(window).scroll(function(){
if ($(window).scrollTop() >= 147) {
$("#top_nav").addClass("fixed");
$("#top_nav").css("position", "fixed");
$("#top_rule").hide();
$("#bottom_rule").hide();
}
else {
$("#top_nav").removeClass("fixed");
$("#top_nav").css("position", "initial");
$("#top_rule").show();
$("#bottom_rule").show();
}
});
My CSS:
.fixed {
width: 100%;
background: white;
border-bottom: 1px solid black;
box-shadow: 0 0 20px #000000;
top: 0px;
padding-top: 15px;
padding: 10px;
}
I don't have a position: fixed in my CSS, because for some reason it isn't working, so instead I used jQuery to set the position to fixed.
I have posted the rest of my page on jsfiddle.net
http://jsfiddle.net/5n4pF/
If I did not explain propelry, please ask and I'll try and explain better :)
Thanks in advance
EDIT
When I reach 147px, it must not jump. It looks as if it "hides and shows". Instead it must move smoothly as you scroll down the page.

You should position your header absolute. and give the news a margin-top the size of the header.
The reason why your position: fixed wasn't working is because you fixed it inside of a relative element. It get's fixed inside of that element (which isn't what you want, because you want it fixed on top of the page).
It jumps because of the fact that you change the element from static to fixed. All of a sudden you miss about 53 pixels of height in your layout . Which makes it jump.
In this fiddle: http://jsfiddle.net/5n4pF/3/
* {
margin: 0px;
padding: 0px;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
#black_top {
background: black;
font-size: 5px;
display:block;
width: 100%;
height: 5px;
}
#logo_header {
margin-top: 20px;
}
.list_item {
list-style-type: none;
display: inline-block;
font: 16px Arial;
padding: 10px 30px 10px 30px;
text-align: center;
}
#top_nav {
font: Arial 30px;
display: block;
width: 100%;
}
.nav_links {
text-decoration: none;
color: black;
}
hr {
margin-right: 30px;
margin-left: 30px;
color: #f00;
opacity: 0.3;
}
.nav_bullets {
color: #D6D6D6;
}
::-moz-selection {
background: #93E6E5;
}
::selection {
background: #b3d4fc;
}
#news_block {
/*Chrome & Safari*/
-webkit-column-count: 3;
-webkit-column-gap: 40px;
/*Firefox*/
-moz-column-count:3;
-moz-column-gap: 40px;
margin: 20px;
position: absolute;
top: 249px;
width: 100%;
box-sizing: border-box;
}
#search_field {
font-size: 25px;
}
.fixed {
width: 100%;
box-sizing: border-box;
background: white;
border-bottom: 1px solid black;
box-shadow: 0 0 20px #000000;
top: 0;
position: fixed;
padding-top: 15px;
padding: 10px;
}
the correct code is given. It's still a bit buggy with widths of something. But the code in general is not very tidy. So I'll leave that part to you. Hope this works for you.

I was working on it today, and I found the solution.
Change the CSS from
.fixed-header .main-header {
display: none;
}
to
.fixed-header .main-header {
display: inline;
}

How to hide and open navigation

i want to hide and open the navigation i'v created with the "+" and "-" buttons
- when user will click on the '+' button the navigation will start open one by one.
(notice: the links are on display: none; right now)
fiddle link here: http://jsfiddle.net/RKhRy/5/
The css:
.nav {
height: 600px;
width: 150px;
display: none;
}
.nav li {
width: 150px;
height: 70px;
background-color: #232323;
border-bottom: 1px solid #393939;
text-decoration: none;
list-style: none;
line-height: 70px;
text-align: center;
cursor: pointer;
font-size: 15px;
}
#close {
width: 70px;
height: 70px;
background-color: #737373;
color: #fff;
margin-left: 150px;
position: absolute;
line-height: 70px;
text-align: center;
font-size: 30px;
cursor: pointer;
display: none;
}
#open {
width: 70px;
height: 70px;
background-color: #232323;
color: #fff;
position: absolute;
line-height: 70px;
text-align: center;
font-size: 30px;
cursor: pointer;
}

Try adding this jQuery code:
$("#open").click(function(){
$(".nav, #close").show();
$(".nav li").each(function (i) {
$(this).delay(300*i).animate({width:150},300);
});
$("#open").hide();
});
$("#close").click(function(){
$("#close").hide();
$($(".nav li").get().reverse()).each(function (i) {
$(this).delay(300*i).animate({width:0},300);
});
$("#open").show();
});
The result can be seen in this JSFiddle.

I don't know why i've coded for you but the building blocks of what you're after are here in an updated fiddle: http://jsfiddle.net/RKhRy/12/
Use jQuery's slideToggle();

I've edited your example to make it work: http://jsfiddle.net/g8AF6/3/
new CSS:
body {
color: #fff;
font-family: Tahoma;
font-weight: bold;
position:relative;
}
.nav {
height: 600px;
width: 150px;
display: none;
}
#open:focus{
visibility:hidden;
}
#open:focus + #close + .nav{
display:block;
}
#open:focus + #close {
display:block;
}
.nav li {
width: 150px;
height: 70px;
background-color: #232323;
border-bottom: 1px solid #393939;
text-decoration: none;
list-style: none;
line-height: 70px;
text-align: center;
cursor: pointer;
font-size: 15px;
}
#close {
width: 70px;
height: 70px;
background-color: #737373;
color: #fff;
position: absolute;
top:0;
left:0;
line-height: 70px;
text-align: center;
font-size: 30px;
cursor: pointer;
display: none;
}
#open {
width: 70px;
height: 70px;
background-color: #232323;
color: #fff;
line-height: 70px;
text-align: center;
font-size: 30px;
cursor: pointer;
}
now just add transitions for collapse/expand animation
regards

Basic working fiddle here: http://jsfiddle.net/phdphil/YJ8gf/#base
Essentially this bit of code, plus an id=nav in the right tag:
function setNavVisible(visible) {
var nav = document.getElementById('nav');
var close = document.getElementById('close');
var open = document.getElementById('open');
if(visible) {
nav.style.display = "block";
close.style.display = "block";
open.style.display = "none";
} else {
nav.style.display = "none";
close.style.display = "none";
open.style.display = "block";
}
}
document.getElementById('open').onclick = function() {
setNavVisible(true);
}
document.getElementById('close').onclick = function() {
setNavVisible(false);
}

I've cloned and editted your fiddle. Your html is wrong. You can't have li inside of divs. Thinking of that, your open and close divs can be refactored to something more semanthic. Like this:
Toggle Menu
<ul class="nav">
<li>START HERE</li>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>BRANDS</li>
<li>SERVICES</li>
<li>CONTACT</li>
</ul>
I've also added pseudo-elements in css instead of having two elements to only one function.
Check the result here:
http://jsfiddle.net/H7ms7/

You will need to bind keydown event with CSS in my mind.
$(document).keydown(function(e){
if (e.keyCode == *NUMBER) {
}
)};
*The number should be the one that + or - trigger with.
The next thing is with the css, I would just bind $("#element").css('display','block'); With the triggers you want.
If you want them one by one like you said, I'm not absulotly sure but I know it might have to do with CSS3 transition. Check it out, dont want to mislead you.
Goodluck