|
JavaScript - Give Draggable Box A Single Drag Handle
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);
Similar TutorialsHi 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 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 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 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 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 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 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. 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 Hello people, I got a problem. This is the code for hiding en showing informatie in an acordion. It looks fine and it works! But it only handles one div! The main thing i want is that when i click on the text "button" the next div, with all the span's within it, has to slide under. Example: HTML: Code: <!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accordion 1</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion div:not(:first)").hide();
$(".accordion div").hide();
$(".accordion p").hide();
$(".accordion h3").click(function(){
$(this).next("div").slideToggle("slow").siblings("div:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
$(".accordion p").show();
$(".accordion .button").show();
});
});
</script>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div class="accordion">
<h3>Title</h3>
<div class="test">
<p>subtext</p>
<div class="button"> <a href="" title="">Button</a> </div>
</div>
<div>
<span style="display:block; height: 20px; width: 220px; margin-top: 10px; margin-left: -5px;"><input type="radio" checked="checked" value="" name="" id="" /><label for="">test</label></span>
<span style="display:block; height: 20px; width: 220px; margin-top: 0px; margin-left: -5px; margin-bottom: 20px;"><input type="radio" value="" name="" id="" /><label for="">test</label></span>
<span style="font-weight:bold;">Vanaf<input type="text" style="width: 20px; height: 15px;" class="" value="1" readonly=""></input>-<input type="text" style="width: 20px; height: 15px;" class="" value="" readonly=""></input>-<input type="text" style="width: 40px; height: 15px;" class="" value="1" readonly=""></input> change to <input type="text" style="width: 20px; height: 10px;" class="" value="" readonly=""></input>%</span>
<span style="display:block; text-align: right; text-decoration:underline; font-weight:bold; color: red;">count</span>
</div>
</div>
</body>
</html>
CSS: Code: body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #004584;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
color: #FFFFFF;
}
.accordion h3:hover {
background-color: #00AEE7;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion .test {
background: #DFF7FF;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
.accordion .extra {
background: #DFF7FF;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
I need to interact with application in a way that is being used by mouse and some keyboard clicking like save a text file to a desired location with a desired name by the java script file. Can you give me some information how to do that, and where to get information for that?
I'm not sure what this is called to google it, ok so i have 3 divs Code: <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> Now say my page is 800x600 So when the page loads #div1 and #div3 height = 390px and #div2 height = 20px; What i want is when #div2 is draged it resized #div1 and #div3 E.G (#div2 is draged up so top = -100px) so when that happens i want #div1 = 290px and #div3 = 490px And vice versa now this is the code i have for my site So #div1 = ".torrents-list" #div2 = "#dragBar" #div3 = "#torrent_info" PHP Code: $("#dragBar").draggable({ axis: 'y', drag: function(event, ui){ var heightString= $("#dragBar").css("top"); var height = parseInt(heightString.replace("px", "")); $("#dragBar").css("top", "0px"); $(".torrent-list").height($(".torrent-list").height() + heightString); $("#torrent_info").height($("#torrent_info").height() - heightString); } }); But this dose not work for me its never setting #dragBar top to 0px and not resizing any thing if some one can tell me what this is called so i can google for a prebuilt one if not help me write one please? Hi , I am very new to HTML,CSS,Javascript coding. I have to add some check box in the page and there are multiple tabs in the same single page. If I select or deselect any check box, checkbox checks from all the places should be changed. Can anybody tell me how to do so using HTML,CSS, Javascript? Hi, The purpose of a function newValue() is to get the value of input text field at the moment the 'roll' button is clicked. It is also necessary to give the value of the the_value variable out of newValue() function. This is to store the value in another variable, so that a moment later it is possible to know what was the value at the time the 'roll' button was clicked. It does not work the way it is at the moment, since always when newValue() function is called, it knows the present value in the text field but not the one at the time of the click. Cookies could do if everyone allows them, so in this case they will not work. Any ideas how to give a value out of the function / (to another function)? [CODE] <script type="text/javascript"> function newValue() { var the_value; the_value = document.the_form.text_name.value; } </script> <form name="the_form" > <input type="text" name="text_name" value="117" size="5" maxlength="3" /> <input type="button" name="button_name" value="roll" onclick="newValue();rollNumbers();" /> </form> [CODE] I need some goals/projects because without them, it is very hard to stay interested. Does anyone have any interesting/fun projects that I can work out so I can learn some more javascript? Thanks coders! Dear friends, My Function code is: [code] <script language="javascript" type="text/javascript"> //function to create the printer and take variable from button pressed by user function RunEXE(prn) { var oShell = new ActiveXObject("WScript.Shell"); oShell.Run ("%comspec% /k c:\windows\system32\rundll32 PRINTUI.DLL,PrintUIEntry /in /n "+prn+"",2,true); } </script> the variable is passed properly to the function with spaces using below form button. But, the command in the function doesnot execute after the space, that is printer name is taken as "5E-" only. How do i pass prn variable with additional double quotes, so that command in function takes it in full including spaces. thanks so much. [code] <input name="button2132" type="button" id="button213" onClick="RunEXE('\\\\printsrv.test.com\\5E- KMC451-SS AC')" value="Install" /> Hello all, I have a requirement where i need to take an IPv4 address as an input, my web page has 4 text boxes. If i have a address like this 255.255.255.255, my program jumps into the next text box without any problem as soon as i enter the 3 digits. i dont need to press any tab or any other key to go to next text box. In case of an address like 12.24.12.3, i have to press <tab> to jump into the next text box, My project requirement says that it should work with '.' (dot) char as well. SO here is my actual requirement i need to jump into the next text box as soon as user enters a dot (.) char without displaying the dot into the text box. I am writing this program in perl CGI. Thanks, Vaibhav Hi I am generating a report on submit click.Due to size of data query execution takes some time to display result, in mean time if user press reload button on browser toolbar consequently same query request going to database and the performance become slow down. I am able to restrict user from clicking F5 and ctrl+R button but not reload button. I there any way to handle event on reload button? or can we disable reload button on submit? Thanks in advance! Hi! Can anyone help me make this spoiler slide open and close instead of just appear and disappear? I'd be really grateful Code: <html>
<head>
<link href="http://fallscountanywhere.com/bbcodes/spoiler.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
function showSpoiler(btn, show)
{
var node = btn;
while ( node.className == null || node.className != "spoiler" )
{
node = node.parentNode;
if ( node == null )
{
alert("The html for spoiler is invalid");
return;
}
}
var inners = node.getElementsByTagName("div");
inners[0].style.display = show ? "none" : "block";
inners[1].style.display = show ? "block" : "none";
}
</script>
</head>
<body>
<div class="spoiler">
<img src="http://i.imgur.com/6Uq7Y.png" align="right">
<div class="inner">
<input type="button" onclick="showSpoiler(this, true);" value="Show" />
</div>
<div class="inner" style="display:none;">
<input type="button" onclick="showSpoiler(this, false);" value="Hide" />
<div class="text">{param}</div>
</div>
</div>
</body>
</html>
Hi to all, I have a dynamic form, when a button is clicked 3 more fields appear, the function is to colect for example from date [02/02/2010] to date [10/02/2010] equals price [250$] per week and if you want another period just click the button and 3 more fields appear. How do I get all this data to PHP? Code: <script type="text/javascript">
var counter = 3;
function addNew() {
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');
// Create a new text input
var newText = document.createElement('input');
newText.type = "text";
newText.value = "DD/MM/AAAA";
newText.name = counter++;
var newText1 = document.createElement('input');
newText1.type = "text";
newText1.value = "DD/MM/AAAA";
newText1.name = counter++;
var newText2 = document.createElement('input');
newText2.type = "text";
newText2.value = "0";
newText2.name = counter++;
// Create a new button input
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = "Delete";
// Append new text input to the newDiv
newDiv.appendChild(newText);
newDiv.appendChild(newText1);
newDiv.appendChild(newText2);
// Append new button input to the newDiv
newDiv.appendChild(newDelButton);
// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);
counter++;
// Add a handler to button for deleting the newDiv from the mainContainer
newDelButton.onclick = function() {
mainContainer.removeChild(newDiv);
}
}
</script>
<table style="margin-left:200px" border="0">
<tr><!-- Row 1 -->
<td width="140"><b>Start Date</b></td><!-- Col 1 -->
<td width="142"><b>End Date</b></td><!-- Col 2 -->
<td width="140"><b>Price per week</b></td><!-- Col 3 -->
</tr>
</table>
<div style="margin-left:200px" id="mainContainer"><div><input value="DD/MM/AAAA" name="0" type="text" ><input value="DD/MM/AAAA" name="1" type="text" ><input value="0" name="2" type="text" ><input type="button" value="New price" onClick="addNew()"></div>
|
|||||||