What I want is : when mouse points on a div, page's scroll bar doesn't scroll. Is this impossible? When I do this, the page's scroll bar always scrolls. Here is a piece of the javascript code:
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
How to do that?
Here you go:
var noscroll = document.getElementById('noscroll');
var locked, lockedX, lockedY;
noscroll.addEventListener('mouseover', function (){
locked = true;
lockedX = window.scrollX;
lockedY = window.scrollY;
}, false);
noscroll.addEventListener('mouseout', function (){
locked = false;
}, false);
window.addEventListener('scroll', function (e){
if(locked === true){
window.scrollTo(lockedX, lockedY);
e.preventDefault();
}
}, false);
Change the variable noscroll to whichever element you don't want to allow scrolling on.
Demo
You can basically achieve it through css by specifying width, height and overflow properties for your div:
<div style="width:100px; height:100px; overflow: auto;" >
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
</div>
Related
Problem
Hi, I have some code that when a button is clicked, all of the content in a contentEditable <p> tag will have a font-weight of 600 (bold).
What I'm wondering is how can I make it so when the button is pressed, rather than style all the content in the p tag to 600 font weight, only style the selected text. For example, if you only highlight the first two words of the p tag and press the button, only the first two words will have their font-weight changed.
Image example
In the example, when the button is pressed, only the first two words would have their font-weight changed.
Link to the fiddle containing code: https://jsfiddle.net/AidanYoung/9tg4oas5/
here is your solution.
function changeBold() {
const text = window.getSelection().toString();
var btn = document.createElement('span');
btn.innerHTML = text;
btn.style.fontWeight = 'bold';
document.execCommand('insertHTML', false, btn.outerHTML);
}
<p contenteditable="true" id="contenttxt">
Some text in this paragraph tag
</p>
<button onclick="changeBold()">Bold selected text</button>
You can use the span label and add ID
function changeBold() {
document.getElementById("strongC").style.fontWeight = "600";
}
<p contenteditable="true" id="contenttxt">
<span id="strongC">Some text</span>
in this paragraph tag
</p>
<button onclick="changeBold()">Bold selected text</button>
I have an input with text-overflow: ellipsis. Is it possible to show the beginning of the text on blur()? Right now it stays at the end of the text where the cursor was.
Consider the following GIF trying to demonstrate the issue.
First, I focus the <input> and go the beginning of the input Ctrl + Home. Then I go to the end of the <input> by focusing it again and pressing Ctrl + End and unfocussing. You can see that the ellipsis is only there when my cursor is at the beginning of the input.
I might have just cracked it. Testing different browsers. Edit. Did not work properly in Safari. The setSelectionRange sets the focus back on the input on blur. Ideas?
$("input").on('blur', function(e) {
$(this).get(0).setSelectionRange(0,0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="A bunch of text text text text text text text text text" style="width: 100px; text-overflow: ellipsis;">
Works, but creates a loop in Safari where it sets focus again... Any way to set the selectionrange first and then blur?
$("input").on('blur', function(e) {
$(this).get(0).setSelectionRange(0,0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="A bunch of text text text text text text text text text" style="width: 100px; text-overflow: ellipsis;">
It's fine to blur again when you need to, take a look at the below code and read comments to see what's going on
// set true initially
var setRange = true;
$("input").on('blur', function(e) {
var $this = $(this);
// set range then trigger blur again, change setRange flag
if (setRange) {
$this.get(0).setSelectionRange(0, 0);
setRange = false;
$this.trigger("blur");
} else {
// range was set before, reset the flag so it will work next time
setRange = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="A bunch of text text text text text text text text text" style="width: 100px; text-overflow: ellipsis;">
consider below content editable div
.editable-div div {
display: inline-block;
}
<div contenteditable="true" class="editable-div">
<div> This </div> <div> is a an example</div><div> for inline block</div> <div>elemenst </div>
</div>
Put mouse cursor on anywhere in the content
Press shift+home
It will select only inline-block div content
I want to select the whole content till beginning of the div
I can not change inline-block style of inner divs
Due to above reason(5) I am doing an custom implementation for shift+home and shift+ end, that is why I need to select specific text from a div
*Select as In text selection (user-select) of browser, I already have links for selecting whole content of a div Selecting text in an element (akin to highlighting with your mouse)
but here I want to select specific text only. please help
I think window.getSelection() is what you're looking for.
var selection = "";
function getText() {
if (window.getSelection) {
selection = window.getSelection().toString();
} else if (document.selection && document.selection.type !== "Control") {
selection = document.selection.createRange().text;
}
return text;
}
I've tried this
HTML
<div>
<h1>Some text here</h1>
<p>Text area text here</p>
</div>
jQuery
$(function(){
$('p').on('click', function(e){
e.preventDefault();
var txt = $(this).text();
$(this).parent().append('<textarea>' + txt + '</textarea>');
$(this).remove();
});
});
I need to update the text of a paragraph by inline editing. I need to back the paragraph with the new text typed there and remove the textarea when someone click outside of the textarea.
Thanks
Here is an update to your fiddle http://jsfiddle.net/99pxz8et/2/
what you need is to listen on change event for the new text area and then update it
$area.one('focusout', function() {
$p.show();
$p.text($area.val());
$area.remove()
});
Edit: changed .on() to .one()
Not sure how to do this but I'm trying to make divs behave like columns that stretch across the screen evenly (this is done/easy) and then make sub columns. Here's what I have:
JS:
$(function() {
cols = $('.column');
parent_width = cols.parent().width();
col_fluff = parseInt(cols.css('padding-left'))+parseInt(cols.css('padding-right'))+parseInt(cols.css('margin-left'))+parseInt(cols.css('margin-right'));
col_width = (Math.floor(parent_width/cols.size()-col_fluff));
cols.each(function(){
$(this).width(col_width);
});
});
CSS:
#container{
position:relative;
width:100%;
height:100%;
margin-top:50px;
}
.column{
float:left;
top:0px;
left:0px;
margin-right:20px;
outline:#000 solid 2px;
width:20%;
}
.clear{
clear:both;
}
HTML:
<div id="container">
<div class="column">
This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text
</div>
<div class="column">
This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text
</div>
<div class="clear">clear</div>
</div><!-- end container -->
This works fine until you try a inserting an inner column:
<div id="container">
<div class="column">
This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text
<div class="column">
inner column
</div>
<div class="column">
inner column
</div>
</div>
<div class="column">
This is some text : This is some text : This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text :This is some text : This is some text
</div>
<div class="clear">clear</div>
</div><!-- end container -->
Any ideas?
You can arrange column width by level from outer to inner columns:
Define a function that takes the outermost parent element containing $('.column') elements and arrage it's direct children, then apply the same function to each $('.column') children (as a parent now, to arrange its children) recursively...
$(function(){
function Arrange(colsParent){
cols = colsParent.children('.column');
parent_width = cols.parent().width();
col_fluff = parseInt(cols.css('padding-left'))
+parseInt(cols.css('padding-right'))
+parseInt(cols.css('margin-left'))
+parseInt(cols.css('margin-right'));
col_width = (Math.floor(parent_width/cols.size()-col_fluff));
cols.each(function(){
$(this).width(col_width);
});
cols.each(function(){
Arrange($(this));
});
}
level1ColsParent = $('.column').first().parent();
Arrange(level1ColsParent);
});
My suggestion would be to use display:table-row, display:table-cell to make things a lot more easier. It will automatically arrange your columns and subcolumns in equal width tabular form.
It looks to me like you will have a problem because of the fact that with
cols = $('.column');
you will always get ALL the divs (and any other elements) with that class of the entire document, but what you really want to get is only the children divs/elements of a particular element.
You might try adding a parameter that is the parent element for the columns you will resize per function call.
To get the columns of a particular parent element, you could use the children function.
So pretending that you pass in the parent element, of which you plan to resize all the divs that are children of this parent, you could use this line:
cols = $(parent_element).children('.column');
Also, to make the function recursive you will have to call itself from within the cols.each. Pass in the children so that they will be used as the parent in the next level of calls. I will assume that you can give the function the name of resize_columns_recursive.
Finally the end result would look something like:
function resize_columns_recursive(parent_element){
var cols = parent_element.children('.column');
var col_fluff = parseInt(cols.css('padding-left'))+parseInt(cols.css('padding-right'))+parseInt(cols.css('margin-left'))+parseInt(cols.css('margin-right'));
var col_width = (Math.floor(parent_element.width()/cols.size()-col_fluff));
cols.each(function(){
$(this).width(col_width);
resize_columns_recursive(this);
});
}
EDIT: I made the local vars local with the var declaration. This seems to be working on jsfiddle (see comments).