Why can't I use any DOM functions? - javascript

<!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>
<style type="text/css">
div.main1{
background-color:#EEE;
border: 2px dotted;
padding: 5px;
}
div.sub{
background-color:#DDD;
border: 1px dashed;
padding: 3px;
width:50%;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
function showOptions(box){
box.childNodes[0].style.visibilty = "visible";
box.childNodes[1].style.visibilty = "visible";
}
function hideOptions(box){
box.childNodes[0].style.visibilty = "hidden";
box.childNodes[1].style.visibilty = "hidden";
}
</script>
<center>
<div class="main1">
<div class="sub" onmouseover="showOptions(this);" onmouseout="hideOptions(this);"><input />
</div>
</center>
</body>
</html>
Above is an example of the code I am using, i am using Dreamweaver... My concern is that When i Ctrl + Space after "box" in the showOptions(box) method, i don't see any of the DOM object options, i apologise if i'm making no sense because im quite new to HTML + Javascript, basically what im trying to do is check if the given argument to the function of a HTML Element, and if so, allow me to access its methods such as "childNodes" or "setAttribute()" and so on..
Is this possible?

What you're describing is called Intellisense/code hinting. From what I understand, Dreamweaver doesn't do a very good job with this.
have you thought about using a different editor? If you're working with mainly code other than .Net then maybe something like Komodo Edit.
If you're going down the .Net route then there is of course Visual Studio Express which does a much better job with Intellisense/code hinting
Edit
Also, you're attempting to see the intellisense on the method itself - this isn't the intention. It's intended to look AT the method from somewhere else. So ideally you would do your CTRL+space where shown below:
onmouseover="showOptions(this);"
-------------------------^Here
Another Edit
Also, looking at your code, it's not going to work..
You are referencing a child that doesn't exist:
box.childNodes[1].style.visibilty = "hidden";
childNodes starts at zero, so [0] would be the input. [1] is nothing.
Finally
Might I suggest you install Firefox and Firebug. Firebug will help you debug all your javascript. It does a GREAT job of telling you what/where the issue is.

You can give the IDE hints about types with JSDOC
/**
* #param {HTMLElement} box
*/
function showOptions(box){
}
Many IDEs are able to read that information and provide the correct methods for an HTMLElement. However, I haven't seen one that is smart enough to know what to suggest if you hit ctrl+space after box.childNodes[i]

Related

How to suppress or exclude CSS file from shiny header without reloading app [duplicate]

I don't want to use styles from style.css, so I decided to remove style.css from DOM. This work just fine in Firefox and IE8, but not in IE6:
$("LINK[href='http://www.example.com/style.css']").remove();
Any other solution, with jQuery?
Here is example:
HTML:
<!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" />
<title>Testing</title>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("link[href*='style.css']").remove();
});
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content">...</div>
</body>
</html>
And here is CSS (style.css):
#content {
background-color:#333;
}
Only in IE #content is still dark. :(
Maybe is jQuery bug?
This is not a bug in jQuery, it is a bug (or possibly, a feature) of the IE rendering engine.
It seems this problem is being caused by the fact that Internet Explorer does not correctly re-render the page after removing the LINK element from the DOM.
In this particular case, the LINK tag is no longer present at the DOM, but IE still displays the CSS that has been loaded into memory.
A workaround / solution for this is to disable the stylesheet using the .disabled property like this:
// following code will disable the first stylesheet
// the actual DOM-reference to the element will not be removed;
// this is particularly useful since this allows you to enable it
// again at a later stage if you'd want to.
document.styleSheets[0].disabled = true;
EDIT in reply to your comment:
Or, if you want to remove it by the href use the following code:
var styleSheets = document.styleSheets;
var href = 'http://yoursite.com/foo/bar/baz.css';
for (var i = 0; i < styleSheets.length; i++) {
if (styleSheets[i].href == href) {
styleSheets[i].disabled = true;
break;
}
}
Perhaps it's something strange IE6 does to URL in the href attribute? Try something like:
$("LINK[href*='style.css']").remove();
(i.e. check whether the href value contains "style.css")
It's just a guess, however. If that doesn't work, I recommend checking the JQuery documentation closely on the subject of attribute selectors and the remove method.
Also keep in mind that it's also not impossible that it's in fact a bug. (IE6 in general causes lots of issues involving JavaScript and DOM manipulation, among other things.)
Topic's quite old, but You can only add ID to your link element, and delete it by element:
$("#id").remove();
Maybe using lowercase on the tag name?

Chrome text-decoration line-through prevents click

I am programming a web app where clicking on a bit of text should toggle the line-through css style. This works on Firefox, but the click event seems not to fire in Chrome once the style has been applied.
HTML:
<script>
$(document).ready({
$(".liner").click(toggleStrikethrough);
});
<div class="liner">
Hello World
</div>
JS (note that I've used jQuery because that's what I'm using in the app, but a vanilla solution would be acceptable as well):
function toggleStrikethrough()
{
if($(this).css("text-decoration") != "line-through")
$(this).css("text-decoration","line-through");
else
$(this).css("text-decoration","");
}
JS Fiddle
In CSS3, text-decoration has multiple parts. In your particular case, the read $(this).css("text-decoration") returns line-through solid rgb(0, 0, 0).
Instead, try changing the if condition to $(this).css("text-decoration-line") to get only the line style part of the text decoration.
I tried to solve your problem using different way. I think it was succeeded. you can use below mention code to get same output that you want.
$('div').bind('click',function(){
$(this).toggleClass('liner');
});
.liner{
text-decoration:line-through;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Exzmple</title>
<style>
</style>
</head>
<body>
<div class="liner">Hello World</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
I used bind , toggleClass methods for this. As a result js code was simple and it could run efficiently.

javascript (jQuery) not working in IE6

I have developed a dragable div with an image inside using jquery. The script is working perfectly in Firefox, chrome but not it IE6. could you please help me to fix this issue
check the web page here : my web page
Thank you very much for your consideration.
IE uses clientX and clientY instead of pageX and pageY. Some people fix this by doing the following:
//if IE, then:
if (e.srcElement) {
e.pageX = oEvent.clientX + document.body.scrollLeft;
e.pageY = oEvent.clientY + document.body.scrollTop;
}
//rest of event handler goes here
I would probably not write the code myself. jQuery UI provides a $(...).draggable() method that should work, and is cross-browser tested. You can even custom build a jQuery UI download that will only include the components you want.
http://jqueryui.com/demos/draggable/
http://jqueryui.com/download
Unless you expect a lot of your visitors to use it - just drop IE6 support. Keeping sites IE6 compatible either increases code redundancy or degrades quality.
Since you're already using jQuery, why not use jQuery UI's draggable component? This way, you don't have to deal with all the mouse down calculations. I switched your site's code to use jQuery UI's draggable functionality and it was pretty quick and required a lot less code.
Here's the code I used:
<!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" />
<title>jQuery Drag and drop</title>
<style type="text/css">
#dv {
position: absolute;
cursor: move;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#dv").draggable({
cursor: 'crosshair'
});
});
</script>
</head>
<body>
<div id="dv" style="position:absolute;left:300px;top:200px;">
<img src="http://www.mejoyal.com/jquery/drupal.png" />
</div>
</div>
</body>
</html>
Hope this helps!!

Hide/Show <div> according to URL in Prototype

I am trying to use the prototype framework to hide a '< div >' based on a particular URL. I don't have access to server side - so I have no choice but to do this using prototype [restriction of platform using prototype].
Wondering if someone could tell me how to do this in prototype framework ?
i.e. I tried to do this but doesn't work
Event.observe(window, 'load',
function() {
var url = document.location.href;
if (url.indexOf('registered') >=
0) {
$$('#side-menu-right').hide(); }
if (url.indexOf('login') >= 0)
{ $$('#side-menu-left').hide();
}
});
Love some help ?
P.S - Never used Prototype [jQuery man right here yo!]
I just made a test case on JS Bin which complains:
Exception thrown: $$("#hello").hide is not a function
Caused by line (23/21): $$('#hello').hide();
(using latest version of Prototype)
When using:
$('hello').style.display = "none";
it works correctly, see example.
EDIT: I adjusted the example on JS Bin to conditionally add a class name to the body before the involved element is reached. Using
.registered-user #hello { display: none; }
The element doesn't show up at all. It's not the most neat solution, as you have to throw some script in the middle of your document, but it works. If someone knows a better solution, please tell.
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
.registered-user #hello { display: none; }
</style>
</head>
<body>
<script>
if (document.location.href.indexOf('registered')>=0)
$$('body')[0].addClassName('registered-user');
</script>
<p id="hello">Hello World</p>
</body>
</html>
Change
$$('#side-menu-right').hide();
to
$('side-menu-right').hide();
Hope this helps.
Reason
1) As you can see, JQuery uses CSS notation while Prototype is straight Javascript (so no #side-menu-right for div with an ID).
2) Struts and Prototype uses $ and not $$.

What is currently the best HTML/CSS/Javascript configuration?

I'm getting more into jQuery and so have set up a HTML/Javascript/CSS base site which I use for all my tests.
Since these tests will eventually turn into PHP and ASP.NET MVC websites, I want to use this opportunity to get the basics down right again for modern browsers and web standards before building the scripting languages on top of it.
I've selected to use:
XHTML 1.0 Strict
UTF-8 encoding
as few CSS references as possible (put everything in 1 CSS file for loading speed)
as few Javascript references as possible (1 javascript file plus the jquery code base reference - I assume using the Google jQuery code base is best practice for speed)
I check my code as I build it with the http://validator.w3.org
Is there anything else I need to consider?
Here is an example of one of my test websites:
index.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Text XHTML Page</title>
<link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="javascript/main.js"></script>
</head>
<body>
<h1 class="highlightTitle">Text</h1>
<p class="main">First</p>
<p>Second</p>
<p id="selected" class="regular">Third</p>
<p>Fourth</p>
<form action="">
<div>
<input type="button" value="highlight it" onclick="highlightIt();countThem()" />
<input type="button" value="highlight title" onclick="highlightTitle()" />
<p>here is another paragraph</p>
</div>
</form>
</body>
</html>
main.cs:
p.highlighted {
background-color:orange;
}
h1.highlightTitle {
background-color:yellow;
}
h1.deselected {
background-color:#eee;
}
p.regular {
font-weight: bold;
}
main.js:
google.load("jquery", "1.3.2");
function highlightIt() {
$('#selected')
.toggleClass('highlighted');
}
function countThem() {
alert("there are " + $("p.main").size() + " paragraphs");
}
function highlightTitle() {
$("h1").toggleClass("deselected");
}
Personally I would bind to the click event via jQuery to ensure nice separation, like this:
$("#yourId").bind("click", highlightIt);
This way you can bind to multiple event handlers. If you just use onclick AFAIK you can only ever use one handler.
BTW you can also use custom event and event namespaces:
$("#yourId").bind("beforeHighlighting", doSomething);
is triggered by
$("#yourId").trigger("beforeHighlighting");
and
$(".hasAHelptext").bind("helptext.click", showHelptextFct);
$(".hasAHelptext").bind("click", otherFct);
// will only remove the showHelptextFct event handler
$(".hasAHelptext").unbind("helptext.click");
HTH
Alex
Move the <script> blocks to the bottom of the page.
With regard to CSS and JS files in general, I wouldn't combine all JS files to a single file during development. It gets very hard to develop in one big JS file. Rather use a module that combines them on-the-fly or during deployment.
I usually go with (both CSS and JS):
one general file:
project.css
and one per page:
project_welcome.css
and any special components (login controls, ad area views etc) have a seperate one as well.
That way you can apply some organizing techniques and won't go crazy managing that single large file.
HTH
Alex
I would recommend putting the JS calls below the body tag. If your scripts are hanging, then the page can load and let the behavior (JS) load after the fact. I've noticed that speed greatly improves with this method.
Check this out: http://stevesouders.com/hpws/rule-js-bottom.php

Categories