I'm feel very irritated with div alignment problems on window resize. I would like to wrap elements inside div so that they won't come out of their exact positions after window resize.Is there a way possible to wrap elements inside parent <div> using Javascript. Also suggest any best ways possible to overcome this using javascript like handling resize() & zoom() events. If not suggest solutions possible by using Jquery.
HTML:
<div id ="top-left"></div>
<div id ="top-right"></div>
<div id ="bottom-left"></div>
<div id ="bottom-right"></div>
css:
div{
width:50px;
height:50px;
background-color:red;
position:absolute;
}
#top-left{
top:0;
left:0;
}
#top-right{
top:0;
right:0;
}
#bottom-left{
bottom:0;
left:0;
}
#bottom-right{
bottom:0;
right:0;
}
div#container{
position:relative;
border: 2px solid blue;
width:300px;
height:300px;
background:green;
}
jQuery:
$(document).ready( function(){
$('body').append('<div id="container"></div>');
$('body div').not('#container').each(function() {
var html = $(this);
$('#container').append(html);
});
});
Demo:
http://jsfiddle.net/x8Wnw/
Related
How to add content that already exists on another #div:before
because the existing div will I set as a fixed position
#text-1{
width:100%;
text-align:center;
/* visibility:hidden; */
/* position:fixed; */
}
#text-2 {
width:100%;
text-align:center;
}
#text-2:before {
content:"Equal to the contents of #text-1";
width:100%;
text-align:center;
color:#ff0000;
position:absolute;
width:100%;
left:50%;
background-color:#e3e3e3;
border-top:1px solid #999999;
margin-left:-50%;
margin-top:18px;
font-style:italic;
}
<div id="text-1">Content Text-1</div>
<div id="text-2">Content Text-2</div>
You need to use jquery for this. First include jquery library in your html file if it is not there and then add below javascript code inside your head tag:
<script type="text/javascript">
$(document).ready(function(){
var contents = $("#text-1").html();
$("#text-2").html(contents);
});
</script>
I am learning the basics of Jquery's fadeIn and fadeOut function.
I thought It was going to be a success however it doesnt work. The console says I haven't defined $. How do I define this? Any clues at all?
My JSFiddle is here
HTML:
<div id="example"></div>
<div id="box"></div>
CSS:
.#example{
top:0px;
left:0px;
width:50%;
height:500px;
background-color:black;
display:none;
}
#box{
margin:auto;
width:50px;
height:50px;
background-color:black;
}
Jquery:
$("#box").click(function(){
$("#example").fadeIn("normal");
});
$("#box").click(function(){
$("#example").fadeOut("slow");
});
$ in your code means you are using a jquery function.
“$ not defined” usually means jquery is not loaded, please make sure you load jquery
You have one dot (.) before #example in CSS - just delete it.
Do not put two event handler listening for the same event on one DOM-element, because you will never know which one is called first.
Better do something like this:
var active = false;
$("#box").click(function () {
if (active) {
$("#example").fadeOut("slow");
active = false;
} else {
$("#example").fadeIn("normal");
active = true;
}
});
Try it out:
http://jsfiddle.net/57wyxe02/9/
Hope that helps!
Is this what you want? (you have some errors in you JSFiddle and you must call for jQuery on the left menu (Frameworks))
CSS
#example{
top:0px;
left:0px;
width:50%;
height:500px;
background-color:black;
display:none;
}
#box{
margin:auto;
width:50px;
height:50px;
background-color:black;
}
jQuery
$("#box").click(function(){
$("#example").fadeToggle("slow");
});
DEMO HERE
Lets say i have two divs in my code:
div1 - position(100,100)
div2 - position(100,200)
I am doing a javascript animation and I am wondering if there is any way to give them the same target position on the screen without giving them two different positions?
Ask if you want more information! Thanks
Not quiet sure if I understand your question.
Something like this? http://plnkr.co/edit/WKXV5amtwrQLefidmuAk?p=preview
$(document).ready(function () {
$('.movediv').animate({
top:'400',
left:'400'
},5000,function(){
});
});
the CSS:
div1{
width:100px;
height:100px;
background-color:red;
position: absolute;
top:100px;
left:100px;
}
.div2{
width:100px;
height:100px;
background-color:blue;
position: absolute;
top:100px;
left:200px;
}
and the HTML:
<body>
<div class="movediv div1"></div>
<div class="movediv div2"></div>
</body>
I am trying to design a collapsible/hide-able sidebar for my web application, in the vain of Facebook's Chat/Event Ticker. It needs to have two separate sections, separated vertically, and both independently scrollable.
I have tried to implement this using jakiestfu's Snap.js plugin.
https://github.com/jakiestfu/Snap.js/
While this works great, it moves the content on my page out of view, and breaks my position: fixed header elements due to CSS transform: tranlate3d().
Since there's no good fix the these CSS issues, I was wondering if anyone knew of a solution to mimic functionality of the Facebook Chat/Event Ticker sidebar.
I've done something similar using CSS3 resizing on the fixed sidebar (mine was on the left) and adjusting the main page's margin-left when the sidebar size changed. You could likely do something similar on the sidebar first, then split the sidebar in two the same way.
var sizeme = 200,
sizeItBro = function () {
if ($("#sidebar").width() != sizeme) {
sizeme = $("#sidebar").width() + 40;
$("#main").css("margin-left", sizeme + "px").text(sizeme + " pixels of margin.");
}
};
window.setInterval(sizeItBro, 150);
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body {
margin:0;
padding:0;
}
#main {
margin-left:200px;
min-height:100%;
padding:20px;
}
#sidebar {
position:fixed;
top:0;
bottom:0;
left:0;
background:#ffa;
width:200px;
min-width:100px;
max-width:500px;
resize:horizontal;
overflow:auto;
border-right:2px ridge #fe9;
padding:20px;
}
#tophalf {
background:#fe9;
height:300px;
min-height:100px;
max-height:500px;
resize:vertical;
overflow:auto;
border-bottom:2px ridge #fe9;
margin:-20px -20px 20px;
padding:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">Main Content</div>
<div id="sidebar">
<div id="tophalf">Sidebar A</div>
<p>Sidebar B</p>
</div>
Hopefully not too vague. All I want to do is make the entire page go dim after clicking a link. I would imagine having div style="height:100%; width=100%;" with a high z-index. to cover the webpage. My question is toggling this div. I'm not sure what I should even use to accomplish this.
Demos using jQuery or using bog-standard Javascript, both showing how you can toggle the element.
HTML You didn't say how you want to toggle this. Using a button?
<button onclick="dim();">Dim</button>
<div id="dimmer"></div>
but bear in mind the dimmer will go over the button
CSS
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}
N.B. Use position: fixed as 100% height is only the window height and if your document is larger, using position: absolute doesn't dim the whole document - you can scroll to see there are contents visible.
Javascript
function dim(bool)
{
if (typeof bool=='undefined') bool=true; // so you can shorten dim(true) to dim()
document.getElementById('dimmer').style.display=(bool?'block':'none');
}
dim(true); // on
dim(false); // off
You can do it with a simple JavaScript
Demo
HTML
Click me
<div id="toggle_div"></div>
Hello World
JavaScript
function dim_div() {
document.getElementById("toggle_div").style.display="block";
}
CSS
#toggle_div {
background-color: rgba(255, 255, 255, .6);
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 999;
}
HTML
<div id="initial_opacity_zero"></div>
<button id="button_to_adjust_opacity" onclick="func_onclick();"></button>
CSS
div#initial_opacity_zero{
opacity:0;
display:block;
position:fixed;
top:0px; right:0px; bottom:0px; left:0px;
}
JavaScript:
function func_onclick(){
document.getElementById("initial_opacity_zero").style.opacity="0.6";
}