|
JavaScript - Draggable Css Layer
Hi i am trying to create a draggable css layer.
Code: <html>
<head>
<style type="text/css">
#box {position:absolute;
left:150;top:150;
background-color:blue;
height:100;
width:100;}
</style>
<script type="text/javascript">
function start(){
var count = cnt.value
var count=0;
while (count=0)
{
var x;
var y;
var layer = document.getElementById('box');
x=window.event.clientX;
layer.style.left=x;
y=window.event.clientY;
layer.style.top=y;
}
}
function stop(){
var count = cnt.value;
count = 1;
}
function shw(){
alert(cnt.value);
}
</script>
<body>
<input type="hidden" name="cnt" value="1">
<div id="box" onclick="start()" onrelease="stop()">
</div>
<br /><br /><br /><br /><br /><br /><br />
<input type="button" name="show" value="Show" onclick="shw()">
</body>
</html>
It doesn't seem to work though. The loop never seems to start. btw i was also thinking couldn't i just put while(box.clicked) { or something along those lines. Thanks Similar TutorialsI am designing a site where users can submit a location. I want to use Google Maps with a draggable marker which posts the lat, lon when dropped on a position. I was wondering if anyone knows of a tutorial or could point me in the direction of anything similar. Hi There I am trying to create some ajax/javascript to append the scriptaculous Draggable to a number of div elements with a className of draggable. The problem is i need to get the id's of each element to make them draggable, as simply making all div elements on the page draggable would effect other elements on the page which I dont want to be so. I need to:- 1.create a collection of div elements with className - draggable 2. make a list of all the element id's 3. make all elements with said id's draggable I have left out the draggable part from the code, I have simply been trying to get the element id's to display so far Code: var dv;
var dh;
dv = document.getElementsByTagName('div');
if (dv.className == 'draggable')
{
for (var i = 0; i <= dv.length; i++)
{
dh = dv[i].getAttribute('id');
for (var j = 0; j <= dh.length;j++)
{
document.getElementById('content').innerHTML = dh[j].getAttribute('id');
}
}
}
else
{
alert ("no id");
}
I keep getting the alert message "no id" loaded
I am trying to recreate this functionality on my website where you can drag a background image around and when you get ot the edges of the image it bounces back to the edge of that corrosponding side. have a look at the site in question - http://irrland.sonntagskunst.de/# so far i have recreated the top left and right edges using Code: var window_width = $(window).width();
var window_height = $(document).height();
var image_height = $("#background").height(); (2914px)
var image_width = $("#background").width(); (3920px)
$("#background").draggable({
scroll: false,
stop: function (event, ui) {
var animate_to = {};
var window_width_resized = $(window).width();
if (ui.position.left > 0) {
animate_to.left = '0px';
}
if (ui.position.top > 0) {
animate_to.top = '0px';
}
//initial size for width
var image_width_gap = window_width - (image_width + ui.position.left);
if (image_width_gap > 0) {
animate_to.left = (0 - (image_width - window_width)) + 'px';
}
//after window gets resized for width
var image_width_gap_resized = window_width_resized - (image_width + ui.position.left);
if (image_width_gap_resized > 0) {
animate_to.left = (0 - (image_width - window_width_resized)) + 'px';
}
$("#background").animate(animate_to, { duration: 1000, easing: "easeOutElastic" });
then i am using the same logic to do the bottom edge but it doesnt work any ideas here is how i thought the bottom would work Code: //initial size for height
var image_height_gap = window_height - (image_height + ui.position.top);
if (image_height_gap > 0) {
// animate_to.top = (0 - (image_height - window_height)) + 'px';
}
help would be greatly appreciated fixed.. my bg image was infact smaller Hi everyone, I have some images that I want the user to be able to move around the page. So far, this script in the header allows me to do this: Code: var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}
function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
The body has this: Code: <img src="images/balloons.gif" class="dragme"> Now, to be able to use this image as a link, I would have to find the displacement between the mousedown and mouseup coordinates. If the displacement is below say 10px, then the mouseup would bring them to another page. I also wanted to make it so that if the mouseup occurs in a certain area of the page, that the image would move itself to a certain spot. I've programmed a lot before, but not in JavaScript. Any help would be much appreciated. (Note: I need this done in JavaScript, not Flash, even though it might be easier). Thanks Hi guys I need help on sorting out a drag&drop script I'm a bit of a rookie with programming, so I found this script somewhere and I managed to implement it in my code...unfortunately now I need to slightly modify the code, and I'm completely lost I have this drag&drop script that moves some images around the screen, but I'd like to assign an event document.getElementById("XXXXX").onclick = blablabla to each of those images. The problem is that, of course, every time I click on the image to drag it around, this activates the link. With a doubleclick event everything works smooth, however it's a solution I don't quite like. I was thinking about a way to control the code so that while the image moves the link is somehow "not active", but if the user simply clicks without dragging then it activates the .onclick function I have the following piece of code in the head section of my page, which is the actual code for dragging the elements Code: function Browser() {
var ua, s, i;
var ln = 1;
this.isIE = false;
this.isNS = false;
this.version = null;
ua = navigator.userAgent;
s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
// Treat any other "Gecko" browser as NS 6.1.
s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}
var browser = new Browser();
// Global object to hold drag information.
var dragObj = new Object();
dragObj.zIndex = 0;
function dragStart(event, id) {
var el;
var x, y;
// If an element id was given, find it. Otherwise use the element being
// clicked on.
if (id)
dragObj.elNode = document.getElementById(id);
else {
if (browser.isIE)
dragObj.elNode = window.event.srcElement;
if (browser.isNS)
dragObj.elNode = event.target;
// If this is a text node, use its parent element.
if (dragObj.elNode.nodeType == 3)
dragObj.elNode = dragObj.elNode.parentNode;
}
// Get cursor position with respect to the page.
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
// Save starting positions of cursor and element.
dragObj.cursorStartX = x;
dragObj.cursorStartY = y;
dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10);
dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10);
if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0;
// Update element's z-index.
dragObj.elNode.style.zIndex = ++dragObj.zIndex;
// Capture mousemove and mouseup events on the page.
if (browser.isIE) {
document.attachEvent("onmousemove", dragGo);
document.attachEvent("onmouseup", dragStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("mousemove", dragGo, true);
document.addEventListener("mouseup", dragStop, true);
event.preventDefault();
}
}
function dragGo(event) {
var x, y;
// Get cursor position with respect to the page.
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
// Move drag element by the same amount the cursor has moved.
dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
dragObj.elNode.style.top = (dragObj.elStartTop + y - dragObj.cursorStartY) + "px";
if (browser.isIE) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS)
event.preventDefault();
}
function dragStop(event) {
// Stop capturing mousemove and mouseup events.
if (browser.isIE) {
document.detachEvent("onmousemove", dragGo);
document.detachEvent("onmouseup", dragStop);
}
if (browser.isNS) {
document.removeEventListener("mousemove", dragGo, true);
document.removeEventListener("mouseup", dragStop, true);
}
}
then in the Body, I have the DIV that can be dragged around through the "onmousedown" event Code: <div id="milano" class="aBar" style="width:auto; height:auto;" onmousedown="dragStart(event, 'milano')">
<?php
print '<a href="#"><img border="0" src="images/works/thumbnails/milano.jpg" alt="" style="float:left; position:absolute; top:'.rand(50,300).'px; left:'.rand(100,500).'px"/></a>'
?>
</div>
then, in the Body as well, I have the javascript that I'd like to activate only if the image is clicked on BUT not dragged around Code: <script>
window.onload = function () {
document.getElementById("milano").onclick = function () {
alert('AAAAA');
}
}
</script>
I'm really sorry the code is REALLY messy, but as I said I'm just a rookie and I know this is not an elegant solution at all Thank you very much for your time, I really hope you can help me out with that as I spent the last 2 weeks tying to find a solution... Cheers, Mattia I set out to do a little exercise in creating draggable divs that look like app windows in pure javascript, with very little html. Problem is my mouseup event isn't always triggering and will never drop the div in the new spot. I have a global variable to determine whether or not the div is being dragged. This is toggled on the mouseup and mousedown events on the titlebar div. I have a mouesmove event on the body so that it can determine if the global dragging variable is true or false. If true then it moves the div to the x/y coordinates of the mouse Same thing with the mouseup event. It should move the div to the x/y coordinates of the mouse Sometimes it works, sometimes it doesnt. Most of the time it acts like it just wants to select text while I'm dragging (which i thought my selectstart event would take care of) Code: <html>
<head>
<title>testjs</title>
<script>
var dragging = false;
function Window(title,top,left,width,height)
{
this.title = (typeof title == 'undefined')?'New Window':title;
this.x = (typeof top == 'undefined')?0:top;
this.y = (typeof left == 'undefined')?0:left;
this.width = (typeof width == 'undefined')?600:width;
this.height = (typeof width == 'undefined')?400:height;
this.borderStyle = 'solid';
this.windowPanel = null;
this.Open =
function()
{
var windowPanel = document.createElement('div');
windowPanel.setAttribute('id','windowPanel');
windowPanel.setAttribute('z-index', '2');
windowPanel.style.position='absolute';
windowPanel.style.left = this.x+'px';
windowPanel.style.top = this.y+'px';
windowPanel.style.width = this.width + 'px';
windowPanel.style.height = this.height + 'px';
windowPanel.style.border = 'thin solid black';
var titleBar = document.createElement('div');
titleBar.setAttribute('id','titleBar');
titleBar.setAttribute('z-index', '4');
titleBar.style.position = 'absolute';
titleBar.style.left = '0px';
titleBar.style.top = '0px';
titleBar.style.width = this.width + 'px';
titleBar.style.height = '22px';
titleBar.style.borderBottom = 'thin solid black';
titleBar.innerHTML = "<span style=position:absolute;>"+this.title+"</span>";
titleBar.addEventListener('mousedown', function(e){MouseDown(e,this)}, false);
titleBar.addEventListener('mouseup', function(e){MouseUp(e,this)}, false);
titleBar.addEventListener('selectstart', function(e){return false}, false);
var closeButton = document.createElement('div');
closeButton.style.position = 'absolute';
closeButton.style.left = this.width - 30 + 'px';
var cbimg = document.createElement('img');
cbimg.setAttribute('src', 'close_button_red.png');
cbimg.setAttribute('width', '16');
cbimg.setAttribute('height', '16');
closeButton.appendChild(cbimg);
closeButton.addEventListener('click', function(event){CloseWindow('windowPanel')}, false);
document.body.addEventListener('mousemove', Mover, false);
titleBar.appendChild(closeButton);
windowPanel.appendChild(titleBar);
document.body.appendChild(windowPanel);
}
}
function Mover(e)
{
if(dragging == true) {
console.log(e.pageX);
document.body.style.cursor = 'move';
document.getElementById('windowPanel').style.x = e.pageX + 'px';
document.getElementById('windowPanel').style.y = e.pageY + 'px';
}
else
document.body.style.cursor = 'auto';
}
function MouseUp(e,ele)
{
dragging = false;
ele.parentNode.style.top = e.pageY + 'px';
ele.parentNode.style.left = e.pageX + 'px';
}
function MouseDown(e,ele)
{
dragging = true;
}
function CloseWindow(wnd)
{
document.body.removeChild(document.getElementById(wnd));
}
function init()
{
wnd = new Window('A new approach', 100, 150, 1024, 768);
wnd.Open();
}
</script>
</head>
<body onLoad='javascript:init()'>
<a href="#" onClick="javascript:init();">Open</a>
</body>
</html>
Hi, Does anybody know of an example of creating a draggable iFrame in a similar way what can be done on iGoogle with the iFrame gadget using javascript? The problem that I'm having is that the elements within the iFrame can still steal the input focus when dragging the frame using the bar I'm using to initate the drag process. For example when clicking and holding the mouse down on a bar that I'm using to initiate the drag positioned above the iFrame and then moving the mouse to drag the whole frame containing the bar and iFrame I have a problem whereby if the cursor strays over the google search box on http://www.google.com the editbox steals the input focus and the dragging stops until you carefully move the mouse carefully out of the editbox control. Can anybody point me to a page/the html/css containing an iFrame containing http://www.google.com that can't be interacted with because it has a div on top of it e.g. a semitransparent one would look nice for example. Then hopefully I can incoperate the changes into my javascript on initiation of the drag of the frame to disable the elements within the iFrame? If there are any other solutions to this problem, prefereably with an example that works with browsers back as far as ie6 please let me know? Cheers Ben W I currently am using a mootools popup on www.Hope1st.com to play his music videos.....and its working really well...only thing is on some computers (mac with firefox browser) when someone pauses the video ...the draggable box gets stuck on their mouse weird right? yea i know... so i thought of a solution...instead of the whole box being draggable why not just the black titlebar be draggable? i have absolutely no idea on how to do this....but i do have the entire JS code....are you ready? its a mouthful....a million thanks to whoever is talented enough to help me Code: var mooSimpleBox = new Class({
options: {
width: 300,
height: 200,
opacity: '0.8',
btnTitle: "Ok",
closeBtn: null,
boxTitle: "messageBox",
boxClass: 'mainBox',
id: 'myID',
fadeSpeed: 500,
box: null,
addContentID:null,
addContent: null,
boxTxtColor: '#000',
isVisible: false,
isDrag: true
},
initialize: function(options){
this.isVisible = false;
if(options['isDrag']) this.isDrag = options['isDrag'];
if(options['width']) this.width = options['width'];
if(options['height']) this.height = options['height'];
if(options['opacity']) this.opacity = options['opacity'];
if(options['btnTitle']) this.btnTitle = options['btnTitle'];
if(options['boxTitle']) this.boxTitle = options['boxTitle'];
if(options['boxClass']) this.boxClass = options['boxClass'];
if(options['boxTxtColor']) this.boxTxtColor = options['boxTxtColor'];
if(options['fadeSpeed']) this.fadeSpeed = options['fadeSpeed'];
if(options['id']) this.id = options['id'];
if(options['closeBtn']) this.closeBtn = $(options['closeBtn']);
if(options['addContentID']) this.addContentID = options['addContentID'];
if(options['addContentID']) {
this.addContent = $(this.addContentID).innerHTML;
$(this.addContentID).setStyle('visibility','hidden');
$(this.addContentID).remove();
}
this.createBox();
},
createBox: function(){
this.box = new Element('div');
this.box.addClass(this.boxClass);
},
clickClose: function(){
$(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){
}).start(this.opacity,0); this.box.setStyle('display','none');
this.isVisible = false;
},
fadeOut: function(){
if(this.isVisible){
$(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){
}).start(this.opacity,0);
this.isVisible = false;
}
},
fadeIn: function(){
if (document.documentElement && document.documentElement.clientWidth) {
theWidth=document.documentElement.clientWidth;
}else if (document.body) {
theWidth=document.body.clientWidth;
}
if (window.innerHeight) {
theHeight=window.innerHeight;
}else if (document.documentElement && document.documentElement.clientHeight) {
theHeight=document.documentElement.clientHeight;
}else if (document.body) {
theHeight=document.body.clientHeight;
}
var top = window.getScrollTop();
var boxTop = (theHeight - this.height) / 2 ;
boxTop = (boxTop + top);
var boxLeft = (theWidth - this.width) / 2;
this.box.setStyle('top',boxTop);
this.box.setStyle('left',boxLeft);
this.box.setStyle('position','absolute');
this.box.setStyle('width',this.width);
this.box.setStyle('height',this.height);
this.box.setStyle('opacity',this.opacity);
this.box.setStyle('cursor','move');
this.box.setStyle('z-index','999990000');
this.box.setAttribute('id', this.id);
this.box.setStyle('visibility','hidden');
this.box.injectInside(document.body);
if(this.isVisible == false){
this.box.effect('opacity',{ wait:true, duration: this.fadeSpeed, transition: Fx.Transitions.linear }).start(0,this.opacity);
this.addHT();
this.isVisible = true;
}
},
addHT: function(){
this.closeBtn = new Element('button', {
styles: {
'border': 'none',
'background-image':'url(modules/mod_moopopup/moopopup/images/bg_button.gif)',
'color':'#fff',
'position':'absolute',
'bottom':'3px',
'right':'3px',
'width':'44px',
'height':'19px',
'font-size':'13px',
'font-weight':'bold',
'font-family':'arial',
'cursor':'pointer'
}
})
var width = this.width.toInt() + 5;
if(window.ie){
var titleBar = new Element('div', {
styles: {
'width' : width,
'height': 'auto',
'background-repeat': 'repeat-x',
'background-position': 'right top',
'line-height': '20px',
'padding': '5px 5px 5px 10px',
'position': 'absolute',
'clear': 'both',
'margin-bottom': '10px',
'top': '0px',
'left': '0px',
'color': '#eee'
}
})
}else{
var titleBar = new Element('div', {
styles: {
'width' : width,
'height': 'auto',
'background-repeat': 'repeat-x',
'background-position': 'right top',
'line-height': 'auto',
'padding': '5px 5px 5px 10px',
'position': 'absolute',
'clear': 'both',
'margin-bottom': '10px',
'top': '0px',
'left': '0px',
'color': '#eee'
}
})
}
$(titleBar).innerHTML = this.boxTitle;
var insideDiv = new Element('div',{
styles: {
'padding':'10px'
}
});
insideDiv.setAttribute('id','myContent');
this.box.innerHTML = "";
insideDiv.injectInside(this.box);
insideDiv.innerHTML = this.addContent;
this.closeBtn.innerHTML = this.btnTitle;
$(this.closeBtn).addEvent('click',this.clickClose.bindWithEvent(this));
titleBar.injectInside(this.box);
this.closeBtn.injectInside(this.box);
if(this.isDrag == 'true'){
this.box.makeDraggable();
}
}
});
mooSimpleBox.implement(new Options, new Events);
Hi Guys, I've been searching the net for both examples and pluggins to create draggable divs and although I've found many, I cant find the effect I'm after. I want the div to slow down to a stop after it has been release like when you are scrolling on one of apples mobile devices. If anybody can point me in the right direction ill be very great full. I have a script that runs a sprite animation on the canvas, adapted from he http://www.kadrmasconcepts.com/blog/...-canvas-style/. After wondering why it wouldn't work on Safari or older versions of Firefox, I saw this: https://developer.mozilla.org/en/Jav.../Function/bind and implemented the suggested shim. However, I'm still getting some errors that I can't explain for the life of me. To make this easy for everyone, I threw it in a jsfiddle: http://jsfiddle.net/zachgold/AL3AQ/. Any help would be appreciated. Thanks! Zach Hello I have this var set: var floatingMenu = { targetX: -270 , targetY: 13, hasInner: typeof(window.innerWidth) == 'number', hasElement: document.documentElement && document.documentElement.clientWidth, menu: document.getElementById ? document.getElementById(floatingMenuId) : document.all ? document.all[floatingMenuId] : document.layers[floatingMenuId] }; I want the number to be assigned to targetX (the red part) to be different for Firefox, Chrome or Internet Explorer. How do i do that? Also, can i avoid this IE's warning about running active x content? Come on... This is a javascript for making a floating menu, there's no security issue whatsoever! I have created a floating layer using Javascript that remains always on top of page on scrolling.Issue is,at some point while scrolling,the layer flickers continuously. The html page is as follows: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>JAVASCRIPT TESTING</title> <script language="javascript" type="text/javascript" src="FloatingMenu.js"> </script> <link rel="stylesheet" type="text/css" href="formatting.css"> </head> <body> <div id="header1"> <b><font color='Red' size='6pts' style='letter-spacing: 2px;'>Floating Layer Testing</font></b> </div> <div id="content"> <p>Like many common software systems, JavaScript has a history of security problems. Many of these problems could allow a person with malevolent intent to steal sensitive information from a visitor. The number and type of such holes in security vary among browsers and operating system versions. Most JavaScript security holes have been caught and fixed, but new ones are being discovered all the time. For a list of current security holes check out your browser's and operating system's Web pages. As a Web site author, it is your responsibility to keep up-to-date on the current status of known security holes in the applications you create. Signing Scripts In Chapter 11, I explained that JavaScript does not provide the ability to directly access files on the client computer. This can be a very large hurdle to overcome if you're trying to upload a file to a server from the client computer. Fortunately, file uploading is one of many functional enhancements that signed scripts provide. Signed scripts are specially packaged scripts that have been verified and signed to be correct and non-threatening. These scripts have additional rights on the client computer that allow a programmer to do many things that he wouldn't otherwise be able to. With the introduction of Netscape 4.0, a new security model was put in place that would allow digitally signed scripts to bypass some of the restrictions that had previously been placed on them. A signed script can request expanded privileges from the visitor and, with the visitor's permission, gain access to restricted data. A signed script requests these additional permissions through LiveConnect, which allows your JavaScript code to communicate with the Java Capabilities API. The security model allows JavaScript to access certain classes in Java in order to extend its functionality while still maintaining tight security for the client. A digital signature is a fingerprint of the original programmer, and it allows the security model of the browser to detect where (or from whom) it originated. A script signer can be a person or an organization. By signing a script, you acknowledge yourself as the author and accept responsibility for the program's actions. A signed script contains a cryptographic checksum, which is just a special value that ensures the signed script has not been changed. When a digital signature is detected, you are assured that the code has not been tampered with since the programmer signed it. Once you finish writing a script, you can use the Netscape Signing Tool to digitally sign it. Signing a script does the following: Unambiguously assigns ownership of the script to a person or organization. Allows an HTML page to use multiple signed scripts. Places the signed script into a Java Archive (JAR) file. Places the source of the script in the JAR file. Once a user confirms the origin of the script and is assured that it has not been tampered with since its signing, he or she can then decide whether to grant the privileges requested by the script based on the validated identity of the certificate owner and validated integrity of the script. .</p> </div> <div id="movable"> <b>Please Login or Register</b> </div> </body> </html> JAVASCRIPT FILE IS AS FOLLOWS: Code: var startY=0;
var currY=startY;
var destY=currY;
var timerID=0;
var tmr_on=0;
var temp;
function floatMenu() {
clearInterval(timerID);
tmr_on=0;
if (document.documentElement.scrollTop) {
temp=document.documentElement.scrollTop; }
else {
temp=document.body.scrollTop; }
destY=temp+startY;
startFloat();
}
function startFloat() {
if(currY==destY) {
clearInterval(timerID);
tmr_on=0;
}
else if(currY<destY) {
currY+=2;
var newY=currY+"px";
document.getElementById("movable").style.top=newY;
if(tmr_on==0) {
timerID=setInterval("startFloat()",10);
tmr_on=1;
}
}
else if(currY>destY) {
currY-=2;
var newY=currY+"px";
document.getElementById("movable").style.top=newY;
if(tmr_on==0) {
timerID=setInterval("startFloat()",10);
tmr_on=1;
}
}
}
window.onscroll=floatMenu;
window.onresize=floatMenu;
AND CSS FILE IS AS FOLLOWS: Code: #header1 {
background-color: #66ccff;
border: 1px solid #66ccff;
margin-bottom: 5px;
}
#content {
padding: 10px;
border: 1px solid #66ccff;
margin-bottom: 5px;
margin-left: 21%;
height: 800px;
}
#content a {
text-decoration: none;
color: blue;
display: block;
}
a {
text-decoration: none;
color: blue;
}
#movable {
position: absolute;
width: 20%;
background: #fdcfcc;
top: 0px;
left: 0px;
}
At some point while scrolling,the div 'movable' flickers continuously,while at some other point,it is perfectly stable. Problem is coming on both IE and FF.Any help seriously appreciated... Hi. I've used CoffeeCup Form Builder to create a nice form for my site and would like to have it open in a lightbox/thickbox, or open in a layer? (If it matters, do have an iFrame on the page, FYI). I've got LightBox Gone Wild to work nicely, except it won't load the form. If I open the HTML page (directly) the form works fine. This is the code on the HTML page: Code: <script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent"></div>
<script type="text/javascript">
var so = new SWFObject("form.swf", "form.xml", "653", "527", "7,0,0,0", "#ffffff");
so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");
so.addParam("quality", "high");
so.addParam("scale", "noscale");so.addParam("salign", "lt");
so.addParam("wmode", "transparent");
so.addParam("FlashVars", "xmlfile=form.xml&w=653&h=527");
so.write("flashcontent");</script>
Thanks in advance... ---- Okay. I used CoffeCup Form Builder for my form and wanted it to open like the examples at their website: http://www.coffeecup.com/form-builder. Having it on the page or in a pop-up was okay, but I like the 'LightBox' effect. Anyway, someone did help me and I wanted to share the code in case others can use it. It uses an iframe that opens in a new layer. You can probably improve on it and change the size, etc., but it's a start. One thing I'm planing is to use the CSS and JS in an external file rather than in the <head>: Code: <style type="text/css">
div#OVERLAY
{
position: absolute; top: 0px; left: 0px;
width: 100%; height: 1200px;
background-color: black;
-moz-opacity: 0.70;
opacity: 0.60;
filter: alpha(opacity=70);
z-index: 10;
display: none;
}
div#FORMHOLDER
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background-color: transparent;
text-align: center;
z-index: 15;
display: none;
margin: 0px;
padding: 0px;
right: 0px;
bottom: 0px;
}
div#FORMHOLDER span.closer
{
padding-left: 100px; padding-right: 100px;
color: #E5BC9D;
background-color: black;
}
div#FORMHOLDER iframe
{
width: 653px;
height: 527px;
margin: 0px;
padding: 0px;
background-color: #000;
}
</style>
<script type="text/javascript">
function overshow()
{
var hold = document.getElementById("FORMHOLDER");
hold.style.display = "block";
var stop = parseInt(document.body.scrollTop);
if ( isNaN(stop) ) stop = 0;
if ( stop == 0 )
{
var stop = parseInt(document.documentElement.scrollTop);
if ( isNaN(stop) ) stop = 0;
}
hold.style.top = stop + 50 + "px";
document.getElementById("OVERLAY").style.display = "block";
}
function overoff()
{
document.getElementById("OVERLAY").style.display = "none";
document.getElementById("FORMHOLDER").style.display = "none";
}
</script>
Next, use the <div> and an <iframe> tag in the fist line after the <body> tag: Code: <div id="OVERLAY"></div> <div id="FORMHOLDER"> <span class="closer" onclick="overoff()">Click here to close</span><br /> <iframe src="form.html" scrolling="no" frameborder="0"></iframe> <br /><span class="closer" onclick="overoff()">Click here to close</span> </div> Finally, when you link to the form page CoffeeCup creates, the code is: Code: <a href="#" onclick="overshow(); return false;">link</a> I hope this is useful to some of you. I looked long and hard and could find nothing so... Cheers! Ok. Basically, I will have images, about 150x100 that are all different. They will be displayed on a page in groups of 4. I want to make it so that if you hover over them, another image of the same size is put on top of that with part alpha. To give you an idea of what I am doing, it will be like youtube videos when you hover over them except I want there to be an image centered. I know this part of the code, but I don't know what to put inside it: Code: $(document).ready(function(){
$("img").mouseenter(function(){
//add image on top of this image
})
$("img").mouseleave(function(){
//remove covering image
})
})
What should I replace the comments with? Thanks Hello, I am using JavaScript to show/hide a floating div layer. The code i have works perfectly in Google Chrome but will not display at all in Internet Explorer. Any solutions would be greatly appreciated - coding below and attached: Code: <!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>James</title>
<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
// Hide everything but the one we want to toggle
HideAllContent(d);
if(document.getElementById(d).style.display == "none"){
document.getElementById(d).style.display = "block";
}else{
document.getElementById(d).style.display = "none";
}
}
/**
* Hides all the content panes on the page, they must be listed in arr
* @param except - The id of a div not to hide
*/
function HideAllContent(except){
// Make an Array with all the id's of the divs we want to hide
var arr = [
"uniquename1",
"uniquename2",
"uniquename3",
];
// Loop through the Array and call HideContent to hide them
for( var i=0; i<arr.length; ++i ){
if( arr[i] != except )
HideContent( arr[i] );
}
}
//--></script>
</head>
<body>
<h1>Showing and hiding divs with javascript</h1>
<p>Click the links below to show or hide the appropriate divs.</p>
<!--
Links that you want to click.
Use onclick to call the ReverseContentDisplay() javascript method.
This will toggle the display property div of the name passed into
it to "block" or "none".
-->
<a href="#" onclick="ReverseContentDisplay('uniquename1')">link 1</a>
<a href="#" onclick="ReverseContentDisplay('uniquename2')">link 2</a>
<a href="#" onclick="ReverseContentDisplay('uniquename3')">link 3</a>
<!--
The divs that you want to hide.
Each div has its css display property set to "none" so they are
hidden when the page first displays.
-->
<div id="uniquename1" style="display: none;">
<p>Div 1</p>
</div>
<div id="uniquename2" style="display: none;">
<p>Div 2</p>
</div>
<div id="uniquename3" style="display: none;">
<p>Div 3</p>
</div>
</body>
</html>
Hi Gurus, Please find the attached html that i am working on. this has 3 columns and the 3rd column is 'Show Comments' link. when I hover the link it should display the html page on top my existing page like a tooltip. For Example: In this forum, when hovered on each topic, the topic description is displayed as tool-tip. can anyone shed some light? Thanks! So, I'm new to Javascript but really just need the one code. I've tried the tutorials but I have never worked well with those -- I've always found it easier to actually be working with someone. But anyway. Basically, I need something sort of like this -- you click the thumbnail and the image appears in that predetermined spot. One thing, though: the images have to layer over each other. Like, you click image A, and it appears in the spot. You click image B, and it appears on top of image A. It'd be even better if when you clicked Image A it appeared and then you clicked image A again and it disappeared, but I'm going to try to start small. I've gone through the tutorials and have a sort of ish understanding about what some of the parts of the codes do, and I've been told I'm a fast-ish learner, so I think I'll catch the hang of this quick. Thank you! <3 |
|||||||