I'm trying to achieve the effect of the li tag changing background colors when the user focuses on the input (effect can be seen at the bottom of the page here. From seeing similar questions it seems like it can't be done in pure CSS, so I was wondering how to do it in jquery (I have no knowledge). Here is my HTML:
<form class="contact-form" action="" method="post" name="contact-form">
<ul>
<li>
<input type="text" name="name" placeholder="NAME" class="test"/>
</li>
<li>
<input type="email" name="email" placeholder="EMAIL" />
</li>
<li>
<textarea name="message" name="message" placeholder="MESSAGE"></textarea>
</li>
<li>
<button class="submit" type="submit">Send</button>
</li>
</ul>
</form>
Here's how to do it. It will add a background color to the parent LI of the form field that has focus, and after exiting the field the background color will be removed.
Working example on jsFiddle.
CSS:
.selected {
background: lightYellow;
}
jQuery:
$(function () {
var $form = $(".contact-form"),
selectedClass = "selected";
$form.on("focus", "input, textarea", function () {
$(this).closest("li")
.addClass(selectedClass);
});
$form.on("blur", "input, textarea", function () {
$(this).closest("li")
.removeClass(selectedClass);
});
});
Heres a basic jquery version which activates on focus like example
$('.contact-form').on('focus','input,textarea',function() {
$('.contact-form li').animate({'backgroundColor':'#00FF00'});
$(this).parent().animate({'backgroundColor':'#FF0000'});
});
fiddle
You can use the :hover selector in your CSS statement; no need for JS at all..
.contact-form ul li { background-color:#000000; }
.contact-form ul li:hover { background-color: #C0C0C0; }
Related
I have an input box. Where I run commands to filter contents. When a user inputs in the box then the table of contents anchor is not working. So, I want to reset input and trigger the delete keypress one time on click UL anchor tag, when a user clicks on the UL anchor.
$(document).on("click", "ul a", function () {
$("#myInput").val("");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inarea">
<input id="myInput" type="text" value="12345678">
</div>
<ul>
<li>ABC</li>
<li>DEF</li>
<li>XYZ</li>
</ul>
Is this what you are looking for?
So what I did is I simply set the value of the input to "" which means none.
Please tell me if this is helpful so that I can change my answer, Thank You.
const buttons = document.querySelectorAll("a");
for (const button of buttons) {
button.addEventListener('click', function(event) {
document.getElementById('myInput').value = "";
})
}
.button {
color: #fff;
padding: 11px;
margin: 15px;
display: block;
text-transform: uppercase;
background: #0d496f;
font-size: 13px;
border-radius: 0;
float: left;
font-weight: 700;
cursor: pointer;
width: 15%;
text-align: center
}
<div class="inarea">
<form id="form">
<input id="myInput" type="text" value="12345678">
</form>w
</div>
<ul>
<li>ABC</li>
<li>DEF</li>
<li>XYZ</li>
</ul>
</div>
you can use the document.execCommand("delete"); function to emit the delete key press.
$(document).on("click", "ul a", function () {
$("#myInput").val("");
document.execCommand("delete");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inarea">
<input id="myInput" type="text" value="12345678">
</div>
<ul>
<li>ABC</li>
<li>DEF</li>
<li>XYZ</li>
</ul>
but this would make no use. you can use the selectionStart and selectionEnd properties of the input element to select a part or whole of the input text, and then use the document.execCommand("delete"); to delete the text
So i have made a custom selector like
<div class="search">
<input class="custom-selector" type="text" autocomplete="off" >
<ul class="custom-options hidden">
<li>New York</li>
<li>Moscow</li>
<li>Baku</li>
</ul>
</div>
and whenever i focus on the input the class hidden(only has display:none;) gets removed, and on blur(unfocus) it gets added back
$('.custom-selector').focus(function() {
$(".custom-options").removeClass("hidden");
}).blur(function() {
$(".custom-options").addClass("hidden");
})
On the next step i needed a function to onclick get the li value and copy it to the input ,but whenever i click on the li ,the input gets unfocused and the onclick function cant work on a display none,one solution i found was opacity 0 instead of display none for hidden class,is there more optimal and correct way to fix this issue?
Edit: You can add a timeout maybe?
$('.custom-selector').focus(function() {
$(".custom-options").removeClass("hidden");
}).blur(function() {
setTimeout(function () { $(".custom-options").addClass("hidden") }, 350);
})
$('.custom-options > li').click(function(e) {
$('.custom-selector').val($(this).text());
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
<input class="custom-selector" type="text" autocomplete="off">
<ul class="custom-options hidden">
<li>New York</li>
<li>Moscow</li>
<li>Baku</li>
</ul>
</div>
You could use a combination of focusable elements and the :focus-within pseudo-class to not lose focus.
$('.custom-options a').click(function (ev) {
const selected = ev.target.textContent;
$('.custom-selector').val(selected);
ev.target.blur();
});
.custom-options {
display: none;
}
.search:focus-within .custom-options {
display: block;
}
.custom-options a {
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
<input class="custom-selector" type="text" autocomplete="off">
<ul class="custom-options">
<li>
New York
</li>
<li>
Moscow
</li>
<li>
Baku
</li>
</ul>
</div>
Edit to answer: OK, so it seems this problem has come up before. The key seems to be in the return false; statement in the js prepareList function. I commented it out and now the code works fine. For more information and a more complete answer, here is the previous version of the question.
EDIT: Here's a jsfiddle that reproduces the error.
I'm trying to make a form using the expandable list code found here, and my checkboxes and radio buttons are either unresponsive or glitchy. They both know they're being pressed, they change to the depressed image when I click on them, but they don't update their value. For radio buttons, I can click one and it works, but then the others in that group become unresponsive. I have a dummy php page to just print out the results of the form, but it doesn't appear to be receiving any data. NOTE: This is my first website project, there may be something completely obvious that I'm just missing.
Here's a sample of the HTML:
<div id="listContainer">
<div class="listControl">
<a id="expandList">Expand All</a>
<a id="collapseList">Collapse All</a>
</div>
<form id="ColForm" action="Table.php" method="post"> <!--Organized list of collumns and filter options-->
<ul id="expList">
<li>Section heading
<ul>
<li><input type="checkbox" name="ColSelect" value="Name" form="ColForm"> <!--If checked, collumn will be included in final table--> Name
<ul>
<li>
<input type="text" name="Name" form="ColForm"><br> <!--filter parameter input-->
</li>
</ul>
</li>
<li><input type="checkbox" name="ColSelect" value="RA,Dec" form="ColForm">Another collumn
<ul>
<li>
<input type="radio" name="PoSearch" value="Range" form="ColForm">Radio button to select form type for this section<br>
<i>I have an option here
<input type="radio" name="Degs" value="Dec" form="ColForm">Option 1
<input type="radio" name="Degs" value="Hex" form="ColForm">Option 2</i><br>
Text input 1<br>
<input type="text" name="RA" form="ColForm">deg<br>
Text input 2<br>
<input type="text" name="Dec" form="ColForm">deg<br>
<input type="radio" name="PoSearch" value="Area" form="ColForm">Second form option<br>
<i>Text input A</i><br>
<input type="text" name="Area" form="ColForm"><br>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<input type="submit" value="submit" form="ColForm">
</form>
</div>
And here's the javascript for the list function:
/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible */
/**************************************************************/
function prepareList() {
$('#expList').find('li:has(ul)')
.click( function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Create the button functionality
$('#expandList')
.unbind('click')
.click( function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
$('#collapseList')
.unbind('click')
.click( function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
})
};
$(document).ready( function() {
prepareList()
});
And the relevant CSS:
#listContainer{
margin-top:15px;
}
#expList ul, li {
list-style: none;
margin:0;
padding:0;
cursor: pointer;
}
#expList p {
margin:0;
display:block;
}
#expList p:hover {
background-color:#121212;
}
#expList li {
line-height:140%;
text-indent:0px;
background-position: 1px 8px;
padding-left: 20px;
background-repeat: no-repeat;
}
/* Collapsed state for list element */
#expList .collapsed {
background-image: url(../img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
background-image: url(../img/expanded.png);
}
#expList {
clear: both;
}
The issue here is with event.preventDefault() in your code. It's keeping the checkboxes / radio buttons from performing their default behavior. Removing that entry will allow the input tags to function normally. But they will no longer trigger the expand and collapse functionality you're looking for.
You'll need to modify your JS to also listen for the click on the checkboxes. Here are some similar situations that may help you:
making on-click events work with checkboxes
clicking on a div to check / uncheck a checkbox
My code is working fine. I just want to make the hidden div visible. It is hidden by default. It show the div when I click on the link. I need a help to show the div by default. I tried few things but i am not able to find the right way.
#morelist {
padding:0;
margin:0;
list-style:none;
padding-right:50px;
float:left;
font:15px/18px'Playfair Display', serif;
}
.show {
cursor:pointer;
}
.show b {
font-weight:normal;
}
.hidden {
display:none;
float:left;
width:400px;
}
.clear {
clear:both;
}
$(document).ready(function () {
$(".hidden").hide();
$(".show b").html("Show");
$(".show").click(function () {
if (this.className.indexOf('clicked') != -1) {
$(".hidden").hide();
$(this).removeClass('clicked')
$(this).children("b").html("Show");
} else {
$(".hidden").hide();
$(".show").removeClass('clicked');
$(".show").children("b").html("Show");
current = $(this).children("b").attr("class");
$("#" + current).show();
$(this).addClass('clicked')
$(this).children("b").html("Hide");
}
});
});
<ul id="morelist">
<li class="show"><b class="aform">Show</b> a Form</li>
<li class="show"><b class="apicture">Show</b> a picture with text</li>
</ul>
<div id="aform" class="hidden">
<h3>Enter your login password below:</h3>
<form id="two" action="..." method="post">
<fieldset id="personal">
<label for="login">login :</label>
<input name="login" id="login" type="text" tabindex="1" />
</fieldset>
<p class="buttons">
<input id="button1" type="submit" value="Send" />
<input id="button2" type="reset" value="Reset" />
</p>
</form>
</div>
<div id="apicture" class="hidden">
<img src="more_and_more/image.jpg" title="" alt="pretty woman portrait" />
<h3>Pretty woman portrait</h3>
</div>
Demo
If you don't want it to be hidden, don't put "hidden" in the class of the div in question.
If your goal is to only have one of 2 element show at a time, then you can start with the one you want initially hidden to have the hidden class, and then use jQuery's toggleClass("hidden") on the two elements: this will remove hidden from the one that has it (hence, showing it) and add it to the one that doesn't (thus, hiding it).
I think the div that's hidden by default is this one?
<div id="apicture" class="hidden">
You gave it the default class "hidden" there.
".hidden" is declared as "display: none;" in your CSS code.
If you want it to be displayed by default it needs another display value. Standard is "display: inline;" as far as i know.
Hope this solves your problem.
You can achieve this in many ways. One of it is to change the css attribute of the element as follows
.hidden {
display:BLOCK;
float:left;
width:400px;
}
You can either remove it like this
.hidden {
float:left;
width:400px;
}
Or you can remove the class of the div you don't want to be hidden.
<div id="apicture" class="hidden">
will become
<div id="apicture">
and
<div id="aform" class="hidden">
should be
<div id="aform">
Hope this will help.
I would like the text in the textarea to start off grey and turn to black after text has been entered. the text wont start off grey but if i click on it then off then on again it will be grey.
HTML code
<li class="message">
<textarea name="message" id="message_input" rows="4" cols="25" maxlength="200"
onfocus="if(this.value=='Add additional information here!')
{this.value='';this.style.color='#000';}"
onblur="if(this.value=='') {
this.value='Add additional information here!';this.style.color='#999';}"
>Add additional information here!</textarea>
</li>
CSS code
li.message {
position: absolute;
top:255px;
left: 150px;
color: #999;
}
Style the textbox, not the LI
li.message textarea {
color: #999;
}
Try and avoid inline javascript declarations. It is also better to use classes to manage your style changes. Even this could be improved upon as I would like to see the default value stored and checked instead of checking the string each time. classList is not supported by IE7, but there are workaround if you must support it.
http://jsfiddle.net/bTRgz/1/
var textarea = document.getElementById('message_input');
textarea.onfocus = function() {
if (this.value == 'Add additional information here!') {
this.value = '';
this.classList.add('active');
}
};
textarea.onblur = function() {
if (this.value == '') {
this.value = 'Add additional information here!';
this.classList.remove('active');
}
}
You could utilize jQuery to more easily manipulate the DOM, see this JsFiddle example where I am changing the text color depending on focus() and blur().
<li class="message">
<textarea name="message" id="message_input" rows="4" cols="25" maxlength="200">Add additional information here!</textarea>
</li>
li.message {
position: absolute;
top:255px;
left: 150px;
list-style: none;
}
$(document).ready(function(){
$('#message_input').focus(function(){ $(this).css('color','gray'); });
$('#message_input').blur(function(){ $(this).css('color','black'); });
});