Sorry for the ambiguous title, not sure how to phrase it.
I have an html page that has 2 iframes side by side with 100% height. I'm trying to set the maximum width of the iframe on right.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<div id="content-wrapper">
<div id="content">
<div id="holder_Iframe1">
<iframe id="iframe1" src="https://en.wikipedia.org/wiki/Mercedes-Benz"></iframe>
<div id="drag"></div>
</div>
<div id="holder_Iframe2">
<iframe id="iframe2" src="http://www.dictionary.com/browse/mercedes?s=t"></iframe>
</div>
</div>
</div>
</body>
</html>
Both iframes are wrapped by divs. Hover the mouse between the iframes to be see the re-size cursor.
I'm setting a maximum width of the iframe2 (the one on the right) of 560px, but when resizing, sometimes it passes that maximum width so I can't resize it back. I'm trying to fix that.
function Resize(e) {
var rightPanePx = document.documentElement.clientWidth - parseInt(holder_Iframe1.style.width, 10);
console.log(rightPanePx);
if ((rightPanePx >= 25) && (rightPanePx <= 560)) {
holder_Iframe1.style.width = (e.clientX - holder_Iframe1.offsetLeft) + "px";
iframe1.style.width = Math.max((holder_Iframe1.style.width.replace("px", "") - 4), 0) + "px";
holder_Iframe2.style.width = (document.documentElement.clientWidth - holder_Iframe1.style.width.replace("px", "")) + "px";
iframe2.style.width = holder_Iframe2.style.width;
}
}
I have attached the code that demonstrates my problem.
var iframe1 = document.getElementById("iframe1");
var iframe2 = document.getElementById("iframe2");
var holder_Iframe1 = document.getElementById("holder_Iframe1");
var holder_Iframe2 = document.getElementById("holder_Iframe2");
var dragEl = document.getElementById("drag");
holder_Iframe1.style.width = (Math.max(document.documentElement.clientWidth, window.innerWidth || 0) * 0.8) + "px";
iframe1.style.cssText = 'width:' + ((Math.max(document.documentElement.clientWidth, window.innerWidth || 0) * 0.8) - 5) + 'px;height:100%;';
dragEl.addEventListener('mousedown', function(e) {
//create overlay so we will always get event notification even though the pointer is hovering iframes
var overlay = document.createElement('div');
overlay.id = "overlay";
document.body.insertBefore(overlay, document.body.firstChild);
window.addEventListener('mousemove', Resize, false);
window.addEventListener('mouseup', stopResize, false);
}, false);
function Resize(e) {
var rightPanePx = document.documentElement.clientWidth - parseInt(holder_Iframe1.style.width, 10);
console.log(rightPanePx);
if ((rightPanePx >= 25) && (rightPanePx <= 560)) {
holder_Iframe1.style.width = (e.clientX - holder_Iframe1.offsetLeft) + "px";
iframe1.style.width = Math.max((holder_Iframe1.style.width.replace("px", "") - 4), 0) + "px";
holder_Iframe2.style.width = (document.documentElement.clientWidth - holder_Iframe1.style.width.replace("px", "")) + "px";
iframe2.style.width = holder_Iframe2.style.width;
}
}
function stopResize(e) {
//remove event listeners from improved performance
window.removeEventListener('mousemove', Resize, false);
window.removeEventListener('mouseup', stopResize, false);
//remove fake overlay
document.getElementById("overlay").remove();
}
html {
overflow-y: hidden;
}
body {
width: 100%;
}
iframe,
#holder_Iframe1,
#holder_Iframe2 {
margin: 0;
padding: 0;
border: 0;
}
iframe {
width: 100%;
height: 100%;
min-width: 0;
}
#content-wrapper {
display: table;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: absolute;
}
#content {
display: table-row;
}
#holder_Iframe1,
#holder_Iframe2 {
display: table-cell;
min-width: 0 !important;
}
#holder_Iframe1 {
width: 80%;
}
#drag {
height: 100%;
width: 3px;
cursor: col-resize;
background-color: rgb(255, 0, 0);
float: right;
}
#drag:hover {
background-color: rgb(0, 255, 0);
}
#drag:active {
background-color: rgb(0, 0, 255);
}
#overlay {
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
cursor: col-resize;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<div id="content-wrapper">
<div id="content">
<div id="holder_Iframe1">
<iframe id="iframe1" src="https://en.wikipedia.org/wiki/Mercedes-Benz"></iframe>
<div id="drag"></div>
</div>
<div id="holder_Iframe2">
<iframe id="iframe2" src="http://www.dictionary.com/browse/mercedes?s=t"></iframe>
</div>
</div>
</div>
</body>
</html>
You need to use cursor's position to detect where the direction is.
By adding e.pageX to your function to determine whether resize it or not.
In your sample this may be if (window_size - e.pageX < 560) go resize it, otherwise don't resize.
Related
I'm trying to make my div element move back and forth inside a container infinitely.
The goal is to use Java Script only, no CSS animations, jQuery, etc.
const container = document.getElementById('container');
const box = document.getElementById('box');
let t = setInterval(move, 1);
let pos = 1;
function move() {
box.style.left = pos + 'px';
box.style.top = pos + 'px';
pos++;
if (pos === 150) {
clearInterval(t)
}
}
#container{
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
#box{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
animation-direction: alternate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<link href="animation.css" rel="stylesheet">
<script defer src="animation.js"></script>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
</body>
</html>
So here the code. As you see, I've used position relative/absolute to make the element move with setInterval function. But when I try to reverse it back to "it's corner", it just won't work. To be honest, I've tried some stuff already, but I really can't find the solution of doing it without using any other instruments.
Thanks in advance.
You need to increase/decrease the values considering a boolean variable like below:
const container = document.getElementById('container');
const box = document.getElementById('box');
let t = setInterval(move, 1);
let pos = 1;
let test = true;
function move() {
box.style.left = pos + 'px';
box.style.top = pos + 'px';
if (test)
pos++; /* move down */
else
pos--; /* move up */
/* update the direction when you reach the top or bottom limit*/
if (pos >= 150)
test = false
else if (pos <= 0)
test = true;
}
#container {
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
#box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
<div id="container">
<div id="box"></div>
</div>
An alternative to get the same results
const box = document.getElementById('box');
let jump = 1;
let pos = 0;
window.setInterval(() => {
pos = pos + jump;
if (pos > 150 || pos < 0) {
jump = jump * (-1);
}
box.style.left = pos + 'px';
box.style.top = pos + 'px';
}, 1);
#container{
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
#box{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
animation-direction: alternate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<link href="animation.css" rel="stylesheet">
<script defer src="animation.js"></script>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
</body>
</html>
I'm trying to make a sample where when the user click on the window, the circle (div) will move to that place with a transition. However, it does not work on the first click, but all the others. So I wonder what's making it do that.
<!doctype html>
<html>
<head>
<title>Hover</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="CSS/mystyles.css" >
</head>
<body>
<div id = "divGroup" class = 'group'>
</div>
<script src="JS/code.js"></script>
</body>
</html>
the javascript (i'm using javascript to receive the values and define new values:
var divGroup = document.getElementById("divGroup");
window.onclick = function(evt) {
divGroup.style.left = (evt.clientX - 25) + "px";
divGroup.style.top = (evt.clientY - 25) + "px";
}
the css:
#divGroup {
width: 50px;
height:50px;
background-color:lightblue;
border-radius:50%;
position: absolute;
transition: all 0.5s;
}
You should add initial left and top values in css for #divGroup
var divGroup = document.getElementById("divGroup");
window.onclick = function(evt) {
divGroup.style.left = (evt.clientX - 25) + "px";
divGroup.style.top = (evt.clientY - 25) + "px";
}
#divGroup {
width: 50px;
height: 50px;
background-color: lightblue;
border-radius: 50%;
position: absolute;
transition: all 0.5s;
left: 0;
top: 0;
}
<div id="divGroup" class='group'>
May be this is small question. But I couldn't found reason for this. I made a script to change a position of div by dragging it. the code is working fine with chrome browser. but when I trying to test it on Firefox it is not working.
var h = window.innerHeight|| document.documentElement.clientHeight || document.body.clientHeight;
window.onload = function () {
// ------------------lock the div with mouse pointer--------------
// variable dragged is for identified that you are click on the button or not
var dragged = false,
y = 0,pointerDis = 0,
boxElement = document.getElementById('drag'),
drgElement = document.getElementById('titl');
if (boxElement) {
// -----------------check whether the title div is holding by the mouse to lock it with mouse-------
drgElement.addEventListener('mousedown', function() {
dragged = true;
pointerDis = event.clientY - parseInt(window.getComputedStyle(boxElement, null).getPropertyValue("top"));
});
//------------------check whether the title div is released to drop the div-------------------------
document.addEventListener('mouseup', function() {
dragged = false;
});
document.addEventListener('mousemove', function () {
y = event.clientY;
if(dragged == true)
{
y = y -pointerDis;
if(y<0)
{
y = 0;
}
else if(y > window.innerHeight - boxElement.offsetHeight)
{
y = window.innerHeight - boxElement.offsetHeight;
}
boxElement.style.top = y + 'px';
}
});
}
};
.drg {
position: absolute;
top:0;
right: 0;
background: red;
border-top-left-radius: 45px;
border-bottom-left-radius: 45px;
}
#titl{
background: blue;
width: 50px;
text-align: center;
color: white;
font-size: 30px;
border-top-left-radius: 10px;
}
#det{
background: #f9c500;
width: 50px;
border-bottom-left-radius: 10px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>test 4</title>
</head>
<body>
<div class = "drg" id="drag">
<div id="titl" unselectable="on" onselectstart="return false;">....</div>
<div id="det">this is the details menu</div>
</div>
</body>
</html>
You can drag it through Y axis by click and drag from blue div. I don't know the reason or I couldn't find a way to fix this work on Firefox. Please help me!
You have to catch the (mousemove or mousedown) events as the input of wrapped functions
drgElement.addEventListener('mousedown', function(event)...
var h = window.innerHeight|| document.documentElement.clientHeight || document.body.clientHeight;
window.onload = function () {
// ------------------lock the div with mouse pointer--------------
// variable dragged is for identified that you are click on the button or not
var dragged = false,
y = 0,pointerDis = 0,
boxElement = document.getElementById('drag'),
drgElement = document.getElementById('titl');
if (boxElement) {
// -----------------check whether the title div is holding by the mouse to lock it with mouse-------
drgElement.addEventListener('mousedown', function(event) {
dragged = true;
pointerDis = event.clientY - parseInt(window.getComputedStyle(boxElement, null).getPropertyValue("top"));
});
//------------------check whether the title div is released to drop the div-------------------------
document.addEventListener('mouseup', function() {
dragged = false;
});
document.addEventListener('mousemove', function (event) {
y = event.clientY;
if(dragged == true)
{
y = y -pointerDis;
if(y<0)
{
y = 0;
}
else if(y > window.innerHeight - boxElement.offsetHeight)
{
y = window.innerHeight - boxElement.offsetHeight;
}
boxElement.style.top = y + 'px';
}
});
}
};
.drg {
position: absolute;
top:0;
right: 0;
background: red;
border-top-left-radius: 45px;
border-bottom-left-radius: 45px;
}
#titl{
background: blue;
width: 50px;
text-align: center;
color: white;
font-size: 30px;
border-top-left-radius: 10px;
}
#det{
background: #f9c500;
width: 50px;
border-bottom-left-radius: 10px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>test 4</title>
</head>
<body>
<div class = "drg" id="drag">
<div id="titl" unselectable="on" onselectstart="return false;">....</div>
<div id="det">this is the details menu</div>
</div>
</body>
</html>
Ok, I builded a slider in javascript and Jquery (with help of you guys) But now I want to have multiple sliders on 1 page. While using just one javascript. BUT...the slider can be different in width (or number of items): also the name of the slider is different because of the css width.
So How do I use 1 javascript to controle different sliders
Here is my code:
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#temp{
height: 300px;
}
#container{
width: 500px;
height: 150px;
background:#CDFAA8;
overflow:hidden;
position:absolute;
left: 13px;
}
#slider{
width: 800px;
height: 150px;
background:#063;
position:absolute;
left: 0px;
}
#block1{
width: 100px;
height: 150px;
background:#067;
float: left;
}
#block2{
width: 100px;
height: 150px;
background:#079;
float: left;
}
#move_right{
height: 150px;
width: 20px;
background: #3f3f3f;
position: absolute;
right:0px;
z-index: 200;
opacity: 0.2;
}
#move_left{
height: 150px;
width: 20px;
background: #3f3f3f;
position: absolute;
left:0px;
z-index: 200;
opacity: 0.2;
}
</style>
</head>
<body>
<div id="temp">
<div id="container">
<div id="move_left"><button id="right">«</button></div><div id="move_right"><br><br><button id="left">»</button></div>
<div id="slider">
<div id="block1">1</div>
<div id="block2">2</div>
<div id="block1">3</div>
<div id="block2">4</div>
<div id="block1">5</div>
<div id="block2">6</div>
<div id="block1">7</div>
<div id="block2">8</div>
</div>
</div>
</div>
<div id="slider">
<div id="block1">1</div>
<div id="block2">2</div>
<div id="block1">3</div>
<div id="block2">4</div>
<div id="block1">5</div>
<div id="block2">6</div>
<div id="block1">7</div>
<div id="block2">8</div>
</div>
</div>
</div>
JavaScript
(function($) {
var slider = $('#slider'),
step = 500,
left = parseInt(slider.css('left'), 10),
max = $('#container').width() - slider.width(),
min = 0;
$("#left").click(function() {
if (left > max) {
var newLeft = left - step;
left = (newLeft>max) ? newLeft : max;
$("#slider").animate({
"left": left + 'px'
}, "slow");
}
});
$("#right").click(function() {
if (left < 0) {
var newLeft = left + step;
left = (newLeft<min) ? newLeft : min;
slider.animate({
"left": left + 'px'
}, "slow");
}
});
})(jQuery);
This should be fine:
(function($) {
$('#temp #container').each(function(){
var slider = $(this).find('#slider'),
parent = $(this),
step = 500,
left = parseInt(slider.css('left'), 10),
max = parent.width() - slider.width(),
min = 0;
parent.find("#left").click(function() {
if (left > max) {
var newLeft = left - step;
left = (newLeft>max) ? newLeft : max;
slider.animate({
"left": left + 'px'
}, "slow");
}
});
parent.find("#right").click(function() {
if (left < 0) {
var newLeft = left + step;
left = (newLeft<min) ? newLeft : min;
slider.animate({
"left": left + 'px'
}, "slow");
}
});
});
})(jQuery);
FIDDLE
In theory you could do some code which can take a selector to a wrapper element (which has the required slider elements inside) as some parameter. And then you can from this element create selectors which are more dynamic. I'm not sure where you get "step = 500" from, but that's maybe something you could grab dynamically from some relevant element.
I am attempting to use Javascript to position some of my elements on the screen/window. I am doing this to make sure that what ever the dimensions of the users screen, my elements will always be in the centre.
I know that padding & margin can also achieve this, but I am using a custom movement script called raphael.js, & in order to move my elements I need to set out my elements absolutely (its a custom home page, where you click blocks(that are links) & they fly off the screen).
My javascript function to move my elements fails to move my elements. Any suggestions on how to position my elements using javascript would be really helpful.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="dropDownMenu.js"></script>
<title></title>
<script src="javascript/raphael.js"></script> <!-- I am using a custom drawing/moving script which is why I cant put the img(id=bkImg) inside the div element -->
<script LANGUAGE="JavaScript" type = "text/javascript">
<!--
function getScreenSize()
{
var res = {"width": 630, "height": 460};
if (document.body)
{
if (document.body.offsetWidth) res["width"] = document.body.offsetWidth;
if (document.body.offsetHeight) res["height"] = document.body.offsetHeight;
}
if (window.innerWidth) res["width"] = window.innerWidth;
if (window.innerHeight) res["height"] = window.innerHeight;
alert( res["width"] );
alert( res["height"] );
return res;
}
function positionBlocksAccordingToScreenSize()
{
// The problem is that the blocks position does not change but they should?
var scrDim = getScreenSize();
var BK_WIDTH = 800;
var BK_HEIGHT = 600;
var X_OFFSET = (scrDim["width"]-BK_WIDTH) / 2; // variable that changes according to the width of the screen
var BLOCK_POS_X = [160, 80, 280, 20, 200, 400];
var BLOCK_POS_Y = [26, 203, 203, 380, 380, 380];
for ( var i=1; i<=5; i++ )
{
//document.getElementById("block"+i).setAttribute( "offsetLeft", X_OFFSET + BLOCK_POS_X[i] ); // doesn't work
//document.getElementById("block"+i).setAttribute( "offsetTop", BLOCK_POS_Y[i] ); // doesn't work
document.getElementById("block"+i).style.left = X_OFFSET + BLOCK_POS_X[i]; // doesn't work
document.getElementById("block"+i).style.top = BLOCK_POS_Y[i]; // doesn't work
}
}
-->
</script>
<style type="text/css" media="all">
<!--
#import url("styles.css");
#blockMenu { z-index: -5; padding: 0; position: absolute; width: 800px;
height: 600px; /*background-image: url("images/menuBk.png");*/ }
#bkImg { z-index: -5; position: relative; }
#block1 { z-index: 60; position: absolute; top: 26px; left: 160px; margin: 0; padding: 0; }
#block2 { z-index: 50; position: absolute; top: 203px; left: 80px; margin: 0; padding: 0; }
#block3 { z-index: 40; position: absolute; top: 203px; left: 280px; margin: 0; padding: 0; }
#block4 { z-index: 30; position: absolute; top: 380px; left: 20px; margin: 0; padding: 0; }
#block5 { z-index: 20; position: absolute; top: 380px; left: 200px; margin: 0; padding: 0; }
#block6 { z-index: 10; position: absolute; top: 380px; left: 400px; margin: 0; padding: 0; }
-->
</style>
</head>
<body onload="positionBlocksAccordingToScreenSize()" style="margin-top: 10%; text-align: center; margin-bottom: 10%; position: relative;">
<img id="bkImg" src="images/menuBk.png" width="800px;" height="600px" alt=""/>
<!-- The above image should be displayed behind the below div. I am using the raphael.js movement script, so I cannot place
this image inside the div, because it will get erased when I call raphael.clear(); -->
<div id="blockMenu">
<div id="block1"><img src="images/block1.png" width="200" height="200"/></div>
<div id="block2"><img src="images/block2.png" width="200" height="200"/></div>
<div id="block3"><img src="images/block3.png" width="200" height="200"/></div>
<div id="block4"><img src="images/block4.png" width="200" height="200"/></div>
<div id="block5"><img src="images/block5.png" width="200" height="200"/></div>
<div id="block6"><img src="images/block6.png" width="200" height="200"/></div>
</div>
</body>
</html>
You're not setting the left and top properties correctly, you need to add the unit e.g 'px' for pixels.
document.getElementById("block"+i).style.left = X_OFFSET + BLOCK_POS_X[i] + 'px';
document.getElementById("block"+i).style.top = BLOCK_POS_Y[i] + 'px';
"Would you be able to suggest a line of jQuery code that could place my elements correctly?"
The following code uses jQuery and will center an absolutely positioned element on load and on window resize.
http://jsfiddle.net/Fu3L6/
HTML...
<div id="element">Test</div>
CSS...
#element {
position: absolute;
background-color: red;
width: 200px;
}
jQuery...
$(document).ready(function () {
centerInViewport('#element');
$(window).resize(function () {
centerInViewport('#element');
});
});
function centerInViewport(e) {
$docWidth = $(document).width();
$elWidth = $(e).width();
$offset = ($docWidth - $elWidth) / 2;
$(e).css("marginLeft", $offset + "px");
}