I want to popup a contact form from the right side of the screen when user clicks on image. To do so, I have followed this link.
我想在用户点击图片时从屏幕右侧弹出一个联系表单。为此,我已经关注此链接。
My code is :
我的代码是:
<script src='jquery-1.10.1.min.js'></script> // this file is in the same folder.
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab
pathToTabImage: 'contact_tab.gif', //path to the image for the tab *required*
imageHeight: '122px', //height of tab image *required*
imageWidth: '40px', //width of tab image *required*
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
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});
</script>
<style>
.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: 1px solid #29216d;
}
</style>
<html>
<head>
</head>
<body>
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users">Content</a>
<h3>This is extra content</h3>
<p>Something that wasn't important enough to be in your main body,
but that you wanted to hide off the side of your screen for some reason.
</p>
<p>Could be a form to submit feedback, or contact info</p>
</div>
</body>
</html>
But when I run the file in browser I am getting the output :
但是当我在浏览器中运行该文件时,我得到了输出:
What should I do to get the tab open perfectly to show the form?
我应该怎样做才能完全打开标签以显示表格?
3 个解决方案
#1
1
Looks like you haven't linked the plugin in your html page. Make sure you've added it after query
看起来你没有在你的html页面中链接插件。确保在查询后添加了它
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
//you're missing this.
#2
0
I think you forgot to include the jquery.tabSlideOut.js. Look at the example code demonstrated here and the following line:
我想你忘了包含jquery.tabSlideOut.js。查看此处演示的示例代码和以下行:
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
#3
0
All your scrpt and style should come under the head part of the html. please arrange it
所有你的scrpt和样式都应该在html的头部。请安排好
<html>
<head>
<script src='jquery-1.10.1.min.js'></script> // this file is in the same folder.
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab
pathToTabImage: 'contact_tab.gif', //path to the image for the tab *required*
imageHeight: '122px', //height of tab image *required*
imageWidth: '40px', //width of tab image *required*
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
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});
</script>
<style>
.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: 1px solid #29216d;
}
</style>
</head>
<body>
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users">Content</a>
<h3>This is extra content</h3>
<p>Something that wasn't important enough to be in your main body,
but that you wanted to hide off the side of your screen for some reason.
</p>
<p>Could be a form to submit feedback, or contact info</p>
</div>
</body>
</html>
#1
1
Looks like you haven't linked the plugin in your html page. Make sure you've added it after query
看起来你没有在你的html页面中链接插件。确保在查询后添加了它
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
//you're missing this.
#2
0
I think you forgot to include the jquery.tabSlideOut.js. Look at the example code demonstrated here and the following line:
我想你忘了包含jquery.tabSlideOut.js。查看此处演示的示例代码和以下行:
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
#3
0
All your scrpt and style should come under the head part of the html. please arrange it
所有你的scrpt和样式都应该在html的头部。请安排好
<html>
<head>
<script src='jquery-1.10.1.min.js'></script> // this file is in the same folder.
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab
pathToTabImage: 'contact_tab.gif', //path to the image for the tab *required*
imageHeight: '122px', //height of tab image *required*
imageWidth: '40px', //width of tab image *required*
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
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});
</script>
<style>
.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: 1px solid #29216d;
}
</style>
</head>
<body>
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users">Content</a>
<h3>This is extra content</h3>
<p>Something that wasn't important enough to be in your main body,
but that you wanted to hide off the side of your screen for some reason.
</p>
<p>Could be a form to submit feedback, or contact info</p>
</div>
</body>
</html>