I have created a html page of two DIV with tab component using jquery. Tab component is resizable and have min/max width. There is a scrollable divider between DIV. But the problem are the components of the div, which are not resizing according to the resized div position, it is overlaping on the other div.
Any suggestion or code will be helpful.
Thanks and regards,
Global
You can use jQuery with jQuery resize plugin (because default jQuery resize event handler only works when event target is window) to resize child divs when parent div has been resized.
Here is an example that will shrink parent div after 2 seconds, causing child div to also shrink:
Javascript:
$(document).ready(function() {
$('#parent').bind("resize", resizeChild);
setTimeout(resizeParent, 2000);
});
function resizeChild()
{
$("#child").css('width', $('#parent').width() - 20);
$("#child").css('height', $('#parent').height() - 20);
}
function resizeParent()
{
$("#parent").css('width', '100px')
$("#parent").css('height', '100px')
}
HTML:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://github.com/cowboy/jquery-resize/raw/v1.1/jquery.ba-resize.min.js"></script>
<div id='parent'>
<div id='child'></div>
</div>
CSS:
#parent {
width:200px;
height:200px;
border:1px solid black;
}
#child {
width:180px;
height:180px;
border:1px solid black;
}
Proof of concept here: http://jsfiddle.net/t26ZW/
Related
I would like to make a div move from it's current position to the right(left: 1000px) using transitions? How can I do that and trigger it using Javascript?
Check the following fiddle
JS
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
What have you tried?
Here's a simple example using vanilla js:
var box = document.getElementById("box");
box.addEventListener("click", moveBox);
function moveBox() {
box.classList.add("move");
}
#box {
background-color:blue;
height:150px;
width:150px;
left:0;
transition:left .33s ease;
position:relative;
}
#box.move {
left:500px;
}
<div id="box">
</div>
and here is is on jsfiddle: https://jsfiddle.net/cx7n88s0/
To use left, you need to set a position of relative or absolute.
Use transition on the main id or class
I have html:
<div style='width:300px; height:40px; float:left;' class='outerDiv'>
<div style='width:200px; height:40px; float:right;' class='innerDiv'>
Some text
</div>
</div>
I try to make small move div.innerDiv by:
$('.innerDiv').animate({ left: '+=200px' });
Basic idea - when div.innerDiv move to border of div.outerDiv, div.outerDiv should hide part of div.innerDiv. I stuck on css styles on div's.
see here : jsfiddle
you need to set a position ( relative,absolute,fixed ) so the css left:200px can work.
css :
.outerDiv {
overflow:hidden;
}
.innerDiv {
position:relative;
}
jq :
$('.innerDiv').animate({ left: '+=200px' });
let me know if this was what you were looking for.
If i understand you correctly, you want to hide the outer div but show the inner div.
You should not hide parent div, because if you hide parent div, child will be hidden.
You can change the background color of the outer div.
js fiddle link
$('.innerDiv').animate({left:'200px'}, {
complete: function () {
$('.outerDiv').addClass('hide');
}
}
);
Below is my code. When I drag and drop the '.dragme' div then the parent of this div become change from '#source' to '#drop'. Its ok. But this dragme div's position become fixed in #drop div and I can't move it anywhere in #drop div. How can I do it? Thank you.
HTML:
<div id="source" class="box">
<div class="dragme">bacon</div>
</div>
<div id="drop" class="box"></div>
CSS:
.box { height:100px;width:100px;border:1px solid #333; }
.dragme { width:100%; margin:5px; border:1px solid #333; }
JavaScript:
$('.dragme').draggable();
$('#drop, #source').droppable({
drop:function(e, ui) {
$(e.target).append($(ui.draggable).detach().css({'top':'', 'left':''}));
}
});
Here is a Demo Fiddle.
$('.dragme').draggable();
$('#drop, #source').droppable({
drop:function(e, ui) {
//$(e.target).append($(ui.draggable).detach().css({'top':'', 'left':''})); //removed this line.
}
});
You are setting css .css({'top':'', 'left':''}), which is why you cannot move it.
Your code is setting the dragged element position to TOP LEFT, that's the reason why you are not able to drag that element to some other position. To avoid this problem, just update the position only if you drag the element out of the parent container.
Updated Code:
$('.dragme').draggable();
$('#drop, #source').droppable({
drop:function(e, ui) {
if ($(e.target).attr('id') != $(ui.draggable).parent().attr('id')) {
$(e.target).append($(ui.draggable).detach().css({'top':'', 'left':''}));
}
}
});
Fiddle: http://jsfiddle.net/LHGqP/1/
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'm currently building a popup box script using css/jquery and i can't seem to get the div centered on the screen on all cases. It it possible to center it without knowing the div width?
Instead of posting all the code here i put up a live example at http://goo.gl/N45cp
Any kind of help is much appreciated!
Best Regards
John
<div id="wrapper">
<div id="child"></div>
</div>
If the position of the #child is not absolute, you can set left and right margins to auto:
#child {
margin: 0 auto;
}
Or if the position is absolute you can try the following:
$("#child").css("left", function(){
return ($("#wrapper").width() - $(this).width()) / 2;
});
You can achieve this with pure CSS if you have a containing div:
HTML
<div id="outer">
<div id="inner">some content here</div>
</div>
CSS
body, html, div#outer { height:100%; }
div#outer { text-align:center; }
div#inner { display:inline-block; }
http://jsfiddle.net/NjZbW/