How can I make a scrollbar for my page that appears when I place my cursor at the corner ?
I found out a way to make the scrollbar appear and disappear on hover by using the following:
div { overflow:hidden;height:whatever px; }
div:hover { overflow-y:scroll; }
But that only applies to div tags. I want the scroll-bar to appear only when I take my cursor at the right edge of the page. I tried using body instead of div but then it disturbs all the pages even to those which have less contents.
Please suggest me a way to do so.
what i have understood is that you want something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Liveweave</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.right').hover(function(){
$('.box').css('overflow-y','scroll');
},function(){
$('.box').css('overflow','hidden');
});
});
</script>
<style type="text/css">
.box
{
overflow:hidden;
width: 100px;
height: 100px;
background-color: yellow;
overflow: hidden;
}
.box:hover
{
/*overflow-y:scroll;*/
}
.body{width:100%}
.right{float:right;min-height:50px;position:absolute;right:0}
</style>
</head>
<body>
<div class="body">
<div class="right">
right edge
</div>
<div class="box">asdfsadfsdafsdafsdaf,
sdfsdfsdfsdfsdfsd
sadfsd
sdf
sadf
sdf
dsf
sdfdsfsdfsdfsdfsdfsdaf
sdffsdf</div>
</body>
</html>
Related
I am new to HTML , CSS and I want to add two vertical lines on the both sides (left and right) of the html page.
A bit of help would be very much appreciated...Thanks very much indeed
Edit: the code has now been added
<!doctype html>
<html lang="en">
<head>
<style>
#button1{
width: 300px;
height: 40px;
}
#button2{
width: 300px;
height: 40px;
}
#link1{
font-size: 33px;}
#pic1 {
position:fixed;
left:30%;
top:30%;
margin-left:-382px /*half the width*/
margin-top:-370px /*half the height*/
}
</style>
<meta charset="utf-8">
<meta name="Homepage" content="Starting page for the survey website ">
<title> Survey HomePage</title>
</head>
<body>
<img src="kingstonunilogo.jpg" alt="uni logo" style="width:180px;height:160px">
<button type="button home-button" id="button1" >Home</button>
<button type="button contact-button" id="button2">Contact Us</button>
LogIn
<img src="homepagepic.jpg" alt="homepagepic" id="pic1" style="width:400px;height:350px">
</body>
</html>
You can try creating a div container in your body and setting the borders, something along these lines:
<body style="width:100%">
//you can set the div-width to 100% too, I'm setting it to 95% so you can see it.//
<div style="width:95%;border-left:1px solid #000;border-right:1px solid #000;">
Page contents go here
</div>
</body>
Preview: http://jsfiddle.net/pbj4xxh0/
I'm trying to make a website with Twitter Bootstrap, that is basically a single, vertically centered column on top of a background container div (so I can color / image the background on the edges).
I keep having this issue where I can get the background div to fill the enter screen, but the centered column div sets its height to the size of the content. I want it to always, at least, be as tall as the screen size. I thought min-height would do this, but it does not.
Here's what it looks like right now: (it's just a test page for the layout)
Here is the code for it:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Baileysaurus -- Dinosaurs && Logic in your face!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<LINK href="header.css" rel="stylesheet" type="text/css">
<LINK href="forum.css" rel="stylesheet" type="text/css">
<!-- jQuery (Bootstrap requires jQuery!) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap -->
<LINK href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"
media="screen">
<!-- A file of PHP utility functions -->
<?php
include 'functions.php';
?>
</head>
<body>
<!-- Bootstrap -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<div id='background' class='row-fluid'>
<div class='span12'>
<div id='site-column' class='row-fluid span10 offset1 column-wrap'>
<img src="/PipeDog.jpg" alt="ARGUMENT INVALID" />
<hr>
<p>
Put a blog here!
</p>
</div> <!-- END of outermost span12 div -->
</div> <!-- END - "site-column" div -->
</div> <!-- END - "background" div -->
</body>
</html>
CSS
html, body
{
height: 100%;
margin: 0;
}
#background
{
position: absolute;
top:0;
bottom: 0;
min-height: 100%;
min-width: 100%;
background-color: Gainsboro;
}
#site-column
{
top: 0;
bottom: 0;
min-height: 100%;
border-left: 2px solid;
border-right: 2px solid;
background-color: white;
}
.column-wrap
{
overflow: hidden;
}
I'm trying to get the white column in that photo to stretch to the bottom of the screen, at least, even if the content is not that long.
Anyone have any ideas on what I'm missing?
You should also be able to add the following CSS:
.span12 {
height:100%;
}
Try to make your outer <div> to extend to the bottom of the page.
So try this in the css:
.row-fluid
{
position:absolute;
bottom:0;
}
And I'm not sure but you may have to move your
<script src="bootstrap/js/bootstrap.min.js"></script>
line to the <head> part of your page.
I'm trying to get the Google Map div fixed so it becomes always visible, but somehow the style property "position:fixed" is not working. The code is the following:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="layout" content="main" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
Some script
</script>
</head>
<body onload="initialize()">
<div class="nav">
First div
</div>
<div id="artistList">
Second div
</div>
<div id="map_canvas" style="position: fixed; right: 0px; top: 0px; width: 100%; height: 100%">
Map div
</div>
</body>
</html>
Any help? Thanks very much
This will solve it:
<div id="fixed" style="position:fixed; top:0">
<div id="map_canvas" style="width:100%; height:100%">
[map content goes here]
</div>
</div>
You should clean up your code a little to make things more visible. At first you should move the css style settings from your map_canvas into your css section in the html head. What remains is a clean <div id="map_canvas"></div>. Now let's head to your CSS section in the html head. Try it like this:
<style type="text/css">
html {}
body {margin: 0px; padding: 10px }
#map_canvas {
position: fixed;
right: 0;
top: 0;
width: 90%;
height: 90%;
border:1px solid #f00;
margin:10px;
}
</style>
I removed the height:100%; from html and body. I reduced to sizes of the canvas from 100% to 90% and gave it a red border and a margin of 10px to make things more clear. The div is set in the upper right corner now and is fixed. I tested it on FF, Chrome, Safari and IE.
But now one little question... Does it make sense to make the canvas 100% wide and high?! The map_canvas would hide everything else in your html...?
Najeeb's solution did not work for me.
Changing the map elements css (from position:absolute to position:fixed) after the "tilesloaded" map event seemed to work.
I'm not sure if this is some css issue I've never run into before, or it's an issue with using the new claro theme in dojo 1.5. But right now, what CSS says is 100% sizing doesn't include the borders of my BorderContainer:
css:
html,body, .dijitBorderContainer {
width: 100%;
height: 100%;
}
h1 {
margin-top: 0em;
}
#sidebar {
width: 300px;
}
and html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>stuff</title>
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/resources/dojo.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dijit/themes/claro/claro.css";
#import "css/application.css";
</style>
<script type="text/javascript">
var djConfig = {
isDebug: false,
parseOnLoad: true,
baseUrl: './',
};
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.require('dijit.layout.BorderContainer');
</script>
</head>
<body class="claro">
<div dojoType="dijit.layout.BorderContainer" liveSplitters="true"></div>
</body>
And with this setup, the bordercontainer is just slightly too large for the window and brings up the scroll bars. All that doesn't fit is the border. Any ideas?
I don't know anything about Dojo but what you are experiencing sounds like standard CSS behaviour. CSS width refers to the width of the element's content only, excluding margin, padding and border. Have a look at this page on the CSS box model.
Here is my HTML.
<html>
<head>
<style type="text/css">
.button {
background: url('images/1.png');
}
.button:hover {
background: url('images/2.jpg');
}
</style>
</head>
<body>
<img class="button" src="images/1.png">
</body>
</html>
The files are present but it still doesn't work. What am I doing wrong?
The standard method is CSS:
input.mybutton { background-image: url('button.jpeg'); }
input.mybutton:hover { background-image: url('selectedButton.jpeg'); }
Using JavaScript, you can overwrite the .src of an image:
imageElement.src = 'selectedButton.jpeg';
<img src="button.jpeg" onmouseover="this.src='selectedButton.jpeg'" onmouseout="this.src='button.jpeg'"/>
Probably the best way is to use css and set the background image of the element based on the hover property.
If you can use jQuery in your application then it will be fairly simple.On mouseover event of the button just swap the background image.Following sample code does it for a div element :-
<div class="title"/>
$(document).ready(function () {
$('div.title').mouseover(function () {
$(this).css("background-image", "url('Forest Flowers.jpg')");
});
});
Use javascript to do this. Use onmouseover and onmouseout events to handle this.
If you can use jQuery then you can use the hover event.
$("img.button").hover(function(){
$(this).attr("src","path of image on mouse over");
},
function(){
$(this).attr("src","path of image on mouse out");
});
Use a tag to wrap the image.
<hmtl>
<head>
<style type="text/css">
a.button{
background: url('images/1.png');
display:block;
width: *width*;
height: *height*;
}
a.button:hover{
background: url('images/2.jpg');
}
</style>
</head>
<body>
<a class="button"></a>
</body>
Edit: I just realize that you are trying to replace the background image under your image....
one option that you have is to use javascript. but if you want to use only CSS and alse want to use this image as control, the above edited solution is good.
I used an h1 tag. I have tested the following code in IE8,Firefox,GoogleChrome and it is working, we just need to add the doctype correctly:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.button {
background: url('images/1.jpg');
height: 400px;
width: 400px;
}
.button:hover {
background: url('images/2.jpg');
}
</style>
</head>
<body>
<h1 class="button"></h1>
</body>
</html>
Images don't generally have background images. Use a different element, and non-relative paths would probably be a good idea, too.
Buttons do not have a hover state. You might want to try A (link) tags, and set the background there.