Dev {Tricks}

  • Home
  • WordPress
  • OJS
  • Oxwall
  • Server and Hosting
You are here: Home / Archives for jQuery Plugins

November 23, 2021 by dev

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");
}
});
});

 

Filed Under: Customization, How to, jQuery, jQuery Plugins Tagged With: accordion, data toggle, toggle, up down

September 12, 2020 by dev

Slick – Carousel you’ll ever need

Features

    • Fully responsive. Scales with its container.
    • Separate settings per breakpoint
    • Uses CSS3 when available. Fully functional when not.
    • Swipe enabled. Or disabled, if you prefer.
    • Desktop mouse dragging
    • Infinite looping.
    • Fully accessible with arrow key navigation
    • Add, remove, filter & unfilter slides
  • Autoplay, dots, arrows, callbacks, etc…

Demo link

Download

Adding RTL option

Just add the following css

.slick-slider .slick-track, .slick-slider .slick-list {
direction: ltr;
}

Responsive Slick

Add following lines to javascript.

 responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]

 

 

Filed Under: jQuery Plugins, Slick Tagged With: carousel, Slick

August 18, 2019 by dev Leave a Comment

How to add Bx Slider or Bx Carousel Slider to your website

Easy simple three steps.

Step One

Add following markup where you want to show the slider or carousel

<div class="dev-bdhostit">
	<div><img src="photo1.jpg"></div>
	<div><img src="photo2.jpg"></div>
	<div><img src="photo3.jpg"></div>
	<div><img src="photo7.jpg"></div>
	<div><img src="photo4.jpg"></div>
	<div><img src="photo5.jpg"></div>
	<div><img src="photo6.jpg"></div>
	<div><img src="photo8.jpg"></div>
	<div><img src="photo9.jpg"></div>
</div>

Step Two

Link jquery script of Bx Slider.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>

<script type="text/javascript">

$('.dev-bdhostit').bxSlider({
  auto: true,
  autoControls: true,
  stopAutoOnClick: true,
  minSlides: 1,
			  maxSlides: 8,
			  moveSlides: 1,
			  slideWidth: 250,
			  slideMargin: 10,
});

</script>

Add the above line before closing of </body> tag.

Step Three

Link css script of Bx Slider.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />

Add the above line before closing of </head> tag.

Filed Under: BX Slider, How to Tagged With: bx carousel, bx slider, bxcarousel, bxslider, bxslider jquery, carousel, carousel slider, carouser, html slider, jquery slider, php slider, slider, slider carousel

July 4, 2018 by dev Leave a Comment

Page Scroll to ID jQuery Plugin

Filed Under: jQuery Plugins

  • Upwork
  • Freelancer
  • Fiverr
  • Guru
  • PPH

Recent Posts

  • MariaDB Upgrade to the new version | Plesk – CentOS 7 / RHEL 7
  • Google Workspace MX record values
  • Could not open input file
  • How to remove journal path for single journal OJS website.
  • How to Clean the YUM Cache in CentOS
  • How to run php file through command line? How do I enable PHP?
  • How to disable functions using the PHP disable_functions directive in php ini
  • Error 503 Backend fetch failed
  • Unblock iRedMail IP
  • Most Read Articles
  • Import export database | Linux
  • How to reset MySQL root password | CWP
  • MariaDB Upgrade to the new version | CWP
  • Install Optimize with optimize.js (sync)
  • Journey to Laravel & Vue – December to February 2022/2023
  • Elementor
  • Java Errors
  • How to Install Zip/Unzip
  • Redirect www to non-www and vice versa
  • How to change Time Zone in Debian 11 / Debian 10

Categories

  • Affiliate Marketing (1)
  • Customization (3)
    • CSS (1)
  • Email Solutions (20)
    • FrontApp (1)
    • Google Spreadsheet (2)
    • Microsoft Outlook (1)
    • PHP Email Form (3)
    • PolyMail (1)
    • Recaptcha (1)
    • Roundcube (3)
    • Thunderbird (2)
    • WebMail (4)
  • Games (1)
  • How to (75)
  • Joomla (6)
    • Akeeba (1)
    • Fix & Tricks (3)
  • jQuery (3)
  • jQuery Plugins (4)
    • BX Slider (1)
    • Slick (1)
  • Laravel (1)
  • Marketplace (5)
  • Miscellaneous (26)
  • OJS (52)
    • Help (35)
    • Installation (9)
      • Issues (5)
    • Plugins (7)
    • Theme (6)
      • Templates (6)
        • Frontend (5)
        • legacy (1)
    • Theme Customization (9)
    • Theme Development (13)
    • TPL CSS JS (2)
    • Upgrade (11)
  • Oxwall (3)
  • Payment Methods (1)
    • Paypal (1)
  • PC Tips and Tricks (12)
    • MS Office (1)
      • PowerPoint (1)
    • Windows (3)
  • PHP Parse error (2)
  • phpBB (1)
  • Server and Hosting (174)
    • Billing and Management (10)
      • Blesta (5)
      • Boxbilling (2)
      • WHMCS (5)
    • Debian (5)
    • Email (9)
      • Postfix (3)
    • Error and Fix (16)
    • FTP (2)
    • Mail Server Solusion (5)
      • iRedMain (4)
    • MySQL (9)
    • Providers (54)
      • AWS (23)
      • Bluehost (23)
      • Cloudcone (12)
      • Contabo (26)
      • Digitalocean (54)
      • HostGator (22)
      • VPSDime (24)
    • Security (18)
      • SSH (6)
    • VPS Management (60)
    • Web Control Panel (125)
      • CentOS Web Panel (36)
      • cPanel (24)
      • DirectAdmin (89)
        • Find & fix (38)
      • ISPConfig (11)
      • Plesk (20)
      • Webmin (19)
        • Usermin (2)
        • Virtualmin (11)
      • WHM (13)
  • Uncategorized (14)
  • Wordpress (86)
    • Elementor (2)
    • Find and Fix (9)
    • Functions (5)
    • Genesis (9)
    • Glossary (1)
    • How to (20)
    • Neuron TD (15)
      • Console Error (1)
      • functions (5)
        • register_post_type (1)
        • register_sidebar (1)
        • theme_files (1)
        • theme_supports (1)
      • Image Directory (1)
      • Menu (2)
      • Query (4)
    • Plugins (12)
      • Contact Form 7 (5)
      • Duplicator (1)
      • Essential Grid (2)
    • Softaculous (3)
    • Speed and Security (4)
    • Stock Theme Development (6)
      • Header Footer (1)
      • PHP (1)
      • VC (1)
    • Theme Development (2)
      • Issues (1)
      • Menu (1)
    • Timer Theme Development (3)
    • Update (2)
    • Woocommerce (2)
    • WP Basic Guideline (8)

Important DEV links

  • Premium Themes
    • Themeforest
    • Envato Market
  • Built With (What Theme is That?)
    • What WP theme is that
    • Joomla Template Detector
    • Drupal Template Detector
    • Prestashop Template Detector
    • Shopify Theme Detector
    • Squarespace Template Detector
    • OpenCart Detector
    • WordPress.com Theme Detector
  • Domain/IP history checker
    • Who IS request
    • Hosting Info
  • Check DNS Propagation
    • DNS Checker
    • intoDNS
  • What is my IP
    • What is My IP Address
    • What is My IP
    • IP location
    • What is My IP
    • Porkbun
  • SEO Tools
    • Visitor Traffic
    • Broken Link
    • Website Speed Test
      • SEMrush
      • GTmetrix
      • Pingdom
      • PageSpeed Insights
      • DebugBear
      • keyCDN
  • Photo Image
    • Remove Background 50 Free Preview Image 375 × 666 per month
  • Domain Registrars
    • 123-Reg
    • Porkbun
    • Freenom
    • Namecheap NEWCOM598
  • Hosting Providers
    • Bluehost
    • Hostgator
    • Inmotion
  • Hosting Control Panel
    • CWPpro (FREE)
    • DirectAdmin (Trial 60 Days, One account $2/month)
    • ISPConfig (Free)
  • Webmaster Tools
    • Google
    • Bing
    • Yandex
  • Miscellaneous
    • Time Calculator

 

  • Home
  • WordPress
  • OJS
  • Oxwall
  • Server and Hosting

Copyright © 2023 · Executive Pro Theme on Genesis Framework · WordPress · Log in