I have a little trouble when I use .toggleClass in my code. Sometimes, it works, sometimes not. I have read many posts about it but none have helped me.
Can you help me, please?
jQuery
var e = $(".pwdMask > .form-control"),
t = $(".pwd-toggle");
$(t).on("click", function(t) {
t.preventDefault(),
$(this).toggleClass("fa-eye fa-eye-slash"),
$(this).hasClass("fa-eye") ? $(e).attr("type", "text") : $(e).attr("type", "password")
})
HTML
<div class="pwdMask">
<input type="password" class="form-control" name="_password" placeholder="(...)" }}">
<span class="focus-input"></span>
<span class="fas pwd-toggle fa-eye fa-eye-slash"></span>
</div>
I call jQuery, Bootstrap.js and my custom.js files at the end of the HTML page.
I already thank you!
Remove one class your HTML
<span class="fas pwd-toggle fa-eye-slash"></span>
https://jsfiddle.net/lalji1051/2uwcda5b/3/
Fixed.
The problem was that I had 2 times each scripts because I closed the TWIG tag wrongly.
If it happens to somebody one day, don't forget to close body blocks before using javascript blocks.
Related
when I use data-toggle="tooltip" with the tag <h>, it works normally:
<h3 data-toggle="tooltip" data-placement="right"
title="example"> example </h3>
but when I try to use with <a>/<td>/<span>, this does not work normally, it just shows the normal tool-tip, without any style.
I'm starting with JavaScript and CSS, so I'm a bit stuck.
What can I do to solve this?
(I'm aware there are similar questions to this but they haven't solved my problem)
Thanks in advance.
It works for me: https://jsfiddle.net/fgcb27aa/
Check if you have tooltips enabled in your current page.
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
Greetings everyone :)
My question pertains to the bootstrap tooltips. I have a bunch of tooltips within my page (5 to be exact).
The tooltips look (more or less) like this:
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="{{'calculation.ttSD' | translate}}"></span>
I initialize them at the very top of the page (right after the ) with the classic:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Most tooltips are initialized without any problems, however 2 are not working properly. There are some parts of the page that are hidden as the page loads and revealed depending upon what the user has entered.
Example:
<tr ng-if="condition == 'true'">
<label data-translate="the.text.to.put.in.the.label"/>
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" tittle="someText">
...
These tooltips are not getting initialized properly at the beginning. As a quick fix i just copied the above javascript and placed it right after the tooltips, which works. Except that kills the DRY principle since the same exact js comes up 3-4 times within the page.
What is a better way (if there is a way at all) of initializing all bootstrap tooltips, regardless if hidden or not?
Thanks :)
ng-if prevents DOM Element from being rendered. Hence the initialization in document.ready will not take effect on your ng-if false elements
Instead you can use ng-show/ ng-hide as they only changes display css-poperty
modified your example to ng-show instead of ng-if
<tr ng-show="condition == 'true'">
<label data-translate="the.text.to.put.in.the.label"/>
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" tittle="someText">
hope it helps
I am always leery of asking dumb questions here but I need to move on and create a few more active pages but this is a lingering issue in my way ...The chtml in razor contains a switch ,,, in one of the cases there's three if statements.. THIS IS JUST ONE OF THEM depending on the if statements a different string in viewdata is to be fed into a div and the div class "hidden" is removed and the supplied text displayed....
I have over the past few hours regained my briefly lost ability to remove that hidden class (I hate css) but I have never been able to update the content of the div.
PLEASE Advise Thank you !!
<div id="divUnUsableEvent" class="hidden">
<div class="row clearfix">
<div class="col-md-1"></div>
<div id="systemExceptionLbl" style="font-size: 2em; color: red;"
class="text-danger:focus">
Please contact IS support
</div>
</div>
</div>
//alphascores Not present AND BetaSCores Not Present Ready for xxxxx //alphascores Not present AND BetaSCores Not Present Ready for xxxxx Scoring
if (!Convert.ToBoolean(#ViewData["alphaPresent"])
&& !Convert.ToBoolean(#ViewData["betaPresent"]))
{
<script type="text/javascript">
$(function() {
$('#UnUseableEvent').addClass("hidden");
var txtMsg = #Html.Raw(Json.Encode(ViewData["beforeAlpha"]));
$('#divUnUsableEvent').removeClass("hidden");
$('#systemExceptionLbl').removeClass("hidden");
$('#systemExceptionLbl').innerText = txtMsg;
});
</script>
<a id="XXXReScoreEvent"
href="#Url.Action("Readyforxxxxxx", "Exception", new { Id = (int)#ViewData["Id"] })"
class="btn btn-primary btn-default btn-too-large pull-left margin"
aria-label="XXXReScoreEvent">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Ready for xxxxxx Scoring
</a>
}
break;
I know its hitting the javascript, as that html element (a button) named '#UnUseableEvent' is correctly being hidden in this case. I of course would want the javascript out of this html page and just have function calls in the razor but baby steps
Specifically regarding the ('#systemExceptionLbl').innerText = txtMsg; I have tried
.text
.value
.innerHTML
all to no avail. I can see the correctly formatted Json.Encoded text reach the variable txtMsg, but again I cant get it into the div ..
I am having success now with displaying the div (remove class hidden) I was attempting to affect the wrong div name and the line removing the hidden class from the element $('#systemExceptionLbl') is not needed.
I even tried to skip the JQuery reference and go old school document.getElementById('systemExceptionLbl').innerHTML = txtMsg;
Ever tried :
$('#systemExceptionLbl').text( txtMsg );
or
$('#systemExceptionLbl').html( txtMsg );
as innerText is not a jquery function. Instead use .html() or .text() to insert data into it
I have this HTML code:
<span class="apparatus type-substantive">
<span class="reading HQ1">I there’s the </span>
<span class="reading TTQ1 BQ1">ay, there's the </span>
<span class="reading HQ2 BQ2 BF BE HaF MW GBE HJ DB4 BR PE TW TS TTQ2 TTF RSM"> that is the </span>
</span>
And I want to inject "<" and ">" before and after the one with class HQ2 (third span), and { and } before and after the one which has class HQ1 (first span), so I've done this:
$('span.HQ2').prepend('<span class="pended"><</span>').append('<span class="pended">&t;</span>').siblings('.HQ1').prepend('<span class="pended">{</span>').append('<span class="pended">}</span>').css('color','#217b26');
The problem is that the result is not the one I expected, because the second append and prepend are not working, these only work if I remove the span tags and leave the "{" and "}" alone. The .css() works as expected, so the selection is done properly with .siblings(). I think the problem may rely in the result that .siblings() is giving me, maybe it does not accept prepending and appending HTML tags or something. I don't know...
Could you enlighten me?
Thank you very much.
try '\' before greater than and less than marks. this will ensure they are interpreted as text:
$('span.HQ2').prepend('<span class="pended">\<</span>').append('<span class="pended">\></span>').siblings('.HQ1').prepend('<span class="pended">{</span>').append('<span class="pended">}</span>').css('color', '#217b26');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="apparatus type-substantive">
<span class="reading HQ1">I there’s the </span>
<span class="reading TTQ1 BQ1">ay, there's the </span>
<span class="reading HQ2 BQ2 BF BE HaF MW GBE HJ DB4 BR PE TW TS TTQ2 TTF RSM"> that is the </span>
</span>
Today I've found out why this wasn't working... apparently I forgot I had a piece of jquery later in the same code preventing me from doing this... I've been fooled by my own code. :/
Thank you all, anyways.
I am trying to code a jquery slider. I have a html code which looks like this. I had earlier posted a simpler version of code so that the question doesnt seem too long. Sorry for the inconvenience caused. Here is the actual code
<div class="allItems">
<div class="echItm">
<h4>asdddddddd </h4>
<span class="mImg">/web/images/promotionSlideShowImages/kc1g358wvv.jpg</span>
<span class="tImg">/web/images/promotionSlideShowThumbnailsNew/kc1g358wvv.gif</span>
</div>
<div class="echItm">
<h4>dddddddddd </h4>
<span class="mImg">/web/images/promotionSlideShowImages/ptvrbfpnkd.jpg</span>
<span class="tImg">/web/images/promotionSlideShowThumbnailsNew/ptvrbfpnkd.gif</span>
</div>
</div>
When I try to do a find using
var imagesArray=$('.allItems').find('.echItm');
for(var i=0;i<imagesArray.length;i++){
var thisElement=imagesArray[i];
alert($(thisElement).html());
}
IE returns null, whereas firefox, chrome return the required html. Can someone guide me what am I doing wrong? I'm using Jquery 1.4.2 and testing this on IE8. Thanks in advance.
testElement is already a jQuery object so you don't have to wrap it in $(). Try this
var testElement=$('.echItm').find('h4');
alert(testElement.html());