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>
Related
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 am calling showedit function with argument. But when i alert it in the function it is showing partial value.
Here is the HTML code:
<a href="javascript:void(0)" onclick="showedit(856478546521458789);">
<i class="fa fa-pencil-square-o" aria-hidden="true" style="font-size: 20px;float: right;"></i>
</a>
Here is the Javascript code:
function showedit(id) {
alert(id);
document.getElementById("update_status_" + id).style.display = "block";
document.getElementById("status_" + id).style.display = "none";
}
Can you tell me what is the problem?
Send the argument as a string. See the code snippet below:
<a href="javascript:void(0)" onclick="showedit('856478546521458789');">
<i class="fa fa-pencil-square-o" aria-hidden="true" style="font-size: 20px;float: right;"></i>
</a>
It is happening because it is exceeding JavaScript's MAX_INT value.
$(document).ready(function() {
setInterval(function() {
$("#appointment").html('<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-bell fa-fw"></i><span class="badge" prettydate data-date-format="YYYY.M.D h:m:s"><?php echo $date;?></span> <i class="fa fa-caret-down"></i></a>');
}, 1000);
});
I have used prettydates jquery to show the time in a way that it shows how long ago.. (https://fengyuanchen.github.io/prettydate/)
but I have inserted this html tag after loading the full script so i couldn't get the actual(long ago..) part I actually get the date that is printed by the php. It doesn't change.. how can i make it?
Prettydate has an autoUpdate option designed for what you're doing.
$(".prettydate-auto-update").prettydate({ autoUpdate: true, duration: 1000 });
Here's a js fiddle as an example.
https://jsfiddle.net/y7bu12kk/2/
You can try manually initiate it:
$(document).ready(function() {
setInterval(function() {
$("#appointment").html('<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-bell fa-fw"></i><span class="badge prettydate" prettydate data-date-format="YYYY.M.D h:m:s"><?php echo $date;?></span> <i class="fa fa-caret-down"></i></a>');
}, 1000);
$(".prettydate").prettydate();
});
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'));
});
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