context menu CSS and event partially working - javascript

I have a little issue with my context menu, the CSS doesn't apply and the event on click doesn't work too. If i inspect the element with F12 (on IE 11), I can see the CSS is on the page (in the header) and I can see that all line of the context menu have the event on click but it doesn't work when I click.
CSS :
.ctxmenu
{
position: absolute;
height: auto;
padding: 0px;
margin: 0;
margin-left: 0.5em;
margin-top: 0.5em;
border: 1px solid black;
background: #F8F8F8;
z-index: 11;
overflow: visible;
}
.ctxline
{
display: block;
margin: 0px;
padding: 2px 2px 2px 8px;
border: 1px solid #F8F8F8;
overflow: visible;
}
.ctxline:hover
{
border: 1px solid #BBB;
background-color: #F0F0F0;
background-repeat: repeat-x;
}
for the constitution of the contextMenu :
for (i = 0; i < listCorrection.length; ++i) {
var p = document.createElement('p');
d.appendChild(p);
p.setAttribute('class', 'ctxline');
p.setAttribute('onclick', 'alert("do something");');
p.innerText = listCorrection[i];
}
when I inspect the element of this context Menu i can see :
<p onclick="alert("do something");" class="ctxline">set</p>
and the div containing the context Menu :
<div id="ctxmenu1" style"CURSOR: pointer" class="ctxmenu">(the p on context menu are here)</div>
does anybody have an idea why ? i try to moove it Inside the header with a but it is still not working.

Well after several hours spend on this issue i might have find a fix, if someday someone end up on this page try this :
replace every line that are like this :
p.setAttribute('class', 'ctxline');
by something like this :
p.className = 'ctxline';
I know it's the same thing, but well IE so sometimes you have to think outside the box (this fix work for IE11, IE9, I did not test with other Navigator).

Related

Virtual Keyboard on mobile browser hides content instead of pushing it up

I am making a mobile web application (using JavaScript) for chatting, so think of the user interface like Viber or WhatsApp or any other chat application, but in a browser instead.
You can see alive demo here: https://mandarini.github.io/chatsim/
You can access this from your phone. The problem is clearly illustrated.
You can find the code here: https://github.com/mandarini/chatsim
I have an input form box with position fixed that stays at the bottom of the browser window. The messages are above the text box, and they scroll behind it, like the message boxes do in WhatsApp.
When the virtual keyboard on my phone appears, that is when I am about to type something, the text box is indeed pushed up, and is fixed at the bottom of the viewport screen, right above the keyboard as expected.
However, the chat messages are not pushed up. As a result, the latest messages are hidden behind the keyboard.
Image 1: Keyboard is hidden
Image 2: Keyboard is shown, messages are hidden behind it
Image 3: Expected result, keyboard is shown, messages are pushed up
Note 1: One main problem is that there is no javascript event that catches the expanse/collapse of the virtual keyboard.
Note 2: The onfocus event does not necessarily capture the expanse/collapse, since a virtual keyboard can be hidden, but still the text box may remain focused.
Below you can find a simplified version of my code, which mocks the posting of messages.
I want the newly posted messages to appear above the virtual keyboard on mobile devices.
function addMsg(e) {
e.preventDefault();
var message = document.createElement("div");
var user = document.createElement("p");
var text = document.createElement("p");
user.appendChild(document.createTextNode("User"));
text.appendChild(document.createTextNode("Message message"));
message.appendChild(user);
message.appendChild(text);
message.classList.add("chat-msg");
document.getElementById("chats").appendChild(message);
message.scrollIntoView();
return false;
}
.chat-container {}
.chat-messages {
overflow: scroll;
padding-bottom: 66px;
/* leaves space for input */
}
.chat-form {
width: 100%;
margin: 0;
position: fixed;
bottom: 0px;
background-color: #ffffff;
border-top: 1px solid rgba(0, 0, 0, 0.12);
padding: 7px 8px 7px 8px;
}
input[type=text] {
width: 96%;
padding: 17px 20px;
margin: 0;
background-color: #fafafa;
box-sizing: border-box;
border-radius: 1px;
border: 0px;
box-shadow: 0;
}
.hidden {
display: none;
}
.chat-msg {
padding: 8px;
margin-bottom: 8px;
font-size: 14px;
width: auto;
max-width: 90%;
clear: both;
word-wrap: break-word;
border-radius: 3px;
border-style: solid;
border-width: 1px;
}
.chat-msg p {
margin: 0;
padding: 0;
text-align: left;
}
<div id="chat" class="chat-container">
<div id="chats" class="chat-messages">
</div>
<form onsubmit="addMsg(event)" class="chat-form">
<label>
<input type="text">
</label>
<input class="hidden" type="submit" value="Post" />
</form>
</div>
I believe you can use the 'focusout' event for this.
document.addEventListener('focusout', e => {
window.scrollTo(0, 0);
});
Also sent a PR: https://github.com/mandarini/chatsim/pull/1

Odd behavior of :first-letter in Chrome

Adding what seems to be an innocuous class to an element having a class containing :first-letter causes the first letter, under some circumstances, to be rendered incorrectly. An element originally has class "unindent", and then class "menuitemon" is added. The fiddle http://jsfiddle.net/pgf3reyt/4/ shows this working on one element, and not working on another. Works OK in Firefox.
p.unindent {
color: #555555;
background-color: #e6e6e6;
border-bottom: 1px solid #d3d3d3;
border-left: 1px solid rgba(0,0,0,0); /* so things are the same size so we don't develop scroll bars*/
border-right: 1px solid rgba(0,0,0,0);
border-top: 1px solid rgba(0,0,0,0);
padding-top: 2px;
padding-bottom: 2px;
padding-left: 25px;
padding-right: 5px;
margin-top: 0;
margin-bottom: 0;
}
p.unindent:first-letter {
margin-left: -20px;
}
p.unindent.menuitemon {
color: #e6e6e6;
background: #555555;
border: 1px solid #222222;
border-radius: 4px;
}
Can someone point out what I might be doing wrong that's causing this?
You've done nothing wrong. Apparently Chrome has decided that for version 41, it'll screw up repainting the :first-letter pseudo-element (incidentally, Chrome is notorious for repaint bugs). If you declare the "menuitemon" class in the markup, it has no trouble rendering the pseudo-element with the negative margin. It's only when you add it dynamically that it screws up.
Fortunately, unlike the cascade resolution bug that affected Chrome 39 -> 40, I was able to work around this very trivially by using a negative text-indent on the element instead of a negative margin on :first-letter:
p.unindent {
text-indent: -20px;
/* ... */
}
/*
p.unindent:first-letter {
margin-left: -20px;
}
*/
The pseudo element (:first-letter) only works if the parent element is a block container box (in other words, it doesn't work on the first letter of display: inline; elements.)
You must set pseudo's parent to
.parent {display:block}
.menutitle {
/* font-size: 1.2em; */
font-weight: bold;
/* font-style: italic; */
margin-left: 0;
}
the moment i commented those two lines it worked properly
EDIT
nop it only solved half the problem
Codepen

Chrome - text not staying within its element border?

So I have a JS function which will display a url under a file preview container after it is uploaded to the server. On firefox, if the text is too long to fit under the preview container above it, it will wrap to the next line which is what I want. On Chromium however, it just extends out as long as it needs to, and will overlap with other things.
How can I fix this? Is there some webkit specific thing I need to set? I tried setting a text-wrap but it had no effect.
this.on("success", function(file, responseText) {
var span = document.createElement('span');
var a = document.createElement('a');
a.href = responseText;
a.innerHTML = responseText;
a.setAttribute('target', '_blank');
a.setAttribute('link', 'color:#000000');
span.appendChild(a);
span.setAttribute("style", "position: absolute; box-sizing: border-box;
webkit-box-sizing: border-box; bottom: -28px; left: 3px; right: 3px;
height: 28px; line-height: 28px; text-color: #000000; ");
file.previewTemplate.appendChild(span);
});
}
Firefox:
Chromium:
EDIT: I'm using dropzone.js, the parent element is a preview container, styled like this:
.dropzone .dz-preview,
.dropzone-previews .dz-preview {
background: rgba(255,255,255,0.8);
position: relative;
display: inline-block;
margin: 17px;
vertical-align: top;
border: 1px solid #acacac;
padding: 6px 6px 6px 6px;
width:100px;
overflow: hidden;
}
Solved it: Fixed by adding the word-wrap: break-word; property in the setAttribute.
Looks fine in Firefox too.

Animate Over Shooting Mouse Click JQuery?

I have the basic idea of my JavaScript operational.
The point of my JavaScript is to make an image of id 'player' move to the position that I click with the mouse, only when I click on the div with the id of 'stage' with the animation lasting 3 seconds.
At the same time, when the animation is running the head should change to 'player is moving' as opposed to when it is still and displaying 'player is still'.
Right now, in Chrome (maybe its a bug with Chrome) the basic functionality of the JS works. However, it seems to overshoot the position of where I click the mouse on the first round and then barely move when I click again in the 'stage' div.
If anyone sees where I might be running into a problem please let me know!
Here's my EDITED JQuery:
$(document).ready(function(){
$('#stage').click(function(e){
$('#header h1').html('Player is moving!');
$('#player').animate({
top: e.pageY + 'px',
left: e.pageX + 'px'
}, 3000, function(){
$('#header h1').html('Player is standing still...');
});
});
});
I have fixed my CSS issue, so don't worry about that but the code is located below for the CSS in case anyone thinks the issue may lie within.
Thanks!
EDIT:
Here's the CSS. The issue has been solved but it has been provided for convenience if you think the issue of the image overshooting the image may lie within for any reason:
#header {
width: 600px;
margin: 20px auto 10px;
padding: 5px;
background-color: whiteSmoke;
border: 1px solid #aaa;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
#header h1 {
text-align: center;
margin: 0;
}
#stage {
overflow: hidden;
width: 600px;
height: 400px;
margin: 0 auto;
padding: 5px;
background-color: whiteSmoke;
border: 1px solid #aaa;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 0 5px #ccc;
position: relative;
}
#player {
position: absolute;
width: 36px;
}
Poor man's example : jsfiddle but it works in FF and Chrome.
Also, I'm curious what styles you lose, simple color style is always applied.
So more information is needed, can you share the complete css?
Update: I'm still not seeing an issue in chrome (with the fiddle example)
Change #stage to something like
#stage {width:600px;height:600px;background-color:#333;position:fixed;top:20;left:0;}
Your player vs page is lying about it's position or where you can click. I wanted the stage to be a fixed item on the page, non-moving. I don't see any other reason (in your CSS or jQuery) why it'd overshoot.
​

Z-index & jQuery Toggle

I have a few divs arranged horizontally that acts as buttons on a navigation bar. When this button is clicked, a hidden submenu div will be made visible below the button that was clicked, but above all the other buttons.
Problem: The submenu div that appears stayed above all the other button divs even though the z-index if the button div that was clicked was changed to be larger than the submenu div's z-index. Will be great to have some help with this! :)
HTML Code
<div class="filter_tab" id="filter_tab_rent"><p>Min/Max Rent</p></div>
<div id="filter_submenu_rent">
Hello
</div>
jQuery Code
$("#filter_tab_rent").click(function(e) {
$("#filter_tab_rent").toggleClass('filter_tab_selected');
$("#filter_submenu_rent").toggle();
});
CSS Code
.filter_tab {
height: 38px;
min-width: 50px;
border: 1px solid #D9D9D9;
border-bottom: none;
float: left;
}
.filter_tab_selected {
z-index: 500
}
#filter_submenu_rent {
width: 300px;
height: 50px;
background: #FFF;
position: absolute;
top: 65px;
display: none;
z-index: 100;
border: 1px solid #D9D9D9;
box-shadow: 0px 2px 5px #888;
}
Additional Info: I'm using Chrome to view this.
z-index will only work with elements position relative and absolute. Add a position to your .filter_tab_selected style.

Categories