I have 4 divs and one main div.Each div are coming on the new line.I want to join two divs together for using maximum space.
My code is
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
$("#tabs").tabs();
$('#maindiv > div ').each(function(){
$(this).attr('style','padding-bottom: 10px;');
});
$('#maindiv > div > b').each(function(){
$(this).attr('style','width: 80px; display: inline-block;');
});
});
});//]]>
</script>
<div id="maindiv">
<div>
<b>Name:</b>
<input type="text" name="name" value=""/>
</div>
<div>
<b>Age:</b>
<input type="text" name="age" value=""/>
</div>
<div>
<b>Email:</b>
<input type="text" name="email" value=""/>
</div>
<div>
<b>Phone:</b>
<input type="text" name="phone" value=""/>
</div>
<div>
<b>City:</b>
<input type="text" name="city" value=""/>
</div>
<div>
<input type="submit" name="submit" value="submit"/>
</div>
</div>
You can see my code from http://jsfiddle.net/CG6Vw/1/
How can I combine this?
Add display:inline-block
Div is by default block element so it occupies the entire space of the row, make it inline-block or inline to restrict it to the width according to the content available in it.
#maindiv > div {
padding-bottom: 10px;
display:inline-block
}
DEMO
Related
I have an issue with my code, there is a Datalist in my html with 2 options, when the "Azienda" option is selected I want to show the div called "aziende", but when i select "Privato" I don't wanna show that div, but the problem is it show me the div when I select "Privato" too. Somebody can help me?
<form class="contact-form" action="#" method="POST">
<div>
<input class="lista_c" type="text" list="data_list" name="lista" placeholder="Scegli un opzione">
<datalist id="data_list">
<option value="Azienda">Azienda</option>
<option value="Privato">Privato</option>
</datalist>
</div> <br>
<input class="input1" type="text" name="nome" placeholder="Nome" />
<input class="input1" type="text" name="cognome" placeholder="Cognome" /> <br>
<input class="input2" type="text" name="email" placeholder="Email" /> <br>
<div id="aziende" style="display: none">
<input class="nome-azienda" type="text" name="nome-azienda" placeholder="Nome Azienda" />
<input class="iva" type="text" name="IVA" placeholder="P.IVA" />
</div>
</form>
<script>
let getvalue = document.getElementsByName('lista') [0];
getvalue.addEventListener('input', function() {
if(getvalue !== [0]){
document.getElementById('aziende').style="display: block";
}else{
document.getElementById('aziende').style="display: none";
}
})
</script>
As mentioned in the comments, your if test is incorrect. See comments below for details on the working solution.
.hidden {
display: none;
}
<form class="contact-form" action="#" method="POST">
<div>
<input class="lista_c" type="text" list="data_list" name="lista" placeholder="Scegli un opzione">
<datalist id="data_list">
<option value="Azienda">Azienda</option>
<option value="Privato">Privato</option>
</datalist>
</div> <br>
<input class="input1" type="text" name="nome" placeholder="Nome" />
<input class="input1" type="text" name="cognome" placeholder="Cognome" /> <br>
<input class="input2" type="text" name="email" placeholder="Email" /> <br>
<!-- Use CSS classes instead of inline styles when possible. -->
<div id="aziende" class="hidden">
<input class="nome-azienda" type="text" name="nome-azienda" placeholder="Nome Azienda" />
<input class="iva" type="text" name="IVA" placeholder="P.IVA" />
</div>
</form>
<script>
const div = document.querySelector("#aziende");
document.querySelector("[name='lista']").addEventListener('input', function() {
// Just check the value of the input
if(this.value === "Azienda"){
div.classList.remove("hidden"); // Show the div
} else {
div.classList.add("hidden"); // Hide the div
}
});
</script>
Your comparison (the if statement) is invalid. You're comparing the dom element 'getvalue' to an array with a single element of zero.
I believe you should compare the value of the the input element, not the element itself. you're also comparing it to an array? you should compare it to the value you're looking for:
if (getvalue.value !== 'Azienda') {
to help debug things like this, it's useful to use console.log or alert statements to display the value of the variable just before the test:
console.log('value of getvalue input element', getvalue.value);
if (getvalue.value
I would like to do this: on click of a button, put placeholder in all input fields marked with a red asterisk, the following code finds all asterisks:
var asterisks = $("label > span:contains('*').red");
$("#submit").click(function () {
console.log(asterisks);
});
.red {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="Forename">
Forename
<span class="red">*</span>
</label>
<input type="text" id="Forename">
</div>
<div>
<label for="Middlename">
Middle Names
<span class="red">*</span>
</label>
<input type="text" id="Middlename">
</div>
<input type="button" value="Submit" id="submit">
However, I tried to find the inputs below these asterisks and put the same placeholder in them, the following code does not work:
var inputs = $("label > span:contains('*').red").next().find("input");
$("#submit").click(function () {
console.log(inputs);
inputs.attr("placeholder", "This is a placeholder");
});
.red {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="Forename">
Forename
<span class="red">*</span>
</label>
<input type="text" id="Forename">
</div>
<div>
<label for="Middlename">
Middle Names
</label>
<input type="text" id="Middlename">
</div>
<div>
<label for="Lastname">
Last Name
<span class="red">*</span>
</label>
<input type="text" id="Lastname">
</div>
<input type="button" value="submit" id="submit">
What am I doing wrong here?
var asterisks = $("label > span:contains('*').red");
$("#submit").click(function() {
asterisks.each(function() {
$(this).parent().next().attr("placeholder", "whut?");
});
});
.red {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label for="Forename">
Forename
<span class="red">*</span>
</label>
<input type="text" id="Forename">
</div>
<div>
<label for="Middlename">
Middle Names
<span class="red">*</span>
</label>
<input type="text" id="Middlename">
</div>
<input type="button" value="Submit" id="submit">
You were very close to the solution. You found asterisks inside the labels so you need parent elements next sibling by chaining parent().next()
$("label > span:contains('*').red").next().find("input");
The .find() method looks at a matched element's child element. So you are getting the .next() element, and then looking for a child within it.
The input element is a sibling of the "red" element's parent. So you will need to do this:
$("label > span:contains('*').red").parent().next();
So basically, i'm trying to make a button "Call me back" so when you click it, it disappears and shows other two hiddens fields.
http://investinlisbon.ml/
What im trying to change is that little form on top of that page where it has 2 fields and a call me back button.
try jquery show / hide functions like
$("#div_to_show").show();
$("#div_to_hide").hide();
This is how you should approach your problem:
HTML
<div id="div1"> </div>
<div id="div2" style="display:none"> </div>
<div id="div3" style="display:none"> </div>
JS
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "inline-block";
document.getElementById("div3").style.display = "inline-block";
Another one, one liner:
HTML
<div id="fields" style="display:none">
<input type="text" name="name" placeholder="Name"/>
<input type="text" name="tel" placeholder="Telephonoe"/>
</div>
<button type="button" id="contact-btn" onClick="toggleFields()">
Contact me
</button>
JS
function toggleFields(){
$('#fields, #contact-btn').toggle();
}
Example JSFiddle
in your View
<div style="display: none;" class="hideDiv">
<input type="hidden" name="_wpcf7" value="1101">
<input type="hidden" name="_wpcf7_version" value="4.4">
<input type="hidden" name="_wpcf7_locale" value="pt_PT">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1101-o1">
<input type="hidden" name="_wpnonce" value="7b5f59556f">
</div>
and jquery
$(document).on('click','.send-cmb',function(e){
e.preventDefault();
$('.hideDiv').css('display:block');
});
Try this
html code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<input type="text" name="text-574" value="" size="40" class="txt" placeholder="Name">
<input type="text" name="text-574" value="" size="40" class="txt" placeholder="Telephone">
<button type="button" id="callback" >
Call Back
</button>
js code
jQuery( document ).ready(function() {
jQuery(".txt").hide();
jQuery("#callback").click(function(){
jQuery(".txt").show();
jQuery("#callback").hide();
});
});
You can view demo here
I don't know how should I make a question to ask all of you , but I will try to explain. My question is that I would like to show element with which I have hidden in CSS , in my code there are same class container and result class
My expectation when I focus on the text 1 it should be shown only result of text 1 and text 2 will not make an action.
$('.examples').focus(function() {
$('div.example').show();
$(document).bind('focusin.example click.example',function(e) {
if ($(e.target).closest('.example, .examples').length) return;
$(document).unbind('.example');
$('div.example').fadeOut('medium');
});
});
$('div.example').hide();
.example{
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<p>
<label for="example">Text 1:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>reuslt</p>
</div>
</p>
<br />
<label for="example">Text2:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>result</p>
</div>
You html has a div in a p element which is not value, so use div instead of p as the container, then you need to show the next div.example of the focused input so
$('.examples').focus(function() {
$(this).next('div.example').show();
$(document).bind('focusin.example click.example',function(e) {
if ($(e.target).closest('.example, .examples').length) return;
$(document).unbind('.example');
$('div.example').fadeOut('medium');
});
});
$('div.example').hide();
.example{
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div>
<label for="example">Text 1:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>reuslt</p>
</div>
</div>
<br />
<label for="example">Text2:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>result</p>
</div>
So I have this Pop up form which works fine but it doesn't let me control where it pops up even when I try to apply CSS it doesn't work.Also the form should be in the <aside> form but it is not showing there.
I have the follow code for the html
<aside>
<form method="post" class="basic-frm" id="newFolder">
<label>
<h1>New Folder</h1>
</label>
<label>
<span>Title:</span>
<input id="title" type="text" name="title"/>
</label>
<label>
<span>Description</span>
<input id="description" type="text" name="description"/>
</label>
<input id="submit" type="submit" name="submit" value="Submit" class="button"/>
<input id="cancel" type="button" name="cancle" value="Cancel" class="button"/>
</form>
<h1>Welcome</h1>
<img src="images/newFolder.svg" onmouseover="this.src='images/newFolderHover.svg'" onmouseout="this.src='images/newFolder.svg'" id="clicky">
<p>New folder</p>
</aside>
Jquery code is the following :
$(document).ready(function(){
$('#newFolder').dialog({
autoOpen: false,
width: 600
});
$('#clicky').button().click(function() {
$('#newFolder').dialog("open")
});
$('#cancel').button().click(function() {
$('#newFolder').dialog("close")
});
});
CSS like colors and stuff work but not the width for example but not the margin what so ever, I also want it to stay in the <aside> which it is not.
You should also specify the position:
$( ".selector" ).dialog({
position: { my: "left top", at: "left bottom", of: "aside" }
});
This will let you position the dialog relative to another element ('aside' selector).
Check the jQuery UI Dialog API.
I assumed that in your css you have some code that defines the style of your "aside" tag..
in your css add some coordinates for your tag as valign: top bottom... align: left,center,... an so on
and in your code of html
<aside>
<h1>Welcome</h1>
<img src="images/newFolder.svg" onmouseover="this.src='images/newFolderHover.svg'" onmouseout="this.src='images/newFolder.svg'" id="clicky">
<p>New folder</p>
<form method="post" class="basic-frm" id="newFolder">
<label>
<h1>New Folder</h1>
</label>
<label>
<span>Title:</span>
<input id="title" type="text" name="title"/>
</label>
<label>
<span>Description</span>
<input id="description" type="text" name="description"/>
</label>
<input id="submit" type="submit" name="submit" value="Submit" class="button"/>
<input id="cancel" type="button" name="cancle" value="Cancel" class="button"/>
</form>
</aside>
the welcome part fomr me should be on top, isn't it??