We Keep Coding

Using jQuery how can I make an div object visible using a function?

The following div is part of my body:
<div id="errorSection" class="alert alert-danger"> Error: Location could not be found.</div>
<br>
I have this div styled as follows:
#errorSection{
visibility: hidden;
text-align: center;
font-style: bold;
font-size: 14pt;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
How can I make this appear using jQuery when calling the following function. The way I have it now is calling an error.
function noLocation(){
$('#errorSection').style.visibility.visible;
}

Keeping your declared CSS would be:
$('#errorSection').css('visibility', 'visible');
But I'd advise you to use an extra CSS declaration like this:
#errorSection.showError {
visibility: visible;
}
$('#errorSection').addClass('showError');
This means you can change your CSS in the future to use display: none; (or even height: 0; or position: absolute; left: -99999;) and not have to modify your JavaScript (Separation of concerns)

Simple. You are mixing straight Javascript and jQuery, which does not work.
If using the 'visibility' property and not the 'display'
You should do.
function noLocation(){
$('#errorSection').css("visibility", "visible");
}
or
function noLocation(){
$('#errorSection').css({"visibility": "visible", "text-align": "center",
"font-style": "bold"}); //can use comma delimited properties like in a css file sheet in the {} brackets.
}

The visibility issue has been dealt with in other posts and personally I would add / remove a class like #DJDaveMark suggests, but there is a built in toggle function in jquery that is useful- so this is to provide an alternative: simply start out with the element hidden, and then on the click of the button - use toggle() to toggle the display.
I have used a named function so that you can easily use this in your existing code, but you can just as easily put the toggle into the click handler of an element like the button that I have put in here.
$('#togglevisibility').click(function(){
toggleVisibility();
})
function toggleVisibility() {
$('#errorSection').toggle();
}
#errorSection{
display:none;
text-align: center;
font-style: bold;
font-size: 14pt;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="togglevisibility">Click Me To Toggle Visibility</button>
<hr/>
<div id="errorSection" class="alert alert-danger"> Error: Location could not be found.</div>

Different ways in jQuery, couple of them below:
1) Use of css function
Show: $('#errorSection').css("display", "inline") different values can be here like inline, block, inline-block
Hide: $('#errorSection').css("display", "none")
2) Or you can use show and hide
Show: $('#errorSection').show()
Hide: $('#errorSection').hide()
3) Having css class and you can toggle to make show/hide effect:
.error {
display: inline; #or whatever like block, inline-block based on your design
}
Show/Hide can be triggered using:
$('#errorSection').toggleClass( "error" );

Simple Add class with Javascript

I've this code :
jQuery(document).ready(function($) {
document.getElementById('HAVEATESTHERE').className = "newClass";
}
I want to add a class to #HAVEATESTHERE in javascript, it does not work
Am I missing something ?

You can use classList.add method:
document.getElementById('HAVEATESTHERE').classList.add('first','second', ... );
Also, please make sure you add your class after DOM is rendered.
Take into account, that element.className = 'someClass' will override existing classes with someClass.

elementid is your element`s id and yourclass is that what class do you want add this element.
jQuery(document).ready(function($) {
$('#elementid').addclass('yourClass');
}

Code is fine, see this demo
Ensure that it is either
Added in the window.onload section
window.onload = function(){
document.getElementById('HAVEATESTHERE').className = "class1";
};
if there are already some classes for this element (as suggested by your updated OP), then use classlist to add a new class to that list
document.getElementById('HAVEATESTHERE').classList.add("class1");
- Or the script section is added at the end of body after all the markup is already loaded.

make sure you don't have duplicate IDs for divs. Check this:
function myFunction() {
document.getElementById("myDIV").className = "myclass";
}
.myclass {
width: 200px;
height: 100px;
background-color: blue;
text-align: center;
color: white;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {
width: 300px;
height: 100px;
background-color: coral;
text-align: center;
font-size: 25px;
color: white;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>Click the button to add a class for div.</p>
<div id="myDIV">
Sample div
</div>
<button onclick="myFunction()">Add Class</button>
</body>
</html>

Basically you are trying to mix JavaScript inside jQuery function. Please take care of that. And if you are only using jquery then please use your code
As in this formate
$(document).ready(function(){
$('#HAVEATESTHERE').addclass('newClass');
}
use addclass() function to add class to your div.
with simple js please try to use anonymous function like this
(function(){
var d = document.getElementById("HAVEATESTHERE");
d.className = " newClass";
})();

Css hover text information

I need some help!
I'm doing website, and i'm having a problem with a thing. I have a <h1> and a image next to it, that image is a question mark. And i want that when i mouse hover that question mark it appears the div that i made with the information... i saw lots of topics answered in that forum but none of them is working, pls help me!
<html>
<body>
<h1>branch<img id="help" src="Questionmark.png"></img></h1>
<div id="information">Branch is...</div>
<script>
var e = document.getElementById('help');
e.onmouseover = function() {
document.getElementById('information').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('information').style.display = 'none';
}
</script>
</body>
</html>
Pls tell me what to do, maybe there is a easy way... i tried css but also didn't work...

I suggest to go with css.
If you are doing layout, use CSS, if you are setting the look and feel
use CSS, if your doing animation use CSS3
If you attach event handlers or reacting to user input use JavaScript.
Note that people use JavaScript instead of CSS for browser support.
There are other solutions like emulating CSS features using
javascript.
source
css
#information{
display:none;
}
h1:hover + #information{
display:block;
}
fiddle

If you want simple tooltip kind of thing, then you can use this code
<h1>
branch<img id="help" src="Questionmark.png"></img>
<div id="information">Branch is...</div>
</h1>
h1{
position: relative;
}
h1 img{
cursor: pointer;
}
#information{
display: none;
position: absolute;
left: 50px;
width: 100px;
height: 50px;
font-size: 14px;
background: red;
}
h1 img:hover + #information{
display: block;
}
Check this link http://jsfiddle.net/amoljawale/G83WB/2/

Setting background color with JavaScript breaks the CSS hover behavior

I'm trying to create a menu where the currently selected (clicked) element has a different background color than the other elements (I'm trying to achieve this using JavaScript). I also use the CSS :hover pseudoclass to make the hovered element stand out by highlighting it. However, I have encountered a strange problem: when I set the background color of any element with JavaScript, its CSS hover behavior no longer works. That is, I can't highlight the element by hovering it anymore. I have checked that in Firefox and Chromium. This is the case for both jQuery and plain JavaScript.
The code is below. I have simplified it a lot to narrow down the problem. First try hovering any of the menu items, then click the "Set background color" link and hover one of the menu elements again. What I expect is the element getting red (#f00) when hovered, regardless of whether the "Set background color" button was clicked or not. For jsfiddle links, go to the bottom.
Vanilla JavaScript:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
p#links a {
display: inline-block;
width: 80px;
height: 22px;
line-height: 22px;
background-color: #00f;
color: #fff;
text-decoration: none;
text-align: center;
font-family: sans-serif;
}
p#links a:hover {
background-color: #f00;
}
</style>
<title>Background color</title>
</head>
<body>
<p id="links">
Link 1
Link 2
Link 3
Link 4
</p>
Set background color
<script>
document.getElementById('setbgcolor').onclick = function() {
var p = document.getElementById('links');
var elements = p.getElementsByTagName('a');
for (var i = 0; i < elements.length; i++)
elements[i].style.backgroundColor = '#ff0';
};
</script>
</body>
</html>
jQuery:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.11.0.js"></script>
<style>
p#links a {
display: inline-block;
width: 80px;
height: 22px;
line-height: 22px;
background-color: #00f;
color: #fff;
text-decoration: none;
text-align: center;
font-family: sans-serif;
}
p#links a:hover {
background-color: #f00;
}
</style>
<title>Background color</title>
</head>
<body>
<p id="links">
Link 1
Link 2
Link 3
Link 4
</p>
Set background color
<script>
$('a#setbgcolor').click(function() {
$('p#links a').css('background-color', '#ff0');
});
</script>
</body>
</html>
And here are jsfiddle.net links for the purpose of convenience:
Pure JavaScript: http://jsfiddle.net/5yQFM/1/
jQuery: http://jsfiddle.net/5yQFM/

The jQuery css() method maps onto the style property which maps onto the style attribute.
Rules inside a style attribute are more specific then rules in a stylesheet, so will always come after them in the cascade.
Instead of altering the CSS on the element directly, alter it by changing the classes the element belongs to and having a pre-prepared stylesheet.

you need to use !important on hover, basically it will increase its priority.
Try this,
p#links a:hover {
background-color: #f00 !important;
}
DEMO
As Quentin said it looks like a dirty one, so in that situation we can make use of the class priority concepts.
HTML:
<a class='normal' href="#">Link 1</a>
<a class='normal' href="#">Link 1</a>
CSS:
.normal { background-color: blue; }
.abnormal{ background-color: yellow; }
.normal:hover { background-color: #f00; }
JS:
$('p#links a').attr('class', 'abnormal normal');
DEMO Non-Dirty one

How about keeping the style in CSS and not in Javascript, by adding classes ?
so the line :
elements[i].style.backgroundColor = '#ff0';
Change to
elements[i].className = 'myClassForBackgrounds';
or in the jQ version
$('p#links a').css('background-color', '#ff0');
to :
$('p#links a').addClass('myClassForBackgrounds');
That way you can set your :hover as you would normally
#links a:hover, .myClassForBackgrounds:hover { background-color:#ff0; }

Just for a more simple answer, in able to just re-enable css rules just have it toggle between the color and "", so
document.getElementById("id").style.backgroundColor = "rgb(255, 125, 15)";
would be if the element wasn't already colored via javascript.
Now, if your element was already colored the code would look like this:
document.getElementById("id").style.backgroundColor = "";
That re-enables CSS so then your selectors will work.

I encountered the same problem and solved it by doing this:
I set a onmouseover event to change the background color to what the hover color is.
I set a onmouseout event to change the background color to the default color.
This way I have set a hover event with pure javascript

New <style> element not working in IE

I currently have an HTML page that has a grey BODY background. Now I would like to overwrite this and change this to white using Javascript. I also would like to change some other elements' padding and margin. I try to accomplish this using the innerHTML property.
The thing is everything is working, apart from the newly introduced element, which is not applied in IE7 or IE8. It does work in FireFox however.
<script>
// if using jQuery
$(document).ready(function() {
document.body.innerHTML = '
<style type="text/css">
body {
background-color: #FFFFFF
!important; }
#todayBirthdays, #weekendBirthdays, #noBirthdays, #todayJubileums, #weekendJubileums {
padding: 0 !important;
margin: 0 !important;
}
</style>
<div style="text-align: left; background-color: #FFFFFF">' +
document.getElementById('WebPartctl00_SPWebPartManager1_g_7118b319_c5b0_4214_a46d_27131866cde3').innerHTML +
'</div>';`
});
</script>
Can you please advise?
Many thanks!

The <style> tag is only valid inside the <head>, though some browsers may respect it in other places. If you want to change the body background or other properties with a script, use the appropriate .css() method in jQuery.
$(document).ready(function() {
$("body")css("backgroundColor", "#FFFFFF");
$("#todayBirthdays,#weekendBirthdays,#noBirthdays,#todayJubileums,#weekendJubileums").css("margin", "0");
});

Why not just
$('body').css('background-color', '#fff');
$('#todayBirthdays, #weekendBirthdays, #noBirthdays, #todayJubileums, #weekendJubileums').css('padding', 0).css('margin', 0);

See the CSS property of jQuery and also the addclass method. This is much easier than what you are doing!
$('body').css( { backgroundColor: 'value1' } );
$('#todayBirthdays, #weekendBirthdays, #noBirthdays, #todayJubileums, #weekendJubileums').css( { padding: 'valuex', margin: 'valuey' } );
Although I think you should be using addClass instead.
.myClass { /* Some styling */ }
$('#x, #y, #z').addClass(myClass);

<html>
<head>
<style type="Text/css">
body { background-color: #AAA; }
</stye>
</head>
<body>
<script type="text/javascript">
var style = document.createElement('style');
style.innerHTML = 'body { background-color: #F0F; }';
// add any other styles inside this style element
document.getElementsByTagName('head')[0].appendChild(style);
</script>
</body>
Demo of appending to the <body> and the <head>

If you are stuck on adding in an inline style which is what you asked then use the following:
$("<style type=\"text/css\"> body{background-color: #FFFFFF;} #todayBirthdays, #weekendBirthdays, #noBirthdays, #todayJubileums, #weekendJubileums { padding: 0 !important; margin: 0 !important;} </style>").appendTo("Head");
This will append your styling to the head element of the document. However in reality the better way to go if you are going to use jQuery or javascript is to just change the values of the background.
document.getElementByTagName(body).attribute(background-color)="#FFFFFF";
OR
$("body").css("background-color", "#FFFFF");