It seems that AngularJS default prevents event propagation. Here is a test on jsfiddle.
As you can see from the link above, the div covering the links prevent the event propagate the the div under it, so the links are not working when clicked. This is just a testing case, in the real situation, the div got other function and need to be there, so removing the div is not an option.
So, how can I make the mouse click propagate to the links under div?
The code in case you don't want to click on the link, or the link becomes dead link some day in the far future. (And to fit the rules on Stack Overflow)
HTML
<div class="container">
<div class="unrelated">
<a href="http://stackoverflow.com">Stack overflow
</a>Google
</div>
<div class="scope" ng-app="myApp" ng-controller="testing">
<div class="half-cover" ng-click="leftShow = false" ng-show="leftShow == true">
Click to remove one
</div><div class="half-cover" ng-click="rightShow = false" ng-show="rightShow == true">
Click to remove one
</div>
</div>
</div>
Javascript
var myApp = angular.module('myApp',[]);
myApp.controller('testing', ['$scope', MyCtrlFunction]);
function MyCtrlFunction($scope) {
$scope.leftShow = true;
$scope.rightShow = true;
}
CSS
.container {
position: relative;
height: 300px;
width: 500px;
background-color: white;
}
.unrelated {
position: absolute;
width: 100%;
height: 100%;
}
.unrelated a{
display: inline-block;
width: 50%;
height: 100%;
line-height: 300px;
text-align: center;
}
.scope {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 1000;
}
.half-cover {
display: inline-block;
height: 100%;
width: 50%;
background-color: black;
color: white;
line-height: 300px;
text-align: center;
}
I am not sure, it's very confusing example, but problem is not about propogation
Problem that you hide your sides, but your .scope still overlay with height 100%;
So I do following:
HTML
<div class="container" ng-app="myApp">
<div class="unrelated">
<a href="http://stackoverflow.com">Stack overflow
</a>Google
</div>
<div ng-controller="testing">
<div class="scope {{ checkShow() }}" >
<div class="half-cover" ng-click="leftShow = false" ng-show="leftShow == true">
Click to remove one
</div><div class="half-cover" ng-click="rightShow = false" ng-show="rightShow == true">
Click to remove one
</div>
</div>
</div>
</div>
JS
$scope.checkShow = function(){
if($scope.leftShow == false && $scope.rightShow == false) {
return 'hidden-scope';
} else {
return ''
}
}
It really confusing, because ng-if was not working somehow, weird interpolation erros when I tried {{rightShow && leftShow ? '' : '.hidden-scope'}}, so I decided to end it with $scope.checkShow
CSS
.hidden-scope {
height: 0;
}
JSFiddle demo
This is not an issue regarding event propogation.. your div (the one with scope class and ng-controller) is super-imposed on the div with unrelated class because of z-index: 1000.
One of the (simple) ways you can access stuff below is by decreasing the z-index. So, applying an ng-class that does it for us. This can be any condition or function.
ng-class="{'hideit': !leftShow && !rightShow}"
where,
div.hideit {
z-index: -1
}
forked working fiddle
Related
Following guys, I used the code:
window.scrollBy (0, window.innerHeight)
And yes, it scrolls down the instagram home page.
However, when I go to my story, and see who viewed it, I want him to scroll the story's NOT scroll bar on the home page.
When I open the console and use the code I mentioned above, it returns me undefined and does not do what I want.
How do I scroll the bar of people who have viewed my story? Not from the home page (complete)?
EDIT
enter image description here
var button = document.querySelector('#scroll-child')
button.addEventListener('click', function() {
var childBlock = document.querySelector('.child')
childBlock.scroll(0, 50)
})
.parent {
height: 300px;
background-color: yellow;
text-align: center;
overflow: scroll;
}
.child {
width: 300px;
height: 200px;
background-color: crimson;
text-align: center;
overflow: scroll;
}
.child-content {
margin: 20px;
height: 1000px;
}
<div class="parent">
<button id="scroll-child">
scroll child content!
</button>
<div class="child">
<div class="child-content">
something1
something2
something3
something4
something5
something6
something7
something8
</div>
</div>
</div>
find your story block with its css selector:
var storyBlock = document.querySelector('#my-story-block-id')
scroll inside block
storyBlock.scroll(0, storyBlock.innerHeight)
I have an Angular application that has multiple accordion groups. They are closed by default. One section is quite large so when it opens, the users need to scroll down if they want to see the end of the section. This section has some calculations on it. The problem is that I have a calculate button on the top of the section so when the user wants to recalculate it they have to scroll to the top again to see the button.
Is there any possibility to get the location when the user reached a certain location so it would trigger a ng-if with an overlay button.
Thanks,
Brent
You can use the JQuery .scroll(), it might look like this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $document) {
$scope.pos = {
scrollPos:0
};
$("#outer").scroll(function() {
$scope.pos.scrollPos = $("#outer").scrollTop().valueOf();
$scope.$apply();
});
});
#outer {
overflow: auto;
height: 250px;
width: 200px;
border: solid 1px #ccc;
}
.inner {
height: 1000px;
position: relative;
width: 198px;
}
.top {
position: absolute;
top: 0px;
}
.bottom {
position: absolute;
bottom: 0px;
}
.scrolled {
position: fixed;
top: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
{{pos.scrollPos}}<br>
<div id="outer">
<div class="inner">
<div class="scrolled ng-hide" ng-show="pos.scrollPos > 50">Passed Point.</div>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
</div>
</div>
Yes this can be achieved with javascript try reading through this article on Mozilla it will help you achieve your goal, basically it lets you know the position of the mouse on the client. Apart from this if there is a specific element on the page that you need to know if the cursor is inside you can use Jquery and mouseenter event and then trigger some action.
I'm new to jquery. I'm trying to write a script that will hide the div "box" and all children. When the user scrolls to the bottom of the page, the div "box" and all children display. For time's sake, we'll say the children are "chamber1", "chamber2" and "chamber 3".
when I hide "box", it only removes that div.
$(document).ready(function() {
$("#box").hide();
});
Apologies for lack of code, but I'm having trouble understanding this lesson and I can't find an exact example of what I'm trying to do through my internet searches.
Thank you!
If you to hide the box when you reach the bottom of the page, you javascript should be as follows:
JAVASCRIPT:
$(document).ready(function() {
$(document).on("scroll", function(){
if ( window.scrollMaxY == window.scrollY ) {
$("#box").hide();
}
})
});
HTML:
<div id="box">
<div>Chamber 1</div>
<div>Chamber 2</div>
<div>Chamber 3</div>
</div>
You should make sure that the div has id "box". If you're working with a div of class "box" then you would use:
$(document).ready(function() {
$(".box").hide();
});
I think this might help you and would be better to understand. A good explantion is given below here with demo.
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).outerHeight() == $(document).outerHeight()) {
//Script for activity on reaching bottom of document
$("#box").fadeOut();
} else // optional
{
$("#box").fadeIn();
}
});
body {
margin: 0px;
width: 100%;
}
.container {
position: relative;
height: 900px;
width: 100%;
background: #fee;
}
#box {
position: fixed;
top: 50px;
left: 0px;
background: lightblue;
height: auto;
padding: 15px;
overflow: hidden;
max-width: 250px;
width: 210px;
}
#box > div {
margin: 5px;
background: #F33636;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
</div>
<div id="box">
Box
<hr>
<div class="chamber1">
Chamber 1
</div>
<div class="chamber2">
Chamber 2
</div>
</div>
JSFiddle
You can play around with Fiddle Link.
My divs are not showing when I click on submit.
I can get them to show if I do a window.onload() but the divs have to have display: none; by default;
How can I make it so these divs show when I hit submit because my form takes about 30 seconds to process, it has a lot of fields.
HTML
<div id="overlay-back"></div>
<div id="overlay">
<div id="dvLoading">
<p>Please wait<br>while we are loading...</p>
<img id="loading-image" src="img/ajax-loader.gif" alt="Loading..." />
</div>
</div>
Submit Button
<div class="form-buttons-wrapper">
<button id="submit" name="submit" type="submit" class="form-submit-button">
Submit
</button>
</div>
CSS
#overlay {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 995;
display : none;
}
#overlay-back {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0.6;
filter : alpha(opacity=60);
z-index : 990;
display : none;
}
#dvLoading {
padding: 20px;
background-color: #fff;
border-radius: 10px;
height: 150px;
width: 250px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin: -125px 0 0 -125px;
text-align: center;
display: none;
}
jQuery
<script>
$(function() {
$('#submit').on('submit', function() {
$('#dvLoading, #overlay, #overlay-back').prop("display", "block").fadeIn(500);
});
});
</script>
The reason I am displaying none by default in css because if someone has javascript disabled I do not want any inteference
Please provide your own custom form validation as I have no context to supplement that. This should be placed in a document ready OR in a setInterval JavaScript function (the latter typically yeilds much better results).
$('button#submit').click(function() {
If (formValid === true && $('#dvLoading, #overlay, #overlay-back').not(':visible');)
{
$('#dvLoading, #overlay, #overlay-back').toggle(500);
$('button#submit').toggle(500); //hide this to prevent multiple clicks and odd behavior
} else {
var doNothing = "";
}
});
Try this:
<script>
$(function() {
$('#submit').on('click', function(evt) {
evt.preventDefault();
$('#dvLoading, #overlay, #overlay-back').fadeIn(500);
});
});
</script>
The fadeIn will make the div visible.
.prop sets the properties of the element, not the style.
Changed to use the click event
I have a div that uses overflow:hidden and is within several other div containers. I am trying to scroll to internal links within the div using smooth scrolling via jQuery. Here is my code, which I have used on other projects with good results:
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('#cardb').animate({
scrollTop: target.offset(
).top
}, 0500);
return false;
}
}
});
});
.slide {
position: relative;
padding: 2vh 3vw;
min-height: 80vh;
width: 100vw;
}
#slide4 {
background: #ddd;
width: 100vw;
z-index: 1;
padding: 2.5vw;
}
#carda, #cardb {
width: 40vw;
height: 60vh;
padding: 3vw;
background: #fff;
opacity: 0.8;
float: left;
}
#cardb {
float: right;
overflow: hidden;
}
#cardb-1, #cardb-2, #cardb-3, #cardb-4 {
position: relative;
height: 60vh;
}
#linkcontainer {
position: absolute;
bottom: 20vh;
}
.linkcircle {
height: 3vh;
width: 3vh;
margin: 1vh;
background: #999;
opacity: 0.5;
transition: 0.35s;
border-radius: 1.5vh;
}
.linkcircle:hover {
opacity: 0.9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide4" class="slide">
<div id="carda">
<p>CARD A</p>
</div>
<div id="cardb">
<div id="cardb-1">
<p>CARD B 1</p>
</div>
<div id="cardb-2">
<p>CARD B 2</p>
</div>
<div id="cardb-3">
<p>CARD B 3</p>
</div>
<div id="cardb-4">
<p>CARD B 4</p>
</div>
<div id="linkcontainer">
<div class="linkcircle"></div>
<div class="linkcircle"></div>
<div class="linkcircle"></div>
<div class="linkcircle"></div>
</div>
</div>
</div>
I am baffled by the results - the links almost never scroll to the correct target, and clicking the same link twice still scrolls (e.g. when you are at #cardb-1 and click the link for #cardb-1 again, the div scrolls somewhere else). I'm new to jQuery, but I've researched as much as I could figure out, with no improvement. I suspect it might actually be a CSS problem, but I'm not sure where I've gone wrong with that either. The links come up fine at the expected position when I deactivate the jQuery.
I am looking to solve this exact problem, I have taken your code as a start, so thanks.
In order to solve the scroll from happening again when clicking on the same link, I have include this code at the beginning of the function:
if( location.hash == this.hash){ return false;}
Although, it seems to take the process 1 or 2 seconds to settle in the new hash, so if you click twice on the same link withing that time lapse, the problem still persists, but if you click after that period nothing happens. I am still trying to figure out if I can eliminate the 1-2 seconds refreshing lapse, but at least it's a beginning.
Here is some working code that will scroll to the right place.
The trick is that the animated function takes an absolute y, and the original code only accounts for the top, which does not include the margins, and there is another 100px added (in my page) which I am not sure where it's coming from. So I just iterate through all divs until I reach the sought one, and calculate its position along the way. This also fixes the behavior when you click rapidly on two links.
$(function() {
$('a[href^="#"]').click(function() {
if( location.hash == this.hash){ return false;}
var target = $(this.hash);
var targetId = this.hash.substr(1);
var toGo = 0;
// class of each div that has an id for anchor link.
$('.info-box').each(function() {
var box = $(this);
if( this.id == targetId){
toGo += box.outerHeight(true)-box.outerHeight();
return false;
}
toGo += box.outerHeight(true)-box.outerHeight();
toGo += box.outerHeight();
});
if (target.length) {
// id of the container div
$('#page').animate({scrollTop: toGo}, 700);
return false;
}
});
});