Handling Scroll bars with jQuery event Drag and Drop - javascript

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>

Related

Moving element in source code only on responsive website

I was wondering what would be the best solution to move certain element of the responsive page, which is displayed in footer on live website, on top in source code only.
EXAMPLE
Like this site has h1 seo-block right after body tag in source code but on live website this content is displayed at the bottom. They use absolute positioning to fix this.
#subfooter{
width:100%;
position:absolute;
bottom:0;
left:0;
}
My question is how could I do this on responsive design because absolute positioning doesn't work best there unless we would use a lot of #media queries for this class only. Are there any other better css/js/jquery solutions for this?
You can't do so via CSS alone. You need to move the part in question using JavaScript.
jQuery example:
jQuery( 'body' ).append( jQuery( '#subfooter' ) );
If you are willing to live with the (currently) limited browser support, you can achieve this with the flexible box layout module.
(live demo)
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Flexbox</title>
<style>
body {
display: flex;
flex-direction: column;
}
#source-top {
order: 2;
}
#source-bottom {
order: 1;
}
</style>
</head>
<body>
<div id="source-top">Source top</div>
<div id="source-bottom">Source bottom</div>
</body>
</html>

Make Divs lined up without floating?

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

HTML5 Drag file from one box to another. not working properly

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.

Div wider than browser without browser scrolling

I'm working on a layout where the main content div will have a with of 970px. Behind this div, I want a div with dimensions 1200x600px (it will contain a flash object) positioned like so:
width:1200px;
height:600px;
position:absolute;
left:50%;
margin-left:-600px;
The problem is when the browser is sized to a width smaller than 1200px it get the horizontal scroll bar. I can fix that by:
body {overflow-x:hidden;}
But I DO want it to have the horizontal scroll bar when it get sized to less than 970px in width.
Basically, I am trying to get the 1200px div to behave more like a css background image. Any ideas?
This works without JavaScript:
<body style="margin:0">
<div style="position:absolute;width:100%;height:600px;overflow:hidden;min-width:970px;z-index:0;">
<div style="position:absolute;width:1200px;height:600px;left:50%;margin-left:-600px;">
--flash object--
</div>
</div>
<div style="position:absolute;width:100%;z-index:100;">
--main content--
</div>
</body>
UPDATE:Had to make changes to accommodate your absolute div positioning (the parent div has to be absolutely positioned as well)
A solution is possible entirely with CSS. The key pieces are position: fixed and z-index: -1. The two DIVs in this example are siblings, but there are other possibilities. This solution works with the latest versions of Chrome, FireFox, Safari, Opera and MSIE.
This does not work with MSIE6, which doesn’t correctly implement the z-index style, but there is an MSIE6-compatible solution (which shows the scrollbar at 1200px) if you’re able to rearrange things and add a DIV wrapper.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html title="html">
<head>
<style type="text/css">
#content
{
background: #ffffe8;
height: 500px;
margin: 0 auto;
width: 970px;
}
#background
{
background: #ffe8e8;
height: 600px;
left: 50%;
margin-left: -600px;
position: fixed;
top: 0;
width: 1200px;
z-index: -1;
}
</style>
</head>
<body title="body">
<div id="content" title="#content">
<p>content</p>
</div>
<div id="background" title="#background">
<p>background</p>
</div>
</body>
</html>
you could use the onresize event and when its less than 970px, change overflow-x to auto or scroll.
if you are using jQuery, look up the .resize() method
I would use a CSS3 media query.
body{overflow:hidden;}
#media only screen and (max-width: 970px) {
body{overflow:visible;}
}
First set the overflow on the body to be hidden so that it does not scroll. Then when the screen is less than 970px, set it back to visible so that it will scroll.

Displaying same image multiple times at different locations in a web page using JavaScript

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>

Categories

Resources