Forum Moderators: open
I've been struggling with Java Script for a couple of days now! Hope you can help.
First, I have no clue about java script :). Thought I could start tackling it hands on but its seems like highest level of meta physics.
Rely on dreamweaver to create JS and forget the rest.
Since pages must be SEO friendly I wanted to put off the JS to the external file and cannot figure out how to.
Goal - make JS link work from an external file. The real benefit of the JS is the control over size, navbars and toolbars, which is very nice both visually and from use experience. Want very much to keep it and dock the script externally.
Problem - no clue how to.
here is a some code from the page so you know how it looks like in a dream weaver( link is offline for now):
This is some stuff from the begginning of the page:
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
and we get to the actual link this is how it looks like(exact look):
(<a href="#" onClick="MM_openBrWindow('file:///C:/Users/Ivan/Desktop/....../explain.html','openwindow','scrollbars=yes,width=750,height=550')">view example</a>)
Would appreciate any help very much! Been struggling with that thing for a while now and it drives me nuts!
Before picking apart Dreamweaver's boilerplate code and onclick events, go back a few steps to learn the basics. JavaScript surely seems like insanity manifest at first, but I assure you anyone can learn it with tenacity and a good guide.
I'll admire your desire to do it all "hands on", but you mustn't explore Javascript without a good manual in your lap (or... on your other screen). The two most recommended guides are (printed) the O'Reilly Definitife Guide by David Flanagan, and (online) the Core Javascript Guide [developer.mozilla.org] from Mozilla. MSDN also has a good library for looking up specific functions properties and methods.
First, the external script part. To move your scripting to an external file (which by the way is a good habit), create a file with a *.js extension, like "script.js". Then reference it in your HTML using the "src" attribute of a <script> element.
Like so:
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<a href="#" onClick="MM_openBrWindow('explain.html','openwindow','scrollbars=yes,width=750,height=550')">view example</a>
</body>
</html>
In your script file, you don't need the <script> tags; just start in with the code. So in "script.js", paste this in, and save it:
function MM_openBrWindow(theURL,winName,features){
window.open(theURL,winName,features);
}
Now open your HTML file in a browser. Click on the link "view example", and it'll open a new 750x550 browser window, with scrollbars.
The real benefit of the JS is the control over size, navbars and toolbars, which is very nice both visually and from use experience.
I feel you may be misunderstanding what JS does. Yes, you can control the size of page elements using JavaScript, but those tasks are far better handled by CSS [webmasterworld.com].
Welcome to WebmasterWorld!
Sorry for my sloppiness in explanations.
Thanks again, gonna do this on all pages now =)
Since you have your scripts in an external file (good!), go one step further and make your code "Unobtrusive". That's a relatively new jargon that's been floating around the JS world, which means that your HTML doesn't have any Javascript hiding in it. All the script is kept in a separate file, where it's easy to maintain without affecting your page layout.
The Obtrusiveness is in this link:
<a href="#" onClick="MM_openBrWindow('explain.html','openwindow','scrollbars=yes,width=750,height=550')">view example</a>
It's big, and ugly, and non-semantic. Instead of putting the javascript right inside the HTML element (using the "onclick" attribute), move them out into the JS file.
replace your link with this:
<a href="#" id="this_is_a_link">view example</a>
Now, go back into your script.js file.
First, throw that "MM_openBrWindow" function away.
replace it with this:
var thelink = document.getElementById('this_is_a_link');
thelink.onclick = function(){
var url = 'explain.html';
var winName = 'openwindow';
var features = 'scrollbars=yes,width=750,height=550';
window.open(url,winName,features);
}
explanation:
var thelink = document.getElementById('this_is_a_link');One such event listener is "onclick". "click" is the event, "onclick" is the listener. "onclick", as a listener, is triggered when the "click" event happens. All the built-in listeners in JS start with "on".
The "click" event is the one that happens when you depress the mouse button over an element, and release it while still on that element. That makes it subtly different from other events like "onmousedown" and "ondrag".
thelink.onclick = function()
var url = 'explain.html';
var winname = 'openwindow';
var features = 'scrollbars=yes,width=750,height=550';
window.open(url,winname,features);
That should get you started on the right path. Good luck!
js file:
function change_M(iText, mElem) {
var section = document.getElementById(mElem);
var aElem = document.getElementById(mElem+'_a');
if ( iText == 'Minimise' ) {
var nText = 'Maximise';
var nShow = 'none';
} else {
var nText = 'Minimise';
var nShow = 'block';
}
aElem.onclick = function() { change_M(nText, mElem) };
aElem.innerHTML = nText;
section.style.display = nShow;
return false;
}
php file:
<body>
<a href="#" id="garment_data_a" class="jq_minimise" onclick="change_M('Minimise', 'garment_data');">Minimise ></a>
Any help is much appreciated.
Kind regards !
