may be it's a simple but i didnt find the solution
i wrote the following code.
<html>
<head>
<style>
span.dropt {
border-bottom: thin dotted;
background:white;
}
</style>
</head>
<body>
<span class="dropt" title="Title for the pop-up">Hot Zone Text
</span>
</body>
</html>
here,what i want is,i want to give the background color/image for "Title for the pop-up" when hover the cursor.i tried but i didnt get the solution.can any one help me...
Jquery "tooltip" is the right solution for it. Here are some resources for you:
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
http://codecanyon.net/item/the-tooltip/150532?ref=1stwebdesigner
But if you wanna make one your self. Using, jquery try to append get the title attribute of the element then append it to the span when the event is hover.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.dropt').hover(function(){
var title = $(this).attr('title');
$(this).append('<span class="tooltip">'+title+'</span>');
},function(){
$('.tooltip',this).fadeOut('slow').remove();
});
});
</script>
<style>
.tooltip {
display:block;
padding:5px;
background:black;
color:white;
min-width:200px;
font-size:11px;
line-height:25px;
text-align:center;
position:absolute;
top:-50px;
border:none;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.dropt {
position:relative;
display:block;
cursor:pointer;
}
</style>
</head>
<body>
<br><br/>
<span class="dropt" title="Title for the pop-up">Hot Zone Text</span>
</body>
</html>
Related
I'm running into an issue using a countdown clock called loopcounter.js. It is center aligned. However, as the time goes down, the text moves slightly.
I've tried setting a max width for the p tag & setting margin: 0 auto, however I ran into the same issue.
$(function(){
loopcounter('myCountdown');
});
body {
background:#000000
}
.messaging {
font-family:'Montserrat',sans-serif;
text-align:center;
color:#ffffff;
font-weight:600;
font-size:20px;
line-height:25px;
}
.myCountdown {
background:green;
padding:10px;
border-radius:10px;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<style>
</style>
</head>
<body>
<p class="messaging">Album Drops in <span class="countdown-wrap"><span class="myCountdown" data-date="2023-11-26 23:59:59">
<span class="counter-hours"></span> : <span class="counter-minutes"></span> : <span class="counter-seconds"></span>
</span></span></p>
<script
src="https://code.jquery.com/jquery-3.6.1.slim.min.js"
integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA="
crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/countdown-date-loop-counter/js/loopcounter.js"></script>
</body>
</html>
You may need to set a fixed width for .myCountdown by making it a inline-block and using a min-width instead of max-width. Later if you want to also fix the texts inside counter-hours , counter-minutes and counter-seconds, you can also make them inline-block with the same solution:
$(function(){
loopcounter('myCountdown');
});
body {
background:#000000
}
.messaging {
font-family:'Montserrat',sans-serif;
text-align:center;
color:#ffffff;
font-weight:600;
font-size:20px;
line-height:25px;
}
.myCountdown {
display:inline-block;
min-width:180px;
background:green;
padding:10px;
border-radius:10px;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<style>
</style>
</head>
<body>
<p class="messaging">Album Drops in <span class="countdown-wrap"><span class="myCountdown" data-date="2023-11-26 23:59:59">
<span class="counter-hours"></span> : <span class="counter-minutes"></span> : <span class="counter-seconds"></span>
</span></span></p>
<script
src="https://code.jquery.com/jquery-3.6.1.slim.min.js"
integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA="
crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/countdown-date-loop-counter/js/loopcounter.js"></script>
</body>
</html>
So I am using brackets to code and I am very new to programming I put a div element around my image so I could edit it in css but for some reason the width and heights are not changing
h1 {
width: 300px;
margin:400px auto;
color: red;
font-family:Impact ;
}
.character{
width:45px;
height:45px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mainc.css">
<script src="javascript.js"></script>
</head>
<body>
<h1>
So I am just testing out stuff on here
</h1>
<div class: "character">
<img src="C:/Users/Nick Malone/Desktop/Downloads/block.jpg">
</div>
</body>
</html>
<div class: "character"> is a wrong notation to assign a class to a div. Try it as <div class="character">
You need to update your css to target the image. See below.
.character img{
width:45px;
height:45px;
}
h1 {
width: 300px;
margin:400px auto;
color: red;
font-family:Impact ;
}
img{
width:45px;
height:45px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mainc.css">
<script src="javascript.js"></script>
</head>
<body>
<h1>
So I am just testing out stuff on here
</h1>
<div class= "character">
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg">
</div>
</body>
</html>
Try this
. character img{
width:100px;
height:100px;
display:block;
}
You need to give the width and the height to the image not the div.
h1 {
width: 300px;
margin:400px auto;
color: red;
font-family:Impact ;
}
#character{
width:45px;
height:45px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mainc.css">
<script src="javascript.js"></script>
</head>
<body>
<h1>
So I am just testing out stuff on here
</h1>
<div>
<img src="C:/Users/Nick Malone/Desktop/Downloads/block.jpg" id="character">
</div>
</body>
</html>
I have an <img> tag inside a <div> tag and they both have classes but when I try to style the img class inside of CSS, it doesn't work? Also, whenever I try to set the div class to an id and change it in CSS, it disappears. Any help?
JSFiddle: https://jsfiddle.net/mmfm4vee/
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/loading.js"></script>
<!--Stylesheet Links-->
<link rel="stylesheet" text="text/css" href="css/style.css">
<link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">
<!--Font Links-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<!--Website Header-->
<div id="header">
<div class="steam-info">
<img class="steam-avatar" src="<?$steamprofile['avatar'];?>">
<ul>
<li><a href=#></a>
</ul>
</div>
</div>
</body>
CSS:
/* Website Header */
#header {
background:rgb(28,28,28);
width:100%;
height:60px;
position:absolute;
box-shadow:0px 0px 8px 2px black;
border-top:3px solid rgb(235,50,50);
z-index:99999999;
left:0px;
top:0px;
}
.steam-info {
background:rgb(50,50,50);
border-left:3px solid rgb(235,50,50);;
width:160px;
height:40px;
position:absolute;
z-index:999999999;
top:10px;
left:1160px;
}
.steam-info a {
display:block;
color:rgb(255,255,255);
height:100%;
width:100%;
font-size:30px;
}
.steam-avatar {
width:30px;
height:30px;
}
Looking through the code, there appears to be no problem adjusting the style of the image when using an image through placehold.it.
I simply replaced <?$steamprofile['avatar'];?> with http://placehold.it/200 and was able to both see the image, and succesfully change the way it displays with simple changes to:
.steam-avatar {
width: 100px;
height: 30px;
}
Therefor, I conclude that the problem is with the way your PHP script grabs the image from Steam.
Updated code with that slight change can be found here.
Sorry this can't be of more help, but the code appears to be functioning correctly aside from the image coming through from Steam.
I have my css button that wont work, it only comes up as a simple hyper link..
I have it all setup right with the css reference and everything.. Heres a look at my code:
.B1 {
background-color:#44c767;
-moz-border-radius:16px;
-webkit-border-radius:16px;
border-radius:16px;
border:4px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:18px 63px;
text-decoration:none;
text-shadow:1px 0px 8px #2f6627;
}
.B1:hover {
background-color:#5cbf2a;
}
.B1:active {
position:relative;
top:1px;
}
<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<link rel="stylesheet" type="text/css" href="file:///Users/lucasaltmann/Desktop/styles2.css">
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>
CSS is top and HTML is bottom. It runs fine when I run it on here but its not working for me..
PS: I am running mac snow leopard and firefox (Chrome did not work either)
It works here but not on your computer - well the CSS is probably not loaded correctly. You have an absolute path to the CSS file, so try this instad:
<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<link rel="stylesheet" type="text/css" href="styles2.css">
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>
Put you .html and style2.css in the same folder and it should work.
Another solution:
Replace your html with this:
<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<style>
.B1 {
background-color:#44c767;
-moz-border-radius:16px;
-webkit-border-radius:16px;
border-radius:16px;
border:4px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:18px 63px;
text-decoration:none;
text-shadow:1px 0px 8px #2f6627;
}
.B1:hover {
background-color:#5cbf2a;
}
.B1:active {
position:relative;
top:1px;
}
</style>
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>
Now the CSS is inside the html file.
I have the following code
CSS
.photo_types {
position:relative;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:gray;
text-align:left;
font-weight:bold;
margin:0% auto;
}
HTML
<div id="photo_types" class="photo_types">
<img src="images/ystone_burnt_tree.jpg" />
That code above is loaded via Javascript in the code below
CSS
.mySelfStyle {
position:absolute;
top:3.5%;
left:1%;
width:80%;
height:90%;
background-color:black;
text-align:center;
}
.photogMainStyle {
position:absolute;
top:3.5%;
left:1%;
width:80%;
height:90%;
background-color:black;
}
HTML
<div id="myself_panel">
<img id="myself_panel_img" src='images/ystone_burnt_tree.jpg' />
<p style="color:white;"> The Most Beautiful Place I have been To </p>
</div>
<div id="photo_panel">
</div>
JS
function showMyPhotography() {
itemObj = document.getElementById('myself_panel');
itemObj.className = 'hiderStyle';
itemObj = document.getElementById('photo_panel');
itemObj.className='photogMainStyle';
/*
itemObj.load("photo_panel.html");
*/
itemObj.innerHTML='<object type="text/html" data="photo_panel.html"> </object>';
}
The problem I am having is that the photo_panel.html which is loaded does not use all of the space in the div photo_panel. It only uses the space partially.
You need to set the height and width of the object tag you are adding
#photo_panel object
{
height:100%;
width:100%;
}
Plunker Sample
Thanks for your responses everyone. The following solved my problem.
.hiderStyle
{
clear : both;
display : none;
}
Earlier I did not have "clear:both" in my hiderStyle and I changed the function as follows
function showMyPhotography()
{
/*
itemObj = document.getElementById('myself_panel');
itemObj.className = 'hiderStyle';
itemObj = document.getElementById('photo_panel');
itemObj.className='photogMainStyle';
itemObj.load("photo_panel.html");
itemObj.innerHTML='<object type="text/html" data="photo_panel.html" style="width:100%; heig
*/
$("#myself_panel").className = 'hiderStyle';
$("#myself_panel").load("photo_panel.html");
}
I also had a similar problem. I was using <object> instead of using jquery. The following approach solved my problem.
html
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="Untitled-7.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="load_page()">
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
</body>
</html>
<script>
function load_page()
{
document.getElementById("d1").innerHTML='<object type="text/html" data="page1.html" ></object>';
document.getElementById("d2").innerHTML='<object type="text/html" data="page2.html" ></object>';
document.getElementById("d3").innerHTML='<object type="text/html" data="page3.html" ></object>';
}
</script>
css
html,body
{
height:100%;
width:100%;
}
div
{
height:100vh;
width:100vw;
}
div object
{
height:100vh;
width:100vw;
}
Hope this helps :)