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`
})
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 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'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();
}
});
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.