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/
Related
I'm currently using javascript but switching to jQuery is OK.
Within the HTML is a <div id="domain">nares</div>. I need to pick out the "nares" and put it in an anchor tag to look like this: Listing.
So far the code looks like this:
<script type="text/javascript">
var dom = document.getElementById('domain').innerHTML;
openPage = function() {
location.href = "myCode.php?domain="+dom;
}
</script>
Link
To me this looks like it should work but instead when the page opens I get;
TypeError: null is not an object (evaluating
'document.getElementById('domain').innerHTML')
This is probably because the div has not yet been populated. However after population the error changes to:
XMLHttpRequest cannot load javascript:openPage(). Cross origin
requests are only supported for HTTP.
Which truthfully I don't understand. In any case using jQuery or just plain javascript how do I build this tag? I really need the modal part to work, its part of the UI for this project.
You should move your dom element into the function like so:
<a id="test" onclick="openPage()" rel="modal:open">Link </a>
<script type="text/javascript">
function openPage() {
var dom = document.getElementById('domain').innerHTML;
document.getElementById("test").href = "myCode.php?domain="+dom;
}
</script>
Also you should get your a tag then change the href...
I have a simple app done with jQuery Mobile, in some point I have this:
Start!
which loads a new HTML with a lot of jquery mobile pages:
<div data-role="page">
I have defined, in my external JS file, an global variable:
var startTimeQuestion;
And this method, which is inside my HTML (test_es.html):
<script>
$(document).on('pagecontainershow', function() {
console.log("Storing time..");
startTimeQuestion = new Date().getTime();
});
</script>
The problem is that when I click on the button it loads correctly the file but it seems like it don't load the JS or the function or I don't know, because when I'm going to use my startTimeQuestion variable it says UNDEFINED and it don't show in the console the 'Storing time..'. If a reload the page, it works fine.
I have tried to do an '$.(document).ready()' function for the first time I load the page but still not working. It looks like test_es.html it isn't loading my custom.css and my test.js file until I reload completely the page. So I supposed that the error is in how I call my test_es.html, it isn't this:
Start!
the correct way to do it?
Thanks.
Thanks to the comment before I found the solution, it was as simple as put the 'data-ajax' attribute to false this way:
Start!
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.
I'm having a problem with this jquery script. I have an a tag that has height:80% and the width is calculated by Javascript. I'm trying to expand it horizontaly with jquery on mouse over, so the width will have to be again calculated by JS. The script I'm using is the following:
$(document).ready(function(){
$("#bmenu1-1").mouseenter(function(){
var imh=(window.innerHeight||screen.availHeight)*0.18;
var imw=imh+"px";
$("#bmenu1-1").animate({width: imw },500);
});
});
Nothing happens on the page (when I put my mouse over the element) and I've tried putting there a window.alert(imw) but, also, nothing! If anyone has any thoughts....
Thanks for your help!
I need to implement a print page functionality with the following restrictions:
i cannot have a print view (no print.jsp to point to)
i cannot rely on print.css alone (because i have to move stuff around a lot in the DOM to get the page i want to print)
So i implemented this little script that can help clarifying where i'm going with this:
$(document).ready(function(){
$('a#print').click(function(){
var body = $('body');
var pageClone = body.clone(true);
$('div#search, div.chapters, div#footer').hide();
$('div.content').css('width', '100%');
$('div#logo').css('float', 'right');
window.print();
//reset the content and then copy it back
body.html('');
body.html(pageClone);
return false;
});
});
Now what this prints is the whole page before my DOM changes. So that's not what i want, so i was thinking i could graft the window.print() function to the body element, something like this:
var body = $('body');
jQuery.extend(body, {print:function(){return window.print(); }});
body.print();
Except this approach still prints the window content, not the body content if that was ever the problem.
Can you help me to print only the body as implemented in the DOM after my changes?
Thanks
you might want to check out jQPrint. it's a nifty little plugin that lets you specify which parts of the page you want to print.
http://plugins.jquery.com/project/jqPrint
You can open a new window (with window.open()), write your updated DOM into that, and then print from that window instead of your main window.
Browser print facilities remain surprisingly primitive.