i had added a drag and move div to my website, i am using common header for each pages.
my drag and move div code as follows:
Script:
<script type="text/javascript">
$(function() {
$( "#draggable" ).draggable();
});
</script>
Div:
<div class="student_avatar_header" id="draggable" title="Drag and Move...">
Some texts...
</div>
CSS:
.student_avatar_header {
width: 100px;
height: 100px;
position: absolute;
left: 10px;
top: 20px;
border-radius: 250px;
z-index: 9998;
box-shadow: 2px 2px 12px #008abc;
cursor: move;
}
this drag and move function working fine, what my question is i had added this draggable Div to my header so it will appear even visit any pages my website, i just want to set a cookie function or what possible for remember last position where it dragged. for example now i am here home page, i just drag my div to page bottom, but when i go to about page this div appear not previous position, its appear default position. i need it display previous position even i visit any pages my website,
NOTE: my website have above 35 pages.
any idea.?
thanks...
Have a look on the following code :
$("#draggable").draggable({
stop: function(event, ui) {
$.cookie("elementIDCookie", ui.position);
}
});
To re-position the element when the user returns:
$("#draggable").css( { "left" : $.cookie("elementIDCookie").left, "top" : $.cookie("elementIDCookie").top });
Related
I have the code of a scroll to top button as you can see at Jsfiddle The problem with the code is that at the time the page is loaded the button is displayed (which it should not, it should be displayed when the person scrolls below). Once scrolled down, on scrolling up the issue no longer prevails, the button vanishes at the top as it should. Refreshing the page again would let us see the button again without any scrolling down.
Since I am a javascript noob, I don't know what I am doing wrong.
<div class="scroll-top" style="display: block;">
<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgMzEuMDc2IDMxLjA3NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzEuMDc2IDMxLjA3NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yMS41NDksMjAuMjI3di0zLjk0N2MwLTguODA2LTMuNzI1LTE0LjEyNS01LjI4My0xNS45NjRDMTYuMDk4LDAuMTE2LDE1Ljg1MSwwLjAwMiwxNS41OTEsMCAgICBjLTAuMjYxLTAuMDAxLTAuNTA4LDAuMTEyLTAuNjc5LDAuMzFjLTEuNTg0LDEuODM1LTUuMzg0LDcuMTU2LTUuMzg0LDE1Ljk3djMuOTQ4bC0wLjcyOSwwLjQ5MSAgICBjLTEuNDA1LDAuOTQ4LTIuMjQ4LDIuNTMzLTIuMjQ4LDQuMjI5djQuNzExYzAsMC4yNzksMC4xNTQsMC41MzcsMC40LDAuNjdjMC4yNDcsMC4xMzIsMC41NDYsMC4xMTcsMC43NzgtMC4wMzlsMi4zNjgtMS41NzcgICAgYzAuNjY1LTAuNDQyLDEuNDQ1LTAuNjc5LDIuMjQ0LTAuNjc5aDEuNzQxdjIuMjgzYzAsMC40MiwwLjM0LDAuNzYsMC43NTksMC43NmgxLjM5NGMwLjQxOSwwLDAuNzU5LTAuMzQsMC43NTktMC43NnYtMi4yODNoMS43NCAgICBjMC43OTksMCwxLjU4LDAuMjM1LDIuMjQ2LDAuNjhsMi4zNjYsMS41NzZjMC4yMzIsMC4xNTYsMC41MzEsMC4xNzEsMC43NzgsMC4wMzljMC4yNDYtMC4xMzMsMC40LTAuMzkxLDAuNC0wLjY3di00LjcxMSAgICBjMC0xLjY5NC0wLjg0NC0zLjI3OS0yLjI0OC00LjIyOUwyMS41NDksMjAuMjI3eiBNMTUuNTM5LDE0LjA0M2MtMS40NDYsMC0yLjYyLTEuMTczLTIuNjItMi42MTljMC0xLjQ0NywxLjE3NC0yLjYxOSwyLjYyLTIuNjE5ICAgIGMxLjQ0NSwwLDIuNjE5LDEuMTcyLDIuNjE5LDIuNjE5QzE4LjE1OCwxMi44NywxNi45ODQsMTQuMDQzLDE1LjUzOSwxNC4wNDN6IiBmaWxsPSIjMzMzMzMzIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />
<span class="flame"></span>
<span class="flame"></span>
<span class="flame"></span>
</div>
<style>
.scroll-top img{
height:45px;
margin: -12px 0 0 5px;
border:0;
}
.scroll-top {height: 60px; width: 60px; position: fixed; bottom: 100px; right: 30px; display: none; z-index: 9999;}.scroll-top:hover{animation-delay:0s;animation-duration:.1s;animation-iteration-count:infinite;animation-name:shake-little;animation-play-state:running;animation-timing-function:ease-in-out}.scroll-top .flame{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;border-color:#ffda44 transparent transparent;border-style:solid;border-width:25px 3px 3px;display:none;height:0;left:-4px;margin:-5px auto 0;position:absolute;right:0;top:66%;width:0}.scroll-top .flame+.flame{border-width:10px 2px 2px;left:20px;margin:0}.scroll-top .flame+.flame+.flame{border-width:10px 2px 2px;left:auto;margin:0;right:24px}.scrolling .flame{display:block}.nav-toggle,.owl-item .quote-icon,.price-box .price-box-head-shadow,.scroll-top .flame{transition:all .5s cubic-bezier(.25,.1,.25,1) 0s}#keyframes shake-little{0%{transform:translate(0,0) rotate(0)}14%,16%,2%,20%,24%,30%,48%,52%,54%,76%,8%,84%,86%,88%,92%,96%,98%{transform:translate(0,0) rotate(-.5deg)}10%,12%,22%,32%,4%,42%,44%,64%,72%,80%,90%{transform:translate(-1px,0) rotate(-.5deg)}18%,34%,36%,46%,6%,66%,68%,70%,74%,82%,94%{transform:translate(0,-1px) rotate(-.5deg)}26%,28%,38%,40%,50%,56%,58%,60%,62%,78%{transform:translate(-1px,-1px) rotate(-.5deg)}}
</style>
<script type="text/javascript">
// Scroll to top button
wnHeight = jQuery(window).height();
//Check to see if the window is top if not then display button
jQuery(window).scroll(function(){
if (jQuery(this).scrollTop() > wnHeight/2) {
jQuery('.scroll-top').fadeIn();
} else {
jQuery('.scroll-top').fadeOut().removeClass('scrolling');
}
});
//Click event to scroll to top
jQuery('.scroll-top').click(function(){
jQuery('html, body').animate({scrollTop : 0},800);
jQuery(this).addClass('scrolling');
});
</script>
Thanks.
Initialize the button with display: none (in CSS) and it doesn't how at the start of the script
.scroll-top { display: none; }
Then it works with your javascript code.
See it working: https://jsfiddle.net/0d5188ry/2/
I'm a complete novice at javascript so this will probably be really easy for you.My website (http://www.pjsmusic.com) requires a div of 200px when the user scrolls 40px down the page to appear. I have added some javascript
$(document).scroll(function() {
$('#jerkBox').toggle($(this).scrollTop()> 40);
});
However, the div appears when the page loads even as the page isn't scrolled from the top at all. How could I make this div appear when the user scrolls 40px, and disappear when they scroll back up the page past 40px, but not appear on load? You'll see what I mean if you visitthe link. Thanks in advance!
JQuery .toggle() controls the display property of the element. You can set it as display: none on the css right from the start:
#jerkBox {
display: none;
}
$(document).scroll(function() {
$('#jerkBox').toggle($(this).scrollTop()> 40);
});
#jerkBox {
float: right;
width: 200px;
height: 200px;
background: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="jerkBox">
jerkBox div
</div>
<div style="height: 2000px">
</div>
You just have to hide #jerkBox by default. Either in the CSS style of the element, set it to display: none or hide it immediately on document ready in your script.
/* CSS */
#jerkBox {
display: none;
}
or
/* JavaScript */
$(document).ready(function() {
$('#jerkBox').hide();
}
Here is the Fiddle
Can't figure out how to make the DIV close icon to follow the rest of the DIV when the DIV is dragged.
I seem to think there is something in this part of the code that I am not doing right.
$self = $(this);
$(opts.parent).append($self);
$('span.' + opts.classPrefix + '_oClose').remove();
$('body').append($overlayClose);
$('div.' + opts.classPrefix + '_overlay').remove();
$('body').append($overlay);
$self.draggable();
Appears to be something to do with how elements are appended to HTML body. I tried appending a blank div to body and then adding overlay and overlayClose to that blank div. But that did not even render the dialog. Any ideas?
As per Harrys demo http://jsfiddle.net/hari_shanx/8njzxhvx/3/
Line 24 has the magic :) Appending the close to the overlay then enabling the drag
$self.append($overlayClose);
$self.draggable();
I don't know about your code but I think you need a parent div that would be relatively positioned and a child that is absolutely positioned.
HTML
<div id="test">Hello! Trying to figure how to make the close div icon drag along with the div.
<img class="close" src="https://cdn3.iconfinder.com/data/icons/status/100/close_4-512.png" alt="">
</div>
CSS
#test {
background: lightgrey;
padding: 5px;
position: relative;
top: 100px;
}
img.close {
position: absolute;
right: 0px;
top: 0px;
height: 15px;
width: 15px;
cursor: pointer;
}
For dragging I've used jQuery UI:
$( "#test" ).draggable();
$("img.close").click( function(e){
$("#test").fadeOut();
});
I've made a fiddle that explains this:
FIDDLE
Try something like this:
<div id="test">
Close
Hello! Trying to figure how to make the close div icon drag along with the div.</div>
CSS:
.close{
float: right;
top: -31px;
position: relative;
left: 23px;
background:url()// your close icon
}
This will make your anchor tag draggable along with div and you can fire event on anchor tag for closing purpose
I am working on javascript scroll. I have following html code
JSFIDDLE
<div class="wrapper">
<div class="red div current"></div>
<div class="blue div"></div>
<div class="green div"></div>
<div class="yellow div"></div>
</div>
In above code I have four div tags red, blue, green and yellow. All of them are position in following css.
html, body {
height: 100%;
}
.wrapper {
overflow: hidden;
height: 100%;
}
.div {
position: relative;
height: 100%;
}
.red {
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
In above html and css the red div tag is the current one which means user is seeing the red div tag on the screen. Now what I am trying to do is when user scroll over window once, then the next div tag i.e. blue will be animated and moved to the top and will become visible to the user whereas the red div tag will be behind the blue one. This same process goes for both green and yellow.
The problem is that when user scroll once then the div tag should animate however my current javascript code is keep reading the scroll and animating the div tags one after another. What I want is when user scroll once then scroll should be disabled until the blue div tag is animated. Then scroll should be enabled. Again when user scroll second time, the scroll should disable until the green div tag completes its animation. Same goes for yellow.
How can I achieve above?
Here is my javascript
$(window).on("scroll", function () {
var next = $('.current').next();
var height = next.outerHeight();
next.animate({top: '-=' + height}, 500, function () {
$(this).prev().removeClass('current');
$(this).addClass('current');
});
});
Please have a look on update JsFiddle
$(window).on("scroll", function () {
var next = $('.current').next();
var height = $('.current').outerHeight();
$('.current').prevAll().each(function(){
height += $(this).outerHeight();
});
next.animate({top: '-=' + height}, 500, function () {
$(this).prev().css('top','');
$(this).prev().toggleClass('current');
$(this).toggleClass('current');
});
});
The main reason your example wasn't working as expected is because you were relatively positioning the divs, and not moving them to the correct spot.
Working JSFiddle:
http://jsfiddle.net/seanjohnson08/rVVuc/6/
.wrapper {
overflow: hidden;
height: 100%;
position: relative;
}
.div {
position: absolute;
height: 100%;
width: 100%;
top: 100%;
}
.current{
top: 0;
}
If you are looking for a way to limit the amount of scroll events fired, try throttling: http://benalman.com/projects/jquery-throttle-debounce-plugin/. My solution doesn't require this, because no matter how many times it is firing the scroll event, it only ever tells jquery to animate to top:0, there's no chance of it animating past that.
I am trying to built a window located in the center of the screen and when I scroll down it will always be in the center, I have tried the follwing code:
<style>
#Window {
display: none;
text-align: center;
border: 1px solid #333;
position:absolute;
width: 200px;
height: 80px;
z-index:9999;
background:#fff;
border-radius: 5px;
padding: 10px;
}
</style>
<script>
$("#window").css('top', 200);
$("#window").css('left', winW/2- $("#window").width());
$(window).scroll(function () {
var winH = $(window).height();
setTimeout( function(){
$('#alertWindow').animate({'top':winH/2-$("#window").height()/2},200);
}, 1000);
});
</script>
<div id="window">this is scroll window</div>
The problem is that when I scroll down, the window moves to the center at the first time which works, but when I scroll again, it won't keep moving to the center, I think the scroll function is only called once, how can I keep the window move constantly to the center of the creen when I scroll down or up, any one could help me with that, sorry if I did present the whole code.
All you need is css.
Just use position: fixed
You should try taking advantage of Jquery UI's excellent dialog plugin http://jqueryui.com/demos/dialog/. There is an option to update the position of the dialog
$( ".myDialogWindow" ).dialog( "option", "position", 'center' );
as well as being able to theme it with css however you want.