Develop Reference

How to stop Menu & Button enlarging & shrinking size on clicking (Wordpress)

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.

How can i call the same fancyapp [fancybox 3.5] javascript from more than one link?

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/

Sidebar closes when deleting element of array

I'm using mobile angular ui to open and close a sidebar. In this sidebar a user can search for persons and add or remove these from an array.
I have this repeat that shows the array of persons when clicking on the <a ...></> it closes the sidebar:
<li ng-repeat="recipient in persons.recipients">
<span class="wrapper">
<span class="imageWrap">
<span class="initials">
{{recipient.firstName.charAt(0)}}{{recipient.lastName.charAt(0)}} </span>
</span>
<i class="fa fa-trash-o" aria-hidden="true"></i>
<span class="details">
<span class="info">
{{recipient.firstName}} {{recipient.lastName}}
<span class="persnr">{{recipient.employeeID}}</span>
</span>
</span>
</span>
</li>
The above html snippet is from a directive that is in the sidebar.
The removeRecipient($index); function looks like this:
$scope.removeRecipient = function(index) {
$scope.persons.recipients.splice(index,1);
}
The function works but closes the sidebar and I can't figure out why it does this. So each time a user removes a recipient it has to swipe the sidebar open again. How do I keep this sidebar open?
References:
mobile angular ui: http://mobileangularui.com/docs/sidebars/
SOLUTION
I solved my problem by adding $event.stopPropagation(); in the ng-click right behind the removeRecipient($index); function.

From doc, there was one line.
You can put ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarLeft'
inside the sidebar to make it close after clicking links inside them.
so may be you can use that or you can use or you can do like below.
e.stopPropagation()
for that you need to pass $event in
<i class="fa fa-trash-o" aria-hidden="true"></i>
so in code, you can write.
$scope.removeRecipient = function(index,e) {
if(e){
e.stopPropagation()
}
$scope.persons.recipients.splice(index,1);
}
I didn't used same tool, but may be this is issue.

Non-Bootstrap Collapsible Navbar

I'm trying to set-up my code so that when I click a link with the id of "#toggleNav"
<i class="fa fa-bars"></i>
It will add or remove the ".hidden" class of an element with an id of "#nav"
<ul class="navbar navCollapse" id="nav">
<span class="links">
<a href="#">
<li>Home</li>
</a>
...
".hidden" class:
*.hidden {
display: none;
}
So that it will act as a toggle on a navigation bar, but since I have this only on if the screen size is less than 600px, I would like it to default to .hidden ONLY if the screen is 599px or less, AND default to shown ONLY if the size is 600px or more.
If there's either an easier way to do it, or I need a plugin, I would be grateful for any responses that would help.
And I don't want to use any bootstrap or other frameworks - preferably just CSS or javascript, and maybe jQuery.
Thanks!

You can do this via css media queries, like so:
#media (max-width: 600px) {
*.smhidden {
display: none;
}
}
Add this class to your element so that even when the .hidden class is gone, if the screen size is less than 600, the .smhidden class will still be hiding the element.
EDIT
You can set defaults via JavaScript by using:
var windowWidth = window.innerWidth;
if (windowWidth < 600) {
$('#nav').addClass('hidden');
}

I just found a way to do this, but I would rather not use two separate buttons.
<span class="float-right">
<i class="fa fa-bars"></i>
<a href="#" id="toggleNavHide" class="hidden"><i class="fa
fa-bars"></i></a>
</span>
And the repetitive js...
$(document).ready(function(){
$("#toggleNavShow").click(function(){
$("#nav").show();
$("#toggleNavShow").hide();
$("#toggleNavHide").show();
});
$("#toggleNavHide").click(function(){
$("#nav").hide();
$("#toggleNavShow").show();
$("#toggleNavHide").hide();
});
});
If there's a way to just use one button I'd love to know... I'm not all that experienced with js.

jQuery - Mark a notification as read

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"; ?>">