In HTML page I am trying to achieve zoom functionality using CSS transform scale property. Inside the HTML page, I am having more div elements and all are placed using absolute position technique. Then I apply the scale property to each div and I was able to see like zoom but all div positions gots collapsed each other. So how to avoid collapse and maintain the gap between each other after applied scaling.
Please suggest me how to stop overlapping and how to calculate left and top position of each element accordingly to scale property.
var zoomScale = 1;
$(document).ready(function(){
$("#zoomin").click(function(){
if(zoomScale >=4 ) return;
zoomScale = zoomScale +1;
dispStatus();
applyZoomIn();
});
function applyZoomIn(){
$(".zoomable").each(function(index){
var left = $(this).position().left;
var top = $(this).position().top;
var newLeft = left*zoomScale +"px";
var newTop = top*zoomScale +"px";
$(this).css('transform',' scale('+zoomScale+','+zoomScale+')')
});
}
function dispStatus(){
$("#displayStatus").text("Current Zoom Scale : "+zoomScale);
}
dispStatus();
});
#container{
width:500px;
height:500px;
border:1px solid red;
position:relative;
overflow:auto;
}
.zoomable{
background-color:lightblue;
border:1px solid red;
width:100px;
height:100px;
position:absolute;
transform-origin: top left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button id="zoomin"> Zoom In</button>
<div id="displayStatus"></div>
<br/><br/>
<div id="container">
<div class="zoomable">First Div</div>
<div class="zoomable" style="left:105px">Second Div</div>
</div>
JSFiddle Link
You can add .zoomable div into one more parent (called .inner-container) and add zoom functionality to it. So that .container div will not get zoomed and zoomable div will maintain position.
See the Snippet below:
var zoomScale = 1;
$(document).ready(function(){
$("#zoomin").click(function(){
if(zoomScale >=4 ) return;
zoomScale = zoomScale +1;
dispStatus();
applyZoomIn();
});
function applyZoomIn(){
$(".inner-container").css('transform',' scale('+zoomScale+','+zoomScale+')');
}
function dispStatus(){
$("#displayStatus").text("Current Zoom Scale : "+zoomScale);
}
dispStatus();
});
.zoomable{
background-color:lightblue;
width:100px;
height:100px;
position:absolute;
border:1px solid red;
}
#container{
width:500px;
height:500px;
border:1px solid red;
position:relative;
overflow:auto;
}
.inner-container{
transform-origin: top left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="zoomin"> Zoom In</button>
<div id="displayStatus"></div>
<br/><br/>
<div id="container">
<div class="inner-container">
<div class="zoomable">First Div
</div>
<div class="zoomable" style="left:105px">Second Div
</div>
</div>
</div>
<br/><br/>
You can also test it here
Related
i am trying to set the position of a div to right 100% of the body. How-ever it needs to be done in JavaScript(or jQuery).
This is how i imagined the code would look...
const div = document.getElementById("div");
div.style.right = 100 + "%";
Any information or documentation for me to research would be greatly appreciated thank you. For clarification i want to move a div to the right side of the body, but i want to do it in percentages in javaScript.
You are looking for the width CSS property to set to 100%.
const div = document.getElementById("div");
div.style.width = "100%";
<div id="div" style="border: 1px solid black;"></div>
However, with the div tag, explicitly making its width 100% is unnecessary as it is a block level element (having display: block) and will automatically inherit the width of its parent.
For a progress bar, you just need to set its width to 0% at the start and gradually increase the width with a setInterval. Reference: https://www.w3schools.com/howto/howto_js_progressbar.asp
.progress {
width: 100%;
background-color: #ddd;
}
.bar {
width: 0%;
height: 20px;
background-color: #4CAF50;
}
<div class="progress">
<div class="bar"></div>
</div>
<p/>
<button onClick="run()">Start</button>
<script>
var bar = document.querySelector('.bar');
function run(){
var width = 0;
var intvl = setInterval(function(){
width ++
bar.style.width = width + "%";
if(width>=100){
clearInterval(intvl);
}
}, 10);
}
</script>
Set position:absolute in this element and
Set position:relative in parent element
for css position property, percentage(%) works only for absolute position.
jQuery(document).ready(function(){
jQuery("#child").css({
"position":"absolute",
"right":"0"
});
});
#parent{
position:relative;
width:100%;
border:1px solid #000;
height:100px;
}
#child{
width:50px;
height:50px;
background-color:red;
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child"></div>
</div>
#vp_arth: In new question edition - is it just right: 0?
#kanna: I cant believe i did not try that already. You did fix my issue.
So, yes, right CSS property is a distance from right side.
Zero means «move a div to the right side of the parent»
Answer Revisions
This question already has answers here:
Custom Cursor using CSS styling - html/css - javascript
(2 answers)
Closed 3 years ago.
I want to add a image as my cursor inside a div, But i want it to hide and have a normal pointer cursor, when the mouse hovers over any of the link inside that div.
I wrote :
var $box = $(".box");
var $myCursor = $("#myCursor");
var button1 = $("#link1");
var button2 = $("#link2");
$box.on("mouseleave",function(){
$myCursor.hide();
})
$box.mousemove(function(e){
$myCursor.css('top',e.pageY);
$myCursor.css('left',e.pageX);
if (!button1.is(":hover") && (!button2.is(":hover"))){
$myCursor.show();
}
else if(button1.is(":hover") || (button2).is(":hover")){
$myCursor.hide();
}
if(e.clientX<$box.width()*0.5){
$myCursor.css('transition','transform 1s');
$myCursor.css('transform','rotate(-270deg)');
}
else if(e.clientX>$box.width()*0.5){
$myCursor.css('transition','transform 1s');
$myCursor.css('transform','none');
}
});
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor:none;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor:pointer;
}
#myCursor{
position:absolute;
height:50px;
width:50px;
top:0;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png">
</div>
How do i implement this properly?
Thanks
Much easier to achieve using CSS only. You will have to resize the cursor image beforehand, in this example I resized one to 50x50 pixels (the other in the white box is 64x64).
The , auto is mandatory and defines a fallback.
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor: url(//codestylers.de/rifle.png), auto;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor: pointer;
}
.another-cursor {
background-color: white;
width: 300px;
height: 200px;
cursor: url(//codestylers.de/cursor.png), auto;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<div class="another-cursor"></div>
</div>
The simple solution is just to adjust the scoping of your selectors:
var $box = $(".box:not(button)"); so the image switch is called whenever the cursor is not over a button. However in your case you should consider reducing the image size so it's closer to the mouse size - as there's a large overlap of image and button before the mouse pointer itself covers the button.
a more complex solution would involve using arrays to register the button coordinates and dimensions, then using mousemove and each to constantly check the image coordinate widths against the stored buttons dimensions but depending on what else you've got going on there could be a performance hit.
If you add pointer-events: none to the #myCursor css you prevent the occasional momentary obscuration of the cursor from the button by the image itself - hence better performance.
var $box = $(".box:not(button)");
var $myCursor = $("#myCursor");
var button1 = $("#link1");
var button2 = $("#link2");
$box.on({
mouseleave:function(){
$myCursor.hide();
},
mousemove: function(e){
$myCursor.css({ 'left':e.pageX, 'top':e.pageY });
if (!button1.is(":hover") && !button2.is(":hover")){
$myCursor.show();
} else if(button1.is(":hover") || (button2).is(":hover")){
$myCursor.hide();
}
}
});
.box{
height:100vh;
background:#ccc;
padding-top:50px;
cursor:none;
}
button{
display:block;
margin:15px auto;
width:20%;
padding:10px;
cursor:pointer;
}
#myCursor{
position:absolute;
height:50px;
width:50px;
top:0;
left:0;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "box">
<button id = "link1">Some link</button>
<button id = "link2">Another Link</button>
<img id = "myCursor" src = "https://cdn3.iconfinder.com/data/icons/ahasoft-war/512/sniper_rifle-512.png">
</div>
You can solve this using CSS, there is no need for javascript.
Have a look here:
http://www.w3schools.com/cssref/pr_class_cursor.asp
You might set CSS classes with help of javascript to enable some sort of dependency to other elements.
I am seeing unexpected behaviour on a small HTML widget ive recently created. Three successively embedded divs each one has a marker and a menu which show up on entry into the div and hide on exit. The marker is intended to track the vertical mouse position. Problem here is that the mouseover event fires only when the mouse is over the marker and not when the mouse over the containing div.
http://jsfiddle.net/laurencefass/f47a7a2r/
$( ".outer, .inner, .middle" )
.mouseenter(function(e) {
$(this).children(".content:first").show();
$(this).parents().children(".content:first").hide();
$(this).children(".marker:first").show();
$(this).parents().children(".marker:first").hide();
})
.mouseleave(function(e) {
$(this).children(".content:first").hide();
$(this).parents().children(".content:first").show();
$(this).children(".marker:first").hide();
$(this).parents().children(".marker:first").show();
})
.mouseover(function(e) {
$(".content", $(this)).html("left = " + e.pageX + " right = " + e.pageY);
var marker = $(this).children(".marker");
marker.offset({top:e.pageY - marker.height()/2, right:0});});
.outer, .middle, .inner {
font-size:0.8em;
position:absolute;
border:5px solid black;
background-color:lightgray;
text-align:center;
}
.outer {
top:10%;
left:10%;
width:80%;
height:500%;
}
.middle {
top:5%;
left:20%;
width:60%;
height:60%;
}
.inner {
top:5%;
left:30%;
width:40%;
height:60%;
}
.content {
background-color:aliceblue;
min-height:2em;
min-width:50px;
display:none;
}
.marker {
height:50px;
width:5em;
background-color:black;
position:absolute;
right:0px;
margin-right:2px;
display:none;
color:white;
fontsize:0.8em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="outer">
<div class="content">outer menu</div>
<div class="marker">widget</div>
<div class="middle">
<div class="content">middle menu</div>
<div class="marker">widget</div>
<div class="inner">
<div class="content">inner menu</div>
<div class="marker">widget</div>
</div>
</div>
</div>
This can be done much easier just using CSS. You can use this functionallity for your widgets too.
.outer:hover>.content,
.middle:hover>.content,
.inner:hover>.content{
display: block;
}
Then you can strip out your mouseenter and mouseleave
$( ".outer, .inner, .middle" )
.mouseover(function(e) {
var marker = $(this).children(".marker");
marker.offset({top:e.pageY - marker.height()/2, right:0});
});
JSFiddle
If you only want to show the widget of the element hovered you have to use jQuery, Furthermore you would probably use mosemove() event to have it at the mouse position all the time.
$( ".outer, .inner, .middle" ).mousemove(function(e) {
e.stopPropagation();
var marker = $(this).children(".marker");
marker.eq(0).show();
marker.offset({top:e.pageY - marker.height()/2, right:0});
});
$( ".inner, .middle" ).mouseenter(function(e) {
if($('.marker', $(this).parent()).eq(0).length){
$('.marker', $(this).parent()).eq(0).hide();
}
});
$( ".outer, .inner, .middle" ).mouseleave(function(e) {
if($('.marker', $(this).eq(0)).length){
$('.marker', $(this).eq(0)).hide();
}
});
JSFiddle
my expectation: a rhs "floating" widget to track the vertical position of the mouse and be visible only as long as the cursor is within scope of the marker's container.
I want to show the text text masking effect with animation
Here is my fiddle for what I am trying to achieve: http://jsfiddle.net/qTWTH/2/
I am not able to position the Red text in "center" above theblack text so the efffect should be something like this: http://jsfiddle.net/qTWTH/1/ *BUT aligned Center*
Also how to repeat the animation, this as per the JS, it just animate only once, I want to repeat the JS once the effect is done.
Code: HTML
<div id="mainbox">
<span id="black">Waiting for the task!</span>
<span id="red">Waiting for the task!</span>
</div>
CSS
#mainbox {
width:600px;
text-align:center;
}
#black {
color:black;
font-weight:bold;
font-size:2em;
}
#red {
position:absolute;
z-index:10;
left:8px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
white-space:nowrap;
}
JS
var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function () {
console.log(red.style.width);
if (red.style.width == "290px") clearInterval(animation);
red.style.width = parseInt(red.style.width, 10) + 1 + "px";
}, 50);
Let me know if you need any other information.
Please suggest.
Check this fiddle
By centering the div itself, and positioning the red according to that, you'll ensure they line up.
#mainbox {
display: inline-block;
position: relative;
}
html {
text-align: center;
}
#red {
left: 0;
}
To run it again and again change like this:
var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function(){
console.log(red.style.width);
if(red.style.width == "290px")
{
red.style.width = "0px"; // here i have changed
}
red.style.width = parseInt(red.style.width,10)+1 +"px";},50);
Correct fiddle: http://jsfiddle.net/arjun_chaudhary/qTWTH/22/
I altered your code slightly, you almost had it
http://codepen.io/nighrage/pen/EAmeF/
<div id="mainbox">
<span id="black">Waiting for the task!</span>
<div id="red">Waiting for the task!</div>
</div>
#red {
z-index:10;
left:8px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
white-space:nowrap;
margin: 0 auto;
margin-top: -37px;
}
change the second span for a div
I've got a piece of javascript that launches an entire page cover on launch of the page and two divs 'dialog' and 'dialog2' that open on top of the cover. so it's like having a blacked out background with a notification.
The problem i'm getting is i want the 'cover' background to be transparent / have an opacity, and it does, but for some reason this is also causing the 'dialog' and 'dialog2' div backgrounds to be transparent, and i don't want this to happen and i'm not sure why this is happening?
Can someone tell me what i'm doing wrong please.
<script type="text/javascript">
window.onload = function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById("dialog")
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "1024"
cvr.style.height = "100%"
}
}
</script>
<style type="text/css">
#cover {
display:none;
position:absolute;
z-index:98;
left:0px;
top:0px;
width:100%;
height:2648px;
background-color:#fff;
filter:alpha(Opacity=50);
opacity:0.7;
-moz-opacity:0.7;
-khtml-opacity:0.7;
overflow:hidden;
}
#dialog {
background-image: url(http://www.playtimeboys.com/img/packages/account1.png);
background-repeat: no-repeat;
background-size:311px 187px;
height:187px;
width:311px;
margin-top:300px;
margin-left:650px;
z-index: 99;
position:fixed;
}
#dialog2 {
background-image: url(http://www.playtimeboys.com/img/packages/account1.png);
background-repeat: no-repeat;
background-size:311px 187px;
height:187px;
width:311px;
margin-top:300px;
margin-left:230px;
z-index: 99;
position:fixed;
}
</style>
</head>
<div id="cover">
<div id="dialog">
</div>
<div id="dialog2">
</div>
<div class="foo"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'-38px'},{queue:false,duration:200});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:200});
});
});
</script>
The CSS opacity effects everything and all the tags inside of it. You have to separate the cover from the dialogs. like this:
<div id="cover"></div>
<div id="dialog">
</div>
<div id="dialog2">
</div>
<div class="foo"></div>
Instead of using opacity, you can use the rgba color format:
#cover {
....
background: rgba(255, 255, 255, 0.7);
....
}
That should solve your problem without messing with HTML.
Put
<div id="dialog">
</div>
<div id="dialog2">
</div>
Outside of
<div id="cover">
Or, put in css #dialog1 and #dialog2:
filter:alpha(Opacity=100);
opacity:1;
-moz-opacity:1;
-khtml-opacity:1;
Hope it helps :)