I have a widget in my ui that resides in a fixed location on the right bottom corner of my browser.
I want the user to be able to click on the header portion of the widget and be able to drag it upwards and effectively increase the height of the widget. The widgets bottom, left, and right properties would be unchanged but top should be able to change to allow up to the max height of the widget as defined by it's css max-height.
Are there any examples of something like this out there? I know jQueryUI has the resizable behavior but unfortunately I cannot use jQueryUI on this project. We are however using jQuery.
Any tips or ideas or jsfiddle exaples are greatly appreciated. Just something to get me going in the right direction. I looked a CSS3 resizable and it puts that standard resizing icon in the right bottom corner, like this textarea.
Perhaps this plugin can help?
http://dev.iceburg.net/jquery/jqDnR/
It is possible to do this with just jQuery. Off the top of my head, you could probably do something like this:
<div id="widget">
<h3 id="widget-header">Header</h3>
some content
</div>
<script language="javascript" type="text/javascript">
var clientY = 0;
var offset = null;
var changeSize = false;
$(function () {
$("#widget-header")
.mousedown(function (event) {
clientY = event.pageY;
offset = $("#widget").offset();
changeSize = true;
})
.mousemove(function (event) {
if (changeSize) {
// get the changes
var difY = event.pageY - clientY;
offset.top += difY;
// animate the changes
$("#widget").offset({ top: offset.top, left: offset.left });
$("#widget").height($("#widget").height() - difY);
// update the new positions
clientY = event.pageY;
}
})
.mouseup(function (event) { changeSize = false; })
.mouseout(function(event) { changeSize = false; });
});
</script>
Related
I want to read mouse position from an iframe. I am doing it with this implementation:
$($("#sublime-scroll-iframe").contents()[0], window).find('body').bind("mousedown",
function(e) {
console.log("x:" + (e.pageX) + ", y:" + e.pageY);
}
);
My working example: http://jsfiddle.net/s37e1ro0/1/ but
I can't make it to work with demux's sublime-scroll js script. Output is window coordinates or nothing.
Sublime-scroll example: http://django.is/ or you can download example files from https://github.com/demux/sublime-scroll
The reason is, demux's script actually doesn't work completely as Sublime scroll. For example. In sublime, you see part of code, and you click on that part, sublime scrolls to that part code. That isn't the situation with demux's script. Clicking on part of page doesn't scroll to that part of the page. It scrolls to position of ratio between window and whole document.
I couldn't find a reason why it's not working. Does anyone have any idea?
Or if anyone have an idea to do it without mouse coordinates?
$(document).ready(function() {
$.sublimeScroll({
top: 60, // px to top
bottom: 40, // px to bottom
scrollWidth: 200, // Width of scrollbar
removeElements: 'script',
fixedElements: 'header.top, footer.bottom',
contentWidth: 860, // Scroll viewport width
minWidth: 800 // Min width of window to display scroll
});
$("#sublime-scroll-overlay").css('display', 'none');
var sscIfBody = $($("#sublime-scroll-iframe").contents()[0], window).find('body');
var sscIfBar = $("#sublime-scroll-bar", sscIfBody);
var sHold = false;
var sDeltaY = 0;
sscIfBody.bind("mousedown", function(e) {
window.scrollTo(e.pageX, e.pageY - window.innerHeight / 2);
e.preventDefault();
});
sscIfBar.bind('mousedown', function(e) {
sDeltaY = e.offsetY === undefined ? e.originalEvent.layerY : e.offsetY;
sHold = true;
e.stopPropagation();
e.preventDefault();
});
sscIfBody.bind("mouseup", function(e) {
sHold = false;
});
sscIfBody.bind("mousemove", function(e) {
if (sHold)
window.scrollTo(e.pageX, e.pageY - sDeltaY);
});
});
That's it. Now it's working same as Sublime's scroll. Enjoy!
I wanted to achieve an effect like this http://www.offset.com/
as you can see when it scrolls it slowly covering the carousel rather than scrolling with it.
I've tried using background fixed but the problem is the elements inside it will not stay in its position
Maybe there is a good technique in achieving this, Thanks
this is called parallax scrolling here is an example of how to do this using Jquery :
Live Demo
// Y axis scroll speed
var velocity = 0.5;
function update(){
var pos = $(window).scrollTop();
$('.container').each(function() {
var $element = $(this);
// subtract some from the height b/c of the padding
var height = $element.height()-18;
$(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px');
});
};
$(window).bind('scroll', update);
an other example it might help DEMO
So I am trying to show a tooltip like box as I scroll my webpage and I would like it to follow the scrollbar along the right side of the page.
I looked around and found something to attempt to accomplish that as shown below:
function returnPercentHeight(){
var a = document.getElementById('rightPanel').scrollTop;
var b = document.getElementById('rightPanel').scrollHeight - document.getElementById('rightPanel').clientHeight;
return ((a/b) * 100);
}
I then append a % to the end and set the top margin of the tooltip to that returned value. This works pretty well (sort of) I have to adjust the return((a/b) * x) part (x) to make it follow the scrollbar based on the size of the browser window. Is there a better way to accomplish what I am trying to do? (NOTE: I can only use javascript, no JQuery please.)
EDIT:
Only the div given an ID of 'RightPanel' is scrolling, I am not using the scrollbar on the browser, but a scrollbar on an inner div.
There are three ways to do so:
First:
is to use the fixed position as following;
Position: Fixed;
Second:
With jQuery;
$(function(){
$(window).on('scroll', function() {
var scrollPOS = $(document).scrollTop();
$('.scroll').css({
top: scrollPOS
});
}).scroll();
});
Third:
Same as the previous, only animated;
$(window).on('scroll', function() {
$("#div").stop().animate({
"marginTop": ($(window).scrollTop()) + "px",
"marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});
Although IE doesn't support, this is the coolest I've seen:
// get
var x = window.scrollX,
y = window.scrollY;
// set
window.scrollTo(1, 2);
So I have this 100% witdh container with lots of images in it. I would like to pan it horizontally when I mouseover the parent container.
I've come quite far but I have a few problems.
Here is the fiddle
First I have to set the margin left to be percentage based, else it wont show all the images. To do this, I have to get the full width of the inner container, but I'm unable to do this.
$('.merken').mousemove(function (event) {
var left = event.pageX;
$('.slider').css({
'margin-left': '-' + left + 'px'
});
});
The thumb-container now has a fixed width, but i need to make this an auto width. Right now this makes sure that the images in the container dont show one-by-one. How do I fix this?
.thumb-container { width:2000px;}
Thanks
You can do something like this:
Fiddle
$('.merken').mousemove(function(event){
var left = (event.pageX*100)/$('.thumb-container').width();
$('.slider').css({
'margin-left': '-'+left+'%'
});
});
and
.thumb-container{
width:200%;
}
I'm not sure about what you want to do. But I think that you should use the .width() jquery method:
$('.merken').mousemove(function(event){
var left = event.pageX;
var percentleft = left/$('.merken').width();
var sliderleft = $('.slider').width()*percentleft;
$('.slider').css({
'margin-left': '-'+sliderleft+'px'
});
});
For those intrested, fixed it like this:
var conb = $('.slider').width();
$('.merken').mousemove(function(event){
var left = (event.pageX*100)/conb;
$('.slider').css({
'margin-left': '-'+left+'%'
});
});
I'm a bit stumped here. I am developing a feedback utility that will allow the user to "draw" boxes on a web page to highlight problem areas. Right now I have an overlay DIV that fills the screen and jQuery allows you to draw red outlined DIVs by clicking and dragging.
Here is the JS:
{
var $feedbackOverlay = jQuery('#feedbackOverlay');
var $original = { top: 0, left:0 };
$feedbackOverlay.bind('mousedown', function (e)
{
jQuery('<div id="currentHighlight"></div>')
.css('width', '1px')
.css('height', '1px')
.css('border', 'solid 3px #ff0000')
.css('border-radius', '5px')
.css('position', 'absolute')
.css('left', e.pageX)
.css('top', e.pageY)
.css('z-index', '8000001')
.appendTo('body');
$original = { top: e.pageY, left: e.pageX };
});
$feedbackOverlay.bind('mousemove', function (e)
{
var $currentHighlight = jQuery('#currentHighlight');
if ($currentHighlight.length > 0)
{
var $pos = { top: e.pageY, left: e.pageX };
if($pos.top < $original.top) $currentHighlight.css('top', $pos.top);
if ($pos.left < $original.left) $currentHighlight.css('left', $pos.left);
$currentHighlight.height(Math.abs($pos.top - $original.top));
$currentHighlight.width(Math.abs($pos.left - $original.left));
}
});
$feedbackOverlay.bind('mouseup', function (e)
{
var $currentHighlight = jQuery('#currentHighlight');
$currentHighlight.removeAttr('id');
});
var $feedbackInstructions = jQuery('#feedbackInstructions');
$feedbackInstructions.fadeIn(1000, function ()
{
setTimeout(function ()
{
$feedbackInstructions.fadeOut(1000);
}, 3000);
});
$feedbackOverlay.height(jQuery(document).height());
});
Here is a jsFiddle for the above:
http://jsfiddle.net/Chevex/RSYTq/
The problem is that I can't drag the boxes up or left. The first click puts the top left corner where the mouse clicked. After that subsequent dragging will change the width of the box. Letting go of the mouse completes the box and you may then start drawing another one. If you try to drag the DIV left or up while drawing it's width will remain at 0 but won't go negative.
Here you can find working solution: http://jsfiddle.net/RSYTq/34/
Something like this will get you closer to what you want: http://jsfiddle.net/RSYTq/18/
Doesn't quite handle move up and to the left and then switching to moving down and to the right quite right yet but it gives you the idea.
There's no such thing a a negative width - these are not coorindinates. You need to reposition and recalculate the corner positions relative to the corner that's not being moved.
Sounds like you need to check if the click origin (x,y) is > than the current mouse position, and then swap which one you use for the CSS top-left.
You would need to track the original start point somewhere (variables, data attributes on #currentHighlight, wherever you want), and check for width or height < 0. When so, set the #currentHighlight left/top CSS to be offset by original + (e.pageX - $currentHighlight.position().left) (for example). Then set the #currentHighlight width/height to the same difference (but positive: (e.pageX - $currentHighlight.position().left) * -1).