I found this really cool Toolbar.js JQuery library that I would love to add to my application, though the instructions on the page seem pretty straightforward, I am having issues getting it to work.
Find below my simple HTML file put together as per instructions:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/jquery.toolbar.js"></script>
<link href="css/jquery.toolbar.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script>
$(document).ready(function() {
$('#gear').toolbar({
content: '#toolbar-options',
position: 'top'
});
});
</script>
</head>
<body>
<header>
<h1>Testing toolbar.js</h1>
</header>
<div class="btn-toolbar btn-toolbar-warning">
<i class="fa fa-cog"></i>
</div>
<div id="toolbar-options" class="hidden btn-toolbar btn-toolbar-primary">
<i class="fa fa-plane"></i>
<i class="fa fa-car"></i>
<i class="fa fa-bicycle"></i>
</div>
</body>
</html>
The browser console does not render any error messages.
The HTML code renders the following image, but doesn't render the tooltips as desired:
Help!
What am I missing or doing wrong?
Your help is appreciated.
Prevent multiple elements with the same ID
id="gear"
Prevent elements with multiple ID's
id="toolbar-options gear"
Add toolbar css CDN link (instead off local file)
<link hef="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar#1.0.1/jquery.toolbars.css" rel="stylesheet"/>`
After fixing those issues, it still doesn't seem to work.
It's appears the position: 'bottom' causes the error.
Setting it to top works as you can see in this demo:
$('#gear').toolbar({
content: '#toolbar-options',
position: 'top'
});
.hidden { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar#1.0.1/jquery.toolbar.js"></script>
<link href="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar#1.0.1/jquery.toolbars.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<header>
<h1>Testing toolbar.js</h1>
</header>
<div class="btn-toolbar btn-toolbar-warning" id="gear" >
<i class="fa fa-cog"></i>
</div>
<div id="toolbar-options" class="hidden btn-toolbar btn-toolbar-primary">
<i class="fa fa-plane"></i>
<i class="fa fa-car"></i>
<i class="fa fa-bicycle"></i>
</div>
The error is thrown in getCoordinates which shows:
getCoordinates: function( position, adjustment) {
var self = this;
self.coordinates = self.$elem.offset();
if(position == 'top') {
return coordinates = {
left: self.coordinates.left-(self.toolbar.width()/2)+(self.$elem.width()/2),
top: self.coordinates.top-self.$elem.height()-adjustment,
}
}
if(position == 'left') {
return coordinates = {
left: self.coordinates.left-(self.toolbar.width()/2)-(self.$elem.width()/2)-adjustment,
top: self.coordinates.top-(self.toolbar.height()/2)+(self.$elem.height()/2),
}
}
},
Since the function does not return anything if the value is bottom, it makes sense that an error is thrown.
Related
onDragEnter and onDragLeave are called, but not onDrop.
evreything works when run in firefox and chrome but not electron
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/upload.css">
<link rel="stylesheet" href="css/popups.css">
<script src="https://kit.fontawesome.com/8edc1bc1b3.js" crossorigin="anonymous"></script>
<title>popup test</title>
</head>
<body>
<!-- popups sit here -->
<div class="uploadTestPopup">
<!-- upload / folder popup -->
<div class="uploadSelector" data-showing="content">
<i class="uploadSelectorItem" onclick="">content</i>
<i class="uploadSelectorItem" onclick="">folder</i>
</div>
<div id="uploadContentArea" class="uploadContentArea" ondrop="FileDrop(event)" ondragenter="allowDrop(event)" ondragleave="dropLeave(event)" ondragend="dragEnd(event)">
<!-- <i id="uploadIcon" class="fa-solid fa-circle-plus uploadIcon"></i>
<i class="uploadText">well upload something</i> -->
</div>
<div class="tagArea">
<div class="tagAreaDevider">
<input type="text">
</div>
<div class="tagAreaDevider">
<i class="tag">tag</i>
<i class="tag">hello</i>
<i class="tag">hello</i>
</div>
<div class="tagAreaDevider">
<i class="tag">hello</i>
<i class="tag">hello</i>
</div>
</div>
<div class="uploadArea">
<i class="uploadButtonCancel">exit</i>
<i class="uploadButtonAccept">done</i>
</div>
</div>
<script src="./js/upload.js"></script>
</body>
</html>
upload.js
function FileDrop(e) {
e.preventDefault();
e.stopPropagation();
console.log('drop call')
}
function allowDrop(e) {
e.preventDefault();
e.stopPropagation();
document.getElementById('uploadContentArea').style = 'background-color: blue;'
console.log('allow event')
}
function dropLeave(e){
e.preventDefault();
e.stopPropagation();
document.getElementById('uploadContentArea').style = ''
console.log('drag leave event')
}
i've tied adding event listeners, document.body.onDrop and doing it within the html doc.
but each attempt it never logged the drop call to the console.
only works in the browser.
is there some sort of electon setting or package i need to install???
I want to ask for help from you guys, I have tried coding my javascript so that it doesn't display the results from the input but the results I get are actually messy, so I attach my code with the original version that I haven't edited and it's still tidy, but the input is still displayed in address bar in the web browser.
Next is my code version before revision: (JavaScript)
(function ($) {
"use strict";
/*==================================================================
[ Validate ]*/
var input = $('.validate-input .input100');
$('.validate-form').on('submit',function(){
var check = true;
for(var i=0; i<input.length; i++) {
if(validate(input[i]) == false){
showValidate(input[i]);
check=false;
}
}
return check;
});
$('.validate-form .input100').each(function(){
$(this).focus(function(){
hideValidate(this);
});
});
function validate (input) {
if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
return false;
}
}
else {
if($(input).val().trim() == ''){
return false;
}
}
}
function showValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).addClass('alert-validate');
}
function hideValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).removeClass('alert-validate');
}
/*==================================================================
[ Simple slide100 ]*/
$('.simpleslide100').each(function(){
var delay = 7000;
var speed = 1000;
var itemSlide = $(this).find('.simpleslide100-item');
var nowSlide = 0;
$(itemSlide).hide();
$(itemSlide[nowSlide]).show();
nowSlide++;
if(nowSlide >= itemSlide.length) {nowSlide = 0;}
setInterval(function(){
$(itemSlide).fadeOut(speed);
$(itemSlide[nowSlide]).fadeIn(speed);
nowSlide++;
if(nowSlide >= itemSlide.length) {nowSlide = 0;}
},delay);
});
})(jQuery);
please help me also to place it in the coding that I have made, apologize that I am still a beginner and I'm confused how to do it anymore, all the help will be appreciated :)
This is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AN Newsletter | Subscribe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body>
<div class="flex-w flex-str size1 overlay1">
<div class="flex-w flex-col-sb wsize1 bg0 p-l-70 p-t-37 p-b-52 p-r-50 respon1">
<div class="wrappic1">
<a href="../main/index.html">
<img src="images/icons/logo.png" alt="IMG">
</a>
</div>
<div class="w-full p-t-100 p-b-90 p-l-48 p-l-0-md">
<h3 class="l1-txt1 p-b-34 respon3">
Post Box
</h3>
<p class="m2-txt1 p-b-46">
Follow me for update now!
</p>
<form class="contact100-form validate-form m-t-10 m-b-10" action="../success/success.html">
<div class="wrap-input100 validate-input m-lr-auto-lg" data-validate = "Email is required: ex#abc.xyz">
<input class="s2-txt1 placeholder0 input100 trans-04" type="text" name="email" placeholder="Email Address">
<button class="flex-c-m ab-t-r size2 hov1 respon5">
<i class="zmdi zmdi-long-arrow-right fs-30 cl1 trans-04"></i>
</button>
<div class="flex-c-m ab-t-l s2-txt1 size4 bor1 respon4">
<span>Subcribe Now:</span>
</div>
</div>
</form>
</div>
<div class="flex-w flex-m">
<span class="m2-txt2 p-r-40">
Follow me
</span>
<a href="https://www.facebook.com/stevenWilliamG" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-facebook"></i>
</a>
<a href="https://twitter.com/AdrikAleandra" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.instagram.com/audynaufal7/" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/in/audy-naufal-ghiffari-ceh-875072141/" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
<div class="wsize2 bg-img1 respon2" style="background-image: url('images/bg01.jpg');">
</div>
</div>
<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/tilt/tilt.jquery.min.js"></script>
<!--===============================================================================================-->
<script src="js/main.js"></script>
</body>
</html>
P.S:
please don't block me, I'm still new and I still have to learn this platform and I still have to work on my project, so I think this platform will be very useful for me to complete my project, thank you
If you are referring to browser address bar with result of your input email address that looks like this:
/success/success.html?email=xxxx
This is because you haven't specified the method of your form so form uses PHP GET, and this is normal to pass the values on other page.
If you do not want to display this data, you should specify your form submit method like this:
<form class="contact100-form validate-form m-t-10 m-b-10"
action="../success/success.html" method="POST">
Keep in mind you have to fetch data on other side as POST also.
Read more about this here.
Replace GET method with POST method.
I've written this function to switch between font awesome arrows:
function toggleClass() {
$('.fa-arrow-up').on('click', function (event) {
$('.info-section').toggleClass('hidden');
$(this).addClass('fa-arrow-down').removeClass('fa-arrow-up')
// console.log($(this))
})
$('.fa-arrow-down').on('click', function (event) {
$('.info-section').toggleClass('hidden');
$(this).addClass('fa-arrow-up').removeClass('fa-arrow-down')
console.log($(this))
})
}
$(toggleClass);
On the first click when the class is fa-arrow-up it works, when the class is fa-arrow-down and I click it for a second time, it is toggling the .info-section, but not replacing the fa-arrow-down with fa-arrow-up. Any suggestions on why this function is not working both ways?
UPDATE adding HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<i class="fas fa-arrow-up" aria-hidden="false"></i>
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c79911a95b.js" crossorigin="anonymous"></script>
</body>
</html>
Hope this help you.
$('.fa-arrow-up').on('click', function(event) {
$(this).toggleClass('fa-arrow-down fa-arrow-up')
})
<i class="fas fa-arrow-up" aria-hidden="false"></i>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://kit.fontawesome.com/c79911a95b.js"></script>
I found a solution for the issue.
HTML
<button class="arrow-icon" type="button">
<i class="fa fa-arrow-up"></i>
<i class="fa fa-arrow-down"></i>
</button>
CSS
.arrow-icon .fa-arrow-up{
display: inline-block;
}
.arrow-icon .fa-arrow-down{
display: none;
}
.arrow-icon.active-icon .fa-arrow-up{
display: none;
}
.arrow-icon.active-icon .fa-arrow-down{
display: inline-block;
}
JS
$(function(){
$('.arrow-icon').on('click', function(){
$('.info-section').toggleClass('hidden');
$(this).toggleClass('active-icon');
});
});
i was coding my page and i use a template. I don't understand javascript very well so im getting this error only when i go to portfolio.html page and switch to the mobile view. in the index.html is not showing any error. index page uses the nav links like: <li>Portfolio</li> and works right. in the portfolio page navlinks i wanted to go to other file like this:<li>Inicio</li>.
my code give this error:
Javascript Error Uncaught TypeError: Cannot read property 'top' of
undefined
any tips to solve?
my html:
<html lang="pt-br">
<head>
<title>Nova Pintura</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">enter code here
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link href="https://fonts.googleapis.com/css?family=Dosis|Oswald&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
</div>
<header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center">
<div class="col-6 col-xl-2">
<h1 class="mb-0 site-logo">
<a href="index.html">
<img src="images/logo/np.png" width="200" height="55" alt=""></img>
</a>
</h1>
</div>
<div class="col-12 col-md-10 d-none d-xl-block">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li>Inicio</li>
<li>Sobre Nós</li>
<li>Portfolio</li>
<li>Serviços</li>
<li>Contato</li>
</ul>
</nav>
</div>
<div class="col-6 d-inline-block d-xl-none ml-md-0 py-3" style="position: relative; top: 3px;"><a href="#"
class="site-menu-toggle js-menu-toggle float-right"><span class="icon-menu h3"></span></a></div>
</div>
</div>
</div>
the js function that is giving error :
// navigation
var OnePageNavigation = function() {
var navToggler = $('.site-menu-toggle');
$("body").on("click", ".main-menu li a[href^='#'], .smoothscroll[href^='#'],.main-menu li a[href^='index.html'], .smoothscroll[href^='index.html'], .site-mobile-menu .site-nav-wrap li a", function(e) {
e.preventDefault();
var hash = this.hash;
$('html, body').animate({
'scrollTop': $(hash).offset().top
}, 300, 'easeInOutExpo', function(){
window.location.hash = hash;
});
});
};
OnePageNavigation();
var siteScroll = function() {
$(window).scroll(function() {
var st = $(this).scrollTop();
if (st > 100) {
$('.js-sticky-header').addClass('shrink');
} else {
$('.js-sticky-header').removeClass('shrink');
}
})
};
Cannot read property 'propName' of undefined is very common error. This is pretty self explanatory. In other words an object doesn't contain a property because it doesn't exist. Quickly scanning your code 'scrollTop': $(hash).offset().top is the issue. Ensure that you are checking for the property before using it.
Below snippet will ensure that your object exist with the property
'scrollTop': $(hash) &&& $hash.offset() && $hash.offset().top ? $hash.offset().top : aDefaultValue; ///You should assign your own default value
Today I faced the same problem (and the code was exactly the same as yours) and I managed to solve the problem just by correcting one of the solution proposals above:
Replace
'scrollTop': $(hash).offset().top
Per
'scrollTop': $(hash) && $hash.offset() && $hash.offset().top && $hash.offset().top(0)
If you work with any language in which you need to change the parameters of href ="", don't forget to change this in the script.
FOR EXAMPLE, if I work with django I will have to use href = "{% url 'index'%}" then you would have to do the following:
Replace [href^='#']
Per [href^='{% url']
(Since my reference between pages will always have to start with "{% url)
I hope I helped although so much time has passed and you probably have already found a solution to it: D
I'm having a very confusing problem using classList.toggle and Font Awesome icons. I want my hamburger menu to change to an X when clicked and I'm attempting to use a JavaScript function to accomplish this. I just can't get it to work right. The weird thing is, when I set the X as the default icon, and then change the icon class to the hamburger menu upon click, it works perfectly fine. Here is my working code, changing the X to a hamburger:
function myFunction(x) {
x.classList.toggle("fa-bars");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
<i onclick="myFunction(this)" class="fa fa-times"></i>
</div>
That works fine. But when I try to reverse the order, changing a hamburger to an X, it doesn't work. Here's that code:
function myFunction(x) {
x.classList.toggle("fa-times");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
<i onclick="myFunction(this)" class="fa fa-bars"></i>
</div>
I've got to be missing something. What is it?!
When you do toggle("fa-times"), it doesn't remove the fa-bars class, it just adds or removes the fa-times class. And when the icon has class="fa fa-bars fa-times", the fa-bars class has priority, so you see the hamburger.
You need to goggle both classes to make it work reliably. This will work no matter which class you set initially.
function myFunction(x) {
x.classList.toggle("fa-times");
x.classList.toggle("fa-bars");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
<i onclick="myFunction(this)" class="fa fa-bars"></i>
</div>
You need to remove the old bars two , you can toggle the two classes and that's will work perfect at any order
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="test">
<i onclick="myFunction(this)" class="fa fa-bars"></i>
</div>
<script>
function myFunction(x) {
x.classList.toggle("fa-times");
x.classList.toggle("fa-bars");
console.log(x.classList)
}
</script>
</body>