which I use to clear the text. This x box always appear. I want this x box to appear only when input has focus and hide after word. Currently it appears all the time.
<div class="input-group">
<div class="btn-group has-feedback has-clear">
#Html.TextBoxFor(m => m.Amount)
<a id="searchclear3"
class=" a glyphicon glyphicon-remove-circle form-control-
feedback form-control-clear"
style="pointer-events:auto; text-decoration:none;
cursor:pointer;"
onclick="$(this).prev('input').val('');return false;">
</a>
</div>
</div>
You can use some fancy CSS to hide the “searchclear3" element when the text box isn’t focused. The trick is to use the CSS “Adjacent Sibling Selector”, +. (Ref: MDN)
HTML
<div class="input-group">
<div class="btn-group has-feedback has-clear">
<input id="txtInput" type="text"/>
<a id="searchclear3"
class=" a glyphicon glyphicon-remove-circle form-control-
feedback form-control-clear"
style="pointer-events:auto; text-decoration:none;
cursor:pointer;"
onclick="alert('click'); return false;">X
</a>
</div>
</div>
Notice that for convenience, I hard-coded the markup for the text box, put an “X” in the a element and fudged the onclick handler. You’ll have to figure out an appropriate selector for the text box and get rid of the other stuff.
CSS
input#txtInput + a#searchclear3 {
visibility: hidden;
}
input#txtInput:focus + a#searchclear3 {
visibility: visible;
}
Those rules say that an a element with id “searchclear3” that is a sibling of an input whose id is “txtInput” should be visible when the input has focus, and hidden otherwise.
Related
I'm trying to do something like this: https://stackblitz.com/edit/daisyui-sveltekit-furm6v?file=src%2Froutes%2F%2Bpage.svelte
Here's the code from it:
<h1 class='text-xl'>Daisy attempt</h1>
<div class="collapse collapse-arrow">
<input type="checkbox" />
<div class="collapse-title text-xl font-medium">
<span class=pr-4>Click me to show/hide content</span>
<button on:click|stopPropagation={() => alert('saved')} class='btn btn-error'>save changes</button>
</div>
<div class="collapse-content">
<p>hello</p>
</div>
</div>
<hr class=mt-4>
<h1 class='text-xl'>Native components solution</h1>
<details>
<summary>
<span class=pr-4>Click me to show/hide content</span>
<button on:click|stopPropagation={() => alert('saved')} class='btn btn-error'>save changes</button>
</summary>
details
</details>
<style>
summary:hover {
cursor: pointer;
}
</style>
I'm not sure if/how to get the button's click handler to run. Any advice?
Thanks
I've tried using z-index but I suppose that's only for display not event handling.
I've tried stopPropagation on the button but that didn't work either.
So the issue right now is that the input element is covering the title div, which is why your clicks are not reaching the button. To fix this we can just change the order a bit and mess with the pointer events.
.collapse-title {
z-index: 10;
pointer-events: none;
}
.collapse-title button {
pointer-events: all;
}
this will make sure that the title covers the input, but that clicks fall though to the input while not falling through the button.
I am basically trying to write a script that could expand a collapsed <div> using JavaScript. While using the frontend part, I can collapse and expand that <div> just by clicking on that but when it comes to JavaScript, it's not working if I try element.click() or even element.ariaExpanded = "true".
I am attaching the code for before and after click on that <div> highlighting the differences in the code.
I tried several things including
var outerDiv = document.getElementsByClassName("section--section--BukKG");
outerDiv[0].ariaExpanded = "true";
outerDiv[0].children[0].ariaExpanded = "true";
outerDiv[0].click();
document.querySelectorAll('.section--section-chevron--tJ4mD')[0].classList.remove('udi-angle-down');
document.querySelectorAll('.section--section-chevron--tJ4mD')[0].classList.add('udi-angle-up');
As you did not include any HTML markup the following is a rough facsimile of the original. You are essentially trying to toggle the visibility of the DIV elements and indicate, using ARIA tags, that the element is or is not expanded
To that end you can make use of the aria-expanded attribute in CSS to govern the visibility of the child objects within the parent container. By setting the attribute aria-expanded as either true or false will then invoke the relevant css rule to display/hide the children.
const bool=(v)=>v=='true' ? true : false;
const clickhandler=function(e){
this.setAttribute('aria-expanded', !bool(this.ariaExpanded) )
}
document.querySelectorAll('div.section--section--bukkg').forEach(div=>div.addEventListener('click',clickhandler) );
.section--section--bukkg{
transition:ease-in-out 250ms all;
border:1px solid red;
padding:1rem;
margin:1rem;
}
[aria-expanded="false"] .section--section--heading{
display:none;
}
[aria-expanded="true"] .section--section--heading{
display:block;
}
<div class='section--section--bukkg' data-purpose='section-panel' aria-expanded='false'>
<div class='section--section--heading' role='button' tabindex=0 data-purpose='section-heading'>
<div class='section-title' data-purpose='section-panel'>A title of some sort 1</div>
<span class='section-chevron'>Some content in a SPAN 1</span>
<div class='font-text-xs'>teeney weeney text 1</div>
</div>
</div>
<div class='section--section--bukkg' data-purpose='section-panel' aria-expanded='false'>
<div class='section--section--heading' role='button' tabindex=1 data-purpose='section-heading'>
<div class='section-title' data-purpose='section-panel'>A title of some sort 2</div>
<span class='section-chevron'>Some content in a SPAN 2</span>
<div class='font-text-xs'>teeney weeney text 2</div>
</div>
</div>
<div class='section--section--bukkg' data-purpose='section-panel' aria-expanded='false'>
<div class='section--section--heading' role='button' tabindex=2 data-purpose='section-heading'>
<div class='section-title' data-purpose='section-panel'>A title of some sort 3</div>
<span class='section-chevron'>Some content in a SPAN 3</span>
<div class='font-text-xs'>teeney weeney text 3</div>
</div>
</div>
I'm trying to center an input box on the center of the page. When you click the button "Prices" It should show a text box right under the button centered. Instead, it's showing all the way to the left.
Here is what I have:
<div class="header-content">
<div class="header-content-inner">
<h1 class="text text-primary vintage-retro sr-intro">IFixIT Repair</h1>
<hr class ="sr-intro">
<p style="font-family:Arial;" class ="text sr-intro">Repairs By Students, For Students</p>
Schedule Repair
</div>
Prices
<div id="repair-prices" class="text-center collapse">
<input class="typeahead form-control" name="search" placeholder="Model of Device (i.e. iPhone 6)">
</div>
</div>
With this, I get this result after the button click:
The box is all the way to the left.
Any help would be awesome! If you need to see anything else, let me know. Thanks!
Try using the <center> tag, that may help.
If you are using HTML5, this does not work and you must center using CSS.
Try using add some css in input class. Because when you used form-control class it has display:block property, so that it will take 100% of width.
.typeahead.form-control{
display:inline-block;
width:auto;
min-width:280px;
}
.btn.btn-primary.sr-intro{
margin-bottom:10px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header-content text-center">
<div class="header-content-inner ">
<h1 class="text text-primary vintage-retro sr-intro">IFixIT Repair</h1>
<hr class ="sr-intro">
<p style="font-family:Arial;" class ="text sr-intro">Repairs By Students, For Students</p>
Schedule Repair
</div>
Prices
<div id="repair-prices" class="text-center">
<input class="typeahead form-control" name="search" placeholder="Model of Device (i.e. iPhone 6)">
</div>
</div>
I dont know whether is correct, but i have tried your code with fiddle
>>> fiddle demo <<< without form-control class
add this and remove form-control class
.text-center {
text-align: center;
}
your form-control class in search is 100% width, so you cant center it.
I have an html like this.I am trying to do a jquery trigger on a button click.Basically I just need to close the div when The button is clicked.
I have tried following code in button click using jquery but the div is not closing.Can anyone correct me
JS
$('.tags .alert-success .close').trigger(click);
HTML
<div class="sentiment-text">
<div class="wrapper">
<div class="key"></div>
<div class="text" <div class="tags alert-success">×<span class="noun">#</span><span class="noun">sed/span> <span class="noun">#</span><span class="noun">menshealth</span> </div></div>
<div class="clear-sentiment"></div>
</div>
</div>
This is what you need -- no space between the first two selectors -- .tags.alert-success. Both .tags and .alert-success are on the same element:
$('.tags.alert-success .close').trigger( 'click' );
//or $('.tags.alert-success .close').click();
And close the opening tag of .text div so that you have:
<div class="text"><div class="tags .......
I have few td in my code.
The scenario is when I click on a td,the content below the td which is hidden on load needs to be displayed .
I have few events to handle with the elements in the dropdown.
I have used the same structure for all the tds, the problem is when I click on the first td, the dropdown appears and when I click on the second td, the dropdown elements coded in the second td also appears.
My scenario is when I click on any td, the dropdowns present below that td alone should appear and the other dropdown should disappear if they are shown.
My code is as follows:
$("#timeofday p").bind('click',function(event){
$(this).parent().find(" > .dropdown").slideToggle();
$(this).text($(this).text() == 'CLOSE' ? 'AFTERNOON' : 'CLOSE');
});
my html is as follows:
<tr>
<td id="timeofday" class="avbltyltblue">
<p>AFTERNOON</p>
<div id="dropdown" class="dropdown">
<div style="padding:10px 0"><button class="up" style="width:100px">UP</button></div>
<ul class="tlist">
<li>1:00PM</li>
<li>2:00PM</li>
<li>3:00PM</li>
<li>4:00PM</li>
<li>5:00PM</li>
<li>6:00PM</li>
<li>7:00PM</li>
<li>8:00PM</li>
<li>9:00PM</li>
<li>10:00PM</li>
</ul>
<div style="padding:10px 0"><button class="down" style="width:100px">DOWN</button></div>
</div>
</td>
<td id="timeofday" class="avbltyltblue">
<p>AFTERNOON</p>
<div id="dropdown" class="dropdown">
<div style="padding:10px 0"><button class="up" style="width:100px">UP</button></div>
<ul class="tlist">
<li>1:00PM</li>
<li>2:00PM</li>
<li>3:00PM</li>
<li>4:00PM</li>
<li>5:00PM</li>
<li>6:00PM</li>
<li>7:00PM</li>
<li>8:00PM</li>
<li>9:00PM</li>
<li>10:00PM</li>
</ul>
<div style="padding:10px 0"><button class="down" style="width:100px">DOWN</button></div>
</div>
</td>
</tr>
Well, this seems to work:
$("#timeofday p").click(function(event){
$("#timeofday .dropdown").slideUp();
$("#timeofday p").text($("#timeofday p").text('CLOSE') );
$(this).parent().find(" > .dropdown").slideToggle();
$(this).text($(this).text('AFTERNOON') );
});
Here's an example http://jsfiddle.net/9LkDU/4/
onclick -- hide the element by making its visibility:hidden or display:none with JS..
var div = document.getElementById("idOfYourElementToBeHidden");
div.style.visibility="hidden"; // this preserves the space occupied by the div
div.style.display="none"; // this frees up the space occupied by tat div