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

Recent Posts

  • Possible attack detected. This action has been logged. How to fix ?
  • Troubleshot with hostedemail blacklist
  • How to install phpBB
  • Missing vmail Folders .Sent, .Trash, .Drafts, .Junk, and Other
  • How to Add and Remove Swap Space on Ubuntu 20.04
  • Xauthority does not exist
  • How to Zip and Unzip Files and Directories in Linux
  • Usage stats shows 0 in the downloaded files
  • UTF-8 Encoding Debugging Chart
  • Dimensions Badge integration on OJS
  • PHP Fatal Error: Uncaught Error: Call to undefined function – OJS
  • Failed Ajax request or invalid JSON returned
  • Migrate Accounts from CWP to CWP
  • How to Install WordPress through webmin?
  • How to install webmin, usermin, virtualmin
  • How to change hostname and edit settings | Webmin
  • intoDNS
  • ISPConfig Installation Checklist on Ubuntu 20.04
  • How to get chain certificates
  • There are no readable files in this directory tree. Are safe mode or open_basedir active?

Categories

  • Affiliate Marketing (1)
  • Customization (2)
  • Email Solutions (19)
    • 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 (68)
  • Joomla (6)
    • Akeeba (1)
    • Fix & Tricks (3)
  • jQuery (3)
  • jQuery Plugins (4)
    • BX Slider (1)
    • Slick (1)
  • Marketplace (5)
  • Miscellaneous (24)
  • OJS (48)
    • Help (32)
    • Installation (9)
      • Issues (5)
    • Plugins (6)
    • Theme (5)
      • Templates (5)
        • Frontend (4)
        • legacy (1)
    • Theme Customization (8)
    • Theme Development (12)
    • TPL CSS JS (2)
    • Upgrade (11)
  • Oxwall (3)
  • Payment Methods (1)
    • Paypal (1)
  • PC Tips and Tricks (11)
    • MS Office (1)
      • PowerPoint (1)
    • Windows (2)
  • PHP Parse error (2)
  • phpBB (1)
  • Server and Hosting (156)
    • Billing and Management (10)
      • Blesta (5)
      • Boxbilling (2)
      • WHMCS (5)
    • Email (9)
      • Postfix (3)
    • Error and Fix (16)
    • FTP (2)
    • MySQL (8)
    • Providers (50)
      • AWS (20)
      • Bluehost (19)
      • Cloudcone (8)
      • Contabo (22)
      • Digitalocean (50)
      • HostGator (18)
      • VPSDime (20)
    • Security (17)
      • SSH (6)
    • VPS Management (54)
    • Web Control Panel (115)
      • CentOS Web Panel (30)
      • cPanel (20)
      • DirectAdmin (85)
        • Find & fix (38)
      • ISPConfig (6)
      • Plesk (14)
      • Webmin (16)
        • Usermin (2)
        • Virtualmin (11)
      • WHM (11)
  • Uncategorized (12)
  • Wordpress (85)
    • Elementor (1)
    • 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
  • 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)

 

 

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

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