How can I remove the Boostrap tooltip when the following input is disabled?
<label class="label" data-toggle="tooltip" title="Test">
<input type="checkbox" value="disabled" class="input" disabled>
<label>
First, I tried to detect whether it has a tooltip, but it seems not working. And then, set it to ''.
if($(this).is('[data-toggle="tooltip"]')) {
alert('tooltip');
$('[data-toggle="tooltip"]').tooltip('title', ''});
}
Any idea? Thanks.
you have to check your input is disabled or not first,
and then going back to label to remove the title.
$(document).ready(function(){
$(".label").hover(function() {
if($(this).children().attr('disabled')) {
$(this).attr('title','123'); /*just change 123 to empty '' then can remove your title */
}
if($(this).attr('title')) $(this).removeAttr('title');
/*<del>$('.showtitle').text($(this).attr('title'));*/
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label class="label" data-toggle="tooltip" title="Test">
<input type="checkbox" value="disabled" class="input" disabled/>
</label>
<label class="showtitle"></label>
You have to check for all input that have disabled attribute or not. but for this solution following code will work:
$(document).ready(function(){
$(".label").hover(function() {
if($(this).attr('data-toggle')=="tooltip" ) {
$(this).attr('title','');
}
});
});
<label class="label" data-toggle="tooltip" title="Test">
<input type="checkbox" value="disabled" class="input" disabled/>
</label>
Related
I have the following structure:
<div id="1" class="MyMainSection">
<div id=2" class "MyRow">
<input id="5" type="button" disabled>
<input id="4" type="button" disabled>
<input id="7" type="button" disabled>
</div>
<div class "MyRow">
<input id="12" type="button" disabled>
<input id="8" type="button">
<input id="10" type="button" disabled>
</div>
<div class "MyRow">
<input id="11" type="button" disabled>
<input id="1" type="button" disabled>
<input id="9" type="button" disabled>
</div>
</div>
My goal is to hide all elements (via "display:none") below the only non-disabled button. The LESS selector should not purely look for "id=8" as the id is generated dynamically.
I had something in mind like
.MyMainSection {
.MyRow {
input:not([disabled]) ~ input {
display:none;
}
}
}
but this doesn't work...
Can someone help me ?
UPDATE:
I was not precise enough.
My selection statement already contained the input element and not the class "input", so this should not stop us.
But my issue is that I want to hide ALL subsequent elements in my HTML code (no matter if they are input, MyRow, MyMainSection or anything else that comes below that one non-disabled button).
The problem is that you are selecting a class of input and not the input itself. Simply remove the . from your selector to get
.MyMainSection {
.MyRow {
input:not([disabled]) ~ input {
display:none;
}
}
}
Anchor tag acts as a form submit button?
<form method="get" action="<?php bloginfo('url'); ?>/">
<div class="field-search">
<input type="text" class="form-control input-lg" placeholder="Search for..." value="<?php the_search_query(); ?>">
<i class="fa fa-search font-16"></i>
</div>
<form action="test.aspx" type="POST">
<label>
<span>Username</span>
<input type="text" name="UserName" id="UserName" class="input-text required" />
</label>
<label>
<span>Password</span>
<input type="password" name="Password" id="Password" class="input-text required" />
</label>
<label>
<input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
<span class="checkboxlabel">Remember Me</span>
</label>
<div class="spacer">
Login
</div>
</form>
jquery
$(document).ready(function(){
$(document).on("click",".login-button",function(){
var form = $(this).closest("form");
//console.log(form);
form.submit();
});
});
possible duplicate of
(Anchor tag as submit button?)
(This is a copied answer)
Try this approach see if it works.
Add a click event to your anchor tag as below and do a event.stopPropagation()
$('a').on('click', function(e){
e.stopPropagation();
})`
See if this works
I want that if you click on text the search button appears, I try to do that by using this code:
<a class="gn-icon gn-icon-search" style="width:200%;" onClick="CLICK ON THE BUTTON DIV">Search with style</a>
<ul id="sb-search" class="sb-search" style="margin-right:30px;">
<span class="sb-icon-search"></span>
<form>
<input class="sb-search-input" placeholder="Please enter search terms" type="text" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="" id="search-submit">
</form>
</div>
Does someone knows how to fix this? Maybe with jQuery? Thank you very much!
Using JQuery you can show the button on link click.
The HTML:
<a class="gn-icon gn-icon-search" id="search-text" style="width:200%;">Search with style</a>
<ul id="sb-search" class="sb-search" style="margin-right:30px;">
<span class="sb-icon-search"></span>
<form id="search-form">
<input class="sb-search-input" placeholder="Please enter search terms" type="text" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="" id="search-submit">
</form>
</ul>
The JQuery:
$(document).ready(function() {
$('#search-form').hide();
});
$('#search-text').click(function() {
$('#search-form').show();
});
I'm trying to submit a form with zombie.js, and pressButton() is failing with "Error: No BUTTON 'xxx'", where xxx is the selector. Here is the app:
var Browser = require('zombie');
b = new Browser();
b.visit('https://www.example.com/login/', function() {
b.
fill('name', 'My Name').
fill('code', 'My Code').
pressButton('submit', function() {
console.log(b.html());
});
});
And here is the form:
<form method="post" class="login">
<p> <label for="name"> <span id="nameprompt">Your Name:</span> </label> </p>
<input name="name" id="name" value="" size="40" maxlength="40" />
<p> <label for="code"> <span id="codeprompt">Bar Code</span> </label> </p>
<input name="code" id="code" type="PASSWORD" value="" size="40" maxlength="40" />
<div class="formButtonArea">
<input type="image" src="/screens/pat_submit.gif" border="0" name="submit" value="submit" />
</div>
</form>
I've tried a bunch of selectors including things like ".formButtonArea input" in addition to the obvious "submit" with no success.
What am I doing wrong?
It seems like you need the input to be of type="submit" (or type="button" perhaps). According to https://groups.google.com/forum/?fromgroups=#!topic/zombie-js/8L0_Cpn8vVU, where the author comments on clickLink, it's likely that clickButton will do the same: find buttons and then fire click.
Hope it helps.
I have few form fields, each input and label is wrapped inside a div in following way:
<div class="field">
<label for="name">Name:</label>
<input type="text" class="input" name="name" />
<p class="hint">Enter your name</p>
</div>
the hint class is initially hidden like display:none.
How can I display the hidden hint class on hover anywhere in class field.
Thanks.
In CSS you can do it the following way:
.hint { display: none; }
.field:hover .hint { display: block; }
Edit: As Karl said, this will not work in Internet Explorer 6. You can, however, resort to JavaScript (in this example using jQuery) to do that:
jQuery(".field").hover(
function() {
jQuery(this).find(".hint").css("display","block");
},
function() {
jQuery(this).find(".hint").css("display","none");
}
);
This option will work in IE 4 and later.
<div class="field" onmouseover="document.getElementById('hint').style.display='none';" onmouseout="document.getElementById('hint').style.display='block';">
<label for="name">Name:</label>
<input type="text" class="input" name="name" />
<p id="hint">Enter your name</p>
</div>
And for your other forms just change the id hint2, hint3, etc.
<div class="field" onmouseover="document.getElementById('hint2').style.display='none';" onmouseout="document.getElementById('hint2').style.display='block';">
<label for="name">Name:</label>
<input type="text" class="input" name="name" />
<p id="hint2">Enter your name</p>
</div>