JavaScript - Unobtrusive Jquery For A Cycle

So i've written abit of code myself in order to do this:

I will have multiple video tags on my website, each of the video tag's will have to be able to play/pause seperatly, so technically speaking only 1 video should be playing at a time, when the user 'onmouseout' it should pause and when the user's gos to another video that other video should start playing. If he move's the cursor out of the video it should stop...

The problem is now, i have video A & B. When i go 'onmouseover' video B, video A starts playing.

This is how i started coding:

1 . 2 functions for playing/pausing a video tag
2 . Check how many <video> tags are on the page (after load)
3 . Add Event "mouseout" + function to each <video> tag

And the actual code:

Javascript:
Code:

/*** FUNCTIONS OM DE MOUSEOVER & OUT TE DOEN WERKEN ***/

function speelFilmpje(){
    document.getElementById("filmpke").play();
}

function stopFilmpje(){
    document.getElementById("filmpke").pause();
}

window.onload = function(){
/*** FUNCTION DIE ONMOUSEOVER & OUT FUNCTIE AAN 'VIDEO' TAGS TOEVOEGT ***/
    var video = document.getElementsByTagName('video');
    var videotags = video.length;
    //console.log(videotags);
    for(i=0; i<videotags;i++){
        video[i].addEventListener("mouseover", speelFilmpje,false);
        video[i].addEventListener("mouseout", stopFilmpje,false);
    }//einde van de functie
}

HTML:
Code:

<div id="right_column">
                    <div id="preview1">
                        <video width="197" height="81" id="filmpke">
                            <source src="unknown.ogg" type="video/ogg">
                            <source src="unknown.mp4" type="video/mp4">
                        </video>
                        <a href="#">Unknown (2010)</a>                  
                    </div>
                    <div id="preview1">
                        <video width="197" height="81" id="filmpke">
                            <source src="unknown.ogg" type="video/ogg">
                            <source src="unknown.mp4" type="video/mp4">
                        </video>
                        <a href="#">Unknown (2010)</a>                  
                    </div>
                </div>

Any thoughts or information is welcome. I've stumbled upon my own wall of "Lack of knowledge" -_-

I am trying to remove all Javascript code from my HTML doc and put into external .js file(s). I have event triggers that I would like to move to an external file, but I am not sure how. Below is an example.
[CODE]
<a href="residential.html" class="textdeco" >
<img class="img-menu" id="res" src="images/buttons/btn_res_mouse_out.jpg" alt="Residential"
onmouseover="FP_swapImg(1,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_over.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_out.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_down.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_up.jpg')" />
[CODE]

The reason I want to do this is that this code is repeated in all pages and I want to reduce potential maintenance issues. Any help will be appreciated.

without outside extensions, how does one debug javascript events on a webpage that primarily relies on unobtrusive JS events?

for instance, i have a website i log into that has a "submit" button. the button itself only has this code:

Code:

<input type="image" class="png" tabindex="5" value="Go" src="login.png">

obviously, the only way that it can submit the form is to use javascript. and it's obviously unobtrusive in this case.

consider the fact that it isn't my webpage, and i don't want to try to put random breakpoints everywhere blindly.

any help!?

Hey all,
Hopefully I can explain this so it makes sense.

I have a div with some buttons in it going horizontally. Kind of like a top menu of sorts. The div is of a fixed width and these buttons are spaced evenly across it. What I would like to do (and the hardest part is finding the right words for all this) is add more buttons. But because of the limited space I want to leave the current buttons as they are but provide a way, either by hovering over the left or right end of the div ideally or clicking << or >> types of links to 'cycle' through the buttons. So end result would be the user would see lets say 5 buttons upon load but be able to access the other buttons by cycling/scrolling left or right. It would be great if the buttons would loop around so they would never reach the 'end' going left or right. Does this make sense? I haven't been able to find anything close to this but that could possibly be because I am not sure what to call it.

Thanks for any help!

We've been attempting to set up a drop-down selection box with hidden tables under it for use on a company website. The site has a lot of CSS sheets (like 20 of them) and more could be added at any point so we'd like to write the code to cycle through each one of them to find the correct variable associated with the selections in the drop-down. The code below works fine in dreamweaver, even with the multiple sheets attached, but stops working immediately when putting it in a browser. Any thoughts/suggestions are greatly appreciated.

Code:

<style type="text/css">
		.al {display:none}
		.ca {display:none}
		.ct {display:none}
		.ga {display:none}
		.il {display:none}
		.la {display:none}
		.ma {display:none}
		.mi {display:none}
		.mn {display:none}
		.mo {display:none}
		.ms {display:none}
		.nc {display:none}
		.ne {display:none}
		.nh {display:none}
		.nv {display:none}
		.ny {display:none}
		.or {display:none}
		.sc {display:none}
		.tn {display:none}
		.tx {display:none}
		.va {display:none}
		.vt {display:none}
		.wa {display:none}
		.wi {display:none}
    </style>
    <script type="text/javascript">
      function showHide(cls, show) {
        for (var i=0; i<document.styleSheets.length; i++) {
               // browser-compatibility 
               var rule = document.styleSheets[i].rules ? document.styleSheets[i].rules : document.styleSheets[i].cssRules;
               for (var j = 0; j < rule.length; j++) {
                       if (rule[j].selectorText == "." + cls) { //find css selector
                               rule[j].style.display = (show) ? 'block' : 'none';
                       }
               }
        }
}

        function selAction(sel) {
            for (var i = 0; i < sel.options.length; i++) {
                showHide(sel.options[i].value, i == sel.selectedIndex);
            }
        }
    </script>
</head>

<body>
    <table>
      <tr>
        <td colspan="3">
          <select name="type" onchange="selAction(this);">
            <strong><option value="et">
              Please Select Your State:
            </option>
            <option value="al">Alabama</option>
            <option value="ca">California</option>
            <option value="ct">Connecticut</option>
            <option value="ga">Georgia</option>
            <option value="il">Illinois</option>
            <option value="la">Louisiana</option>
            <option value="ma">Massachusetts</option>
            <option value="mi">Michigan</option>
            <option value="mn">Minnesota</option>
            <option value="mo">Missouri</option>
            <option value="ms">Mississippi</option>
            <option value="nc">North Carolina</option>
            <option value="ne">Nebraska</option>
            <option value="nh">New Hampshire</option>
            <option value="nv">Nevada</option>
            <option value="ny">New York</option>
            <option value="or">Oregon</option>
            <option value="sc">South Carolina</option>
            <option value="tn">Tennessee</option>
            <option value="tx">Texas</option>
            <option value="va">Virginia</option>
            <option value="vt">Vermont</option>
            <option value="wa">Washington</option>
            <option value="wi">Wisconsin</option></strong> </select>
        </td>
      </tr>
      <tr class="al">
        <td>
        No issues in your state at this time.</td>
      </tr>
      <tr class="ca">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ct">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ga">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="il">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="la">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ma">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="mi">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="mn">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="mo">
        <td> No issues in your state at this time. </td>
      </tr>
      <tr class="ms">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="nc">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ne">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="nh">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="nv">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ny">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="or">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="sc">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="tn">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="tx">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="va">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="vt">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="wa">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="wi">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      </table>
</center></td>
  </tr>
</table>
</body>
</html>

Hello everybody,

I'll quit new as it comes to programming, so please forgive this nono on forehand.

I've used a script and would like to add an other feature. Now the text is fading in and out. What I would like now is instead of the TEXT in the DIV, the script uses the text array, so you see a different text fading in after the last fadeout.

Thanks for your help.

Code:

<html>
<head>

<script language='javascript'>
function blink(elementid){ 
	colorarray = Array(
		'#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#E9F6E3',
		'#E5EAD8','#E0DDCA','#DACDBB','#D4BCAA','#CEAA99','#C79786',
		'#C18474','#BA7161','#B45F50','#AE4E3F','#A83E30','#A33122',
		'#9F2517','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f',
		'#9c1c0f'); 
i=0;
setInterval ("changecolor('"+elementid+"')",200);
}

function changecolor(x) { 
	var x= document.getElementById(x);
	if (x != null){
		x.style.color = colorarray[i];
		if (i==24){ i= 0;
			colorarray = colorarray.reverse();
			}
	}
	i++;
}

var text=new Array();
  text[0] = "text 1";
  text[1] = "text 2";
  text[2] = "text 3";


</script>

</head>
<body bgcolor="#ECFFEC">
<script language="javascript">blink('fade');</script>
// INSTEAD OF 'TEXT' I'LL LIKE IF TO BE ONE OF THE TEXT ARRAY
<div id="fade">TEXT</div>

</body>
</html>

Hello!

I'm trying to figure out a way of having + and - buttons which cycle through the options in a select box such as:

<select name="distance" id="jr_radius">
<option value="0.5">0.5 Miles</option>
<option value="1">1 Mile</option>
<option value="3" selected="selected">3 Miles</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
</select>

So far I've only been able to have a button change the select box to a specific value, or add or subtract to a numerical value. Both of which aren't quite right.

Ideally if the default value is "3" then clicking the + button could make it "5" and clicking the same button again would make it "10". Visa versa, the minus button would make the value "1" and then if pressed again it would become "0.5".

Does that make sense? Any help will be greatly appreciated!

Hi,

I'm building a website which uses javascript to cycle through and fade images in the header portion of each web page. The javascipt os located in an external file and called via the master page. Here is the code in the content.js file which specifies where the images are located:

Code:

// create array of images
var CyclingImages = new Array("header/images/tankimage1.gif",
                              "header/images/tankimage2.gif", 
                              "header/images/tankimage3.gif",
                              "header/images/tankimage4.gif")

Here is the code in the master page which finds the javascript:

Code:

 <script language="javascript" src="<%= Page.ResolveUrl("~/content/content.js") %>"  type="text/javascript"></script>

Here is the function call in the masterpage to fade and cycle the images:

Code:

<body onload="FadeAndCycleImages()">

Here is the code in the masterpage which references the cycling images:

Code:

<span class="fadingimages">
                <img src="<%= Page.ResolveUrl("header/images/tankimage1.gif") %>" width="142" height="124" title="" alt="" name="cyclingimage"  />
            </span>

Each webpage loads the masterpage. If the webpage is located at the root of the project, the cycle and fade functionality works great. When I start to place some of the webpages in separate folders - which I need to do - the cycling and fading functionality breaks down, meaning the images cannot be found. The image place holder is there with the standard red "x" in the upper left. I have done a lot of research and tried many approaches to try to resolve this issue, but with no success. The root of the problem seems to lie in the fact that I cannot apply Page.ResolveUrl within the content.js file. Any suggestions would be greatly appreciated.


Thank you,
petela

I want to loop through a form containing various fields and replace them with values I have in a JS object.

E.g.

(1)

<form id="theform">
<input type="text" name="field_1" value="" />
<input type="checkbox" name="field_2" value="" />
</form

(2)

object.field_1 = "Dave";
object.field_2 = ""; // empty as not checked, else holds value of checked one

--

The problem is: what about checkboxes and <select> drop downs, and radios??

Is there a script like this around as I'm guessing this could be useful for Ajax to populate input boxes in some situations (depending on the content etc.) so I'm guessing I'm not the only one who needs this?

Hi
I have some Javascript on my website http://www.restoreanddesign.co.uk
The top bar has 4 images on a random cycle on load up/ refresh. Im trying to validate the xhtml, but it is coming up with errors.

I dont understand javascript enough to be able to fix this. Anyone know what needs to be done to validate this javascript.

i have bolded/coloured the lines i think is causing the problems

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

Code:

<script type="text/javascript" language="JavaScript">
// JavaScript Document

var imagenumber = 4 ;

var randomnumber = Math.random() ;

var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;

images = new Array

images[1] = "images/newtopbar.jpg"

images[2] = "images/newtopbar2.jpg"

images[3] = "images/newtopbar3.jpg"

images[4] = "images/newtopbar4.jpg"

 

var image = images[rand1]
function MM_swapImgRestore() { //v3.0
   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
  
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
   if(!x && d.getElementById) x=d.getElementById(n); return x;
} 

function MM_swapImage() { //v3.0
   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) 
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
 </script> 

So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes:


Id be very gratefull if someone would help me out with this one.

All related code can be found bellow (the ones that should be needed anyways):

This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked
Code:

$(document).ready(function(){
	//References
	var change = $("#menu li a");
	var loading = $("#loading");
	var content = $("#content");
	
	//Manage click events
	change.click(function(){
		//show the loading bar
		showLoading();
		//load selected section
		if(this.id == "home")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/index.php", hideLoading);
			content.slideDown();
		}
		else if(this.id == "secondpage")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/secondpage.php", hideLoading);
			content.slideDown();
		}
		else
		{
			//hide loading bar if there is no selected section
			hideLoading();
		}
	});

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}

	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});

Heres the structure of the menu/content
Code:

<ul id="menu">
<li><a id="home" class="normal" href="#Home"></a></li>
<li><a id="secondpage" class="normal"  href="#Secondpage"></a></li>		
</ul>

<div id="content">
<ul id="sec-menu">
<li><a id="link1" class="normal" href="#">Link1</a></li>
<li><a id="link2" class="normal"  href="#">Link2</a></li>		
</ul>
</div>

Heres the code that jquery history plugin uses in demo for ajax
Code:

jQuery(document).ready(function($) {
        function load(num) {
            $('#content').load(num +".html");
        }

        $.history.init(function(url) {
                load(url == "" ? "1" : url);
            });

        $('#ajax-links a').live('click', function(e) {
                var url = $(this).attr('href');
                url = url.replace(/^.*#/, '');
                $.history.load(url);
                return false;
            });
    });

hi, i have a jquery problem...

this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above:
(it is not working the tab actions, the slideout works...)
http://www.benjaminsterling.com/wp-c...es/sidetab.htm

the javascript code is the above:
PHP Code:
var jqsideTabs;
var tabs, h = 50, r = 0,ra = 0;
$(document)
.ready(function(){
    jqsideTabs = $('#sideTabs').addClass('closed');
    
    tabs = jqsideTabs
    .find('.tab h3')
    .clone()
    .appendTo(jqsideTabs)
    .each(function(i){
        var that = $(this), cls = '',ow,newThis, newEl;
        
        if( i == 0 ) cls = ' active';
        newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>');
        that.replaceWith(newEl);
        
        ow = newEl.outerWidth();
        
        if( i == 0 ) ra = ow;
        else r = ow;
        
        h = newEl.css({'top':h , 'right': -ow }).height() + h;
        
        newThis = newEl.get(0);
        newThis.jq = newEl;
        newThis.i = i;
        
        newEl.click(function(){
            var el = this.jq;
            
            if( jqsideTabs.hasClass( 'closed' ) ){
                jqsideTabs.removeClass('closed');
            }
            else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){
                jqsideTabs.addClass('closed');
            }
            
            el
            .siblings()
                .removeClass('active')
                .css({'right': -r })
            .end()
            .addClass('active')
            .css({'right': -ra });
            
            tabs.eq( this.i ).show().siblings('.tab').hide();
            
            return false;
        });
    })
    .end()
    .parent()
        .eq(0)
        .addClass('active')
    .end()
        .filter(':not(:eq(0))')
        .hide()
    .end();
    
    jqsideTabs.bind("mouseleave",function(){
        jqsideTabs
        .animate({left:-310}, 'fast', function(){
            jqsideTabs.addClass('closed').removeAttr('style');
        });
    });
}); 


and the html file is:
[HTML]
<div id="sideTabs">

<div class="tab">
<h3>Tab 1</h3>
<div class="gut">
<p>Some text</p>
</div>
</div>
<div class="tab">
<h3>Tab 2</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
<div class="tab">
<h3>Tab 3</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
</div>
[/HTML]
the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content)....

can anyone help...please.....

i keep getting the error

GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS
& Failed to load resource: net::ERR_TOO_MANY_REDIRECTS

when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this.

thanx in advance

var s="attr"
var i=$(s)
// jQuery(elem).attr(attr,eval("elm"+attr));
jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this.

how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem".