I am working with bootstrap and I found a really good looking admin template. This template offers the possibility to show specific notifications at the main navigation. If I click on the notification icon, a small popup appears where I can see the notification.
You can see it here:
So I entered the green checkboxes on the left and if a user clicks on a checkbox, the notification is marked as read and dissapears from the notification panel. So far so good my problem is that I solved this solution with PHP and the complete page reloads once I click on the green checkbox. I am now looking for a jQuery solution, so that the page does not need to reload itself once the green checkbox is checked. So if a user clicks on the green checkbox, the notification should disappear without reloading the page.
My current code is:
<?php
<ul class='dropdown-menu dropdown-navbar'>
<li>
<a href='./index.php?func=showsms&id=".$msg["id"][$x]."&sid=$sid' target='_blank' class='clearfix'>
<div class='col-sm-3'>
<span class='msg-time'>
<a class='btn btn-success btn-xs' href='./index.php?func=$func&read_sms=".$msg["id"][$x]."&sid=$sid' role='button'><i class='ace-icon fa fa-check bigger-110 icon-only'></i></a>
</span>
</span>\
</div>
<div class='col-sm-9'>
<a href='#messagebox_".$msg["id"][$x]."' role='button' class='green' data-toggle='modal'>
<span class='msg-body'>
<span class='msg-title'>
<span class='blue'>".$sender["firstname"][0]." ".$sender["lastname"][0].":</span>
$msg["smstitle"][$x]
</span>
<span class='msg-time'>
<i class='ace-icon fa fa-clock-o'></i>
<span>".date("d.m.Y H:i",$msg["time_created"][$x])."</span>
</span>
</a>
</div>
</li>
</ul>
?>
Can someone tell me how I need to change the code so that I have the same solution with jQuery effect? I am not good at coding with jQuery. Would be awesome if someone can help me and tell me what my code should look like.
Thanks,
Chris
What you have written is HTML and not PHP code! I believe there should be a class for changing it to a different colour (read notification). So, what you need to do is:
$(".dropdown-menu dropdown-navbar li a").click(function () {
$(this).closest("li").addClass("read");
// The above code will make the presentation look read.
// Now make it really read:
$.post("notification.php", {id: the_post_id, action: read});
return false;
});
Note: I didn't prevent the default action of following the link, because when you follow the link, it will trigger the read action right?
And I hope in PHP, when you render the HTML, you would do:
<li class="otherClass newClass type <?php if ($isRead) echo "read"; ?>">
Related
Ok, this is my very first question posted to this forum so please be kind.. :)
I'm using ASP.NET MVC 5 and I am trying to do a two step process when an icon is clicked.
Select the correct page
Scroll down to a certain section on that page.
Here is what I got so far:
<a class="sidebar-brand d-flex align-items-center justify-content-start" >
<div class="notification-bell" style="color:red">
<i class="fas fa-fw fa-bell fa-2x" title="Number of Unread Comments" alert-count=#ViewBag.TotalUnreadComments.ToString() onclick='scrollToElement("CommentSection");'></i>
</div>
</a>
And the Javascript
<script type='text/javascript'>
function scrollToElement(id) {
// Set correct page
window.location.replace("/TodoListDashboard");
//Get target
var target = document.getElementById(id).offsetTop;
//Scrolls to that target location
window.scrollTo(0, target);
}
</script>
The funny thing is that either of these actions work by themselves but they won't work together.
Any ideas would be greatly appreciated!!!
Ok, I feel kind of foolish but I figured out an easy fix...
For this problem, I just created a javascript function and added both items together like this:
<script type='text/javascript'>
function scrollToComments() {
window.location.replace("/TodoListDashboard#CommentSection");
}
</script>
Then I just changed my onclick call to:
<i class="fas fa-fw fa-bell fa-2x" title="Number of Unread Comments" alert-count=#ViewBag.TotalUnreadComments.ToString() onclick='scrollToComments();'></i>
My google tag manager wont fire when I click on the copy of the CTA Button. But it fires when I click the CTA Button area around the copy.
If I click "Talk to us now", GTM wont fire. But if I click the orange area, GTM will fire
GTM Trigger: Click All Elements - Click URL - Equals - https://annotationlabs.com/contact-us/
I
I am using Elementor to edit my wordpress website if that helps. Not sure what the error is.
My Website Code is below:
<a href="https://annotationlabs.com/contact-us/" class="elementor-button-link elementor-button elementor-size-sm elementor-animation-bob" role="button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-icon elementor-align-icon-right">
<i aria-hidden="true" class=" stm-right-arrow"></i> </span>
<span class="elementor-button-text">Talk to us now</span>
</span>
</a>
Additionally "_event" comes as "gtm.js" which isnt same as "gtm.click"
Will be really helpful if someone can help me with the fix?
All the Menu & Button where there are Anchor links bubble up & down when clicking them.
Eg, when I click the submit button, it becomes big and then back to original size.
When I click the menu, it becomes small and then back to original size.
This is one of the submit buttions:
<div class="elementor-button-wrapper">
<a href="#" class="elementor-button-link elementor-button elementor-size-sm" role="button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">CONTACT US</span>
</span>
</a>
</div>
Would you please let me know how to stop it?
I'm not good at coding, so it would be a big help if you could give me full code descriptions.
Thank you.
in case someone needs, I found the reason, :
I found .woocommerce-message a:hover,active in my css.
I deleted active and solved the problem.
I have a code like this :
<div id="logreg" style="display: none;width:100%;max-width:660px; height:450px;" class="logreg">
my content
</div>
and i need use in many links on my site like this :
<a data-fancybox="logreg" data-src="#logreg" href="javascript:;" class="btnReg float-right">
Register
</a>
<a data-fancybox="logreg" data-src="#logreg" href="javascript:;">
<i class="fas fa-user"></i>
</a>
but doesn't work too many links, only one link work :-(
Please help me.
You are creating gallery that contains two items and both items refer to the same content. Therefore simple use different value for data-fancybox element to not create a group and everything will work fine, demo - https://jsfiddle.net/tecnw6x7/
bit of a variation on a question I've asked before but the issue is this. We want to show a cart dropdown on the click of an 'add to cart' button. The issue is that knockout and jquery don't seem to be playing nice together with the click dispatch because when you click the button, something seems to prevent the drop down from showing. I am sure I am doing something wrong. Here's the code. I've spent way too much time on this and about to throw my computer :). It works if you just do the event on the console (of course).
HTML for the button and cart that needs to be shown
Add to Cart
More Info
<li id="cart-nav" class="nav-menu cart">
<a class="first" href="#">
Cart (<span data-bind="text:cartTotalItems">19</span>)
<div class="caret">
<i class="fa fa-caret-right"></i>
<i class="fa fa-caret-down"></i>
</a>
</li>
JS
self.addProductToCart = function(data, event) {
var $productNotification = $(event.target).prev().children('.product-notification');
ax.Cart.addCartItem({product_id:data.id, name:data.name, description:data.description});
self.openCartMenu();
$productNotification.addClass('rise');
$productNotification.on('animationend',function() {
$(this).removeClass('rise');
});};
self.openCartMenu = function () {
$('#cart-nav').find('a.first').click();};