Why click event is not propagating? - javascript

Attached a Header with a (kinda) close button (in red) moc-up. When I click on the close button (the area that overlaps with a header) - nothing happens. Can you please advice on the correct solution regarding the subject?
HTML:
<div id="my_body" style="background:rgba(0, 0, 0, 0.6);padding:10px;">
<div id="cls_btn" style="position:absolute;left:0px;top:0px;height:50px;width:50px;background-color:red;"> </div>
<div id="my_header" style="position:relative;padding:14px 26px 26px"> </div>
<div id="pic_area" style="border:2px solid #b3b3b3;margin-top:10px">
<img id="pic" src="http://never.mind.which.pic.com" >
</div>
</div>
JS:
$("#cls_btn").bind("click", function() {
alert("clicked!");
return true;
});
JSFiddle: http://jsfiddle.net/JuGx9/
Thanks!

This element (<div id="my_header" style="position:relative;padding:14px 26px 26px"> </div>) seems to be occupying the same space and is taking the click event, rather than the #cls_btn div. Applying a z-index CSS property with a value of 999 fixes the issue.
Working DEMO

Your 'my_header' cover it.
change the rows to:
<div id="my_header" style="position:relative;padding:14px 26px 26px"> </div>
<div id="cls_btn" style="position:absolute;left:0px;top:0px;height:50px;width:50px;background-color:red;"> </div>

The "my_header" div is overlapping the "cls_btn" div. Look at this: http://jsfiddle.net/JuGx9/13/
To solve this without the z-index property change the order of the divs...
http://jsfiddle.net/JuGx9/15/

Related

AngularJS ng-mouseenter not working in child div

I have been using the AngularJS ng-mouseenter and mg-mouseleave and it has been almost the cause of my death. A quick explanation:
<div class="characterSum">
<div class="avatarContainer" ng-mouseenter="showButton = true" ng-mouseout="showButton = false">
<img ng-src="{{imagePath}}" class="img-thumbnail">
<div class="addImage" ng-show="showButton && (imagePath == 'images/chars/defaultCharacterAvatar.png')">
<button class="btn-btn-default">
Add Character Image
</button>
</div>
</div>
</div>
The CSS properties:
.avatarContainer {
max-width: 150px;
max-height: 150px;
display:inline-block;
float:left;
margin-right:5px;
position:relative;
}
.characterSum {
border: 1px;
min-height:160px;
position:relative;
}
I'm fairly certain it has something to do with my CSS properties. I followed a few instructions to automatically scale an image into a 150 x 150 size so that might explain my CSS properties for those wizards. Anyway, the reason why I think it has something to do with it is because when I add this:
<div ng-mouseenter="showButton = true" ng-mouseout"showButton = false">Hi</div>
And I add it under the parent class "characterSum", when I mouse over Hi, the button shows. As soon as I add this under the class "avatarContainer" the child div, it stops working. If I wrap the ENTIRE avatarContainer class with this div so:
<div ng-mouseenter="showButton = true" ng-mouseout"showButton = false">
HI
<div class="avatarContainer"> ......... </div>
</div>
It only shows the button when I go near hi. I added $scope.$watch on showButton to console.log('detected') whenever showButton changes and in every scenario, "detected" is never logged when I go over the img or anything EXCEPT FOR when I go over hi
Does anyone have any ideas on what crazy curse I have been put under? Or if not, I'm willing to use any other way of accomplishing this. (Basically want the button to show whenever the img is moused over). And I have already tried directly applying ng-mouseover to the img element to no avail.
You had a typo, you need to use ng-mouseleaveinstead of ng-mouseout
Markup
<div class="characterSum">
<div class="avatarContainer" ng-mouseenter="showButton = true"
ng-mouseleave="showButton = false">
<img ng-src="{{imagePath}}" class="img-thumbnail">
<div class="addImage" ng-show="showButton && (imagePath == 'images/chars/defaultCharacterAvatar.png')">
<button class="btn-btn-default">
Add Character Image
</button>
</div>
</div>
</div>

jQuery/CSS - Full width on click

I have three links, which will, onClick, show a different container (containing a chart). This is the HTML code for this:
<div class="col-xs-8">
<a class="select fs-11 uppercase active rentedref-chart" href="#">Rented</a>
<a class="select fs-11 uppercase directref-chart" href="#">Direct</a>
<a class="select fs-11 uppercase main-chart" href="#">Personal</a>
<div id="rentedref-chart" style="width:100%;height:180px;"></div>
<div id="directref-chart" style="width:100%;height:180px;display:none;"></div>
<div id="main-chart" style="width:100%;height:180px;display:none;"></div>
</div>
As you can see, only the first chart is shown on page load. In order for my users to see what charts they like, they can click the anchor links.
My jQuery code for this is:
$('.rentedref-chart').click(function (){
$(this).addClass("active");
$('.directref-chart').removeClass("active");
$('.main-chart').removeClass("active");
$('#directref-chart').hide();
$('#main-chart').hide();
$('#rentedref-chart').show();
});
$('.directref-chart').click(function (){
$(this).addClass("active");
$('.rentedref-chart').removeClass("active");
$('.main-chart').removeClass("active");
$('#rentedref-chart').hide();
$('#main-chart').hide();
$('#directref-chart').show();
});
$('.main-chart').click(function (){
$(this).addClass("active");
$('.directref-chart').removeClass("active");
$('.rentedref-chart').removeClass("active");
$('#directref-chart').hide();
$('#rentedref-chart').hide();
$('#main-chart').show();
});
Now, the switching between containers is working fine. My problem is, that the #rentedref-chart, #directref-chart and #main-chart all have width:100%;
The problem occurs, when the users switch to one of the containers/charts that is hidden. It will make the chart 100% of the page width, and not the container width.
How can I do, so the width is 100% of the container? (Like the first #rented-chart is on page load?)
EDIT - SHOWING MORE CODE:
This is the HTML structure:
<body>
<div class="wrap">
<div class="col-xs-2">other content</div>
<div class="col-xs-10 no-padding">
<div class="col-xs-8">
<a class="select fs-11 uppercase active rentedref-chart" href="#">Rented</a>
<a class="select fs-11 uppercase directref-chart" href="#">Direct</a>
<a class="select fs-11 uppercase main-chart" href="#">Personal</a>
<div id="rentedref-chart" style="width:100%;height:180px;"></div>
<div id="directref-chart" style="width:100%;height:180px;display:none;"></div>
<div id="main-chart" style="width:100%;height:180px;display:none;"></div>
</div>
<div class="col-xs-2">other content</div>
</div>
</body>
Remove the display:none from the charts and hide them on document ready. This allows the chart to be rendered at the correct size then hidden.
HTML
<div id="rentedref-chart" style="width:100%;height:180px;"></div>
<div id="directref-chart" style="width:100%;height:180px;"></div>
<div id="main-chart" style="width:100%;height:180px;"></div>
JavaScript
$(function () {
$('#directref-chart').hide();
$('#main-chart').hide();
});
Alternatively if this is an option don't render your chart until it is selected for the first time. Use jQuery .one() to achieve this.
$('.directref-chart').one("click", function() {
//Render chart code.
});
You no need to use the display:none there
Html
<div id="directref-chart" style="width:100%;height:180px;"></div>
<div id="main-chart" style="width:100%;height:180px;"></div>
Jquery
$(document).ready(function(){
$('#directref-chart').hide();
$('#main-chart').hide();
});
Do position:absolute for each element which have width:100%
This will work if there's no position:relative ( with specified width ) in whole .col-xs-8's parent and your .col-xs-8 with position:absolute and width:100% will fit the screen width.
The CSS :
body{ padding:0; margin:0 }
.col-xs-8{
position:static;
height:200px
}
#rentedref-chart, #directref-chart, #main-chart{
position:absolute;
left:0;
top:auto;
bottom:auto;
}
You should set .cols-xs-8's height until the content under .cols-xs-8 element shown.
I updated my fiddle before. http://jsfiddle.net/6gg5o9gm/6/
There are many ways you can do it...
What I would suggest is create a class "asideanddntdisplay"
<style>
.asideanddntdisplay
{position : fixed; left : -5000px;}
</style>
Before creating the chart :
$("#directref-chart, #main-chart").show().addClass("asideanddntdisplay");
After the charts are created:
$("#directref-chart, #main-chart").hide().removeClass("asideanddntdisplay");
I believe this will work for you.

Toggling popup DIV tags not working

I am trying to make a simple page with a few divs, where if you click on one div it moves to the center and getting bigger (other divs still visible in the background). When you click on another div visible in the background the div in the center goes back to where it was before and clicked div goes to the center and resizing. Also if you click on the div in the center it should go back to where it was before.
I made a Jquery script for it but it doesnt work properly - clicking on any div first time works fine but any following clicking just stops working.
Here is an html with some styling:
<style>
#outside1 {background-color:gray;} #outside2 {background-color:blue;} #outside3 {background-color:brown;}
#inside1 {background-color:red;} #inside2 {background-color:green;}
#inside3 {background-color:pink;} #inside4 {background-color:yellow;}
#inside5 {background-color:gold;} #inside6 {background-color:silver;}
.outside {width:100px; height:90px; margin:5px; } .inside {display:none; margin:2px; }
#test1 {height:400px; }
</style>
<div id=test1>
<div id='outside1' class='outside'> div outside 1 <br/>
<div id='inside1' class='inside'> div inside 1 <br/> </div>
<div id='inside2' class='inside'> div inside 2 <br/> </div>
</div>
<div id='outside2' class='outside'> div outside 2 <br/>
<div id='inside3' class='inside'> div inside 3 <br/> </div>
<div id='inside4' class='inside'> div inside 4 <br/> </div>
</div>
<div id='outside3' class='outside'> div outside 2 <br/>
<div id='inside5' class='inside'> div inside 3 <br/> </div>
<div id='inside6' class='inside'> div inside 4 <br/> </div>
</div>
</div>
And thats some js and jquery:
kd_small={top: 0, left: 0, opacity: 1, width:100, height:90 } ;
kd_big = {top: -90, left: +50, opacity: 1, width:200, height:150 };
var t=0;
function hextend(d){
d.animate(kd_big); d.find('div').show(); $('.outside').off();
var sbs=$(d).siblings(); $(sbs).off(); sbs.append('i am siblings');
d.append('I AM CLICKED'); hshrink($(sbs));
d.on('click', function (){ hshrink($(d)); });
$(sbs).on('click', function (){ hextend($(sbs)); });
}
function hshrink(s){
s.find('div').hide(); s.animate(kd_small);
}
$('.outside').on('click', function(){
hextend($(this) );
});
$('.inside').on('click', function(e){
e.stopPropagation(); $(this).html('inside div clicked' + t +'times');
t++;
});
Thanks
Instead of using .on('click' use delegate('click' or `.live('click', as you are appending divs.
However, both .live and .delegate have been superseded, so I imagine this would be a 'quick fix'.
Looking again at the code, I think you may have to use 'addClass' to add the correct class to the div's you are appending, and use the console to check the elements once they are centered and make sure the classes exist for the elements.

onblur() is not working while onclick() is working fine

I need to make the notification list appear on the click which is working fine. But onblur() is not working at all.
Here is the fiddle: http://jsfiddle.net/eX2zQ/
Code:
html:-
<div class="one" onclick="hidetwo();" onblur="remove_the_notification();">
<div>
<ul class="dropdown" id="notification" >
<li>kjhlkjhkjhklhjklj</li>
<li>kjhlkjhkjhklhjklj</li>
<li>kjhlkjhkjhklhjklj</li>
<li>See_All</li>
</ul>
</div>
</div>
css:-
.one{
overflow: visible;
width: 21px;
height: 21px;
background-color:black;
}
js:-
var show=0;
function hidetwo(){
if (show==0){
document.getElementById('notification').style.display="block";
show=1;
}
else if (show==1){
document.getElementById('notification').style.display="none";
show=0;
}
}
function remove_the_notification(){
alert('hide one');
if (show==0){
document.getElementById('notification').style.display="block";
show=1;
}
else if (show==1){
document.getElementById('notification').style.display="none";
show=0;
}
}
You have onLoad selected in the JSFiddle options. That means that your functions are hoisted after everything on the page is loaded, and so their references aren't available at the time that the handlers are attached. Also, AFAIK, without contenteditable your can't 'blur' a <div> - this event is usually for form elements like inputs. Perhaps you meant onmouseleave?
<div class="one" onclick="hidetwo();" onmouseleave="remove_the_notification();">
JSFiddle
Use onmouseout for this. This will trigger when the mouse is going outside the div.
W3Schools onmouseout
onBlur() event will work with input element like text,file . it will not working on div,so please try onmouseLeave(),onmouseout()
<div class="one" onclick="hidetwo();" onmouseout="remove_the_notification();">
To make onblur event worked on DIV element you need to add tabindex attribute for DIV. For example:
<div class="one" onclick="hidetwo();"
tabindex="0" onblur="remove_the_notification();">
...
</div>

how to add a div and apply a style to it in jquery

the code is like this:
<div id="comments">
<h2>comments list</h2>
<div class="clear-block">....</div>
<div class="clear-block">....</div>
<div class="clear-block">....</div>
<div class="indented">....</div> // this div is indented.
<div class="box"...</div>
</div>
now, i want to use jquery to add a border to the
<h2>......</div>
part.maybe i shoule add a div label first before the h2 label, then the close label
</div>
before
<div class="box"> .
then using a style
border:1px...
but i don't how to do it. thank you.
the border effect like this http://phplist.xxmn.com/1.jpg
$('.clear-block,.indented,.box').css('border', '1px solid black');

Categories

Resources