I'm having a bit of trouble adding the following piece of jQuery code in the code. It basically adds dots to words. I tried the following jQuery and when added into the click function it doesn't work. But yet outside of the click function it works.
How do I add it in so that only once the button is clicked, will step 1 appear with the dots following. After 10 seconds make it move to step 2 doing the same things again like step 1. Until I reach step 5 which will show completed and stop flashing?
var dots = 0;
setInterval (type, 1000);
function type()
{
if(dots < 5)
{
$('#dots').append('.');
dots++;
}
else
{
$('#dots').html('');
dots = 0;
}
}
This is what I've managed so far:
jQuery(function($) {
// all jQuery code goes here
$("a").click(function() {
// do something here
// when any anchor is clicked
$("#flash").html("STEP1"); // content inside #myElement will be replaced with that specified
var flash = $('#flash');
function runIt() {
flash.animate({
opacity: '+=1'
}, 400);
flash.animate({
opacity: '+=1'
}, 200);
flash.animate({
opacity: '-=0.9'
}, 600, runIt);
}
runIt();
});
});
.test {
float: left;
}
#flash {
padding: 10px;
}
.content {
font-size: 25px;
font-weight: bold;
width: 100px;
left: 100px;
top: 100px;
color: red;
}
.classname {
-moz-box-shadow: inset 0px 1px 0px 0px #fceaca;
-webkit-box-shadow: inset 0px 1px 0px 0px #fceaca;
box-shadow: inset 0px 1px 0px 0px #fceaca;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffce79), color-stop(1, #eeaf41));
background: -moz-linear-gradient( center top, #ffce79 5%, #eeaf41 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffce79', endColorstr='#eeaf41');
background-color: #ffce79;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
text-indent: 0;
border: 1px solid #eeb44f;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 15px;
font-weight: bold;
font-style: normal;
height: 40px;
line-height: 40px;
width: 100px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #ce8e28;
}
.classname:hover {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #eeaf41), color-stop(1, #ffce79));
background: -moz-linear-gradient( center top, #eeaf41 5%, #ffce79 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeaf41', endColorstr='#ffce79');
background-color: #eeaf41;
}
.classname:active {
position: relative;
top: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">TEXT</div>
<div class="test">
<div id="flash">Start<span id="dots"></span></div>
</div>
It's basically suppose to like a progress bar with 5 different status, start and finish do not flash, steps in between start and finish flash to show progress
Does this work for you?
var dots = 0;
var step = 1;
var flag = false;
var $all = $('#all');
var $flash = $('#flash');
var $dots = $('#dots');
function type()
{
if(dots < 5)
{
$dots.append('.');
dots++;
setTimeout(type, 1000);
}
else
{
$flash.html('Completed');
$dots.html('');
flag = true;
dots = 0;
}
}
function start() {
$flash.html("STEP"+step);
step++;
function runIt() {
$all.animate({opacity:'+=1'}, 400);
$all.animate({opacity:'+=1'}, 200);
if (flag){
return flag = false;
}
$all.animate({opacity:'-=0.9'}, 600, runIt);
}
runIt();
type();
}
$('#text').on('click', start);
I also made some changes in HTML and CSS. Everything is in the demo:
DEMO
Related
i'm making a webpage where I have different "pictures" that I want like buttons on and when people like it, the number stays and then they can only like each image once. I found a code that I liked however when I refresh the page, all the likes go away. I want them to stay. I'm not the best at explaining or understanding lol.
Here's the code that I found that I liked, but I want to function as it goes away when I refresh. Function like a "vote" button.
/*
* Love button for Design it & Code it
* http://designitcodeit.com/i/9
*/
$('.btn-counter').on('click', function(event, count) {
event.preventDefault();
var $this = $(this),
count = $this.attr('data-count'),
active = $this.hasClass('active'),
multiple = $this.hasClass('multiple-count');
// First method, allows to add custom function
// Use when you want to do an ajax request
/* if (multiple) {
$this.attr('data-count', ++count);
// Your code here
} else {
$this.attr('data-count', active ? --count : ++count).toggleClass('active');
// Your code here
} */
// Second method, use when ... I dunno when but it looks cool and that's why it is here
$.fn.noop = $.noop;
$this.attr('data-count', ! active || multiple ? ++count : --count )[multiple ? 'noop' : 'toggleClass']('active');
});
html {
background: #f5f5f5;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body {
margin: 30px auto 0 auto;
width: 450px;
font-size: 75%;
}
h3 {
margin-top: 30px;
font-size: 18px;
color: #555;
}
p { padding-left: 10px; }
/*
* Basic button style
*/
.btn {
box-shadow: 1px 1px 0 rgba(255,255,255,0.5) inset;
border-radius: 3px;
border: 1px solid;
display: inline-block;
height: 18px;
line-height: 18px;
padding: 0 8px;
position: relative;
font-size: 12px;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
/*
* Counter button style
*/
.btn-counter { margin-right: 39px; }
.btn-counter:after,
.btn-counter:hover:after { text-shadow: none; }
.btn-counter:after {
border-radius: 3px;
border: 1px solid #d3d3d3;
background-color: #eee;
padding: 0 8px;
color: #777;
content: attr(data-count);
left: 100%;
margin-left: 8px;
margin-right: -13px;
position: absolute;
top: -1px;
}
.btn-counter:before {
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
background-color: #eee;
border: 1px solid #d3d3d3;
border-right: 0;
border-top: 0;
content: '';
position: absolute;
right: -13px;
top: 5px;
height: 6px;
width: 6px;
z-index: 1;
zoom: 1;
}
/*
* Custom styles
*/
.btn {
background-color: #dbdbdb;
border-color: #bbb;
color: #666;
}
.btn:hover,
.btn.active {
text-shadow: 0 1px 0 #b12f27;
background-color: #f64136;
border-color: #b12f27;
}
.btn:active { box-shadow: 0 0 5px 3px rgba(0,0,0,0.2) inset; }
.btn span { color: #f64136; }
.btn:hover, .btn:hover span,
.btn.active, .btn.active span { color: #eeeeee; }
.btn:active span {
color: #b12f27;
text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
<h3>Basic button</h3>
<p>
<span>❤</span>
<span>❤</span> Love it
</p>
<h3>Button with counter - active/inactive</h3>
<p>
<span>❤</span>
<span>❤</span> Love it
</p>
<h3>Button with counter for people who likes to click</h3>
<p>
<span>❤</span>
<span>❤</span> Love it
</p>
You actually need back-end for this, but this is a quick solution.
NOTE: the code will not work in the snippet but it regularly works
W3: Window localStorage
Mozilla Window.localStorage
let btn = document.querySelector('#like');
let result = document.querySelector('#result');
localStorage.setItem('likes', 0);
result.innerHTML = localStorage.getItem('likes');
btn.addEventListener('click', addLike());
function addLike(){
localStorage.setItem('likes', parseInt(localStorage.getItem('likes')) + 1);
result.innerHTML = localStorage.getItem('likes');
}
<button id="like">LIKE</button>
<p id="result"></p>
to see the local storage, go to DevTools open application tab, see the local storage there and you can manage it manually
I am currently using both the fancybox thambnails and button helper.
Currently I have it all working how I would like but I would like thumbnails below the slide to disappear when the image is expanded and the excess space above the enlarged image gone.
It's too messy having both, they overlap and do all sorts of weird stuff and I don't really think you need the thumbnails (navigation dots) when the image is enlarged.
Any help would be great.
If it helps, you can view the issue on my website shereewalker.com
Here is my html:
<a class="fancybox" rel="gallery1" href="images/folio/oliver_sketch_small.jpg" data-fancybox-title="Starting with initial sketches..." >
<!--slideshow image 1-->
<img src="images/index/playing_thumb.jpg" alt="main icon" /></a>
<!--This is the little image on page-->
<a class="fancybox" rel="gallery1" href="images/folio/sketch_small.jpg" title="Starting with initial sketches..." >
<!--slideshow image 2-->
<a class="fancybox" rel="gallery1" href="images/folio/fagin_small.jpg" title="Fagin illustration">
<!--slideshow image 3-->
</a>
And CSS
#fancybox-buttons {
position: fixed;
left: 0;
width: 100%;
z-index: 9000;
}
#fancybox-buttons.top {
top: 10px;
}
#fancybox-buttons.bottom {
bottom: 10px;
}
#fancybox-buttons ul {
display: block;
width: 166px;
height: 30px;
margin: 0 auto;
padding: 0;
list-style: none;
border: 1px solid #111;
border-radius: 3px;
-webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
-moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
background: rgb(50,50,50);
background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51)));
background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
}
#fancybox-buttons ul li {
float: left;
margin: 0;
padding: 0;
}
#fancybox-buttons a {
display: block;
width: 30px;
height: 30px;
text-indent: -9999px;
background-color: transparent;
background-image: url('fancybox_buttons.png');
background-repeat: no-repeat;
outline: none;
opacity: 0.8;
}
#fancybox-buttons a:hover {
opacity: 1;
}
#fancybox-buttons a.btnToggle {
background-position: 3px -60px;
border-left: 1px solid #111;
border-right: 1px solid #3e3e3e;
width: 35px;
}
#fancybox-buttons a.btnToggleOn {
background-position: -27px -60px;
}
#fancybox-buttons a.btnClose {
border-left: 1px solid #111;
width: 35px;
background-position: -56px 0px;
}
#fancybox-buttons a.btnDisabled {
opacity : 0.4;
cursor: default;
}
/*______________________________________________________
*/
/* hide the actual buttons helper */
#fancybox-buttons {
display: none;
}
/* position the clone : notice the class "clone" */
.clone {
position: absolute;
top: 5px;
right: 0;
}
.btnToggle.clone {
background-position: 3px -60px;
width: 35px;
height: 35px;
background-image:url(fancybox_buttons.png);
}
.clone.btnToggleOn {
background-position: -27px -60px;
}
#fancybox-thumbs {
position: fixed;
width: 100%;
overflow: hidden;
z-index: 8050;
visibility:visable;
}
Javascript
jQuery(document).ready(function ($) {
$(".fancybox").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers: {
title: {
type: 'outside'},
thumbs: {
width : 10,
height : 10
}, // we need this to clone
buttons: {}
},
afterLoad: function () {
// make sure we have a title
this.title = this.title ? this.title : " ";
},
afterShow: function () {
// wait for the buttons helper
setTimeout(function () {
$("#fancybox-buttons")
.find(".btnToggle")
.clone(true, true) // clone with data and events
.addClass("clone") // add class "clone"
.appendTo(".fancybox-title") // append it to the title
.fadeIn(); // show it nicely
}, 100); //setTimeout
}, // afterShow
onUpdate: function () {
var toggle = $(".btnToggle.clone").removeClass('btnDisabled btnToggleOn');
if (this.canShrink) {
toggle.addClass('btnToggleOn');
} else if (!this.canExpand) {
toggle.addClass('btnDisabled');
}
}
}); // fancybox
}); // ready
Add these modifications to your onUpdate function :
onUpdate: function () {
var toggle = $(".btnToggle.clone").removeClass('btnDisabled btnToggleOn');
if (this.canShrink) {
toggle.addClass('btnToggleOn');
// we expanded our image, so hide thumbs
$("#fancybox-thumbs").hide();
} else if (!this.canExpand) {
toggle.addClass('btnDisabled');
} else {
// restore thumbs
$("#fancybox-thumbs").show();
}
}
See JSFIDDLE
I made a form control which uses as its container (see the Yes/No toggler below)
Here's the code for that:
<span class="toggle">
<i>Yes</i>
<i>No</i>
<input type="hidden" name="toggle-value" value="0">
</span>
My CSS isn't relevant to the question, but it's included for comprehension of my control:
.toggle { width:auto; height: 20px; display: inline-block; position: relative; cursor: pointer; vertical-align: middle; padding: 0; margin-right: 27px; color: white !important;}
.toggle i { display: block; padding: 0 12px; width: 100%; height: 100%; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; text-align: center; font: 11px/20px Arial !important; text-transform: uppercase; }
.toggle i:first-child { -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; background-color: #73B9FF; }
.toggle i:last-child { -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; background-color: #cc0000; position: relative; top: -20px; z-index: -1; }
.toggle.on i:first-child { z-index: 1; } /* they overlap but on click they switch who gets to be on top. */
.toggle.on i:last-child { z-index: -1; }
.toggle.off i:first-child { z-index: -1; }
.toggle.off i:last-child { z-index: 1; }
.toggle.off i:last-child:before { content: " "; display:block; position:absolute; left:1px; top:1px; text-indent: -9999px; width: 18px; height: 18px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; z-index: 1; background-color: #fff; } /* circle */
.toggle.on i:first-child:after { content: " "; display:block; position:absolute; right:-23px; top:1px; text-indent: -9999px; width: 18px; height: 18px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; z-index: 1; background-color: #fff; } /* circle */
and the JS that makes it all work:
.on('click', '.toggle', function(){
var input = $(this).next('input');
if(input.val() == 1) {
$(this).removeClass('on').addClass('off');
input.val(0).change();
} else {
$(this).removeClass('off').addClass('on');
input.val(1).change();
}
}
The problem is that I'm using this all over my application for data-entry. Have you ever wanted to NOT use the mouse when you're entering a lot of data? Yeah, me too. So you hit TAB and a toggle like this should respond to the spacebar. But instead, since it's just a element, it is skipped altogether.
I'm hoping someone can help me solve the question of "how the heck do I make this a tab stop AND be in the correct order"?
==============
EDIT: HERE IS MY UPDATED JQUERY CODE CONTAINING THE SOLUTION:
$('.toggle').click(function(){
var input = $(this).next('input');
if(input.val() == 1) {
$(this).removeClass('on').addClass('off');
input.val(0).change();
} else {
$(this).removeClass('off').addClass('on');
input.val(1).change();
}
}).focus(function() {
$(this).bind('keydown', 'space', function(e){
$(this).trigger('click')
e.preventDefault();
});
}).blur(function() {
$(this).unbind('keydown');
}).attr('tabIndex', 0);
Try setting your tabindex to 0, on the non-anchor elements you would like to make "tabbable". For example tabindex="0". This way, you won't mess with the tabbing order, or have to throw tabindexs all over the place.
Look into the html attribute tabindex. Basically you should be able to set tabindex on each input you want to focusable via the tab key. Start the first one a 1 and just count upwards for each input. If you also want to take an input out of focusing via the tab key set the tabindex to -1.
<style>
.moveAble {
position: absolute;
display:none;
}
a:hover + div.moveAble {
display: block;
}
.moveAble .qtip {
background-color: #FFF;
background-color: rgba(255,255,255,.95);
border-color: #ccc;
padding: 10px;
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.qtip-default {
border-width: 1px;
border-style: solid;
border-color: #f1d031;
background-color: #ffffa3;
color: #555;
}
.qtip, .qtip {
max-width: 280px;
min-width: 50px;
font-size: 10.5px;
line-height: 12px;
direction: ltr;
}
#nytmm .qtip-content {
border-color: #999;
color: #000;
padding: 4px 7px;
text-align: center;
}
.qtip-content {
position: relative;
padding: 5px 9px;
overflow: hidden;
text-align: left;
word-wrap: break-word;
}
.moveAble .qtip-content h5 {
font: 300 20px/22px "nyt-cheltenham",Georgia,"Times New Roman",serif;
color: #000;
margin: 0;
}
.moveAble .qtip-content h6 {
font: 300 13px/16px 'nyt-franklin',Arial,Helvetica,sans-serif;
margin: 0;
}
</style>
<img src="http://s.jeff.io/img/gifts.png" />
<div class="moveAble">
<div id="qtip-0" class="qtip qtip-default qtip-pos-tr" style="z-index: 15001;">
<div class="qtip-content" id="qtip-0-content">
<h5>Dining Gifts »</h5>
<h6>Pug Muddlers</h6>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var $moveable = $('.moveAble');
$(document).mousemove(function(e){
$('.moveAble').css({'top': e.pageY,'left': e.pageX-(e.pageX/2)});
});
});
</script>
The code above is working but when I move mouse pointer over the image in that div, it is flickering too much. I don't know why it is happening. What should be the change in the code that make it work properly?
DEMO Here
This is how you should have done it. Demo :http://jsfiddle.net/wUAGP/468/
Note adding 'left' : e.pageX+20 makes it even more smoother. Play around.
So, check out a cool .gif I made for you all. Interactive isn't it?
This is because of the gap between the .moveAble and the cursor, so they don't clash.
$(document).ready(function() {
$(document).hover(
//Mouse-over
function(e) {
$(this).mousemove(function(e) {
$('.moveAble').css({
'position' : 'absolute',
'top' : e.pageY,
'left' : e.pageX+20
}).show();
});
},
//Mouse-out
function() {
$('.moveAble').fadeOut(1300);
}
);
}, 'a img' );
All you need to do is change 'left': e.pageX - (e.pageX/2) to just a static number like 10 or 5.
Pretty Demo :)
Javascript:
$(document).ready(function () {
var $moveable = $('.moveAble');
$(document).on({
mouseenter: function () {
$moveable.show();
$(this).on('mousemove', function (evt) {
var e = evt || window.event;
$moveable.css({
top: e.pageY,
left: e.pageX + 5
});
});
},
mouseleave: function () {
$moveable.hide();
}
}, 'a img');
});
CSS (cleaned up and optimized for you):
.qtip {
max-width: 280px;
min-width: 50px;
font-size: 10.5px;
line-height: 12px;
direction: ltr;
background-color: #FFF;
background-color: rgba(255, 255, 255, .95);
border-color: #ccc;
padding: 10px;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.qtip-default {
border-width: 1px;
border-style: solid;
border-color: #f1d031;
background-color: #ffffa3;
color: #555;
}
.qtip-content {
border-color: #999;
color: #000;
position: relative;
padding: 5px 9px;
overflow: hidden;
text-align: left;
word-wrap: break-word;
}
.qtip-content h5 {
font: 300 20px/22px"nyt-cheltenham", Georgia, "Times New Roman", serif;
color: #000;
margin: 0;
}
.qtip-content h6 {
font: 300 13px/16px'nyt-franklin', Arial, Helvetica, sans-serif;
margin: 0;
}
HTML (added inline CSS for hiding and position):
<img src="http://s.jeff.io/img/gifts.png" />
<div class="moveAble" style="display: none;position: absolute;">
<div id="qtip-0" class="qtip qtip-default qtip-pos-tr" style="z-index: 15001;">
<div class="qtip-content" id="qtip-0-content">
<h5>Dining Gifts »</h5>
<h6>Pug Muddlers</h6>
</div>
</div>
</div>
PS - use updated jQuery to avoid possible deprecation/removed components in the future.
Please add some margin between mouse pointer and moveable div, because when mouse inter within moveable div, a:hover not works and moveable div display become "none".
$(document).ready(function(){
var $moveable = $('.moveAble');
$(document).mousemove(function(e){
$moveable.css({'top': e.pageY + 5,'left': e.pageX + 5});
});
});
I am developing feedback form in ASP.NET. I am placing the feedback image on right by getting document.client width etc. (pleaes find complete code below)
Question:
I can maintain the position of feedback button when onresize event occurs
I want to maintain the feedack button and form to the right when user scrolls the page to right. How can I achieve this? Please refer to window.onScroll event below.
//JQUERY
$(document).ready(function() {
var feed_width = $('#feedback').width();
//var scr_w = window.innerwidth; // Screen Width
var scr_w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
// 26 is width of the veritcal feedback button
var btn_width = 26;
var move_right = scr_w - btn_width - 15;
var slide_from_right = scr_w - (feed_width - btn_width) - 26;
var center = (scr_w / 2) - (feed_width / 2);
var intX = document.getElementById('feedback').style.left;
//maintain the spot when windows is resized
window.onresize = function() {
scr_w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
// 26 is width of the veritcal feedback button
move_right = scr_w - btn_width;
slide_from_right = scr_w - (feed_width - btn_width);
positioningForm();
}
window.onscroll = function() {
move_right = +move_right;
positioningForm();
}
function positioningForm() {
$('#feedback').css({ "left": move_right + "px" }).show();
//ntX = document.getElementById('feedback').style.left;
//document.getElementById('name').value = $('#hName').val();
}
function slideFromRight() {
$('#feedback').animate(
{ left: slide_from_right + "px" },
{ duration: 'slow', easing: 'jswing' });
}
function moveRight() {
$('#feedback').animate({ left: move_right + "px" }, { duration: 'slow', easing: 'jswing' });
setTimeout("$('.right_btn').show();", 600);
}
// Positioning the feedback form at the time of page loading
positioningForm();
// Handling the right_btn and lift_btn event animations
$('.right_btn').click(function() {
slideFromRight();
});
// Moving left or right by clicking close button
$('.feed_close').click(function() {
moveRight();
});
//Submit button clicked
$('#submit_btn').click(function() {
var msg = $('#msg').val();
if (msg.length > 0) {
$('.right_btn').hide();
$('.box').hide();
$('#feedback').animate({ left: center + "px" }, { duration: 'slow', easing: 'jswing' });
$('.thankyou').show();
}
else {
$('#error').html('Enter some thing');
$("#msg").focus();
}
});
});
CSS:
<style type="text/css">
body{
width: 100%;
overflow: auto;
padding: 0;
margin: 0;
font-family:arial;
white-space:nowrap;
}
h3
{
color:black
}
#feedback{
width: 352px;
position: absolute;
top: 100px;
display: none;
}
#feedback .formdiv{
width: 300px;
float: left;
background-color: #ffffff;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
min-height:100px;
border:solid 1px black;
}
#feedback label{
font:bold 11px arial;
color: #80bae8;
}
#feedback textarea{
width: 290px;
height: 100px;
color: black;
font: normal 11px verdana;
border: solid 1px #80bae8;
padding: 5px;
background-color: #ffffff;
-moz-box-shadow: inset 1px 1px 1px #4c0b3f;
-webkit-box-shadow: inset 1px 1px 1px #4c0b3f;
resize: none; /* disable extending textarea in chrome */
}
#feedback input[type="text"]{
color: black;
font: normal 11px verdana;
padding: 3px;
width: 200px;
height: 25px;
border: solid 1px #80bae8;
color: black;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #ffffff;
-moz-box-shadow: inset 1px 1px 1px #4c0b3f;
-webkit-box-shadow: inset 1px 1px 1px #4c0b3f;
}
#feedback input[type="submit"]{
background-color: white;
border: solid 1px #80bae8;
color: #80bae8;
font:bold 13px arial;
padding: 2px 6px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
cursor: pointer;
}
#feedback .left_btn,
#feedback .right_btn{
width: 26px;
height: 100px;
float: left;
cursor: pointer;
}
#feedback .feed_close{
cursor: pointer;
margin:-10px -5px 0px 0px;
}
#error
{
color:red;
padding:4px;
font-size:11px;
}
.thankyou
{
text-align:center;
display:none;
}
.textmsg
{
font-size:28px;
font-family:'Georgia',Times New Roman,Times,serif;
text-align:center;
}
</style>
Sounds like you should be using CSS to position the button and form in a fixed position on screen.
For example, see how the position:fixed, right and bottom styles are used here:
<div style="width:2000px; background-color:yellow;">This is the thing that causing scrolling to the right.</div>
<div style="position:fixed; right:100px; bottom:100px; background-color:yellow;">
This is the thing that will stay fixed on screen.
</div>