Dev {Tricks}

You are here: Home / Archives for jQuery

by

How to add css class “current” for current active menu

How to add css-class active for menu items by using just javascript code?

(function($){

    $(function() { // Document Ready
        activeMenu();
    });

    // Functions
    
function activeMenu() {

    var url = window.location.pathname, 
        // create regexp to match current url pathname and remove trailing slash if present.
        urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
        // now grab every link from the navigation
        $('.menucss a').each(function(){ // Swap to your menu CSS Class or ID
            // and test its normalized href against the url pathname regexp
            if(urlRegExp.test(this.href.replace(/\/$/,''))){
                $(this).addClass('current'); // Add CSS Class 'current' to active link tag
            }
        });   
    }

})(jQuery);

Replace the “.menucss” with yours.

<ul class="menucss">
  <li><a>Home</a></li>
  <li><a>About</a></li>
  <li><a>Contact</a></li>
</ul>

That’s all!

by

Accordion Toggle

Toggle up and down arrows in a simple accordion widget

HTML Markup

<div class="accordion">
<div class="accordion-head">
<h4 style="font-size:40px;margin:6px 0 10px 0">⬇</h4>

</div>
<div class="accordion-body">
<p> <span><strong>أرسل بحثك للتحكيم معنا</strong></span> <span>“لا تضيع فرصة النشر في احد افضل المجلات العلمية العربية”</span> <button><a href="https://ajsrp.com/send/">أرسل بحثك هنا</a></button></p> 
</div>

</div>

CSS

/*Accordian*/
.accordion {
width: 100%;
position:fixed;
right:0px;
top:0;
z-index:9999;
}
.accordion .accordion-head {
color: #fff;
background-color: #EB5B31;
position: relative;
padding: 0 4px;
cursor: pointer;
border-top: 0;
float:right;
margin-right:20px;
border-left:5px solid #fff;
border-right:5px solid #fff;
border-bottom:5px solid #fff;
border-radius:0 0 10px 10px; 
}
.accordion .accordion-head * {
cursor: pointer;
}
.accordion .accordion-head:hover {
opacity: 1;
}
.accordion .accordion-head {
opacity: 0.85;
transition:0.5s;


}
.accordion .accordion-body {
padding: 2px 20px;
height: auto;
display: block;
background: #EB5B31;
color:#ffffff;
text-align:center;
}
.accordion-body button {
margin: 0;
padding: 6px 10px;
background: #111;
border: 0;
border-radius: 6px;
}
.accordion-body button a {
background: #111;
color: #fff;
}
.accordion-body p {
margin: 6px;
}

Javascript (jQuery)

//Accordian
$('.accordion').each(function () {
var $accordian = $(this);
$accordian.find('.accordion-head').on('click', function () {
$accordian.find('.accordion-body').slideUp();
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
$('h4',this).text("⬆").css("font-size","40px");
}else{
$('h4',this).text("⬇").css("font-size","40px");
}
});
});

 

by

How to generate Google Maps API Key

Google requires Maps API Key in order to use google Maps. Follow the step-by-step instructions to create a Google Maps API key:

1. Creating a new project at https://console.developers.google.com/
2. Enable the Google Map APIs by entering “ENABLE APIS AND SERVICES” of the project.

  • Search for “Maps JavaScript API”. Then click on it.
  • Enable Maps for your website.

NOTE If you are HUB subscriber, you need to enable more Maps Static API.

Google Maps JavaScript API (for Solidres Options – Component – Google Map API Key)
Google Maps Static API (for Solidres Options – Hub – Google Static Map API Key)

3. Create a new API key by creating New Credentials

by

jQuery Add and Remove CSS Classes

jQuery Add and Remove CSS Classes

switch (window.location.pathname) {
  case '/index.php/IJMA/article/view/371':
  $('.authors').addClass('supplement');
  $('.abstract').removeClass('asupplement');
  break;
}