I am trying to put together a web page that will contain some charts, as well as some RangeSlider widgets to control the data ranges and granularity for the charts. I have created a few elements to hold various navigation items, and am at the point where I want to place my RangeSliders. Everything is working except that when I click on the shaded bar between the the handles, to move both handles left or right, the handles jump to the right-hand end of the slider bar, and stay there.
I am pretty sure it's due to an incompatibility between my div's absolute/relative positioning, and the slider components, but I'm going nuts trying to get it to work. If I just place the slider with none of my div styles, the slider works, but isn't where I want it.
The entire file is listed below. It's only about 80 lines, including my styling info. I attached it to the divs, rather than drawing it from an external .css file, for simplicity. To try it out, you will need to adjust the paths to the dojo components.
Someone with more expetise than I have can probably scope it out in a jiffy, but I can't seem to reconcile the dojo requirements with my own.
Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Errlog Chart for Single Host</title>
<style type="text/css">
#import "1.7.src/dojo/resources/dojo.css";
#import "1.7.src/dijit/themes/tundra/tundra.css";
#import "1.7.src/dijit/themes/dijit.css";
#import "1.7.src/dijit/tests/css/dijitTests.css";
#import "1.7.src/dojox/form/resources/RangeSlider.css";
</style>
<script type="text/javascript" src="1.7.src/dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojox.form.RangeSlider");
dojo.require("dijit.form.HorizontalRule");
dojo.require("dijit.form.HorizontalRuleLabels");
</script>
</head>
<body class="tundra">
<div id='header' style="width:100%;
background: #FC8;
position: absolute;
height: 30px;
top: 0;">header</div>
<div id='middle' style="width:100%;
background: #8FC;
position: absolute;
top: 30px;
bottom: 30px;">
<div id='left' style="background: #C8F;
position: absolute;
left: 0;
top: 0;
width: 25%;
height: 100%;">
</div>
<div id='right' style="background: #CF8;
position: absolute;
left: 25%;
top: 0;
width: 75%;
height: 100%;">
<div id='charts' style="background: #DF7;
position: absolute;
width: 100%;
top:0;
height:60%;">
CHARTS GO HERE
</div>
<div id='sliders' style="background: #BF9;
position: absolute;
width: 100%;
bottom:0;
height:40%;">
SLIDERS GO HERE
<div
id="hrSlider"
discreteValues="11"
onChange="dojo.byId('minValue').value=dojo.number.format(arguments[0][0]/100,{places:1,pattern:'#%'});dojo.byId('maxValue').value=dojo.number.format(arguments[0][1]/100,{places:1,pattern:'#%'});"
value="20,80"
intermediateChanges="true"
style="width:500px;"
dojoType="dojox.form.HorizontalRangeSlider">
<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="11" constraints="{pattern:'#.00%'}"></ol>
<div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=11 style="height:10px;margin-bottom:-5px;"></div>
</div>
Horizontal Slider Min Value:<input readonly id="minValue" size="10" value="20.0%"/><br/>
Horizontal Slider Max Value:<input readonly id="maxValue" size="10" value="80.0%"/><br/>
</div>
</div>
</div>
<div id='footer' style="width:100%;
background: #8CF;
position: absolute;
height: 30px;
bottom: 0;">footer</div>
<script type="text/javascript">
</script>
</body>
</html>
If the difference between min and max is not evenly divisible by the discrete value, odd offsets appear. Since you don't set min max, they default to 0 and 100. That is 101 values, which is not evenly divisible by 11
Related
I've been working on pre-made web templates for almost a year now and I started off by making one of my own from scratch in PSD.
The Website can be located here:
http://gamelabs.webege.com/
My first time chopping a PSD to HTML/CSS as well. Nonetheless I got the thing to work on my laptop and I got it going until I viewed on multiple other browsers (Mac/iPad/Android) etc.
The whole thing got messed up and I have been searching for almost 3 days now still without a solution.
Have tried wrapping the website in margin: 0;, using other techniques like min/max-width, using positioning and still its aligned out, showing a bottom scroll on many browser screens but my own computer. Not going with overflow here because I can hide the scroll but the website is cut.
This is my first time going ahead with a website from scratch and I'm stuck at the ground level still.
I would also like to mention that I'm not planning to build a Responsive WD with grid.less or bootstrap, I just want the website to equally align on any browser window opened and be fluid in width.
An excerpt from my choppy CSS is as:
body {
margin: 0;
padding: 0;
background-color:#000;
}
#wrapper {
margin: 0 auto;
position:relative;
width: 100%;
}
#bottombar
{
left: 0px;
top: 750px;
position: absolute;
width: 100%;
height: 200px;
z-index:1;
background:url(images/foot.png) repeat-x;
}
#bottombarglow
{
left: 260px;
top: 733px;
position: absolute;
width: 800px;
height: 51px;
z-index:2;
background:url(images/bottombarglow.png);
}
#topbar
{
left: 0px;
top: 0px;
position: absolute;
width: 100%;
height: 82px;
z-index:3;
background:url(images/tb.png)repeat-x;
}
#blueline
{
left: 80px;
top: 648px;
position: absolute;
width: 1200px;
height: 2px;
z-index:4;
background:url(images/blueline.png);
}
#bullets
{
left: 100px;
top: 660px;
position: absolute;
width: 860px;
height: 87px;
z-index:5;
background:url(images/gallery_left.png);
}
#gallerybutton
{
left: 980px;
top: 670px;
position: absolute;
width: 257px;
height: 67px;
z-index:6;
background:url(images/gallery.png);
}
#menu
{
left: 840px;
top: 14px;
position: absolute;
width: 450px;
height: 54px;
z-index:7;
background:url(images/menu.png);
}
#footer
{
left: 156px;
top: 810px;
position: absolute;
z-index:8;
width: 400px;
height: 98px;
background:url(images/footer.png);
}
#logo
{
position: absolute;
width: 237px;
height: 156px;
z-index:9;
background:url(images/logo.png);
}
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">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Title and CSS -->
<title>Game Art Labs | Play for Fun</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="bootstrap.min.css">
<!-- Fav and touch icons -->
<link rel="icon" href="http://appbuzzsolutions.com/gal/favicon.png" type="image/png">
</head>
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="topbar"></div>
<div id="menu"></div>
<div id="bullets"></div>
<div id="gallerybutton"></div>
<div class="clearfix"></div>
<div id="blueline"></div>
<div id="bottombarglow"></div>
<div id="footer"></div>
<div id="bottombar"></div>
<!-- BG SLIDER -->
<!-- set the active class on whichever image you want to show up as the default
(otherwise this will be the last image) -->
<div id="slideshow">
<img src="images/bg1.png" alt="Slideshow Image 1"/>
<img src="images/bg2.png" alt="Slideshow Image 2" />
<img src="images/bg3.png" alt="Slideshow Image 3" />
<img src="images/bg4.png" alt="Slideshow Image 4" />
<img src="images/bg5.png" alt="Slideshow Image 5" />
<img src="images/bg6.png" alt="Slideshow Image 6" class="active" />
</div>
<!-- Java Starts -->
<script src="bootstrap.min.js"></script>
<script src="jquerry.js" type="text/javascript"></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 4000 );
});
</script>
<!-- Java Ends -->
</div>
</body>
</html>
This is starting to eat my nerves a bit I would confess. The mistake here must be very basic but my knowledge is too. Hope someone can help me around with us. Will reply to any query.
Advance Thanks!
PS: I was inspired from Kabam.com while designing this.
If your trying to actually define the width of the whole webpage window, you need to do something like this:
body {
width: 1600px; //You can set it to any width
padding: 0px;
background-color:#000;
}
Something simpler might be to add px after your measurements, otherwise, it won't know the unit of measurement, so it is void. Think of it like this. The world is about 250,000 long. Centimeters, or light years?
If your trying to change the margin of the page, you should do this:
body {
width: 1000px; //You can set it to any width
margin: auto; //Auto will automatically center the whole page
padding: 0px; //Don't forget px!
background-color:#000;
}
When flash banners from thirdparty are displayed they are overlapping my code:
test URL is: http://test.otwierac.pl/ (refresh page many times and you will see)
Code is:
<div style="width:100%">
<div id="banner">
<script>
<!--
var d = new Date();
r = escape(d.getTime()*Math.random());
document.writeln('<script src="http://tracking.novem.pl/rotator/CD31115/59&js=1&r='+r+'&keyword="><\/script>');
//-->
</script><div id='beacon_1' style='position: absolute; left: 0px; top: 0px; visibility: hidden;'><img src='http://test.otwierac.pl/reklamy/www/delivery/lg.php?bannerid=1&campaignid=1&zoneid=0&loc=http%3A%2F%2Fwww.test.otwierac.pl%2F&referer=http%3A%2F%2Ftest.otwierac.pl%2F&cb=6d0002d6e4' width='0' height='0' alt='' style='width: 0px; height: 0px;' /></div>
</div>
</div>
CSS code:
#banner
{
margin-top:10px;
width:950px;
margin:0 auto;
text-align:center;
}
How to fix this ? Banners should be centered and not overlapping my text.
There's a flash parameter
wmode: opaque
Should do the trick
EDIT
From the adobe website:
opaque - The SWF content is layered together with other HTML elements on the page. The SWF file is opaque and hides everything layered behind it on the page. This option reduces playback performance compared to wmode=window or wmode=direct.
EDITED:
Try:
#banner {
height: 315px;
margin-top: 10px;
text-align: center;
width: 950px;
}
The same question has been asked in this post, but the accepted answer doesn't help (me, at least).
I use dojox.mobile.View to display two views that look like this. Everything works fine, except the map container doesn't get displayed correctly. It is shown as a small box on the top page. Do I miss something on the layout file? Thank you!
<div id="view1" dojoType="dojox.mobile.View" selected="true">
<h1 dojoType="dojox.mobile.Heading">View 1</h1>
<ul dojoType="dojox.mobile.RoundRectList">
<li dojoType="dojox.mobile.ListItem" icon="images/icon1.png" moveTo="view2" transition="slide">Go To View 2
</li>
</ul>
</div>
<div id="view2" dojoType="dojox.mobile.View" style="height:100%">
<h1 dojoType="dojox.mobile.Heading" back="View 1" moveTo="view1">View 2</h1>
<div dojoType="dojox.mobile.RoundRect" id="map_canvas" style="width:100% !important;height:100% !important;"></div>
</div>
Update:
<body style="visibility: visible;">
<div id="view1" class="mblView" selected="true" style="visibility: visible; width: 100%; height: 100%; top: 0px; left: 0px; display: none;" dojotype="dojox.mobile.View" widgetid="view1">
<div id="view2" class="mblView" style="visibility: visible; width: 100%; height: 100%; top: 0px; position: relative; left: 0px;" dojotype="dojox.mobile.View" widgetid="view2">
<h1 id="dojox_mobile_Heading_1" class="mblHeading mblHeadingCenterTitle" moveto="view1" back="View 1" dojotype="dojox.mobile.Heading" style="" widgetid="dojox_mobile_Heading_1">
<div id="map_canvas" class="mblRoundRect" style="width: 100% ! important; height: 100% ! important; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" dojotype="dojox.mobile.RoundRect" widgetid="map_canvas">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
Firebug logs
I had similar display problem with Dojo mobile + Google maps api version 3.
Simons solution did not work, but there was another way.
I don't create new topic, just give you this simple hint: Always check if Google maps loads AFTER DOM (for example using require(["dojo/domReady!"], function(){ ... })
the mobile view your using for the map view only has height:100% set where as the example has width + height 100%.
This can cause issues inside the div used for the map as its not picking up a width correctly. (i've seen a similar issue like this before, could be something else though)
EDIT:
Nothing pops out to me. Have you tried maybe using script to modify it ? something like:
var div = dojo.byId("map_canvas");
div.style.height = window.innerHeight+"px";
div.style.width = window.innerWidth+"px";
lets say we have
<div class="picture"><img class="picture_thumb" src="path" /> </div>
And i'd like to use CSS to add an image z-index higher to .picture (it's basically an magnifying glass Icon so I can see it on top of .picture_thumb)
Any chance?
Thanks a lot
PD: it would be like instead of a background, a Front-ground
-EDIT-
An image so you can understand better
There's no such thing as front-ground.
You'd have to do something like this:
<div class="picture">
<img src="images/picture.jpg" alt="Picture" />
<img class="magnifier" src="images/magnifier.jpg" alt="Maginfy" />
</div>
.picture {
position: relative;
width: 100px;
height: 100px;
}
.magnifier {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1000;
}
You could also do it with javascript if you didn't want to add the magnifier image to each picture div.
The box model ought to be simple enough, but I just don't grok it.
Here's a meaningless form
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Box model test</title>
<link type="text/css" rel="stylesheet" href="test.css">
</head>
<body style="position:relative; top=0px; left=0px">
<form action="for_submitted.php" method="post">
<fieldset style="top:0px; left: 0px; width: 128px; height: 64px;">
<legend> </legend>
<div class="label" style="top:24px; left: 16px; width: 81px; height: 14px;">Box 1</div>
</fieldset>
<fieldset style="top:0px; left: 128px; width: 128px; height: 64px;">
<legend> </legend>
<div class="label" style="top:24px; left: 64px; width: 22px; height: 14px;">Box 2</div>
</fieldset>
<div class="submit_button" style="top:64px; left:64px;"><input type="submit" name="submitButton"
value="Submit"></div>
</form>
</body>
</html>
and its CSS
body
{
background-color: white;
width: 100%;
position: relative;
}
.panel, .label, fieldset
{
position: absolute;
font: 8px Arial;
}
.submit_button
{
position: absolute;
}
and I expect it to show
.---------..---------.
| box 1 | box 2 |
.---------..---------.
but in MSIE8 (which I am compelled to use) and in FireFox, it shows
.--------..--------.
| box 1 || box 2 |
.--------..--------.
why do they overlap?
There are several problems here. First of all, you need a reset CSS to remove the margin and padding added by the browser's User Agent stylesheet. Something like Eric Meyer's will do.
Secondly, after adding in the reset CSS there still will be some overlapping. This is caused by the borders, the widths of which are not part of width. outline is not affected by this, so I'm using that in the demo below to show that the elements are not actually overlapping, but I won't recommend using that in place of border. Instead, you should take into account the width of the border when doing your calculations.
See: http://jsbin.com/ofusa3/edit