swapping divs with java script

Well, if you remember me from before, I was trying to get a code to make a div draggable. That worked. Now however, I'm trying to add some code that will track where the mouse is, and when it reaches a certain set of points, it will affect two divs. It will make one invisible, and the other invisible.

They're in the same location, just have different z-indexes. Also, one is initially visible, while the other is invisible. I tried passing parameters (since I want this code to work for several pages), but that doesn't seem to work. I haven't tried making the code specifically for the that one set of divs yet. Well, here it is.

//Draging Objects var elementToDrag, deltaX, deltaY //global variables //elementTo Drag - keeps track of what we're dragging //deltaX - //deltaY - function DragObject(which,event){ elementToDrag = document.getElementById(which) //draglayer is being passed //Compute distance to mouse click deltaX = event.clientX - parseInt( deltaY = event.clientY - parseInt( //clientX & Y represent the current position of the layer //calculates the distacne of the mouse from the layer //Register event handlers -- Determines which browse //top one is a standard code, teh second is for Internet Explorer (both do the same thing) if(document.addEventListener){ //detect the movement of the mouse, call the cuntion, always has to be true document.addEventListener("mousemove",moveHandler,true) document.addEventListener("mouseup",upHandler,true) }else{ document.attachEvent("onmousemove",moveHandler) document.attachEvent("onmouseup",upHandler) } //event is handled, end it -- stop all other events or functions will dragging if(event.stopPropagation){ event.stopPropagation() event.preventDefault() }else{ event.cancelBubble = true //internet explorer function. It does the same as the one above } } function moveHandler(e){ if(!e){ e = window.event //mousemove event } //move element to current mouse position //current mouse position - the offset = (e.clientX - deltaX) + "px" = (e.clientY - deltaY) + "px" //event is handled, end it if(e.stopPropagation){ e.stopPropagation() }else{ e.cancelBubble = true } } //Capture mouseup to end drag function upHandler(e){ if(!e){ e = window.event } //Internet Explorer or any other browser if(document.removeEventListener){ document.removeEventListener("mouseup",upHandler,true) document.removeEventListener("mousemove",moveHandler,true) }else{ document.detachEvent("onmouseup",upHandler) document.detachEvent("onmousemove",moveHandler) } if(e.stopPropagation){ e.stopPropagation() }else{ e.cancelBubble = true } } function disAppear(woop, shoop, IE, e, event) { if (IE) { // grab the x-y pos.s if browser is IE tempX = event.clientX + document.body.scrollLeft; tempY = event.clientY + document.body.scrollTop; } else { // grab the x-y pos.s if browser is NS tempX = e.pageX tempY = e.pageY if (tempX > 319 && tempX < 574 && tempY > 200 && tempY

Posted On: Friday 23rd of November 2012 12:44:34 AM Total Views:  273
View Complete with Replies

Related Messages:

swapping DIVs on mouseover   (87 Views)
I'm a total beginner at both CSS and Javascript. What I want to do is to swap things on mouseover, and keep the code as simple as possible both so I have a chance of understanding it and so it will work on as many browsers as possible. I've got an image swap to work as I hoped using the method at, and am hoping to swap DIVs in the same way, with the initial DIV containing text and a thumbnail, and the replacement DIV a full size image. I started with In the following, mousing over should cause initDiv to disappear and imageDiv to appear; mousing out should cause imageDiv to disappear and initDiv to appear. Instead, I see imageDiv flickering over initDiv whenever the mouse is moved within the div. What's the simplest way to correct my error Code: .mybox { width:full; height:115px; border-color:black; border-style:solid; border-width:1px; padding:0px; } large image here of same dimensions as DIV lots of textthumbnail
need help.... swapping images in regards to what is selected in a   (175 Views)
ok so i need help.... I need to create a page containing five image tags, two buttons, a and a . The images tags will each contain a picture of one of six possible outcomes for the dice portraying the numbers one through six.. The first button: When the user clicks on the button, all dice are rolled once. For each die when rolled, the src of its image tag is replaced with a random one of six possible pictures -- each picture being chosen with equal probability (1/6).... I HAVE THIS DONE The select: The user may select any of the numbers one through six. Whenever a picture is clicked upon, then that die takes on the value shown inside the ..... THIS IS WHAT I NEED HELP WITH The textarea: Results of the dice rolls should be kept as a running log (a cumulative history) in a textarea at the bottom of the page. With each roll (initiated by the click of the button), we should be able to see the complete history of all current and previous dice rolls. You need not consider changes brought about clicks on individual dice in conjunction with the ....I HAVE THIS DONE The second button: A button below the textarea, should allow the user to obtain a report (overwriting the current contents of the log in the textarea) which tabulates the frequency of each of the six outcomes plotted separately for each of the dice. The frequency tabulation should show how often each die was rolled, as consistent with the data stored in the log.... I HAVENT EVEN GOTTEN AROUND TO WORRYING ABOUT THIS YET This is what i have so far and have so far exhausted everything that i know to try to get it to work but this is just the code with out any of my failed attempts dragged into it input{background-color:#B0D0BC;text-align:center} order=["c_01.jpg"] function roll(){ {r=Math.ceil(Math.random()*5) document.images[0].src="c_0"+r+".jpg" t.value=t.value+"\n"+r} {r=Math.ceil(Math.random()*5) document.images[1].src="c_0"+r+".jpg" t.value=t.value+" "+r} {r=Math.ceil(Math.random()*5) document.images[2].src="c_0"+r+".jpg" t.value=t.value+" "+r} {r=Math.ceil(Math.random()*5) document.images[3].src="c_0"+r+".jpg" t.value=t.value+" "+r} {r=Math.ceil(Math.random()*5) document.images[4].src="c_0"+r+".jpg" t.value=t.value+" "+r} } function swap(n){ remember=document.images[n].src= document.images[n].src="c_01.jpg" remember=order[n] } Select A Value: 1 2 3 4 5 History Of Roles
Generated divs and their onclicks don't work IE8   (80 Views)
all, First I apologize if this has been answered. I did a quick search on the forums but found nothing that related entirely to this issue, also did a google search and found no entirely relevant posts. For those posts I did come across I tried various hacks (including holly hacks and setting background-colors) but nothing worked. I'm not a web guru, so please feel free to pick apart and make suggestions for my code. I have a table style div. Now I'm aware that table-style divs are in no way supported by any IE yet, so I have a CC that implements similar layout for all the IEs. My issue is that this div is generated by javascript on jQuery's document ready. The div has a bunch of row divs, and below that it has cell divs. The cell divs are generated with an onclick attribute before they appended to the row divs. This works in all browsers except IE. This code occurs in a for loop that creates a row and then inserts 7 'day divs' (where the row represents a week). Code: var thisDay = document.createElement('div'); if (curMonth != viewMonth) { thisDay.className = 'JSCalViewNCMD'; } thisDay.innerHTML = curDay.toString(); thisDay.onclick = "javascript:JSCalendarHandleSelection(this,'" + tarcal.inpTag.getAttribute('name') + "'," + curDay.toString() + "," + (curMonth-viewMonth).toString() + ");"; thisDay.setAttribute('onclick', "javascript:JSCalendarHandleSelection(this,'" + tarcal.inpTag.getAttribute('name') + "'," + curDay.toString() + "," + (curMonth-viewMonth).toString() + ");"); //dayDivs.push(thisDay); curEl.appendChild(thisDay); curDay++; if (curDay > curDayLimit) { curDay = 1 curMonth++; if (curMonth === 12) { curMonth = 0; curYear++; } curDayLimit = JSCalendarGetMonthLength(curMonth); if (curMonth === 1 && curYear % 4 === 0) { curDayLimit = 29; } } This is the resulting generated HTML that IE developer window reports: Code: June 2010 S M T W T F S 23 24 25 26 27 28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3 However the onclicks do not fire! No errors are generated by my code in any of the browsers. The code works in the most up to date firefox, chrome, opera, and safari for windows. I'm at a loss at what to do now...
Showing divs one at a time(expand and collapse menu)   (85 Views)
Friends, I am developing a menu using javascript wherein, I expand and collapse divs. It works fine individually; but the problem arises when I try to hide all other divs on expanding one div. Following is the code. Pls. suggest any change if you spot any error or even any alternative way to solve this problem. Thank You. function hideDivs(){ var arr = document.getElementsByTagName('div') for(var i=0; i
Looping the divs on a page and changing if incorrect   (103 Views)
!! I have a quick question(I think) I'm playing with this script to make some cool effects on my page -- I'm sure there are better ways to do it but this is what I have. My 2 questions are this -- with the following script... 1. Is there a better way that I could write it(3 lines is pretty efficient and all but I'm sure js has better functions for this type of work) 2. If I had 10 divs on the page that contained these images and they all started off as plus', how would I go about looping the divs and making sure none are currently open(minus') before I open the current div(showed the minus and populated with data.) #chk1{ border: 1px solid gray; width: 300px; float: left; margin-top: 9px; margin-right: 2px; } function get_other_img(imgtype){ if(imgtype==0){ document.getElementById("imgstuff").innerHTML=""; document.getElementById("imgstuff").innerHTML+="123" //Replace the second line with a script to call a php file and echo the data to the div :) }else{ document.getElementById("imgstuff").innerHTML=""; } } Again, this is just me playing around trying to become better at this and understand what I'm doing more...I just wouldn't even know the names of the functions that I would use for these types of requests As always,
How to create an Array of divs?   (89 Views)
I've been wondering lately: is it possible to create an array of some html tags (let's say array of or array of ) Something which would allow me adding a new or to the array. I am to make a small html webpage in which there are supposed to be 2 text areas: in the first are certain words (for example tomorrow, money etc.), and in the second one there is an input text (let's say "Tomorrow you must send me the money I need"). Javascript should do this: print the input text in a paragraph/div, highlighting the words mentioned above. Something like: Tomorrow you must send me the money I need. This is how I thought of the array of tags, which can at any time add a new word to the output paragraph, it's only to be chosen whether to highlight it or not. Is there a way to use array of tags Or is there some other solution how to solve this task
Moving divs into and out of a main div   (128 Views)
Okay, so I am doing something for someone, and they have a page with a bunch of divs of to the right. These divs are visible with a scroll bar, and accessed via an anchor link, so people without Javascript can still view the page properly. What I need to, is use Javascript so that when they click a link in the menu, the correct div slides across from the right, and into the main div. The only part I need help on, is making it slide. jQuery has a custom effect thing, but once it slides in, it goes back again. I need to have it slide in when the link is pressed, after any current div slides back to the right first. If you don't understand what I need help on, just say so. So, how can I do this is there a library I can use that will work
A question about swapping text   (93 Views)
I'm trying to set up a series of questions, which would look basically like an unordered list. Then, upon clicking a box next to any of the questions, the answer would appear underneath the question. Clicking that same box a second time would cause the answer to disappear. It seems very simple, and I've tried using a couple of different text swapping functions, but for some reason I can't get the answer text to appear in the right places. The script seems to have a hard time keeping track of where things are supposed to go, and it's really irritating me. I need to find a solution ASAP.
Embedded with events: How to prevent the parent div's eventfrom being fired when the embedded div's event is fired?   (85 Views)
Hi all, Given this simple code:
//parent div Div4 bla bla bla bla on div 4
// child div Div4.1 bla bla bla on embedded Div
When I double click within the embedded ...
Ajax to show or hide divs in a form   (109 Views)
Ho, I am building a large registration form. In this form, a sponsor/educator must register himself or herself and then may add up to 6 more " delegates" in pairs. The first two pairs registration info on the form is shown by default. I need to hide the other two pairs until when/if the user clicks on a button to add two more delegates at a time. I used javascript to show or hide the parts of the form that I had put into two divs and adjusted the css display attribute. However, my problem was that, if the user filled out the sponsor/educator section and the first two delegates, and then decided to add two more, when the user clicked on the button to show the part of the form for delegates 3 and 4, it reset all the previous visible form fields to empty. Not good. So, I thought, maybe AJAX. I created the request object (I am a relative novice at AJAX), had it grab a text file with the code to insert into my target div, in this case a div with id = "delegate3and4". Surprisingly however, it still reset the previous form fields to empty. Am I misunderstanding how AJAX is supposed to work I figured that, because it does not refresh the page that this would not happen. In fact, to test this out, I created a simple page from scratch with just a single input field and then used AJAX to insert the file in a div after this field and it did not reset the previous input. So, I am totally confused about why this would be happening on my live page. The page is a php page as it submits the form to a php script for processing but I don't think this should make a difference. Sorry for the long assed description but any help here would be very much appreciated as I have to get this finished today somehow. Cheers Dave
showing and hiding divs on click   (105 Views)
I would like to know if there is a way to keep the script as is but also add a function to this script so that if a user clicks on another tab (div) the open tab will close on click Please see code below:
One function to toggle multiple divs   (87 Views)
I will have a page with about a 100 or so different links and I would like each one to toggle the visibility of its corresponding hidden div. For instance, if I have a county 'Johnson' when it's clicked I would like the hidden div associated with that county to become visible. I would like to do this without having to write a different function for each one. Is there a way to do this easily Below is a solution I was given elsewhere but I couldn't get it to work. Most ideal of all I would like it to work with an image map, with each county having it's own set of stats to be toggled in.
Aligning three divs to the right   (75 Views)
How to align three divs to the right part of the page. We can do this div1 { padding-left: (xyz) px; float:left; } div1 { float:left; } div1 { float:left; } but my question is what if these three divs are not of constant width (e.g if they contain images) and depending upon some condition different set of images loads having different sizes. How can we generically define the layout so that the three divs remain in line for every situation and to the right of the page Any suggestions
Reorder divs to their original position if window size is > this v   (143 Views)
Hi Everyone, I need some help in reordering the divs to its original place when the window size is greater than some value. so what I am doing is onresize i am getting window size and if window size is < 880px value than I am reordering divs. Now I want to reorder those divs to their original size onresize and if window size is > 880px. so can someone please help me with that I am using following example code: var div1 = document.getElementById('div1'); var div4 = document.getElementById('div4'); var parent = div1.parentNode; parent.insertBefore(div1, div4);
Script to create an input inside a div only works on certain divs?   (91 Views)
!! I'm losing my mind here...I have a really simple script that creates an input box inside a div id -- it was working great..then I added in a piece where it would show other peoples existing replies and create the box at the top but under the original post...sometimes it works on the first div, other times it works on every third div but isn't working all the way around and I'm beating my head against a wall here... Here's the javascript function create_reply_input(post_id, db_id){ if(document.getElementById('post_rep_box')==-1) document.getElementById( += "Public Reply "; } Here's the HTML output so you can see where I'm assigning it James P McGovern Look a real live post 12/05/2011 07:56:04 PM Reply Remove As always,
How to hide and show multiple divs using javascript   (112 Views)
I want to hide and show a div using javascript, but the problem is, Here is my code, but it only execute only the top condition i.e the first one, here is the code :- function showOrhide() { if(document.getElementById("firstBtn")) { document.getElementById('divNo1').style.display="block"; document.getElementById('divNo2').style.display="none"; return false; } else if(document.getElementById("secondBtn")) { document.getElementById('divNo1').style.display="none"; document.getElementById('divNo2').style.display="block"; return false; } } Sample text 1 Sample text 2 Hi
Updating multiple divs with ajax?   (94 Views)
I've created an ajax function which retrieves comments from a news article. But if I am logged in i will also have access to an input field for posting comments. The problem/question is that if i use Ajax i can only update one div with the responseText How would i go about updating another one where i want to insert my form field. Can i make multiple requests in some certain manner or do i simply create another ajax function updating it separately http.onreadystatechange = function() { if(http.readyState == 4) { document.getElementById(newsId).innerHTML = http.responseText; } }"GET", "AjaxController.phpfunc=newsGetComments&showcomments="+newsId, true) http.send();
swapping images with javascript   (85 Views)
i got a little problem just wanted to see if any 1 can help. i got a simple js swapping images on my site. loginImg = new Image(); loginImg.src = "images/login_on.gif"; onmouseover="loginImg.src='images/login_on.gif';" onmouseout="loginImg.src='images/login_off.gif';" and for some reason onmouseover event only works if i put it in a
hide/show divs simultaneously   (103 Views)
all! I have 2 things that I want to show/hide using JS. Hidden Div function showstuff(boxid){ document.getElementById(boxid).style.visibility="visible"; } function hidestuff(boxid){ document.getElementById(boxid).style.visibility="hidden"; } Show ONE Show TWO ONE. TWO. If I use it as it is I don't see anything! If I don't use style="display:none" inside the divs, I see them both initially and I can hide/show each one depending on which link I press. But the thing is that I need both divs to be hidden in the first place, and when I click on ONE, to show TWO, when I click on TWO to hide ONE and show TWO etc. Each time 1 div should be visible, depending on which link we press. The other must disappear.
Swapping html divs using Javascript HideDIV and Display DIV   (84 Views)
This is in the head: This is in the body: roll over text here Retail Appears on rollover of each sector above. Phasellus auctor malesuada metus. Quisque ac sapien. Integer tellus elit, vehicula eget, volutpat sed. In accumsan, dui et pharetra rhoncus, felis dolor vehicula velit, tincidunt dignissim tellus urna sit amet magna. Duis luctus massa et ante. Proin eu nisi a sapien viverra dapibus. I have several of these paragraphs to show on roll over. I followed this tutorial: http://www.willmaste...er_div_swap.php It all works well but when I disable the JS in the browser of course nothing displays. How do I go about using alternate content for people with no JS If somebody could point me in the right direction that would be great!