|
JavaScript - Swapping Innerhtml Content
Problem: I have a DIV whose content needs to change on mouseover and return to prior state on mouse out. I do not want to pre store the divs inner HTML in variables. So I am trying to get the script on execution (mouseover) to grab the existing innerHTML from the DIV, assign it to a variable, then write the new innerHTML content.
on mouse out, function sets innerHTML to the variable in order to restore original content. For some reason the code below causes a strange flicker effect, also sometimes it catches the mouseout and works, other times it does not catch mouseout and is stuck with the content changed on mouse over? any ideas why/how i set this up wrong? HTML Code: <div id="ac-repair-inspection" class="bgbblue cborder" onMouseOver="test();" onMouseOut="testo();" > <div class="ctr"><h2 class="fs19 uline">COOLING SYSTEM TUNE-UP</h2></div> <div style="padding-left:17px"> <ul style="padding:0;" class="fs15"> <li>Check Refrigerant Pressures</li> <li>Monitor Thermal Expansion Valve operation</li> <li>Check temperature differential</li> </ul> </div> <!-- end list --> </div> <!-- end ac repair inspection --> SCRIPT (Placed at end of HTML before closing body tag) Code: <script type="text/javascript">
var temp= document.getElementById("ac-repair-inspection").innerHTML;
function test() {document.getElementById("ac-repair-inspection").innerHTML="<img src='../images/layout_images/cold-tune-up-promo.png' width='340' height='428'>";}
function testo() { document.getElementById("ac-repair-inspection").innerHTML= temp;}
</script>
CSS Code: #ac-repair-inspection {
position:absolute;
width:340px;
height:428px;
left: 453px;
top: 10px;
}
Similar TutorialsHi all, I have a javascript+CSS based popup (? by toggling display property), which works well. The popup <div> consist of an <h3>, <img> (serves as close button) and a big <ol> (This markup is in a seperate file and is about 2KB) I need to bring the content via Ajax rather than statically placing it inside the document. I'm very reluctant to use innerHTML, as it's non standard and I may lose the "close" action from the img(mentioned above), which would be there otherwise. My other option is to save the content(without any html tag) in a php array and return through Ajax, and then dynamically create all html nodes with all attributes using proper DOM methods. I expect some advice from you to choose the right one. PS: My popup script is obtained from http://www.php-development.ru/javasc...pup-window.php Hi guys, The code in question is www.spectral.og.uk/test5/work2.htm I am trying to change the main 'SPECTRAL' video content mid-right when I click on the 'Change Movie' at the bottom. Eventually I want to be able to do this from the thumbnails but Im just running a simple test first. So I defined the function 'ChangeMOVIE' on line 14 using document.getElementById & innerHTML, etc, to replicate the flash player script contents that are incidentally ID'd as "BIGCHANGE" (ie, part of the main flash player on line 249) but simply replacing a different name for the video when it reaches the Flashvars "&file=Splash.flv" to something else to effect the change of video content I'm after, 'Olay.flv' I think. I have tried so hard to research into this but it just doesn't work. Is the problem to do with that :- 1) You can't ID something within <script>, ie BIGCHANGE in this instance. 2) innerHTML is only really for text replacement, not the amount of script I've stuck into it to replace within the whole <TD> cell with ID 'VID' (ie the main flash player) even though I've used delimiters and everything within the innerHTML data to try and not confuse it with apostrophes within speach marks, etc Any thoughts where I'm going wrong? Maybe Im barking up the wrong tree on this! Thanks so much guys for any headsup on a solution to this as I've been up all night for about a week on this! Dom I wish to know how I can count how many lines there are by searching the innerHTML of a div can anyone suggest how this can be done? also when the new line is added in my code it clears the content of all the existing fields if there was anything in them before the add link was clicked Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript"><!--
function addmore() {
// count existing boxes to find out next number to use.
// ?
document.getElementById('namesdiv').innerHTML += '<textarea name="name_added" cols="30" rows="2"></textarea><br>';
document.getElementById('addressesdiv').innerHTML += '<textarea name="address_added" cols="30" rows="2"></textarea><br>';
document.getElementById('mobilesdiv').innerHTML += '<textarea name="mobile_added" cols="30" rows="2"></textarea><br>';
}
--></script>
</head>
<body>
<form>
<div style="width: 850px;">
<div id="namesdiv" style="float: left; padding-right: 10px;">Client's Names<br>
<textarea name="name1" cols="30" rows="2"></textarea><br>
<textarea name="name2" cols="30" rows="2"></textarea><br>
<textarea name="name3" cols="30" rows="2"></textarea><br>
<textarea name="name4" cols="30" rows="2"></textarea><br>
<textarea name="name5" cols="30" rows="2"></textarea><br>
</div>
<div id="addressesdiv" style="float: left; padding-right: 10px;">Client's Addresses<br>
<textarea name="address1" cols="30" rows="2"></textarea><br>
<textarea name="address2" cols="30" rows="2"></textarea><br>
<textarea name="address3" cols="30" rows="2"></textarea><br>
<textarea name="address4" cols="30" rows="2"></textarea><br>
<textarea name="address5" cols="30" rows="2"></textarea><br>
</div>
<div id="mobilesdiv" style="float: left;">Client's Mobile numbers<br>
<textarea name="mobile1" cols="30" rows="2"></textarea><br>
<textarea name="mobile2" cols="30" rows="2"></textarea><br>
<textarea name="mobile3" cols="30" rows="2"></textarea><br>
<textarea name="mobile4" cols="30" rows="2"></textarea><br>
<textarea name="mobile5" cols="30" rows="2"></textarea><br>
</div>
</div>
<br style="clear: both;">
<a href="" onClick="javascript:addmore(); return false;" >Add more</a>
</form>
</body>
</html>
Hello, all. I have a common problem, but despite my research I have been unable to find a solution that works for my situation. I have a large image and several thumbnails below it. I am working with a content management system, so I am able to edit the output of the anchor text around the image, the divs around the image, but NOT the actual image string itself. The images do have some classes built into them, but no IDs. Anyways, I want the main image source to change based on the href of the thumbnail below. So if you click on any one of the thumbs, the href for that thumbnail populates as the source for the main image. Here is my code so far: Code: <div class="images" id="big-image"> <a href="dianaminiflash_shop0001-11.jpg"> <img width="500" height="500" src="dianaminiflash_shop0001-11-500x500.jpg" class="attachment-shop_single wp-post-image" /></a> <div class="thumbnails"> <a href="dianamini_en-rose_front1.jpg" title="dianamini_en-rose_front" rel="thumbnails" class="product-thumb first"> <img src="dianamini_en-rose_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> <a href="diana-mini_fern-green_front1.jpg" class="product-thumb "> <imgsrc="diana-mini_fern-green_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> <a href="diana-mini_flashkit_white_front1.jpg" class="product-thumb last"> <img src="diana-mini_flashkit_white_front1-200x200.jpg" class="attachment-shop_thumbnail" /></a> </div> </div> One of the things I've tried that has not worked but has been offered up as a solution on this forum and others is: Code: $(".thumbnails a").click( function() {
var changeSrc = $(this).attr("href");
$(".attachment-shop_single").attr("src", changeSrc);
return false;
});
Any suggestions on what I'm doing wrong here? I really appreciate the help in advance. Hi everyone, I'm needing some help capturing just the file name rather than the entire path of the SRC on my input type="image". Basically when I hover over an image, the Default Image should change to the image being hovered on. Here is my code, can't quite get it to work. Sorry I'm very new to JavaScript Code: <html>
<head>
<script language = "Javascript">
function ChangeDefault(src)
{
//document.frmMain.DefaultImage.src = src <--Doesn't work at all
alert(src) //<---Displays the entire file path, want just file name
}
</script>
</head>
<body>
<form name="frmMain">
<input type="image" name="DefaultImage" SRC="RWDie1.bmp" HEIGHT=110 WIDTH=160 />
<br />
<input type="image" name="img2" SRC="RWDie2.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
<input type="image" name="img3" SRC="RWDie3.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
<input type="image" name="img4" SRC="RWDie4.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
<input type="image" name="img5" SRC="RWDie5.bmp" HEIGHT=110 WIDTH=160 onMouseOver="ChangeDefault(src)" />
</form>
</body>
</html>
Hi everyone, I am looking for JS script to replace find all the href values on a page and replace those href values matching them with an array of values. my array, lets say is a = {'some.ex.com', 'abc.ex.com/tv', 'some.name.ex.com', 'bcd.ex.com/dir1/dir2/some.jsp' }; etc i want to find all the URLs on a given page, check if each found url matches with any of the values in the array, if match found, just replace only "ex.com" with "example.com" for every match. I am all new to JS and please please help Many thanks I have selection boxes that when you choose an option an associated picture is supposed to display.. the problem is that with IE i can use whatever attribute i want and i get the desired effect except with the label attribute which happens to be the only attribute (i know of) that firefox will work with... IE still swaps the picture but also changes the text in the selection box to the img url.. here are my codes: Code: function swapImage(){
var theImage2Display = document.comp.caseselect.options[document.comp.caseselect.selectedIndex].label;
var imagePlace = document.getElementById("caseimg");
imagePlace.src = theImage2Display;
}
and in the html Code: <img src="start.jpg" id="caseimg" /> <select name="caseselect" style="width:625px" onchange="Calculate(); swapImage();"> <option label="start.jpg" value="0" selected="true">Case</option> <option label="COOLER MASTER Elite 310red.jpg" value="50">COOLER MASTER Elite 310 Red ($50.00)</option> <option label="COOLER MASTER Elite 310blue.jpg" value="50">COOLER MASTER Elite 310 Blue ($50.00)</option> <option label="COOLER MASTER Elite 310orange.jpg" value="50">COOLER MASTER Elite 310 Orange ($50.00)</option> <option label="COOLER MASTER Elite 310silver.jpg" value="50">COOLER MASTER Elite 310 Silver ($50.00)</option> </select> 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 http://acmeous.blogspot.com/2008/07/...-on-mouse.html, 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 http://www.willmaster.com/library/fe...r_div_swap.php 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: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
.mybox { width:full; height:115px; border-color:black; border-style:solid; border-width:1px; padding:0px; }
</style>
<script type="text/javascript" language="JavaScript"><!--
function HideDIV(d) { document.getElementById(d).style.display = "none"; }
function DisplayDIV(d) { document.getElementById(d).style.display = "block"; }
--></script>
<div id="imageDiv" class="mybox" style="display:none;">
large image here of same dimensions as DIV
</div>
<span onmouseover="HideDIV('initDiv');DisplayDIV('imageDiv')" onmouseout="HideDIV('imageDiv');DisplayDIV('initDiv')" style="cursor:pointer">
<div id="initDiv" class="mybox">
<table><tr><td>lots of text<td>thumbnail</table>
</div>
</span>
</html>
I'm trying to create a jquery nav that will show up in place of the existing paragraph or div with a ul, then on the mouse out replace the existing paragraph. I'm not not too experienced with javascript, so I'm hoping it's just a simple and easy fix. This is what I have so far. I managed to get it to work, somewhat, but the paragraph shows up if you mouse off the main button over the ul. And for some reason it doesn't always show the menu on the mouse over, is picky about which ones it does. Code: $(document).ready(function(){
var showMenu = function ( el, menu, p )
{
var o = $(el).offset();
$(menu).clearQueue();
$(menu).css( { "left":o.left-122 + "px", "top":o.top+40 + "px", "z-index":100 } );
$(menu).stop().fadeIn(1);
$(menu).mouseover( function () {
$(this).clearQueue();
$(this).stop().fadeIn(1);
});
$(menu).mouseout( function () {
$(this).clearQueue();
$(this).stop().fadeOut(1);
});
$(el).bind( 'mouseout', {target:menu}, function(e) {
$(e.data.target).stop().fadeOut(1);
});
$(el).bind( 'mouseover', function() {
$(p).fadeOut(1);
});
$(el).bind( 'mouseout', function() {
$(p).fadeIn(1);
});
}
var n=0;
$(document).ready(function() {
$('a#learn').mouseover( function() { showMenu($(this),$('div.subnavlearn'),$('p.learn')); });
$('a#connect').mouseover( function() { showMenu($(this),$('div.subnavconnect'),$('p.connect')); });
$('a#act').mouseover( function() { showMenu($(this),$('div.subnavact'),$('p.act')); });
});
});
see it live he http://dev.joshuadnelson.com/clients/postgrowth/ For part of my program I need a function that will switch two images, so when image 1 is clicked on, the function saves image 1, then image 2 is clicked on, and the spot where image 2 is receives the first image, while the place where image 2 was becomes the first image, a simple swapping function. yet, I'm having trouble writing it; this is what I have: <script> click=1 function swap(What input do I need? the img src?){ if (click==1){ var1=imgsrc click=2 } else{ var2=imgsrc //then switch them so: x=var1 var1=var2 var2=x click=1 } } </script> ok so i need help.... I need to create a page containing five image tags, two buttons, a <select> and a <textarea>. 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 <select>..... 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 <select>....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 <head> <style> input{background-color:#B0D0BC;text-align:center} </style> <script> 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] } </script> <div align="center"><center><table border="4" cellpadding="5" bgcolor="#E0E0DC"> <tr> <td> <img src="c_01.jpg" alt="100" onclick="swap(0)"></td> <td> <img src="c_02.jpg" alt="100" onclick="swap(1)"></td> <td> <img src="c_03.jpg" alt="100" onclick="swap(2)"></td> <td> <img src="c_04.jpg" alt="100" onclick="swap(3)"></td> <td> <img src="c_05.jpg" alt="100" onclick="swap(4)"></td> </tr> <tr> <td colspan="5" align="center"> Select A Value: <select name="hi"> <option value="hi1" onchange="swap(0)">1</option> <option value="hi2" onchange="swap(1)">2</option> <option value="hi3" onchange="swap(2)">3</option> <option value="hi4" onchange="swap(3)">4</option> <option value="hi5" onchange="swap(4)">5</option> </select> </td> </tr> <tr> <td colspan="5" align="center"> <input type="button" onclick="roll()" value="roll them"> <br> <textarea name="t" cols="40" rows="12" >History Of Roles</textarea> Aloha, I'm trying to make a page that changes a pic to match the paragraph the user's mouse is over. Page is here, http://rentalocal.thad.com/sample1 The problem I have is that the page reloads the initial image (the map) every time I move my mouse from one list item to the next, before it loads the next pic. It only does this the first time, but it's annoying, slow, and makes my page look bad. I tested it using both Safari and Firefox and got the same results. Does anyone know how I should correct it? TIA, Thad Code: <ul class="borderit" onmouseout="document.getElementById('picture').src='/pic0.jpg'">
<li onmouseover="document.getElementById('picture').src='/pic1.jpg'">
We are picked up at our hotel in Waikiki. We are greeted with aloha, and fresh leis too.
Our destinations are numerous, so let's get started!
</li>
<li onmouseover="document.getElementById('picture').src='/pic2.jpg'">
We drive away from Waikiki toward the Windward side of O'ahu. Along the way, we see Diamond Head.
We stop at a scenic lookout for our first pictures of the day.
</li>
<li onmouseover="document.getElementById('picture').src='/pic3.jpg'">
From there we view at Koko Crater and Hanauma Bay. Next we stop at the Halona Blowhole,
where the waves force water through a lava tube and into the sky as high as 30 feet!
</li>
<li onmouseover="document.getElementById('picture').src='/pic4.jpg'">
We continue along past the amazingly beautiful blue costal waters. Have you ever seen waters so blue?
</li>
<li onmouseover="document.getElementById('picture').src='/pic5.jpg'">
We are now far from the hustle and bustle of Honolulu and Waikiki. We stop for a visit to one of the many
fantastic local beaches, but not for long, we have much more to see!
</li>
<li onmouseover="document.getElementById('picture').src='/pic6.jpg'">
As we continue we reach a local macadamia nut farm where we stop to buy some flavorful gifts for friends
back home. We make more visits to an art gallery, a ranch, a local restaurant
for some ono (Hawaiian word for yummy) food.
</li>
<li onmouseover="document.getElementById('picture').src='/pic7.jpg'">
We make a stop at Laie Point, and learn about its Hawaiian legend.
</li>
<li onmouseover="document.getElementById('picture').src='/pic8.jpg'">
From there we continue on to the North Shore. We stop at a few of the world-famous beaches and observe
some of the day's surfers. We even get a chance to swim with a honu (turtle).
</li>
<li onmouseover="document.getElementById('picture').src='/pic9.jpg'">
After a stop at a shrimp truck, we get to Hale'iwa Town for some shopping and dining. We get some yummy Matsumoto Shave Ice.
</li>
<li onmouseover="document.getElementById('picture').src='/pic10.jpg'">
After leaving the North Shore we begin our return the Waikiki. We travel through wonderfully fragrant pineapple fields.
We stop at the Dole Plantation and try not to get lost in the world's largest maze.
</li>
<li onmouseover="document.getElementById('picture').src='/pic11.jpg'">
On our way back to town we visit the National Cemetery at Punchbowl and the State Capitol.
</li>
<li onmouseover="document.getElementById('picture').src='/pic12.jpg'">
Our final stop is another scenic point for one last view of the day.
</li>
<li style="margin-bottom:.5em" onmouseover="document.getElementById('picture').src='/pic13.jpg'">
We return to our hotel. Today we saw so many wondrous sights, took countless pictures, heard about Hawaiian history and legend,
sampled some local food, discovered some Hawaiian treasures, and learned some Hawaiian language. This will be a memory
that we will recall for the rest of our lives.
</li>
</ul>
Hello All! First I would like to say that I have attempted to find an answer to my issue and there is obviously an enormous amount of help across this and other forums regarding how to use Javascript to modify your CSS styles including changing the z-Index property. I am to the point where I believe maybe it just needs an extra set of eyes to help me understand what I am doing wrong here! My dilemma is that I have a table on my site which has four images, one for different areas of the site. Below that table area, I have a space where I plan to display the text describing those sections upon mouse rollover. My goal is to have an outer div tag with position relative and then contain 4 div tags inside of that with position absolute so that I can stack them under the background all with negative z-Indexes. I have a javascript that is called on mouse over and mouse out to raise the z-Index of each div text area, but it is not working. See the code below: Javascript for the z-Index change: Code: <script type="text/javascript">
<!--
//function to change zIndex
function swapMyImages(obj,z){
var theObj;
//ie4
if(document.all){
theObj=document.all(obj);
theObj.style.zIndex=z;
}
//ie5,6, Mozilla 1.0 and Opera 6
if(document.getElementById){
theObj=document.getElementById(obj);
theObj.style.zIndex=z;
}
//nn4x
if(document.layers){
theObj=document.layers[obj];
theObj.zIndex=z;
}
}
//-->
</script>
</head>
Anchor for one of the images with mouse overs attached: Code: <a class="thumb" href="..." title="Visit Our Shop" onmouseover="swapMyImages('shoptext','10')" onmouseout="swapMyImages('shoptext','-10')"><img src="images/hometable_back.jpg" width="190" alt="Tee Shirt Shop" longdesc="..." /></a>
my Div section with the text areas set to negative z-Index: Code: <div id="hometext">
<div id="servicetext">service text here</div>
<div id="shoptext">shop text here</div>
<div id="portfoliotext">[portfolio text here</div>
<div id="contacttext">contact text here</div>
</div>
my style sheet items for the divs: Code: .hometext {
position:relative;
float: none;
left:0px;
top:0px;
text-align:center;
z-index:-10;
}
#servicetext {
position:absolute;
float: none;
left:0px;
top:0px;
text-align:center;
z-index:-10;
background-color:#000000;
}
#shoptext {
position:absolute;
float: none;
left:0px;
top:0px;
text-align:center;
z-index:-10;
background-color:#000000;
}
#portfoliotext {
position:absolute;
float: none;
left:0px;
top:0px;
text-align:center;
z-index:-10;
background-color:#000000;
}
#contacttext {
position:absolute;
float: none;
left:0px;
top:0px;
text-align:center;
z-index:-10;
background-color:#000000;
}
How does one go about swapping the Javascript Source file for another on when a checkbox is clicked, obviously the sources have to revert to their normal state on reload or unchecking the checkbox: this would be the original source: <script type="text/javascript" src="Includes/eng_chars.js"></script> it would be swapped for this souce file on checkbox checked: <script type="text/javascript" src="Includes/heb_chars.js"></script> and then returned to <script type="text/javascript" src="Includes/eng_chars.js"></script> when the checkbox is unchecked, page is reloaded or the the reset (clear form) button is pushed Thanks hi everyone. i have to create the 15 puzzle game and im having a difficult time getting started. can anyone help? i need to create a table (4x4) that has one empty space. All the other spaces must have a random generated value between 1 and 15. All i got so far is a onclick image swapping function.... need help! thanks
Hi, everyone. I've been scratching my head about what's wrong with my script for awhile now. What I need to do is use the swapImages(id1,id2,id3) function to simply swap three images at an interval of 2 seconds. What happens with my script is that the first image shows up, and after 2 seconds, it switches to the next one. The problem is that the images start rapidly switching infinitely after those first two seconds. Could someone point out where the problem spot in my code is? Here's the code from my external js file: Code: function swapIt(id1,id2,id3)
{
var object1 = document.getElementById(id1);
var object2 = document.getElementById(id2);
var object3 = document.getElementById(id3);
var z1 = object1.style.zIndex;
var z2 = object2.style.zIndex;
var z3 = object3.style.zIndex;
object1.style.zIndex = z3;
object2.style.zIndex = z1;
object3.style.zIndex = z2;
}
Here's the code invoking this function in my html file: Code: function moveAvalon()
{
var x = xCoord("avalon");
if(x <= (W - 125))
{
shiftIt("avalon", 10, 0);
setInterval("moveAvalon()", 50);
}
else if(x > (W - 125))
{
swapImages();
}
}
function swapImages()
{
showIt("kids");
showIt("fiction");
showIt("nfiction");
setInterval( 'swapIt("kids", "fiction", "nfiction")' , 2000);
}
So i have this weird problem that only occurs in IE, in combination with Adsense. I also tried FF and Chrome and it does not occur in those browsers. I use javascript to swap around divs, since css 'order' is not supported in every browser (at least not working for my iphone 4). The swapping is working fine in IE when you resize from a screen larger than 1024 to a screen smaller than 1024 and then to a screen larger than 1024. However it does not work well when you open the page/script in a screen smaller than 1024 and then make it larger (in IE). The sidebar 'aside' stays on the right side after 'article' instead of moving to the left. This only happens when i use adsense in the sidebar.. Otherwise it all works fine... Very weird to me.. Anyone who can help out? See this weird problem he JS Bin Here is the code: Code: <html>
<head>
<style>
html,
body {
padding: 0;
margin: 0;
background: #eee;
}
body {
padding: 0 3%
}
header,
footer,
.slogan,
.page-wrapper,
.headline-wrapper,
aside,
article {
box-sizing: border-box
}
.slogan,
aside,
article {
background: #fff
}
aside,
article {
padding: 20px;
border-radius: 10px;
margin: 10px 0 0 0;
-webkit-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.5);
}
header,
footer {
padding: 20px
}
@media (min-width:1024px) {
.page-wrapper,
header,
footer {
width: 100%;
margin: 0 auto;
max-width: 1200px;
}
.page-wrapper {
display: table;
width: 100%;
padding-top: 50px;
max-width: 1200px;
margin: 0 auto;
}
.page-wrapper > aside,
.page-wrapper > article {
display: table-cell;
padding: 20px;
}
.page-wrapper aside {
width: 30%
}
article {
position: relative
}
.slogan {
padding: 0 20px;
border-bottom: 0px;
width: 100%;
margin: 0;
line-height: 50px;
height: 50px;
position: absolute;
left: 0;
top: -50px;
}
.slogan {
border-radius: 10px 10px 0 0;
-webkit-box-shadow: 0px -2px 2px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: 0px -2px 2px 0px rgba(50, 50, 50, 0.3);
box-shadow: 0px -2px 2px 0px rgba(50, 50, 50, 0.3);
background: #ddd;
}
article {
border-radius: 0 0 10px 0
}
aside {
border-radius: 10px 0 0 10px
}
}
</style>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>
function handleMargins() {
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if(width < 1024) {
$(".page-wrapper").each(function() {
var detach = $(this).find("aside").detach();
$(detach).insertAfter($(this).find("article"));
})
}
if(width >= 1024) {
$(".page-wrapper").each(function() {
var detach = $(this).find("article").detach();
$(detach).insertAfter($(this).find("aside"));
})
}
}
jQuery(document).ready(handleMargins);
$(window).resize(handleMargins);
</script>
</head>
<body>
<header>header</header>
<div class="page-wrapper">
<aside> sidebar <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- N_Responsief_Alle_CTR_AlleAdsenseSites -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3961745091197220"
data-ad-slot="3968514626"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></aside>
<article>
<h3 class="slogan">One line slogan only
</h3>
<p>This is the articlediv</p>
</article>
</div>
<footer>footer</footer>
</body>
</html>
Reply With Quote 12-23-2014, 03:35 PM #2 sunfighter View Profile View Forum Posts Senior Coder Join Date Jan 2011 Location Missouri Posts 4,830 Thanks 25 Thanked 672 Times in 671 Posts You need a doctype! maybe add <!DOCTYPE html> at the top of this code. IE needs a doctype or it is screwy. Below is the code. My function: Code: function swap_content(id1,id2)
{
var tmp = document.getElementById(id1).name;
var theval = document.getElementsByName('primary_propertyp_id')[0].value;
document.getElementById(id1).name = document.getElementsByName('primary_propertyp_id')[0].name;
document.getElementsByName('primary_propertyp_id')[0].name = tmp;
document.getElementById(id2).id = document.getElementById('primary').id;
document.getElementById('primary').id = 'addressid_'+theval+'_div';
}
Applicable Code for primary info: Code: <div id="primary"> <label>primary to secondary:</label><input name="primary_propertyp_id" type="text" id="addressid_<? echo $row['primary_property_id']; ?>" value="<? echo $row['primary_property_id']; ?>"/> </div> Applicable Code for secondary info/link to change: Code: echo "<div id=\"addressid_" . $properties_row['id'] . "_div\">"; echo "<a href=\"#\" onclick=\"swap_content('addressid_" . $properties_row['id'] . "','addressid_" . $properties_row['id'] . "_div'); return false\">Make Primary</a>"; echo "<input id=\"addressid_" . $properties_row['id'] . "\" name=\"addressids[]\" value=\"" . $properties_row['id'] . "\" type=\"text\">"; echo "</div>"; This is running through a PHP loop so it's making multiple divs and links for the secondaries. I am wanting to be able to swap out any of them to make them 'primary'....this works for the first click, but after the first click it makes every div id and input name the same as the first that was clicked. It's also not working AT all if i click on the bottom link first, then a link above it. Top-down works, bottom-up doesn't...Please help Thanks in advance, Jeremy I've created a javascript version of the classic game SOKOBAN. Basically what happens is you move the man around the "warehouse" and he must push the boxes into the target area. Copy the code and try it yourself to see what I have so far (note-he can't move the boxes yet). My question is: Right now, my map consists of solid color blocks. What I WANT them to be is image files (for example: box.png, wall.png, floor.png) to add a little versatility and life to the map. I am not sure how to make this switch though. I suspect I make the change somewhere in the tile array in the initialize function, but I am not sure what.. Also, how can I get the boxes to actually MOVE? I.e. when my man pushes them, they move around in the direction he pushes? Any help would be much appreciated. Thank you kindly Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sokoban</title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 48px;
}
#warehouse
{
width: 680px;
height: 400px;
position: relative;
}
.box
{
background-size: contain;
}
.box, #man
{
margin: 0;
padding: 0;
display: inline-block;
width: 40px;
height: 40px;
float: left;
}
</style>
<script type="text/javascript">
var map_width = 17;
var map_height = 10;
var grid;
var player_x;
var player_y;
var tile;
function initialize()
{
grid = new Array();
grid[0] = new Array(0,0,0,0,0,5,5,5,5,5);
grid[1] = new Array(0,0,0,0,0,5,2,5,2,5);
grid[2] = new Array(0,0,0,0,0,5,2,2,2,5);
grid[3] = new Array(0,0,0,0,0,5,1,1,1,5);
grid[4] = new Array(0,0,0,0,0,5,1,1,1,5);
grid[5] = new Array(0,0,0,0,0,5,1,1,1,5);
grid[6] = new Array(0,0,0,0,0,5,1,1,1,5);
grid[7] = new Array(0,0,0,0,0,5,5,1,5,5);
grid[8] = new Array(5,5,5,5,5,5,5,1,5,0);
grid[9] = new Array(5,1,1,1,5,1,1,1,5,0);
grid[10] = new Array(5,1,3,1,1,1,3,1,5,0);
grid[11] = new Array(5,1,5,1,1,1,3,1,5,0);
grid[12] = new Array(5,1,1,1,3,5,3,1,5,0);
grid[13] = new Array(5,1,1,1,1,1,1,1,5,0);
grid[14] = new Array(5,1,5,5,5,5,1,1,5,0);
grid[15] = new Array(5,5,5,0,0,5,1,1,5,0);
grid[16] = new Array(0,0,0,0,0,5,5,5,5,0);
player_x = 14;
player_y = 1;
tile = new Array(
'green', /* grass */
'#202020', /* interior floor */
'red', /* target */
'brown', /* crate */
'brown', /* crate sitting on target */
'orange' /* brick */
);
draw_background();
position_man();
}
function draw_background()
{
for (var y = 0; y < map_height; ++y)
{
for (var x = 0; x < map_width; ++x)
{
var box = document.getElementById('box_' + x + '_' + y);
box.style.backgroundColor = tile[grid[x][y]];
}
}
}
function position_man()
{
var man = document.getElementById('man');
man.style.position = 'absolute';
man.style.left = 40 * player_x + 'px';
man.style.top = 40 * player_y + 'px';
}
function safe_check(x, y)
{
if (x >= 0 && x < map_width && y >= 0 && y < map_height)
return grid[x][y];
return -1;
}
function handle_key(e)
{
var move_x = 0;
var move_y = 0;
switch(String.fromCharCode(e.which).toLowerCase())
{
case 'w':
move_y = -1;
break;
case 'a':
move_x = -1;
break;
case 's':
move_y = 1;
break;
case 'd':
move_x = 1;
break;
default:
return false;
}
var s = safe_check(player_x + move_x, player_y + move_y);
if (s > 2)
{
return true;
}
player_x += move_x;
player_y += move_y;
position_man();
return true;
}
</script>
</head>
<body onkeypress="handle_key(event)">
<div id="warehouse">
<img src="man.png" id="man" />
</div>
<table>
<tr>
<th>up</th>
<th>left</th>
<th>down</th>
<th>right</th>
</tr>
<tr>
<th>W</th>
<th>A</th>
<th>S</th>
<th>D</th>
</tr>
</table>
<script type="text/javascript">
var warehouse = document.getElementById('warehouse');
for (var y = 0; y < map_height; ++y)
{
for (var x = 0; x < map_width; ++x)
{
var box = document.createElement('div');
box.id = "box_" + x + "_" + y;
box.className = "box";
warehouse.appendChild(box);
}
}
initialize();
</script>
</body>
</html>
|
|||||||