jQuery: addClass to HTML5 DOM - javascript

I am having an issue today when adding a class to an HTML5 DOM object. Sorry if this is a newbie question. :P
Ex:
<!DOCTYPE html>
<html>
<head>
<title>stackoverflow example</title>
<style>
.centercontent {
width:100%;
max-width:1080px;
margin:0 auto;
}
</style>
</head>
<body>
<header>
<!-- All direct children of BODY should be centered on the page; however, children should not be added to .centercontent -->
<h1>Site Name</h1>
</header>
<section>
<p>Hello World</p>
</section>
<footer>
© no one 2012
</footer>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.j"></script>
<script>
$("body > *").addClass("centercontent");
</script>
</html>
I believe that it is my JS; however, I have never used addClass before. Thank you all very much for your time. :)
Have a good day!

write simply
body > * {
width:100%;
max-width:1080px;
margin:0 auto;
}
as a straight CSS rule in the head section: looking at your example jQuery seems not really necessary for this task.
This selector is also valid in the CSS block and it works fine (not on IE<=6).

You are not using a $(document).ready(function() {...}); with your jquery. Try this:
$(document).ready(function() {
$("body > *").addClass("centercontent");
});
Also you are missing an s at the end of your script reference
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.j"></script> // original
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> // fixed

Related

jquery slide-in when page loads doesn't work for specific site? How do I tell what version of jquery will work for this site?

Basically, I want a div box to slide in on the page when it loads. I tested it on other websites, and html previews, all of which have worked so far.
It just seems to be that this specific website doesn't seem to like it, and I can't figure out why.
The HTML:
<div id="kitten">
<div class="banner">
bloop
</div>
</div>
The script:
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$("div.banner")
.css("margin-left",-$(this).width())
.animate({
marginLeft:0
}, 3000);
</script>
The CSS:
#kitten{
position:absolute;
width:100%;
height:920px;
top:0px;
left:0px;
background:white;
}
.banner{
position:fixed;
width:600px;
height:45px;
left: 0;
right: 0;
margin: auto;
background:black;
color:white;
text-align:center;
z-index:500;
}
I'm jut curious if the website has some sort of way of blocking it, or if I happen to be using the wrong installation of jquery(?) Is there any way to find out what version of jquery to use that will work on there.
NO. I do not OWN the site, it's just a profile page that I posted some code onto. I'm not "hosting" anything.
First of all, you have to include jQuery library before that your js script
perhaps, "$" <- this object used by other libs, you have to check this link.
https://api.jquery.com/jquery.noconflict/
Add JQuery library before your script so that $ can be identified.
Eg:-
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
If you are using WordPress, Please convert $ to 'jquery`
$(document).ready(function() {
to
jQuery(document).ready(function($){
Try this, firstly load jquery before body closing tag</body>
<html>
<head></head>
<body>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</body>
</html>
then, create in the same folder of your index.html a file called script.js that should look like this :
$( document ).ready(function() {
$("div.banner")
.css("margin-left",-$(this).width())
.animate({
marginLeft:0
}, 3000);
});
Now include it in your html just after jquery:
<html>
<head></head>
<body>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html
If still not working try, as #Arshid KV said, to change
$(document).ready(function() {
to
jQuery(document).ready(function($){

MooTools events not firing

I've recently been asked to work on a few websites. One of these websites wants to be "more interactive" and they showed me a site they would like to emulate.
I'm not very good with writing my own scripts, especially with regards to DHTML, so I use MooTools to deal with the more interface-y changes.
In my HTML code I have two Div tags, and I want for it to happen that when you mouseover one, it shrinks the other one and expands the one you're looking at, but no events that I try to attach are firing at all (nothing happens, and nothing appears in the console).
Here is my HTML, I am just using the stock mootools downloaded from their website.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Cnergi - Splash </title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
document.addEvent('domready',function(){
$('employee').set('opacity', 0.5).addEvents({
mouseenter: function(){
// This morphes the opacity and backgroundColor
this.morph({
'opacity': 0.6,
'background-color': '#E79D35'
});
},
mouseleave: function(){
// Morphes back to the original style
this.morph({
opacity: 0.5,
backgroundColor: color
});
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="employee" id="employee">
Employee test
</div>
<div class="client" id="client">
Client Test
</div>
</div>
</body>
</html>
Further Description of Problem
Basically, if I call the morph straight from the 'domready' function, it works, but the event calls that are supposed to come from the mouseenter (also tried mouseover, and even click. none work) never happen. No errors are being thrown. I am honestly befuddled, I've never had this problem before.
Any ideas?
EDIT
Currently attempting this code, still nothing shows up.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
</head>
<body>
<div id="wrapper">
<div id="employee" class="employee">
Something
</div>
</div>
<script type="text/javascript">
document.addEvent('domready',function(){
var s = $('employee');
s.addEvent('click',function(){
alert('I was clicked!');
});
});//End document.addEvent domready
</script>
</body>
</html>
EDIT 2
Has something to do with my stylesheet declaration; if I remove it, the events fire as they should.
It's actually appears to be any styling at all. The moment I put a tag into the file it stopped working.
"Wut." is my only response.
Edit 3
I changed my CSS to this, and it works. I haven't gone through my previous CSS file to figure out why it doesn't work with it, just thought I would update everyone. I posted 2 JS fiddle links, one with my base CSS (please remember this was a work in progress, and that I am partially colorblind so the bright colors help me see the differences), and the other with the CSS below, which runs fine.
In summary: Today I learned that CSS can keep javascript events from firing.
html, body, body>div{
height:100%;
}
body > div{
width:900px;
text-align:left;
margin:0 auto 0 auto;
background-color:white;
}
body{
text-align:center;
background-color:grey;
padding:0;
}
#wrapper{
position:relative;
width:inherit;
height:inherit;
}
#footer{
position:absolute;
bottom:0px;
text-align:center;
width:inherit;
}
I think you have a syntax error in background: color
this.morph({
opacity: 0.5,
backgroundColor: color // is color defined?
});
The MooTools domready event is only available on the window object - here's your example in working order: http://jsbin.com/rucaz/1/edit
For reference: http://mootools.net/docs/core/Utilities/DOMReady

Add a class name to element immediately this element is loaded

I have an element which has to be hidden when JavaScript is enabled. The current code seems like this:
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#js-hidden').hide();
})
</script>
There is the problem, the js-hidden div is visible since the rest of page (and JavaScripts) are loaded.
Can I hide that earlier? This solution is so bad for me, JS user can´t see this element.
PS: I've written the example with using jQuery, it can be in plain JS too, of course :-)
$(document).ready makes it happen after full page loaded you can use
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<div id="js-hidden"></div>
<script>
$('#js-hidden').hide();
</script>
Simplest thing:
<style>
.js-hidden {
display: none;
}
</style>
<noscript>
<style>
.js-hidden {
display: block;
}
</style>
</noscript>
Since you cannot use onload event on div I guess the best solution is put your js right after that div...

How come this jQuery script will not highlight the first child in my list?

<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<style>
.emphasis { font-weight: bold; }
</style>
<script>
$(function() {
$('li:first-child').addClass('emphasis');
});
</script>
</head>
<body>
<ul>
<li>hello</li>
<li>hello2</li>
<li>hello3</li>
</ul>
</body>
</html>
I'm following a tutorial: http://tutsplus.com/lesson/not-so-fast-jquery/
This code is exactly what he has near the end, yet it does not work for me. Any reason why?
The code works fine. Try clearing your browsers cache or try it in a different browser.
try using $('li:first') instead?

How to detect if browser JavaScript is off and display a notice

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>

Categories