Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
If I run the following code in my browser (chrome) it doesn't work. However, when running this code in the stackoverflow preview compiler it works. Can somebody explain to me why ?
The code is supposed to change the background color of a div element.
My goal is to change the color of div using js. I also tried changing the value of a label and that didn't work either. The JS works without changing color( or text ) because it triggers an alert at the end. The code is also called after the document was loaded successfully.
function load() {
var div = document.getElementById('div1');
var label = document.getElementById("label");
// div.style.background = "green";
// label.value = "ml";
alert("hi");
}
document.addEventListener(load, load());
body {
background: #24313E;
font-family: arial;
color: #F2F2F4;
}
#div1 {
background: red;
width: 400;
height: 400;
}
<div id="div1">
hover me
</div>
<label id="label">hi</label>
You should pass a function reference to document.addEventListener.
Also the event name you want is "DOMContentLoaded"
ie use document.addEventListener("DOMContentLoaded", load); instead of document.addEventListener("load", load());
I think the reason why it works on Stackoverflow is because when load() is called the html part is already loaded so the selectors work
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
i'm trying to change the colour of a div using 'jQuery', but don't know how.
Here is my code:
function objectPosition() {
$('#OutlineX1').css("color","blue");
}
What you're stating right now is to change the text color of the div. If that's what you want, then make sure you're selecting the correct element. If you want to change the background color, however, then use background-color instead of color.
use background-color instead of color, color attribute is using for change font color. if you have doubt regarding css() refer this
try this code
function objectPosition() {
$('#OutlineX1').css("background-color","blue");
}
I think use addClass is better.
changeColor {
background-color: 'blue';
}
function objectPosition() {
$('#OutlineX1').addClass('changeColor');
}
try this code, you can use so many effects with this.but for basic I used only one.if you want more thant that tell me.I have linked jquery online.if you want you can use offline also.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
body{
margin:0;
padding: 0;
}
div.mycolor{
width: 400px;
height: 400px;
background-color: red;
}
</style>
<body>
<div class="mycolor">
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".mycolor").click(function(){
$(this).css({"background-color":"orange"},1000);
});
});
</script>
</body>
</html>
in here when your click on your red div, it will change it's color to orange.if you want more than this tell me.hope this will help to you.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have three social icons which grow when hovered (css element:hover) - I want them to shrink slowly to the initial size when user stops hovering them - how could I solve it with Javascript, CSS or jQuery?
You can use CSS alone to achieve this via the transition property, no Javascript required.
.icon {
font-size: 2em; // assuming the icons are font-based. Use height/width otherwise
transition: font-size 0.3s;
}
.icon:hover {
font-size: 4em;
}
Working example
Well, jQuery has a handy-dandy function set called .mouseenter() and .mouseleave() that I'm sure you've heard of :).
You obviously know how to get the elements to grow, so for them to shrink I would reverse what you've done and decrease the size after .mouseleave() Something like this, I think, would work:
$(document).ready(function(){
$('your_element_here').on('mouseleave', function(){
$(this).animate({height: '20px', width: '20px'}, 500);
});
});
Only you'd replace the '20px''s with whatever height and width you want the icon to shrink down to. I hope this helps and I would be glad to expand on this as much as you need so comment if you need anything else.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
I am trying to override user agent stylesheet css from javascript once the page has loaded. for some reason this isn't working. I'm new to javascript and very basic knowledge of css/less and im trying to learn the best practice on how to achieve this.
my javascript:
$(window).ready(function ()
{
// Remove splash screen after load
$('.splash').css('display', 'none');
});
ive also tried $('.splash').css('display', 'none !important'); which doesn't work either.
I'm setting the display type in my css so i dont uderstand why its being overriden.
CSS
.splash {
display: block;
position: absolute;
z-index: 2000;
background: #fff;
color: #555;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
jsfiddle https://jsfiddle.net/76wqqft4/
Thanks for the help
From the question jQuery Selector is having .splash as the class name and in the screenshot, class name which is suppose to hide is .spash. Change the class name for desired output.
Its a simple typing mistake, in your html it says "spash" and in jquery and css its "splash" :)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have problem again. I need positioning img (button) under news img. Here is link : HERE
try
img {
border: 0;
display: block;
}
You were getting problem because display of "img" and "a" was inline(no line feed) by default.
Set display of any one of them to block.
Give the anchor tag which contains the button style property - display: block
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have found a <div> element with class of .plainMail in a webpage and I want to be able to select all its text by pressing Ctrl+A.
I use Firefox 22. I was thinking about to turn the div.plainMail into a textarea. What can I do?
Update:
Can it be done via document.getElementsByClassName? because with document.getElementById I cannot do it. I use use GreaseMonkey.
I'm not sure about what you're exactly looking for, but you probably need HTML Content Editable attribute.
<div contenteditable="true">
This text can be edited by the user.
</div>
ONLINE DEMO.
By using JavaScript, you could add the attribute/value to the element as follows:
var d = document.getElementById("myelement");
d.setAttribute("contenteditable", "true"); // Or: d.contentEditable = "true";
UPDATED DEMO.
Can it be done via document.getElementsByClassName?
Sure (if you don't care about IE8 and below), but note that getElementsByClassName returns a NodeList of matching elements, not a single element.
Thus, we have to loop through the returned list to apply the attribute, as follows:
var i,
list = document.getElementsByClassName("content");
for (i = 0; i < list.length; ++i) {
list[i].setAttribute('contenteditable', 'true');
}
UPDATED DEMO.
while Googling I found this link. seems very nearest as per this question.
following css code can give a textarea effect to the div.
#div-textarea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
font: medium -moz-fixed;
font: -webkit-small-control;
overflow: auto;
padding: 2px;
resize: both;
}
http://blog.thinkingstiff.com/2012/01/22/how-to-make-a-contenteditable-look-like-an-element-or/
also think link contains this fiddle link..
http://jsfiddle.net/ThinkingStiff/FcCgA/