JavaScript - Banner Click Help

need to make "left click" act as "middle click"

--------------------------------------------------------------------------------

I need to make "left click" act as "middle click" for a web site
....thank you in advance for any and all help...
[CODE]
<script language="javascript">
function Click(4) {
if (event.button==0; 1; )
}
document.onmousedown
</script>>

Hi
I am using the following code to create rotating banners. This all works when I fill in links to swf files on all 5 of my fields and then set a limit in the limit field. What I want to be able to do is have the ability to only have one banner field filled in with the rest blank but this breaks the page when the is nothing in the other 4 fields or have 2 filled in etc etc

Code:

<script>
var maxFlashAdNo=100;
adFlashNo= Math.round(Math.random() * maxFlashAdNo);
var logolimit2="<%=requestItem.getFieldValue("iLogo2")%>";
var logolimit3="<%=requestItem.getFieldValue("iLogo3")%>";
var logolimit4="<%=requestItem.getFieldValue("iLogo4")%>";
var logolimit5="<%=requestItem.getFieldValue("iLogo5")%>";


var secflash=logolimit2;
var thirdflash=logolimit3;
var fourthflash=logolimit4;
var fifthflash=logolimit5;


//alert("2=" + secflash);
//alert("3=" + thirdflash);
//alert("4=" + fourthflash);
//alert("5=" + fifthflash);
//alert(adFlashNo);
if(fifthflash>0&&adFlashNo>fifthflash){
document.write("<%=requestItem.getFieldValue("sLogo5").replaceAll("\"","'")%>");
}else if(fourthflash>0&&adFlashNo>fourthflash){
document.write("<%=requestItem.getFieldValue("sLogo4").replaceAll("\"","'")%>");
}else if(thirdflash>3&&adFlashNo>thirdflash){
document.write("<%=requestItem.getFieldValue("sLogo3").replaceAll("\"","'")%>");
}else if(secflash>2&&adFlashNo>secflash){
document.write("<%=requestItem.getFieldValue("sLogo2").replaceAll("\"","'")%>");
}else{
document.write("<%=requestItem.getFieldValue("sLogo").replaceAll("\"","'")%>");
}

</script>

Hi,

I've created following script:
Code:

<script type="text/javascript">

banners=new Array; 

banners[1]="http://i33.servimg.com/u/f33/14/73/69/91/110.png"; 

banners[2]="http://i33.servimg.com/u/f33/14/73/69/91/210.png"; 

banners[3]="http://i33.servimg.com/u/f33/14/73/69/91/510.png"; 

banners[4]="http://i33.servimg.com/u/f33/14/73/69/91/310.png"; 

banners[5]="http://i33.servimg.com/u/f33/14/73/69/91/410.png"; 

function ShowBANNERS() {

num = Math.random();
num = 1 + ( num * ((banners.length - 1)-1));
num = Math.round(num);

document.write("<style> #i_logo { background-image : url('" + banners[num] + "'); } <\/style>");
}

ShowBANNERS();

</script>

... And I was thinking if there was a way to create a select/value script, were the user can choose on of the banners inside the select/value - like...
Code:

<select>
  <option value="banners1">1. Banner</option>
  <option value="banners2">2. Banner</option>
  <option value="banners3">3. Banner</option>
  <option value="banners4">4. Banner</option>
  <option value="banners5">5. Banner</option>
  <option value="bannerrotator">Random Banner</option>
</select>

<input type="button" value="submit">

The following option will then choose one valued banner, and will be the new banner on the site, when clicking submit (the bannerrotator value, will rotate the banners, so there aren't one chosed all the time).

I can figure out I also have to use cookies to this, but I aren't the best at it (I only know the basic properties).

Thanks (:

Hello,

I'm looking for an option for a rotating banner on a website.

I'd like to have a banner that rotates per visit. I don't mean every time a person returns to a website. I mean person A comes to the site and banner A is displayed. Then person B comes to a site and another banner is displayed.

Is this possible?

Hi guys,

I need some help.

I'm trying to make a banner in java or jquery.
Idea is


div 1
div 2
div 3
div 4

>> custom div1 button >> custom div2 button >> custom div3 button >> custom div4 button

I've also added an image of something i have in mind... i can do the CSS but i can't figure out a good tutorial.


The closest I found on google was this
http://cssglobe.com/lab/easyslider1.7/02.html

but its with numbers..

I have a banner ad at the top of the page (created by javascript). It is sometimes flash, sometimes a div, sometimes just an image (the ad company determines this).

I need it to appear at the top of the page, but I want it to load AFTER all of the rest of the page content has loaded.

Here is a test page I've created to demonstrate this:
http://jeremymoritz.com/js-test.php

Here is the code with the javascript at the bottom so it will load last:
Code:

<html>
<head>
</head>
<body>
	<div id='ad_spot'>
		<!--ad needs to go here-->
	</div>
	<div id='content'>
		<!--Content-->
	</div>
	<div id='load_last'>
		<script defer='defer' type="text/javascript">
			var __fbr_pid  = "1746";
			var __fbr_bid  = "18281";
			var __fbr_sid  = "4568";
			var __fbr_size = "728x90";
			var __fbr_auid = "28762";
			var __fbr_zone = "";
		</script>
		<script type='text/javascript' src='http://ads.foodieblogroll.com'></script>
	</div>
</body>
</html>
</div>

I've tried many things to fix this, but the javascript usually creates elements (iframes, divs, etc.) that are OUTSIDE of container div so manipulating the dom (to move the div or its contents to the <div id='ad_spot'>)has yielded unexpected results.

Thank you in advance for your help!

Hi,

I have an animated banner on my homepage. I have a CSS menu. The CSS menu is appearing behind the JS banner. Only in one version of IE8 (8.0.6001.18702). Other version of IE 8, it works fine.

I have set all the Z-index values in the CSS. I was wondering if you could add anything in the JS. Like for SWF you can set <param name="wmode" value="transparent">.

The site is http://capitalshores.com/

I am using this slideshow:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

Thanks,

Ryan

Hi all,

I am using Javascript for rotating 2 images.

In the head section,

var maxAdNo = 1

var adNo

var myAd = new Array()

myAd[0] = '<img src="images/sponsor-box-1.jpg" width="322" height="306" border="0">'

myAd[1] = '<img src="images/sponsor-box-2.jpg" width="322" height="306" border="0">'


In the body,

<script type="text/javascript">
<!-- Begin
adNo = Math.round(Math.random() * maxAdNo)
document.write(myAd[adNo])
// End -->
</script>

I want to rotate these 2 images 50% / 50% i.e. alternate image to be loaded for every page refresh instead of random. What is to be done?

Thank you in advance.

Hi everybody Im new here and javascript newbie ,so I need your helps
I want to use a left floating banner on my site www.guruht.com so the floating banner don't cover any text content when a visitor zoom in the page or use a very low resolution like 800x600 or 1024x700.
this is the code I use but the banner cover the text :
Code:

<style>
#floating_banner_bottom {
text-align: left;
width: 00%;
bottom: 00px;
margin-bottom: 0px;
height: 50px;
position: fixed;
z-index: 50;
left: 0px;
</style>





<div id="floating_banner_bottom">
<!-- Button to Close Banner -->



<a style="display:scroll;position:fixed;bottom:50px;left:0px">

banner code

<br />

<div class="close">
<a href="#" onclick="document.getElementById('floating_banner_bottom').style.display='none';return false;"> 


<i style="font-family: Georgia,&quot;Times New Roman&quot;,serif;"><span style="background-color: #999999; color: white; font-size: small;"></span></i>

<center>
<img border="0" width="20" height="20" src="http://lh5.ggpht.com/_9vgJ1nwu_xA/S1jSp2ZhA7I/AAAAAAAAB8A/2AEBd4mR9qA/x.png" />
</center>
</a>
</div>

<a/>
</a></a></div>
<!-- End Here -->

Hi people,

I've been asked to build a rotative news/banner switcher. Like you would see on news channel on TV at the bottom.

I am using setInterval() to call an xajax method every X seconds.
Works great. I keep trace of an array index and return the next content everytime it is called. (Not forgeting to roll up the index (or go back to 0 if I reach the end))

So for so good. But I was asked to add mouse events to this. The ability to stop the rolling interval onmouseover and resume onmouseout. Same goes with a pause/play button.

So I kill the interval using clearInterval(), its stops. onmouseout resumes the first timer AND Creates a new one so it doubles the rotations.

I tried various solutions found on google but none of them works at all.
I need help to properly start/stop pause/resume a javascript timer.


now to the code. I'm using a little xajax here but my problem is from javascript.

init() gets called on body onload()
Code:

function init(){
	$xAjax_objResponse = initXajaxObject(); 

	//time script to refresh the banner
        //I also declare the timer variable there.
	$xAjax_objResponse->script("var timerMarquise; xajax_refreshMarquise();");

        //Starts the timer
	$xAjax_objResponse->script(getMarquisePlayScript());
	
	return $xAjax_objResponse;
}

refreshMarquise() sets the banner content

Code:

function refreshMarquise(){
	$xAjax_objResponse = initXajaxObject(); 
	$oRedaction = unserialize($_SESSION["creation2"]["redact"]["obj"]); //Session object

	$oIdee = $oRedaction->getNextIdee(); //Gets the next object containing the info to show
	$innerMarquise = getMarquiseInner($oIdee); //builds the html to show the content
	$xAjax_objResponse->assign("redaction_marquise", "innerHTML", $innerMarquise); //Actually sets the result to the page
	
	//without anything to show, I don't display the banner
	$displayMarquise = count($oRedaction->getArrIdeesValides()) == 0 ? "none":"block";
	$xAjax_objResponse->assign("redaction_marquise_cheat", "style.display", $displayMarquise);

	$_SESSION["creation2"]["redact"]["obj"] = serialize($oRedaction); //Save objects new state - modified index
	
	return $xAjax_objResponse; 
}

getMarquisePlayScript() starts the timer

Code:

function getMarquisePlayScript(){
	$script  = getMarquisePauseScript(); //I clear the current timer

	$script .= "timerMarquise = window.setInterval(\"xajax_refreshMarquise()\", 3000);"; //This should call refreshMarquise every 3 seconds
	
	return $script;
}

getMarquisePauseScript() - should stop and clear the interval
Code:

function getMarquisePauseScript(){
	return "window.clearInterval(timerMarquise);";
}

Mouse events - call the pause and play scripts
Code:

onmouseover='xajax_pauseMarquise();' onmouseout='xajax_playMarquise();

thanks for help

I have a banner but it keeps rotating even when you mouse over it.

Is there a simple code I can add to the code below so that the banner will paused when you mouse over it?

Thanks!

Jeremy

Quote:
</script>
<script type="text/javascript">
$(function() {
//some elements..
var $ps_container = $('#ps_container'),
$ps_image_wrapper = $ps_container.find('.ps_image_wrapper'),
$ps_next = $ps_container.find('.ps_next'),
$ps_prev = $ps_container.find('.ps_prev'),
$ps_nav = $ps_container.find('.ps_nav'),
$tooltip = $ps_container.find('.ps_preview'),
$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
$links = $ps_nav.children('li').not($tooltip),
total_images = $links.length,
currentHovered = -1,
current = 0,
$loader = $('#loader');

/*check if you are using a browser*/
var ie = false;
if ($.browser.msie) {
ie = true;//you are not!Anyway let's give it a try
}
if(!ie)
$tooltip.css({
opacity : 0
}).show();


/*first preload images (thumbs and large images)*/
var loaded = 0;
$links.each(function(i){
var $link = $(this);
$link.find('a').preload({
onComplete : function(){
++loaded;
if(loaded == total_images){
//all images preloaded,
//show ps_container and initialize events
$loader.hide();
$ps_container.show();
//when mouse enters the pages (the dots),
//show the tooltip,
//when mouse leaves hide the tooltip,
//clicking on one will display the respective image
$links.bind('mouseenter',showTooltip)
.bind('mouseleave',hideTooltip)
.bind('click',showImage);
//navigate through the images
$ps_next.bind('click',nextImage);
$ps_prev.bind('click',prevImage);
}
}
});
});

function showTooltip(){
var $link = $(this),
idx = $link.index(),
linkOuterWidth = $link.outerWidth(),
//this holds the left value for the next position
//of the tooltip
left = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
//the thumb image source
$thumb = $link.find('a').attr('rel'),
imageLeft;

//if we are not hovering the current one
if(currentHovered != idx){
//check if we will animate left->right or right->left
if(currentHovered != -1){
if(currentHovered < idx){
imageLeft = 75;
}
else{
imageLeft = -75;
}
}
currentHovered = idx;

//the next thumb image to be shown in the tooltip
var $newImage = $('<img/>').css('left','0px')
.attr('src',$thumb);

//if theres more than 1 image
//(if we would move the mouse too fast it would probably happen)
//then remove the oldest one (:last)
if($ps_preview_wrapper.children().length > 1)
$ps_preview_wrapper.children(':last').remove();

//prepend the new image
$ps_preview_wrapper.prepend($newImage);

var $tooltip_imgs = $ps_preview_wrapper.children(),
tooltip_imgs_count = $tooltip_imgs.length;

//if theres 2 images on the tooltip
//animate the current one out, and the new one in
if(tooltip_imgs_count > 1){
$tooltip_imgs.eq(tooltip_imgs_count-1)
.stop()
.animate({
left:-imageLeft+'px'
},150,function(){
//remove the old one
$(this).remove();
});
$tooltip_imgs.eq(0)
.css('left',imageLeft + 'px')
.stop()
.animate({
left:'0px'
},150);
}
}
//if we are not using a "browser", we just show the tooltip,
//otherwise we fade it
//
if(ie)
$tooltip.css('left',left + 'px').show();
else
$tooltip.stop()
.animate({
left : left + 'px',
opacity : 1
},150);
}

function hideTooltip(){
//hide / fade out the tooltip
if(ie)
$tooltip.hide();
else
$tooltip.stop()
.animate({
opacity : 0
},150);
}

function showImage(e){
var $link = $(this),
idx = $link.index(),
$image = $link.find('a').attr('href'),
$currentImage = $ps_image_wrapper.find('img'),
currentImageWidth = $currentImage.width();

//if we click the current one return
if(current == idx) return false;

//add class selected to the current page / dot
$links.eq(current).removeClass('selected');
$link.addClass('selected');

//the new image element
var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
.attr('src',$image);

//if the wrapper has more than one image, remove oldest
if($ps_image_wrapper.children().length > 1)
$ps_image_wrapper.children(':last').remove();

//prepend the new image
$ps_image_wrapper.prepend($newImage);

//the new image width.
//This will be the new width of the ps_image_wrapper
var newImageWidth = $newImage.width();

//check animation direction
if(current > idx){
$newImage.css('left',-newImageWidth + 'px');
currentImageWidth = -newImageWidth;
}
current = idx;
//animate the new width of the ps_image_wrapper
//(same like new image width)
$ps_image_wrapper.stop().animate({
width : newImageWidth + 'px'
},350);
//animate the new image in
$newImage.stop().animate({
left : '0px'
},350);
//animate the old image out
$currentImage.stop().animate({
left : -currentImageWidth + 'px'
},350);

e.preventDefault();
}

function nextImage() {
var cache='';
cache = cache==''?current+':'+total_images:cache;
if(current < total_images)
$links.eq(current+1).trigger('click');
if(cache == (current+':'+total_images))
$links.eq(0).trigger('click');

}
function prevImage(){
if(current > 0){
$links.eq(current-1).trigger('click');
}
}
setInterval( function(){
$('.ps_next').click();
},4000 );

Hi, i'm trying to create horizontal banner slide, I want something really simple and basic, most script i find is far to complex and more like a gallery. I found this script on dynamicdrive but it is quite old, it does what i'm after but and its a big but, i can't speed it up :-(

Does anybody know how i could increase the speed of the swipe from slide to slide on this? thanks

Ben

Code:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript">

		/*
		Left-Right image slideshow Script-
		By Dynamic Drive (www.dynamicdrive.com)
		For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com
		*/
		
		///////configure the below four variables to change the style of the slider///////
		//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
		var scrollerwidth='800px'
		var scrollerheight='300px'
		var scrollerbgcolor=''
		//3000 miliseconds=3 seconds
		var pausebetweenimages=3000
		
		
		//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
		var slideimages=new Array()
		slideimages[0]='<a href="#"><img src="images/website-banner-1.jpg" border="0"></a>'
		slideimages[1]='<a href="#"><img src="images/website-banner-2.jpg" border="0"></a>'
		slideimages[2]='<a href="#"><img src="images/website-banner-3.jpg" border="0"></a>'
		//extend this list
		
		///////Do not edit pass this line///////////////////////
			 
		var ie=document.all
		var dom=document.getElementById
		
		if (slideimages.length>1)
		i=2
		else
		i=0
		
		function move1(whichlayer){
		tlayer=eval(whichlayer)
		if (tlayer.left>0&&tlayer.left<=5){
		tlayer.left=0
		setTimeout("move1(tlayer)",pausebetweenimages)
		setTimeout("move2(document.main.document.second)",pausebetweenimages)
		return
		}
		if (tlayer.left>=tlayer.document.width*-1){
		tlayer.left-=5
		setTimeout("move1(tlayer)",50)
		}
		else{
		tlayer.left=parseInt(scrollerwidth)+5
		tlayer.document.write(slideimages[i])
		tlayer.document.close()
		if (i==slideimages.length-1)
		i=0
		else
		i++
		}
		}
		
		function move2(whichlayer){
		tlayer2=eval(whichlayer)
		if (tlayer2.left>0&&tlayer2.left<=5){
		tlayer2.left=0
		setTimeout("move2(tlayer2)",pausebetweenimages)
		setTimeout("move1(document.main.document.first)",pausebetweenimages)
		return
		}
		if (tlayer2.left>=tlayer2.document.width*-1){
		tlayer2.left-=5
		setTimeout("move2(tlayer2)",50)
		}
		else{
		tlayer2.left=parseInt(scrollerwidth)+5
		tlayer2.document.write(slideimages[i])
		tlayer2.document.close()
		if (i==slideimages.length-1)
		i=0
		else
		i++
		}
		}
		
		function move3(whichdiv){
		tdiv=eval(whichdiv)
		if (parseInt(tdiv.style.left)>0&&parseInt(tdiv.style.left)<=5){
		tdiv.style.left=0+"px"
		setTimeout("move3(tdiv)",pausebetweenimages)
		setTimeout("move4(scrollerdiv2)",pausebetweenimages)
		return
		}
		if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
		tdiv.style.left=parseInt(tdiv.style.left)-5+"px"
		setTimeout("move3(tdiv)",5)
		}
		else{
		tdiv.style.left=scrollerwidth
		tdiv.innerHTML=slideimages[i]
		if (i==slideimages.length-1)
		i=0
		else
		i++
		}
		}
		
		function move4(whichdiv){
		tdiv2=eval(whichdiv)
		if (parseInt(tdiv2.style.left)>0&&parseInt(tdiv2.style.left)<=5){
		tdiv2.style.left=0+"px"
		setTimeout("move4(tdiv2)",pausebetweenimages)
		setTimeout("move3(scrollerdiv1)",pausebetweenimages)
		return
		}
		if (parseInt(tdiv2.style.left)>=tdiv2.offsetWidth*-1){
		tdiv2.style.left=parseInt(tdiv2.style.left)-5+"px"
		setTimeout("move4(scrollerdiv2)",5)
		}
		else{
		tdiv2.style.left=scrollerwidth
		tdiv2.innerHTML=slideimages[i]
		if (i==slideimages.length-1)
		i=0
		else
		i++
		}
		}
		
		function startscroll(){
		if (ie||dom){
		scrollerdiv1=ie? first2 : document.getElementById("first2")
		scrollerdiv2=ie? second2 : document.getElementById("second2")
		move3(scrollerdiv1)
		scrollerdiv2.style.left=scrollerwidth
		}
		else if (document.layers){
		document.main.visibility='show'
		move1(document.main.document.first)
		document.main.document.second.left=parseInt(scrollerwidth)+5
		document.main.document.second.visibility='show'
		}
		}
		
		window.onload=startscroll
		
		</script>

</head>

<body>

<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; visibility=hide>
        <layer id="first" left=1 top=0 width=&{scrollerwidth}; >
        <script type="text/javascript">
        if (document.layers)
        document.write(slideimages[0])
        </script>
        </layer>
        <layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
        <script type="text/javascript">
        if (document.layers)
        document.write(slideimages[1])
        </script>
        </layer>
        </ilayer>
        
        <script type="text/javascript">
        if (ie||dom){
        document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">')
        document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
        document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1px;top:0px;">')
        document.write(slideimages[0])
        document.writeln('</div>')
        document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px">')
        document.write(slideimages[1])
        document.writeln('</div>')
        document.writeln('</div>')
        document.writeln('</div>')
        }
        </script>  

</body>

Hi All!

I'm somewhat new to CSS/Javascript but need assistance finding code that will help me accomplish the tool on the following page:

http://www.constantcontact.com/index.jsp

If you look at the rotating information on the left-side of the Constant Contact website, I would like to be able to have that same functionality on my website. If anyone knows how this is accomplished, any assistance would be greatly appreciated. I am looking for the following functionality:

1) Have the ability to hover over each number to change the main photo

2) Have the script advance the main photo on its own

3) Be able to click the main photo when it is selected

Any questions, let me know!

Thanks,

Eric