I'm running into a small issue when using Mootools 1.4.5 and the Drag Fx. The problem is that the cursor looses focus when dragging (to the left) because there is a iframe there. I understand why it happens but don't know how to prevent it! Unfortunately, I have to use iframe :(
I'm looking for a solution that either: 1) Prevents the loss of focus or 2) Prevents the mouse from leaving the div area.
Any help would be much appreciated and thanks in advance.
jsfiddle - Here
Code:
Html:
<div id="wrap" class="wrap">
<div id="left" class="left">
<div id="drag" class="drag"></div>
<div id="leftContent" class="leftContent">
<iframe src="http://www.bing.com/"></iframe>
</div>
</div>
<div id="right" class="right">
<p>You can use the middle slider to adjust the size of the left div which is very cool. But the problem lies when the mouse enters the iframe during the dragging process. This seems to cause a loss of 'focus'. I would find to find a solution that:</p>
<ul>
<li>1) Prevents the loss of focus.</li>or
<li>2) Prevents the mouse from leaving the div area.</li>
</ul>
</div>
</div>
Mootools/js:
var leftDrag = new Drag(left, {
modifiers: {
x: 'width',
y: false
},
limit: {
x: [65, wrap.getSize().x - 65]
},
onDrag: function () {
var l = left.getSize().x;
right.setStyles({
left: l
});
}
}).detach();
drag.addEvents({
mouseenter: function () {
this.focus();
leftDrag.attach();
},
mouseleave: function () {
leftDrag.detach();
}
//I have have also tried mousedown/mouseup with no luck
});
CSS:
html {
padding:0;
margin:0;
overflow:hidden;
}
p {
text-align:center;
}
.left {
position:absolute;
left:0;
right:50%;
top:0;
bottom:0;
background:azure;
}
.leftContent {
position:absolute;
left:0;
right:5px;
top:0;
bottom:0;
}
.drag {
position:absolute;
width:5px;
top:0;
bottom:0;
right:0;
background:red;
border:1px solid black;
cursor:e-resize;
}
.right {
position:absolute;
left:50%;
right:0;
top:0;
bottom:0;
background:yellow;
}
iframe {
height:99%;
width:99%;
border:none;
}
EDIT - I wound up figuring it out! I just needed to add (this.setCapture/releaseCapture) into the addEvents of the element. I also switched out the mouseenter/mouseleave with mousedown/mouse up. I updated the jsfiddle which can be seen HERE. Mootools is an awesome library but their documentation is a bit lacking which leads to a lot of guess work :( but luckily for us there is this forum and jsfiddle!
I wound up figuring it out! I just needed to add (this.setCapture/releaseCapture) into the addEvents of the element. I also switched out the mouseenter/mouseleave with mousedown/mouse up. I updated the jsfiddle which can be seen HERE. Mootools is an awesome library but their documentation is a bit lacking which leads to a lot of guess work :( but luckily for us there is this forum and jsfiddle!
yourelementid.addEvents({
mousedown:function(){
this.setCapture();
..put your code here element.drag({});
},
mouseup:function(){
this.releaseCapture();
}
});
Related
Hi i am doing a Vanilla JS practice to learn how to animate the margins using vanilla JS conditionals.
I am trying to make 2 divs (side by side on another) slide open towards the sides when you click on it, like a sliding door.
I want to do this with just vanilla JS even though I know that it is possible with CSS.
My function isn't working and I don't know why it isn't as the browser isn't showing any errors.
I intend to increase the right margin of the left door to create the opening effect, but I'm not sure if thats the correct direction to go about it.
Here's my code:
JS:
function opena(className){
var dura = 2;
var eleme= document.getElementsByClassName(className)[0];
var jupiter = eleme.style.marginRight;
var mars =eleme.style.marginLeft;
window.setInterval(()=>{
if(eleme.classList.contains('left')){
if(jupiter!=50){
jupiter++;
jupiter+"vw";
}
}else if(eleme.classList.contains('right')){
if(mars!=50){
mars++;
mars+"vw";
}
}
},dura)
}
css:
.pack{
width:100%;
}
body{
margin-left:0;
margin-right:0;
}
.left{
background:red;
display:inline-block;
width:50vw;
margin-left:0;
margin-right:0;
}
.right{
background:blue;
display:inline-block;
position:absolute;
width:50vw;
padding-left:0;
margin-left:0;
margiin-right:0;
}
*
*HTML:**
<body>
<div class="pack">
<div class="left" onClick="opena('left')">A</div>
<div class ="right" onClick="opena('right')">B</div>
</div>
</body>
Thanks for any assistance rendered!
I'm trying to get from this:
To this
While scrolling down about half of the picture. The header wont be visible after scrolling past the menu. Does anyone have any ideas on how to achieve this?
There is some ways to achieve that, since you are not sharing any code it is hard to explain anything better, you can listen to changes on the background where the scroll is , and based on that number update the position of your title, i ll let you here a simple example that you can test on your own to see what i mean
If there is anything you dont understand feel free to ask, or discuss about
HTML
<div id="box">
<div id="box-to-force-scroll">
<div id="title"> title </div>
</div>
</div>
CSS
#box {
width:100px;
height:100px;
background-color:blue;
overflow:auto;
}
#box-to-force-scroll {
width:100px;
height:1000px;
}
#title {
font-size:20px;
position:absolute;
top:10px;
left:10px;
color:white;
text-transform:uppercase;
}
JS
document.getElementById('box').addEventListener('scroll', function(el) {
// random math just to show it moving
let scrollTop = el.target.scrollTop
let newVal = 10 + ( parseInt(scrollTop, 10) / 3)
document.getElementById('title').style.top = `${newVal}px`
})
I'm using jQuery 10.4.2 at the moment. I want to smoothly scale up an absolute positioned image. When I use the following code, I get no errors, but the animation does not occur. Instead, the image simply snaps to the full (100%) size.
HTML
<div class="box">
<img class="scaleMe" src="img.gif" />
</div>
CSS
.box { position:relative; height:0; padding-bottom:61.6667%; background-image:url('background.gif'); }
.scaleMe { display:block; position:absolute; bottom:0; left:0; z-index:1; width:50%; }
JS
$('.scaleMe').animate({width:'100%'}, 2000);
What am I doing wrong?
Update:
Here is a jsFiddle that works: http://jsfiddle.net/s_d_p/27DhK/
But here is a live demo that doesn't work.
You don't have a src on your image tag. Try:
<div class="box">
<img class="scaleMe" src="http://placekitten.com/g/200/300" />
</div>
http://jsfiddle.net/GZ8yX/
This is kind of lame, but if I capture the target width first and animate to that pixel value and then replace it with a percentage it works:
var oli = $('.scaleMe');
var toWidth = $('.box').width();
var scaleUP = function() {
oli.animate({width:toWidth}, 2000, function(){
oli.removeAttr("style");
oli.css("width", "100%");
});
}
I want to achieve hide/show with div's in html but in this way.
Here is my html:
<div id="left"></div>
<div id="middle">
<input type="button" id="button"/>
</div>
<div id="right"></div>
And this is my css:
body
{
height: 100%;
margin: 0;
padding: 0 ;
border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
float:left;
}
#center
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
float:left;
margin:0;
}
#right
{
background-color:#D4EAE4;
float:left;
width:11%;
height:570px;
margin:0;
}
I want to do that when I click button on div center to hide div right and to expand divleft for the size of the div right and then move div center all the way to the right. I want to hide/show them with horizontal animation, such as from left to right or right to left.
Playing with the words can be tricky so I made a little pictures so you can actually see what am I talking about:
Start phase:
And end phase:
You can see a working demo here... http://jsfiddle.net/miqdad/3WDbz/
or you can see other demo which increment width of first div here .. http://jsfiddle.net/miqdad/3WDbz/1/
I had almost the same question a couple of days ago and maybe it helps you too.
this example uses a checkbox to hide the div. and make the other div 100% width.
javascript, When right div is hidden left div has to be 100% width.
the javascript code from the example:
$(function() {
$("#foo").on("click",function() {
if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
$('#checked-b').css("width","60%");
$('#checked-a').css("width","40%");
}) ;
else $('#checked-a').show('fast',function(){
$('#checked-b').css("width","100%").show();
$('#checked-a').css("width","0%").hide();
});
});
});
and an example:
http://jsfiddle.net/mplungjan/5rdXh/
This is one of the best ways to hide a div element using JavaScript:
<html>
<head>
<script>
function hideDiv() {
document.getElementById("myP2").style.visibility = "hidden";
}
</script>
</head>
<body>
<button onClick="hideDiv()">Hide</button>
<br>
<br>
<p id="myP2">Hello world!</p>
</body>
</html>
Implementing with JQuery is easy. Have a look at this JSFiddle example: http://jsfiddle.net/q39wv/2/
(To all: Normally I wouldn't put only a JSFiddle link here, but this time I think it's worth showing the OP how the whole thing works, with some adjustments to his HTML and CSS).
A Javascript-only solution would be much more difficult to implement.
Using jquery's .css() i am changing the left attributes value to move a div left or right. Im looking for a way to animate this change as it occurs. Nothing ive tried is working, ive tried jQueryUI's .show(slide) function, but this moves the whole div, rather than just the 120px movement i need.
This is my current function which is working without an animation:
$('#plrt').live("click",function(){
var lm=$('.plwid').css("left");
lm = (parseInt(lm) + 120);
$('.plwid').css("left", lm);
});
this is the slide function, it does not work properly as the whole div goes from display:hide to display:show, rather than just moving the pixel change
try animate()
$('#plrt').on("click",function(){
$('.plwid').animate({ left: '+=120' }, 400 );
});
I have whipped up a quick example of what I think you are trying to achieve.
You should check out jQuery Animate.
//note live is deprecated
$('#plrt').on("click", function() {
//perform custom animation to add 120px to current left CSS position
$('.plwid').animate({
left: '+=120'
});
});
#plrt{
position:relative;
background:red;
width:100px;
height:100px;
cursor:pointer;
}
.plwid{
position:absolute;
background:blue;
width:100px;
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="plrt"></div>
<div class="plwid"></div>
try this http://api.jquery.com/animate/
$('#plrt').on('click', function() {
$('.plwid').animate({ left: '+=120', 5000 });
});