Hover event won't fire in firefox - javascript

The following code shows a disabled textbox wrapped in a div with a jQuery UI tooltip attached to it. The jQuery tooltip will be shown properly in Chrome, Safari and IE when hovering the textbox (or, more precisely, the textbox covered div) but not in Firefox (28.0). Can somebody explain this behaviour and offer a fix? I know that event are generally not fired on disabled elements, so that's why it is bound to the wrapping div.
HTML:
foo
<div id="container" title="Tooltip test"
style="background: green; display: inline; position: relative; z-index: 10">
<input id="box" type="textbox" disabled="disabled" value="baz"
style="position: relative; z-index: 1"></input>
</div>
bar
JavaScript:
$("#container").tooltip();
Here is a jsfiddler

I found a trick. you can use display:inline-block; and background:transparent; and add the trick which is padding:2px; to the #container div. and it will work the way you want ;)
http://jsfiddle.net/banded_krait/TAD2w/33/

You are correct, disabled elements do not fire jQuery mouse events, and because of this, your tooltip is still not firing.
If you hover over the little green sliver on the right side of the textbox, it does fire. One solution to this is to move the textbox behind its container onDisabled.
input[disabled]
{
z-index: -1;
}
Obviously, this has the limitation of the background needing to be transparent if you want to still see the element, however, it does work in firefox.
JSFiddle

Solution:
type about:config in firefox address bar and press enter search for below option browser.chrome.toolbar_tips and toggle it.
Go to "about:config" and toggle "browser.chrome.toolbar_tips" to "true".
Rahul

Related

how to slideToggle an input with it's placeholder

guys, I wrote a code that whenever I click on a button (that plus sign) my input should slide but as you see my running code whenever I click that button first it start sliding the input until it reaches the placeholder then it starts sliding placeholder as a separate element they don't slide together so I wanted to know is there any way to fix this?that only input slides and placeholder slide with it.
HTML:
<div id="container">
<h1>LIST<i class="fa fa-plus" aria-hidden="true"></i></h1>
<input type="text" placeholder="Add New Todo"></div>
jQuery
var plusSign = $("h1 i")
plusSign.on("click",function(event){
$('input:text').slideToggle(3000);
})
https://jsfiddle.net/Ghost007D/aduLw0u3/1/
The simplest way is to modify your input to:
border: 0; /* change */
display: block; /* add this */
and to prevent animation buildups in jQuery - use .stop() like:
$('input:text').stop().slideToggle(3000);
and additionally to toggle your icon you could do:
plusSign.toggleClass("fa-plus fa-minus"); // if needed
jsFiddle DEMO
the proper way would be to create a wrapper around the input and animate that element instead; but if you're happy with the results and it's tested across browsers - you can keep it like this.
To explain the issue you had:
.slideToggle() does pretty much:
animate height:
if element has no height set it to display: none;
but if your element has borders - those are not animated, and will disappear as soon the element is set to display: none; creating the undesired jump.
Another issue is when animating inline elements - where line-height can interfere - therefore setting to inline-block or block helps - a lot.

Trigger oncontextmenu event in textarea element Angularjs

I'm using the packery library for Angularjs from here. It works fine but I found out that I cannot edit the textarea content when I click on it. After spending some time I was able to make it editable when I right click on the textarea element, but it still doesn't work if I click on it. So now I'm trying to manually trigger the right click event when I click on the textarea so it makes the element editable.
Here's the code
<packery ng-model="files" gutter="12" style="border:0px solid black;width:710px;" >
<packery-object ng-init="user_text='Write something ...';" class="large text sans-font medium-font box-border-raduis">
<div class="hidden-overflow sans-font medium-font" style="clear: both; border: 0px solid purple;
background: white; border-top: 6px solid #00a2d3; padding: 10px; ">
<textarea id="Mytextarea" contenteditable="true" style="margin: 0px;"
ng-click="click();"
>{{user_text}}
</textarea>
</div>
</packery-object>
</packery>
and here's the click() function that tries to trigger the oncontextmenu (right click) event:
$scope.click = function(){
console.log('clicked!');
var e = angular.element(document.querySelector('#Mytextarea'));
console.log(e);
angular.element(e).triggerHandler("oncontextmenu");
};
But this solution doesn't seem to be working. What am I doing wrong?
I would definitely recommend finding out what is preventing you to focus on the textarea since clicking on it and focusing is the default behaviour, however, you can try to instead of having a div wrapping the textarea use a label where the 'for' attribute is the textarea's id e.g:
<label for="Mytextarea" class="hidden-overflow sans-font medium-font" ...>
Textarea here
</label>
I'd usually not accept this since label is an inline element and textarea is a block element but in your case it might help you.
For tracking what is preventing you to focus I'd recommend right click on the textarea > inspect element, and then on the elements tab of Chrome dev tools look for the 'Event Listeners' tab (should be around the right corner of the window) there should be able to see all listeners that have been bound to that element and might help you track the source of the problem.

CSS hover effect on ajax content and mobile devices

I've build a quiz. Each question has 2 answers. When the visitor answers a question, the next one is loaded using Ajax. Before the questions are loaded the visitor has to click a start button first, so the HTML for the questions isn't included in the initial page load.
The problem is when a question is anwsered, the hover effect from the previous question is still active when the next one is loaded.
For example: I anwser question 1 with "B" > question 2 is loaded > the hover effect is active on button B for question 2
I've included an image to make this more clear.
I only have this on mobile devices (iPhone, iPad,...) but not on my laptop.
I've done some research if I can alter the hover pseudo class, but apparently this isn't possible using javascript.
I think the problem is that the HTML is the same for each question, so the hover state stays active for the css class when the first question is answsered.
I can't supply a jsfiddle because the questions are entered as a content type in Drupal, and I can't include the entire Drupal in a fiddle. But here is the HTML and CSS.
<div class="quiz_st_content form-wrapper" id="ajax_form_multistep_form_content">
<div class="quiz_st_content_answer form-wrapper" id="edit-a--2">
<div class="quiz_st_content_answer_info_wrapper">Option A</div>
<div class="quiz_st_content_answer_button_wrapper">
<input class="quiz_st_content_answer_button form-submit ajax-processed" type="image" id="edit-answer-a-2" name="answer_a_2">
</div>
</div>
<div class="quiz_st_content_answer form-wrapper" id="edit-b--2">
<div class="quiz_st_content_answer_info_wrapper">Option B</div>
<div class="quiz_st_content_answer_button_wrapper">
<input class="quiz_st_content_answer_button form-submit ajax-processed" type="image" id="edit-answer-b-2" name="answer_b_2">
</div>
</div>
</div>
CSS
input.form-submit.quiz_st_content_answer_button {
margin: 0;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
height: 30px;
width: 30px;
padding: 20px;
background: #ccc;
}
Hover
input.form-submit.quiz_st_content_answer_button:hover {
background: #ba043f;
}
As mentioned above, this only happens on mobile devices. I've been bashing my head at this for hours now and I'm clueless on how to resolve this.
If anyone could help me, or point me in the right direction it would be greatly appreciated.
When I was working with mobile devices I added
ontouchstart=""
to the body tag like so:
<body ontouchstart="">
This made the hover pseudo selectors not act so awkwardly for me, it may be worth a shot.
I was able to fix this. Well,..its not really a fix because the hover state is still active, but I overwrite the color with the default color on touch devices, like so:
$('.quiz_st_form,').bind('touchstart', function(){
$('body').addClass('touchdevice');
});
So when someone "clicks" on the quiz start button on a mobile device, my body gets the class touchdevice and I "remove" the hover with CSS, like so:
body.touchdevice input.form-submit.quiz_st_content_answer_button:hover {
background: #ccc;
}
Technically the :hover state is still active, its just not visible anymore.
I don't really see a better way on fixing this at the moment. If someone does, please let me know.

Hide the caret in an HTML texbox

So, this is a design decision that many of you may find odd. I would like to hide the caret from appearing in a textbox on a webpage but I want the textbox to remain active.
I was surprised to find that CSS does not actually offer any functionality for custom carets, admittedly it's nothing I've ever had the need for in the past but I thought that surely I wouldn't be the first to want to do this.
The best way for me to explain what I have done is by my showing you the website. www.hududandescape.com
As you can see, I have created my own custom caret which just blinks at the end of the text box that has been styled to blend in with the background. The textbox always keeps focus so there is no risk of users not being able to type in it.
My issue is that the caret that comes with the text box is still blinking. I have fixed this in Chrome and Safari by putting a small black box over the top of the very end of the box, thus covering up the caret. This solution is not ideal however and it does not work in Firefox or IE.
Your solutions, no matter how creative, are highly welcomed :)
Andy
I'm not sure, but try something like this. Idea is simple, i think you'll understand reading the code
<style>
input#top {
width:0px;
border: none;
}
#show-input{
border:1px solid #000;
width: 100px;
height: 25px;
}
</style>
<input id='top' /> <!-- 'hidden' -->
<div id='show-input' ></div> <!-- show input -->
<script>$(function(){
$("#show-input" ).click(function(){
$("#top").focus();
});
$("#top").keyup(
function(){
$("#show-input").html($(this).val())
})
})
</script>

JQuerymobile on an iPad: vclick triggers a scroll to the top of the page, then executes the vclick

SUPER SHORT VERSION:
Elements on a jQuerymobile-based html5 webapp don't respond directly to vclicks on an iPad. Instead, they silently scroll to the top of the page and trigger a vclick on whatever's under the same region of the screen.
LONG VERSION WITH PICTURES AND CODE:
I'm using JQuerymobile and I'm having a problem with my page responding to some vclick events when I'm using my iPad. I've got a page with a bunch of elements that are bound to respond to vclick events. If everything fits onto my iPad's display without scrolling, everything works perfectly. If I need to scroll to see the element I want to click, I get the following behavior:
I tap my finger where the red circle is here:
The page flickers and the page responds as if I clicked the area in the little blue circle:
(blue circle image redacted for lack of hyperlinks to noobs (It's Q43ri.png on imgur)
I was confused as to what the heck was happening until I superimposed the screens:
So when I click one of my divs, it seems like it's paying attention to the coordinates I click on the display, but then scrolling to the top of the window and actually executing the click from that perspective. How do I fix this?
Here's the html for that section of the page:
<div id="inventoryPageContainer" style="padding-right: 100px;">
<div id="inventoryDisplayHeaders">
<div class="inventoryPageName inventoryPageColumn header">Name</div>
<div class="inventoryPageQuant inventoryPageColumn header">#</div>
<div class="inventoryPageWt inventoryPageColumn header">Wt.</div>
</div>
</div>
<div id="inventoryTemplate" class="inventoryPageRow" style="display: none;">
<div class="inventoryPageName inventoryPageColumn">Template Item Name</div>
<div class="inventoryPageQuant inventoryPageColumn">#</div>
<div class="inventoryPageWt inventoryPageColumn">X lb</div>
</div>
<div style="clear: both; border-bottom: 2px solid black;"></div>
All of the divs are clones of that inventoryTemplate item. If you need the CSS for that (I don't know man, I'm trying to give anyone reading this all the info I've got):
#inventoryPage .inventoryPageName {
width: 100%;
}
#inventoryPage .inventoryPageQuant {
width: 50px;
margin-right: -50px;
vertical-align: middle;
}
#inventoryPage .inventoryPageWt {
width: 50px;
margin-right: -50px;
right: -50px;
vertical-align: middle;
}
Here's the event binding code:
templateCopy.find('.inventoryPageName').text(row.itemName).bind('vclick.inventoryPage', { row: row }, generateItemDescriptionDialog);
templateCopy.find('.inventoryPageQuant').text(row.quantity).bind('vclick.inventoryPage', { row: row }, generateItemQuantityDialog);
generateItemDescriptionDialog and generateItemQuantityDialog both set some values on some dialog pages and then trigger the dialog pages to show with $.changePage("#thepages").
So uh.. why's this happen and how do I make it not happen?
(It's an RPG character sheet webapp if anyone's wondering why I'm cataloging weapons and guns.)
I think my problem was how I wrote my event handlers. I went through and added:
if (event.preventDefault)
event.preventDefault();
to the beginning of each handler and made sure the handlers returned false. Admittedly, I don't know precisely what this did, so I'm cargo-culting a bit here, but it did solve the problem.

Categories