|
JavaScript - Swap Divs
Here is the code I'm using:
Code: <style type="text/css" rel="stylesheet" href="">
li#button {
cursor:pointer;
}
</style>
<script type="text/javascript">
var num = 6; // this is # of divs you have
function swap(what)
{
for(var i = 0; i < num; i++)
{
document.getElementById('swap'+i).style.display = 'none';
}
document.getElementById('swap'+what).style.display = 'block';
}
var createStyle = document.createElement('style');
var createStyleProp = document.createTextNode('.hidden { display:none; }');
createStyle.appendChild(createStyleProp);
document.getElementsByTagName('head')[0].appendChild(createStyle);
</script>
<body>
<div id="content">
<ul id="a-menu">
<li id="button" onClick="swap(0)"><b>button1</b></li>
<li id="button" onClick="swap(1)"><b>button2</b></li>
<li id="button" onClick="swap(2)"><b>button3</b></li>
</ul>
<div id="swap0" class="block">content 1</div>
<div id="swap1" class="hidden">
<ul id="submenu">
<li id="button" onClick="swap(3)">button1</li>
<li id="button" onClick="swap(4)">button2</li>
<li id="button" onClick="swap(5)">button3</li>
<li id="button" onClick="swap(6)">button4</li>
</ul>
<div id="swap3" class="block">content 2</div>
<div id="swap4" class="hidden">content 3</div>
<div id="swap5" class="hidden">content 4</div>
<div id="swap6" class="hidden">content 5</div>
</div>
<div id="swap2" class="hidden">content 6</div>
</div>
</body>
</html>
Is working fine for the first three buttons but the subdivs from swap1(div) are not working. Can anyone help me with this?? Similar TutorialsI have made a code which is for a 9 tile picture puzzle.And i have done it for click event.now i want to make it possible to drag and drop to swap divs rather than clicking.So how do i swap divs with only javascript.[p.s my divs are dynamically created]
could somebody plz tell me why this isnt working?? i want it specifically as it is because i need it in a bigger picture Code: <body>
<img id="down0" src="images/greentick.png" onclick="swap(0,1)" />
<br />
<table><tr><span id="0"><td>asdasdasd</td></span></tr></table>
<br />
<table><tr><span id="1"><td>ante gamisou re gyfto</td></span></tr></table>
<script type="text/javascript">
/*<![CDATA[*/
function swap(idA,idB){
var cellA=document.getElementById(idA);
var cellB=document.getElementById(idB);
if(cellA&&cellB){
var temp=cellA.innerHTML;
cellA.innerHTML=cellB.innerHTML;
cellB.innerHTML=temp;
}
alert(idB);
}
/*]]>*/
</script>
</body>
All, I have the following code: Code:
<div class="col-1">
<div id="swap">
<img src="images/gallery-img3-big.jpg" alt="" />
</div>
</div>
<div class="col-2">
<div class="list3">
<ul>
<li><a href="#"><img src="images/gallery-img1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/gallery-img2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/gallery-img3.jpg" alt="" /></a></li>
</ul>
</div>
</div>
When you click on any of the links with the <li> I'd like to put the image that was clicked in the <div id="swap"></div>. So I'm thinking this would have to be done with innerHTML and maybe pass a function the img src of the link that I would click on. Just not sure how to do that though. Any help would be greatly appreciated. Thanks in advance. I want the text in a textbox to change to red when I click the box and back to blue when I click it again. I would prefer an inline solution like: <input type="text" value="CHANGE COLOR" onclick="this.style.color='red';"/> In firefox Images 1 2 & 3 won't swap and in IE the img src(not PhotoBig) wont show pics 1 2 & 3 any reason why? I'm new to javascript so its probably a dumb reason? Please help if you can. Code: <script type="text/javascript">
function update(url,index,isSuper) {
document['PhotoBig'].src=url;
}
</script>
Code: <img src="graphics/travel/big/keysfish1.gif" name="PhotoBig" style="border:1px solid black">
<table>
<tr>
<td>
<a onMouseOver="update('graphics/travel/big/keysfish1.gif', 0, false); return false;">
<img src="graphics/travel/thumbnails/keysfish1.gif" style="border:1px solid black">
</a>
</td>
<td>
<a onMouseOver="update('graphics/travel/big/keysfish2.gif', 1, true); return false;">
<img src="graphics/travel/thumbnails/keyfish2.gif" style="border:1px solid black">
</a>
</td>
<td>
<a onMouseOver="update('graphics/travel/big/keysfish3.gif', 2, true); return false;">
<img src="graphics/travel/thumbnails/keyfish3.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('graphics/travel/big/keysfish4.gif', 3, true); return false;">
<img src="graphics/travel/thumbnails/keyfish4.gif" style="border:1px solid black">
</a>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center; font: .8em 'Comic Sans MS', Arial;">
Move the cursor over the images/picture you wish to preview.
</td>
</tr>
<tr>
<td>
<a onMouseOver="update('graphics/travel/big/keysturtle1.gif', 4, true); return false;">
<img src="graphics/travel/thumbnails/keysturtle1.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('graphics/travel/big/tyleranthony.gif', 5, true); return false;">
<img src="graphics/travel/thumbnails/tyleranthony.gif" style="border:1px solid black">
</a>
</td>
<td>
<a onMouseOver="update('graphics/travel/big/uwdiver1.gif', 6, true); return false;">
<img src="graphics/travel/thumbnails/uwdiver1.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('graphics/travel/big/uwlou.gif', 7, true); return false;">
<img src="graphics/travel/thumbnails/uwlou.gif" style="border:1px solid black">
</a>
</td>
</tr>
</table>
How do I swap these two paragraphs at will by clicking the buttons? Demo at: http://aapress.com.au/demo/paragraphswap/demo.html At present, for some reason, clicking button 2 makes both paragraphs appear. The effect I am after is to toggle individual paragraphs on and off, with the option of displaying both at once. Code: <html>
<head>
<title>Paragraph swap</title>
<script>
with (document)
{
write("<STYLE TYPE='text/css'>");
write(".hiddentext {display:none;} .outline {cursor: hand; text-decoration:underline; font-family: Arial; font-size: 13px;}");
write("</STYLE>");
}
function expandIt(whichEl)
{
whichEl.style.display = (whichEl.style.display == "block" ) ? "none" : "block";
}
</script>
</head>
<body>
<div align="center">
<center>
<table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td bgcolor="#FFFF55" valign="top">
<div align="center">
<center>
<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%" bordercolor="#000000">
<tr>
<td width="100%" colspan="2"> </td>
</tr>
<tr>
<td width="40%"> </td>
<td width="60%">
<p onclick="expandIt(el1); return false;">
<img border="1" src="1.gif" width="23" height="15"> Click
buttons
<span onclick="expandIt(el2); return false">
<img border="1" src="2.gif" width="23" height="15"></a></p>
</span></td>
</tr>
<tr>
<td colspan="2"><br>
<div id="el1" class="hiddentext">
<div align="center">
<table border="0" cellpadding="10" style="border-collapse: collapse" width="65%" bordercolor="#000000" bgcolor="#CCFFFF">
<tr>
<td>
<div align="center">
<table border="0" cellpadding="3" style="border-collapse: collapse" width="100%">
<tr>
<td valign="top">PARAGRAPH 1</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<br>
<div id="el2" class="hiddentext">
<div align="center">
<table border="0" cellpadding="10" style="border-collapse: collapse" width="65%" bordercolor="#000000" bgcolor="#FFCCCC">
<tr>
<td>
<div align="center">
<table border="0" cellpadding="3" style="border-collapse: collapse" width="100%" bordercolor="#000000">
<tr>
<td valign="top">PARAGRAPH
2</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
<br>
</center></div>
</td>
</tr>
</table>
</center></div>
</body>
</html>
Hey guys, Im a little stuck with a JQ script im trying to create. First the html: Code: <div id="image_holder">
<img src="images/default.jpg" id="image_swap" />
</div>
<ul id="links" class="test">
<li><a href="#" name="images/01.jpg">Wall-E 2</a></li>
<li><a href="#" name="images/02.jpg">Joker 1</a></li>
<li><a href="#" name="images/03.jpg">Joker 2</a></li>
</ul>
What im trying to accomplish is: 1.) When the mouse enters #links I want it to create a bool staying true if it's in there false if it has left. 2.) if the mouse is: 2a) swap the current image loaded out with the new image to be loaded else: 2b.)swap the current image loaded out with the default image. I have several different attempts at this, this script below is a working attempt. But because im referencing the actual "a" attribute, whenever I goto hover on a new link, it will quickly show the default image... Code: jQ('#links li a').hover(
function() {
var img = jQ(this).attr("name");
var parent = jQ(this).parent().parent().attr("id");
jQ("#image_swap").fadeOut("medium", function() {
// if mouse is within the #link id dont show default image
if(parent === "links") {
jQ(this).attr("src", img);
jQ(this).fadeIn("medium");
}
// if the mouse is outside the #link id show the default image
})
},
function() {
jQ("#image_swap").attr("src", "images/default.jpg");
}
);
Also as a side note, before asking why im using the "name" attribute to store the URL of the image, it's because the href will be pointed to an actual page. I'm new to this...please help. I have several iframes. A few of them have rollovers inside the iframe htm(s). In my navi bar one of the drop down tabs (onclick points to the iframe) called qlist.htm. This works. But in the qlist is a text rollover -fri4_june.htm. this works. But when I go back to the qlist tab it stays on the fri4_june.htm and doesn't go back to the qlist.htm. I'm thinking it needs to be a swap restore() but not sure how to write it a where. here's some of the code: index: <script type="text/javascript" src="scripts_courtt/drdn.js"> </script><script type="text/javascript"> <!-- function show(which) { for ( var n = 1; n < 999999; ++n ) { var iframe = document.getElementById("ifr" + n); if ( iframe == null ) return; // no more to check iframe.style.display = ( which == n ) ? "block" : "none"; } } //--> </script> <iframe id="ifr2" src="qlist.htm" width="640" height="520" scrolling="no" frameBorder="0" style="display:none"></iframe> <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Upcoming Shows</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#" onclick="show(2)">Quick List</a> <a href="http://www.myspace.com" rel="nofollow" target="_blank">MySpaceCal</a></div></li> qlist.htm: <div class="qlist2"> <a href="juneshows/fri4_june.htm" rel="nofollow" target="_self">Jun 25 2010 8:00P</a><br /> </div> thankx.... So what I have to do is have 1 image on my webpage and a button. When the button is clicked the image needs to toggle back and forth between img1 and img2. After searching I've found ways to do this using the image itself as a button. But I'm having trouble getting it to work with an input button. Any help would be greatly appreciated. Hello, I'm trying to use a couple of radio buttons to toggle between text inputs being displayed, but although the code works well in IE and GC, it doesn't in FF. That's my code: 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>
<title>number</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<script type="text/javascript">
function toggle(){
if (Mailbox.style.display == "none") {
document.getElementById('Mailbox').removeAttribute('style');
document.getElementById('PhoneNum').removeAttribute('style');
// document.getElementById('Mailbox').setAttribute('style','display:block');
document.getElementById('PhoneNum').setAttribute( 'style', 'display:none');
} else {
document.getElementById('Mailbox').removeAttribute('style');
document.getElementById('PhoneNum').removeAttribute('style');
document.getElementById('Mailbox').setAttribute('style','display:none');
// document.getElementById('PhoneNum').setAttribute('style','display:block');
}
}
</script>
</head>
<body>
<input type="radio" name="type" value="Voicemail" onclick="toggle()" checked="checked"/> VoiceMail
<input type="radio" name="type" value="Phone" onclick="toggle()"/> Phone Number<br></br>
<div id="Mailbox">Mailbox: <input type="text" name="mailbox"/></div>
<div id="PhoneNum" style="display:none">Number: <input type="text" name="number"/></div>
</body>
</html>
Can anyone help me sort this out? Thanks a lot, David Hello I would like to combine the funcationality of 2 versions I have created of the same site. I really painted myself into a corner with the 1st version, so I created the 2nd, only to find myself in the OTHER CORNER!!! The 1st is he http://www.rosemarierhoweinteriors.com/city.html Everything is functional EXCEPT the previous/next buttons. Because I had built it with sliding panels, I decided I would cut my losses and rebuild with another javascript which I found free on the internet. The 2nd is he http://www.annaleithauser.com/rosema...e/country.html Everything is functional, but the client now would like the navigational arrows at the bottom to swap the thumbnails underneath (as on version 1), rather than slide them individually (as on version 2)...while KEEPING the previous/next as is. Does anyone know a way out of this pickle? I will be eternally grateful. Thank you!!! In the following code I display two buttons in the randommember div. I then append the randommember div with contents of the rana variable. This variable stores information related to a featured member and displays it as a link. Basically buttons appear on screen which are then followed by the featured member. But I would like to switch this around and have the featured member appear followed by the buttons. How can I do this? Obviously I can't put the buttons into the rana variable because then these become a link also removing the links functionality. Does anybody have any ideas how I can solve this problem. I am new to Javascript so please be gentle. Code: r = Math.floor(Math.random() * x.length);
function randommember() {
name = (x[r].getElementsByTagName("name")[0].childNodes[0].nodeValue);
sex = (x[r].getElementsByTagName("sex")[0].childNodes[0].nodeValue);
seeking = (x[r].getElementsByTagName("seeking")[0].childNodes[0].nodeValue);
image = (x[r].getElementsByTagName("imgname")[0].childNodes[0].nodeValue);
rana = document.createElement('a');
aIdName = 'random';
ahref = '#';
aclick = 'show(' + r + ')';
rana.setAttribute('id', aIdName);
rana.setAttribute('href', ahref);
rana.setAttribute('onclick', aclick);
rana.innerHTML = "<h3>Featured Member</h3><br /><img src='images/" + image + ".gif' /><br /><br />Name: " + name + "<br />Sex: " + sex + "<br />Seeking: " + seeking;
document.getElementById("randommember").innerHTML = "<input type='button' onclick='previous()' value='<<' /><input type='button' onclick='next()' value='>>' /><br />";
document.getElementById("randommember").appendChild(rana);
}
I've been banging my head for two days now trying to figure out how i can swap td cells. There are a lot of examples of how to order rows, but i can seem to find any on how to swap td cells. Has anyone a good referal for this.
Below is the routine I am using that when invoked swaps images for other images: Code: <script>
function swapImage(swapContName) {
if (swapContName == 'mainImage1') {
document.getElementById('mainImage1').src = 'L1Bswap.gif';
document.getElementById('hand1').src = 'handr.gif';
document.getElementById('help1_pic').src = 'answers2.gif';
document.getElementById('homework').src = 'spacer.gif';
document.getElementById('instruct').src = 'spacer.gif';
document.getElementById('instructflag').src = 'spacer.gif';
}
}
</script>
Fairly simple and works well. But one of the images I would like to vanish (using the empty spacer.gif) has a border: Code: <img id="instructflag" border="1" src="FLAG.gif" width="23" height="15" align="left"> It must have this black border, but when it gets swapped for a blank, I am left with the black square. Anyone have any idea how to vanish the border along with the graphic? (I have some vague idea that "border" is not used any more, but anyway...). Hey, I'm new to javascript, and I know there are a lot of tutorials out there. My only problem is that i'm finding it difficult to integrate stuff from different tutorials together. Basically, I want text links to swap the image on the website, but then want to allow a zoom function or lightbox function to the image that appears. I'm not best at explaining things so i've done an example below. After clicking the link, the image changes. i want to be able to do the zoom on the image that it's changed to. is this possible? any help would be much appreciated. http://www.jamesbutterworth.co.uk/untitled-1.html Hi there, I have this problem where I need to swap the content of two different elements every time i press the run button. The first element in the HTML code is called id="one" and the second is called id="two". so where element id = "one" is, id = "two" should replace it, and when i press run again id = "two" should be replaced by "id= "one", and so-forth.. I've tried putting the elements into a variable and then just basically typing code that basically looks like id two = id one id one = id two but that isn't working. Is there something more professional looking that someone could help me with??, thanks Reply With Quote 01-21-2015, 07:15 PM #2 Dormilich View Profile View Forum Posts Senior Coder Join Date Jan 2010 Location Behind the Wall Posts 3,532 Thanks 13 Thanked 372 Times in 368 Posts Swap Content Of Two Different Elements HELP - JavaScript | Dream.In.Code Hi, I'm been struggling with this for a week now, I'm new to javascript so please bear with me. What I have been trying to do is get the div to swap once you go over a <td>, at the moment the when you point on one of the <td> it takes the div away. I have a feeling it's got to do with this piece of code: Code: if (arr[i].id != "navtxt" && arr[i].id.substr(0,5) != "style" && arr[i].id.substr(0,5) != "arrow" && arr[i].id != "" && arr[i].id != "mediaspace") {
arr[i].style.display = 'none';
Here is the complete code: Code: <script language="javascript">
function showDiv(elem)
{
var arr = document.getElementsByTagName('div')
for(var i=0; i<arr.length;i++)
{
if (arr[i].id != "navtxt" && arr[i].id.substr(0,5) != "style" && arr[i].id.substr(0,5) != "arrow" && arr[i].id != "" && arr[i].id != "mediaspace") {
arr[i].style.display = 'none';
var styler = document.getElementById("style1_"+arr[i].id);
styler.className = "stylegray";
var styler = document.getElementById("style2_"+arr[i].id);
styler.className = "stylegray";
}
}
var arr = document.getElementsByTagName('img')
for(var i=0; i<arr.length;i++)
{
if (arr[i].id.substr(0,5) == "arrow") {
arr[i].src = 'images/blank.jpg';
}
}
var arr = document.getElementsByTagName('a')
for(var i=0; i<arr.length;i++)
{
if (arr[i].id.substr(0,7) == "style3_") {
var styler = document.getElementById(arr[i].id);
styler.style.color = "#e3e3e3";
}
}
e2 = document.getElementById(elem);
e2.style.display = 'block';
e3 = document.getElementById("style1_"+elem);
e3.className = "stylered";
e3 = document.getElementById("style2_"+elem);
e3.className = "stylegray2";
e3 = document.getElementById("style3_"+elem);
e3.style.color = "darkred";
e3 = document.getElementById("arrow_"+elem);
e3.src = "images/arrow.png";
}
</script>
<td align="left" style="<?=$bstyle?> padding-left: 10px; padding-right: 10px;" width="<?=$sizer?>%" onmouseover="javascript:showDiv('<?=$value["showDiv"]?>');" valign="top">
I would really appreciate it if someone can just point me into the right direction. Thanks Hello. I have looked everywhere and I absolutely cannot find a method that works. I'm making an html website with flash. This is all I want...... A swf "this will be the default flash you see" underneath that flash I want 3 text links named..... Flash1 Flash2 Flash3 when you click flash1, 2, or 3 I want it to swap out the Current flash video with a different one. This way The user can watch all the flash vids on the same page, rather than a separate page for each flash. I found a way to swap them out using iframe, however that requires me to make a separate html page for each of my swf's themselves. I dont want to do that. Plz if someone could help me I would greatly appreciate it! I hope I am posting this in the correct section, I know swfobject involves javascripting so thats why I'm posting here. Not that your method HAS to involve swfobject to embed. If someone can give me code that I can just copy/paste into a blank page in dreamweaver (and I would adjust the embded swf file name and size etc obviously) and have it work that would be fantastic. thank you I am working on a demo for a movie site, and 90% of everything seems cool. Here I am doing php.flushes, .htaccess caching and using PNGs to help with performance. I might start using another sub site to grab all the scripting from to increase performance, but it seems a tad bit slow at the moment. - There are a few issues one being when you click on X-Men and look at the gallery the images seem to flicker sometimes going from image to image. I am using a fade script I found and then using setTimeout() to give the fade script time to do its thing then call for a new image. Code: FadeOpacity(main_img_id, 100, 0, 600, 12);
setTimeout("updateGallery('"+target_arr+"','"+main_img_id+"')", 600);
- Also in the same area I am checking clientHeight after each image modifying the marginTop. The thing with that is the clientHeight only seems to update after the second function call. I tried using a setTimeout() but that didn't nothing. Code: document.getElementById(main_img_id).src = "assets/movie_images/"+arr[i]; img_height = document.getElementById(main_img_id).clientHeight; Any suggestions with improving image load performance, the clientHeight issue or the image flickering issue would be appreciated. Ok so I have a problem which I previously thought I had solved. I am creating a JavaScript Toggle off and on panel and although I have the code sussed for the toggling function there is something off on the image swap function I currently have it set up on two panels, so the code is used multiple times, the problem is it changes both buttons each time rather that just the one that was clicked. Anyway let's see what you think Javascript: Code: <script type="text/javascript">
var imageURL = "../images/portfolio/open.png";
function changeImage() {
if (document.images) {
if (imageURL == "../images/portfolio/open.png") imageURL = "../images/portfolio/close.png";
else if (imageURL == "../images/portfolio/close.png") imageURL = "../images/portfolio/open.png";
document.images["img1"].src = imageURL;
document.images["img2"].src = imageURL;
}
}
</script>
HTML: Code: <a href="#" onclick="toggle_visibility('job1');"><img name="img1" src="../images/portfolio/open.png" onClick="changeImage();"></a>
<a href="#" onclick="toggle_visibility('job2');"><img name="img2" src="../images/portfolio/open.png" onClick="changeImage();"></a>
Any idea what I have done wrong and why it is changing both of the images ('img1' and 'img2') instead of changing them seperately as they are clicked ?? |
|||||||