I have a button <button class="home-signup-button button-add" formnovalidate>Sign up</button>
On click of this button I want to change the text from Sign up to a font awesome icon. <i class='fa fa-circle-o-notch fa-spin fa-3x fa-fw'></i>. So far I've tried
$(".home-signup-button.button-add").click(function(){
$(this).text("<i class='fa fa-circle-o-notch fa-spin fa-3x fa-fw'></i>");
});
But I get an error that reads Uncaught SyntaxError: missing ) after argument list. If I just put in some text like "Connecting..." instead of the font awesome it works without any error.
instead of .text() use .html()
This is my code, How I would do
$(".home-signup-button.button-add").click(function(){
$('#change').html("<i class='fa fa-circle-o-notch fa-spin fa-3x fa-fw'></i>");
});
One solution would be to do the following:
$(".home-signup-button.button-add").click(function(){
$(this).html("<i class='fa fa-circle-o-notch fa-spin fa-3x fa-fw'></i>");
});
You could also do this:
$(".home-signup-button.button-add").click(function(){
$(this).append($('i').addClass('fa fa-circle-o-notch fa-spin fa-3x fa-fw'));
});
Related
Lets say i have 3 FA icons:
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
I want to change all of those to:
<i class="far fa-circle"></i>
<i class="far fa-circle"></i>
<i class="far fa-circle"></i>
This means i am modifying all of the prefix of those icons so that they change from solid to regular.
Before in FA 4.X i could just get all icons by their class name and switch their classes like so:
var icons = $(".icon");
icons.removeClass("fa-circle");
icons.addClass("fa-circle-o");
But now that they are SVG's i don't know how i can get them all and change their prefix.
I know i can change the prefix like so:
if (prefix === 'fas') {
icon.attr('data-prefix', 'far');
icon.css({ color: "#d6d6d6" });
} else {
icon.attr('data-prefix', 'fas');
icon.css({ color: "#3fcf8e" });
}
I just need to know how to get all of the icons so i can just loop through them and change their prefix.
As far as I understand…
You can always do it using your code, you just need to replace fas to far:
var icons = $(".icon");
icons.removeClass("fas");
icons.addClass("far");
// Note that this could be simplified to:
// icons.toggleClass('far fas');
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
fas: <i class="fas fa-circle"></i>
far: <i class="far fa-circle"></i>
<br><br>
<i class="icon fas fa-circle"></i>
<i class="icon fas fa-circle"></i>
<i class="icon fas fa-circle"></i>
Hope it helps.
I just realized that i can change the data-prefix attribute on everything with a specific class.
$(".icon").attr('data-prefix', 'far');
I don't understand... if i replace remove font awesome and use text() instead of html() this will work... But if i try the same code using font awesome icons, nothing happens and the text isn't changing on the button. What am i doing wrong ?
<a class="read-more" id="read-more">
<span class="view-more-images" id="view-more-images"><i class="fa fa-plus" aria-hidden="true"></i> VIEW MORE IMAGES <i class="fa fa-plus" aria-hidden="true"></i></span>
</a>
<script>
$( document ).ready(function() {
$('.read-more').click(function(){
$(this).parent().toggleClass('expanded');
});
$('.read-more').on('click', function() {
if ($('.view-more-images').html() == '<i class="fa fa-plus" aria-hidden="true"></i> VIEW MORE IMAGES <i class="fa fa-plus" aria-hidden="true"></i>') {
$('.view-more-images').html('- VIEW LESS IMAGES -');
} else {
$('.view-more-images').html('<i class="fa fa-plus" aria-hidden="true"></i> VIEW MORE IMAGES <i class="fa fa-plus" aria-hidden="true"></i>');
}
});
$('.read-more').on('click', function() {
$('.view-more-toggle').css({ 'display': 'block' });
});
});
</script>
I would instead use a relative children selector and toggle combined with having one hidden by default. I added some CSS to make your cursor a pointer and prevent the user from accidenly selecting text when spam clicking.
$( document ).ready(function() {
$('.read-more').on('click', function() {
$(this).children().toggle();
});
});
.read-more {
cursor:pointer;
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="read-more" id="read-more">
<span class="view-more-images" id="view-more-images"><i class="fa fa-plus" aria-hidden="true"></i> VIEW MORE IMAGES <i class="fa fa-plus" aria-hidden="true"></i></span>
<span class="view-more-images" style="display:none" id="view-less-images"><i class="fa fa-minus" aria-hidden="true"></i> VIEW LESS IMAGES <i class="fa fa-minus" aria-hidden="true"></i></span>
</a>
I have a button:
<button
class="btn btn-animated btn-default ban-user-btn"
id="btn-ban-username" // the username is generated by twig
data-nick="username" // the username is generated by twig
data-toggle="modal"
data-target="#statusModal"
>
Ban user
<i class="fa fa-ban"></i>
</button>
I need to change the button class from "btn-default ban-user-btn" to "btn-success unlock-user-btn".
When I do following in my javascript:
var button = $('#btn-ban-username);
button.addClass("btn-default");
button.addClass("ban-user-btn");
button.removeClass("btn-success");
button.removeClass("unlock-user-btn");
button.attr('id', 'btn-unlock-'+nick);
button.html("Unlock user <i class='fa fa-check'></i>");
I get the following:
<button
class="btn btn-animated btn-default ban-user-btn"
id="btn-unlock-username"
data-nick="username"
data-toggle="modal"
data-target="#statusModal"
>
Unlock user
<i class="fa fa-check"></i>
</button>
As you can see, the ID changes and the button content changes. The classes however do not.
Some ideas?
Cheers
You're adding classes that the button has and removing classes that the button doesn't have.
Try this:
$("#btn-ban-username")
.addClass("btn-success unlock-user-btn")
.removeClass("btn-default ban-user-btn");
In your JavaScript code you have to reverse the order of your addClass and removeClass. addclass function is used to add class to your html control and removeclass for removing class from an html contol.
You have to do this
var button = $('#btn-ban-username');
button.removeClass("btn-default");
button.removeClass("ban-user-btn");
button.addClass("btn-success");
button.addClass("unlock-user-btn");
button.attr('id', 'btn-unlock-dev');
button.html("Unlock user <i class='fa fa-check'></i>");
hi guys I am doing a toggle effect in my page, but i got error when i move the button close for other part of the page. If the button is in a part of html works if are for example in other div the button does not work.can you guy figure out what is going on? also can u say if that my jquery is clean? or need to be improved?
html:
<a href="#menu-toggle" class="btn btn-sidebar-close" id="close">
<i class="fa fa-times" aria-hidden="true"></i>
</a>
<a href="#menu-toggle" id="menu-toggle"data-toggle="tooltip>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
js:
$('#close').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
$('#menu-toggle').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
An improvement could be:
$('#close').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
$('#menu-toggle').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
in a single function as they're both containing the same functionality:
$('#close, #menu-toggle').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
You forgot to close quote after "tooltip" here :
<a href="#menu-toggle" id="menu-toggle"data-toggle="tooltip">
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
Otherwise, your code is working :
See this Fiddle
I have this segment of code that keeps throwing an error onclick. I have searched but have found nothing close to this type of code causing this error. Mostly it was issue in ajax calls. This is not an ajax call. Dev tools is telling me that it is happening on this line of code
<html>
I feel that is not really telling the whole story. error is -
Uncaught SyntaxError: Unexpected token }
Here is the code:
<a href="javascript:void(0);"
data-toggle="popover"
data-container="body"
data-placement="right"
data-trigger="focus"
data-content="<i class='fa fa-envelope-o fa-lg'></i> <a href='#contact' id='share-email' onclick='scrollElement('#contact')'>info#h3webelements.com</a><br>
<i class='fa fa-phone fa-lg'></i> 405.456.9447<br>
<i class='fa fa-globe fa-lg'></i><a href='#footer' onclick='scrollElement('#footer')'> Warr Acres, Oklahoma</a><br>
<i class='fa fa-twitter-square fa-lg'></i><a href='http://www.twitter.com/h3webelements' target='_blank'> #H3WebElements</a><br>
<i class='fa fa-facebook-official fa-lg'></i><a href='https://www.facebook.com/H3WebElements' target='_blank'> H3 Web Elements</a></br>"
data-html="true">
<i class="fa fa-user fa-3x"></i></a>
Javascript:
function scrollElement (target) {
$('html, body').animate({
scrollTop: $(target).offset().top
}, 1500);
}
Please note that the scrollElement function works fine on other aspects of the page- such as the navbar. I believe that the issue is in the data-content section of the link I am using as a popup on a fixed position element. I am forced to use single ' quotes. I have tried to escape the \' and used \" but that just ended up breaking everything. This should function as to scroll to the element as my navbar does already, right now it just takes it directly to the selected element.
Thanks
The problem is indeed in the repeating single quotes:
onclick='scrollElement('#contact')'
Since this code is in an attribute value we can use HTML entities to escape
the quotes:
onclick="scrollElement('#contact')"
Here's a working snippet. Note that only the email link in the popover has been corrected:
jQuery(function($){
$( 'a' ).popover();
})
function scrollElement(target) {
console.log("scrollElement", target);
$('html, body').animate({
scrollTop: $(target).offset().top
}, 1500);
}
#contact { position: relative;top:1000px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<a href="javascript:void(0);"
data-toggle="popover"
data-container="body"
data-placement="right"
data-trigger="focus"
data-content="<i class='fa fa-envelope-o fa-lg'></i> <a href='#contact' id='share-email' onclick="scrollElement('#contact')">info#h3webelements.com</a><br>
<i class='fa fa-phone fa-lg'></i> 405.456.9447<br>
<i class='fa fa-globe fa-lg'></i><a href='#footer' onclick='scrollElement('#footer')'> Warr Acres, Oklahoma</a><br>
<i class='fa fa-twitter-square fa-lg'></i><a href='http://www.twitter.com/h3webelements' target='_blank'> #H3WebElements</a><br>
<i class='fa fa-facebook-official fa-lg'></i><a href='https://www.facebook.com/H3WebElements' target='_blank'> H3 Web Elements</a></br>"
data-html="true">
<i class="fa fa-user fa-3x"></i></a>
<div id='contact'>Test!</div>