I'm trying to change the color of the .box div(s) in the :hover selector, I can only get this to work when I put an !important flag next to the CSS rule. Is there a cleaner way of doing this?
<!DOCTYPE html>
<html>
<head>
<style id="styles" type="text/css">
.box:hover {
background-color:blue;
}
</style>
</head>
<body onload="init()">
<script type="text/javascript">
function init() {
for (var i=0;i<500;i++) {
document.body.innerHTML += "<div class='box' style='display:block;width:100px;height:100px;background-color:red;float:left;'></div>";
}
}
</script>
</body>
</html>
Styles defined in the style="..." attribute have higher specificity than anything defined in stylesheets.
You should instead define your styles like this:
<style>
.box {
display:block;
width:100px;
height:100px;
background-color:red;
display:inline-block; /* better than float:left for your usage */
}
.box:hover {background-color:blue}
</style>
You should also never use += with .innerHTML.
for( var i=0; i<500; i++) {
document.body.appendChild(document.createElement('div')).className = "box";
}
Don't use the styles in inline.. Try like below...
<!DOCTYPE html>
<html>
<head>
<style id="styles" type="text/css">
.box{
display:block;
width:100px;
height:100px;
background-color:red;
float:left;
}
.box:hover {
background-color:blue;
}
</style>
</head>
<body onload="init()">
<h1>HELLO!</h1>
<script type="text/javascript">
function init() {
for (var i=0;i<500;i++) {
document.body.innerHTML += "<div class='box'></div>";
}
var content = document.getElementById('styles').innerHTML;
document.getElementById('styles').innerHTML = content;
}
</script>
</body>
</html>
Note: when you apply a style from script it can be only overwritten by using !important.
Related
Tried the best I could and did some research, I still couldn't figure it out.
My goal is to create an easy coded lightbox for a part of my final examination website that im working on.
Please need help with this annoying problem of mine, would be very appreciated!
$(document).ready(function () {
$('button').click(function() {
$('body').append(' <div id="lb-shadow"><p id="lb-x">[ x ]</p></div> ');
$('body').append(' <div id="lb-container"></div> ');
$('#lb-shadow').fadeIn(6000 );
$('#lb-container').fadeIn(6000);
$('#lb-shadow').click(function(){
$('#lb-container').fadeOut(6000);
$('#lb-shadow').fadeOut(6000);
$('#lb-container').detach();
$('#lb-shadow').detach();
});
});
});
#lb-btn{
position:absolute;
outline:0;
border:0;
padding:5px 10px;
cursor:pointer;
background-color:black;
}
#lb-btn p{
padding:5px;
color:#ccc;
border:1px solid white;
}
#lb-shadow{
position:absolute;
left:0;
right:0;
height:100%;
width:100%;
background-color:rgba(0, 0, 0, 0.7);
}
#lb-x{
color:#ccc;
text-transform:uppercase;
float:right;
margin:15px;
cursor:pointer;
transition: ease .3s;
}
#lb-x:hover{
color:white;
}
#lb-container{
position:absolute;
height:400px;
width:600px;
left:calc(50% - 300px);
top:calc(50% - 200px);
background-color:white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min hemsida</title>
<link rel="stylesheet" type="text/css" href="css/cindex.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/cindex.js"></script>
</head>
<body>
<button id="lb-btn"><p> Login / Register </p></button>
</body>
</html>
If the problem is the click handler, try attaching the event listener globally like so, this way should work even if the element is created after the listener. (Otherwise the duplicate comment on your question should solve the issue)
$(document).ready(function () {
$(document).on('click', '#lb-shadow', function(){
$('#lb-container').fadeOut(6000);
$('#lb-shadow').fadeOut(6000);
$('#lb-container').detach();
$('#lb-shadow').detach();
});
$('button').click(function() {
$('body').append('<div id="lb-shadow"><p id="lb-x">[ x ]</p></div>');
$('body').append('<div id="lb-container"></div>');
$('#lb-shadow').fadeIn(6000);
$('#lb-container').fadeIn(6000);
});
});
I solved it!
I just added display:block on the lb-container and lb-shadow. Apperently the fade effects trigger it automatically and I did cut down my js code aswell.
$(document).ready(function () {
$('button').click(function() {
$('body').append(' <div id="lb-shadow"><p id="lb-x">[ x ]</p></div> ');
$('body').append(' <div id="lb-container"></div> ');
$('#lb-shadow').fadeIn();
$('#lb-container').fadeIn();
$('#lb-shadow').click(function(){
$('#lb-container').fadeOut();
$('#lb-shadow').fadeOut();
});
});
});
I found this piece of code on this site and want to use it in my project. However I'm not sure how to change this so it doesn't push the contents off the page when opening the menu. Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
if( $(this).text()=="Open")
{
$(this).text("Hide");
}
else
{
$(this).text("Open");
}
$("#panel").slideToggle("fast");
});
});
</script>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
width:90px;
height: 200px
}
</style>
</head>
<body>
<button id="flip">Open</button>
<div id="panel">Menu!</div>
</div>
<p>
Something else on the page
</body>
</html>
I've been working on this html code that allows an image to blink as well as auto resize to the browser size. I have the code working that will allow it to blink:
<html>
<head>
<script type="text/javascript">
function blink() {
var e = document.getElementById("blinker");
e.style.visibility = ( e.style.visibility == 'visible' )? 'hidden' : 'visible';
setTimeout("blink();", 1000);
}
</script>
<body onload="blink();">
<table id="table">
<tr><td>
<img id="blinker" src="plesk_logo_fist_2.png">
</td></tr>
</table>
</body>
<style type="text/css">
html, body {
max-width:100%;
max-height:auto;
}
#table {
max-width:100%;
max-height:auto;
text-align: center;
vertical-align: middle;
}
#table img {
max-width:100%;
max-height:auto;
}
</style>
And the code that will resize:
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.fit { /* set relative picture size */
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
</style>
</head>
<body>
<img class="center fit" src="plesk_logo_fist_2.png">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height() { // set body height = window height
$('body').height($(window).height());
}
$(document).ready(function() {
$(window).bind('resize', set_body_height);
set_body_height();
setTimeoutInterval(2000,function(){$
(".element").css({backgroundColor:"none"});});
});
</script>
But, I can't seem to get them working together. Any help to get these to work together (or using alternative method) would greatly appreciated.
Put your function blink script right above your set body height script.
Okay, so here is my Javascript code in which I cannot troubleshoot why this is not working. Basically, I will have multiple drop-down menus all with the class of 'dropdown' and I want to change a particular dropdown (show contents of the division) when an image is clicked. I have already confirmed that the Javascript is properly linked to the JS and CSS files. I have also confirmed that the onClick methos is working properly for the image buttons that control the dropdown menus. When the image is clicked, it will send a parameter to a function that regulates the drop down. Here is the JS:
var current;
var get = function(name) {
current = document.getElementsByClassName(name);
}
var show = function(menu) {
get('image');
if(current[menu].src === 'plus.png') {
current[menu].src = 'minus.png';
get('dropdown');
current[menu].style.display = 'block';
} else {
current[menu].src = 'plus.png';
get('dropdown');
current[menu].style.display = 'none';
}
}
Edit Here is the full HTML:
<!DOCTYPE html>
<head>
<title>Gwiddle - Site Creator</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css' />
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div id='banner'><p>Gwiddle Site Creator</p></div>
<div class='center'>
<p>Tools<img src='plus.png' class='image' onClick='show(0)' /></p>
<p>Options<img class='image' src='plus.png' onClick='show(1)' /></p>
<p>Code<img class='image' src='plus.png' onClick='show(2)' /></p>
</div>
<div class='dropdown'>
<p>Test</p>
</div>
</body>
</html>
CSS:
* {
font-family:Verdana;
}
body {
padding:0;
margin:0;
}
img {
display:inline;
margin-left:.3em;
width:.8em;
height:.8em;
}
.center {
width:100%;
text-align:center;
}
.center > p {
font-size:1.4em;
}
.dropdown {
display:none;
width:100%;
margin:1em 0 1em 0;
}
#banner {
font-size:2em;
color:white;
width:100%;
background-color:#3399FF;
margin-bottom:1em;
text-align:center;
box-shadow:0 2px 5px 2px #CCCCCC;
padding:.5em 0 .5em 0;
}
#banner p {
margin:0;
}
#tools {
color:red;
}
This script works fine for me in Chrome 37 with the script in the page. It might not be supported in your browser
GetElementsByClassName Support.
You could try using jquery:
$('.image')[menu] ...
Since you stated that it shouldn't be your browser, are you sure that the page can find that javascript file? Does an alert('test'); get called if added to the script?
Ok so I wanted to practice some jQuery and to do it I thought I would make the animation that Jay-Z uses on his new album commercials, he has a bar over his name and it slides left while also disappearing. On top of that I wanted the text to fadeOut, fadeIn, and then fadeOut again to give it a flashing effect before it disappeared. Can someone help me with this :l, I got the layout done but the jQuery just wont work..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Magna Carta</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bar').delay(800).css('padding-left', 0+'px');
$('#main p').fadeOut('slow' function(){
$('#main p').fadeIn('slow' function(){
$('#main p').fadeOut('slow');
});
});
});
</script>
<style type="text/css">
body {
background-color:#f2f2f2;
margin:0px;
padding:0px;
}
#main {
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -150px;
text-align:center;
}
#main p {
font-family:Admisi Display SSi;
font-size:64px;
}
#bar {
padding-left:180px;
height:25px;
background-color:black;
position:absolute;
z-index:2;
margin-top:87px;
margin-left:61px;
}
</style>
</head>
<body>
<div id="main">
<center>
<div id="bar"></div>
</center>
<p>JAY-Z</p>
</div>
</body>
</html>
You need to use the animate function here (before you were just setting the padding-left to 0, which happens immediately) and you have to fix your fadeOut and fadeIn callback functions:
$(document).ready(function () {
$('#bar').delay(800).animate({
'padding-left':0
}, 1000, function () {
// Animation complete.
$('#bar').delay(800).css('padding-left', 0 + 'px');
$('#main p').fadeOut('slow', function () {
$('#main p').fadeIn('slow', function () {
$('#main p').fadeOut('slow');
});
});
});
});
Demo: http://jsfiddle.net/BjBry/1/