I like how Facebook keeps that toolbar on the bottom of the page.
Does that require cross-browser ninja skills?
Their JavaScript/CSS files are huge so I am having a hard time narrowing down the implementation (for learning purposes).
You can achieve the effect with CSS.
Here's a basic example. No, it doesn't require cross-browser ninja skillz. =)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Facebook Bar</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#page {
margin: 10px;
overflow: auto;
height: 93%;
}
#bottom {
width: 100%;
background: #18f8f8;
text-align: center;
}
</style>
</head>
<body>
<div id="page">
Other stuff on page
</div>
<div id="bottom">Bottom stuff goes here</div>
</body>
</html>
The best is to install Firebug and see how they did it. When I see interesting things on the web, Firebug is the best way to analyze it's HTML structure, attached CSS and you can even directly modify the CSS/HTML structure to see how it changes. Everything you see on a website can be simply read. Remember, the source (HTML, CSS, JavaScript) gets delivered with it :)
That solution doesn't work well for pages that have content extending beyond the bottom of the browser window.
Try something like this instead:
<div style="display: block;
position: fixed;
text-align: center;
z-index:1000;
bottom: 0;
left: 0;
width: 100%;
color: #999999;
clear: both;
height: 15px;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #b5b6b5;
background-repeat: repeat-x;
border-right-style: solid;
border-left-style: solid;
border-right-width: 1px;
border-left-width: 1px;
border-right-color: #b5b6b5;
border-left-color: #b5b6b5;
background-color: #e7e7e7;"></div>
Related
I have no experience with web design and I am trying desperately to create a simple web page that will contain a D3.js graph (a sweet framework to create graphs and dashboards) but I have a very big problem with positioning elements.
I am trying to have a page that I represented like this:
The graph data will be generated by a back-end process interacting with some ajax code.
I know it's simple but I have a real problem with positions, margins, padding etc.
What I tried so far is this:
<!DOCTYPE html>
</html>
<head>
<title>E-Commerce data - Interactive Map</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="{% static 'interactive_map.css' %}?v=00001">
</head>
<body bgcolor="#170061">
<div id="graph_div">
// The graph will be here
</div>
<div id="pannel_div">
// The buttons to controle the graph will be here
</div>
</body>
</html>
And a css file that look like this:
div#graph_div
{
border-radius: 2px;
vertical-align: middle;
position: relative;
width: 40%;
height: 80%;
top: 20px;
bottom: 20px;
right: 180px;
left: 20px;
background-color: #ffffff;
}
div#panel_div
{
border-radius: 2px;
vertical-align: middle;
position: relative;
width: 40%;
height: 80%;
top: 20px;
bottom: 180px;
right: 20px;
left: 20px;
background-color: #ffffff;
}
Clearly this won't work ( I know ). Can anybody help me with this?
Thank you in advance
Here's an example of what you could start doing: https://jsfiddle.net/Le232kar/
CSS looks like this:
body, html {
margin:0;
padding:0;
height:100%;
}
#topbar {
width:100%;
height:100px;
background:grey;
margin:0;
}
#graph_div {
width:60%;
height:100%;
float:left;
background:blue;
}
#panel_div {
width:40%;
float:right;
background:darkgrey;
height:100%;
}
Good luck.
So, I am trying to do a little browser game with Javascript (jQuery). I have already fighting system and now I am trying to do movement system, so you can move around the world.
Let's say that I want to open map and go to town and then to shop. What is the best way to open MAP window and close all other windows, then open TOWN window and close MAP window, then open SHOP window and close TOWN window?
I tried something, but it feels a little bad.. Is this a good way to do it or not?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<style>
.shopBox {
width: 300px;
height: 100px;
border: 1px solid black;
display: none;
}
.mapBox {
width: 500px;
height: 500px;
border: 1px solid black;
display: none;
}
.button {
width: 50px;
height: auto;
border: 1px dashed black;
margin: 5px;
padding: 2px;
cursor: pointer;
}
.shop {
width: 50px;
height: 50px;
border: 1px solid black;
position: relative;
left: 50px;
top: 100px;
cursor: pointer;
}
</style>
<script>
$(document).ready(function(){
$("#exit").hide();
$("#mapBtn").click(function(){
$("#map").show();
$("#exit").show();
$("#shop").hide();
$("#mapBtn").hide();
});
$("#shopImg").click(function(){
$("#map").hide();
$("#shop").show();
$("#exit").show();
});
});
</script>
<div class="button" id="mapBtn">Map</div>
<div class="mapBox" id="map">
This is your map
<div class="shop" id="shopImg">Shop!!</div>
</div>
<div class="shopBox" id="shop">Welcome to my shop!</div>
</body>
</html>
The code you have written looks functional. I don't see any problems. The only issue you will encounter is when you start introducing more details and complexity.
Just make sure you start making these into functions with annotations otherwise you will get lost.
An aside, consider the Unity Development Platform or Flash or consider using libraries which will save you a great deal of time: for example. Crafty
Otherwise, you'll learn as you'll continue coding. Focus on functionality and then optimization. Doing both with limited experience can be counterproductive.
Cheeers
you can select multiple elements at the same time like this
$("#mapBtn").click(function(){
$("#map, #exit").show();
$("#shop, #mapBtn").hide();
});
that will at least save you some space.
I am very new to Javascript. I have been looking into using Javascript to edit css style properties. I have searched the web and looked at a lot of different problems. Even with all of that, it is probably my inexperience as to why I can't figure out what is wrong with my code. What adds to the problem is that there are so many ways to do this. Anyway here are the specifics.
What I want it to do:
When someone clicks on the link in the code, I want the hidden DIV (which will just be near the top of my waiting to be called on) to have its visibility switched to visible so as to create a new layer on the page.
My code:
<html>
<head>
<script language="javascript">
function newwindow() {
var showme = document.getelementbyid("testing");
showme.style.visibility = "visible";
}
</script>
</head>
<body>
Show me my hidden layer
<div id="testing" style="position: absolute; visibility: hidden; left: 50%; top: 50%;
border: 1px solid darkblue; width: 400px; height: 300px; line-height: 300px;
text-align: center; vertical-align: middle;
margin-top: -150px; margin-left: -200px; background: lightgray">HELLO!!!</div>
</body>
</html>
Now, I know there are a lot of ways to do this. But can someone show me what to tweak in the code I gave to make the way I am writing this work? Thanks so much for your time.
It is document.getElementById not document.getelementbyid
Working Demo
use this code
<html>
<head>
<script language="javascript">
function newwindow() {
var showme = document.getElementById("testing");
showme.style.visibility = "visible";
}
</script>
</head>
<body>
Show me my hidden layer
<div id="testing" style="position: absolute; visibility: hidden; left: 50%; top: 50%;
border: 1px solid darkblue; width: 400px; height: 300px; line-height: 300px;
text-align: center; vertical-align: middle;
margin-top: -150px; margin-left: -200px; background: lightgray">HELLO!!!</div>
</body>
</html>
I try to achieve something like the Facebook does when you type #<NAME_OF_A_FRIEND> in a reply. After you choose a friend, the name of that friend is highlighted with a blueish background, so you know it's a separate entity in that text.
I've "inspect element"-ed that textarea and there is no div placed on top of the textarea.
Can anyone give me a clue about how that is done ?
I have a completely different approach to this issue using HTML5. I use a div with contentEditable="true" instead of a textarea (wich I was using until I got stuck with the same problem you had).
Then if I want to change the background color of a specified part I just wrapp that text with a span.
I am not 100% sure if it is the correct approach as I am a newbie in HTML5 but it works fine in all the browsers I have tested it (Firefox 15.0.1 , Chrome 22.0.1229.79 and IE8).
Hope it helps
See this example here. I used only CSS and HTML... The JS is very more complex for now. I don't know exactly what you expect.
HTML:
<div id="textback">
<div id="backmodel"></div>
</div>
<textarea id="textarea">Hey Nicolae, it is just a test!</textarea>
CSS:
#textarea {
background: transparent;
border: 1px #ddd solid;
position: absolute;
top: 5px;
left: 5px;
width: 400px;
height: 120px;
font: 9pt Consolas;
}
#backmodel {
position: absolute;
top: 7px;
left: 32px;
background-color: #D8DFEA;
width: 53px;
height: 9pt;
}
The textarea has background-color: transparent; the extra div you're looking for is behind it, with the same text and font as the textarea, but different colours.
A short example to illustrate the point:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
* { font-family: sans-serif; font-size: 10pt; font-weight: normal; }
.wrapper { position: relative; width: 400px; height: 400px; outline: solid 1px #666; }
.wrapper > * { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; padding: 0; }
.highlighter { background-color: #fff; color: #fff; }
.highlight { background-color: #9ff; color: #9ff; }
textarea { background-color: transparent; border: 0; }
</style>
</head>
<body>
<div class="wrapper">
<div class="highlighter">
This <span class="highlight">is a</span> demonstration.
</div>
<textarea>
This is a demonstration.
</textarea>
</div>
</body>
</html>
Of course, this does not update the special div as you type into the textarea, you need a lot of JavaScript for that.
hi you can check this jquery autosuggest plugin similar to facebook .I have used this to achive the same functionality you required
http://www.devthought.com/2008/01/12/textboxlist-meets-autocompletion/
I would suggest changing the text you want to assign a background inline to to display: inline-block; background-color: #YOURCOLOR;. This should do exactly what you want it to do without all the complexities of some of the above answers.
Ultimately your CSS should look something like this:
.name {display: inline-block; background-color: purple;}
Then add some sort of event listener in jQuery (not sure how you're identifying that it is a name) and inside that conditional put:
$(yourNameSelectorGoesHere).addClass(".name");
This is a followup to this post (www.stackoverflow.com/questions/1389029/two-divs-with-unknown-width-and-dynamic-scaling).
Here's the illustrated requirement (/www.creativesplash.net/images/2.gif). Here's what I've achieved so far.
On browser resize 2 things should happen:
The tabs should shift to below (already achieved)
The preferences should take up 100% width + a border should be applied separating itself from the tabs! This is where I need your help (either a pure css solution or a javascript solution)!!
EDIT: A prototype solution would be great!
Thanks in advance for your help!
Vasanth
JavaScript? Pshaw, I think we can manage that in simple CSS, don't you?
Here's a proof of concept. It relies on hiding the second border behind the tab content when it fits on one line. Finishing off the styling and making sure it lines up with your particular choice of fonts is left as an exercise for someone less lazy.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<title> tabs test </title>
<style type="text/css">
#nav { border-bottom: 1px solid silver; }
#prefs { float: right; padding: 0.7em 0; }
#tabs { float: left; padding: 0.5em 0; white-space: nowrap; }
#tabs a {
display:-moz-inline-stack; display:inline-block;
margin-right: 0.7em; padding: 0.3em 0;
width: 7em; text-align: center; background: silver;
}
#tabs a.selected {
position: relative; z-index: 2;
background: white; border-width: 1px; border-style: solid; border-color: black black white;
}
#content { clear: right; border-top: 1px solid silver; }
#content .wrap {
clear: left; position: relative; z-index: 1; top: -0.6em;
background: white; border: solid black 1px;
padding: 1em;
}
</style>
</head><body>
<div id="nav">
Sample links |
blah
</div>
<div id="prefs">
Preference 1 | Preference 2
</div>
<div id="tabs">
Active Tab
Tab 1
Tab 2
Tab 3
</div>
<div id="content"><div class="wrap">
Lorem ipsum dolor sit amet blah blah blah.
</div></div>
</body></html>
This uses inline-blocks to stop the tabs wrapping when they don't fit on the screen on their own. You might or might not want that, I don't know. If not, change that line to a simple float.
I don´t know about css only, but in javascript you can get the width of the two ul's, compare it to the width of the parent and if bigger, add a new style to your preferences ul, setting it to 100% width and adding the bottom border.
Quick jQuery / javascript solution (not tested...):
$(document).ready(function() {
$('.ArticleTabs').foreach(function(){
if ( ($(this).find('.Preferences').width() + $(this).find('.tabs').width()) > $(this).width() ) {
$(this).find('.tabs').addClass('underlined_class');
}
});
});
You will need to add jQuery before this part of javascript. For example from Google (if you don´t host it yourself):
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
The border issue is because there is a background on the UL. When the LIs wrap, you get the background wrapping as well.
It seems that you want something like this.
#Features_Row{
border-bottom:1px solid #D2E0C0;
padding-bottom:3px;
}