In Qualtrics, I am trying to create something like this:
https://dl.dropboxusercontent.com/u/8114735/Screen%20Shot%202015-05-12%20at%2017.49.17.png
The only way to have text boxes both next to and on top of each other is by using a matrix table with text entry. However, this only gives you the text boxes, without a space above the text entry box to insert an image. So I'm now trying to append these images using javascript. The ID of the text boxes is in the format of QR~QID17~3~2~TEXT (for the box on row 3, column 2).
Here is a sample I made of the text boxes in a 3x3 matrix.
https://eu.qualtrics.com/WRQualtricsSurveyEngine/?SID=SV_b30tGcjTmJWTlYN&SVID=&Preview=Block&ID=BL_enEP0YjUHaK5yPX&Q_DONT_SAVE=1
Does anyone know how you can append an image on top of these boxes? Thanks.
I will start with a working example:
Working Example
This uses numbers, in place of images, but is still a valid example.
First, you will select the "Position text above" option, and in the rows of text you will place the following code:
<td class="c4">1</td><td class="c5">2</td><td class="c6 last">3</td>
replacing 1,2,and 3 with the images for that row(you will have to use an image tag to get this to work in a friendly way).
Once you have setup all three of your rows, add the following to the question javascript:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your Javascript Below This Line*/
$$('.c1').each(
function (e) {
e.remove();
}
);
});
This hides a placeholder inserted by qualtrics and allows your rows to line up nicely!
Enjoy! Note though that this will likely require the images to be sized properly(I havent tested images)
How about using DIV container?
HTML
<div class="container">
<div class="box">
<div class="box-image">
<img src="http://lorempixel.com/output/city-h-c-150-230-4.jpg" />
</div>
<div class="box-input">
<input type="text" />
</div>
</div>
</div>
CSS
.box {
float: left;
width: 200px;
margin: 5px;
}
.container {
max-width:420px;
background:#CCCCCC;
overflow: hidden;
}
.box-image, .box-input {
text-align: center;
width: 100%;
}
.box-image {
background: #FFFFFF;
}
.box-input input{
margin-top: 2px;
width: 200px;
border: 1px solid #AAAAAA;
}
FIDDLE
Related
so I am working on a pretty big site for a customer. And all the information is entered in via labels and follow this format:
<div class="col-xs-12 col-md-6" id="permissionsDIV">
<label id="labelName"></label><label id="labelData"></label>
</div>
The labelName allows the customer to customize what the label actually says (Amount vs Amount($) etc.) And the data is filled with data via AJAX.
I was wondering if there is a way to apply a border-bottom to the second label (labelData), even if there is no data. For example, if I apply a border to the labelData as is, the label is only the width of the text inside, but I would like the underline to fill the space between the the labelName and the end of the DIV. Like so:
<div>LabelName: _______________labelData________________</div>
Because this is responsive I would like to refrain from hard-coding the width of the label.
2 options:
You can apply a minimum width using css
You can apply constant left and right padding to the label which would then have the underline under it
One such example:
.permissionsDIV label:nth-child(2) {
min-width: 50px;
border-bottom: 1px solid grey;
display: inline-block;
padding: 0 15px;
margin-left: 10px;
}
<div class="col-xs-12 col-md-6 permissionsDIV" id="permissionsDIV">
<label id="labelName">My Name</label><label id="labelData">Larry The Cool Guy</label>
</div>
<div class="col-xs-12 col-md-6 permissionsDIV" id="permissionsDIV2">
<label id="labelName">My Name</label><label id="labelData"></label>
</div>
You can use the nth-of-type selector of css.
#permissionsDIV label:nth-of-type(2){
border-bottom:1px solid black;
}
You would need to define a min-width for the labels in order to get the label element to have visibile border.
I have a JavaScript function that displays text based on input in a text field. When a value is entered into the text field, my program will check to see if the value is correct. If it is correct, my program displays, "You are correct!" and if it is incorrect, my program displays, "Try again!"
The text field and button are both centered horizontally on the page, but I cannot figure out how to center the "You are correct!" and "Try again!"
I feel like I have tried everything, but obviously I haven't, considering I can't get it to work.
Here is the code for my JavaScript function:
<center><p>Can you remember how many books I listed at the bottom of the page?</p></center>
<center><input id="numb"></center>
<center><button type="button" onclick="myFunction()">Submit</button></center>
<p id="demo"></p>
<div class="jsFunction">
<script>
function myFunction()
{
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than five or greater than five
if (isNaN(x) || x < 5 || x > 5)
{
text = "Try again!";
}
else
{
text = "You are correct!";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</div>
Here is the CSS code for the function:
.jsFunction
{
margin-left: auto;
margin-right: auto;
}
This specific CSS code is only one of many, many attempts I have made at centering the text in the function.
Here is a link to a picture that will show you the problem I am having:
http://i.stack.imgur.com/Hb01j.png
Please help!
Try setting a class on the p tag that contains text-align: center;
Edit
Nesting your script in a div is meaningless as script tags don't get rendered
You can either target #demo in your css (for the text alignment) or add a class align-center that contains the correct style.
I would recommend the latter as the becomes more reusable, whereas you can't reuse an id on the same page
The fact that you are using JavaScript isn't important to this question. I mention it because of the title "How to Center Text in a JavaScript Function" and your attempt to center the actual script element containing your JavaScript code.
You want to center the contents of an element that happens to be controlled by JavaScript, but the answer is CSS-only.
As Ryuu's answer mentions, text-align: center will do the job for (you guessed it) text and other inline-level content.
You should not use the deprecated center tag.
Your attempt to use margins will center something if you apply it to the correct element and the element has a width. That "something" is the element, however, not the contents of the element.
In other words, margin can be used to align the box, not the stuff within the box.
Example 1: centers the element, but the text is still left-aligned.
Example 2: centers the element and its inline-level contents.
.margin-example1 {
width: 200px;
background-color: #ddd;
/* shorthand for margin: 0 auto 0 auto, which is shorthand for specifying each side individually */
margin: 0 auto;
}
.margin-example2 {
width: 200px;
background-color: #aaccee;
margin: 0 auto;
/* we still need this to get the desired behavior */
text-align: center;
}
<div class="margin-example1">Example 1</div>
<div class="margin-example2">Example 2</div>
So how about a text input? Browsers usually style inputs as display:inline-block. This means we can center something inside them (Examples 1 & 2), but to center them within their container we need to change to display:block (Example 3) or because they are inline-like elements themselves, we can set text-align on the parent container (Example 4), see also.
.example1 {
width: 100%;
text-align: center;
}
.example2 {
width: 200px;
text-align: center;
}
.example3 {
display: block;
width: 200px;
text-align: center;
margin: 0 auto;
}
.example4 {
width: 200px;
text-align: center;
}
.example4-parent {
text-align: center;
}
<div>
<input type="text" value="Example 1" class="example1">
</div>
<div>
<input type="text" value="Example 2" class="example2">
</div>
<div>
<input type="text" value="Example 3" class="example3">
</div>
<div class="example4-parent">
<input type="text" value="Example 4" class="example4">
</div>
Layout in CSS can be complicated, but the basics aren't hard.
Note that I have over-simplified my explanation/definitions a bit (you can read all about the formatting model when you are ready).
I'm building a drawing app, and I want a cursor in form of circle. I searched HTML5 style to make cursor default, pointer etc, but I need it to be a circle. How can I do this?
What you want can be done by CSS.
Check out the following snippet and this jsfiddle
#circle64 {
cursor: url('http://www.iconsdownload.net/icons/64/16574-black-circle.png'), pointer;
}
#circle32 {
cursor: url('http://www.iconsdownload.net/icons/32/16574-black-circle.png'), pointer;
}
#circle24 {
cursor: url('http://www.iconsdownload.net/icons/24/16574-black-circle.png'), pointer;
}
<div id='circle64'>
Cursor will
<br>be</br>different here.
</div>
<br>
<br>
<br>
<div id='circle32'>
Cursor will
<br>be</br>different here.
</div>
<br>
<br>
<br>
<div id='circle24'>
Cursor will
<br>be</br>different here.
</div>
you can use an image as cursor, by using this css property
cursor: url(images/my-cursor.png), auto;
for example if you have some input and you want to show round cursor on it , you should use png image
input{
cursor: url(images/my-cursor.png), auto;
}
check this jsfiddle
http://jsfiddle.net/pwy51Ly8/
From this link
"It wasn't working because your image was too big - there are restrictions on the image dimensions. In Firefox, for example, the size limit is 128x128px"
You can use CSS cursor wait
div {
cursor: wait;
}
or
div {
cursor: url("your custom cursor image"), auto;
}
Thanks so much for your help. I am new to JavaScript and trying to learn, but it's a lot to take in. In the meantime, my team created a site where we have 5 different images that represent a capability. Under all those images, we want to have text appear. When you mouse over the image, the corresponding description of the capability should appear centered under all the images. If you move to a different image, the text should change, but it should be in the same location.
It would kind of be like jQuery tabs but with images.
If anyone could help with the code or point me in the right direction, I would really appreciate it!!
With jQuery you can use the hover method to add a animation css to your image text on hover. To update the text in your textbox just place the image text below the hovered image then you can find the text with jQuery and copy that text to the textbox with .text(newText).
To find the text you first have to go to the parent of the image with .parent() (the li tag here) and then you can use .find(class) to go down to the image text.
For documentation to .hover(handlerIn, handlerOut) see the docs here.
A demo for what you're looking for see the demo below and here at jsFiddle.
To the css:
The overflow: hidden; on the li tag is only to hide the text below the images. The li and the image have the same height so the text is invisble.
var $textbox = $('#textbox'),
handlerIn = function () {
var $imgText = $(this).parent().find('.imgText'); // find the text
$textbox.text($imgText.text()); // add the text to the p-tag
$textbox.removeClass('animated fadeOut');
$textbox.addClass('animated fadeIn');
},
handlerOut = function () {
//var $imgText = $(this).parent().find('.imgText');
$textbox.removeClass('andimated fadeIn');
$textbox.addClass('animated fadeOut');
};
$('img').hover(handlerIn, handlerOut);
body {
font-family: Arial, Helvetica, sans-serif;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
border: 1px solid black;
height: 200px;
overflow: hidden;
}
.imgText {
text-align: center;
opacity: 0.0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<img src="http://lorempixel.com/200/200/sports/1" />
<p class="imgText">first image text...</p>
</li>
<li>
<img src="http://lorempixel.com/200/200/sports/2" />
<p class="imgText">second image text...</p>
</li>
<li>
<img src="http://lorempixel.com/200/200/sports/3" />
<p class="imgText">third image text...</p>
</li>
</ul>
<p id="textbox"></p>
I am trying to align the two drop down boxes in the following image:
Javascript (for 1st drop down box)
//create drop-down box
var s = $('<select/>',{id:"category"});
$.each(data, function(key, value) {
$('<option/>', {value: value.category, text: value.category}).appendTo(s);
});
// add the category drop-down box.
s.appendTo('#categories');
CSS:
#category
{
text-align:center;
margin:0px auto;
display:block;
}
#categories
{
font-family: 'underdogregular';
padding: 0px;
margin: 0px auto;
text-align:center;
width: 280px;
}
HTML:
<body >
<div id='categories'>
<h3 id ='couponCategoriesTitle'>Coupon Categories</h3>
</div>
<div id = 'categorySubmitButtonDiv' >
<!--Add Category Search Button-->
<button class = "buttons" onclick="categorySubmit()">Search!</button>
</div>
</body>
I've only copied over the parts that I thought were relevant.
Would anyone know how I can get the two text boxes aligned in the middle?
Thank you for your help!
just add the little code to your body
code:
body{
text-align:center;
}
Fiddle
Try this example
<div id="subCategory">
<div>categories</div>
<div>
<select >
<option>lorem 1</option>
<option>lorem 2</option>
</select>
</div>
<input type="button"/>
</div>
CSS
#subCategory{
text-align:center;
margin:0 auto;
display:inline-block;
}
Fiddle
http://jsfiddle.net/bjyQk/1/
If you want to center your text inside your dropdowns, I think of two possibilities:
using text-indent and tweaking values, but this will work just for
the selected option (the one visible), and it's not so reliable;
making a custom dropdown, using an ul list and li items (for istance,
or any other tags you like) and writing your custom logic for
showing/hiding list of items; this way text-align: center will work
fine for all items;
using a plugin that could be tweaked with text-align: center;
Wrap your entire input field area on a div with text-align:center;
Fiddle (Containing div has border just so you can better see what's happening)