Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
My first website is working ok, but I have an idea I don't know how to accomplish. Some pages have a video player that has buttons to select videos. When the mouse hovers over a button, the navigation menu is replaced with a popup text area that describes the video.
http://www.churchprojectionist.com/nt_history.html
I would like the popup text to appear a few lines above the button over which the mouse hovers, so the viewer's eyes don't have to move back and forth. I've looked, but haven't been found anything to indicate how to do this. The closest thing I've seen is using a <span> title property to create a mouseover tool tip. Perhaps you can point me in the right direction?
Try this :
$(document).on("mousemove",function(e){
$(".moveTxt").css({top:e.pageY,left:e.pageX});
})
Final code :
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.moveTxt {
position: relative;
background-color: yellow;
display: inline-block;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="moveTxt">Text</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).on("mousemove",function(e){
$(".moveTxt").css({top:e.pageY,left:e.pageX});
})
</script>
</body>
</html>
Related
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 1 year ago.
Improve this question
css file:
what gets printed:
html file if it even necessary:
You need to keep in mind that HTML elements come with default styling and each browser is slightly different. Then you need to use the browser developer tools to debug your code. Right click on your HTML element and select inspect.
Now highlighting over your HTML elements will display your margins, border, padding of the selected element, so you can see your h1 has a top and bottom margin applied, remember its default styling applied by the browser.
main{
text-align: center;
}
h1{
font-size:3.5em;
border-bottom: 2px solid #000;
display: inline-block;
padding: 0 10rem;
margin-bottom: 0
}
#aspiration{
text-align: center;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p></p>
<main>
<h1>David Bandas</h1>
</main>
<p id="aspiration">Aspiration front-end developer</p>
</body>
</html>
Output:https://i.stack.imgur.com/NEWEr.png
Html tags come with default user agent stylesheet.If you want to change then need to reset this style with your style.
You can check this default style,In chrome simply press ctrl + shift + i
And select your tag.You can see default css.
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 6 years ago.
Improve this question
I have the following HTML file:
<!DOCTYPE html>
<html>
<head>
<style>
#aDiv{
width:300px;
height:100px;
background-color:blue;
}
</style>
<!--link rel="stylesheet" href="style.css"-->
</head>
<body>
<div id="aDiv"></div>
</body>
If I launch the html in the above form, the blue rectangle is displayed.
If I saved the style in a css file (respectively style.css) the rectangle is not displayed. This behaviour is valid for all the browsers I tried (Firefox, IE, Chrome). How to solve this problem ?
If what you posted in the comments is the actualy contents of your style.css file, your problem is simple to solve - you have a typo:
#aDiv { width:300px; height:l00px; background-color:blue; }
It should be this (take a look at the height value - you had a lower-case L in there in place of a 1):
#aDiv { width:300px; height:100px; background-color:blue; }
This results in an element of height: 0 to render, which you won't be able to see.
When testing this, remember to un-comment the link line in your html head.
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 6 years ago.
Improve this question
{<html> <head> <body> <table border="1"> <tr> <td> personal </td> </tr> </body> </head> </html>
Comment: I want to change the size of personal box in html.
You can do inline styles for those elements.
For example:
<div style="width: 100px; height: 100px;"></div>
But you should really use CSS which you can declare at the inside the the tags in your html
<head>
<style>
div {
width: 100px;
height: 100px;
}
</style>
</head>
You can find more information on CSS if your just starting out at w3schools.com
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
You know, the 8 small iframes that show your most visited websites. How do they get the snapshots of the websites? How do they decide which websites to use? Just how do they work.
Edit: So that I can do something similar.
Edit 2: Is this not programming? I'm asking how to code an iframe that takes a snapshot of a websites.
By using an internal method that shows the picture (in this particular case; chrome-search://thumb/53/22) ? Did you take a look at the source?
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="thumbnail.css">
<script src="util.js"></script>
<script src="thumbnail.js"></script>
</head>
<body dir="ltr">
<a href="http://www.reddit.com/" ping="/log.html?pos=1" title="reddit: the front page of the internet" target="_top" tabindex="-1" style="color: rgb(119, 119, 119); font-size: 11px; font-family: arial, sans-serif;">
<span class="shadow"></span>
<!-- RIGHT HERE! -->
<img src="chrome-search://thumb/53/22">
</a>
</body>
</html>
Have a look at chrome-search://most-visited/thumbnail.js:
function createThumbnail(src) {...} // creates the thumbnails
you can try to remove the contents of
function showDomainElement() {}
if you don't want to see those in new tab page. I haven't tried this.
These snapshots are generated by internal layout engine. But, you can do it with some classes, like html2image, DOMPDF, etc.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have a landing page in a website, where there is just a single image of the earth.
Now to enter the main site, I want some effect in the landing page that the earth cracks open and then the user enters the main site.
What I am currently doing: I currently divide the whole landing page image into 4 divs with a separate image in each of them (which jointly form the earth). Now when the user has to enter the site, I simple animate each of the 4 divs to each corner of the screen. But I need cracking effects & some other visually attractive effects.
Any ideas how to achieve this? Javascript (or jQuery) solution preferable.
overlay a crack image and make it slideDown() (jQuery) over the Earth img.
see http://jsfiddle.net/NKqNh/
$(function() {
$('#crack').slideDown(800);
});
<div id="earth" class="common"> </div>
<div id="crack" class="common"> </div>
Edit:
In your answer here is an updated js using a callback to an anonymous function for the explosion after the cracking.
http://jsfiddle.net/eC9HM/2/
$(function() {
$('#crack').slideDown(800, function() {
$('#earth, #crack').hide('explode', {pieces: 16}, 2000);
});
});
You can use explode effect of jQuery UI . It will break the image into many pieces(you can choose how many pieces you want) and The image will disappear
Uptdated-
Try this code-
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("img").click(function () {
$(this).hide("explode", { pieces: 24 }, 2000);
});
});
</script>
</head>
<body style="font-size:62.5%;">
<img src="http://2.bp.blogspot.com/-No5MB366RTY/T3WYGRicqUI/AAAAAAAAALQ/mDgaBLVocZE/s1600/260px-The_Earth_seen_from_Apollo_17.jpg">
</body>
</html>
Thanks for the answers, but I found my answer combining the other two answers present here.
So am just sharking the fiddle here, so that may be useful in future:
Updated fiddle:
http://jsfiddle.net/gopi1410/eC9HM/1/