I need some help!
I'm doing website, and i'm having a problem with a thing. I have a <h1> and a image next to it, that image is a question mark. And i want that when i mouse hover that question mark it appears the div that i made with the information... i saw lots of topics answered in that forum but none of them is working, pls help me!
<html>
<body>
<h1>branch<img id="help" src="Questionmark.png"></img></h1>
<div id="information">Branch is...</div>
<script>
var e = document.getElementById('help');
e.onmouseover = function() {
document.getElementById('information').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('information').style.display = 'none';
}
</script>
</body>
</html>
Pls tell me what to do, maybe there is a easy way... i tried css but also didn't work...
I suggest to go with css.
If you are doing layout, use CSS, if you are setting the look and feel
use CSS, if your doing animation use CSS3
If you attach event handlers or reacting to user input use JavaScript.
Note that people use JavaScript instead of CSS for browser support.
There are other solutions like emulating CSS features using
javascript.
source
css
#information{
display:none;
}
h1:hover + #information{
display:block;
}
fiddle
If you want simple tooltip kind of thing, then you can use this code
<h1>
branch<img id="help" src="Questionmark.png"></img>
<div id="information">Branch is...</div>
</h1>
h1{
position: relative;
}
h1 img{
cursor: pointer;
}
#information{
display: none;
position: absolute;
left: 50px;
width: 100px;
height: 50px;
font-size: 14px;
background: red;
}
h1 img:hover + #information{
display: block;
}
Check this link http://jsfiddle.net/amoljawale/G83WB/2/
Related
I got my function to display my site to full screen :
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
that I associate with a button image and it worked !
But when I move my cursor over it, the cursor remains in "default" version so I would like it to become "pointer" to give the effect of a button : "cursor: pointer;" and I don't manage to enter my css in the function to make it work.
If you can add class to your button button then just add the CSS below to get pointer when you hover over a button.
.button:hover{
cursor:pointer;
}
So basically what you can do is
button{
cursor:pointer;
}
<button>Hello there</button>
You can also add a class to your button
.btn{
cursor:pointer;
}
<button class="btn">Hello there</button>
You can do it with pure css
#fullscreen {
width: 100px;
height: 100px;
background-color: black;
cursor: pointer;
}
<div id="fullscreen"></div>
or with pure Javascript
document.getElementById("fullscreen").style.cursor = "pointer";
#fullscreen {
width: 100px;
height: 100px;
background-color: black;
}
<div id="fullscreen"></div>
I'll be the first to admit that my CSS is not amazing by any means but if you were to add a class to the actual button itself in the HTML portion of your page and add the property cursor: pointer to that class' attributes, I believe that should do the trick? I would have rather left this as a comment instead of an answer but I'm not reputable enough for a comment yet haha
Don't really know what they're called. For some reason I can't remember. But you know on many homepages they have that menu-like thing with panels that slide by showing their products? I pretty much need to learn how to do that, although what I'm actually doing is making a panel slide by when you click some text. The ideas are pretty much the same, from what I can tell, except those menus do it automatically every couple seconds.
Now I know pretty much exactly what to do in terms of the Javascript. The problem I'm having right now is (worryingly) basic HTML. This is what I've got:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Dat Sliding Menu Doe</title>
<link rel="stylesheet" href="slidingmenu.css"/>
</head>
<body>
<div id="menu1">
<h1>This is some text.</h1>
<p>This is some more text.</p>
</div>
<div id="menu2">
<h3>This text is different.</h3>
<h1>Very different.</h1>
<p>So different, in fact, that</p>
<p>the div is a different height.</p>
</div>
<script type="text/javascript">
</script>
</body>
</html>
CSS:
#menu1 {
position: absolute;
display: inline-block;
background: #d8d808;
color: white;
left: 0px;
right: 0px;
top: 0px;
width: 100%;
margin-left: 0%;
}
#menu2 {
position: absolute;
display: inline-block;
background: #7feaa8;
color: white;
left: 0px;
right: 0px;
top: 0px;
width: 100%;
margin-left: 100%;
}
Pay no attention to the colors or anything, this is just practice!
It's doing everything it's supposed to do EXCEPT for the fact that I get a scrollbar at the bottom of the page that allows me to scroll to the right and see the second div... which is a problem. Am I doing something fundamentally wrong, or do I just need to add something to get rid of that scrollbar?
Also, a little bit of uncertainty on the Javascript. How would I get it so that the margin-left for both divs changes at EXACTLY the same time? Even a slight delay will show up, right?
It may be easier to just link to a tutorial. I tried researching this, but I didn't know what to look up (forgot what they're called!).
EDIT
Ok, so I took Joshua Chavanne's suggestion and hid the overflow for the body, which worked. Then I did all this with the Javascript:
var menu1 = document.getElementById("menu1");
var menu2 = document.getElementById("menu2");
var switch1 = document.getElementById("switch1");
var switch2 = document.getElementById("switch2");
switch1.onclick = move;
switch2.onclick = move;
function move() {
if (menu1.style.marginLeft == 0) {
show2();
}
else {
show1();
}
}
function show2() {
if (menu1.style.marginLeft > -100) {
menu1.style.marginLeft = (menu1.style.marginLeft - 10) + "px";
requestAnimationFrame(show2);
}
}
When I click on switch1, menu1 moves over 10px, then stops moving. No idea why.
Check out free jssor carousel
It will do everything you are asking for and you don't have to write it yourself.
The website i am currently working on has a pop out div with a map of locations on it, my problem is once the pop up div has been closed i then have to refresh the page to open the div again
It is running jquery - here is the code
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#view_map_of_stocklists_link').click(function() {
//$('#popupdiv').show('slow');
$("#popupdiv").css('visibility', 'visible');
$("#mappy").css('opacity', '1');
});
$('.closepopup').click(function() {
$('#popupdiv').hide('slow');
});
});
</script>
The styling
<style>
#popupdiv
{
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 600px;
margin-top: -200px;
width: 960px;
margin-left: -500px;
padding: 20px;
}
#view_map_of_stocklists_link:hover {
cursor:pointer;
}
.closepopup {
margin-top: 60px;
border: 1px solid #ccc;
background-color: #000;
color: white;
cursor: pointer;
}
</style>
and then the HTML itself
<div id="popupdiv" style="visibility:hidden;">
<center>
<iframe style="opacity:0;" id="mappy" src="http://mapsengine.google.com/map/embed?mid=zNedxWZ7lai0.krRxVqZZmyns" width="900" height="500"></iframe>
<div class="closepopup" style="width:200px">Close</div>
</center>
</div>
<h2 class="bold skin-font-color1">Our Beloved Stockists</h2>
<h5 class="skin-font-color1 p-wrapper"><!-- client txt --> <div id="view_map_of_stocklists_link" class="skin-font-color4">
<h4>View map of stockists</h4>
</div>
The website is http://www.tee-ze.co.uk/sosmoothies/
Cheers
You are setting 'visibility' to 'visible' instead of 'display' to 'block'.
When jQuery .hide() is called it ultimately saves the previous display value and sets it to display:none; So you should be doing something like:
$('#view_map_of_stocklists_link').click(function() {
$('#popupdiv').hide('slow');
});
Which I just realized you have commented out in your code. I wish I could leave a comment but I need more rep.
Edit:
Sorry for complaining in may previous answer.
I just tried uncommenting the existing code and removing the visibilty stuff and that works just fine in your site. Try it.
The way you're showing the popup map doesn't match the way you're hiding it.
You show it with:
$("#popupdiv").css('visibility', 'visible');
But you hide it with:
$('#popupdiv').hide('slow');
That fades it out but ultimately sets the CSS style display: none on the #popupdiv element.
When you try to show it again, it still has display: none on it. Setting the visibility doesn't affect the display style.
You need to make the hide and show match up. Either use the visibility style, or the display style, but use the same one for both hiding and showing (and jQuery's .show() method uses display).
For example, you might create the <div> with display: none instead of visibility: hidden, and then you can use jQuery's .show() and .hide() consistently.
i am totally new in web design, and i am right now struggling with creating part of my website, i need to somehow make this happen:
When PART of the BODY BACKGROUND is HOVERED, make the background change to "B", and when the mouse is not over that part, I need it to change back to background "A".
I have seen some examples here but as i am a beginner, i have no idea how to use javascript, if you could please give me some light here, either on pure CSS or on how to apply javascript.
This is accomplished very easily using a third party javascript library called JQuery http://jquery.com, you can see a working example here: http://jsfiddle.net/bbp8G/
$(document).ready(function(){
$("#hover").mouseenter(function(){
$(this).css("background","#009900");
}).mouseleave(function(){
$(this).css("background","#ffffff");
});
});
Here's the easiest way I know how to do what you've described...
<!-- POSITION THIS DIV WHEREVER YOU WANT THE
USER TO HOVER SO THAT THE BACKGROUND WILL CHANGE -->
<div id="hover">
</div>
<!-- PUT THIS CODE IN YOUR <HEAD> -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" />
<style>
#hover { width: 200px; height: 200px; position: relative; top: 200px; background: green; }
.myNewBackround { background-color: red; }
</style>
<script>
$(document).ready(function() {
// when the #hover DIV is hovered, change the background of the body
$('#hover').hover(function() {
$('body').addClass('myNewBackground');
});
});
</script>
Here's a JS FIDDLE:
http://jsfiddle.net/ZKaJn/
Or you can do it with pure CSS
<div id="left"> </div>
<div id="right"> </div>
And the CSS part:
#left
{
background-color:#000;
float:left;
width:50%;
height:200px;
}
#right
{
background-color:#FF0;
float:right;
width:50%;
height:200px;
}
#right:hover
{
background-color:#00F;
}
#left:hover
{
background-color:#F00;
}
You can replace the div's and values with whatever you like, the main part is the #right:hover and #left:hover
Actually with just css it is not possible to change the background of the body when hovering a DOM element. This is because CSS does not allow you (yet) to travel up the DOM tree (select a parent), only down (select a child).
That being said, it is however possible to mimic the effect, and it is even quiet easy if it is the body background you want to change. You can lay a pseudo element with a background on top of your body background, and underneath the actual content. This way it looks as if the body background has changed.
The css to achieve this would look something like this:
.hover-me:hover:after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
background: url(http://placekitten.com/600/300) center center;
background-size: cover;
z-index: -1;
}
And a small fiddle to demonstrate: http://jsfiddle.net/3dwzt/
Should be compatible with IE8 and up
I think the problem's already stated. When you click the plus extra content is show(the Hello Guest and Register and Signup). Is their a better and working way of doing this or do I have a bug. New at java-script so don't hate.
---> http://jsfiddle.net/CM9Av/
You are not setting the top . Also, cache your variables.
function menuanimate() {
var loginoutbox = document.getElementById("loginoutbox");
var fromtop = loginoutbox.style.top;
if (fromtop == "-20px") {
fromtop = "0px";
}
else {
fromtop = "-20px";
}
loginoutbox.style.top = fromtop;
}
In markup , set top in inline style. stlye.top wont read css property.
<div id="loginoutbox" class="ablack" style='top:-20px'></div>
Try outside fiddle in a simple webpage. It works !
Demo fiddle (I dont know how to put pure js in fiddle.net)
You can not just update the variable fromtop, that will have no effect on the page. You will have to update the top-value manually, the same way you read it.
<html>
<script type="text/javascript">
function menuanimate(){
document.getElementById("loginoutbox").style.top="0px";
}
</script>
<style type="text/css">
#image{
position:fixed;
top:0px;
left:80%;
}
#image:hover{cursor:pointer;}
#loginoutbox{
left: 80%;
width: 218px;
color: white !important;
position: fixed;
top: -20px;
background-color: #444;
height: 20px;
text-align: right;
}
</style>
<img style="margin-right: 94px;" src="http://www.kdogisthebest.webege.com/images/plustab.png" id="image" onClick="menuanimate();"/>
<div id="loginoutbox" class="ablack" style="top:-20px;">
<div style="display: inline-block; font-size: 14px; padding-left: 20px;">Hello Guest!</div>
<a id="register" href="#fallr-register" class="button">Register</a> |
<a id="signin" href="#fallr-signin" class="button">Login</a>
</div>
</html>
This is not the prettiest but I think this is what you are looking for as far as the end result...