|
JavaScript - Weird: Adsense Ruins Javascript Swapping Divs?
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. Similar TutorialsI'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>
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> 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 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;
}
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 For some reason i cant get this bit of code to work. You can ignore the php and html if its getting in your way. Thanks: Code: <div id="pl">
<?
if($edit == true){
?>
<script type="text/javascript">
$("#add_playlist_form").css({display:"none"});
$("#add_playlist").click(function(){
alert($("#add_playlist").html());
if($("#add_playlist").html() == "Add a Playlist >>"){
$("#add_playlist").html("Hide <<");
$("#add_playlist_form").css({display:"block"});
}
else{
$("#add_playlist").html("Add a Playlist >>");
$("#add_playlist_form").css({display:"none"});
}
});
</script>
<a href="#" id="add_playlist">Add a Playlist >></a>
<form id="add_playlist_form" method="POST" action=" ">
<input type="text" name="pl_name" class="add_playlist"/>
<textarea name="pl_dsec" maxlength="200"></textarea>
<input type="submit" name="submit_playlist" value="Add Playlist" class="submit_playlist"/>
</form>
<?
}
?>
<ul class="vList">
I want to be able to rotate Adsense ads. 3/4 of the time, it will be someone else's. 1/4 of the time, it will be mine (my code is displayed already). However, the code I tried doesn't work. Can someone tell me how to fix this - Code: <script language="JavaScript"> images = new Array(4); //the following string is really all on one line images[0] = '<script type="text/javascript">google_ad_client = "ca-pub-4811954214954647";google_ad_slot = "2713945203";google_ad_width = 728;google_ad_height = 90;</script><script type="text/javascript"src="http: //pagead2.googlesyndication.com/pagead/show_ads.js" ></script>'; images[1] = 'other code'; images[2] = 'other code'; images[3] = 'other code'; index = Math.floor(Math.random() * images.length); document.write(images[index]); //done </script> Hello guys, I am working with javascript and currently have the below code set up. This works well, however I would like to change the "select box" to a "search box"- When the user enters a search string, the matching DIV appears. If there is no matching DIV then "sorry nothing found" appears. Is this possible at all? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<script type="text/javascript">
function show(obj) {
no = obj.options[obj.selectedIndex].value;
count = obj.options.length;
for(i=1;i<=count;i++)
document.getElementById('fleet'+i).style.display = 'none';
if(no>0)
document.getElementById('fleet'+no).style.display = 'block';
}
</script>
<form name="myForm">
<select onchange="show(this)">
<option value="1">Please Choose</option>
<option value="2">120</option>
<option value="3">121</option>
<option value="4">122</option>
</select>
</form>
<div id="fleet1" style="display:block">Please Choose <br>
</div>
<div id="fleet2" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"
bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<?php include("php/fleet/includes/table.php"); ?>
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/php/fleet/120.php";
include_once($path);
?></tr></table>
</td>
</tr>
</table></div>
<div id="fleet3" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"
bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<?php include("php/fleet/includes/table.php"); ?>
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/php/fleet/121.php";
include_once($path);
?></tr></table>
</td>
</tr>
</table></div>
<div id="fleet4" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"
bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<?php include("php/fleet/includes/table.php"); ?>
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/php/fleet/122.php";
include_once($path);
?></tr></table>
</td>
</tr>
</table></div>
</body>
</html>
demo can be seen he http://www.nctfleetlist.co.uk/div.php 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>
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. 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> 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 Hi! I'm working on a website where I need some help with open and closing divs using javascript. This is the website: clashjeans.se/test/styles.html As you can see I'm using a javascript to open each jeans style link, I don't know if this is the best way to do it, but it's how I've done it so far. If you click the "Frankie style link" at the bottom the div called Frankie will show and you will see a little image in that div that says "next wash". What I would like this link to do is to close the frankie div and open up another wich looks almost the same as the previous, the only thing that will change is the pictures actually. Please help me solve this problem, any suggestion about how to make this work will be highly appreciated! When I paste the adsense code on my website home page, between lines 387 and 397, the ad doesn't show. Much more strangely, it makes the ad coming from line 408 disappear - that one was visible before. Any ideas why? my site is roboticmagazine.com Thanks 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;
}
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/ I have an javascript coding issue with regards to a tabbed menu. The code is supposed to hide the unselected divs and show the selected div, but all divs are showing and no tab is selected when the page initialises. The source code is viewable he http://www.kenaani.co.uk I was following this tutorial: http://www.elated.com/articles/javascript-tabs/ Which works fine in this example: http://www.elated.com/res/File/artic...ript-tabs.html I have tried commenting out the other scripts, and the divs still show on the page, so I don't think its a conflicting issue. Am hoping that someone can spot whatever is going wrong. Hi, Sorry for the (HELP!) addition in the title, but i'm just stumped here. I am trying to show and hide div layers when I click on a button in a flash movie. The flash movie is in it's own div and the content below is also in it's own div. Is there a way to call the function from flash so that content in another div is affected? The code to show and hid layers in html is working and is he Code: //visible layers
function $_(IDS) { return document.getElementById(IDS); }
function setVisible( IDS ) {
var obj;
var sel = $_('divContent').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
obj = sel[i].id;
if (obj != IDS) { $_(obj).style.display = 'none'; }
else { $_(obj).style.display != 'block' ? $_(obj).style.display="block" : $_(obj).style.display="none"; }
}
}
window.onload = function() {
setVisible('BIO');
};
</script>
</head>
<body>
<div id="navigation">
<a href="#" onClick="setVisible('BIO'); return false;">Who I Am</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('News'); return false;">What's New</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('Portfolio'); return false;">Portfolio</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('Resume'); return false;">Resume</a>
</div>
<div id="divContent">
<div id="BIO" class='divElem'>
<p>This is my content for bio</p>
</div>
<div id="News" class='divElem'>
<pThis is my content for news</p>
</div>
<div id="Portfolio" class='divElem'>
<p><This is my content for portfolio </p>
</div>
<div id="Resume" class='divElem'>
<p>This is my content for resume</p>
</div>
</div>
</body>
Is there a way to call the function in flash on a button? Any help you can give would be GREATLY appreciated. Thanks and forever indebted. Gerry I have a page where it has anchors going to different parts of the page and i have a list of links at the top to go to each anchor. when you click on the links to each part of the page it shows the "back to top, next, back" buttons. I have 7 different links, so i need to have this happen 7 times, I only want the "back to top, next, and back" buttons to be shown when the user clicks on the link to that specific anchor, or the next/back button to that anchor from another one. I have been doing this with the div hide/show javascript however it makes me have to change sooo much information to do this.. There has got to be an easier way.. It would take me forever to finish doing this to all of them, i need a better way to achieve this. There's too much code that its confusing. this is my current javascript: var ie = (document.all) ? true : false; function hideID(objID){ var element = (ie) ? document.all(objID) : document.getElementById(objID); element.style.display="none" } function showID(objID){ var element = (ie) ? document.all(objID) : document.getElementById(objID); element.style.display="block" } And this is just one of the links: <li><a onclick="showID('1939top'); showID('1939next');hideID('1940top'); hideID('1941top'); hideID('1942top'); hideID('1943top'); hideID('1944top'); hideID('1945top');" href="#1939">1939</a></li> And this is one of the back to top/next button codes: <a href="#1940"><span id="1939next" class="next-back" onclick="hideID('1939next'); hideID('1939top')"><div class="arrow-down"></div></span></span></a> <a href="#top"><span id="1939top" class="timeline-b2top" onclick="hideID('1939top')">Top</span></a><a name="1939" id="1939"></a> This code has always been a huge problem for me, not only does it take forever to change the effects and all, but it is VERY messy and I really need some help on how to code it lol. Thanks so much. Hi! I'm no JavaScript expert so wonder if you could help? I have a page with four divs, and would like to change the content in each div by clicking on a link under each div. Can this be done with JavaScript? I've searched everywhere for the last three hours and cannot find any 'readymade' code. Can anyone help me or point me in the right direction? Any help will be really welcome! Thank you! |
|||||||