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.
Related
I'm trying to learn JQuery, but not doing well. Currently, I'm trying to learn how to use .append to have Ajax functionality which allows one to view new dynamic content without reloading. When I try the following, however, nothing occurs.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>JQuery Test</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="content"/>
<script type="text/javascript">
function callback() {
$("#content").append($("qwerty"));
};
$(document).ready(function() {
//window.setTimeout(callback, 100);
callback();
});
</script>
</body>
</html>
To the best of my knowledge, this should make "qwerty" appear as if I has simply done <div id="content">qwerty</div>, but instead I get a blank page. If I replace the .append call with alert("qwerty"), it is properly displayed. What am I doing wrong?
You are trying to find an element with tagname qwerty in the dom like <qwerty>sometext</qwerty> and append it to #content.
To append the string qwerty to #content use
$("#content").append("qwerty");
Demo: Fiddle
$("#content").append("qwerty").
Just remove $ simple in your coding.. if you want to append text, you can directly pass the text in double quotation
Is it possible to remove the annoying black border that IE 9 puts around submit buttons?
This only occurs when the form is in focus.
IE 9:
IE 9 http://olokoo.com/sandbox/ie.jpg
FireFox
Firefox http://olokoo.com/sandbox/firefox.jpg
You can use jQuery if you want, but adding the following to your CSS should fix it
input[type=submit] { border:none !important; }
//edit per your comment
Depending on if you want to use HTML5 or not, you need to make sure you've set up the DOCTYPE and meta tags correctly:
HTML5 setup:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
For HTML4 setup examples see: W3School
If you want to remove the border from the buttons with jQuery, something like this should work:
$(":button").css({border-width:"0px"});
I need to check if browser JavaScript is off, then display a error div instead of the body, how can I do this?
You'll need to do it the other way around - so to speak - you'll have to output everything, and then hide/ remove the error div using Javascript.
It's called Progressive Enhancement.
<html class="no-js">
<head>
<style>
.error,
.no-js #container {
display: none;
}
.no-js .error {
display: block;
}
</style>
<script>
document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/, '');
</script>
</head>
<body>
<div id="container">
rest of page
</div>
<div class="error">
sorry, no javascripty, no sitey!
</div>
</body>
</html>
Of course, this is usually a bad idea, but I hope you've already considered that.
in the body you can add :
<noscript>
Here the html to display when javascript is off
</noscript>
#roryf's solution is a good approach, although it is dependent on jQuery, and if the domloaded event fires a little late you can get a 'flash' of the no-js content.
The following will remove the html.no-js class before the body has rendered:
<!DOCTYPE html>
<html class="no-js">
<head>
<script>
if (document.documentElement) {
var cn = document.documentElement.className;
document.documentElement.className = cn.replace(/no-js/,'');
}
</script>
</head>
I'm writing text to a page using document.write for a Chrome extension, but the associated custom CSS isn't applied:
<!DOCTYPE html>
<html>
<head>
<title>TITLE GOES HERE</title>
<link rel="stylesheet" href="css/popup.css" type="text/css" />
</head>
<body>
<script type="text/javascript">
...
function showFolder(folder) {
console.debug('FOLDER: '+folder.title);
document.write('<p>'+folder.title+'<br></p>');
}
</script>
</body>
</html>
The CSS is simple, just for debugging:
p {
color: red;
}
I can get it to work if I put the stylesheet link inside the function showFolder, but that can't be the proper way to do it. I'm learning jscript/CSS on the fly, so the answer is probably something remedial. Is the problem in the jscript, the CSS or both?
Use innerHTML.
<div id="towrite"></div>
then you can write in it like this:
div=document.getElementById('towrite');
div.innerHTML = '<p>'+folder.title+'<br></p>';
If you run your document.write() before the page finishes loading (perhaps calling your showFolder call directly from a script on the page), then the text will be written into the document as you might expect.
However, if you call document.write after the page loads, as in an event handler, you will be writing an entirely new page. This is usually not what you want.
Instead, follow Zoltan's advice and set the innerHTML property of an empty div.
I'm not javascript expert... I mainly use jQuery.. but try this, kind of makes sense:
<!DOCTYPE html>
TITLE GOES HERE
<script type="text/javascript">
...
function showFolder(folder) {
console.debug('FOLDER: '+folder.title);
document.write('<p>'+folder.title+'<br></p>');
}
</script>
<link rel="stylesheet" href="css/popup.css" type="text/css" />
EDIT:
So the above didn't work, but I just thought about another solution. When are you actually calling the function? Try to put it in <body onLoad="functionnamehere()">
No idea if that works, but give it a try.
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 $$.