Change button's font size - javascript

I'm trying to change font size on button but have had no success
<fieldset class="ui-grid-b">
<div class="ui-block-a">
<input type="button" value="Open" onclick="ZZ();">
</div>
<div class="ui-block-b">
<input type="button" value="close">
</div>
<div class="ui-block-c">
<input type="button" value="BUG">
</div>
</fieldset>
I've tried this, but it won't change the font size:
<div class="ui-block-c">
<input style="font-size:10px;" type="button" value="BUG">
</div>

As much I have understood, you want to change font size of button.
Check this fiddle
I have just added a "class" attribute which has been set in css.
like
<input type="button" value="Test Button" class="btnClass"/>
and css code:
.btnClass {
font-size: 12px;
}
You may set size as per your need.
If you want to change is dynamically, you can use .addClass method. jquery document for the same
If haven't got you correctly please come again.

Related

<textarea> tag doesn't record response in HTML form

I have created an HTML form that works perfectly and sends information recorded in the form via AJAX to a sharepoint list, and populates the correct columns accordingly. After changing the input type from <input> to <textarea>, the input is no longer recorded and sent via AJAX to the sharepoint list.
The only thing that I have changed in my HTML code is.
<div class="elements">
<label for="Notes"> Notes :</label>
<input type="text" align= "left" id="dNotes" name="Notes" placeholder="Please provide notes">
</div>
<div class="submit">
<input type="submit" id="btn" name="btn" class="btn" value="Submit" />
</div>
</fieldset>
</SharePoint:FormDigest>
</form>
to this: (is there anyway to record a text area as an input?)
<div class="elements">
<label for="dNotes"> Notes :</label>
<textarea name ="dNotes" rows="5" cols="20"></textarea><br/>
</div>
<div class="submit">
<input type="submit" id="btn" name="btn" class="btn" value="Submit" />
</div>
</fieldset>
</SharePoint:FormDigest>
</form>
It seems for input you use id="dNotes" name="Notes", and for textarea you use no id and name="dNotes". I recommend to control these values, most probably it Will work after changing these values.

Voice over is not reading what I am typing in textbox

Below is my code:
<form>
<div class="form-group loginFormGrp">
<label class="caption">Backup Cloud</label>
<div class="custSelect loginSelect">
<label class="caption">Server URL</label>
<input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
</div>
<div class="form-group loginFormGrp">
<label class="caption">Email</label>
<input type="text" aria-label="Email" name="email" class="form-control" placeholder="user#example.com" value="">
</div>
<div class="loginBtnRow">
<button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
</div>
</div>
</form>
whenever voiceover highlights the input text field it reads "You are currently on text field, inside web content. To enter text in this filed, type. To exit web area,.."
and when I Start typing it says nothing.
and checked other appilcation or websites it reads what i am typing.
but in my case its not reading.
Please help if anyone knows the solution.
Add title attribute to the input element and provide additional text.
Adding aria-label to the input elements should also be picked by the screen readers.
http://pauljadam.com/demos/title-aria-label.html provides details on how different browsers and screen readers treat these attributes.
Your code seems pretty fine. I tried with a chrome plugin called ChromeVox everything seems to be fine except that add the lang attribute to the parent html tag and enclose everything in a body tag some thing like this.
<html lang="en-US" style="height: 100%;">
<body>
<form>
<div class="form-group loginFormGrp">
<label class="caption">Backup Cloud</label>
<div class="custSelect loginSelect">
<label class="caption">Server URL</label>
<input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
</div>
<div class="form-group loginFormGrp">
<label class="caption">Email</label>
<input type="text" aria-label="Email" name="email" class="form-control" placeholder="user#example.com" value="">
</div>
<div class="loginBtnRow">
<button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
</div>
</div>
</form>
</body>
</html>
I'm not sure if this'll help, but You may try to update fields value attribute, every time user modify text field. Something like that:
document.querySelectorAll('input[type="text"]').forEach(function(v){
v.addEventListener('input', function(){
v.setAttribute('value', v.value);
});
});
But I wish someone provide better answer, without using extra JavaScript.

input field is not eeditable in mobile view

I have made a simple form , you can check it on http://bspldev.review/phpmailer/ , using bootsrap its working fine on desktop but on mobile input field for name and email is not editable, that we can not write anything , only mobile field is working in mobile view, here is simple form code, i have give proper links for bootstrap and jquery library in header, here i will give excerpt of form only,
<form method="POST" name='' id="woohooEmail" action="">
<div class="form-group">
<label class="sr-only" for="fullname">Name</label>
<input type="text" class="form-control" placeholder="name" name="LastName">
</div>
<div class="form-group">
<label class="sr-only" for="mobile">Mobile</label>
<div class="input-group">
<div class="input-group-addon">
+91
</div>
<input type="text" class="form-control" placeholder="mobile" name="Mobile">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="area">Email</label>
<input type="email" class="form-control" placeholder="email" name="Email">
</div>
<div class="pad">
<button type="submit" name="submit" id="submit" value="" class="btn btn-default btn-text ">
Schedule
</button>
<i class="fa fa-circle-o-notch fa-spin" id="icon-load" style="font-size:24px; color:red; display:none"></i>
</div>
<form>
Please check this on mobile and kindly suggest me some solutions
In your mobile image is coming above the form, So increase your z-index of form's parent div or decrease z-index of your image in mobile screen using media query. You haven't add the div in above code so i just add z-index on form.Like :-
#media screen and (max-width: 768px) {
#woohooEmail{
z-index:9999;
}
or here you just can simply add z-index without media query too. it will work for every device
Build the form using boostrap's grid system. you can use one row spanning all the 12 columns and use the col-sm attribute

Get ID from text field and add it to path

I use Roxy Fileman to manage images and files in my CMS. The filemanager has a custom option to insert files from a text field with a button. When the button is clicked the filemanager open. This option is based on the text field ID. My problem is that I have multiple text fields so I have made the ID:s unique. But how can I add these ID to txtFieldId in the path?
This is the first text field with ID 1
<input type="text" name="img" id="txtSelectedFile1" class="textfield" >
<button class="btn btn-default" onclick="openCustomRoxy2()" type="button">Select image</button>
The second one with ID 2
<input type="text" name="document" id="txtSelectedFile2" class="textfield" >
<button class="btn btn-default" onclick="openCustomRoxy2()" type="button">Select image</button>
Here's the div with the iframe that opens the filemanager when the button is clicked. This is where I need to add the ID:s to the txtFieldId.
<div id="roxyCustomPanel2" style="display: none;">
<iframe src="/fileman/index.html?integration=custom&type=files&txtFieldId=txtSelectedFile" style="width:100%;height:100%" frameborder="0">
</iframe>
So i finally manage to solved it with help from thedarkone. The different from the answer in the link is that I left the ID in the text field unchanged and added the src function to the button.
<script>
function go(pth) {
document.getElementById('roxy').src = pth;
}
</script>
<div id="roxyCustomPanel2" style="display: none;">
<iframe id="roxy" src="about:blank" style="width:100%;height:100%" frameborder="0"></iframe>
</div>
<input type="text" name="img" id="txtSelectedFile1" class="textfield">
<button class="btn btn-default" onclick="openCustomRoxy2(); go('/fileman/index.html?integration=custom&type=files&txtFieldId=txtSelectedFile1');" type="button">Select image</button>
<input type="text" name="document" id="txtSelectedFile2" class="textfield">
<button class="btn btn-default" onclick="openCustomRoxy2(); go('/fileman/index.html?integration=custom&type=files&txtFieldId=txtSelectedFile2');" type="button">Select image</button>
What I could get from your use case, would probably be best solved by this answer. It has both a JS solution and an pure html solution. I would prefer JS as you wouldn't have to write the whole src in each, and you are already doing that, seeing that your are using functions.
Changing iframe src with Javascript

Show/ Hide by Div Id

I have several fields in a form and if a user clicks on one field I want to display a table otherwise if they click another field the table should be hidden.
I tried this javascript but when other fields are clicked it doesn't hide the table:
<script>
function myFunction() {
if (document.getElementById("userform")) {
document.getElementById("userinfo").style.display="block";
} else {
document.getElementById("userinfo").style.display="none";
}
}
</script>
On each field I have included a onclick="myFunction()" within each input type. The table is set to style="display:none"
This is the HTML:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="hest" class="col-sm-1 control-label"><b>Pi</b></label>
<div class="col-sm-10">
<input type="tel" class="form-control" id="userform"
placeholder="Enter your unique Pi identity" onclick="myFunction()">
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-sm-1 control-label">
<b>Password</b>
</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword1"
placeholder="Password" onclick="()">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-sample btn-lg">
<b>Submit</b>
</button>
</div>
</div>
</form>
<div id="userinfo" class="collapse in" style="display:none">
<table class="table table-bordered" id="phone-table">
<tbody>
<tr>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<br> <b>1</b>
</button>
</td>
<td class="col-md-1">
<button type="button"
class="btn btn-primary btn-xs1">
<b>ABC<br>2
</b>
</button>
</td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>DEF<br>3
</b>
</button>
</td>
</tr>
<tr>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>GHI<br>4
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>JKL<br>5
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>MNO<br>6
</b>
</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>PQRS<br>7
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>TUV<br>8
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b>WXYZ<br>9
</b>
</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b><i class="fa fa-arrow-circle-left"></i><br>Del</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b> <br>0
</b>
</button></td>
<td class="col-md-1"><button type="button"
class="btn btn-primary btn-xs1">
<b><i class="fa fa-eraser"></i><br>Clr</b>
</button></td>
</tr>
</tbody>
</table>
</div>
since Jquery was among tags, i throw my cents in jquery
.hide(); / .show(); implicitly sets dislay to block or none in css.
$(function(){
$('#close').on('click',function(){
$('#danceforme').hide();
});
$('#open').on('click',function(){
$('#danceforme').show();
});
});
html
<button id="close">Stop Dancing</button>
<button id="open">Dance for me</button>
<div id="danceforme">
I am dancing
</div>
demo: http://jsfiddle.net/doniyor/5FT9x/
You have tagged jQuery also so in that case it will be
$("#id").show();
$("#id").hide();
Doniyor's Answer is great for jQuery. I want to help explain how to make your existing code work, since that will help you understand why it wasn't working, instead of just handing you a solution.
Simple Solution
The problem with myFunction() is the if statement -
if (document.getElementById("userform"))
That checks to see if an element with ID "userform" exists in the DOM. If it does, the statement returns true. Since there's an input with ID "userform" in the HTML you provided, this will always be true.
Instead, you want to check if the element that triggered your function had the ID "userform",
so the relevant HTML would look like this:
<div class="form-group">
<label for="hest" class="col-sm-1 control-label"><b>Pi</b></label>
<div class="col-sm-10">
<input type="tel" class="form-control" id="userform"
placeholder="Enter your unique Pi identity" onclick="myFunction(this)" />
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-sm-1 control-label">
<b>Password</b>
</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword1"
placeholder="Password" onclick="myFunction(this)"/>
</div>
</div>
And myFunction() would look like this:
function myFunction(obj) {
if (obj.id == "userform") {
document.getElementById("userinfo").style.display="block";
} else {
document.getElementById("userinfo").style.display="none";
}
}
jsFiddle
An explanation of registering onclick events. Because you're registering the onclick via html, and not in a script, the triggering element does not become the owner of the function, which is what this would refer to. So we have to pass the object via a parameter, and check that object's ID.
Of course, this is all very roundabout, and since you're already using jQuery and bootstrap, you probably don't want to manually show and hide things.
Bootstrap + jQuery fancy solution
The div you're trying to show/hide is a collapse, which bootstrap has functionality for already.
Bootstrap solution jsFiddle
Explanation: First, I removed the style="display:none" and class in on the collapse element. Class in on a collapse tells bootstrap to default the element to showing, while display:none overrides bootstrap's styling. It is enough to use class="collapse", which defaults to collapsed, or hidden.
Next, I removed the onclick assignments, since we'll let bootstrap handle that.
Finally, I replaced the existing script behavior with a script telling bootstrap the behavior we want:
$("#userform").focusin(function(){alert("in"); $("#userinfo").collapse("show");});
$("#inputPassword1").focusin(function(){alert("out"); $("#userinfo").collapse("hide");});
I left the alerts in for debugging, always helpful when you're not sure what's going on!
So what is this doing? Following Bootstrap's example usage, we want the collapse to show when we click the "userform" element.
First, we tell jquery we want to do something when the element with id userform gets focus. That's $("#userform").focusin() via jQuery API docs.
Then we tell jquery what we want to do when that happens - we could specify a named function, like myFunction(), but in this case, it's just one line, so we create an inline function. That's function(){}.
Inside that function we specify the Bootstrap behavior we need. From the Bootstrap docs, we know we can use the function collapse("show") to manually expand the collapse element. To tell Bootstrap which one, we just give jQuery the element id! Together, that's $("#userinfo").collapse("show");
Putting that inside the function that's triggered, which is specified in our focusin() function, we get the final result: `$("#userform").focusin(function(){ $("#userinfo").collapse("show");});
Next, we do the same for the elements we want to trigger hiding the collapse element. So we just modify that line for #inputPassword1, and tell it to hide the collapse using collapse("hide") instead of "show". Logical, right?
I find it very helpful when I'm programming behaviors like this to consult the documentation. There are usually examples of exactly what I want to do, which only require minor tweaking to get working on my sites.
jQuery's documentation is here.
Bootstrap's documentation is here.
And when asking for help on SO, it's great if you can create a jsFiddle to isolate the problem from the complexities of the website you're producing. Then other users who want to help can create modified copies of your code to show. It's super helpful!
Cheers.

Categories

Resources