I'm in the process of building a timeline feature for my new web app, but I don't know how to get around this CSS issue. I would like to make "Mauna Key Observatories" in line with "Mauna Key Summit" since that div should not be hitting any of the other trek item divs. I only want them to be listed vertical if the trek_items would cover one another. Do you know of a solution?
You can view my issue at: Timeline Feature
Rather than floating , you can use positioning of the div to place it horizontally .. For example , make the div's position absolute and place it at the position using left,*top*,right and bottom
See below code
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width:100px; height:100px; border:1px solid; position:absolute; left:0px;"></div>
<div style="width:100px; height:100px; border:1px solid; position:absolute; left:100px;"></div>
<div style="width:100px; height:100px; border:1px solid; position:absolute; left:200px;"></div>
</body>
</html>
Working JS Fiddle
Related
I'm developing an web-app in the Play Framework and at the moment I would like to make the entire app able to adjust sizes of containers and text according to the browser's size. I have managed to make the containers adjust and it works fine, but I'm stuck on adjusting the font-size to fill up the container's size. Even though I tried several variants already, it doesn't seem to work at all: when the text is too big for the container, it simply passes it to a new line in the #indexPerson container, instead of adjusting the font. I also tried setting "white-space: nowrap", but this causes a scrollbar to show up, and the font still doesn't adjust itself. Adding "overflow:hidden" simply hides part of the text, no font-size adjustment whatsoever. Is there something I'm missing out? Thanks a lot in advance! I'm using the textFit plugin: http://www.jqueryscript.net/text/jQuery-Plugin-For-Fitting-Text-To-Its-Container-textFit.html. My css file looks like this:
div#outer {
width:100%;
height:100%;
}
div#indexPerson {
width:100%;
height:6%;
float:left;
border: 2px #385D8A solid;
background-color:#B9CDE5;
border-radius:20px;
-moz-border-radius:20px;
padding-top:2px;
font-size:30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
And the index page is:
#(people: List[Client])
<!DOCTYPE html>
<html>
<head>
<title>My app</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/index.css")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/textFit.slow.js")" type="text/javascript"></script>
<script>
$(document).ready(function() {
textFit(document.getElementById('indexPerson'), {maxFontSize: 36});
});
$(window).resize(function()) {
textFit(document.getElementById('indexPerson'), {maxFontSize: 36});
});
</script>
</head>
<body>
<div id="outer">
#for(person <- people) {
<a href="#{routes.Application.login_form(person.getId())}">
<div id="indexPerson">
#person.getInfo()
</div>
</a>
}
</div>
</body>
</html>
Solved it! Note to self: always make sure the div ids are unique!
Having a problem. Once I drop the image into the left box, it doesnt display.
This is what happens:
Before i drag the image.
http://i.imgur.com/xIWDD.png
After I drag the image. it doesnt display.
http://i.imgur.com/vOOIm.png
the error on chrome says:
GET file:///C:/%22test Dropped
angelo.js:42
leftbox.innerHTML=e.dataTransfer.getData('text');
Here is my HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>angelos site</title>
<link rel="stylesheet" href="main.css">
<script src="angelo.js"></script>
</head>
<body>
<section id="leftbox">
i dare you to drop an image inme.
</section>
<section id="rightbox">
<img id="facepic" src="C:\test\face.png">
</section>
</body>
</html>
Here is my JS.
function doFirst(){
mypic=document.getElementById('facepic');//tell js to recognize facepic.
mypic.addEventListener("dragstart",startDrag,false);//when you start dragging facepic run startDrag function. "dragstart" is keyword in java that recognizes when you start dragging an object.
leftbox=document.getElementById('leftbox'); //tell js to recognize leftbox.
leftbox.addEventListener("dragenter",function(e){e.preventDefault();},false);//make same for all browsers.need to override. we arent using this.
leftbox.addEventListener("dragover",function(e){e.preventDefault();},false);//make same for all browsers.need to override. we arent using this.
leftbox.addEventListener("drop",dropped,false);//call function dropped.
}
function startDrag(e){
var code='<img src="C:\test\face.png">';
e.dataTransfer.setData('Text',code);
}
Here is my CSS
#leftbox{
float:left;
width:250px;
height:250px;
margin:5px;
border:3px solid blue;
}
#rightbox{
float:left;
width:250px;
height:250px;
margin:5px;
border:3px solid green;
}
Seems to work fine for me, though, I'm just guessing what your dropped method looks like in this jsfiddle: http://jsfiddle.net/rgthree/aVrB4/
From above you can see your JS is probabl OK. I'm guessing that your browser isn't liking the local links. Try file:///c:/test/face.png for those img's src attributes, or just use relative paths.
Me and a guy from work are working on a web application for our clients to log on and manage there details. One of the sections asks the user to upload there company logo but as we all know the html browes button or the tag as its also known is a hard cookie to style. this is how I want it to look:
But the reality is if I put a plain old file tag in there it would look bland, generic and out of place so I Googled for the solution and after a it of hunting I came across this code which yielded the image below the code (Which I also show the file upload without the opacity set to zero):
#divinputfile
{
height:85px;
width:250px;
margin:0px;
background-image: url(images/upload_file.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
#divinputfile #filepc
{
opacity: 0.0;
-moz-opacity: 0.0;
filter: alpha(opacity=00);
font-size:16px;
cursor: pointer;
}
#filepc
{
margin-top: 12px;
}
#fakeinputfile
{
margin-top:-28px;
}
#fakeinputfile #fakefilepc
{
width:250px;
height:22px;
font-size:18px;
font-family:Arial;
}
<body>
<br />
<div id="divinputfile">
<div id="fakeinputfile">
<br />
<input name="fakefilepc" type="text" id="fakefilepc" />
</div>
<div align="right">
<input name="filepc" type="file" size="1" id="filepc" onchange="document.getElementById('fakefilepc').value = this.value;"/>
</div>
</div>
</body>
This is a basic hack and when I select the styled button I'm really selecting the invisible upload button, then the value of the upload is passed into the test box above to look like its really part of the upload. Two problem with this method and I hoping you'll be able to help me here is
a) Only the button can be click to upload. In most browsers(not including Chrome) you can click into the text box as well as the button to upload the image. Sure with this method the text of the file path is added to the textbox but any alteration to that box wont change the file eg: if you selected file1.jpg to upload but you really wanted file2.jpg, changing the file path in the textbox wont change a thing to the ACTUAL upload element
b) Some browers like Chrome and Opera add the \fakepath\ filepath to the textbox and this is just ugly, so any if statement that can strip this out also would be hugely useful.
Hope you guys can help me with this, if not via code hints then if anyone knows a good JavaScript plug that saves the day.
Thanks
You already have javascript for the textbox to display the new filepath value on change.
That’s where you will have to also remove any /fakepath/ parts etc.
You can also add a click event to the text-box which will activate the file-browse click event.
I can instantly tell you that’s rather easy with jQuery, but I don’t know how one would do it with plain JS.
/e:
In fact, it seems file-input actions can not be triggered. See related question In JavaScript can I make a "click" event fire programmatically for a file input element?
Question a:
No firing the click event. Security and all that. You could add a second invisible upload button just like the first. If one changes, clear out the other. And the hacks pile up...
Question b:
See Kissaki's answer. You'll need some JS to clear out that 2nd invisible field anyhow...
Here is a solution.
Question A is solved by making the <input type="file" /> the full size of your widget, and using divisions to create non-clickable areas.
Question B is solved using the trick I found here
<!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>Style the File Upload Input - Example</title>
<style type="text/css">
#file-upload {
position:relative;
top:0px;
left:0px;
width:250px;
height:65px;
overflow:hidden;
padding-top:15px;
background-image: url(images/upload_file.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
#file-upload input[type='file'] {
width:250px;
height:65px;
font-size:65px;
opacity:0;
filter:alpha(opacity=0);
position:absolute;
top:15px;
left:0px;
z-index:9;
}
#file-upload input {
width:97%;
}
#file-upload #no-click {
position:absolute;
bottom:0px;
left:0px;
z-index:10;
width:125px;
height:40px;
}
</style>
</head>
<body>
<div id="file-upload">
<input size="0" name="filepc" type="file" id="filepc" onchange="var clone = this.cloneNode(true);clone.type='text';document.getElementById('fakefilepc').value = clone.value?clone.value:this.value;" />
<div id="fake-file-upload">
<input name="fakefilepc" type="text" id="fakefilepc" />
<div id="no-click"></div>
</div>
</div>
</body>
You might want to worry about graceful degradation... here's the same with the HTML, CSS and JavaScript more cleanly separated which should degrade cleanly.
<!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>Style the File Upload Input - Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("body").addClass("js");
$("#file-upload").append("<div id=\"fake-file-upload\">" +
"<input name=\"fakefilepc\" type=\"text\" id=\"fakefilepc\" />" +
"<div id=\"no-click\"></div>" +
"</div>");
$("#file-upload input[type='file']").change(function() {
var clone = this.cloneNode(true);
clone.type='text';
document.getElementById('fakefilepc').value = clone.value?clone.value:this.value;
});
});
</script>
<style type="text/css">
#file-upload {
position:relative;
top:0px;
left:0px;
width:250px;
height:65px;
}
body.js #file-upload {
overflow:hidden;
padding-top:15px;
background-image: url(images/upload_file.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
body.js #file-upload input[type='file'] {
width:250px;
height:65px;
font-size:65px;
opacity:0;
filter:alpha(opacity=0);
position:absolute;
top:15px;
left:0px;
z-index:9;
}
body.js #file-upload input {
width:97%;
}
body.js #file-upload #no-click {
position:absolute;
bottom:0px;
left:0px;
z-index:10;
width:125px;
height:40px;
}
</style>
</head>
<body>
<div id="file-upload">
<input size="0" name="filepc" type="file" id="filepc" />
</div>
</body>
I was using the following image as the image images/upload_file.gif (and its respective dimensions for everything related thereto)
I believe the following link might help you: "Ajax Upload; A file upload script with progress-bar, drag-and-drop".
Not really ajax, just a clever use of an iframe.
Hope it helps. Code well!
It's tough to do and even tougher to do cross-browser. Webkit (safari/chrome) has a very different way of handling this than the IEs and Mozilla. As shown, you'll end up resorting to a ton of hacks which you'll constantly need to check against each browser as they get released.
One way I've found is to progressively enhance to use a flash plug-in. You only need to check for flash being present and flashblock not blocking the element.
For example: http://www.uploadify.com/demos/ (although this doesn't seem to check for flashblock!)
I have a room div with some toy divs arranged on it, see
Toys are absolutly positioned and are drag-able with in the walls of the room . The room container div has a fixed height and height, so the room has horizontal as well as vertical scrolls. I use jquery event drag plug-in for setting up DnD. I managed to set up the toys drag only with in the lomits of the wall, but when there are scrolls, component is moving a little ouside the wall (only up to the actual width of the wall).
I want to show only a portion of the toy as shown below
I tried setting the z-index, but has no effect, any one has better idea?
Withouth seeing the actual code, i guess overflow:hidden could solve this?
You can used scrollTo plugin http://demos.flesler.com/jquery/scrollTo/ to work with scrollbars
the example below shows that overflow:hidden does indeed do what you're asking. Something is up with your code, but we can't help you unless you post it!
alt text http://img155.imageshack.us/img155/9594/example1281542227415.png
<!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">
<head>
<title>Example</title>
<style type="text/css">
#container {
background-color:#ddddff;
height:300px;
overflow:hidden;
position:relative;
width:300px;
}
#container .child {
background-color:#ddffdd;
height:50px;
position:absolute;
width:50px;
}
#container .child1 {
left:100px;
top:70px;
}
#container .child2 {
left:270px;
top:170px;
}
</style>
</head>
<body>
<div id="container">
<div class="child child1"></div>
<div class="child child2"></div>
</div>
</body>
</html>
I have a simple web page with a simple puzzle. There are some images that user is supposed to drag to their designated drop zones. I use solution in JavaScript generated by DreamWeaver.
I want to add a JavaScript function that will show a correct.png or wrong.png image next to the image a user just dropped. The straightforward way to do it is to just have correct and wrong div elements for each of the draggable images. But is there a more elegant way?
Another way to put it would be:Write a JavaScript functions Show(commonImageId, nextToImageId) and Hide(commonImageId, nextToImageId) that would be used like Show('correct', 'draggable1');.
Instead of having multiple divs that you show and hide, you can try this solution as well.
Create two styles, each with a different background image set. Whenever you trap the event that a given image should be marked as correct or wrong, simply swap the style of the div, which will have the affect of switching the background image.
Very quick (and in need of some cleanup) sample code below, you've got the right idea with setting the type with a function...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Image Swap</title>
<script language="javascript">
function setImage(id, value){
document.getElementById(id).className=value;
}
</script>
<style>
.blank{
width:80px;
height:80px;
float:left;
}
.correct{
background-image:url('correct.gif');
background-repeat:no-repeat;
width:80px;
height:80px;
float:left;
}
.wrong{
background-image:url('wrong.gif');
background-repeat:no-repeat;
width:80px;
height:80px;
float:left;
}
.item{
float:left;
height:80px;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="correct1" class"blank"></div><div id="item1" class="item">Item 1</div><div class="clear"></div>
<div id="correct2" class="blank"></div><div id="item2" class="item">Item 2</div><div class="clear"></div>
<script language="javascript">
setImage('correct1','correct');
</script>
</body>
</html>