Can someone explain how to code the feedback button seen on foursquare.com? It's a vertical button on the side of the webpage and it opens a new window and dims out the background. I've seen this on some other sites as well. Thanks in advance.
How they did it...
The button is provided through the http://getsatisfaction.com service. This service is similar to other services like http://sharethis.com which exist to minimize the programming required to create a fully-rounded website. Essentially you setup an account (I'm assuming...) and they provide you with a javascript code-block that you include in your projects, which causes the vertical-button to appear on your site.
Do it yourself...
This wouldn't be that difficult the do yourself. I quickly worked up a jQuery example. Suppose we have the following markup:
<div id="feedback">
<p>Here is where you would have your form.</p>
<div class="toggler">?</div>
</div>
.toggler will be our button in this case. We'll want to place it outside of the feedback box with some css, and also place the feedback box with some css too:
#feedback { position:absolute; left:0; width:200px; padding:10px;
background:red; color:white; }
.toggler { width:25px; height:50%; color:white; background:blue;
text-align:center; position:absolute; top:25%;
right:-25px; cursor:pointer }
This could be cleaned up a bit. But now that we have our elements, we can add some toggle-logic with jQuery:
$(function(){
// When the user clicks on .toggler
$(".toggler").click(function(e){
// Get a reference to our feedback box
var feedback = $("#feedback");
// If it's in the process of being opened (or is opened)
if ( $(feedback).hasClass("opened") ) {
// Close it
$(feedback)
.removeClass("opened")
.animate({"left":0}, 1000);
} else {
// Else, Open it
$(feedback)
.addClass("opened")
.animate({"left":-$(feedback).outerWidth()}, 1000);
}
});
});
Online demo: http://jsbin.com/iyenu4
Have a look at jquery and the jquery UI javascript library for implementing those kinds of interavtive features.
Here is an example: http://wpaoli.building58.com/2009/08/jquery-animated-feedback-tab-thingy/
Looks like they're using the Lift modal dialog for the popup and background dimming.
The button is probably positioned using CSS fixed positioning. Fixed positioning means that it remains in the same place on the screen, not on the page. This allows it to 'float" over the text even when you scroll.
The popup dialogue is the same. Clicking on the button toggles the display CSS property between none and something other than none, probably block.
The gray background, I'd guess is created with a big fixed position <div> with width:100% and height:100% and some opacity.
Try this:
HTML
Save this as example.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" xml:lang="en" lang="en" >
<head>
<title>Example</title>
<link rel="stylesheet" href="example.css" type="text/css" />
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<h1>Example</h1>
<a id="clickhere">Click here for the popup!</a>
<div id="main">
<p>
Lorem ipsum dolor sit amet
</p>
</div>
<form id="popup" class="dialog" action="#">
<div id="popupbackground"></div>
<div class="dialog">
<h2>Popup!</h2>
<a id="closepopup">Click here to close this dialog</a>
</div>
</form>
</body>
</html>
CSS
Save this as example.css:
html {
height:100%;
}
body {
height:100%;
}
form.dialog {
height:100%;
width:100%;
position:fixed;
top:0px;
left:0px;
text-align:center;
padding-top:10%;
display:none;
}
form.dialog div.dialog {
width:400px;
background-color:gray;
margin:auto;
text-align:left;
border:2px solid black;
padding:10px;
position:relative;
z-index:10;
}
form.dialog label {
display:block;
}
form.dialog input {
width:99%;
}
form.dialog textarea {
width:99%;
height:200px;
}
a {
cursor:pointer;
text-decoration:underline;
font-weight:bold;
}
#popup #popupbackground {
background:gray;
opacity:0.4;
filter:alpha(opacity=40);
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
}
JavaScript
Save this as example.js:
window.onload = function() {
document.getElementById("clickhere").onclick = function() {
document.getElementById("popup").style.display = "block";
};
document.getElementById("closepopup").onclick = function() {
document.getElementById("popup").style.display = "none";
};
};
The idea is that the <form> consumes the whole screen, because of the width
and height properties in the form.dialog rule. Since that rule also specifies a fixed position, the user can never scroll away from the contents of this <form>. We can then center the <div class="dialog"> using a margin:auto, so it floats, centered on the page. The <div id="popupbackground"></div> provides a faded gray backdrop.
Related
So I was just testing phone functionality for my site. It operates as expected (ie the logo is at the top), but when clicked through as a link from instagram it displays as below. Is it something to do with the bar that is displayed in the link from instagram?
Jsfiddle
html
<div class="Rad_title_container">
<div class="Rad_title">
<svg>
</svg>
</div>
</div>
css
.Rad_title_container{
width:100%;
}
.Rad_title {
padding-top:2%;
padding-left:17.5%;
z-index:3;
position:fixed;
width:65%;
pointer-events:none;
}
It seems it didn't like position:fixed. I had to add a max height as well because it was doing something funky like expanding the height to 200%. No idea what was going on.
.Rad_title_container{
position:absolute;
width:100%;
z-index:3;
}
.Rad_title {
padding-top:2%;
position:relative;
width:65%;
pointer-events:none;
text-align:center;
margin:auto;
max-height:10vh;
overflow-y:none;
}
I've got a button with a search label. The idea is that when you click the button (and put it in the active state) my search field which is put on display:none becomes visible. My current setup doesn't seem to work however. I've created a jsfiddle containing my problem. Since this already is in ModX i cant paste the exact code but if clicking the button shows the text it yields the same result.
<div id="header">
<div class="search_function">[[$base.search-tpl]]</div>
<button class="search_button">Search</button>
#header label{
display:none;
}
#header input{
width:88%;
height:30px;
float:left;
margin:0px;
padding:0 0 0 10%;
text-align:center;
border-radius:0px;
}
#header button{
width:12%;
height:30px;
margin:0px;
padding:0px;
background-image:url('../images/transparent_search_icon30x30.png');
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:center;
}
.search_button:active > .search_function{
display:all;
}
.search_function{
display:none;
}
Ok, first include jQuery library in the <head> section of your document e.g.
Google CDN version
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
or download the compressed, production jQuery 1.11.0 and put it in your root folder then include it like this
<script src="jquery-1.11.0.min.js"></script>
then add below script just before the </body> tag
<script>
(function($) {
$('.search_button').click(function() {
if($('.search_function').css('display') === 'none') {
$('.search_function').slideToggle(350);
}
});
})(jQuery);
</script>
Here's a FIDDLE
This is a login form that I am creating and it already has an image (some logo). I would like to add some background image for the same page to make it beautiful. Unfortunately my CSS does not help me to do it. What should I do to add a background image to my web page when there is already an image
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Login
</title>
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body >
<header >
<h1>Loan Management System </h1>
</header>
<!--This is the image -->
<img src="Images/logo_large.jpg" height="200px" width="200px" title="Logo" class="logo">
<form>
<label>Username</label>
<input type="text" name="username"/>
<label>Password</label>
<input type="password" name="password"/>
<button type="submit" name="login">Login</button>
</form>
</body>
</html>
CSS
header
{
position:absolute;
font-size:13px;
color:#000040;
text-shadow:5px 5px 5px #CCCCD9;
margin-top:80px;
margin-left:280px;
}
body
{
position:relative;
font-family:Georgia,serif;
background-color:#A52A2A;
background-image:url(Images/login2.jpg);
}
.logo
{
position:absolute;
display:block;
padding:5px;
}
form
{
position:absolute;
width:300px;
height:300px;
border:5px solid #194775;
border-radius:20px;
margin-top:161px;
margin-left:362px;
box-shadow:2px 2px 2px #194775;
}
label,input
{
display:block;
margin-top:25px;
margin-left:55px;
}
label
{
font-weight:700;
}
input
{
width:200px;
height:2em;
border:2px solid #036;
border-radius:10px;
}
input:hover
{
border-radius:10px;
border-color:#FF8A00;
}
input:focus
{
background-color:#DBDBFF;
}
button
{
display:block;
margin-top:25px;
margin-left:55px;
width:90px;
height:40px;
color:#FFF;
border:2px solid #000;
border-radius:10px;
background-color:#243D91;
}
button:hover
{
background-color:#0FCCF0;
border-color:#003D91;
}
I'm posting this as an "answer" because it's simply too long for a comment. As I mentioned in my comments, css paths to urls are parsed relative to the directory where the css is stored rather than the directory of the page that includes it. As an example:
You have a website with a root and 2 subfolders, CSS and Images. Your directory structure might look like:
mypage.html
myotherpage.html
CSS\styles.css
CSS\layout.css
Images\login.jpg
Images\login2.jpg
If mypage.html has a reference link to styles.css, then any url images that are included from styles.css will need to be referenced from the CSS directory.
background-image: url(Images/login2.jpg);
/* This fails because there is no CSS\Images directory */
background-image: url(../Images/login2.jpg);
/* This works because that is the natural path to the Images directory from CSS */
To avoid this confusion, I prefer to use absolute paths in my css whenever possible, but this becomes understandably difficult when you have a potential to cross domain or protocol boundaries. If you have multiple domains pointing to the same site folder, then you'll have a style reference from myfirstsite.com to mysecondsite.com and this may be inappropriate (particularly if branding is an issue). You may also have an https part of the site that would then have a reference to a non-https version of the site which would create ssl errors/alerts.
Well, the obvious suspect would be that you check the path to the image.. If thats alright then you might want to have a look at the z-index property of CSS. It deals with the way images are ordered in vertical space..You can read about it here ..In your case the body background would be at the back(z-index:0) and then the logo at the front(z-index:1) .
I think as mentioned on the comments. You should check your path to see if it renders.
Check out my Fiddle
body{
position:relative;
font-family:Georgia,serif;
/* I have used background-color property and it gets applied, but I really do not want it*/
background-color:brown;
/* Here is my background image.But it is not applied in the page */
background-image:url("https://mozorg.cdn.mozilla.net/media/img/firefox/os/bg/1400/birthday.jpg");
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
How can I change div bg color From when I mouse over the another div...??
<!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>Untitled Document</title>
<style type="text/css">
.Div1{width:100px; height:100px; background-color:red; float:left; margin-right:30px; }
.Div2{width:100px; height:100px; background-color:#00C; float:left }
</style>
</head>
<body>
<div class="Div1">asdlsakd</div>
<div class="Div2">asdsa</div>
</body>
</html>
I want to change color of div1 to yellow when i mouse over the div2 how can I???
This is my fiddle link : http://jsfiddle.net/anupkaranjkar/S5Yu5/
jQuery way:
Try to use jQuery .show(); and .hide(); function.
HTML:
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
CSS:
#div1{
width:100px;
height:100px;
background-color:red;
}
#div2{
width:100px;
height:100px;
background-color:blue;
display:none;
}
jQuery:
$("#div1").hover(function() {
$("#div2").show();
},
function() {
$("#div2").hide();
});
Don't forget to link to jquery.min.js.
Add <script src="http://code.jquery.com/jquery-latest.min.js"></script> to your <head></head> tag. Otherwise it won't work.
Have a look at this fiddle
EDIT:
Pure CSS:
Put a container around your divs like this:
<div id="content">
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
</div>
after that you can use :first-child and :hover in this way:
//styling your divs
#div1{
width:100px;
height:100px;
background-color:red;
}
#div2{
width:100px;
height:100px;
background-color:blue;
display:none;
}
//hover function
#content > div:first-child{
display:block;
}
#content > div:hover + div {
display:block;
}
If you want to see it in practise have a look at this demo
As the users above state, you should use :hover to achieve that. However they gave you an example what to do when you hover the div itself.
Your question was how to change the color if you went Hover the other div, so heres the code, this however implies that the second div is nested into the first div:
Div1:hover Div2 {
background-color: yellow;
}
Here is an example which is achieved with JQuery where it doesn't matter if they are nested or not:
var defaultBackground = $("div#two").css("background-color");
$( "div#one" )
.mouseover(function() {
$("div#two").css("background-color", "yellow");
})
.mouseout(function() {
$("div#two").css("background-color", defaultBackground);
});
http://jsfiddle.net/d58Rb/
To match your HTML code, i updated the JSFiddle:
http://jsfiddle.net/S5Yu5/1/
Just in case anyone else ever needs this solution (I don't see it anywhere)
This is possible using CSS/HTML, but only if the divs are directly below eachother.
#Div1:hover + Div2 {
background-color: yellow;
}
Use Like this:
<div id="mydiv" style="width:200px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';">
Hello World!
</div>
What you need is :hover
Div1:hover {
background-color:yellow;
}
You can do it simply with css
Div1:hover {
background-color:yellow;
}
OR
with JQuery
$("div").hover(function() { // mouseenter
$(this).addClass("hover");
}, function() { // mouseleave
$(this).removeClass("hover");
});
css
.hover {
background-color:yellow;
}
Select and style every element that are placed immediately after elements:
.first:hover +div{background:red;}
<div class="first">
some
</div>
<div>other</div>
Example2
.first:hover div{background:red;}
.first{border:1px solid blue;width:100px;height:100px}
<div class="first">
<div>other</div>
</div>
No need to make a div2 to achive this.
Div1{width:100px; height:100px; background-color:red; }
Div1:hover{width:100px; height:100px; background-color:blue; }
Just apply :hover pseudo selector to your existing div1 and you will get the hover effect.
So I have used - http://www.roundedcornr.com/ - to generate some rounded corners via CSS. Great - works fine, no probs.
However! I am now really stuck trying to do "hover" rounded corners. I basically got the generator to generate the corners in a lighter color (for the hover) and now have no idea how to implement the lighter hover ?
Does anyone know how to do this in CSS/HTML only ? It should be 100% possible I am just a little unsure.
I only gave the website a short peak and basically they provide you with a couple of PNGs. Not bad, however not the best solution in all cases. Since the current CSS standard doesn't support rounded corners and beside Firefox/Mozilla no one understands this:
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
I think you are stuck with only one option. Choose a constant height and width for your element and create ONE png out of it. You can than create something like this
span{
display:block;
width:100px; height:100px;
background-image:url("nice.png");
}
span:hover{
background-image:url("nice_hover.png");
}
Why do I think there is no other way? Because you only can effectively change the attributes of one element at a time with the "hover" effect. Hopefully CSS3 will give us rounded corners... However if you make use of JavaScript this is a completely different story..
Update
I thought about it and I probably flopped in presenting you all the available options. Here is a working solution for IE7+, FF, Opera that achieves exactly what you are looking for. Just replace the color with some background-image. Sorry!
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Floating</title>
<style type="text/css">
.content p{
position:relative;
height:100px;
width:400px;
border:1px solid black;
}
.content p span{
position:absolute;
}
.content p .span1{
left:0;
top:0;
}
.content p .span2{
right:0;
top:0;
}
.content p .span3{
left:0;
bottom:0;
}
.content p .span4{
right:0;
bottom:0;
}
.content p:hover .span1{
background-color:red;
}
.content p:hover .span2{
background-color:blue;
}
.content p:hover .span3{
background-color:green;
}
.content p:hover .span4{
background-color:yellow;
}
</style>
<body>
<div class="content">
<p>
<span class="span1">1</span>
<span class="span2">2</span>
<span class="span3">3</span>
<span class="span4">4</span>
</p>
</div>
</body>
</html>
I would recommend doing this in JavaScript, this will then allow for variable sized rounded corner boxes.