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!
Related
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 have a website (html/css/javascript/php) on a WAMP server. The format is header. nav (on the left), section (to the right of the nav div). In the section I have a javascript 3 tabs container. I am pulling the info from a .php file and displaying the retrieved data in the textarea. The textarea is on a timer so each time new data is retrieved, a new textarea is created below the current textarea with the new data.
My problem, since Javascript is loaded into the page last, the textareas are positioned outside of the tabbed div container and run across all boundaries and borders.
How can I position the newly created textareas so they will appear and stay inside the first tab? Here is the code I am using so far. I have tried many solutions and none worked, even absolute positioning did not work.
<div id="section">
<!-- these are the tags ID and the href links back to itself, the page does not navigate forward or backward-->
<ul id="tabs">
<li>.........Orders Placed</li>
<li>.......Delivered</li>
<li>.......Cancelled</li>
</ul>
<div class="tabContent" id="order" style="max-height:800px;overflow-y:scroll;border:1px solid red;">
<div>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript" >
function myFunction() {
var x = document.createElement("TEXTAREA");
var t = document.createTextNode("<?php include('NewIncomingOrders.php')?>");
x.appendChild(t);
document.body.appendChild(x);
setTimeout(myFunction, 9000);
}
</script>
</div>
</div>
and the css I have tried: more than on way here, and I could not get any of them to work. I have a button included in the code to start the timed function.
TEXTAREA{
width:80em;
height:4em;
border: 1px solid #FFFFFF;
position:static;
left: 195px;
top: 1px;
}
OR THIS METHOD:
.section{
position:relative;
height:200px;
width:400px;
background-color:blue;
}
.tabContent{
position:absolute;
bottom:2px;
left:2px;
right:2px;
}
.tabContent textarea{
width:100%;
height:30px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
If anyone has an idea how to position the textarea so that it stays within the tab, or hints on what direction to go, please let me know!
Here is a picture to let you know what I mean.
Tab_Not_Working:
Dan O put me on the right path. I got it working:
<script type="text/javascript" >
function myFunction() {
var x = document.createElement("TEXTAREA");
var t = document.createTextNode("<?php include('NewIncomingOrders.php')>");
x.appendChild(t);
document.getElementById("order").appendChild(x);
setTimeout(myFunction, 9000);
}
</script>
Hi I have a div with 800 px width and 600 px height.
I want to divide it into 800 X 400 = 3,20,000 sub divs.
which means each sub-div with 1 px width and 1 px height.
I am using PHP for that. Here is my code.
<div class="main">
<?php
for($i=1;$i<=320000;$i++)
{
?>
<div class="single" ></div>
<?php
}
?>
</div>
CSS:
.main
{
margin-left:auto;
margin-right:auto;
width:800px;
height:400px;
}
.single
{
background-color:pink;
float:left;
height:1px;
width:1px;
}
But when I run the page, it is taking too long to execute the code. and also my browser is crashing sometimes. Is there any easier way to my job? Can I do it with Javascript or jQuery in an easier way?
THIS IS NOT AN ANSWER. THIS IS REPLY FOR THOSE WHO ASK ME WHY I WANTED TO DO SO?
Actually I want to develop a paint like application.
When I drag mouse on each sub-div, the color changes. Here is my complete code
PHP :
<div class="main">
<?php
for($i=1;$i<=320000;$i++)
{
?>
<!--<div class="single" onMouseOver="changeColor(this)"></div>-->
<div class="single" onmousemove="changeColor(this)" ></div>
<?php
}
?>
CSS :
<style>
.single
{
background-color:pink;
float:left;
height:3px;
width:3px;
cursor:crosshair;
}
.main
{
margin-left:auto;
margin-right:auto;
width:800px;
height:400px;
}
</style>
JAVASCRIPT :
<script>
var isMouseDown = false;
document.onmousedown = function() { isMouseDown = true };
document.onmouseup = function() { isMouseDown = false };
function changeColor(sing)
{
if(isMouseDown)
{
sing.style.backgroundColor = "black";
}
}
</script>
And I am on the initial stage. Please do not laugh at my idea!! :P
It doesn't surprise me that creating a div for each pixel is going to take a long time. I would recommend you look into using an html5 canvas instead, you can draw what ever you want on it, pixel by pixel and it is much faster than trying to do divs, not to mention easier.
Creating over 300,000 divs through code will crash your browser even if you've got a very powerful machine. Even if you used JavaScript or jQuery, you'd face the same problems.
Why do you need to split it up into so many divs?
I am creating a single page website with a fixed navigation. There are 4 different sections. When the user clicks the link in the navigation, I would like to fade the color of the navigation to match the theme of the section it takes them to. What would be the best way to go about doing this? I've tried many different things, but nothing seems to achieve the look I am going for. -Thanks in advance!
So you will need a couple of things to accomplish this.
Nav layer sitting above other layers
stacked background layers for each section with static background colors
knowledge of current color and new section color
And what you will do with that is to have each section keep track of its color. When the nav for that section is selected, the current layer behind the nav begins to fade out. At the same time, the layer of the new section begins to fade in. This will give the impression of one color fading into another.
edit
jsFiddle Demo
Here is a very rudimentary example of doing this. There should probably be more structure, better styling, and perhaps more management of state in code. However, clicking the links will demonstrate the color fading.
js
$("#redSection,#redPane").show();
$("#navLinks div").click(function(){
$(".pane:visible,.section:visible").fadeOut("slow");
var color = this.getAttribute("data-color");
$("#"+color+"Section,#"+color+"Pane").stop().fadeIn("slow");
});
html
<div id="layers">
<div id="navLinks">
<div data-color="red">about</div>
<div data-color="green">contact</div>
<div data-color="blue">overview</div>
<div data-color="orange">links</div>
</div>
<div id="redPane" class="pane"></div>
<div id="greenPane" class="pane"></div>
<div id="bluePane" class="pane"></div>
<div id="orangePane" class="pane"></div>
</div>
<hr />
<div id="contentArea">
<div id="redSection" class="section">about</div>
<div id="greenSection" class="section">contact</div>
<div id="blueSection" class="section">overview</div>
<div id="orangeSection" class="section">links</div>
</div>
css
#layers{
position:relative;
}
#navLinks div{
font-weight:bold;
font-size:110%;
text-decoration:underline;
cursor:pointer;
position:relative;
z-index:1;
}
.section{
display:none;
height:100px;
width:100px;
position:absolute;
}
#redSection{
background-color:red;
}
#greenSection{
background-color:green;
}
#blueSection{
background-color:blue;
}
#orangeSection{
background-color:orange;
}
.pane{
position:absolute;
right:0;
left:0;
top:0;
bottom:0;
display:none;
}
#redPane{
background-color:red;
}
#greenPane{
background-color:green;
}
#bluePane{
background-color:blue;
}
#orangePane{
background-color:orange;
}
#contentArea{
position:relative;
}
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();
}
});