Jquery UI - Resizable: alsoResize not accurate? - javascript

Ok I'm not using the 'alsoResize' but I've tested and it behaves the same.
When you resize the main element, the black border from the bottom element 'marquee' often nudges out of line with the dashed white border from the top element.
$(".layer").resizable({
//alsoResize: '.marquee',
resize: function(event, ui) {
$('.marquee').css({
width : ui.size.width + "px",
height : ui.size.height + "px",
left : ui.position.left + "px",
top : ui.position.top + "px",
});
},
handles: 'all',
aspectRatio: true,
});
http://jsfiddle.net/digitaloutback/uGr3w/3/
Using firebug on a local demo, at the stage they go out of line, you can see the inline element styles for left, top and width, height are different.
I wonder if a work around would be to send the position and size stats to function which outputs an exact measurement to both elements? Any simpler options? Thanks
UPDATE:
I've got a workaround which works cleanly.. it is to pass the resizable-calculated dimensions to a function which sets the top layer to these dimensions also.
I'm sure there's a more efficient method to do this, feel free to offer an optimised version..
http://jsfiddle.net/digitaloutback/VDfpY/5/

There seems to be a discrepancy in the size and position reported by the ui parameter to the resize event, and the actual sizes and positions. This is possibly due to a delay between the ui parameter being built and the event being fired.
I experimented using the actual position and size reported at the time of the event running:
$('.marquee').css({
'left' : $(this).position().left,
'top' : $(this).position().top,
'width' : $(this).width(),
'height' : $(this).height()
});
This seems to match much more precicely the actual dimensions.
http://jsfiddle.net/VDfpY/1/

How about this?
Let the CSS handle the sizes and not the JS
http://jsfiddle.net/HerrSerker/uGr3w/5/
--edit added code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".layer").resizable({
handles: 'all',
aspectRatio: true,
});
});
</script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />
<link type="text/css">
#canvas {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
background: #999}
.marquee {
border: 1px dashed #fff;
position: absolute;
left: -1px; top: -1px;
width: 100%; height: 100%;
display: block;
z-index: 2500;
}
.layer {
border: 1px solid black;
position: absolute;
left: 150px; top: 150px;
width: 250px; height: 226px;
display: block;
z-index: 2501;
}
</link>
<body>
<div id="canvas">
<a class="layer" href="#"><span class="marquee"></span></a>
</div>
</body>

Related

Javascript mousemove function to show element not working as expected

I am trying to to get a mousemove function to display a custom cursor element i created when the mouse is moved inside the specific div. The custom cursor is an absolute positioned div within the div i want it to appear in. The wierd thing i am seeing is i can see from the developer tools that it is infact working but the custom cursor doesnt actually show. If i however move the custom cursor div outside of the div i want it in and into the main body it displays fine.
I know this must be a simple error on my part but i cant see it! Appreciate any advice.
let customCursor = document.querySelector('.custom-cursor');
const section2 = document.querySelector('.section2');
section2.addEventListener('mousemove', function(e) {
customCursor.classList.add('active');
customCursor.setAttribute("style", "top:" + (e.pageY) + "px; left: " + e.pageX + "px;");
});
section2.addEventListener('mouseleave', function() {
customCursor.classList.remove('active');
});
.section {
position: relative;
}
.section1 {
height: 500px;
}
.section2 {
height: 500px;
}
.custom-cursor {
width: 50px;
height: 50px;
background: black;
border-radius: 50%;
display: none;
position: absolute;
}
.custom-cursor.active {
display: block;
}
<body>
<section class="section1 section">Section 1</section>
<section class="section2 section">Section 2
<div class="custom-cursor"></div>
</section>
</body>
Like #Titus comment, you can use CSS with cursor.
But if you implemeting it with JS that need to track position of your mouse relative to section2, you will need to subtract the section2 element offset left and top, then subtract half of the cursor width and height to center the cursor:
let customCursor = document.querySelector('.custom-cursor');
const section2 = document.querySelector('.section2');
section2.addEventListener('mousemove', function(e) {
customCursor.classList.add('active');
customCursor.setAttribute("style", "top:" + (e.pageY - section2.offsetTop - (customCursor.offsetWidth/2) ) + "px; left: " + (e.pageX - section2.offsetLeft - (customCursor.offsetHeight/2)) + "px;");
});
section2.addEventListener('mouseleave', function() {
customCursor.classList.remove('active');
});
.section {
position: relative;
}
.section1 {
height: 500px;
}
.section2 {
height: 500px;
}
.custom-cursor {
width: 50px;
height: 50px;
background: black;
border-radius: 50%;
display: none;
position: absolute;
}
.custom-cursor.active {
display: block;
}
<body>
<section class="section1 section">Section 1</section>
<section class="section2 section">Section 2
<div class="custom-cursor"></div>
</section>
</body>
position: absolute
is relative to the parent if the parent has
position:relative
so in order to have the correct position within your section2, you need to use e.layerY and e.layerX instead of e.pageY and e.pageX since those are based on the top left corner of your screen. e.layerY and e.layerX is relative to the container that the mouseevent is attached to.
Try this: https://jsfiddle.net/42kq1w8m/9/

JQuery Offset issue when div position is fixed

I have a website which has a page layout and style something like mentioned in this JsFiddle
Now Using JQuery when I click on the button, content is being displayed properly as shown below:
But when I first scroll the page and then click the button, content is not displaying properly as shown:
Can you please guide me to handle this situation ?
I have used below jQuery for this. But it seems offset or position is not working
$('#btn').click(function(){
var t = $(this).offset();
console.log(t);
$('.control-container').css('top', t.top + 20 + 'px');
$('.control-container').css('display', 'block');
});
$(document).on('scroll', function(){
$('.control-container').css('display', 'none');
});
You don't need to use offset to achieve that... And if you need to keep CSS with position:fixed, you need to switch it in javascript to static.
The thing you are looking for is simply display:table ...
$('#btn').click(function(){
$('.control-container').css({'display': 'table','position': 'static'});
});
$(document).on('scroll', function(){
$('.control-container').css({'display': 'none','position': 'fixed'});
});
Check out this JSFiddle
But if you really need a solution with position:fixed based on button position, you should try this way:
$('#btn').click(function(){
var button_fixed_position = $('#btn').get(0).getBoundingClientRect();
$('.control-container').css({'display': 'block','left' : button_fixed_position.left, 'top' : button_fixed_position.bottom});
});
$(document).on('scroll', function(){
$('.control-container').css({'display': 'none'});
});
Check out second JSFiddle
There is no need to specifically mention position property here.
Also remove the closing a tag and replace it with </button>
Currently container is occupying full width ,but that can also be set
$('#btn').click(function() {
var t = $(this).offset();
console.log(t);
$('.control-container').css('top', t.top + 30 + 'px');
$('.control-container').css('display', 'block');
});
$(document).on('scroll', function() {
$('.control-container').css('display', 'none');
});
.header {
background-color: maroon;
color: #fafafa;
height: 60px;
position: fixed;
width: 100%;
text-align: center;
line-height: 19px;
font-size: 25px;
z-index: 2;
padding: 0px;
margin: 0px;
top: 0;
}
.content {
background-color: #fff;
border: 1px solid #999;
padding: 5px;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
top: 60px;
}
.control-container {
width: auto;
background-color: red;
#position: fixed;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
Header
</div>
<div style="clear:both">
</div>
<div class="content">
<br/>
<br/>
<br/>
<br/>
<br/>
<button id="btn">Click Me</button>
<div class="control-container" style="display:none;">
Keep me exactly underneath 'Click Me' when Page is scrolled.
</div>
</div>
</div>
CSS position fixed property positions an element referencing view's/body's dimension.
If you have access of modifying CSS, then just remove the position: fixed; property from .control-container.
If you don't have access, then using script add position: static !important property to .control-container.
$('.control-container').css('cssText', 'position: static !important');
Modified JSFiddle

jQuery .height() return 0 when visible but non-0 when hidden

I have problem here right opposite like others: in jQuery I cannot get height of element when it's visible, but when hidden. I have this HTML code:
<div id="filtering-filter-holder">
<div id="filtering-filter-holder-inner"></div>
</div>
basic CSS for it:
#filtering-filter-holder {
display: none;
position: absolute;
width: 420px;
min-height: 100px;
padding: 5px 5px 5px 5px;
background-color: #ffffff;
border: 1px solid #164372;
}
and finally, JS in document.ready():
$('div.filtering-filter-headline').mouseenter(function() {
var el = $(this).parent().find('div.filtering-filter-content');
if ($('div#filtering-filter-holder').is(':visible')) {
$('div#filtering-filter-holder-inner').stop(true, true).fadeOut(300, function() {
$('div#filtering-filter-holder-inner').html($(el).html());
var height = $('div#filtering-filter-holder-inner').height();
$('div#filtering-filter-holder').stop(true, true).animate({ height:height }, 300);
}).fadeIn(300);
$('div#filtering-filter-holder').stop(true, true).animate({ left: $(this).offset().left }, 300);
}
else {
$('div#filtering-filter-holder-inner').html($(el).html());
$('div#filtering-filter-holder').css({ top: ($(this).offset().top + 22), left: $(this).offset().left });
$('div#filtering-filter-holder').fadeIn(300);
$('div#filtering-filter-holder-inner').fadeOut(1, function() {
var height = $('div#filtering-filter-holder-inner').height(); // not working without hidding this element
$('div#filtering-filter-holder').height(height);
}).fadeIn(1);
}
});
If filtering-filter-holder is visible, then some animations are added. If not, initial setup is required - however, I'm not able to get height of filtering-filter-holder-inner if element is display: block, and I have to hide it before. I'm wondering, what I have done in bad way - as Google says, developers have problem with opposite problem.
I would like to know why I have to hide element first.
I'm able to use both, jQuery and jQueryUI, as both is loaded on page:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
The example is on: http://jsfiddle.net/tomis/jDWbK/

Multiple line jquery tooltip

How to make custom jquery tooltip appear as multiple line that adjusts to fixed width? So it not go in one long line (if 'title' attribute is very long). Because Now if I write long 'title' attribute, tooltip is displayed on one long line and it does not matter what width is set to tooltip element.
My code to get better understanding of what I'm asking:
http://jsfiddle.net/8XttH/
jquery code:
$(document).ready(function() {
$("body").append("<div class='tip'></div>");
$("p[title]").each(function() {
$(this).hover(function(e) {
$().mousemove(function(e) {
var tipY = e.pageY + 16;
var tipX = e.pageX + 16;
$(".tip").css({'top': tipY, 'left': tipX});
});
$(".tip")
.html($(this).attr('title'))
.stop(true,true)
.fadeIn("fast");
$(this).removeAttr('title');
}, function() {
$(".tip")
.stop(true,true)
.fadeOut("fast");
$(this).attr('title', $(".tip").html());
});
});
});
Set a max-width on the tool tip box?
max-width: 100px;
Also set the height to auto so it increases as needed
height: auto;
The text will then wrap to the next line.
See this fiddle
Use this css
div.tip{
position: absolute;
top: 100px;
left: 100px;
width:100px;
border: 2px solid #FF0000;
background-color: #FF9999;
display: none;
padding: 3px;
}
Fiddle: http://jsfiddle.net/8XttH/2/

How to keep a floating div centered on window resize (jQuery/CSS)

Is there a way (without binding to the window.resize event) to force a floating DIV to re-center itself when the browser window is resized?
To help explain, I imagine the pseudocode would look something like:
div.left = 50% - (div.width / 2)
div.top = 50% - (div.height / 2)
UPDATE
My query having been answered below, I wanted to post the final outcome of my quest - a jQuery extension method allowing you to center any block element - hope it helps someone else too.
jQuery.fn.center = function() {
var container = $(window);
var top = -this.height() / 2;
var left = -this.width() / 2;
return this.css('position', 'absolute').css({ 'margin-left': left + 'px', 'margin-top': top + 'px', 'left': '50%', 'top': '50%' });
}
Usage:
$('#mydiv').center();
This is easy to do with CSS if you have a fixed-size div:
.keepcentered {
position: absolute;
left: 50%; /* Start with top left in the center */
top: 50%;
width: 200px; /* The fixed width... */
height: 100px; /* ...and height */
margin-left: -100px; /* Shift over half the width */
margin-top: -50px; /* Shift up half the height */
border: 1px solid black; /* Just for demo */
}
The problem, of course, is that fixed-size elements aren't ideal.
The simplest way would be with the following CSS code:
#floating-div {
width: 50%;
border: 1px solid gray;
margin: 0 auto;
}
The key line of CSS code above is the "margin: 0 auto;" which tells the browser to automatically set the left/right margins to keep the div centered on the page, even when you resize the browser window.
Try this little article about Horizontal and Vertical centering. It is a little old and has a few hacks but you should be able to work out some test code from it.

Categories