Okay so This is my code. Im trying to get it to embed a webpage based on the screen resolution's for windows 8.1 applications but how do i recall the variables in my .js script.
<body>
<script>
function myFunction() {
var x = screen.width;
var y = screen.height;
document.getElementById('insert').width = x;
document.getElementById('insert').height = y;
}
</script>
<x-ms-webview id="insert" src="http://subgamer.com" width=0 height=0 ></x-ms-webview>
Please explain along with code!
I would strongly recommend using a library like JQuery as it makes your code much neater and is very powerful. This can simply be done using the following line of code: (for a web connected site, if it is for local use you would need to download the file locally)
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
Then it would be a simple matter of inserting the following code:
$(function(){
$('#insert').height($(window).height());
$('#insert').width($(window).width());
});
The $(function(){ }); tells it to run when the page has loaded.
The $('#insert') selects the element with id of 'insert' and the rest is just asigning the height and width values.
if the window will be resized at any point then you could put that inside a function
function resizeInsert(){
$('#insert').height($(window).height());
$('#insert').width($(window).width());
}
and call it when the page is loaded and when the screen is resized, like so:
$(function(){
resizeInsert();
});
$( window ).resize(function() {
resizeInsert();
});
This way your 'insert' element will always remain the full size of the window.
Related
I am using an outside API that allows me to send extra parameters inside the image src value, like so
<img src="myImage.jpg?resize=width[scrW]">
The problem is that I don't know what the width variable(scrW) is until I start loading the page. I use <script> var scrW = window.innerHtml </script> to get the width I need.
I tried using
<script>
document.write('<img src="myImage.jpg?resize=width['+window.innerHtml+']">')
</script>
but the problem with that is that document.write displays everything in text until the document is ready (or reaches </body>). And that just looks tacky.
My question is: How can I append/prepend JS variables to src attribut values during the page rendering?
How about just solving the problem of the text showing up before the page renders? That's easy. Just make sure your code doesn't run until the page's HTML is completely loaded.
Vanilla JS solution:
<script>
// self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
document.write('<img src="myImage.jpg?resize=width['+window.innerHtml+']">');
})();
</script>
Using jQuery:
<script>
$(document).ready(function() {
document.write('<img src="myImage.jpg?resize=width['+window.innerHtml+']">');
});
</script>
How about you give your image src some default resize value and when the page is loaded it will be updated. I have given the img an id of "myImage" so that I can access that in JavaScript code.
Here is the HTML:
<img id="myImage" src="myImage.jpg?resize=width[180]">
Insert this JavaScript at the end:
<script>var scrW = window.innerHTML;
document.getElementById("myImage").src = "myImage.jpg?resize=width["+scrW+"]";</script>
How do I take the code from codepen, and use it locally in my text-editor?
http://codepen.io/mfields/pen/BhILt
I am trying to have a play with this creation locally, but when I open it in chrome, I get a blank white page with nothing going on.
<!DOCTYPE HTML>
<html>
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="celtic.js"></script>
<link rel="stylesheet" type="text/css" src="celtic.css"></link>
</head>
<body>
<canvas id="animation" width="400" height="400"></canvas>
</body>
</html>
I have copy, pasted and saved the css and js into different files and saved them, then tried to link them into the html file as I have shown above.
I have also included the jquery library as I understand a lot of the codepen creations use it.
The only console error I'm getting is
Uncaught TypeError: Cannot read property 'getContext' of null
which is linking to my js file, line 4
(function(){
var canvas = document.getElementById( 'animation' ),
c = canvas.getContext( '2d' ),
Sorry if this is dumb, but I'm new to all this.
I'm sure this is basic as hell. Any help would be awesome!
Joe Fitter is right, but I think is better to export your pen (use the export to export.zip option for using your pen locally). This will give you a working version of your pen without having to copy and paste the CSS, JavaScript and HTML code and without having to make changes on it for making it work.
Right click on the result frame and choose View Frame source. And you can copy the source code and paste it in your own text-editor.
It seems your javascript is running before the HTML has finished loading. If you can use jQuery put the js inside of this;
$( document ).ready(function() {
// js goes in here.
});
either u can try this....
function init() {
// Run your javascript code here
}
document.addEventListener("DOMContentLoaded", init, false);
looks like you are calling the JS before the DOM is loaded.
try wrapping it in a
$(function() {
// your code here
});
which is the same as
$(document).ready(function() {
// your code here
});
if you are using jQuery.
or you could include the <script> tag after the content, just before the closing body tag, this will ensure the content has been rendered before the JS is executed
Or you could name the function in your JS and execute it onLoad of the body:
<body onLoad="yourFunction();">
To download the computed html of a codepen, go to the codepen of your choice,
then click the "Change View" button and go to the "full page" mode.
Now depends on your browser.
Firefox
display the source code (Cmd+u) and go at the very bottom.
Look for the last iframe and click on the value of the src attribute.
There you go.
Chrome
Right click in the page (not the codepen header) and choose the View FRAME source (not the view PAGE source) option.
There you go.
This is a very bizzare thing I am trying to solve.
Currently I am loading all of this at the end of my page and when I first load the page it alerts 571 and on a refresh it alerts 627. Whereas if I move this all to the <head> tag it alerts 627 every time and that is the correct value.
Can anyone see why loading this at the end of a page would lead to a wrong smaller window height?
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function() {
var Height = $(window).height()-40;
$("#section1").css('min-height',Height);
$("#section2").css('min-height',Height);
alert(Height);
});
</script>
Seriously I have no clue why this happens. To find out I would definitely need the code of the whole page or a working live example.
But in your case I would just use $(window).load instead of ready.
<script>
$(window).load(function() {
var Height = $(window).height()-40;
$("#section1").css('min-height',Height);
$("#section2").css('min-height',Height);
alert(Height);
});
</script>
I put this code into the index.html file or the view (html) file in my AngularJS web app and it works like a charm:
<div id="chart"></div>
<script>
var chart = document.getElementById("chart");
alert("width is : " + chart.offsetWidth);
</script>
I can resize my browser window and when I refresh, it tells me the new width.
However, when I put this code in with the code for a modal window in the view (html) file, I get "width is : 0"
Does anybody know why and how I can get the width of a DIV in a modal window?
The question is old but in case you or someone else haven't figured it out yet:
You need to make sure you get the value you're looking for AFTER the element(s) have been rendered. Otherwise you will always get '0'
That is why in jQuery you wrap your code in a block like this:
$(function() {
// your code here
});
There are a few variants of this;
In pure JS you would use 'document.onLoad'
If you're using jQuery you can use
$('#chart').width()
http://api.jquery.com/width/
I'm using the Telerik RadSpell control in one of our touchscreen applications. I've managed to style it just right however the darn thing uses window.alert and window.confirm for prompting the user if they want to keep changes etc.
I want to disable these alerts without having to pull apart and modify the telerik controls.
The issue is that the spellcheck dialog uses an iframe and I can't seem to override the window.confirm function inside the iframe.
Sample Code to test overriding confirm.
<!-- mainpage.htm -->
<html>
<head>
<script type="text/javascript">
window.confirm = function(msg){ alert(msg); }
confirm("Main Page Confirm");
</script>
</head>
<body>
<iframe src="./iframepage.htm" >
</iframe>
</body>
</html>
<!-- iframepage.htm -->
<html>
<head>
<script type="text/javascript">
confirm("iframe confirm");
</script>
</head>
<body>
Some content.
</body>
</html>
Results in
Is it possible to override the javascript in an iframe from the parent? If so how?
I just shared an easier solution in the first forum, which demonstrates how to override the cancelHandler and hide the confirm dialog.
For your convenience I am pasting the solution below:
I would propose an easier way to disable the popup and it is to override the cancelHandler function. To do that follow the steps below:
1) Create a JS file named dialog.js in the root of the web application and populate it with the following function:
Telerik.Web.UI.Spell.SpellDialog.prototype.cancelHandler = function (e) {
if (this._cancel.disabled) {
return $telerik.cancelRawEvent(e);
}
//changes will be applied only if spell handler response is received, text has changed
//and the user confirms
this.closeDialog(this._spellProcessor && this._spellProcessor.textChanged() && true);
return $telerik.cancelRawEvent(e);
}
2) Save the file and set the DialogsScriptFile property of RadSpell to point to this file, e.g.
3) Test the solution.
I hope this helps.
You can get a reference to the innerwindow using javascript IFF the frame is from the same exact domain as the parent.
//Get iframe element by getElementById, frames[0], or whatever way you want
var myFrame = document.getElementById("myFrame");
//Get the window of that frame, overwrite the confirm
myFrame.contentWindow.confirm = function(msg){ alert("I overwrote it! : " + msg); }
You should be able to:
document.getElementById('iframe').contentWindow.confirm = [this is confirm in the iframe];
Perhaps something like this might work nicely for you:
document.getElementById('iframe').contentWindow.confirm = window.confirm;
This would link the confirm of the iframe to the confirm of the parent, which is nice if you already have some handling for confirms in the parent.
Note that you also will want to add some handling for possible undefined objects.
var iframe = document.getElementById('iframe');
//iframe exists
if(iframe){
var iframe_window = document.getElementById('iframe').contentWindow;
//window exists (won't if frame hasn't loaded)
if(iframe_window){
iframe_window.confirm = window.confirm;
}
}
You can take a look at the following resources, which could be helpful for your scenario:
http://www.telerik.com/community/forums/aspnet-ajax/spell/how-do-i-turn-off-the-confirm-dialog.aspx
and
http://www.telerik.com/help/aspnet-ajax/spell-client-check-finished.html
They show how to remove the RadSpell confirm and alert popups.
Best regards,
Rumen