Hi everyone I'm trying to figure out how to add a font awesome icon with a pulse feature inside this script I'm a newbie so I don't really know what I'm doing.
I want to edit before the text that says call or zoom
window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/ezrelomd?background_color=fdf8f2&primary_color=56c4c5', text: 'Call or ZOOM', color: '#56c4c5', textColor: '#ffffff', branding: false }); }
Any ideas would be great
You should be able to simply add the Font Awesome HTML snippet to the text blurb.
Make sure to escape quotes if needed. And of course, check that you've linked Font Awesome's css file.
For example, this snippet works for me (I picked a phone icon with fa-pulse animation):
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<!-- Calendly -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Initialize floating badge with FA icon with some animation -->
<script type="text/javascript">window.onload=function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/ezrelomd?background_color=fdf8f2&primary_color=56c4c5', text: '<i class="fas fa-phone fa-pulse"></i> Call or ZOOM', color: '#56c4c5', textColor: '#ffffff', branding: false }); }</script>
Related
I've got a question that might seem pretty simple or stupid, but I'm a kind of new to this thing so...
I need to get the image name (filename) of the picture that is currently being displayed in the carousel (created with Slick). There's a carousel showing the only one image at a time and containing let's say 7 images.
Could you please advise?
Thanks!
Using afterChange event, you can track the active slide right after the transition is made. Then $(slick.$slides.get(currentSlide)) gives the whole slide element where we try to find the image ant it's src attribute.
$(document).ready(function(){
$('.slider').slick({
dots: true,
autoplay: true,
autoplaySpeed: 1000,
infinite: true,
speed: 1000,
slide: 'div',
cssEase: 'linear'
});
$('.slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
//Here I do split the `src` attribute value because I'm using an absolute path.
// $(slick.$slides.get(currentSlide)) gives the whole slide
var CurrentImg=$(slick.$slides.get(currentSlide)).find('img').attr('src').split('/').pop();
console.log(CurrentImg)
});
});
img{
width:200px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="slider">
<div><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Wikipedia-logo_ka.png">Wiki</div>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/HTML5_oval_logo.png">Html5</div>
<div><img src="https://upload.wikimedia.org/wikipedia/fr/b/bb/SoundCloud_logo.png">SoundCloud</div>
</div>
How to disable click on .lg-img-wrap?
I have tried lot of solutions but none seems to work on lightgallery.
Tried 1
$(".lg-img-wrap").children().unbind('click');
Tried 2
$(".noclick").click(function(e) {
e.preventDefault();
e.stopPropagation();
});
Tried 3
pointer-events:none //to a css property
I would like to prevent closing of light gallery when user clicks outside the image.
Black margin is visible when image ratio is not same as that of screen size.
Please check image below for reference.
Light Gallery I am using: https://github.com/sachinchoolur/lightGallery
Add closeable: false to your lightGallery initialization. Here's their API describing that feature.
Working Codepen
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/css/lightgallery.css" integrity="sha512-I/g40Mx7U2Oepd3iHIpQRqdQGJ3vgdw0ix8LxGxX9zKv1MDizjD6dRcJ3PC1qpyfkj4rikVNcpBKcnmuJWUaTQ==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/js/lightgallery.min.js"></script>
</head>
<div id="lightgallery">
<a href="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150" />
</a>
</div>
<script type="text/javascript">
$('#lightgallery').lightGallery({
closable: false
});
</script>
</html>
$(".lg-img-wrap").off("click");
or
$(".lg-img-wrap").prop("disabled",true);
or
$('.lg-img-wrap"').click(false);
I hope it works for you. good work.
I am using materialize in my Vue.js project I am having issues with displaying materialize's datepicker this is the code i have.
<form class="form">
...
<input type="text" class="datepicker" />
</form>
data() {
return {
date: null
};
},
mounted() {
$(document).ready(function() {
$(".datepicker").datepicker();
});
}
I am new to Vue.js so I apologize for the simplicity of my question So how do i get the datepicker to display and save it to a variable I have had the issue with materialize not displaying tabs properly also i don't know if i don't have something imported correctly. this is my html file.
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</script>
</body>
Looks like you forgot to load Materialize after jQuery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
I am attempting to customize links int a Google Maps info-bubble with Bootstrap and font awesome Icons.
I was able to use a list-group from bootstrap for my links in the info bubble successfully, but when I tried to add a font awesome Icon to the link it just does not show up.
<i class="fab fa-youtube"></i> Hiking 42 Miles along Michigan's Lake Superior (Adventure Archive)
I followed the code on this link here: https://fontawesome.com/v4.7.0/examples/
But when I test on my site the font awesome icon doesn't show up like in the example I followed.
Not sure what I am doing wrong....
Have you gotten the Font Awesome CDN in the <head> tags of your file as <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">? I don't know if you have issues with other icons in your website, but without that CDN, you may not be able to get your icons to show up! See Font Awesome's Troubleshooting Page.
What's your code so far? Do you have a parent <div class="list-group"> above your anchor tag to match the class attributes of your list-group-item list-group-item-action anchor tag (but this may just be hierarchy issue, not the cause of your Font Awesome icons not showing up)? Still, check out this article by Bootstrap, under "Links and Buttons" header. Play around with it!
You are follow FontAwesome v4.7.0 then you can't use fab class because of this is belong to FontAwesome v5+. So you just need to replace fab fa-youtube to fa fa-youtube.
function initMap() {
var lakeShore = {lat: 47.7231, lng: 86.9407};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: lakeShore
});
var contentString = `<h6>Lake Shore Trail</h6>
<div class="list-group">
<i class="fa fa-youtube"></i> Hiking 42 Miles along Michigan's Lake Superior (Adventure Archive)
</div>`;
var infowindow = new google.maps.InfoWindow({
content: contentString,
// maxWidth: 320
});
var marker = new google.maps.Marker({
position: lakeShore,
map: map,
title: 'Lake Shore Trail'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
</script>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
Check either you font awesome link <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/fontawesome.min.css"> is working or not as i can see one ERROR in you console window
i am programming a website with Bootstrap and the family/forest one page template (on themeforest.net), i customized the portfolio section of this template to have a video popup when we click on the thumbnail (instead of a full image popup originally).
The popup works perfectly with the 'mfp-iframe' class and the 'video/video_name.mp4' href, so here the code:
I don't wanna use a mp4 video but a vimeo video and it s not working when i replace the href 'video/video_name.mp4' by a vimeo link 'https://vimeo.com/118901221' or a embed vimeo link 'https://player.vimeo.com/video/118901221'
Please somebody can help to resolve that issue.
You just need the following codes below and try to analyze my problem about Vimeo last time MAGNIFIC-POPUP: Embed videos from Vimeo on my site using magnefic popup. If ever you encounter my problem in Vimeo.
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Fontawesome -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Magnific Popup CSS-->
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
</head>
<body>
<a class="vimeo-video-1" href="#">CLICK ME TO POP-UP 1 VIDEP</a><br>
<a class="vimeo-video-more" href="#">CLICK ME TO POP-UP MORE VIDEO</a>
<!--Jquery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- Magnific Popup JS -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
</body>
</html>
<script type="text/javascript">
$('.vimeo-video-1').magnificPopup({
items: [
{
src: 'https://player.vimeo.com/video/118901221',
type: 'iframe' // this overrides default type
}],
gallery: {
enabled: false
},
type: 'image'
});
//MORE VIMEO VIDEO
$('.vimeo-video-more').magnificPopup({
items: [
{
src: 'https://player.vimeo.com/video/118901221',
type: 'iframe' // this overrides default type
},
{
src: 'https://player.vimeo.com/video/211690338',
type: 'iframe' // this overrides default type
},],
gallery: {
enabled: true
},
type: 'image'
});
</script>
You need to supply the direct link to the video. In the case of vimeo, this is only available if you've paid for a premium account. A solution would be to re-upload the video to YouTube and then get the direct link by doing this:
Copy the full URL to the video on YouTube.
Install VLC Media Player and open it.
Hit Media (menu)... and Open Network Stream.
Paste your video URL there and hit Play.
Hit Tools (menu)... Media Information. You'll find the direct URL to the video there. Use this in your website.
If you want to actually embed from YT or vimeo, check this out:
$(document).ready(function() {
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a>
From the documentation.
And this question.