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
Related
help me get the value from the button, I can not
my code:
<i class="fas fa-shopping-cart"></i> press
<script>
funk = (a) => {
console.log(a.value)
}
</script>
Set a value in HTML and retrieve it on click with getAttribute
<i class="fas fa-shopping-cart"></i> press
const funk = (a) => {
console.log(a.getAttribute("value"))
}
There's a few issues in your code:
The link will transfer the page, so you probably need to preventDefault
a elements don't have a value attribute. Use a data attribute to add custom metadata to an element
Use an unobtrusive event binding, not outdated onclick attributes
Here's a corrected version using plain JS:
document.querySelectorAll('.price-button').forEach(el => {
el.addEventListener('click', e => {
e.preventDefault(); // stop the page transfer
const button = e.target;
console.log(button.dataset.value);
});
});
<a href="#" data-value="123" class="price-button">
<i class="fas fa-shopping-cart"></i>
press
</a><br />
<a href="#" data-value="456" class="price-button">
<i class="fas fa-shopping-cart"></i>
press
</a>
And the same thing in jQuery, as you tagged that as well:
jQuery($ => {
$('.price-button').on('click', e => {
e.preventDefault(); // stop the page transfer
const $button = $(e.target);
console.log($button.data('value'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<a href="#" data-value="123" class="price-button">
<i class="fas fa-shopping-cart"></i>
press
</a><br />
<a href="#" data-value="456" class="price-button">
<i class="fas fa-shopping-cart"></i>
press
</a>
On my site I have a menu to the right of the navigation bar. It displays the search when it is available on the current page.
I want to display an icon when the search is available.
All search blocks have the class .views-exposed-form and appear in #navbar-collapse-second
I added to my icon, the class .icon-navbar-alert-disable which is used to hide the icon.
How to remove the .icon-navbar-alert-disable class when the .views-exposed-form class is present in #navbar-collapse-second ?
Here is the css code to hide the icon :
.region-navigation-menu-second .navbar-toggle-second .icon-navbar-alert-disable {
display: none;
}
Here is the code of the button of my manu with the icon :
<div{{ attributes }}>
<a class="navbar-toggle-second collapsed" data-toggle="collapse" data-target="#navbar-collapse-second" aria-expanded="false">
<div class="icon-navbar">
<span class="fa-layers fa-3x">
<i class="far fa-circle"></i>
<span class="navbar-icon-open">
<i class="fas fa-filter" data-fa-transform="shrink-9"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times" data-fa-transform="shrink-8"></i>
</span>
</span>
</div>
<div class="icon-navbar-alert icon-navbar-alert-disable">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-filter fa-stack-1x fa-inverse"></i>
</span>
</div>
</a>
</div>
Here is the page concerned, this is the menu on the right :
https://www.s1biose.com/boutique/ma-boutique-pro
I started a JS code but it is not complete :
$('#navbar-collapse-second') ???.views-exposed-form??? {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
});
UPDATE
(function ($) {
if ($('#navbar-collapse-second').hasClass('views-exposed-form')) {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
} else {
$('#block-togglenavigationsecond').addClass('icon-navbar-alert-disable');
};
})(window.jQuery);
enter image description here
Are you looking for the hasClass selector in jQuery?
If so wrap it in a if statement and inside you can show the result you'd like from it;
if ($('#navbar-collapse-second').hasClass('views-exposed-form') === false) {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
} else {
$('#block-togglenavigationsecond').addClass('icon-navbar-alert-disable');
};
I'm having trouble figuring out why my click event is not firing. I am trying to click on the trash can icon and have a function run that deletes the list element. After the click event, it fails to execute anything else in the script. It doesn't even console.log anything directly below. Below is the markup and my script.
HTML CODE
<div class="col-6">
<div class="js-list-item">
<h3 class="js-list-title"></h3>
<i class="fa fa-pencil" aria-hidden="true"></i>
<i class="fa fa-trash-o" aria-hidden="true"></i>
<p>Date: <span class="js-date"></span></p>
<p>Schedule: <span class="js-schedule"></span> at <span class="js-schedule-time">
</span></p>
</div>
</div>
javascript code
function handleDelete() {
$('.js-list-item').on('click', 'fa-trash-o', function(e) {
console.log('test');
e.preventDefault();
deleteShow(
$(e.currentTarget).closest('.js-list-item').attr('id')
);
});
}
The second parameter of the .on() function is a selector.
http://api.jquery.com/on/
Change:
$('.js-list-item').on('click', 'fa-trash-o', function(e) {
to:
$('.js-list-item').on('click', '.fa-trash-o', function(e) {
('click', 'fa-trash-o', function(e)
fa-trash-o is not a proper selector, use class or id
I want to add a class when clicking on a a tag inside a div.
When clicking on the I want to add the class "show".
I use this HTML:
<div class="liveChatContainer online">
<div class="actions">
<span class="item title">Need help?</span>
<i class="fa fa-smile-o"></i>Chat
<i class="fa fa-smile-o"></i>Call
<i class="fa fa-smile-o"></i>Email
</div>
Contact
</div>
See the JSFiddle: http://jsfiddle.net/8wLze4rf/2/
I edited your fiddle, i think this is what you want to do. On click the class gets added and on another click (anywhere on the page) it gets removed.
$(".liveChatLabel").click(function(){
$(".liveChatContainer").addClass("show");
});
$('html').click(function() {
$(".liveChatContainer.show").removeClass("show");
});
$('.liveChatContainer').click(function(event){
event.stopPropagation();
});
JSFiddle
Add jQuery library.
Use this script:
$(document).ready(function() {
$('.liveChatContainer a').click(function() {
$('.actions a').removeClass('show');
$(this).addClass('show');
return false;
});
});
HTML
<div id="liveChatContainer" class="liveChatContainer online">
<div class="actions">
<span class="item title">Need help?</span>
<i class="fa fa-smile-o"></i>Chat
<i class="fa fa-smile-o"></i>Call
<i class="fa fa-smile-o"></i>Email
</div>
<a id="liveChatLabel" href="#" class="liveChatLabel">Contact</a>
</div>
JS
$(document).ready(function(){
$('#liveChatLabel').click(
function(){
$('.actions a').removeClass('show');
$('#liveChatContainer').toggleClass('show');
return false;
});
});
$(document).mouseup(function (e)
{
var container = $("#liveChatContainer");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.removeClass('show');
}
});
JSFiddle
I've used toggle to add and remove the class, here's a fiddle of it:
http://jsfiddle.net/8wLze4rf/8/
$(document).ready(function(){
var button = $('.liveChatContainer');
button.on("click",function(){
button.toggleClass('show');
});
});
$(document).click(function(e) {
$('.liveChatContainer').removeClass('show');
});
$('.liveChatContainer a').click(function(e) {
$('.liveChatContainer').addClass('show');
e.stopPropagation();
});
$('.liveChatContainer').click(function(e) {
e.stopPropagation();
});
.show {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="liveChatContainer online">
<div class="actions">
<span class="item title">Need help?</span>
<i class="fa fa-smile-o"></i>Chat
<i class="fa fa-smile-o"></i>Call
<i class="fa fa-smile-o"></i>Email
</div>
Contact
</div>
use setAttribute("class","actions"); to your link in java script
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>