When I enclose my checkbox in a css class, it becomes automatically checked. How can I stop this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>website</title>
<style type="text/css">
.checkbox0 {
position:fixed;
margin-left:137px;
margin-top:119px;
font-family:Segoe UI;
font-size:9px;
font-weight:normal;
}
</style>
</head>
<body>
<div class="checkbox0"><input type="checkbox" />s</input></div>
</body>
</html>
If we remove the <div class="checkbox0"> and the </div> we will see that it works normally however when it is with the css, it will auto check.
This can't be.Tried with this code but can't see it autochecked. problem is somewhere else. It might be due some other js file if included here or something else is conflicting.
I have a sneaking feeling it's not your code but your browser cache. ;) Try deleting your browser cache and see if it fixes it.
First of all, your code is not valid HTML:
<input type="checkbox" />s</input>
You have closed the input tag with /> and you then have a </input>. Please see if removing the </input> fixes the problem if you still see it.
Related
I'm debugging a site on an Android HTC Sense. The site uses a lot of inserted content, which comes along with it's own CSS and JS like:
// wrapper id = snippet_id
<html>
<head>
<style type="text/css">
#snippet_id div {border: 1px solid red !important;}
div {border: 1px solid blue !important;}
</style>
</head>
<body>
<div>Hello World</div>
</body>
<html>
This is inserted into an existing page, so it sort these snippets are sort of like iFrames I guess.
Question:
Problem is, that while Javascript works fine, all CSS I'm specifying using <style> tags is being ignored. Any idea why?
EDIT:
Works on:
- Android 4.0.1
Does not work on:
- Android 2.3.1
- IOS 4.1
If I add the CSS to the main.css file being requested when the page loads, all is ok. If it's inside my gadget, it's not working.
EDIT:
So from what I can see, <style> does not seem to work on classes and id. If I use regular HTML elements as selectors it works.
EDIT:
My dev-site is here. I'm using a plugin called renderJs, which encapsultes HTML snippets (along with their CSS and JS) into resuable gadgets. Gadgets content will be appended to the page body, so although a gadget can act as a standalone HTML page, it can also be part of a page.
Example code from my page (I stripped out all gadgets but one below):
index.html - include index_wrapper gadget
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Organization" lang="en" class="render">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/overrides.css">
<script data-main="../js/main.js" type="text/javascript" src="../js/libs/require/require.js"></script>
<title></title>
</head>
<body class="splash">
<div data-role="page" id="index">
<div id="index_wrapper" data-gadget="../gadgets/index_wrapper.html"></div>
</div>
</body>
</html>
The page has a gadget called index_wrapper link - code below:
<!DOCTYPE html>
<head></head>
<body>
<div id="index_social" data-gadget="../gadgets/social.html"></div>
<p class="mini t" data-i18n="gen.disclaimer"></p>
</body>
</html>
Which has another gadget called social here. This gadget includes some CSS, but on the devices in question, it is ignored (just saw, I'm missing a </div> in the index_wrapper, so trying to see if that fixed the problem, too).
The code below includes my fix:
<!DOCTYPE html>
<head>
<style type="text/css" scoped>
// will be ignroed
.el {width: 1px;}
.menu_social {text-align: center; margin: 1em 0;}
.action_menu {display: inline-block;}
.follow_us {display: inline-block; margin: 0; padding: 0 .5em 0 0;}
...
</head>
<body>
<div class="menu_social">
<div>
<span class="el ui-hidden-accessible"></span><!-- fallback for CSS not working -->
<div data-role="controlgroup" data-type="horizontal" data-theme="c" class="action_menu">
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
(function () {
$(document).ready(function() {
var gadget = RenderJs.getSelfGadget();
// fallback for old devices which cannot load <style> css
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/social.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
// trigger enhancement
$(this).trigger("render_enhance", {gadget: gadget.dom});
});
})();
//]]>
</script>
</body>
</html>
So aside from probably missing a closing </div> I'm still wondering why my embedded CSS is not working.
Looking at the generated HTML code (i.e., code as modified by JavaScript) of the demo page suggests that style elements are generated inside body. Although such elements are allowed by HTML5 drafts when the scoped attribute is present, support to that attribute seems to be nonexistent, and the style sheet is applied globally. It is possible however that some browsers do not apply it at all, at least when the style element is dynamically generated.
A better approach is to make all style sheets global to the document, preferably as external style sheets, and use contextual selectors to limit the rules to some elements only. And possibly using JavaScript to change classes of elements, rather than manipulating style sheets directly.
Ok. Ugly workaround:
In the inline section, set this:
<style>
.el {width: 1px;}
</style>
In the page, set hide an element el like this:
// ui-hidden-accessible is a JQM class, moving the item out of view
// since it uses pos:absolute, is needed to not break
// selects on the page (compare to JQM ui-icon)
<span class="el ui-hidden-accessible"> </span>
Then check for the width when running inline Javascript (which works) and require the inline CSS as a separate file, when the width is not at 1px
// fallback for old devices which cannot load <style> css
// gadget is my iframe-look-a-like
if (gadget.dom.find(".el").css('width') !== "1px") {
require(['text!../css/translate.css'], function (t) {
var x = '<style>'+t+'</style>';
gadget.dom.append(x);
});
}
Ugly and an extra HTTP request, but at least the CSS is working then.
No matter what I do, this page doesn't work at all. I want it to focus on the input box on load.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home Screen</title>
<style type="text/css">
input {border:0px;}
input:focus {outline:none;}
</style>
</head>
<body onload="document.getElementById("search").focus()">
<input id="search" />
</body>
</html>
I know I'm breaking a bunch of rules with this code, so you don't need to say anything about that.
EDIT:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home Screen</title>
<style type="text/css">
input {border:0px;}
input:focus {outline:none;}
</style>
</head>
<body onload="document.getElementById('search').focus()">
<input id="search" onblur="setTimeout(document.getElementById('search').focus(),10)" />
</body>
</html>
EDIT 2:
<script type="text/javascript">
function refocus()
{
setTimeout(document.getElementById("search").focus(),10);
}
</script>
<input id="search" onblur="refocus()" />
Double quotes cannot include double quotes,not only in javascript,any other language is the same.
<body onload="document.getElementById('search').focus()">
I'f you're using jquery:
$(function() {
$("#search").focus();
});
or prototype:
Event.observe(window, 'load', function() {
$("search").focus();
});
or plain javascript:
window.onload = function() {
document.getElementById("search").focus();
};
It's "Better" for readability than an inline event...
You have to put search into single quotes:
<body onload="document.getElementById('search').focus()">
Put search in single quotes, since you have double quotes around the document.getelementbyid
<body onload="document.getElementById('search').focus()">
Your experiencing this issue because you're using the same quotes inside the onfocus event, you can change "search" to 'search' to fix the issue.
<body onload="document.getElementById('search').focus()">
Ideally though, you should attach your events in JavaScript so your markup stays clear and all functional aspects of the page are located in one place.
jsFiddle
<script type="text/javascript">
window.onload = function () {
document.getElementById("search").focus();
}
</script>
Set some delay in your code by using setTimeout function to resolve this problem.
function fireOnClick() {
// Set text filed focus after some delay
setTimeout(function() { jQuery('#globalText').focus() }, 20);
// Do your work.....
}
i am no little knowledge about js and html,i have a html like:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>aa</title>
</head>
<body><input name="button" type="button" value="hello" onclick="window.location.href('http://hao.360.cn/')" />
<input name="button" type="submit" value="helio" onclick="window.open('http://hao.360.cn/')"/>
<body bgcolor="#000000">
<img src="a2.jpg" width="156" height="152" border="0" longdesc="eclipse.exe.lnk" />
</body>
</html>
i want to using js to get respectively the string http://hao.360.cn/ of the two buttons and also get the string fg726p.exe and eclipse.exe.lnk of img?
i want to using the js to get the values for android java methods. i want to get help.
edit: through some people think it is so basic,butfor me i know clue to search it
can you give me some advice and link
edit2: i adjust :
<!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=gb2312" />
<title>aa</title>
<script language="javascript">
function get(){
var xx=document.getElementById("bbs")
alert("："+xx.title);
}
function getElementName(){
var ele = document.getElementById("link1");
alert("：" + ele.href);
}
</script>
<body><input name="button" id="bbs" title="http://homepage.yesky.com/59/2673059.apk" type="button" value="hello" onclick="get()" />
<input name="button2" type="submit" value="helio" onclick="getElementName()"/>
<body bgcolor="#000000">
<img src="a2.jpg" width="156" height="152" border="0" onclick="getElementName()" />
</body>
</html>
i have solved my problem,but i donot know why somepeople post Negative Scores give me for no little js knowledge.may be you know more,think this easy. i only want to
get the sting to use,i think if you know more you only answer document.getElementById("link1").href also can help me not give me all the html document. i want to string to use for my android app, i think i donot because the small problem to study the all html. the project not give you more time
edit3:
var x=document.getElementsByTagName("input");
var el =x.item(0);
alert(el.getAttribute("value"));
alert(el.getAttribute("onclick"));
el =x.item(1);
alert(el.getAttribute("value"));
alert(el.getAttribute("onclick"));
x=document.getElementsByTagName("a");
el =x.item(0);
alert(el.getAttribute("href"));
x=el.getElementsByTagName("img");
el =x.item(0);
alert(el.getAttribute("longdesc"));
thank you #jmoreno for this answer for my frist question very good.i put answer here so that prevent the link of he give is broken .
If you are generating that HTML, be aware it has a couple of problems with it. 1) JavaScript and DOM manipulation work best when specific tags have id's, 2) the body tag is present twice.
But within the limits of what you have posted, see this jsfiddle.
The heart of it being the ...getAttribute("onclick") where given a element in the DOM, you get the required attribute (onclick, href, longdesc).
I leave it to you to parse out the sub string you want.
You code seems to be a little messed up.
You are using body 2 times. Setting the bgcolor as you do is really old fashioned, when you want to set the background color inline, which I would not recommend you to do you are doing it this way style="background-color:#000000;". You really should use an external css file. Because in my opinion HTML is for the markup and css is for the styling, and if you have to change the layout in the future you don't know if you have set the styling in the css or in the html. So try to stick one method. Also never ever use body 2 times.
Give your input fields an ID so you could easily access them via javascript, or as you tagged your question jQuery but reading through your HTML Markup, I can see that you have not included jQuery yet.
Examples of using jQuery to get the values you want. As you have seen I have edited your html markup a bit, so its cleaner and has more structure:
http://jsfiddle.net/pmjVP/
I know that Document.ready - DONt wait for images to download.
So why it does here ?
http://jsbin.com/ehuke4/27/edit#source
(after each test - change the v=xxx in the img SRC)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert('0');
});
</script>
</head>
<body >
<img src='http://musically.com/blog/wp-content/uploads/2011/04/Google-Logo.jpg?v=42333' />
</body>
</html>
I think, the problem comes out from JSBin.com
Because, when you try this example on JSFiddle.net, it works properly
http://jsfiddle.net/vqte9/
It has to do with the fact that you're using "alert()", I think, though I'm not 100% sure why. If you change your code like this:
<body>
<div id='x'></div>
<img ...>
</body>
<script>
$(function() { $('#x').text("hello there"); });
</script>
you'll see that the text is filled in before the image loads.
edit — I don't know why this would make a difference, but I notice quite different behavior when I set up the ready handler with:
$(function() { whatever; });
and:
$(document).ready(function() { whatever; });
Now that's not supposed to be the case; the two forms are supposed to do exactly the same thing, as far as I know. However, they don't seem to. Here is a jsbin example that sets up the ready handler with the first form, and here is one that uses the second one. They behave very differently for me. I'll have to check the jQuery source to figure out how that can be true.
Here is the jQuery documentation explaining the equivalence of $(handler) and $(document).ready(handler).
I have the folowing html. It passes the w3 validator, but my javascript alert does not work. Can anyone see any problems or have any suggestions on how to get it to work?
<!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>Company Name™</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
BODY {
background-image: url(images/bg4.jpg);
background-repeat:no-repeat;
background-position:center top;
background-attachment: fixed;
}
</style>
<script type="text/javascript">
alert("HELLO");
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="logo">
<img src="images/fcflogo.png" width="295" height="100" align="left" alt="logo"/>
</div>
<div class="header1">
100% Financial Protection
<hr/>
</div>
<div class="nav">Home| Flights| Hotels| Villas | CarHire| Attractions| Contact</div>
</div>
<div class="ver1">
<h2>Can't find what your looking for?</h2>
</div>
<div class="enq1">
<h2>Enquiry Form</h2>
</div>
<div class="hor1">
<h2>Our Service</h2>
<a>Company Name are one of the leading independent travel companies specialising in Florida Holidays. We have a wide range of major Charter and Scheduled airlines to choose from as well as over 10,000 Hotel and Villa deals. Our aim is to provide you the customer with a truly fantastic vacation in Florida from start to finish at affordable prices. We are not committed to any airline or Tour operator so are totally committed to finding you the best deal.</a>
</div>
<div class="hor1"><a>FLIGHTS</a></div>
<div class="ver2"><a>HOTELS</a></div>
<div class="ver2"><a>VILLAS</a></div>
<div class="hor1"><a>CAR HIRE</a></div>
<div class="hor1"><a>ATTRACTIONS</a></div>
</div>
<hr/>
<div id="footer"><a>FOOTER</a></div>
</body>
</html>
EDIT - To all below, I do have javascript turned on, I am using debian with firefox, noScript is disabled, but the alert does not appear, even if I move it to the body.
First, take out the trade mark. That extended characters is probably killing the closing </title> tag. I"m pretty sure that's your issue.
Failing that, remove every element above the <script> tag and see if it executes. If it does, restore each element one-by-one. Something above the script tag is preventing it from being parsed.
For me, your code works, the alert appears.
Have you enabled javascript in your browser?
Works fine on FF 3 and IE 8 for me.
Have you disabled JavaScript on your browser by any chance?
The script is never being invoked and that's why it is not alerting anything. Either move that script tag from within head to within body tag of the document. Or enclose it within a function and invoke it from onload attribute of body tag.
You might want to try clearing your cache to make sure that your browser is loading the file with the alert in it instead of an older, cached copy. If that doesn't work, I'd suggest trying it with Firefox/Firebug and checking for errors in the javascript console. If you're loading the file with AJAX, you'll need to move the script tag to the body of the document. Most of the time AJAX libraries will ignore the HEAD element and only include elements within the BODY tag.