I have a div inside which I have an anchor tag, on click of anchor tag I take its co-ordinates and using javascript I position another div next to it.
Below is my parent div.
<div class="parent1-div>
<div class="parent2-div>
<div class="child-div">
<a (click)="anchorClickEvent($event)"></a>
</div>
</div>
</div>
This is another div, which I have kept separate so it can used elsewhere also,
<div class="movable-div" [ngStyle]="{'left': xPosition, 'top': yPosition}">
This div contains some crazy animation
</div>
On click event:
anchorClickEvent(event: Event){
this.xPos = event.currentTarget['x'] - somePx + 'px';
this.yPos = event.currentTarget['y'] - somePx + 'px';
}
This gives me position relative to whole body, but I need the position of 'child-div' with respect to 'parent-div1', so I can set those position to 'movable-div'.
Inputs are appreciated.
Solved my issue:
On click event I got the offset of anchor tag and subtracted offset of top most container i.e, 'parent1-div'.
anchorClickEvent(event: Event){
this.xPos = Math.round(event.srcElement.getBoundingClientRect().left) - Math.round(event.srcElement.closest('.parent1-div').getBoundingClientRect().left) + 'px';
this.yPos = Math.round(event.srcElement.getBoundingClientRect().top) - Math.round(event.srcElement.closest('.parent1-div').getBoundingClientRect().top) + 'px';
}
And added these styles dynamically to 'movable-div' element, which is position absolute relative to body.
<div class="movable-div" [ngStyle]="{'left': xPos, 'top': yPos}">
This div contains some crazy animation
</div>
Related
Is possible to change div position like( absolute or relative by css) but use java script
Code for example
<div id="podpis" margin-top="2">
<div class="invoice-signature">
<span><?=$xml->sanitize($invoice['Invoice']['user_name'])?></span><br/>
<span>First name and second name osoby uprawnionej do wystawiania faktury</span>
</div>
<div class="invoice-signature">
<span><br/></span><br/>
<span>First name and second name</span>
</div>
<div clear="both"/>
</div>
I want change position of div id="podpis".
Thank you for your answers!
To set the position value:
document.getElementById('podpis').style.position = 'relative';
or
document.getElementById('podpis').style.position = 'absolute';
And based on your comments it sounds to me like you want to have the podpis stay at the bottom of the page no matter what?
//div stays in same place on screen no matter what, even when scrolling
document.getElementById('podpis').style.position = 'fixed';
//div goes to the bottom of the page
document.getElementById('podpis').style.bottom = '0';
Yes you could using :
<script>
document.getElementById('podpis').style.position = 'absolute';
document.getElementById('podpis').style.position = 'relative';
</script>
Hope this helps.
Trying to dynamically resize the div (col with pad) with JavaScript so that it is vertically middle of the parent div (row).
The text blocks vary in size as do the images and there are many of these divs within the page.
I'm quite close to achieving this with the provided code, but the loop seems to be repeating more times than it should and sets the height incorrectly on the last pass, almost like it is halving the space over and over again.
Is there a way to make the JavaScript only run once?
<div class="row">
<div class="col pad">
<p>Text here</p>
</div>
<div class="col">
<img src="image.jpg">
</div>
</div>
$(window).load(function(){
$('.row').each(function() {
var parentDiv = $(this).height();
$('.pad').each(function() {
var childDiv = $(this).height();
var space = parentDiv - childDiv;
var half = space/2;
$(this).css('paddingTop', half + 'px');
alert(half);
});
});
});
I'm unable to use css to achieve this as col are floated.
When I read .html() at the end of this snippet, I get this result :
"
<div style="left: 0px;" class="text">Test1</div><div style="left: 1px;" class="text">Test2</div><div style="left: 2px;" class="text">Test3</div>"
Why all these empty lines?
Note: in the JS part, I detach all the .text elements, apply some modifications on them, and reappend them to the DOM. I need to do that in my real code, for some reasons that would be out of topic here.
$("#blah").append($(".text").detach().each(function(i) {
this.style.left = Math.random() * 10 + 'px'; this.style.top = i*10 + 'px';
}));
console.log($("#blah").html());
.text {position:absolute;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>
<div id="blah">
<div class="text" >Test1</div>
<div class="text" >Test2</div>
<div class="text" >Test3</div>
</div>
You do not need to the detach and append the elements to change their style. You are basically accumulating all the whitespace between elements at the top and moving all the elements below the whitespace.
If your HTML looked like this the problem would not have been visible:
<div id="blah"><div class="text" >Test1</div><div class="text" >Test2</div> <div class="text" >Test3</div></div>
JSFiddle: http://jsfiddle.net/TrueBlueAussie/not1yerc/
Basically do not detach and append. The changes occur on the same JS browser cycle so will not glitch:
$(".text").each(function(i) {
this.style.left = Math.random() * 10 + 'px'; this.style.top = i*10 + 'px';
});
console.log($("#blah").html());
The real problem:
As the real problem is using detach and append to avoid transition-delay styling from firing, the real solution is to remove a specific transition class from the elements, change them, then add that class back.
e.g. have a new transitions class with the transitioning styles:
.transitions{
transition-duration: 0.2s;
}
make sure all your text elements have that class as required. Then your code becomes:
$(".text").each(function(i) {
// Remove the transitions styling class
$(this).removeClass('transitions');
// Change the layout without transitions
this.style.left = Math.random() * 10 + 'px'; this.style.top = i*10 + 'px';
// Restore the transitions styling class
$(this).addClass('transitions');
});
This is much faster than detach and appending DOM elements and will not move the whitespace.
Why all these empty lines?
Because they were in your initial DOM before you moved around nodes. If you have a look at the html source of #blah, you'll find four linebreaks - which are represented in the DOM as whitespace text nodes. Since you didn't remove them, they still reside in the DOM - only with no more <div>s in between them, making the lines empty.
You have empty lines because of the whitespace in your markup. Also, as mentioned by others in comments, you don't need to detach. If you don't want to change your markup, then do a .trim().
Sample Snippet:
$("#blah").find(".text").each(function(i) {
this.style.left = Math.random() * 10 + 'px'; this.style.top = i*10 + 'px';
$(this).appendTo($("#blah"));
});
console.log($("#blah").html().trim());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="blah">
<div class="text" >Test1</div>
<div class="text" >Test2</div>
<div class="text" >Test3</div>
</div>
Alternatively, just remove the whitepsace from your markup in this case. As #trueblueassie mentioned, .trim() could be slow for large chunk of HTML string. And, then you don't even need to .append() to move things around.
<div id="blah"><div class="text" >Test1</div><div class="text" >Test2</div><div class="text" >Test3</div></div>
I am creating a project where I want to be able to drag a div (a drawer) that is (mostly) positioned off the bottom of the screen a fixed distance on the Y axis. The distance I want to move is the height of the div (drawer - minus the drawer handle).
It was pretty easy to get this working from top to bottom, but reversing it is posing to be quite a challenge. I feel like it might just be a simple math error.
I have put together a fiddle to better illustrate the issues I'm having.
http://jsfiddle.net/q8DE6/2/
Here's my code:
HTML
<div id="panelWrapper">
<div id="panel" class="panel">
<p> The height of this drawer is dynamic, and will slide the appropriate amounted based on the height of the content. </p>
<p> Any type of content can be included in here. The body of the drawer and the drawer pull tab can also be styled as you see fit, just modify the css/styles.css file. </p>
<!--necessary div for slide tab, modify as needed, but don't delete -->
<div class="slide">
<a id="drawerSlide" href="#" class="drawer-slide">
<table id="sTab" class="slideTab">
<tr>
<td id="stText1"></td>
<td id="stImg">Pull here.</td>
<td id="stText2"></td>
</tr>
</table>
</a>
</div>
</div><!--/panel -->
</div><!--/panelWrapper -->
<div id="content">
<div id="header">
<div id="menuBar">
<h3>Header Bar Text.</h3>
</div>
</div>
<div id="container">
</div>
<div id="footer">
<p>Footer Area.</p>
</div>
</div><!--/content -->
Slide Function:
JS:
function drawerSlide(slideDir) {
switch (slideDir) {
case 'bottomToTop':
//drawer styling
$('.panel, .slide').addClass('botToTop');
$('.panel').addClass('panelTB');
$('.slide').addClass('slideBotToTop');
$('#sTab').addClass('slideTab');
$('.panel p').filter(":first").css('padding-top','50px');
//hide overflown Y axis content. Hopefully this won't cause any conflicts with your existing code/page.
$('body').css('overflow-y','hidden');
botStartPos = $(window).height() - 50;
offset = $('#panel').offset();
panelHeight = $('#panel').outerHeight();
topEndPos = botStartPos - panelHeight +50;
yPos = botStartPos;
// if you need a different drawer starting point, adjust the starting position here (50).
panelHeight = parseFloat(panelHeight) - 50;
console.log("botStartPos:" + botStartPos);
console.log("topEndPos:" + topEndPos);
console.log("yPos:" + yPos);
$('.panel').css('top', botStartPos);
$('#panel').draggable({
axis: "y",
containment: [0, botStartPos, 0, topEndPos] //0, botStartPos, 300, topEndPos
},
{
drag: function( event, ui ) {
if (yPos > botStartPos || yPos < topEndPos) {
return false;
}
else {
offset = $(this).offset();
yPos = offset.top;
console.log(yPos);
}
}
});
}
}
$(document).ready(function() {
drawerSlide("bottomToTop");
});
I'm thinking the issue might be with the way I'm using the offset.top command to move the drawer, but I'm stumped as to how to do it correctly.
Right now what is happening, is when you click/hold the handle, it "jumps" up the fixed distance, instead of being able to drag it. Also, you can't drag down to put the drawer away, but you can drag up once again and it "jumps" down the fixed distance. Not really what I'm after.
The desired result I'm looking for is one of a typical "drawer" behavior. When the user clicks and holds on the handle, they can "pull" the drawer up the fixed distance, and then "push" it back down the same fixed distance, so the handle never falls off screen.
My guess is it that it's a math problem with the containment function. I still don't fully understand it well, so the problem may lie within the coordinates I'm using?
Any advice would be most appreciated. :)
What im looking to achieve is to modify the margin-left css property of a div when someone slides their finger across the div on an ipad.
To explain what i'm trying to do, I have setup this page:
http://littleirrepressiblewonton.com/wp7/category/all/
Now when someone clicks on a thumbnail image, it loads a horizontal slideshow of large images. Some of the images are too wide to fit on the ipad and they wish to use touch to drag this horizontal slideshow of images left or right.
The way the divs are setup are as follows:
<div class='WontonGalleryFullsMask'>
<div class='WontonGalleryFulls' data-animating='no'>
<div class="WontonGalleryFullImage" data-idx="0" ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster022/2835976114.jpg" alt="VP_test_poster022" /></div>
<div class="WontonGalleryFullImage" data-idx="1" ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster021/663128145.jpg" alt="VP_test_poster021" /></div>
<div class="WontonGalleryFullImage" data-idx="2" ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster020/3945564367.jpg" alt="VP_test_poster020" /></div>
</div>
</div>
The div.WontonGalleryFullsMask has the following css and is setup as a mask.
height: 523px;
overflow: hidden;
width: 100%;
and then the margin-left property of the div.WontonGalleryFulls div is modified to move the gallery left and right.
So if someone slides 300px on the ipad, I need to modify the margin-left css property of the div.WontonGalleryFulls
I'm looking for a jquery solution as the site is already using it.
i ended up modifying a script from http://popdevelop.com/2010/08/touching-the-web/
$.fn.draggable = function() {
var offset = null;
var start = function(e) {
var orig = e.originalEvent;
var ml = parseInt($(this).css('margin-left'));
offset = {
x: orig.changedTouches[0].pageX - ml //pos.left
};
};
var moveMe = function(e) {
e.preventDefault();
var orig = e.originalEvent;
$(this).css({
'margin-left': orig.changedTouches[0].pageX - offset.x
});
};
this.bind("touchstart", start);
this.bind("touchmove", moveMe);
};
$('div.WontonGalleryFulls').css('position', 'absolute');
$('div.WontonGalleryFulls').draggable();