Problem: I want to have the submit button of my search box (HTML Form) to be hidden until the user clicks into the text input box.
HTML:
<div class="views-exposed-form">
<div class="views-exposed-widgets clearfix">
<div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
<div class="views-widget">
<div class="form-item form-type-textfield form-item-search-api-views-fulltext">
<input placeholder="Search" type="text" id="edit-search-api-views-fulltext" name="search_api_views_fulltext" value="" size="26" maxlength="128" class="form-text">
</div>
</div>
</div>
<div class="views-exposed-widget views-submit-button">
<input type="submit" id="edit-submit-display-products" name="" value="Apply" class="form-submit">
</div>
</div>
</div>
What I have tried I know you can use at least some type of conditions when working with CSS. Like this right here: how-to-affect-other-elements-when-a-div-is-hovered
My problem now is that my elements are not directly inside of each other. I already played around with something like showing the button when hovering over wrapper div.
It is hidden like this:
#block-views-exp-display-products-page .views-submit-button {
visibility: hidden;
}
What I actually need now is something like this:
#edit-search-api-views-fulltext:focus (operator) #block-views-exp-display-products-page .views-submit-button {
visibility: visible;
}
But I dont know how to do that.
Edit:
In case anyone comes across this, this is my final solution:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#edit-search-api-views-fulltext").on('click', function(){
$("#edit-submit-display-products").css("visibility", "visible");
});
});
</script>
<script>
$(document).ready(function() {
$("#edit-search-api-views-fulltext").on('focusout', function(){
if (!$("#edit-submit-display-products").is(":hover")) {
$("#edit-submit-display-products").css("visibility", "hidden");
}
});
});
</script>
This will hide the button whenever you click outside of the input field and prevents the button from disappearing when trying to click on it.
You can leverage :focus-within.
The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)
MDN
Support is non-IE/Edge though.
Something like:
.views-submit-button input {
visibility: hidden
}
.views-exposed-widget:focus-within + .views-submit-button input {
visibility: visible
}
.views-submit-button input {
visibility: hidden
}
.views-exposed-widget:focus-within+.views-submit-button input {
visibility: visible
}
<div class="views-exposed-form">
<div class="views-exposed-widgets clearfix">
<div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
<div class="views-widget">
<div class="form-item form-type-textfield form-item-search-api-views-fulltext">
<input placeholder="Search" type="text" id="edit-search-api-views-fulltext" name="search_api_views_fulltext" value="" size="26" maxlength="128" class="form-text">
</div>
</div>
</div>
<div class="views-exposed-widget views-submit-button">
<input type="submit" id="edit-submit-display-products" name="" value="Apply" class="form-submit">
</div>
</div>
</div>
You could add Javascript (jquery) to solve this problem:
<script src="code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$("#edit-search-api-views-fulltext").on('click', function(){
$("#edit-submit-display-products").css("visibility", "visible");
});
});
</script>
Related
I'm using .html() to get inputs inside a div and place it in another element using .html() again the problem is I cant get it with its value.
$("#myButton").click(function(){
$(".element2").html($(".element1").html());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</script>
<div class="element1">
<input type="text" placeholder="enter something then clone it!"/>
</div>
<div class="element2"></div>
<button id="myButton">click to clone</button>
To copy one element to another, you can use .clone()
var copy = $(".element1 > *").clone()
this will clone all of the elements with .element1 - you can then .append()/.appendTo() these to element2.
Updated snippet:
$("#myButton").click(function(){
$(".element1 > *").clone().appendTo(".element2");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element1">
<input type="text" placeholder="enter something then clone it!"/>
</div>
<div class="element2"></div>
<button id="myButton">click to clone</button>
I have a code where I want the page to close when the box is clicked with the "box-search" class
But even though I said don't consider the form and the elements inside the form, the form will be closed when the form and input are clicked.
$(".box-search *").not('form, form *').click(function() {
$(".box-search").fadeOut();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-search">
<div class="container" style="font-size: 40px; color: red;">
<button type="submit" class="close-box-search">Close</button>
<form method="get" action="">
<input type="text">
<button type="submit">Search</button>
</form>
</div>
</div>
I found the answer to my question
To select the parent, but not apply to the child
We use the following code
$(".box-search").click(function (e) {
if( $(e.target).hasClass("box-search") || $(e.target).hasClass("container") || $(e.target).hasClass("close-box-search") ){
hideBoxSearch()
}
});
HTML
<body class="music">
<pre class="chord">Chords</pre>
<div class="lyric" style="display: none">Lyrics</div>
<input class="c" id="event" type="checkbox" checked data-toggle="toggle" data-size="small" width="5px" data-onstyle="info" data-offstyle="info" data-on="Chords" data-off="Lyrics">
</body>
Please help me with jquery code. By default only pre tag contents are displayed. When checkbox is checked I need to display only the contents of div tag. When box is unchecked, I want the reverse to be happened i.e. only show contents of pre tag.
So,continuing the comment earlier, here's the code that you may want to use.
$(function(){
var chord = $(".chord");
var lyric = $(".lyric");
var event = $("#event");
event.on("change", function(){
chord.toggle();
lyric.toggle();
});
})
by leveraging the data attributes in your HTML, a better way to do it is to update pre content based on checkbox selection
$(function(){
var selection = $(".selection");
var event = $("#event");
event.on("change", function(){
var content = $(this).is(":checked") ? $(this).data("on") : $(this).data("off");
selection.text(content);
});
})
<script
src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<body class="music">
<pre class="selection">Chords</pre>
<input
class="c"
id="event"
type="checkbox"
checked data-toggle="toggle"
data-size="small"
width="5px"
data-onstyle="info"
data-offstyle="info"
data-on="Chords"
data-off="Lyrics" />
</body>
HTML:
<div id="content1">Content 1</div>
<div id="content2">Content 2</div>
<input type="checkbox" checked id="checkbox">
CSS:
#content2 {
display: none;
}
JS (using JQuery):
$(function() {
$('#checkbox').on('click', function() {
if (!$(this).is(':checked')) {
$('#content1').hide();
$('#content2').show();
} else {
$('#content1').show();
$('#content2').hide();
}
});
});
If you have any questions, ask.
you just need to toggle the displays. I replaced the pre tag with a div for spacing
function jsdisplay(){
$(".chord").eq(0).toggle();
$(".lyric").eq(0).toggle();
}
pre{
margin:0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="music">
<pre class="chord">Chords</pre>
<div class="lyric" style="display: none">Lyrics</div>
<input class="c" id="event" type="checkbox" checked data-toggle="toggle" data-size="small" width="5px" data-onstyle="info" data-offstyle="info" data-on="Chords" data-off="Lyrics" onchange="jsdisplay()">
</body>
I am trying out the Ionic app. I have the following simple snippet:
<ion-content padding="true" >
<label class="item item-input item-stacked-label">
<button ng-click="clickMe()">ClickMe</button>
</br>
<div class="input-label">Test Label</div>
</label>
</ion-content>
Which gives the following UI:
When I am clicking outside of the ClickMe button, ClickMe button is pushed up and called the clickMe().
Please help me to understand the reason behind this.
That is the property of a label that:
When a LABEL element receives focus, it passes the focus on to its
associated control.
If you want to prevent it, you can write a directive:
myApp.directive('preventClick', function() {
return {
link : function(scope, element, attrs) {
elemenet.on('click', function(e) {
e.preventDefault();
});
}
}
});
And apply it to the label
<label class="item item-input item-stacked-label" prevent-click>
<button ng-click="clickMe()">ClickMe</button>
</br>
<div class="input-label">Test Label</div>
</label>
Don't use label for that. Use any other element.
<div class="item item-input item-stacked-label">
<button ng-click="clickMe()">ClickMe</button>
</br>
<div class="input-label">Test Label</div>
</div>
I used toggle to make a search form from a button. But I want click outside any position to close search form, not only using button.
HTML
Search
<div class="search_field" style="display:none;">
<form>
<input name="search" class="search" value="" placeholder="Search Item...." type="text" data-theme="e" />
<input type="submit" value="Search" data-mini="false" data-icon="search" data-iconpos="notext" data-theme="c" />
</form>
</div>
Jquery :
$(function() {
$(".opensearch").on('click', tapHandler);
function tapHandler(event) {
$('.search_field').toggle();
$('.search').focus();
}
});
Demo of JsFiddle
Many thanks for your help.
Use the blur event:
$(".search").on("blur",function(){
$('.search_field').toggle();
});
Updated fiddle: JsFiddle demo
[Edit] You might want to check if the new focus is not on the search icon before hiding the field:
$(".search").on("blur",function(){
setTimeout(function(){
var target = document.activeElement;
target = target ? target.id||target.tagName||target : '';
if(target!="INPUT"){
$('.search_field').toggle();
}
}, 1);
});
Better with the id of the button though....
Example: JsFiddle demo
You can do something like
$(function() {
$(".opensearch").on('click', tapHandler);
//add a click handler to the document object
$(document).on('click', function(e) {
//if the click is happening inside the search_field or opensearch elements then don't do anything
if ($(e.target).closest('.search_field, .opensearch').length == 0) {
$('.search_field').hide();
}
});
function tapHandler(event) {
$('.search_field').toggle();
$('.search').focus();
}
});
.search_field {
padding: 10px 10px 0;
position: relative;
}
.search_field .ui-submit {
bottom: -2px;
position: absolute;
right: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Search
<div class="search_field" style="display:none;">
<form>
<input name="search" class="search" value="" placeholder="Search Item...." type="text" data-theme="e" />
<input type="submit" value="Search" data-mini="false" data-icon="search" data-iconpos="notext" data-theme="c" />
</form>
</div>