I tried to create a jQuery function .hover to change the background-color of div by using another class and using hover to addClass and removeClass.
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script type='text/javascript' src='script.js'></script>
<title>Untitled 1</title>
</head>
<body>
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
</body>
</html>
CSS:
div {
display:inline;
font-family: Helvetica;
color: white;
background-color:#FF6666;
padding: 20px;
}
.hltd {
display:inline;
font-family: Helvetica;
color: black;
background-color:#66FF33;
padding: 20px;
}
Javascript:
$(document).ready(function(){
$('div').hover(
function(){
$(this).addClass('hltd');
},
function(){
$(this).removeClass('hltd');
}
);
});
You haven't included the Jquery library. Include it before your script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
$(document).ready(function() {
$('div').hover(
function() {
$(this).addClass('hltd');
},
function() {
$(this).removeClass('hltd');
}
);
});
div {
display: inline;
font-family: Helvetica;
color: white;
background-color: #FF6666;
padding: 20px;
}
.hltd {
display: inline;
font-family: Helvetica;
color: black;
background-color: #66FF33;
padding: 20px;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
<title>Untitled 1</title>
</head>
<body>
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
</body>
</html>
Though, if you are only trying to change the background colour, CSS would be a better option.
use css :hover pseudo-class instead of JS
div {
display: inline;
font-family: Helvetica;
color: white;
background-color: #FF6666;
padding: 20px;
}
div:hover {
color: black;
background-color: #66FF33;
}
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
Its work for me..
$(document).ready(function(){
$('div').hover(
function(){
$(this).addClass('hltd');
},
function(){
$(this).removeClass('hltd');
}
);
});
div {
display:inline;
font-family: Helvetica;
color: white;
background-color:#FF6666;
padding: 20px;
}
.hltd {
display:inline;
font-family: Helvetica;
color: black;
background-color:#66FF33;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script type='text/javascript' src='script.js'></script>
<title>Untitled 1</title>
</head>
<body>
<div>HOME</div>
<div>ABOUT</div>
<div>CONTACT</div>
</body>
</html>
It has worked for me, confirm your script referenced correctly. I could suggest to open your inspect element and check the console and view any errors which you may encounter. If you nothing appears, use the browser debugger.
I have used the following online link for jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Related
I'm new to this topic and I have an index.html file and there I want to use three.js
this is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
</div>
</body>
</html>
I also try this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
</body>
</html>
and my css file :
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04aa6d;
color: white;
}
.webgl {
position: fixed;
top: 0;
left: 0;
outline: none;
}
My problem is that div for menubar didn't show in front of the canvas.
what should I do?
Thanks.
Transform your HTML into something like below:
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
<canvas class="webgl"></canvas>
<!-- script tags -->
then remove position, left and top properties from webgl class.
I have done this far but the code isn't working. It's working in fiddle but here it isn't. I am attaching a solution which I want and the code as far as I have done. I have somehow figured out that with jQuery it's working but I don't want to use jQuery or tell me how to use jQuery in sublime text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catch Me</title>
<style>
button {
background-color: rgb(228, 6, 248);
border: none;
color: white;
padding: 20px 20px;
text-align: center;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="main">
<button name="button">Catch Me</button>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
$("button").on({
mouseover:function(){
$(this).css({
left:(Math.random()*200)+"px",
top:(Math.random()*200)+"px",
});
}
});
});
</script>
The solution I want is this:
https://ninjasfiles.s3.amazonaws.com/0000000000001878.gif
Please try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catch Me</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
button {
background-color: rgb(228, 6, 248);
border: none;
color: white;
padding: 20px 20px;
text-align: center;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="main">
<button name="button">Catch Me</button>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("button").mouseover(function() {
$(this).css("left", "" + (Math.random()*200) + "px");
$(this).css("top", "" + (Math.random()*200) + "px");
});
});
</script>
</body>
</html>
I have 2 files, filter.html and filter.js.
In filter.html I have a div with the id "test" and in filter.js I have a variable with the name "finishedHTML".
Now I want to write the content of "finishedHTML" into the test div as html code, but the html things "finishedHTML" is empty.
How can I solve this problem?
Source:
var finishedHTML = "<h2>Yes it works</h2>"
header {
display: block;
background: #A2AFBC;
top: 0;
height: 50px;
position: fixed;
width: 100%;
text-align: center;
}
footer {
height: 50px;
width: 100%;
bottom: 0px;
left: 0px;
background: #A2AFBC;
position: fixed;
}
.headerTitle {
font-size: 2.0em;
font-family: Verdana;
font-weight: 100;
color: #506B84;
margin: 0em;
font-weight: bold;
}
h2 {
font-size: 3.0 em;
color: red;
}
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
<!--Filter.js-->
<script language="javascript" type="text/javascript" src="filter.js"></script>
</head>
<body>
<header>
<span class="headerTitle">Header Text</span>
</header>
<div id="test" style="margin-left: 300px; padding-top: 300px;">
<h1>This is a test text</h1>
</div>
<script language="javascript" type="text/javascript">
document.getElementById('test').innerHTML = finishedHTML;
</script>
<footer>
</footer>
</body>
</html>
Thanks four your help!
You can use the variable finishedHTML only after it has been declared. So declare it at any point before setting the innerHTML and it will work.
var finishedHTML = "<h2>Yes it works</h2>";
document.getElementById('test').innerHTML = finishedHTML;
header {
display: block;
background: #A2AFBC;
top: 0;
height: 50px;
position: fixed;
width: 100%;
text-align: center;
}
footer {
height: 50px;
width: 100%;
bottom: 0px;
left: 0px;
background: #A2AFBC;
position: fixed;
}
.headerTitle {
font-size: 2.0em;
font-family: Verdana;
font-weight: 100;
color: #506B84;
margin: 0em;
font-weight: bold;
}
h2 {
font-size: 3.0 em;
color: red;
}
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
<!--Filter.js-->
<script language="javascript" type="text/javascript" src="filter.js"></script>
</head>
<body>
<header>
<span class="headerTitle">Header Text</span>
</header>
<!-- style="margin-left: 300px; padding-top: 300px;"-->
<div id="test" style="margin-top: 100px;">
<h1>This is a test text</h1>
</div>
<footer>
</footer>
</body>
</html>
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
</head>
<body>
<header>
<span class="headerTitle">Header Text</span>
</header>
<div id="test" style="margin-left: 300px; padding-top: 300px;">
<h1>This is a test text</h1>
</div>
<!--Filter.js-->
<script language="javascript" type="text/javascript" src="filter.js"></script>
<script language="javascript" type="text/javascript">
document.getElementById('test').innerHTML = finishedHTML;
</script>
<footer>
</footer>
</body>
</html>
put <script> inside body can solve your asysnc loading script issue
Hey just check this its working fine for me.
Thanks
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" >
<!--Filter.js-->
<script language="javascript" type="text/javascript" src="filter.js"></script>
</head>
<body>
<header>
<span class="headerTitle">Header Text</span>
</header>
<div id="test" style="margin-left: 300px; padding-top: 30px;">
<h1>This is a test text</h1>
</div>
<script language="javascript" type="text/javascript">
var finishedHTML = "<h2>Yes it works</h2>";
console.log(finishedHTML);
document.getElementById('test').innerHTML = finishedHTML;
</script>
<footer>
</footer>
</body>
</html>
Move document.getElementById('test').innerHTML = finishedHTML; into filter.js.
When I run my code I can only see the STANDARD TEST paper-header-panel.
Everything within paper-drawer-panel seems to be hidden.
If I set the initial paper-header-panel(class=blue) to 1000px, The rest of the content will show.
Is there anything I need to set so the initial paper-header-panel will change it's height automatically based on the content?
Thanks
<link rel="import" href="/apps/polymer-chat/js/bower_components/polymer/polymer.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-menu/paper-menu.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-item/paper-item.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/apps/polymer-chat/css/app-theme.html">
<dom-module id="main-component">
<link rel="import" type="css" href="/apps/polymer-chat/css/main-component.css">
<template>
<paper-header-panel class="blue">
<div class="paper-header">STANDARD TEST</div>
<paper-drawer-panel
id="mainDrawerPanel"
class="main-drawer-panel"
responsive-width="600px"
drawer-width="[[_computeListWidth(_isMobile)]]"
drawer-toggle-attribute="list-toggle"
narrow="{{_isMobile}}"
>
<paper-header-panel class="list-panel" drawer>
<paper-menu class="list" on-iron-activate="_listTap">
<paper-item>1</paper-item>
<paper-item>2</paper-item>
<paper-item>3</paper-item>
<paper-item>4</paper-item>
</paper-menu>
</paper-header-panel>
<paper-header-panel class="content-panel" main>
<paper-toolbar responsive-width="600px">
<paper-icon-button icon="menu" list-toggle></paper-icon-button>
<span class="flex">CHAT PERSON NAME HERE</span>
</paper-toolbar>
<div class="content">MAIN AREA</div>
</paper-header-panel>
</paper-drawer-panel>
</paper-header-panel>
</template>
<script>
Polymer({
is: 'main-component',
_computeListWidth: function(isMobile) {
// when in mobile screen size, make the list be 100% width to cover the whole screen
return isMobile ? '100%' : '25%';
},
_listTap: function() {
this.$.mainDrawerPanel.closeDrawer();
}
});
</script>
</dom-module>
:host {
display:block;
}
.paper-header {
height: 60px;
font-size: 20px;
color: var(--text-primary-color);
line-height: 60px;
padding: 0 30px;
}
.blue .paper-header {
background-color: var(--default-primary-color);
}
.list-panel {
background-color: #fafafa;
--paper-header-panel-standard-container: {
border-right: 1px solid #ccc;
};
}
paper-toolbar {
background-color: #42A5F5;
}
.list {
background-color: #FFFFFF;
}
.list paper-item {
height: 80px;
border-bottom: 1px solid #dedede;
background-color: #fafafa;
color: #000000;
}
.main-drawer-panel:not([narrow]) [list-toggle] {
display: none;
}
.content {
height: 3000px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>Polymer Demo</title>
<script src="js/bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/apps/polymer-demo/components/main-component.html">
<style is="custom-style">
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body class="fullbleed layout vertical">
<main-component></main-component>
</body>
</html>
Nevermind. I figured out the problem.
The issue was being caused by the HTML DOCTYPE
After removing it. Everything is now working correctly.
Can someone point me in the right direction? I don't see why I can't get the achtergrond_homepage.png as background in rounded corners.
Edit: It looks like the grey color is allways on top of everything. Can it be that it's controlled in the javascript part?
This is the css:
#charset "utf-8";
/* CSS Document */
html, body {
color: #444141;
font-family: 'trebuchet ms' !important;
font-size: 12px;
margin: 0px;
padding: 0px;
height: 100%;
background: #eaeade;}
.justyParagraph {
text-align: justify;}
a img {
border: 0;}
.clearer {
clear: both;}
.rounded_corners{
background: url(../images/achtergrond_homepage.png) no-repeat left bottom;
color:#FFF;
padding: 8px;
width: 380px;
border: 2px solid #4e4b4b;
height: 450px;
}
div#blockdark {
height: 517px;
left: 450px;
position: absolute;
top: 130px;
z-index: 1000000;
width: 360px;
visibility: visible;
}
This is the HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="bookmark" href="/favicon.ico" />
<link rel="shortcut icon" href="/favicon.ico" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/excanvas.js" type="text/javascript"></script>
<script src="js/jQuery.min.js" type="text/javascript"></script>
<script src="js/roundCorners.jQuery.js" type="text/javascript" ></script>
<script type="text/javascript">
$(window).load(function(){
$('.rounded_corners').bg(['20px', '20px', '20', '20']);
});
</script>
</head>
<body>
<div id="blockdark">
<div class="rounded_corners">
<div> <h1> Title </h1> </div>
<div> Content </div>
</div>
</div>
</body>
</html>
This is a example, maybe it has something to do with the javascript for rounded corners?
http://www.coldcharlie.nl/test/
Try adding display: block to the .rounded_corners. Also it looks like you're missing a ; from the background line of .rounded_corners