Need to change class on hover
to fa-angle-down
$(document).ready(function () {
$('#home i').hover(function () {
$(this).addClass('fas fa-angle-down');
}, function () {
$(this).removeClass('fas fa-angle-up');
});
});
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Services <i id="angle" class="fas fa-angle-up"></i>
script
When the mouse goes over, you are adding fa-angle-down and when it goes out, you are removing fa-angle-up.
If you want to swap them, you need to add one and remove class each time.
$(document).ready(function () {
$('#home i').hover(function () {
$(this).addClass('fa-angle-down').removeClass('fa-angle-up');
}, function () {
$(this).addClass('fa-angle-up').removeClass('fa-angle-down');
});
});
With pure JavaScript, you can just use the Element.classList property to toggle the classes like this:
var x = document.getElementById("home");
x.addEventListener("mouseover", function(){
this.children[0].classList.add("fa-angle-down");
this.children[0].classList.remove("fa-angle-up");
})
x.addEventListener("mouseout", function(){
this.children[0].classList.add("fa-angle-up");
this.children[0].classList.remove("fa-angle-down");
})
.fa-angle-up:after{content:"up!";}.fa-angle-down:after{content:"down!";}
Services <i id="angle" class="fas fa-angle-up"></i>
N.B. The up and down text is just for demonstrating how the JavaScript works.
Related
I try to find a solution, I would like to update just a part of data-content of popover. Exemple of code:
<div class="popover-wrapper">
<i class="glyphicon glyphicon-question-sign hover_content"
id="popover_help"
data-toggle="popover"
data-placement="right"
data-content="<p>Some static text
<span class='update-text'>Dynamic text to update</span>
</p>"
data-html="true">
</i>
</div>
<button class="update-popover" onClick="updatePopoverContent()">Click to update</button>
<script>
function updatePopoverContent() {
$('.popover-wrapper .hover_content')???;//and something like attr(‘data-content .update-text’, ‘new text’)
}
</script>
to show popover I use:
$(".hover_content").popover({
trigger: "manual",
animation: false,
delay: {
"hide": 30
}
}).on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
});
Is it possible to change just a part of 'data-content' text? Maybe someone can give some advice? Thank you in advance!
Using bootstrap-4, you can update the attribute data-content.
NB: you cannot update the .data value using jquery's .data("content", newValue) as it appears the popper reads the attribute directly each time instead of honouring the data convention.
$("#popover_help").attr("data-content", replacementHtml);
To update just the update-text part, you can read the HTML, parse it, use jquery to change it, then write it back as HTML:
var html = $("#popover_help").data("content");
var parsed = $("<div/></div>").html(html);
parsed.find("span").text("Updated text");
$("#popover_help").attr("data-content", parsed.html());
You can apply this to a .class to update all if you have more than one, here's an example.
$(function () {
$('[data-toggle="popover"]').popover()
})
function updatePopoverContent() {
$(".hover_content").each(function() {
var html = $(this).data("content");
var parsed = $("<div/></div>").html(html);
parsed.find("span").html("<strong>Updated</strong> text");
$(this).attr("data-content", parsed.html());
// doesn't update if currently shown, so hide then show if desired
$(this).popover("hide");
//$(this).popover("show");
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
<br/>
<div class="popover-wrapper">
<i class="glyphicon glyphicon-question-sign hover_content"
id="popover_help"
data-toggle="popover"
data-placement="right"
data-title="Example"
data-content="<p>Some static text
<span class='update-text'>Dynamic text to update</span>
</p>"
data-html="true">
click me
</i>
</div>
<hr/>
<button class="update-popover" onClick="updatePopoverContent()">Click to update</button>
I created the following button, and want to change the inner text "test" to other word.
<button type="button" id="test"><i class="fa-2x fa-regular fa-floppy-disk"></i>test</button>
I tried below method it can change the word but also deleted the icon.
$('button#bkmarktest').on('click', function(e){
e.preventDefault();
$(this).text("other");
});
Is there any way that can only change the word, but keeping the icon, thanks!
like #Kunal Tanwar said, wrapping the text in a span solves it and using Jquery this is my approach.. assuming the button has an id of test
using the .find() method to find the span child
<button type="button" id="test">
<i class="fa-2x fa-regular fa-floppy-disk"></i>
<span>test<span>
</button>
$('#test').on('click', function(e){
e.preventDefault();
$(this).find('span').text("other");
});
and another option would be to use the decendant selector since the span is a direct child of the button
$('#test').on('click', function(e){
$('#test > span').text('other');
});
I haven't use jQuery since very long so here's an example in vanilla javascript.
const btn = document.querySelector('#test');
btn.addEventListener('click', (e) => {
e.preventDefault();
// selecting span tag -> you can also give it a specific id or class if you want
btn.children[1].innerText = 'other';
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<button type="button" id="test">
<i class="fa-2x fa-regular fa-floppy-disk"></i>
<span>test</span>
</button>
What .text() method does is that it overwrites not only text but HTML as well. The easiest thing to do is move your text inside the <i> so it doesn't get overwitten only what's inside of it. Review the example below and notice that the icon remains -- it's because it's actually a CSS pseudo-element and is always ignored by methods and functions dealing with the DOM.
$('.test').on('click', function() {
$(this).find('i').text(' IT WORKS!')
});
<link href='https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
<button class='test' type='button'>
<i class="fa fa-star-o"> TEST</i>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You can also replace this using Regex without adding span or any other element in that button. Here is solution:
$('#test').on('click', function(e){
e.preventDefault();
const regex = /([^>]+)$/;
$(this).html($(this).html().replace(regex,'other'));
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="test"><i class="fa-2x fa-regular fa-floppy-disk"></i>test</button>
Another solution is to change text inside of <i> element:
$('#test').on('click', function(e){
$(this).find('i').text("Other");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="test"><i class="fa-2x fa-regular fa-floppy-disk">test</i></button>
Having this simple HTML:
<a id="show-modal-button" class="circle modal" href='#' >
<i class="fa fa-plus circle-inner-icon"></i>
</a>
And this script.
<script type="text/javascript">
window.addEvent('domready', function()
{
$('show-modal-button').onclick = function(ev) {
ev.preventDefault();
modalUrl = 'http://www.google.es'
$('show-modal-button').href = modalUrl;
console.log($('show-modal-button').href);
return false;
});
});
</script>
It doesnt work on the first click. The modal opens on the first click but nothing is shown (blank modal). If I close the modal and click on the buttom again, the modal shows the href page (in the example above, google) correctly.
I've read some other threads with the same problem and people solve it adding return false; but I add that line and still doesnt work.
The console.log prints the correct url on the first click.. I also tested with $('show-modal-button').addEvent('click', function (ev) { with no luck :(
Any ideas how to make this work on the first attemp?
In addition to other comments :
Selecting elements with their id in jquery is done by prepending "#" to the id
Changing an element's attribute in jquery is done by using the function attr(name, value)
Inside your click function, you can refer to your jquery element by using $(this)
See this working snippet :
$(function(){
$("#show-modal-button").click(function(e){
e.preventDefault();
var modalUrl = 'http://www.google.es';
$(this).attr('href', modalUrl);
console.log($(this).attr('href'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="show-modal-button" class="circle modal" href='#' >
<i class="fa fa-plus circle-inner-icon">show modal</i>
</a>
try this..
<script type="text/javascript">
$(function(){
$('show-modal-button').click(function(ev) {
ev.preventDefault();
modalUrl = 'http://www.google.es'
$('show-modal-button').href = modalUrl;
console.log($('show-modal-button').href);
return false;
});
});
</script>
I've this simple Fiddle where if a user clicks plus glyphicon, I show the collapsed content and change the glyphicon to 'minus' and vice-versa on click of minus glyphicon.
But, when I double click the plus glyphicon, the content shows and the glyphicon is not changed to minus. For the next single clicks, the content is shown when 'minus' glyphicon appears. How can I prevent the double click ?
HTML
<div class="divcontainer">
<span>Click -----></span>
<span class="glyphicon glyphicon-plus" data-toggle="collapse" href="#collapsecontent"></span>
</div>
<div class="collapse" id="collapsecontent">
content
</div>
jQuery
$(document).ready(function () {
$('.glyphicon-plus').click(function () {
$(this).parent("div").find(".glyphicon-plus")
.toggleClass("glyphicon-minus");
});
});
Instead of 'onclick' function use collapse hide and show events. Please refer below code:
$(document).ready(function() {
$('#collapsecontent').on('show.bs.collapse', function(args) {
onContainerClick($(this).parent());
});
$('#collapsecontent').on('hide.bs.collapse', function(args) {
onContainerClick($(this).parent());
});
});
function onContainerClick(args) {
$(args).find(".glyphicon-plus")
.toggleClass("glyphicon-minus");
}
add dblclick event handler too
$(document).ready(function () {
$('.glyphicon-plus').click(function () {
$(this).parent("div").find(".glyphicon-plus")
.toggleClass("glyphicon-minus");
});
$('.glyphicon-plus').dblclick(function () {
$(this).parent("div").find(".glyphicon-plus")
.toggleClass("glyphicon-minus");
});
});
.divcontainer{
background:aqua;
width:100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="divcontainer">
<span>Click -----></span>
<span class="glyphicon glyphicon-plus" data-toggle="collapse" href="#collapsecontent"></span>
</div>
<div class="collapse" id="collapsecontent">
content
</div>
just use your own jquery handler. Remove data-toggle attr and use this
$(document).ready(function () {
$('.glyphicon-plus').click(function () {
$('.collapse').slideToggle();
$(this).parent("div").find(".glyphicon").toggleClass("glyphicon-plus").toggleClass("glyphicon-minus");
});
});
I think it should work now.
try this
$(this).prop('disabled', true);
I have the following graphical button on my site:
<a href="#" class="addto_cart_btn">
<span id="btn_text">Click here to add to cart now</span>
</a>
I want to run a specific javascript script when clicked (current value #) to run some javascript - the javascript code essentially generates a popup iFrame with additional content in it.
What is the best approach for achieving this?
try this
<script type="text/javascript">
window.onload = function() {
document.getElementById("btn_text").onclick = function() {
// Do your stuff here
};
};
</script>
Or if you can use JQuery
<script type="text/javascript">
$(document).ready(function() {
$("#btn_text").click(function(){
// Do your stuff here
});
});
</script>
One approach is to add an onclick attribute
<a href="#" class="addto_cart_btn" onclick="someFunction()">
<span id="btn_text">Click here to add to cart now</span>
</a>
And then the javascript:
function someFunction(){
//do stuff
}
You should use OnClick attribute
<a href="#" class="addto_cart_btn" onclick="yourFunction();">
<span id="btn_text">Click here to add to cart now</span>
</a>
for plain javascript
window.onload = function(){
document.getElementById('btn_text').onclick = function(){
// do stuff;
}
}
for jQuery
jQuery(function($){
$('#btn_text').on('click', function(){
// do stuff
})
})