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?
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`
})
So I have been looking for a solid solution for a sticky footer for quite sometime. I found one that works well on every page and in every browser; however it takes some time to load and then take effect. Is there a way I can speed this up? Maybe load it before the page loads? Someone mentioned that it could be set to "onDOMready" instead of onLoad? Does that make sense?
Anyway, here is my code:
<script>
function positionFooter() {
var mFoo = $("#myfooter");
if ((($(document.body).height() +
mFoo.height()) < $(window).height() &&
mFoo.css("position") == "fixed") ||
($(document.body).height() < $(window).height() &&
mFoo.css("position") != "fixed"))
{
mFoo.css({ position: "fixed", bottom: "0px" });
}
else
{
mFoo.css({ position: "static" });
}
}
$(document).ready(function () {
positionFooter();
$(window).scroll(positionFooter);
$(window).resize(positionFooter);
$(window).load(positionFooter);
});
</script>
<!--content --->
<div id="myfooter" style="width:100%;"><!--footer content--></div>
How do I make it load faster?
No javascript needed (though it is helpful). The best thing to do here is take advantage of the marvelous min-height property rather than calculate from total document height.
html
<div id="wrap">
<div id="content">
<footer></footer>
</div>
css
html,body{
height:100%;
}
#wrap{
min-height:100%;
position:relative;
}
#content{
padding-bottom:20px; // allow room for footer
}
footer{
position:absolute;
width:100%;
bottom:0;
left:0;
height:20px;
}
As your page may be more complex than this, if you are finding that min-height:100% in css alone is not yielding the desired result, you may want to set in with javascript.
$(document).ready(function(){
var $window = $(window),
$wrap = $('#wrap'),
setMinHeight = function(){
$wrap.css('min-height',$window.height());
};
setMinHeight();
$window.resize(setMinHeight);
});
DEMO al la #Nick
DEMO with more content
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.
I want to implement an animation, image there are two divs
D1 | D2
At first D2 is in screen(with 100% width), D1 is invisible(outside of screen).
I want an animation that, D2 moves out to right, outside of screen.
D1 moves from left to right, finally occupies the screen(replace D1).
If you saw how Groupon animate when register user, you may understand what I mean...
Thanks.
EDIT Ok.. I wanted to make a general solution (by animating the wrapper margin). Clearer code and more customizable => http://jsfiddle.net/steweb/rWbFw/
markup:
<div id="mask">
<div id="wrapper">
<div class="full" id="div1">hey there I'm the first div</div>
<div class="full" id="div2">hey there I'm the second div</div>
<div class="full" id="div3">hey there I'm the third div</div>
<!-- add as many 'full' divs as you want -->
</div>
</div>
css:
#mask{
width:100%;
overflow:hidden;
position:relative;
}
#wrapper{
width:100%;
height:300px; /* optional! */
}
.full{
float:left;
height:300px; /* optional! */
}
#div1{
background:green;
}
#div2{
background:white;
}
#div3{
background:red;
}
js:
var utils = {
maskWidth : $('#mask').width(),
currIndex : 0,
setWidths : function(){
//setting maskWidth
utils.maskWidth = $('#mask').width();
//setting wrapper width
$('#wrapper').css('width',$('.full').length * utils.maskWidth);
//setting 'full div' width
$('.full').each(function(index){
$(this).css('width',utils.maskWidth);
});
//setting curr wrapper margin (for window resize)
$('#wrapper').css('margin-left',-(utils.currIndex*utils.maskWidth));
}
}
$('.full').click(function(){
utils.currIndex = $(this).index()+1; //current elem index (for margin calc)
if($(this).next().size() == 0){//if is the last, reset
utils.currIndex = 0;
$('#wrapper').animate({'margin-left':0});
}else{ //animation, negative margin of the wrapper
$('#wrapper').animate({'margin-left':-(utils.currIndex*utils.maskWidth)});
}
});
$(window).resize(function() { //on resize, reset widths and margins
utils.setWidths();
});
utils.setWidths(); //first time, set everything
-- OLD --
You could start with something like this: http://jsfiddle.net/steweb/dsHyf/
markup:
<div id="wrapper">
<div class="full" id="div1"></div>
<div class="full" id="div2"></div>
</div>
css:
#wrapper{
width:100%;
overflow:hidden;
position:relative;
height:300px;
}
.full{
position:absolute;
width:100%;
height:300px;
}
#div1{
background:#FF0000;
left:0px;
}
#div2{
display:none;
background:#FFFF00;
}
js:
$('#div2').css('left',-$('#wrapper').width()).show();
$('#div1').click(function(){
$(this).animate({'left':$('#wrapper').width()});
$('#div2').animate({'left':0});
});
$('#div2').click(function(){
$(this).animate({'left':-$('#wrapper').width()});
$('#div1').animate({'left':0});
});
I have tried this with jQuery timer plugin & it is working very well with localhost.
You need to import : jQuery & jQuery Timer Plugin
And then just implement this :
<script type="text/javascript" src="jquery-1.5.js"></script>
<script type="text/javascript" src="jquery.timers-1.2.js"></script>
<script type="text/javascript">
var i=0,j=100;
$('#1').css('width',"0%");
$('#2').css('width',"100%");
l2r();
function l2r(){
var i=0,j=100;
$(document).everyTime(2, function() {
i+=0.10;
$('#1').css('width',i+"%");
j -= 0.10;
$('#2').css('width',j+"%");
}, 1000);
setTimeout("r2l()", 4000);
}
function r2l(){
var i=100,j=0;
$(document).everyTime(2, function() {
i-=0.10;
$('#1').css('width',i+"%");
j += 0.10;
$('#2').css('width',j+"%");
}, 1000);
setTimeout("l2r()", 4000);
}
And your HTML will be :
<div style='width:100%;'>
<div id='1' style='background-color:#333333; height: 100px; float: left;'></div>
<div id='2' style='background-color:#CCCCCC; height: 100px; float: right;'></div>
</div>
Enjoy & correct me if I am wrong.
EDIT : It seems the problem is still with Different browser ! The timeout should be 4000 (as it is set) for Chrome & 10000 for Fire Fox. Let me edit code to recognize browser & set Time Out later, very soon.