I'm trying to replicate a facebook like comments section bevaviour so when a user wants to add a new comment the text color is fading and the caret is at the begenning of the new massage. I'm using this code:
var inp = document.getElementsByTagName('input')[1];
if (inp.createTextRange) {
var part = inp.createTextRange();
part.move("character", 1);
part.select();
} else if (inp.setSelectionRange){
inp.setSelectionRange(1, 1);
}
and it seems to work but when I try to put it inside a Jquery selector like this:
$("#massages_body input").focus(function(){
$(this).css('color', 'rgba(128,128,128,0.4)');
if ($(this).createTextRange) {
var part = $(this).createTextRange();
part.move("character", 1);
part.select();
} else if ($(this).setSelectionRange){
$(this).setSelectionRange(1, 1);
}
});
it doest'nt work at all. I'm sure i'm using Jquery or Javascript wrong here but I can't find the problem. Thanks for your help!
What I believing you are thinking of is Facebook's use of form input placeholders which are a part of the HTML5 spec and supported by all major and modern browsers.
You can use this library to reproduce that effect for legacy browsers as well: Placeholders.js
Related
I'm working on a HTML5 friendly drag and drop system and I've encountered another mystery that seems to make no sense...
The system is working in Edge - it's when I'm emulating IE8 that I encounter this latest problem.
I have a set of '.draggable' divs that get the following listener attached:
$(document).ready(function() {
$('#reset-button').click(resetDraggables);
if (!dragAndDropSupported()) {
var $draggables = $('.draggable');
$draggables.each( function (index) {
$(this).mousedown( jQueryStartDrag );
});
}
}
The draggables can be sent back to their original locations by hitting a 'reset' button. That all works fine.
The problem is - any divs that get sent back to their origins are no longer draggable. Even if I re-attach the listener in the reset function, it does not fire. Once again, this issue is only happening when I'm emulating IE8 and I don't remove the listener anywhere in my code.
function resetDraggables() {
if ( !$('#reset-button').hasClass('inactive') ) {
var $dropTargets = $('.drop-target');
$dropTargets.each(function (index) {
var draggableId = $(this).attr('data-contains');
var $originDraggable = $('#' + draggableId);
if ($originDraggable.attr('id')!=undefined) {
var $droppedDraggable = $(this).find('.draggable');
$droppedDraggable.remove();
$originDraggable.removeClass('inactive').addClass('draggable').attr('draggable', 'true').css('filter', 'alpha(opacity=100)').hide().fadeIn('fast');
$('#' + draggableId).mousedown( jQueryStartDrag );
$(this).removeClass('occupied').attr('data-contains', '');
$('#reset-button').addClass('inactive');
}
});
}
}
I've realised it's the $droppedDraggable.remove() line that's causing the problem. I'm not sure why a line to remove ONE object would remove the listener from another. The $droppedDraggable object was cloned from the other; Is that causing the issue?
Any ideas what might be going on?
OK, so I replaced the jQuery remove() lines with...
var droppedDraggable = document.getElementById('dropped-' + draggableId);
droppedDraggable.outerHTML = "";
...and that has done the trick. I'm guessing there must have been some hidden association made between the objects when one was cloned from the other and remove()ing one removed the mousedown listener from the other.
If anyone has a better theory, feel free to let me know, but this seems to have solved the problem.
Edit
I've just realised the above fixed the problem in IE8, but not in 9. Great! If anyone has any pointers on how NOT to include a bunch of browser-specific work arounds in my code, I'd be very keen to hear them. Thanks.
Please bear with me I am brand new to learning javascript (self taught)! I am usually one to find answers on my own from just web browsing but so far I haven't found any resources explaining how to accomplish the following:
So, basically all I want to do is change this (HTML):
SPEAKERS
to an image by using javascript.
The image is kept in the same folder as the html and the js.
Here is as far as I know to go with the javascript:
function showImage()
{
picture = new Image(100,100);
picture.src = "icon2.png";
document.getElementById("speakers").innerHTML = picture.src;
}
function goBack()
{
document.getElementById("speakers").innerHTML="SPEAKERS";
}
For clarity, all I would like to do is change the text ("SPEAKERS") to an image using 'onmouseover' while using the same hyperlink in the process.
It seems like a very simple problem but I don't know enough to determine if what I want to do is even possible. If it's not possible that's fine, I would just like to know either way ;P. Thanks ahead of time!
If you're ok with using jquery, you could use .html() and .hover()
http://jsfiddle.net/u8fsU/
Try something like this to get you started (not a complete nor tested solution):
var showImage = function(){
var picture = document.createElement("img");
picture.src = "icon2.png";
picture.href = "link.html";
var speakers = document.getElementById("speakers");
speakers.parentNode.replaceChild(speakers, picture);
}
Please see https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference for a good reference to some of the available DOM properties and methods.
I am looking for a very minimal jQuery rich textbox plugin for a web app I am working on.
The user will only need to see the 'textbox', and not any toolbars as all of the rich formatting will be coded depending on what they type.
I have attempted to create my own with an iframe, but there are problems. One of them being when wrapping strings in divs, the caret is moved to the beginning and it can't be moved inside the div without clicking. http://jsfiddle.net/DVjYa/
This is a problem because I need it to behave like a normal textbox. In a normal textbox, you would be able to navigate with the arrow keys without having to click. Hence why I am looking for a plugin which has already overcome these problems.
You can use CLEDITOR which is very lightweight. You can disable all the toolbar buttons and hide the toolbar as well. In addition to this, it lets you make the selection bold/italic using keyboard shortcuts (CTRL+B/CTRL+I) even though the toolbar does not exist.
Demo: http://jsfiddle.net/Rft3A/
var editorDoc;
$(function() {
var editor = document.getElementById ("editable");
if (editor.contentDocument) {
editorDoc = editor.contentDocument;
} else {
editorDoc = editor.contentWindow.document;
}
var editorBody = editorDoc.body;
if ('contentEditable' in editorBody) {
// allow contentEditable
editorBody.contentEditable = true;
}
else { // Firefox earlier than version 3
if ('designMode' in editorDoc) {
// turn on designMode
editorDoc.designMode = "on";
}
}
});
will add another answer although post is a little old
Trumbowyg A lightweight and amazing WYSIWYG JavaScript editor - 15kB only (from github page)
I'm trying to make an infinitely rotating imagereel with jQuery. This imagereel shifts between images with an interval of 5000 milliseconds, then fading out the 'old' image and fading in the 'new' image. The image to be displayed has a style-attribute for "display:inline".
The code can be found below:
function switchImage(){
var selector = $('#fotoreel img[style="display: inline; "]');
var nextOne = $(selector).next();
if($(nextOne).length == 0)
{
var nextOne = $('#fotoreel img:first');
}
$(selector).fadeOut('normal',function(){
$(nextOne).fadeIn('normal');
});
var t = setTimeout("switchImage()",5000);
}
$(document).ready(function(){
setTimeout("switchImage()",5000);
});
The problem is that it works fine in Chrome, but in Firefox and in Opera it only shifts image one time. In IE it's worse; there it doesn't work at all.
Do you guys know a better way of infinitely looping with javascript? Now I use setTimeout() to call the function again, but that doesn't seem to work.
EDIT
Okay, thank you everyone! Such fast responds, awesome!
The solution that I used was the one of adding a class and searching for that instead of for the style. The display:inline didn't appear to be a problem, as it worked out, but all the browsers appeared to implement the jQuery fadeIn() function differently.
I namely wanted to filter EXACTLY on "display: inline ;", because the spaces were added in Chrome, but not in IE, FF or Opera. So that means the style attribute wasn't accurately at all to filter with. Stupid me! :)
I made sure that a class was added to the image that is showed currently, and find the next one by filtering on that class. Now it works like a charm.
Thank you all for your answers, I love this place! :D
This is most likely because you are checking the style attribute, which is very inconsistent in browsers. I.E. doesn't work at all or works with various amounts of white-space. Just simplify your selector to use a class or ":visible"
It's probably going to work better if you explicitly mark images with a class:
function switchImage(){
var selector = $('#fotoreel img.current');
var nextOne = $(selector).length ? $(selector).next();
if($(nextOne).length == 0)
{
var nextOne = $('#fotoreel img:first');
}
$(selector).fadeOut('normal',function() {
$(selector).removeClass('current');
$(nextOne).addClass('current').fadeIn('normal');
});
setTimeout(switchImage, 5000);
}
$(document).ready(function(){
$('#fortoreel img:last-child').addClass('current');
setTimeout(switchImage,5000);
});
Note also that in my calls to "setTimeout()" I pass a direct reference to the function instead of a string version of the code to call it.
This wasn't working because the browsers you mentioned did not like the display: inline selector you used.
I got it working using the following:
function switchImage() {
var selector = $('#fotoreel img:visible');
var nextOne = selector.next();
if (nextOne.length == 0) {
var nextOne = $('#fotoreel img:first');
}
selector.fadeOut('normal', function () {
nextOne.fadeIn('normal');
});
var t = setTimeout(switchImage, 5000);
}
$(document).ready(function () {
setTimeout(switchImage, 5000);
});
I was wondering if anybody knows how I would go about detecting when the scrollbar appears inside a textarea.
I am currently using mootools for my JavaScript and I am having issues getting it to detect a scrollbar.
function has_scrollbar(elem_id)
{
const elem = document.getElementById(elem_id);
if (elem.clientHeight < elem.scrollHeight)
alert("The element has a vertical scrollbar!");
else
alert("The element doesn't have a vertical scrollbar.");
}
See this jsFiddle http://jsfiddle.net/qKNXH/
I made a jQuery "compatible" version of Tommaso Taruffis code
function resize_until_scrollbar_is_gone(selector) {
$.each($(selector), function(i, elem) {
while (elem.clientHeight < elem.scrollHeight) {
$(elem).height($(elem).height()+5);
}
});
}
It can handle multiple elements and accepts: selectors, jQuery objects, or DOM elements.
It can be called like this:
resize_until_scrollbar_is_gone('textarea');
Tommaso's solution works perfectly, even with a text area. But if the user were to type in the textarea and suddenly the textarea gave itself a scrollbar, your javascript wouldn't know or be triggered.So you might want to add something like
onKeyUp='has_scrollbar("textareaID")'
For React I've found https://github.com/andreypopp/react-textarea-autosize
import Textarea from 'react-textarea-autosize';
...
<Textarea maxRows={3} />