Dev {Tricks}

You are here: Home / Archives for Customization

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

Limit text lines of a div using CSS

<div class=”text-line-3″>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis.</div>

.text-line-3 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
line-clamp: 2; 
-webkit-box-orient: vertical;
}

 

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 exclude a specific folder from rewrite rule in htaccess

  • .htaccess mod_rewrite – how to exclude directory from rewrite rule
  • Exclude Certain Folders from htaccess Rewrite Rules
  • How to Exclude Folder from Rewrite Rule in .htaccess

Add the following line above your rule to exclude a directory (for example, journal) from rewrite rule

RewriteRule ^(journal)($|/) - [L]

To exclude multiple folders, use the following condition above your rule

RewriteCond %{REQUEST_URI} !^/(folder1|folder2/.*)$

OR

RewriteRule ^(folder1|folder2)($|/) - [L]

To exclude all existent directories, you will need to use the following condition above your rule

RewriteCond %{REQUEST_FILENAME} !-d