Got one easy question for you, but still hard for me...
All i'm trying to do, is maximize new, opened window with different button...But it doesn't work, cant figure out why .. can someone please tell me, what i do wrong?
<form>
<input type="button" value="Create New Window" onclick="createWindow()" />
<input type="button" value="Maximize New Window" onclick="maximizeWindow()" />
</form>
var maxWindow;
function createWindow(){
var winWidth = 300;
var winHeight = 100;
var winLeft = (screen.width - winWidth)/2;
var winTop = (screen.height - winHeight)/2;
var winOptions = ",width=" + winWidth + ",height=" + winHeight + ",left=" + winLeft + ",top=" + winTop;
maxWindow = window.open("http://www.google.com","newWindow",winOptions);
maxWindow.focus();
}
function maximizeWindow() {
maxWindow.moveTo(0,0);
maxWindow.resizeTo(screen.availWidth, screen.availHeight);
maxWindow.focus();
}
<script>
var maxWindow;
function createWindow(){
var winWidth = 300;
var winHeight = 100;
var winLeft = (screen.width - winWidth)/2;
var winTop = (screen.height - winHeight)/2;
var winOptions = ",width=" + winWidth + ",height=" + winHeight + ",left=" + winLeft + ",top=" + winTop+'fullscreen=yes';
maxWindow = window.open("http://www.google.com","newWindow",winOptions);
maxWindow.focus();
}
function maximizeWindow() {
maxWindow.moveTo(0,0);
maxWindow.resizeTo(screen.width, screen.height);
maxWindow.focus();
}
</script>
<form>
<input type="button" value="Create New Window" onclick="createWindow()" />
<input type="button" value="Maximize New Window" onclick="maximizeWindow()" />
</form>
i add this to first function 'fullscreen=yes' and in second function change second line with my code maxWindow.resizeTo(screen.width, screen.height);
Related
When clicking on the button, I am assigning random margins from the top and left to it, so it can move but it's not working.
HTML
<button id="bouncing" class="btn btn-primary">Click Me</button>
JS
var button = document.querySelector("button");
button.addEventListener("click", function() {
var changeTop = (Math.random() * ($(window).height() - $("button").height()));
var changeLeft = (Math.random() * ($(window).width() - $("button").width()));
$("button").css("margin-top", changeTop + "px");
$("button").css("margin-left", changeLeft + "px");
});
This works fine.You probably didn't include jQuery in your code
var button = document.querySelector("button");
button.addEventListener("click", function() {
var changeTop = (Math.random() * ($(window).height() - $("button").height()));
var changeLeft = (Math.random() * ($(window).width() - $("button").width()));
$("button").css("margin-top", changeTop + "px");
$("button").css("margin-left", changeLeft + "px");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="bouncing" class="btn btn-primary">Click Me</button>
You forgot to add jquery. Add it via CDN or install it and it will work, like this-
var button = document.querySelector("button");
button.addEventListener("click", function() {
var changeTop = (Math.random() * ($(window).height() - $("button").height()));
var changeLeft = (Math.random() * ($(window).width() - $("button").width()));
$("button").css("margin-top", changeTop + "px");
$("button").css("margin-left", changeLeft + "px");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="bouncing" class="btn btn-primary">Click Me</button>
I have this script, however, I cannot figure out how to get an image to show up in the pop up window. Right now, when the window pops up, I only get script. I have tried to enter a link using the href code and the
<html>
<head>
<SCRIPT language="JavaScript">
var w = 480, h = 340;
if (document.getElementById) {
w = screen.availWidth;
h = screen.availHeight;
}
var popW = 300, popH = 200;
var leftPos = (w-popW)/2;
var topPos = (h-popH)/2;
msgWindow = window.open('','popup','width=' + popW + ',height=' + popH +
',top=' + topPos + ',left=' + leftPos + ', scrollbars=yes');
msgWindow.document.write
('<HTML><HEAD><TITLE>Centered Window</TITLE></HEAD><BODY><FORM NAME="form1">' +
' <H1>Notice the centered popup window.</H1>This is the ordinary HTML' +
' document that can be created on the fly. But the window is centered in ' +
' the browser. Click the button below to close the window.<br />' +
'<INPUT TYPE="button" VALUE="OK"onClick="window.close();"></FORM></BODY> </HTML>');
</script>
<form>
<input type="button" onClick="openWindow()" value="Click Me">
</form>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<html>
<head>
<SCRIPT language="JavaScript">
var w = 480, h = 340;
function openWindow(){
if (document.getElementById) {
w = screen.availWidth;
h = screen.availHeight;
}
var popW = 800, popH = 700;
var leftPos = (w-popW)/2;
var topPos = (h-popH)/2;
msgWindow = window.open('','popup','width=' + popW + ',height=' + popH +
',top=' + topPos + ',left=' + leftPos + ', scrollbars=yes');
msgWindow.document.write
('<HTML><HEAD><TITLE>Centered Window</TITLE></HEAD><BODY><FORM NAME="form1">' +
'<img src="https://static5.cargurus.com/images/site/2009/10/24/14/42/2004_suzuki_vitara_4_dr_lx_4wd_suv-pic-8731393806365188898-640x480.jpeg">'+
' <H1>Notice the centered popup window.</H1>This is the ordinary HTML' +
' document that can be created on the fly. But the window is centered in ' +
' the browser. Click the button below to close the window.<br />' +
'<INPUT TYPE="button" VALUE="OK"onClick="window.close();"></FORM></BODY> </HTML>');
}
</script>
<form>
<input type="button" onClick="openWindow()" value="Click Me">
</form>
</body>
</html>
To just show an image, then replace this part as shown:
msgWindow.document.write ('<img src="//i.imgur.com/j2JTnI2.png" >');
I strongly recommend against using document.write();, use document.body.innerHTML instead.
precisely use:
msgWindow.document.body.innerHTML = '<img src="url/to/your/image.jpg"></img>';
instead of:
msgWindow.document.write('<HTML><HEAD><TITLE>Centered Window</TITLE></HEAD><BODY><FORM NAME="form1">' +
' <H1>Notice the centered popup window.</H1>This is the ordinary HTML' +
' document that can be created on the fly. But the window is centered in ' +
' the browser. Click the button below to close the window.<br />' +
'<INPUT TYPE="button" VALUE="OK"onClick="window.close();"></FORM></BODY> </HTML>');
Here's a working example using an image.
I want a window that shrinks to fit the current window. This Fiddle is very close to what I want to achieve. To use it simply resize the output window vertically until the blue line gets cutoff. Then reverse the process. However, I want it to continue to work even if there is padding and/or other elements on the page.
<div id="output"></div>
<div id="sample" class="sampleClass">
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
</div>
window.addEventListener("resize", updateDimensions);
var originalHeight = document.getElementById('sample').offsetHeight;
var safeBuffer = 15;
function updateDimensions(){
var node = document.getElementById('sample');
var windowDimensions = {width: window.innerWidth, height: window.innerHeight};
var dimensions = node.getBoundingClientRect();
var nodeBottom = dimensions.bottom;
var nodeHeight = node.offsetHeight;
var nodeTop = dimensions.top;
var windowHeight = windowDimensions.height;
var windowIsCutOff = windowHeight <= nodeBottom;
var windowIsShowing = windowHeight >= nodeTop;
console.log('windowHeight: ' + windowHeight + ' safeBuffer: ' + safeBuffer);
console.log('nodeHeight: ' + nodeHeight + ' originalHeight: ' + originalHeight);
var nodeCanGrowBigger = (windowHeight - safeBuffer - 10) > nodeHeight && nodeHeight < originalHeight;
console.log('nodeCanGrowBigger: ' + nodeCanGrowBigger);
if(windowIsShowing && windowIsCutOff) {
console.log('do work');
shrinkWindow(nodeBottom, windowHeight, nodeHeight);
}
if(nodeCanGrowBigger){
growWindow(nodeBottom, windowHeight, nodeHeight);
}
}
function growWindow(nodeBottom, windowHeight, nodeHeight){
var node = document.getElementById('sample');
var originalHeight = nodeHeight;
var offset = nodeHeight - windowHeight;
var newHeight;
if(offset >= -safeBuffer && offset <= safeBuffer){
newHeight = originalHeight;
}
else if(offset >= 0){
newHeight = originalHeight + offset;
console.log('positive calculation originalHeight: ' + originalHeight + ' offset: ' + offset + ' for newHeight: ' + newHeight);
}else{
newHeight = originalHeight - offset;
console.log('negative', newHeight);
}
node.style.height = newHeight + 'px';
console.log('height attmpted changed to', newHeight);
console.log('height offset', node.offsetHeight);
console.log('height style', node.style.height);
}
function shrinkWindow(nodeBottom, windowHeight, nodeHeight) {
var node = document.getElementById('sample');
var originalHeight = nodeHeight;
//console.log('originalHeight', originalHeight);
//console.log('nodeBottom:' + nodeBottom + ' windowHeight: ' + windowHeight);
var offset = nodeHeight - windowHeight;
//console.log('offset', offset);
var newHeight;
if(offset >= -safeBuffer && offset <= safeBuffer){
newHeight = originalHeight - (safeBuffer + 1);
}
else if(offset >= 0){
newHeight = originalHeight - offset;
//console.log('positive calculation originalHeight: ' + originalHeight + ' offset: ' + offset + ' for newHeight: ' + newHeight);
}else{
newHeight = originalHeight + offset;
//console.log('negative', newHeight);
}
node.style.height = newHeight + 'px';
/*
console.log('height attmpted changed to', newHeight);
console.log('height offset', node.offsetHeight);
console.log('height style', node.style.height);
*/
}
.sampleClass {
padding: 0px;
height: 300px;
overflow-y: auto;
border: solid blue;
//margin: 10px 300px 10px 25px;
margin: 0px
position: 'relative'
}
This JavaScript solution I came up with feels overly complex. It doesn't solve for things like padding, or more content on the page either. Can I solve this problem with plain old CSS or a JS extension?
I know Kendo ui has this effect in their Modal windows (at least in the 5 year old version we use). I'm not open to using Kendo.
Difficult to say if this will work for your situation ... Look at the following touch-up. It could use more work, but I think it will point you in the direction I was heading:
function updateDimensions(){
var node = document.getElementById('sample');
var windowDimensions = {width: window.innerWidth, height: window.innerHeight};
var dimensions = node.getBoundingClientRect();
var nodeBottom = dimensions.bottom;
var nodeHeight = node.offsetHeight;
var nodeTop = dimensions.top;
var windowHeight = windowDimensions.height;
var windowIsCutOff = windowHeight <= nodeBottom;
var windowIsShowing = windowHeight >= nodeTop;
console.log('windowHeight: ' + windowHeight + ' safeBuffer: ' + safeBuffer);
console.log('nodeHeight: ' + nodeHeight + ' originalHeight: ' + originalHeight);
var nodeCanGrowBigger = (windowHeight - safeBuffer - 10) > nodeHeight && nodeHeight < originalHeight;
console.log('nodeCanGrowBigger: ' + nodeCanGrowBigger);
if ( (windowIsShowing && windowIsCutOff) || nodeCanGrowBigger ) {
growWindow(nodeTop, windowHeight, nodeHeight);
}
}
function growWindow(nodeTop, windowHeight, nodeHeight){
var node = document.getElementById('sample');
var offset = windowHeight - ( nodeTop + nodeHeight + safeBuffer );
var newHeight = nodeHeight + offset;
node.style.height = newHeight + 'px';
}
As you can see, I use nodeTop instead of nodeBottom for the calculation and I used the combination of nodeTop, nodeHeight and safeBuffer to indicate the bottom of the node, then used the difference of that with the window for the offset. This should work regardless of whether you're shrinking or expanding the window.
This is the version most like Kendo UI:
window.addEventListener("resize", updateDimensions);
var node = document.getElementById('sample');
var style = node.currentStyle || window.getComputedStyle(node);
var marginTop = style.marginTop.replace("px", "");
marginTop = parseInt(marginTop, 10);
var innerNode = document.getElementById('inner');
var innerNodeStyle = innerNode.currentStyle || window.getComputedStyle(innerNode);
var innerMarginTop = innerNodeStyle.marginTop.replace("px", "");
innerMarginTop = parseInt(innerMarginTop, 10);
var innerMarginBottom = innerNodeStyle.marginBottom.replace("px", "");
innerMarginBottom = parseInt(innerMarginBottom, 10);
var totalInnerMarginSize = innerMarginTop + innerMarginBottom;
var safeBuffer = 0;
//if(marginTop < 20){
safeBuffer = 20;
//}
var originalHeight = node.offsetHeight + marginTop + safeBuffer;
function updateDimensions(){
var windowDimensions = {width: window.innerWidth, height: window.innerHeight};
var dimensions = node.getBoundingClientRect();
//console.log('totalInnerMarginSize: ' + totalInnerMarginSize);
var cutoffPoint = marginTop + node.offsetHeight + safeBuffer + totalInnerMarginSize ;
var nodeTop = dimensions.top;
var innerNodeDimensions = innerNode.getBoundingClientRect();
var innerNodeTop = innerNodeDimensions.top;
var innerNodeHeight = innerNodeDimensions.height;
//console.log('innerNodeHeight: ' + innerNodeHeight);
var windowHeight = windowDimensions.height;
console.log('windowHeight: ' + windowHeight + ' cutoffPoint: ' + cutoffPoint);
var windowIsCutOff = windowHeight <= cutoffPoint;
//console.log('windowHeight: ' + windowHeight + ' nodeTop: ' + nodeTop);
var windowIsShowing = windowHeight > nodeTop;
var nodeCanGrowBigger = windowHeight > cutoffPoint && cutoffPoint < originalHeight;
//console.log('nodeCanGrowBigger: ' + nodeCanGrowBigger);
//console.log('windowHeight: ' + windowHeight + ' cutoffPoint: ' + cutoffPoint
//+ ' originalHeight: ' + originalHeight);
//console.log('windowIsShowing: ' + windowIsShowing + ' windowIsCutOff: ' + windowIsCutOff + ' nodeCanGrowBigger: ' + nodeCanGrowBigger);
if ( (windowIsShowing && windowIsCutOff) || nodeCanGrowBigger ) {
resizeWindow(innerNodeHeight, windowHeight, cutoffPoint);
}
}
function resizeWindow(innerHeight, windowHeight, cutoffPoint){
//console.log('innerHeight: ' + innerHeight + ' windowHeight: ' + windowHeight
//+ ' cutoffPoint: ' + cutoffPoint);
var newHeight = innerHeight - (cutoffPoint - windowHeight);
innerNode.style.height = newHeight + 'px';
}
<div id="output"></div>
<div id="sample" class="sampleClass">
<h1>
Header
</h1>
<div id="inner">
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
</div>
<h1>
footer
</h1>
</div>
.sampleClass {
padding: 10px;
//height: 300px;
overflow-y: auto;
border: solid blue;
//margin: 10px 300px 10px 25px;
margin: 70px;
position: 'relative'
}
#inner{
position: 'relative';
overflow-y: auto;
border: solid red 1px;
}
I'm getting slowly back to javascript and I'm a bit lost on basics.
I just want to move an image to follow the mouse position.
Here is a simple code I've been tweaking for some time without any success :
<html>
<head>
</head>
<body>
<img id="avatar" src="Klaim.png" style="position:absolute;" />
</body>
<script lang="javascript">
function updateAvatarPosition( e )
{
var avatar = document.getElementById("avatar");
avatar.x = e.x;
avatar.y = e.y;
// alert( "e( " + e.x + ", " + e.y + " )" );
// alert( "avatar( " + avatar.x + ", " + avatar.y + " )" );
}
document.onmousemove = updateAvatarPosition;
</script>
</html>
It looks a lot like some tutorials to do this very thing.
What I don't understand is that using the alerts (I don't know how to print in the browser's javascript console) I see that avatar.x and y are never changed. Is it related to the way I've declared the image?
Can someone point me what I'm doing wrong?
I think that you don't want to set x and y, but rather style.left and style.top!
avatar.style.left = e.x;
avatar.style.top = e.y;
There is no x and y property for avatar - you should use 'top' and 'left' instead. Also, move the var avatar = document.getElementById("avatar"); declaration outside of the function, as you only need to do this once.
<html>
<head>
</head>
<body>
<img id="avatar" src="Klaim.png" style="position:absolute;" />
</body>
<script lang="javascript">
function updateAvatarPosition( e )
{
var avatar = document.getElementById("avatar");
avatar.style.left = e.x + "px";
avatar.style.top = e.y + "px";
//alert( "e( " + e.x + ", " + e.y + " )" );
//alert( "avatar( " + avatar.x + ", " + avatar.y + " )" );
}
document.onmousemove = updateAvatarPosition;
</script>
</html>
avatar.style.top = e.clientY + 'px';
avatar.style.left = e.clientX + 'px';
Ok, so I am trying to use jQuery to get the innerWidth() of an element #preview. I want to create a conditional that says IF x offset LEFT + #preview width is greater than page width, give it style right: z where z = #preview width + xOffset.
I apologize my code below is a mess and the syntax for .css ("right", (rightFloat + xOffset) + "px") (line 125) is off, but that's part of my problem.
<script>
$(document).ready(function(){
//append "gallery" class to all items with "popup" class
imagePreview();
$(".popup").addClass("gallery");
});
//The overlay or pop-up effect
this.imagePreview = function() { /* CONFIG */
xOffset = 40;
yOffset = 40;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.preview").click(function(e) {
return false;
});
$("a.preview").hover(function(e) {
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
var rightFloat = e.pageX + ("#preview").innerWidth;
$("body").append("<p id='preview'><img src='" + this.href + "' alt='Image preview' />" + c + "</p>");
$("#preview").hide().css("top", (e.pageY - yOffset) + "px").css("left", (e.pageX + xOffset) + "px").fadeIn("2000");
while ((left + 400) > window.innerWidth) {.css("right", (rightFloat + xOffset) + "px")
}
}, function() {
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e) {
var top = e.pageY - yOffset;
var left = e.pageX + xOffset;
var rightFloat = e.pageX + ("#preview").innerWidth;
//flips the image if it gets too close to the right side
while ((left + 400) > window.innerWidth) {.css("right", +(rightFlaot + xOffset) + "px")
}
$("#preview").css("top", top + "px").css("left", left + "px");
});
};
</script>
Try using http://api.jquery.com/offset/
if($('#preview').offset().right<0){
var right = parseInt($(window).width()) - e.pageX + xOffset;
$("#preview").css("top", top + "px").css("right", right + "px");
}else{
var left = e.pageX + xOffset;
$("#preview").css("top", top + "px").css("left", left + "px");
}
I made these fixes because I couldn't get your code to work in jsfiddle:
var xOffset = 40;
var yOffset = 40;
$("a.preview").bind('mouseover',function(e){
var rightFloat = parseFloat(e.pageX)+$("#preview").innerWidth();
var ptop = parseFloat(e.pageY) - yOffset;
var pleft = parseFloat(e.pageX) + xOffset;
$("#preview").css({"top":ptop + "px","left":pleft + "px"});
});
There's the fixes for the top half but I have no idea what you're trying to do with the bottom part (with the while loop). Can you explain what functionality you want?