Any reason this code is not changing the CSS top property of my #image div?
$(function() {
console.log($("#image").css('top'));
$("#image").css("top",($("#maincontent").outerHeight(true)/2)-255 + "px");
console.log($("#image").css('top'));
});
I am not very skilled with jQuery, so I understand if some of it is wrong, or all of it, but both helping assist with the problem and telling me what I did wrong would be very useful.
Here is the JSFIDDLE:
https://jsfiddle.net/tg3vvh3v/1/
My entire HTML document looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../Module 10/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
};
$(function() {
console.log($("#image").css('top'));
$("#image").css("top",($("#maincontent").outerHeight(true)/2)-255 + "px");
console.log($("#image").css('top'));
});
</script>
<body onload="MM_preloadImages('../Module 10/Home-Page-Roll.png','../Module 10/Intro-Roll.png','../Module 10/Lesson-Roll.png','../Module 10/Final-Roll.png','../Module 10/website_design_dpk.png','../Module 10/website_design_dpk-roll.png','../Module 10/tools-html-coding.jpg','../Module 10/Website Desiging.png','../Module 10/Final Exam.jpg')">
<div id="header">
<a href="../Module 10/Index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Header','','../Module 10/website_design_dpk-roll.png',1)"><img src="../Module 10/website_design_dpk.png" alt="Header that leads back to index page" width="850" height="320" id="Header" /></a> </div>
<div id="nav">
<a href="../Module 10/Index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../Module 10/Home-Page-Roll.png',1)"><img src="../Module 10/Home-Page-Org.png" alt="Link to home page" width="161" height="80" id="Home" /></a>
<a href="../Module 10/Intro.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Intro','','../Module 10/Intro-Roll.png',1)"><img src="../Module 10/Intro-Orig.png" alt="Link to introduction of lesson" width="161" height="80" id="Intro" /></a>
<a href="../Module 10/Lesson.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lesson','','../Module 10/Lesson-Roll.png',1)"><img src="../Module 10/Lesson-Orig.png" alt="Link to lesson page" width="161" height="80" id="Lesson" /></a>
<a href="../Module 10/Final.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Final','','../Module 10/Final-Roll.png',1)"><img src="../Module 10/Final-Orig.png" alt="Link to Final of lesson" width="161" height="80" id="Final" /></a></div>
<div id="wrapper">
<!-- TemplateBeginEditable name="Main Content" -->
<div id="maincontent">
<h2>Lesson 2.04: What makes a good web site?</h2>
<p><BR>
</p>
<p>All new web designers can learn a great deal about what looks good and what looks not so good by studying the design of pages they see on the Web. A new web designer has many factors to think about while producing their pages including the content, the overall look of the pages, the color scheme, the aesthetics, and the ease of navigation. Please keep the following elements in mind when designing your own web pages later in this module.</p>
<p><BR>
</p>
<h3> Design Tips</h3>
<p><BR>
</p>
<p>Here are a few tips that will help any web designer create great web pages and ultimately great web sites! </p>
<p><BR>
</p>
<p>Keep your content concise and free of grammatical, spelling, and typographical errors. Your content should be short and to the point. It should also be looked upon as a credible source of information. </p>
<p><BR>
</p>
<p>Keep your web pages consistent. By using the same color scheme, heading format, text, buttons, and style, you make it easy for the viewer to understand they are still on your web site and have not been taken to another location on the Web by clicking on a link. </p>
<p><BR>
</p>
<p>Always use contrasting colors for your background and text. This makes it easy for the viewer to read. Steer clear of using busy backgrounds that are hard to read. Please remember it is very difficult to read text that is put on a textured or patterned background. </p>
<p><BR>
</p>
<p> It is considered "good design" to maintain pages that are simple and do not use all the bells and whistles that are available. Using animations, gimmicks, flashy backgrounds, etc. should all be done in moderation. </p>
<p><BR>
</p>
<p>Do not use large images. Large images take a long time to download. Please keep this in mind and use small images that add meaning to the content of your page. Do not use images simply for decoration.</p>
<p><BR>
</p>
<p> The rule of thumb is that the image should be no larger than 300 pixels on either side or 25k in size. If the image is larger and it is important to show the entire image, then you should use a thumbnail image on your web page and link the thumbnail image to the larger image.</p>
<p><BR>
</p>
<p>Preview your pages in multiple browsers to make sure you are happy with the way they look. Often pages will look different in Firefox, Internet Explorer, Safari, and others. </p>
<p><BR>
</p>
<p>Always check to make sure your links are properly working and to check your links to the outside frequently. A good web designer knows that revisions and updates are mandatory to maintain a good web site.</p>
<p><BR>
</p>
<h3>Web Design Resources</h3>
<p><BR>
</p>
<p>Please visit the following links to learn more about web design.</p>
<i> <p>• https://www.gov.uk/designprinciples</p>
<p>• http://www.famouslogos.org/good-website-design-tips</p>
<p>• http://andrewpritchard.com/2007/website-design-what-not-to-do/</p>
<p>• http://problemwebsites.com/</p>
</i>
</div>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="Background image" -->
<div id="image" style="background-image: ;">
</div>
<!-- TemplateEndEditable -->
</div>
<div id="footer">
<h3>Thank you for visitng WWVS! Please remember to check your pace schedule and remember if work is not submitted every 2 weeks, you will be removed from your course! </h3>
</div>
</body>
</html>
The CSS can be found on my jsfiddle.
http://jsfiddle.net/tg3vvh3v/2
$(function() {
console.log($("#image").css('top'));
$("#image").css("top",($("#maincontent").outerHeight(true)/2)-255 + "px");
console.log($("#image").css('top'));
});
I added jquery to the fiddle javascript cog and made it include the script in the head so your functions would exist before you tried to do your inline binding (which typically should be avoided). As you can see the console is showing the top is changed.
Inline bindings typically need the functions to already be defined before the markup tries to bind them. If they don't this can result in errors which can halt your scripts.
Its preferred to do your binding inside your logic so that you separate your markup and your logic which provides better decoupling and can centralize your logic and in some cases reduce redundancy.
*Edit: the console logs were just so i could see the change. They should not have any affect on the script functionality and can be removed.