JavaScript - How Do I Associate An Id With A Content Of A Div?

I realy did not mean over image I ment some like

"text"<br>

then image here


there are 4 parts to this script. I am trying to change it so that there is text content over the image.

part 1

Code:

meta http-equiv="imagetoolbar" content="false" />
<link rel="stylesheet" href='slideshow1.css' type="text/css" />
<script type="text/javascript" src="xfade2.js"></script>


<div id="rotator">


AD One<a href="$siteurl/index.pl" onmouseover=\"Tip('<img src=&quot;/upload/3282.jpg&quot; width=&quot;300&quot;>')\" onmouseout=\"UnTip()\"><img src="imageone.jpg" width="120" height="90" border="0" alt="2 bed/1 bath House" /></a>
Ad TWO1<a href="$siteurl/index.pl" onmouseover=\"Tip('<img src=&quot;/upload/2485.jpg&quot; width=&quot;300&quot;>')\" onmouseout=\"UnTip()\"><img src="imagetwo.jpg" width="120" height="90" border="0" alt="CSS Beauty" /></a>
</div>

the "AD ONE" and "AD two" Content above is what I would like to show up over the image and roate with it.

I think I just need to change something in part 4 of the code but not sure were.


part two


slideshow1.css

Code:

*
{
	margin: 0;
	padding: 0;
}

#rotator
{
	border: 1px solid #000;
	cursor: pointer;
	overflow: hidden;
	margin: 50px auto 10px;
	position: relative;
	width: 120px;
	height: 90px;
}

#rotator img
{
	border: 0;
	cursor: pointer;
	width: 120px;
	height: 90px;
}

p
{
	text-align: center;
}

part 3

slideshow2.css

Code:

#rotator img
{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}

part 4

xfade2.js

Code:

/*
	Image Cross Fade Redux
	Version 1.0
	Last revision: 02.15.2006
	steve@slayeroffice.com

	Rewrite of old code found he  http://slayeroffice.com/code/imageCrossFade/index.html
*/

window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init()
{
	if(!d.getElementById || !d.createElement)return;

	css = d.createElement('link');
	css.setAttribute('href','slideshow2.css');
	css.setAttribute('rel','stylesheet');
	css.setAttribute('type','text/css');
	d.getElementsByTagName('head')[0].appendChild(css);

imgs = d.getElementById('rotator').getElementsByTagName('img');
	
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
	imgs[0].style.display = 'block';
	imgs[0].xOpacity = .99;

	setTimeout(so_xfade,3000);
}

function so_xfade()
{
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[current+1]?current+1:0;
	nOpacity = imgs[nIndex].xOpacity;

	cOpacity-=.05;
	nOpacity+=.05;

	imgs[nIndex].style.display = 'block';
	imgs[current].xOpacity = cOpacity;
	imgs[nIndex].xOpacity = nOpacity;

	setOpacity(imgs[current]);
	setOpacity(imgs[nIndex]);

	if(cOpacity<=0)
	{
		imgs[current].style.display = 'none';
		current = nIndex;
		setTimeout(so_xfade,3000);
	}
	else
	{
		setTimeout(so_xfade,50);
	}

	function setOpacity(obj)
	{
		if(obj.xOpacity>.99)
		{
			obj.xOpacity = .99;
			return;
		}

		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
	}
}

Dear All,

please i want to create content image rotator with thumbs image horizontal and starts automatically.you can understand more when you see http://maktoob.yahoo.com/?p=us

many thanks for your efforts

I can't really get any help over on the greasemonkey forums so hopefully I can get some needed help here.

My goal with a script I am writing is to remove signatures from a forum I am a part of. Some of the people abuse it with half a page of stuff and it's out of control. So here is what the HTML source code for it looks like

Code:

<table cellSpacing="1" width="100%" border="0" class="tback" cellPadding="2">
<tr>
<td width="100" class="headcell">Author</td>

<td class="headcell">Topic</td>
</tr>
<tr vAlign="top" class="cell">
<td align="center">
<div><a href="profile.asp?$sid=&amp;id=5126">Roadwildcat</a></div>
<div class="fcaption">Pee Wee League</div><br><div><img src="images/stars-2.gif" alt="2 Stars"></div><br><img src="Avatars/Georgia.gif" alt="Member Avatar" height="62" width="62"><div class="fcaption">DC Georgia 2020 to Present</div>
<div class="fcaption">115 Posts</div>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><span class="fcaption"><img src="images/oPost.gif" alt="Old Post" height="10" width="10" border="0" align="absmiddle">Posted - 03 January 2011 5:41</span></td>

<td align="right"><a href="myForum.asp?$sid=&amp;mode=compose&amp;to=5126"><img src="images/pm.gif" width="33" height="18" border="0" hspace="3" align="absmiddle" alt="Send Roadwildcat a Private Message"></a><a href="post.asp?$sid=&amp;mode=Quote&amp;id=24958&amp;fid=2&amp;t=24958&amp;fpage=1"><img hspace="3" alt="Reply With Quote" src="images/quote.gif" width="28" height="18" align="absmiddle" border="0"></a></td>
</tr>
</table>
<hr size="1" noshade>I have been trying to set my attendance to the all star games but when I do a game search on the map it is showing no games at all. Anyone else having this problem?<hr size="1"><span class="fcaption">SEC Champions 2022-2027 <br/> National Runner-up 2027 <br/> Recruiting BEAST! <br/> BULLDAWG BOUNCE</span></td>
</tr>

The very bottom where it has the 'span' tag and it says "SEC Champions" is where the Signatures are located. I want to completely remove that using my script and this is what I have right now

Code:

function sigRemove() {
	var sigs = document.getElementsByTagName('span');
	for (var i = 0; i < sigs.length; i++) {
		sigs[i].style.display = 'none';
	}
}

I know it's incomplete but I only want to remove that bottom span tag and everything inside of it and not every span tag on the page. Please help and I apologize for the long post

I am hoping someone can help with this script I found on Javascriptkit.com.

Content Viewer:
http://www.javascriptkit.com/script/...ntviewer.shtml

Basically, the first hidden div to be shown automatically, nor do I want that div to be preselected.

As their demo shows: "Page 1" is auto highlighted and the fist div class named "fadecontent" is shown.

How can I get around this and have something shown (as a holder, until something else is clicked and shown)???

And also not have anything preselected/highlighted???

Any and ALL Suggestions are very much appreciated.

Oh, I kinda figured out how to have something else shown; acting as a cover up. Simply by changing the z-index in the contentfader.js file, and creating an additional div with a higher z-index. However, and of course, the "fadecontent" class remained highlighted automatically, and too, there was is no way to make that layer visible without first clicking on something else.

Hope all that made some sort of sense to someone

Thanks!
Tracy

Hi all,

I was asked by a friend if I could help with a school kids website. The general website stuff I am fine with however they are looking for some interactive content.

Stuff they seem interested in are e.g.quizes, like 10 questions and after you finish you see how many you got right and the correct answers perhaps.

Are there Javascripts available that will do this?

Any ideas on recommendations or any other scripts/content that could be good on a kids site is of interest.

Thanks

I am creating a testimonials page on a customers site, and I am wanting it to be like a scrolling content. I have the border created, and I want to have text inside the border that will scroll sideways displaying a new one every 10 seconds or so, but having the ability to move between the content. Can anyone tell me what sort of script I should use? I've seen something like it before, but I've had a mind blank. I know it's some kind of Java scripting. Any ideas?

Thanks in advance

I have two effects, one is a fadein effect and one is a smooth scrolling effect. I also have a simple image slider but that isn't the problem.

It doesn't seem like the fadein is the problem either because when I had non-scrolling (positioned absolute) content "fadein", it wouldn't fadein in IE but at least it showed up, whereas the main content is blocked in IE with a dialogue about not running scripts or activex.

Is there a way to overwrite this? I tried running the basic example of smooth scrolling in IE9 and it worked fine without being blocked. My code seems the same!

I would be ok with the content just not fading in when using IE9, but if a user doesn't know to enable activex scripts from the dialogue box (assuming they even get a dialogue box), they won't be able to read any of the content which is an issue.

Here's the JavaScript in the head section:

Code:

<script type="text/javascript" src="jquery.js"></script>
<script>
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');}
</script>

<link href="template.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="slider.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true, 
				continuous: true
			});
		});	
	</script>
	
<link href="slider2.css" rel="stylesheet" type="text/css" media="screen" />

<script>
function fadein(){var fade=0,fadein=document.getElementById("fadein").style,ms=(fadein.opacity==0)?0:1,pace=setInterval(Fade,40);function Fade(){if(fade<100){fade+=2;if(ms)fadein.filter="alpha(opacity="+fade+")";else fadein.opacity=(fade/100)}else clearInterval(pace)}};
window.onload=fadein;
</script>

</head>

Hi,
Well this plugin stops working after completely loading the flash content or game. I did a few changes to it but still, it won't show the game after completely loading the flash.
Can someone tell me what's wrong?
Here is the link to live working example http://files.cryoffalcon.com/Piecema...s/testing.html

Hi guys, I am working with a plugin calld Hashslider which is a fairly simple div slider.

Here is the code for startrs Code:

// hashslider v0.9 by manuel huegel, copyright 2010
// mgoys.com


$(document).ready(function(){
					   
//get width and height of the wrapper and give it to the UL	
	var wrapperwidth = $('#slider').width() *  $('#slider ul > li').size();
	$('#slider ul').css('width', wrapperwidth);
	var wrapperheight = $('#slider').height();
	$('#slider ul').css('height', wrapperheight);	
						   
						   
//set my li width
	var width = $('#slider').width();
	$('#slider ul li').css('width', width);

//set my counter vars
	var counter = $('#slider ul > li').size();
	var decount = 1;
	var autocount = 1;
	
//create my number navigation
	var createNum = 1;
	$('#numbers li:first-child').html(createNum).addClass('activenum').attr('id', 'id1');
	while ( createNum != counter) {
	$('#numbers li:last-child').after('<li>  </li>');
	createNum++;
	$('#numbers li:last-child').html(createNum);
	$('#numbers li:last-child').attr('id', 'id' + createNum);
	}
	
//get my number-width (number navigation should always be centered)
	var numwidth = $('#numbers li:first-child').width() * $('#numbers li').size();
	$('#numbers').css('width', numwidth);


	
//slide the button to the next item
function goNext() {
	if ( decount != counter) {
	$('#slider ul').animate({ left: '-=' + $('#slider').width() }, 400, 'swing', function() { });
	$('.activenum').removeClass('activenum').next().addClass('activenum');
	decount++;
	window.location.hash = decount;
	}
}

function goBack() {
	if ( decount != 1) {
	$('#slider ul').animate({ left: '+=' + $('#slider').width() }, 400, 'swing', function() { });
	$('.activenum').removeClass('activenum').prev().addClass('activenum');
	decount--;
	window.location.hash = decount;
	}
}

//make the number clickable
$("#numbers li").click(function() { 
	//$('#info4').html( $(this).html() ); 
	var clickednum = $(this).html() * - $('#slider').width() + $('#slider').width();
	//$('#info4').html( clickednum );
	$('#slider ul').animate({ left: clickednum }, 400, 'swing', function() { });
	$('.activenum').removeClass('activenum');
	$(this).addClass('activenum');
	decount = $(this).html();
	window.location.hash = $(this).html();	
});


//thaths the hash-shizzle
if ( window.location.hash != '') {
//get hash, scroll to position
	var hashnum = window.location.hash.substr(1) * - $('#slider').width() + $('#slider').width();
	$('#slider ul').animate({ left: hashnum }, 0, function() { });
//set counters to position
	decount = window.location.hash.substr(1);
	$('.activenum').removeClass('activenum');
	var hashname = window.location.hash.substr(1);
	$('#id' + hashname).addClass('activenum');
}
	
//get my clickers
$("#right").click(function() { goNext(); });	
$("#left").click(function() { goBack(); });	


//get mousewheel function
$("#slider ul").mousewheel(function(event, delta) { if (delta > 0) { goBack();	event.stopPropagation();event.preventDefault(); } });
$("#slider ul").mousewheel(function(event, delta) { if (delta < 0) { goNext();  event.stopPropagation();event.preventDefault();	} });







});

As you will see the current code loops through all of the slides, and when it reaches the last (or first) the previous and next links become unclickable. I would like to go a stage further than this and make them dissapear entirely.

I don't know how to do this or even to start, I dont even know what function to edit.

Please help guys.

Thanks in advance

Dan

I want to create several pages (they can be text or html) with basic informatons for css formatting.
example:
<div class="appname"
name: this app
<div class="appdetails">
Version: 1.0
Date: 1/1/2011
Description: this is an app
</div>
</div>

I want to be able to save several of these and load them into a web page where they are formatted and displayed.

This needs to be a client side solution so that I can be able to access this offline.

Any suggestions?

Edit: so far I have tried this but I am not sure about it.
<object type="text/html" data="app1.html">

Hi,

I wish to get the content inside a td-tag and use with JS operators.

This is my source.
Code:

<style>
#a {
display : none;
}
</style>

<table>
<tr id="field_id-6">
<td valign="top" width="50%" style="text-align:right;">
<span style="color:#333333;">Number</span>:
</td>
<td valign="top" width="50%" style="text-align:left; overflow:hidden;">
<div class="field_uneditable">120</div>
</td>
</tr>
</table>

<img src="../image.png" id="a">

<script>

var x= ;

if(x>49) {
document.getElementById("a").style.display = "block";
}

</script>

So I need to indicate x as the number 120. But I can't just write 120 beside x, because 120 will change to a new number.

Hello there, I'm an IT student that recently started to learn JavaScript. I'm trying to write a code that starts with a prompt inputs a number like n. Then the code will ask another n prompts for data input. For example I will input 5 for first prompt, code will ask for 5 more prompts for input. Can't figure out how to do it

Hello,

I have been using interstitial boxes for quite a while and have never had a problem. I was required to create an interstitial box this week. When the home page is display in Firefox and Safari, the interstitial box displays right away as it is supposed to do; however, it will not display in Internet Explorer 7 unless you refresh the screen.

Is this a known problem? Is there a way of correcting this?

[URL] http://jpl.coj.net [URL]

Thank you for your help, Elbee

I am using a Theme Tester on my site so normal users can not see the changes being made. If you can help me, please send me a PM & I will give you a temporary login so you can login & see the new site, and the issue I am having.


Basically, I am trying to get this http://flowplayer.org/tools/demos/sc.../navigator.htm scroller to work, but it is not happening at all. Not sure what is going on. Please advise. Thanks!