Here's what works:
<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript">
function getElemWidth(){
var x = $( "#menuDiv").width();
alert(x);
}
</script>
</head>
<body onLoad="getElemWidth()" />
<div id="menuDiv" style="width:250px" />
</body>
Here's what doesn't work:
<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript" src="scripts/common.js"></script>
</head>
<body onLoad="getElemWidth()" />
<div id="menuDiv" style="width:250px" />
</body>
Contents of "common.js":
function getElemWidth(){
var x = $( "#menuDiv").width();
alert(x);
}
It is calling the function in both cases. I can use jquery in both cases, for example:
x = $(window).width();
works just fine. For some reason I can't get the document elements from within the .js included file. Is there something I'm missing?
I even added this right below the "common.js" include:
<script type="text/javascript">
$(document).ready(function(){
alert($('#menuDiv').width());
});
</script>
That works perfectly fine. I can reference #menuDiv from within the same file that menuDiv appears, but not in an included javascript file. Is this normal?
The problem is that the DOM is probably not ready for jQuery to act on it. The safest point at which to operate on the DOM is after the document is ready. The page may be loaded but not fully rendered. Your common.js should really look like this:
function getElemWidth(){
var x = $("#menuDiv").width();
alert(x);
}
$(document).ready(function(){
getElemWidth();
});
And your HTML like this:
<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript" src="scripts/common.js"></script>
</head>
<body>
<div id="menuDiv" style="width:250px"></div>
</body>
<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript" src="scripts/common.js"></script>
</script> <-- this is wrong, remove this extra tag
Depending on update question:
you should call the function within jQuery DOM ready
$(function (){
getElemWidth();
});
and HTML should be
<head>
<script type="text/javascript" src="scripts/jquery-ui-1.11.0.custom/jquery.min.js"></script>
<script type="text/javascript" src="scripts/common.js"></script>
</head>
<body> <!-- remove onload -->
<div id="menuDiv" style="width:250px" />
</body>
Related
Does anyone know why my jquery won't run? I've tried running on button click or page load but it isn't working. Thanks
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<iframe style="width:100%;height:700px;" id="frame" src="bing.com">
<script>
$(document).ready(function() {
alert("working");
});
</script>
</body>
You need to close your iframe tag and put in the complete url like this:
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<iframe style="width:100%;height:700px;" id="frame" src="http://bing.com"></iframe>
<script>
$(document).ready(function() {
alert("working");
});
</script>
</body>
I trying to load my html page using backbone framework .I am using backbone-marionettejs file.I need to show load my my template while using router functionalty in backbone .could you please tell me where i did wrong ? here is my code
http://goo.gl/cnrE7c
<!DOCTYPE HTML>
<html>
<head>
<title>Tut</title>
<script type="text/javascript" src="lib/jquery-1.11.2.min.js"></script>
<!--script type="text/javascript" src="lib/json2.js"></script-->
<script type="text/javascript" src="lib/underscore.js"></script>
<script type="text/javascript" src="lib/backbone.js"></script>
<script type="text/javascript" src="lib/backbone.marionette.js"></script>
<script type="text/javascript" src="router/router.js"></script>
<script type="text/javascript" src="view/first.js"></script>
</head>
<body>
<div>
<div id="header">
</div>
<div id="contend">
<p>Here is static content in the web page. You'll notice that it gets
replaced by our app as soon as we start it.</p>
</div>
<div id="fotter">
</div>
</div>
<script type="text/javascript" src="view/first.js"></script>
</body>
<script>
$(document).ready(function(){
var ContactManager = new Marionette.Application();
ContactManager.addRegions({
mainRegion:"#contend"
})
ContactManager.on("start", function(){
console.log("ContactManager has started!");
});
ContactManager.start();
})
</script>
</html>
I have the following code in my html file
<head>
<link href = "css/bootstrap.min.css" rel="stylesheet">
<link href = "css/aboutmestyle.css" rel="stylesheet">
<script src= "js/aboutme.js" type="text/javascript"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src= "js/bootstrap.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#menubar").click(function(){
$("#dropbox").animate({
top: '150px',
height:'400px',
});
});
});
</script>
<body>
<div id="dropbox">
</div>
</body>
However, when I move my js code into a file called aboutme.js and comment out the js code in the header, it doesnt work. My aboutme.js file looks like this
window.onload = pageLoad;
function pageLoad() {
$("#dropbox").click(function(){
$("#dropbox").animate({
height:'400px',
});
});
};
However, the code works if i leave it in my html header. Any reason why? Thanks!
It's not working because you're including your jQuery code before the jQuery library.
<script src="js/aboutme.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Just like in your original version, you must include your custom jQuery code AFTER the jQuery library...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/aboutme.js" type="text/javascript"></script>
There's absolutely no reason to remove your DOM ready event handler just because it's in an external file. The contents of your external file can be exactly the same as you had it within the <head>.
$(document).ready(function(){
$("#menubar").click(function(){
$("#dropbox").animate({
top: '150px',
height:'400px',
});
});
});
You need to include JS files in the order so that the files that are dependent on other file should be included aftr those other files.
So, if you add aboutme AFTER jquery, it should work
<head>
<link href = "css/bootstrap.min.css" rel="stylesheet">
<link href = "css/aboutmestyle.css" rel="stylesheet">
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script src= "js/aboutme.js" type="text/javascript"></script> // add aboutme here
</script>
<script src= "js/bootstrap.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#menubar").click(function(){
$("#dropbox").animate({
top: '150px',
height:'400px',
});
});
});
</script>
<body>
<div id="dropbox">
</div>
</body>
Move the line of code:
<script src= "js/aboutme.js" type="text/javascript"></script>
Below this line of code:
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
It should look like this:
<head>
<link href = "css/bootstrap.min.css" rel="stylesheet">
<link href = "css/aboutmestyle.css" rel="stylesheet">
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src= "js/aboutme.js" type="text/javascript"></script>
<script src= "js/bootstrap.js">
</script>
I want to access and modify elements that are loaded with angular views. I can't seem to do it, however the element is outputted in console just fine.
Layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
</head>
<body data-ng-app="myapp">
<div class="wrap">
<div class="header"></div>
<div class="content">
<div data-ng-view=""></div>
</div>
</div>
<script type="text/javascript" src="/content/plugins/jquery/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="/content/plugins/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="/content/plugins/pxgradient/pxgradient-1.0.2.jquery.js"></script>
<script type="text/javascript" src="/content/plugins/angularjs/angular.js"></script>
<script type="text/javascript" src="/content/plugins/angularjs/angular-route.js"></script>
<script type="text/javascript" src="/content/plugins/angularjs/angular-animate.js"></script>
<script type="text/javascript" src="/app/app.js"></script>
<script type="text/javascript" src="/content/js/main.js"></script>
</body>
</html>
View
<div class="home">
<h1 class="gradient">Transformation is comming</h1>
</div>
Javascript
$(function () {
var element = $('.gradient');
console.log(element); // this works
element.css('color', 'red'); // this does not
});
Ok I think I have a solution, try this:
app.run(function ($rootScope) {
$rootScope.$on('$viewContentLoaded', function () {
$('.gradient').css('color', 'red');
});
});
Your element might not be "ready" yet (not in the DOM yet).
You need to access to it in jquery document.ready function
If you use Angular, after the bootstrapping process is done, use Angular angular.element(document).ready
Example code: http://pairp.com/6144/1
Maybe your element has a css rule that you should override.
Try this:
$('.gradient').removeAttr('style').css('color','red');
You need write CSS as object:
element.css({'color':'red'});
why does message box not appear? Many thanks.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('<script>alert("hi");</' + 'script>').appendTo(document.body);
</script>
</head>
<body>
<span>my test</span>
</body>
</html>
You must wrap in in a $(document).ready.
Otherwise it won't be able to find body because it hasn't loaded yet.
$(document).ready(function() {
$('<script>alert("hi");</' + 'script>').appendTo(document.body);
})