We Keep Coding

How can I attach an event to an object, that is covered by another one?

I'm trying to unhide a div, when the mouse pointer enters its sibling image and hide it when it leaves. But in fact, when I move the mouse pointer while it is on the image, it just starts to twinkle.
Both image and div have the same size.
HTML code:
<img src="../recource/person/1.png">
<div class="o_p_faces_e_glass_off">
<div><p>Well, I enjoy working for this company, everything is okay.</p></div>
</div>
JS code:
var entertimes = 0;
$(".o_p_faces_e img").mouseenter(function(){
if(entertimes==0) {
var glassON = $(this).next();
glassON.removeClass("o_p_faces_e_glass_off");
glassON.addClass("o_p_faces_e_glass_on");
entertimes++;
}
});
$(".o_p_faces_e img").mouseleave(function(){
if(entertimes==1) {
var glassOFF = $(this).next();
glassOFF.removeClass("o_p_faces_e_glass_on");
glassOFF.addClass("o_p_faces_e_glass_off");
entertimes--;
}
})
CSS code:
.o_p_faces_e img {
position: absolute;
top:0;
left:51px;
border:5px solid #f7ec16;
border-radius:50%;
display:block;
margin-left:auto;
margin-right:auto;
}
.o_p_faces_e_glass_off {
display: none;
cursor: pointer;
}
.o_p_faces_e_glass_on {
position:absolute;
left:56px;
top:5px;
width:330px;
height:330px;
background-color:rgb(252, 247, 156, 0.7);
display: block;
margin-left:auto;
margin-right:auto;
border-radius:50%;
cursor:pointer;
overflow: hidden;
transition:all 1s ease-out;
}

Both can be added to the same div like so:
$(".o_p_faces_e img").mouseenter(function() {
//mouse enter code
}).mouseleave(function() {
//mouse leave code
});

Move CSS out of JavaScript file and into CSS class

I have the following JavaScript code with inline CSS.
var container = display.getContainer();
container.style.cssText = 'width:100%;height:100%;z-index:100;object-fit: contain;';
document.body.appendChild(container);
I would like to move the inline CSS to the following class in style.css
.containerClass {
width:100%;
height:100%;
z-index:100;
object-fit: contain;
}
I have tried the following:
container.addClass('containerClass');
I've been unable to articulate my problem correctly, thus am having trouble finding the precise solution I am after.
Further -how would I go about telling the JavaScript file about the location of .containerClass?

Note: The classList property is not supported in Internet Explorer 9.
The following code will work in all browsers -
function addClass() {
var element, name, arr;
element = document.getElementById("container");
name = "mystyle";
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;
}
}
.mystyle {
background-color: black;
color: white;
}
div {
margin-top: 20px;
width: 100%;
padding: 25px;
font-size: 25px;
box-sizing: border-box;
border: 1px solid #000;
}
<p>Click the "Add Class" button to add the "mystyle" class to the container element:</p>
<button onclick="addClass()">Add Class</button>
<div id="container">This is a DIV element.</div>

In you style.css, define the properties for .containerClass.
style.css :
.containerClass {
width:100%;
height:100%;
z-index:100;
object-fit: contain;
}
When you want to add this styling, just add that class to the element you want to using javascript.
Javascript:
var container = document.getElementById("elementId");
container.classList.add("containerClass");

why changing source of image , execute my inline javascript

Hi guys i just created a webpage , that use pagemethods
like this
function get_frame() {
//send a request to change image named "1.jpeg" in path of "src/frames/1.jpeg"
PageMethods.GrabFrame(imgw, imgh, t, f);
}
function t() {
//refresh image source to new image and set timer
document.getElementById('dImg').src = "src/frames/1.jpeg?" +
new Date().getTime();
setTimeout(function () { get_desktop(); }, Main.IMGrefresh.value);
}
function f() {
//do nothing
var x = 0;
}
And also used an inline javascript with jquery like this
<script>
$("#cover").mousemove(function (e) {
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
move_mouse(relX, relY);
});
</script>
And some asp.net clientside code like this
<div id="dDiv">
<img id="dImg" alt="" src="" />
<div id="cover">
</div>
</div>
That the inline javascript is at the end of that html code
So move_mouse() method must run only when user move his mouse, it moves correctly but it moves even when mouse didn't have movement when image refreshes, i mean when image refreshed by javascript, it runs move_mouse method, too.
Css for these elements
#cover {
position:absolute;
top:0px;
left:0px;
text-align:center;
background-color:Black;
height:200px;
width:300px;
border:0px none black;
margin:0px auto 0px auto;
filter: alpha(opacity=1);
-moz-opacity: 0.01;
-khtml-opacity: 0.01;
opacity: 0.01;
}
#dDiv {
position:relative;
text-align:center;
background-color:Black;
height:200px;
width:300px;
border:0px none black;
margin:0px auto 0px auto;
}
#dImg {
background-color:Black;
height:200px;
width:300px;
border:0px none black;
margin:0px 0px 0px 0px;
}
And also they are changing in javascript
function resize() {
imgh = Main.IMGheight.value;
imgw = Main.IMGwidth.value;
$("#dDiv").css("height", imgh);
$("#dDiv").css("width", imgw);
$("#dImg").css("height", imgh);
$("#dImg").css("width", imgw);
$("#cover").css("height", imgh);
$("#cover").css("width", imgw);
}

Ahh i just found it myself AGAIN , just move the mouse event to js function and put it in body onload , because inline javascript methods are saved in catch and this command => "new Date().getTime();" make it to refresh and get the new method , so this triggers the event .

Users blocking javascript popup boxes

I'm struggling on my website with members selecting in Firefox/Chrome etc to disable popup boxes / javascript alerts.
I use alert boxes to confirm things like, for example, if someone wants to delete a message.
However, if they delete a few messages too fast one after the other then Firefox etc gives the option to block further javascript alerts. Then my members can no longer delete their messages.
I'm sure they can fix it client-side, but what can I do server-side to stop members being given the option to block javascript alerts?
Thanks
Matt

I'm not sure that default browser alerts/popups are a great way to go from a UX perspective. Browsers typically block them for a very good reason - ads.
You might be interested in a library called alertify.js (http://fabien-d.github.io/alertify.js/).
Creating alerts with this library is pretty simple, and browsers will not block them:
alertify.alert("Hello World");
Confirm dialogs like what you mentioned in your question are pretty simple too:
alertify.confirm("Are you sure you want to delete the message?", function (e) {
if (e) {
// user clicked "ok"
} else {
// user clicked "cancel"
}
});

I whipped this together quickly if you do not want a heavy footprint (Not really styled either). But you can put raw html into your confirm boxes with this code.
HTML
<div id="confirm">
<div class="message"></div>
<button onclick="$('#confirm').hide()[0].success();">Ok</button>
<button onclick="$('#confirm').hide()[0].failure();">Cancel</button>
</div>
JS
var $confirm = $("#confirm");
function confirm(msg, success, failure) {
$confirm.find(".message").html(msg);
$confirm.show();
$confirm[0].success = success;
$confirm[0].failure = failure;
}
CSS
#confirm {
display : none;
width : 100px;
height : 100px;
position : fixed;
border : 1px solid black;
top : 5px;
right : 5px;
}
http://jsfiddle.net/hVC5A/4/

you can use a custom confirm/alert/prompt box here is an example i have made just note the css animations was some experimenting i was doing you dont need to include these
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="customAlert.css" />
<title>Custom Alert</title>
</head>
<body>
<div id="customAlertOverlay"></div>
<div id="customAlertBox">
<div>
<div id="customAlertHead"></div>
<div id="customAlertBody"></div>
<div id="customAlertFoot"></div>
</div>
</div>
<p>other content</p>
<button onclick="cAlert('Error', 'Message')">click me</button>
<script src="customAlert.js" type="text/javascript"></script>
</body>
</html>
css:
#customAlertOverlay{
display: none;
opacity: 0;
position: fixed;
top: 0px;
left: 0px;
background: #FFF;
width: 100%;
z-index: 9;
animation : cAlertFlash linear 1s infinite;
}
#customAlertBox{
display: none;
position: fixed;
background:#FFF;
border-radius:7px;
width:550px;
z-index: 10;
top:30%;
}
#customAlertBox > div{
background:black;
margin:8px;
border-radius: 10px;
border:5px solid black;
}
#customAlertBox > div > #customAlertHead{
border-radius:10px 10px 0 0;
background: #FF6600; /*FF7112*/
font-size:19px;
padding:10px;
color:black;
text-align: center;
}
#customAlertBox > div > #customAlertBody{
background:#FF6600;
padding:20px;
color:black;
}
#customAlertBox > div > #customAlertFoot{
background: #FF7112;
padding:10px;
text-align:center;
border-radius: 0 0 10px 10px;
}
#customAlertBox > div > #customAlertFoot:hover{
background: #FF5E5E;
border-top: black 1px solid;
}
#keyframes cAlertFlash {
0% {opacity: 0.1;}
25% {opacity: 0.75;}
50%{opacity: .75;}
100%{opacity: .1;}
}
javascript:
function cAlert(headMSG, bodyMSG){
var customAlertOverlay = document.getElementById("customAlertOverlay");
var customAlertBox = document.getElementById("customAlertBox");
var winH = window.innerHeight;
var winW = window.innerWidth;
var customAlertHead = document.getElementById("customAlertHead");
var customAlertBody = document.getElementById("customAlertBody");
var customAlertFoot = document.getElementById("customAlertFoot");
customAlertOverlay.style.height = winH+"px";
customAlertBox.style.left = ((winW/2) - (550/2)) +"px";
customAlertHead.innerHTML = headMSG;
customAlertBody.innerHTML = bodyMSG;
$("#customAlertOverlay").slideDown("fast");
$("#customAlertBox").slideDown("fast");
customAlertFoot.innerHTML = "Ok";
}
$(document).ready(function(){
$("#customAlertBox").draggable();
$(document).on("click", "#customAlertFoot", function(){
$("#customAlertOverlay").slideUp("fast");
$("#customAlertBox").slideUp("fast");
});
});
FIDDLE - working with exception of dialog close

alignment issue of div tag

I am trying to create a web page where on click of a button I can add div tags. What I thought to do was that I'll create two div tags within a single div so that over all presentation will be uniform and similar to a table having two columns and multiple rows and the first column contains only label's and second column will contain textbox.
Here is the JS file:
var counter = 0;
function create_div(type){
var dynDiv = document.createElement("div");
dynDiv.id = "divid_"+counter;
dynDiv.class="main";
document.body.appendChild(dynDiv);
question();
if(type == 'ADDTEXTBOX'){
ADDTEXTBOX();
}
counter=counter+1;
}
function question(){
var question_div = document.createElement("div");
question_div.class="question";
question_div.id = "question_div_"+counter;
var Question = prompt("Enter The Question here:", "");
var node=document.createTextNode(Question);
question_div.appendChild(node);
var element=document.getElementById("divid_"+counter);
element.appendChild(question_div);
}
function ADDTEXTBOX(){
var answer_div = document.createElement("div");
answer_div.class="answer";
answer_div.id = "answer_div_"+counter;
var answer_tag = document.createElement("input");
answer_tag.id = "answer_tag_"+counter;
answer_tag.setAttribute("type", "text");
answer_tag.setAttribute("name", "textbox");
answer_div.appendChild(answer_tag);
var element=document.getElementById("divid_"+counter);
element.appendChild(answer_div);
}
Here is the css file:
.question
{
width: 40%;
height: auto;
float: left;
display: inline-block;
text-align: justify;
word-wrap:break-word;
}
.answer
{
padding-left:10%;
width: 40%;
height: auto;
float: left;
overflow: auto;
word-wrap:break-word;
}
.main
{
width: auto;
background-color:gray;
height: auto;
overflow: auto;
word-wrap:break-word;
}
My problem is that the code is working properly but both the divisions are not coming in a straight line. after the first div prints on the screen the second divisions comes in another line. How can I make both the div's come in the same line?
PS: should I stick with the current idea of using div or should I try some other approach? like tables?

The reason its in diffrent lines lies in your JS code, try setting your class like following:
//question_div.class="question";
question_div.setAttribute("class", "question") ;
and
//answer_div.class="answer";
answer_div.setAttribute("class", "answer");
and also this:
//dynDiv.class="main";
dynDiv.setAttribute("class", "main");
Your divs have not class attribute set properly. I recommend chrome in-built tools for developers or FireBug add-on if you use Firefox to check whether elements you built are like you design them to be.
You may check code here: http://jsfiddle.net/Nnwbs/2/
var counter = 0;
function create_div(type){
var dynDiv = document.createElement("div");
dynDiv.id = "divid_"+counter;
//dynDiv.class="main";
dynDiv.setAttribute("class", "main");
document.body.appendChild(dynDiv);
question();
if(type == 'ADDTEXTBOX'){
ADDTEXTBOX();
}
counter=counter+1;
}
function question(){
var question_div = document.createElement("div");
//question_div.class="question";
question_div.setAttribute("class", "question") ;
question_div.id = "question_div_"+counter;
var Question = prompt("Enter The Question here:", "");
var node=document.createTextNode(Question);
question_div.appendChild(node);
var element=document.getElementById("divid_"+counter);
element.appendChild(question_div);
}
function ADDTEXTBOX(){
var answer_div = document.createElement("div");
//answer_div.class="answer";
answer_div.setAttribute("class", "answer");
answer_div.id = "answer_div_"+counter;
var answer_tag = document.createElement("input");
answer_tag.id = "answer_tag_"+counter;
answer_tag.setAttribute("type", "text");
answer_tag.setAttribute("name", "textbox");
answer_div.appendChild(answer_tag);
var element=document.getElementById("divid_"+counter);
element.appendChild(answer_div);
}
create_div("ADDTEXTBOX");
​And about that aproach I mean div or tables, you are correct to use div, its generaly recommended to do so.
Also after you correct your JS code fix also a bit your css styles as you like.

If you are using chrome using inspect element and find the corresponding 'div' tag and try to adjust the style(position)

Try to position both Divs with absolute inside a main div that could be relative. something like
#mainDiv {
position:absolute; /* or relative depends how you have it*/
width:80%;
height:100%;
left:10%;
}
#div1 {
position:absolute;
width: 40%;
height:100%;
left:0px;
top:0px;
}
#div2 {
position:absolute;
width: 40%;
height:100%;
right:0px;
top:0px;
}

It's simple. To line up both div's, give the position of of the two div's as display:inline-block;
display:inline-block;
Note: BOTH div's have to have this property for them to appear in a line.