I'am developing search engine to my App, and as part of it the user can search multiple phrase here is some example -
When the input line is full like that:
It's height should be adjusted and the text cursor should get to the next line.
The problem is, that it's look like that in the third line my alogrithm is no longer work and it's look like that:
The structure of my the search input is like that
Html:
<div id=s"earchDiv">
<input id="searchInput">
</input>
</div>
JS:
var sDiv = document.getElementById('searchDiv');
var sInput = document.getElementById('searchInput');
var currH = $(sDiv).height();
$(sDiv).css('height', sDiv.scrollHeight + 'px');
var h = 40 - ($(sDiv).height() % 40);
if ($(sDiv).height() % 40 != 0)
$(sDiv).css('height', ($(sDiv).height() + h) + 'px');
which mean that acuttaly the div height is shoud be adjusted.
Someone have some idea or algorithm that can work at that situation?
First of all you have an error in your html:
<div id=s"earchDiv">
<input id="searchInput">
</input>
</div>
should be like this:
<div id="searchDiv">
<input id="searchInput">
</input>
</div>
after that ... i dont see why you use JS to style when you can directly use CSS to style the searchDiv like below:
.searchDiv {
display: block;
width: 100%;
height: auto; // this is important
min-height: 40px; // change this as you wish
}
You can do this via CSS.
#searchDiv{
overflow:hidden; /* the parents of searchdiv should not have fixed height. */
}
Related
I am developing a web application using AngularJS. I find myself in a situation where I have a bar (with the css I created a line) that must dynamically lengthen and shorten.
I know that JQuery scripts are sufficient to do this. For example, if my css is like this:
.my_line{
display:block;
width:2px;
background: #FFAD0D;
height: 200px; /*This is the part that needs to dynamically change*/
}
I could in the controller resize the line (of my_line class) simply with:
$(".my_line").css("height", someExpression*100 + 'px');
The thing is, I would like to dynamically resize the line based on the size of another div element (Or, in general, any HTML element of my choice).
I don't know how to get (at run-time) the size of a certain page element in terms of height.
Only in this way I would be able to create a line that dynamically lengthens or shortens as the size of a div (or some other element) changes!
How do you do this? So I will avoid writing hard-coded the measures but I want make sure that they vary as the dimensions of other elements on the page vary
I hope this is helping:
$(".my_line").css("height", $("#referenceElement").height()*5 + 'px');
.my_line{
display:inline-block;
width:2px;
background: #FFAD0D;
}
#referenceElement {
display:inline-block;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my_line"></div>
<div id="referenceElement">Hi, I'm 5 time smaller than the orange line!</div>
Here I am using the setInterval to track the div's height (you can do width as well) and storing it in a previousHeight variable and comparing it every interval
Then according to the comparison, it will determine if the height of the div has changed. If it has then it will change the height of the other div according to the height of the first div
You can create multiple variables and track multiple elements in the same setInterval
$(document).ready(function(){
var previousHeight = parseInt($("#my-div").css("height"));
setInterval(function(){ checkHeight(); }, 100);
function checkHeight() {
// Check height of elements here
var currentHeight = parseInt($("#my-div").css("height"));
if(currentHeight != previousHeight) {
previousHeight = currentHeight;
$("#dynamic-div").css("height", parseInt(currentHeight) + "px");
}
}
$("#button").click(function() {
$("#my-div").css("height", parseInt(previousHeight) + 5 + "px");
})
})
#my-div{
background: #000000;
height: 20px;
width: 20px;
}
#dynamic-div{
background: teal;
height: 20px;
width: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div">
</div>
<button id="button">Increase div height</button>
<div id="dynamic-div">
</div>
I have a script that uses a text input as a radius to find google map locations within that radius. I did not use form. I used JavaScript to pick the value of the input and append it to the url. I use php $_GET to pick the radius and then use it in the search. The strange thing I noticed was that, I found items within the radius on pc but found nothing on mobile. I have no idea what's wrong. But I was suspecting the javascript / jquery not working on mobile and will like to know if it is possible.
And solutions to make it work.
The html + javascript below and then the php.
<p class="caption_j">Radius in <b> MILES </b></p>
<input class="search_n" value="" name="search_dist" type="text" style="width: 85%;"/>
<span class="ow_right search_dist_lens ow_ic_lens ow_cursor_pointer" style="display: block;background-position: center center; background-repeat: no-repeat; width: 26px; height: 26px;"></span>
<script>
var urlsearch = "http://www.website.ml/items/search/type/";
</script>
<script>
$(document).ready(function(){
var text;
////////////////////////////////////////////////
$(':text.search_n').keypress(function(evt){
if(evt.which===13)
{
if($(':text.search_n').val().length > 0)
{
text = $(':text.search_n').val();
location.assign(urlsearch+'nearme?dist='+text);
}
}
});
$('.search_dist_lens').click(function(){
if($(':text.search_n').val().length > 0)
{
text = $(':text.search_n').val();
location.assign(urlsearch+'nearme?dist='+text);
}
});
///////////////////////////////////////////////
});
</script>
I have this simple code:
<input type="text" value="Some Extremely Really Long Word" />
How do I make sure the value (in this case 'Some Extremely Really Long Word') shows up completely (ie. is not clipped).
I tried to apply the style: overflow:visible and display:nowrap but it didn't work.
I don't want to apply a style like: width: 200px because I don't know how long the words will be.
Fiddle: http://jsfiddle.net/TfKbp/3/
I've used this in the past to dynamically expand the width of a text INPUT to the width of its contents. Basically, you create a SPAN with the exact same font family, font size, etc. and use the keypress event to add the characters, measure its size, and resize the INPUT.
EDIT 1
To dynamically size the text box for its initial value requires just a little more code...
HTML
<input id="txtLong" type="text" value="What does the fox say? Ring-ding-ding-ding-dingeringeding! Gering-ding-ding-ding-dingeringeding! Gering-ding-ding-ding-dingeringeding! What the fox say?" />
<span id="spanLong" style="display: none;"></span>
JavaScript
var txtLong = $("#txtLong");
var spanLong = $("#spanLong");
spanLong.text(txtLong.val());
txtLong.css("width", spanLong.width());
txtLong.keypress(function(e){
if (e.which !== 0 && e.charCode !== 0) {
var char = String.fromCharCode(e.keyCode | e.charCode);
spanLong.text(txtLong.val() + char);
txtLong.css("width", spanLong.width());
}
});
CSS
input, span {
padding: 2px 3px;
font-size: 11px;
font-family: Sans-serif;
white-space: pre;
}
New and Improved Fiddle
EDIT 2
Since you're looking for a way to select text by clicking on it, I thought I'd also point out that you don't necessarily need an INPUT to do that. Check out this JSFiddle. And as an added bonus, it doesn't use JQuery. I know you were kinda opposed to that.
EDIT 3
I found a way to simply resize a textbox to the width of its initial value using only plain JavaScript by adapting this blog post.
HTML
<input type="text" id="txtLong" value="Some very long text that all needs to show"/>
<span id="ruler"></span>
JavaScript
String.prototype.visualLength = function()
{
var ruler = document.getElementById("ruler");
ruler.innerHTML = this;
return ruler.offsetWidth;
}
window.onload = function() {
var txtLong = document.getElementById("txtLong");
var width = txtLong.value.visualLength();
txtLong.setAttribute("style", "width:" + width + "px");
}
CSS
#ruler {
visibility: hidden;
white-space: nowrap;
}
#txtLong, #ruler {
font-family: sans-serif;
font-size: 11pt;
}
JSFiddle
There is no declarative way (that I know of) to do this, but it is fairly easy to do using jQuery. What you essentially need to do is make a second element (not an input) that contains all the same styling as the input. Then measure the width of the second element, and set width of the input to that new width.
Here's how you'd do that:
HTML:
<input type='text' value='Some Extremely Really Long Word' id='my-input' />
jQuery:
$(document).ready(function() {\
var $input = $('#my-input'),
$clone = $('<div></div>');
$clone.html($input.val());
$clone.css({
whiteSpace: 'nowrap',
font: $input.css('font'),
paddingLeft: $input.css('padding-left'),
paddingRight: $input.css('padding-right')
});
$clone.appendTo($('body'));
$input.css({
width: $clone.width();
});
$clone.remove();
})
What i'm trying to do is make the title of a blog post exactly half the width of the blog description and align itself at 50% of the width of the blog description.
This is what i tried in JS:
var post_title_width = document.getElementById("post_desciption").offsetWidth;
var post_title_width = post_description * 0.5;
document.getElementbyId("post_title").style.width = post_title_width;
HTML:
<div class="post">
<span class="post_title">This is a test title, testing some javascript...........</span><br>
<span class="post_description">Hello this is a test description right here, just to test some code im trying to do</span>
</div>
I am not using css because i want to test javascript and learn how to use it efficiently.
If you really want to do it in javascript, you've got a few problems:
You're trying to target class names with getElementbyId
Your variable names are messed up
Spans are not block elements, so setting the width isn't applicable unless you set overflow and change the display to block or inline-block
http://jsfiddle.net/cmweU/
var post_description = document.getElementsByClassName("post_description")[0],
post_description_width = post_description.offsetWidth,
post_title_width = ( post_description_width * 0.5 ) + "px";
document.getElementsByClassName("post_title")[0].style.width = post_title_width;
Try this (example):
HTML
<div id="head"><div id="half"></div></div>
CSS
#head {
width: 300px;
height: 100px;
background: purple;
}
#half {
height: 100%;
background: green;
}
JS
document.getElementById("half").style.width = document.getElementById("head").offsetWidth / 2 + 'px';
JS for margin inner block at the center of it's countainer try to use this (example):
document.getElementById("half").style.marginLeft = (document.getElementById("head").offsetWidth - document.getElementById("half").offsetWidth) / 2 + 'px';
as you can see in the following image, i have a simple form that validates the fields in real time and generates a span that says whether that field is valid or not. problem is, for some reason that span would not extend out of the containing div even though its has position:absolute in its css rule. by the way, the span gets its right position using javascript, that calculates the width of that field (since every field differs in width). any suggestions?
here is the css code:
div.row {
background:url('/img/formBackground.gif') repeat;
margin:0 2px 2px 2px;border-radius:10px 0 10px 0;
position:relative
}
.row span.valid,
.row span.invalid {
line-height:18px;
height:20px;padding:0 22px 0 5px;
display:block;font-size:13px;
border-radius:3px;position:absolute;
z-index:100;top:4px;right:160px
}
here is the html code:
<div class="row">
<label for="email">דואר אלקטרוני: <span class="required">*</span></label>
<div class="divider"></div>
<input type="text" name="email" id="email" style="width:250px" dir="ltr"/>
</div>
here is the javascript code:
email.onchange = function validateEmail() {
span = document.getElementById('span4');
span.style.right = calcDistance(email);
var reg = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
el = email.value;
if(el == null || el == '') {span.setAttribute('class','invalid');span.innerHTML = "<span></span>עליך להזין דוא\"ל";return false;}
if(reg.test(el) == false) {span.setAttribute('class','invalid');span.innerHTML = "<span></span>כתובת הדוא\"ל אינה תקינה";return false;}
else {span.setAttribute('class','valid');span.innerHTML = "<span></span>תקין";return true;}
}
function calcDistance(el) {
var spanDistance = 160 + 20;
var targetWidth = el.offsetWidth;
return targetWidth + spanDistance + 'px';
}
This is how I want it to look (the span extends out of the containing div). I was able to get this result only by giving a certain width to the span, which is not a good solution because every message differs in it's width:
Elements with position:relative will "trap" any absolutely positioned child elements. In other words, the absolute element's coordinates are relative to the parent.
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
http://www.quirksmode.org/css/position.html (see "The containing block" section)
While calculating the input widths to create your error message width is clever, this might just be too fragile of a design. You may end up with error messages that are simply too small for the message itself, especially when you consider that you don't truly have 100% control over the user's font size.
There's not enough code here to reproduce the output in your image, but possible solutions or workarounds may include:
Remove position:relative from div.row
Change your design, and move the error message underneath the input instead
After looking into some old posts, I managed to solve the problem by adding white-space:no-wrap; to the span CSS rule.