Enter your email below:
Click what you like – and sign up for only those updates via email.
All Posts
Design Assets
Raspberry Pi
Animation
Git / GitHub / GitLab
SEO
Wordpress
Database
Cheat Sheets
Writing
NAS Server
Plugins
https://www.jqueryscript.net/demo/jQuery-Plugin-For-Slide-Out-Tab-Contact-tabSlideOut/
[code language=”html”]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js">
tabSlideOutBrains.js – no longer on googlecode – moved into site –
<script>
$(function(){
$(‘.slide-out-div’).tabSlideOut({
tabHandle: ‘.handle’, //class of the element that will become your tab
pathToTabImage: ‘images/contact_tab.gif’, //path to the image for the tab //Optionally can be set using css
imageHeight: ‘122px’, //height of tab image //Optionally can be set using css
imageWidth: ’40px’, //width of tab image //Optionally can be set using css
tabLocation: ‘left’, //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: ‘click’, //options: ‘click’ or ‘hover’, action to trigger animation
topPos: ‘200px’, //position from the top/ use if tabLocation is left or right
leftPos: ’20px’, //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});
</script>
<script>
jQuery(document).ready(function($) {
$(‘.slide-out-div’).tabSlideOut({
tabHandle: ‘.handle’, //class of the element that will become your tab
pathToTabImage: ‘images/contact_tab.gif’, //path to the image for the tab //Optionally can be set using css
imageHeight: ‘122px’, //height of tab image //Optionally can be set using css
imageWidth: ’40px’, //width of tab image //Optionally can be set using css
tabLocation: ‘left’, //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: ‘click’, //options: ‘click’ or ‘hover’, action to trigger animation
topPos: ‘200px’, //position from the top/ use if tabLocation is left or right
leftPos: ’20px’, //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
})
});
</script>
add_action( ‘wp_enqueue_scripts’, ‘add_tabSlideOut’ );
function add_tabSlideOut() {
wp_enqueue_script(
‘rss-tab-slideout’, // name your script so that you can attach other scripts and de-register, etc.
get_stylesheet_directory_uri() . ‘/js/tabSlideOut.js’, // this is the location of your script file
array(‘jquery’) // this array lists the scripts upon which your script depends
);
}
add_action( ‘wp_enqueue_scripts’, ‘add_tabSlideOutBrains’ );
function add_tabSlideOutBrains() {
wp_enqueue_script(
‘rss-tab-slideout-brains’, // name your script so that you can attach other scripts and de-register, etc.
get_stylesheet_directory_uri() . ‘/js/tabSlideOutBrains.js’, // this is the location of your script file
array(‘jquery’) // this array lists the scripts upon which your script depends
);
}
[/code]
Below that add your css:
[code language=”css”]
<style>
.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: #29216d 1px solid;
}
</style>
[/code]
Anywhere in your page, (I put mine right above my