Angular - detect click background div but not on divs within - javascript

On ollynural.github.io, in the portfolio page i'm trying to simulate a pop-up div giving more information on the project you clicked on. To go back off the pop-up, I've added an ng-click so when you click on the main portfolio-pop-up container, the pop-up is removed.
Is it possible to only have the parts of the portfolio-pop-up div that are exposed (not on the photo nor the description white box) removing the main div once clicked? So you can click freely on the picture and the white box
<div class="portfolio-pop-up container" ng-click="losePortfolioFocus()">
<div class="row">
<div class="col-xs-12">
<img class="portfolio-image portfolio-image-popup" src="{{portfolioImageClass}}">
</div>
<div class="col-xs-12 pop-up-container">
<div class="pop-up-row">
<div class="col-xs-9" style="background: red">
<h1>
{{portfolioTitle}}
</h1>
<p>
{{portfolioDescription}}
</p>
</div>
<div class="col-xs-3" style="background: cyan">
Click me
<div ng-repeat="tech in portfolioTech">
{{tech}}
</div>
</div>
</div>
</div>
</div>
</div>
JS
$scope.losePortfolioFocus= function() {
angular.element('.portfolio-pop-up').css("display", "none");
}
CSS
.portfolio-pop-up {
display: none;
position: absolute;
width: 100%;
height: 100%;
/* color with alpha transparency */
background-color: rgba(0, 0, 0, 0.70);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Any help would be appreciated, can post more css or code if needed

You can stop the propagation of the click event on the element that wraps the pop-up's content like this:
<div class="portfolio-pop-up container" ng-click="losePortfolioFocus()">
<div class="row" ng-click="$event.stopPropagation()">
...
</div>
</div>
This way the clicks inside the popup will not trigger the losePortfolioFocus() handler.

I suggest you crawl up the event chain from you event' target and check whether your pop-up-container is in there. This way, you'll have a way to distinguish click in the pop-up or out of it.

Related

how to check which children overflown the parent's div

first time posting, i'm trying to build a responsive website, where user/s can add / upload images to the website, but i don't want the page to fill up with images, i just want the page to have one row of every group of pictures the user added, and if the user click the see more button then it expands to show more of the images in that group.
Example:
Lets say i have parent div and 5 child divs of images with same class name.
<div class="parent">
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
<div class"child"></div>
</div>
Now the website page can only contain 5 images per row, but if the user added more images, it goes to the next row. also if the page width is smaller, then the page will contain less than 5 images, depends on the available space.
I tried:
To check inside a loop of all the child divs, to see if they have overflown the parent, then move them to a hidden class, but with no luck, i cant figure it out how to check which children overflown the parent's div.
All i want is:
Figure it out how to check which children overflown the parent's div.
I don't know if this needs javascript or only html css... i'm only learning.
Thanks.
Edit
The code i did:
// clicking see more to show the rest of images
folderSeeMore.onclick = function() {
if (folderSeeMore.innerHTML == "See more") {
$(centerViewMid).css("overflow", "visible");
$(centerViewMid).css("height", "auto");
folderSeeMore.innerHTML = "See less";
wait = 1;
} else {
$(centerViewMid).css("overflow", "hidden");
$(centerViewMid).css("height", "150");
folderSeeMore.innerHTML = "See more";
}
}
.center_view_middle {
border-radius: 10px;
height: 150px;
margin-bottom: 15px;
overflow: hidden;
}
.center_view_middle_box {
display: inline-block;
position: relative;
margin-right: 15px;
width: 130px;
height: 150px;
border-radius: 10px;
text-align: center;
}
<h6 class="folder_seeMore"><u>See more</u></h6>
<div class="center_view_middle">
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
<div class="center_view_middle_box">
<div class="middle_box_img"></div>
</div>
</div>

CSS transparent colour overlay fade not working on iOS

I have made a grid of images and when you hover over them a semi-transparent overlay fades in and out and some text appears
I wanted this to work similarly on mobile devices, only instead of it fading in when you hover, it fades in when you tap
I have managed to get this working on android but not on mobiles.
I will show my code and a few examples of solutions I have tried. I have tried so many but I am rather new to javascript (I have some functioning javascript working on my site though!) and nothing is working on iOS devices.
Js fiddle:
https://jsfiddle.net/49h450g9/
I am using bootstrap and less. My grid HTML code:
<div class="col-sm-5 col-xs-5"><div class="image-wrap">
<img src="assets/images/image1.jpg">
<div class="overlay purple2">
<br>
<h3>image 1</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</div>
</div>
<div class="col-sm-3 col-xs-3"><div class="image-wrap">
<img src="assets/images/image2.jpg">
<div class="overlay blue">
<h3>image 2</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</div>
</div>
<div class="col-sm-4 col-xs-4"><div class="image-wrap">
<img src="assets/images/image4.jpg">
<div class="overlay purple1">
<h3>image 3</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-7 col-xs-7"><div class="image-wrap">
<img src="assets/images/image5.jpg">
<div class="overlay blue">
<h3>image 5</h3>
<hr>
<p><strong>description</p>
<br>
View Website
</div>
</div>
</div>
<div class="col-sm-5 col-xs-5"><div class="image-wrap">
<img src="assets/images/image6.jpg">
<div class="overlay purple2">
<h3>Image 6</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</a>
</div>
</div>
</div>
</div>
CSS:
.image-wrap {
display: inline-block;
position: relative;
}
.overlay {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
color:white;
opacity: 0;
transition:opacity .5s ease-out;
text-align: center;
hr {
border: 1px solid #fff;
width: 10%;
}
}
.image-wrap:hover .overlay {
opacity: 1;
}
.red {
background: rgba(102,67,154,0.7);
}
.blue {
background: rgba(23,56,179,0.7);
}
.purple1 {
background: rgba(140,23,179,0.7);
}
.purple2 {
background: rgba(71,13,142,0.7);
}
Solutions I have tried include:
adding
onclick=""
to the image wrap div element
2 adding the JS line to my js file:
$('body').bind('touchstart', function() {});
Adding the following js to my js file:
2 adding the JS line to my js file:
$(document).ready(function(){
$(".overlay").hover(function(){
//On Hover - Works on ios
$("p").hide();
}, function(){
//Hover Off - Hover off doesn't seem to work on iOS
$("p").show();
})
});
However, on iOS none of my solutions are working, when I tap no text or semi-transparent overlay fades in
I have been working on this for nearly a week and have looked at many questions on here but I cannot find a solution that works for me
Any help would be massively appreciated :)
Thanks!
use :active pseudo class instead of :hover. In touch mobile devices, once an hover is triggered, it will not get removed once you take your finger off. It need you to tap on somewhere else on the screen.
similarly in jquery you can use mousedown() and mouseup() for the same purpose. on mousedown() you may show the overlay and mouseup() you may hide it.

How do I position my custom graphic in the upper right of my modal dialog?

I want to create a jQuery UI dialog box with my own close button, which will be a graphic. This is the HTML that will serve as the dialog
<div id="subscription_info">
<div id="modalCloseButton"><img alt="Close" src="/assets/ close_button-914fbebcf02bf2f4aa98140b8e0415aeefc1c6f017f4ecfa5d48805c4c5523ae.png" width="20"></div>
<div id="headerText"></div>
<div class="subscription_data_row">
Domain: mydomain.com
</div>
<div class="subscription_data_row">
Consumer Key: <span id="consumer_key"></span>
</div>
<div class="subscription_data_row">
Consumer Secret: <span id="consumer_secret"></span>
</div>
<div>Why do I do with this?</div>
</div>
and here’s the style:
#modalCloseButton {
position: relative;
top:10px;
right:10px;
cursor: pointer;
}
Although the image is missing, notice from the Fiddle — http://jsfiddle.net/gn26qos3/1/, the “Close” alt text is displaying int he center and I would like it to be in the upper right. How can I achieve this?
Just add text-align: right to the #modalCloseButton div and the image/alt text, will align to the right.
http://jsfiddle.net/gn26qos3/2/

Scroll fixed div horizontaly while body stays positioned

Im trying to create a social website which has a chat sidebar, which is just like Facebook. It has a timeline with posts in one section and a chat sidebar.
I have made the chat <div> to be fixed just like Facebook chat.
Now when the total height of elements within the chat sidebar becomes more than the page height, scrollbar appears. When i scroll through it and reach the end of it, if i scroll more, now it scrolls the posts on the timeline.
So what i want to achieve is, to make chat sidebar scroll irrelative to the timeline. to make this crystal clear, i want them to scroll separately, so if i scroll chats and it reaches the bottom, if my pointer is still on the chat sidebar and i scroll nothing should happen.
I prefer to find a way without the use of jQuery. but if its not achievable with css, i would appreciate any help on javascript as well.
Great Example: Facebook
Sample from my html
<div class="outer-container">
<div class="timeline">
<div class="contents">
<div class="header"><p>Timeline</p></div>
<div class="post-items">
<div class="post">
<div class="avatar">
<div class="frame"><img src="blabla.img" /></div>
</div>
<div class="post-block">
<div class="post-header"><p>Some Header</p></div>
<div class="post-contents"><p>Some contents</p></div>
<div class="post-footer"><p>Some footer</p></div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar right-sidebar">
<div class="chat-list">
<ul class="friends">
<div class="header"><p>Friends</p></div>
<li>
<a class="chat-item">
<div class="avatar">
<div class="frame"><img src="blabla.img" /></div>
</div>
<span class="name">James Hetfield</span>
<span class="ic ic-message"></span></a>
</li>
</ul>
</div>
</div>
</div>
Put your timeline in the timeline div and chatbar inside chatbar div. Note in the javascript I have overridden the natural behaviour of scrolling. So, when your mouse is over chatbar normal scrolling wouldn't occur.
Update: Whenever the mouse is scrolled while the cursor is over the div manually update the scrolltop property.
JSFiddle : Link
<html>
<head>
<style type="text/css">
#body{
width: 95%;
margin: auto;
}
#timeline{
width: 75%;
display: inline-block;
overflow-y: scroll;
margin: auto;
}
#chatbar{
position: fixed;
width: 15%;
display: inline-block;
max-height: 100%;
margin: auto;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="body">
<div id="timeline">
</div>
<div id="chatbar" class="scrollable">
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$( '.scrollable' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
var e0 = e.originalEvent,
delta = e0.wheelDelta || -e0.detail;
this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
e.preventDefault();
});
</script>
</body>
</html>

Weird event binding issue on FF and Chrome - only on first click

This is on my plugin page on Git and I have two interactive demo in the web page. In one of the demo page, I have a small dialog that opens when you click on a div.
The weird issue is that this dialog is getting opened when I click on the top title that says attrchange beta . This happens only if the first click is on the title attrchange beta, clicking any other element in page fixes this issue.
The plugin page http://meetselva.github.io/attrchange/ [Fixed, use the below URL to see the problem]
http://meetselva.github.io/attrchange/index_so_issue.html
Below is the code,
<!-- The title -->
<h1 id="project_title">attrchange <span class="beta" style="text-decoration: line-through;" title="Almost there...">beta</span></h1>
<!-- Main dialog that has link to the sub-dialog -->
<div id="attributeChanger">
<h4 class="title">Attribute Changer</h4>
<p>Listed below are the attributes of the div:</p>
<div class="attrList"></div>
<div class="addAttribute text-right">add new attribute</div>
</div>
<!-- Sub-dialog -->
<div id="addOrmodifyAttr" title="Add/Modify Attribute">
<h4 class="title">Add/Modify Attribute</h4>
<p><b>Attr Name</b> <input type="text" class="float-right attrName"></p>
<p><b>Attr Value</b> <input type="text" class="float-right attrValue"/></p>
<div class="clear"> </div>
<button type="button" class="float-right close">Close</button>
<button type="button" class="float-right update">Update</button>
<div class="clear"></div>
</div>
JS:
var $attributeChanger = $('#attributeChanger');
var $attrName = $('.attrName', '#addOrmodifyAttr'),
$attrValue = $('.attrValue', '#addOrmodifyAttr'),
$attrAMUpdate = $('.update', '#addOrmodifyAttr');
//Handler to open the sub-dialog
$attributeChanger.on('click', '.addAttribute', function () {
$attrName.val('').removeClass('nbnbg');
$attrValue.val('');
$('#addOrmodifyAttr, #overlay').show();
});
The problem is the CSS applied to your #attributeChanger div.
If you look at the CSS applied to it:
#attributeChanger {
background-color: #FEFFFF;
border: 1px solid #4169E1;
color: #574353;
font-size: 0.9em;
margin: 10px;
min-height: 50px;
min-width: 150px;
opacity: 0;
padding: 2px;
position: absolute;
top: -200px;
z-index: 1;
}
You'll notice that the position is absolute, and it's positioned over your logo. So what you're clicking is actually your #attributeChanger div.
To fix it, you can hide #attributeChanger using display: none;, then use $('#attributeChanger').show(); in jQuery when it comes into actual view.
The pop up is showing because this code is running:
}).on('click', '.addAttribute', function () {
$attrName.val('').removeClass('nbnbg');
$attrValue.val('');
$('#addOrmodifyAttr, #overlay').show();
This is because the DIV with the class addAttribute is over the title DIV.
You can either move the 'addAttribute' DIV, or remove the last line of that onclick function.
That is because you element is hover your title and detect the click on himself and open(i don't know why it open, i didnt examine your entire code). But when you click anywhere else, your code is changing his position so it is not over the title.
The easiest fix is to change you #attributeChanger CSS top to -100px (that's the value when you click on the document) OR add a display : none.
EDIT : Axel answer show what I mean by "element is hover your title".

Categories