JavaScript - Js Expert: Please Explain This Function

Hi, i would like to explain my situation, basically, i am trying to create a slider with thumbnails. The slider is complete, works very well. The only problem is that the captions are just not appearing properly.

I had a situation where the captions did work but they had to be coming in from the slideOut functions but what i want is for it to be displayed when the person hovers over the image.

This is what it looks like at the moment...


This is when the caption is coming from the top.

i would like to implement
Code:

http://web.enavu.com/demos/caption/

or this
Code:

http://www.sohtanaka.com/web-design/examples/image-hover/

Doesnt matter which one

into my slider when an image is hovered over (not the thumbnail) the actual image, then the caption covers the whole image displaying whatever text...

Coding:
(HTML)
Code:

                    <div class="main_view">
                        <div class="window">    
                            <div class="image_reel">
                    			<a href="#">
                                    <img style="height:534px;" src="http://i55.tinypic.com/.png" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(253); ?>">
                                    <img src="http://i51.tinypic.com/.jpg" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(256); ?>">
                                    <img src="http://i52.tinypic.com/.png" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(258); ?>">
                                    <img src="http://i53.tinypic.com/.png" alt="" />
                                </a>
                                <a href="<?php echo get_permalink(271); ?>">
                                    <img src="http://i53.tinypic.com/.png" alt="" />
                                </a>
                            </div>
		<div class="descriptions">
			<!--welcome page-->
				<div class="desc">
					<strong style="font-size:30px;">Welcome to City Water</strong>
						<div class="clear"></div><br/>
                            <div id="sliderdescription">WHATEVER WHATEVER</div>

				</div>
                
			<!--Services page-->
			<div class="desc">
			<?php $post_id = 253; $queried_post = get_post($post_id); ?>
       <strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong>
                        <div class="clear"></div><br/>
                            <div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
                </div>
                    <div class="desc">
                                        <!--Products page-->
<?php $post_id = 256; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>


                    </div>
                    <div class="desc">
                                                 <!--Information page-->
<?php $post_id = 258; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>


                    </div>
                    <div class="desc">
                                                 <!--Accounts page-->
<?php $post_id = 271; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
                    </div>
                </div>
            </div>
            
<div id="hrline"></div>

 <div class="paging">
         <ul class="thumb">
<li><a href="#" rel="1"><img src="http://i55.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="2"><img src="http://i56.tinypic.com/.jpg" class="thumbnails"/></a></li>
<li><a href="#" rel="3"><img src="http://i51.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="4"><img src="http://i52.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="5"><img src="http://i52.tinypic.com/.png" class="thumbnails"/></a></li>
        </ul>
    </div>
 </div>

CSS
Code:

 /*--Main Container--*/
 .main_view {
  float : left;
  height :488px;
  margin-bottom :1px;
  margin-top :-40px;
  position :relative;
}

 /*--Window/Masking Styles--*/
 .window img{
  height :492px;
  width : 974px;
}

 .window {
  /*--Hides anything outside of the set width/height--*/
  border :3px solid #D7D7D5;
  color : #B4B4B4;
  font-size : 12px;
  font-weight : bold;
  height :488px;
  overflow : hidden;
  position : relative;
  width : 974px;
}

 .image_reel {
  left : 0;
  position : absolute;
  top : 0;
}

 .image_reel img {
  float : left;
}

 .image_reel ul li {
  display : inline;
}

  #image_reel .caption {
  background-color :#000;
  bottom :0;
  color :#ffffff;
  height :100px;
  position :absolute;
  width :100%;
  z-index :600;
}

    #image_reel .caption .content {
}

    #image_reel .caption .content h3 {
  color :#1DCCEF;
  margin :0;
  padding :0;
}

 /*--Paging Styles--*/
 .paging {
  /*--Assures the paging stays on the top layer--*/
  /*--Hidden by default, will be later shown with jQuery--*/
  bottom : -25px;
  display : none;
  line-height : 40px;
  position : absolute;
  right : -70px;
  text-align : center;
  z-index : 100;
}



.desc {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
	margin-top:275px;
    color: white;
    font-size: 2em;
    padding: 7px;

}

JAVASCRIPT
Code:

$(document).ready(function() {

    //Set Default State of each portfolio piece
    $(".paging").show();
    $(".paging a:first").addClass("active");
        
    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;
    
    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});
    
    //Paging + Slider Function
    rotate = function(){    
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        hideComment();
        
        $(".paging a").removeClass('active'); //Remove all active class
        $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
        
        //Slider Animation
        $(".image_reel").animate({
            left: -image_reelPosition
        }, 500 );
       
        showComment();
    };
    
    //Rotation + Timing Event
    rotateSwitch = function(){        
        play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
            $active = $('.paging a.active').next();
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $('.paging a:first'); //go back to first
            }
            rotate(); //Trigger the paging and slider function
        }, 7000); //Timer speed in milliseconds (3 seconds)
    };
    
    rotateSwitch(); //Run function on launch
    
    //On Hover
    $(".image_reel a").hover(function() {
        clearInterval(play); //Stop the rotation
        play = null;
    }, function() {
        rotateSwitch(); //Resume rotation
    });    
    
    showComment = function(){
        // slide toggle effect set to slow you can set it to fast too.
        $(".desc").eq( $('.paging a.active').attr("rel") - 1 ).show(700);
        return true;
    };
    
    showComment(); // Show Comment initially
    
     hideComment = function(){
        $(".desc").stop(true,true).slideUp(500).hide();
     };
    
    //hide comment if you click on it
    $(".desc").click(function(){
        hideComment();
    });
    
    //On Click
    $(".paging a").click(function() {    
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });    
    
});

I have inherited some code, and cannot get it to work. Note the bold section in the OBJECT tag below. I believe this is where the issue is.

Code:

<script language="JavaScript">
var camArray = new Array();
camArray['Dolliver'] = "http://video.dot.ca.gov/asx/D5-Bello-at-101.asx";
camArray['Mattie'] = "http://video.dot.ca.gov/asx/D5-Mattie-Rd-at-101.asx";
camera="Dolliver";

var camHTMLd = "<object id='MediaPlayer' width=320 height=240 classid='CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95' standby='Loading Windows Media Player components...' type='application/x-oleobject' codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112'><param name='filename' value='"+camArray[camera]+"'><param name='Showcontrols' value='False'><param name='autoStart' value='True'><embed type='application/x-mplayer2' src='"+camArray[camera]+"' width=320 height=240></embed></object>"

function changeCam(camera){

	document.getElementById("caltransCamera").innerHTML = camHTMLd;
	//alert(camHTMLd+camArray[camera]);
}

</script>

Then in the page, I have the following code:
<a href="javascript:changeCam('Mattie');">101 at Mattie Road</a>

It SHOULD open and start displaying the MATTIE cam, but it reloads the default Dolliver.

What am I missing? Thank you in advance.

<script type="text/javascript">

function display(action, id)
{
if (action == 'show')
{
document.getElementById("explanation"+id).style.display = "block";
document.getElementById("link"+id) = "javascript:display('hide', "+id+")";
}

if (action == 'hide')
{
document.getElementById("explanation"+id).style.display = "none";
document.getElementById("link"+id) = "javascript:display('show', "+id+")";
}
}

</script>

I've been playing with this workarouns for literally years, but I'm getting fed up with it. Can anyone here suggest a better way of dealing with the following conundrum - or at least clarify why it occurs?

When I have an external stylesheet I can't access the properties assigned therein.

I'll give an example - HTML/CSS/JS are all inseperate files - but everything is called into the HTML as you can see.

HTML:
Code:

<head>
	<script type="text/javascript" src="js.js"></script>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box" onclick="showWidth()"></div>
<body>

CSS (style.css)
Code:

#box {
 width: 200px;
}

Javascript (js.js)
Code:

function showWidth(){
	var box = document.getElementById('box');
	alert(box.style.width);
}

Now the alert fired by showWidth() is empty - meaning that javascript can't see the width of the div element 'box'

Now, if I assign width as part of the style attribute of the div javascript thus:

HTML:
Code:

<head>
	<script type="text/javascript" src="js.js"></script>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box" onclick="showWidth()" style="width: 200px;"></div>
<body>

javascript can see this and the alert fired by showWidth() shows '200px'.


So, I have two questions:

1. Why?

2. Is there a way of accessing these external style elements without having to define styles inline all the time?


Cheers!
Mike

I tried a a few tutorials but still can't get it, can any simply closures please?

hi,
i would like to know what kind of mechanism does the bolded part trigger

Code:

 G = function(a) {
            if (i !== a) {
                var b = i;
                i = a;
                for (a = 0; a < A.length; ++a)
                    A[a](b)
            }
        }

i dont want to know what the function does, just a wild guess,
would it be the A array is replaced with functions names?
R.

Hi all,

First of all, I am not a student and this is not homework. Secondly, I've been programming in C, Motorola assembler, Intel assembler and even GWBasic for years.

I recently (this year) got into Web / Javascript / PHP / HTML programming and I'm clawing up the learning curve. I know a fair amount, but have a long way to go.

OK here's my problem: I've been trying to integrate a WYSIWYG editor (TinyMCE) into a bulletin board software package (PHPBB3).

All is working well except for one big stumbling block that I've been battling for the past MONTH!...:

I want to support the original BBCode system of PHPBB3 (mostly because of the ability for the admin to add custom BBCodes).

So, what I need to do is this:

(1) Select a range of text.
(2) Either REPLACE it with "[tag]selection[/tag]" or else INSERT "[tag]" before and "[/tag]" after.
(3) Lastly, the original selection must remain selected so that additional BBCodes can be wrapped without the need to re-select.

The purpose of (3) is, say, the user clicks "bold" and "italic" and "underline".... all they should have to do is click those 3, not re-select each time.

I've tried doing this:

(1) get the selection range
(2) get the selection text
(3) delete the range contents
(4) create two "contextual fragments" (one for the opening tag, the other for the closing tag).
(5) create a <span> element containing the selection text
(6) Insert it all into the range with range.insertNode()
(7) finally select the new span element

This seems to work fine, but Internet Explorer fails (it complains when I try to get the selection range).

I just don't know what I'm doing wrong... and worse I'm not even sure if I'm attacking the problem the proper way.

Any ideas would be greatly appreciated!

Thanks!

-- Roger

<script type="text/javascript">
var myString = "zero one two three four";

var mySplitResult = myString.split(" ");

for(i = 0; i < mySplitResult.length; i++){
document.write("<br /> Element " + i + " = " + mySplitResult[i]);
}
</script>

"split" function splits the string whenever it encounters "space". But please explain me how the strings are stored in "mySplitResult".

And can we use Arrays for this program? If so, can you code it. Thanks in advance!

So today I learned about the ()'s for functions so I was like always studying and I cannot understand how this snippit works, here it is.

Quote:
var say = function(what) {
what('say function');
}

var hello = function (who) {
alert('Hello '+who); // outputs "Hello say function"
}

say(hello);
So the say(hello); is activating the function. The (hello) should be passed for (what) so the function(who) is now inside the other or something?

Can someone please list steps like 1-10 of how this code ends up saying

"Hello say function" at the end? thank you so much

i got this code from this thread http://www.codingforums.com/showthread.php?t=241809(THanks to jmrker) and i was wondering if you could explain how it works(The creating textboxes and the randomization).
Edit: SOrry i forgot to include the code
Code:

<!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=241809

var maxSeats = 341;
var rndSeats = 10;

function randOrd() { return (Math.round(Math.random())-0.5); }

function createDisplay() {
  var seating = [];;
  var str = '';
  for (var i=0; i<maxSeats; ++i) { seating.push(0); }
  for (var i=0; i<maxSeats; i++) {
    str += '<input type="text" size="1" id="s'+i+'" value="'+seating[i]+'">';
    if ((i % 33) == 32) { str += '<br>'; }
  }
  document.getElementById('auditorium').innerHTML = str;
}

var sarr = [];
function randomize() {
  for (var i=0; i<maxSeats; i++) { sarr[i] = i; }
  sarr.sort(randOrd);
}

var tptr;
var ptr = 0;

function pauseDisplay() {
  document.getElementById('s'+sarr[ptr]).value = 'x';
  document.getElementById('s'+sarr[ptr]).style.backgroundColor = 'red';
  if (ptr < (maxSeats-rndSeats)) { ptr++; tptr = setTimeout("pauseDisplay()",250); }
}

window.onload = function() {
  createDisplay();
  randomize();
  tptr = setTimeout("pauseDisplay()",250);
}
</script>

</head>
<body>
<div id="auditorium"></div>
</body>
</html>

umm Hi i wrote a script with little help from internet but i dont truly understand it, can anyone please explain to me what every line in this script is doing ? im asking polite.

var przed="zostalo do urodzin"
var obecnie="dzisiaj urodziny"
var Tablica=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

function odliczanie(r,m,d){
theyear=r;themonth=m;theday=d
var dzisiaj=new Date()
var rok=dzisiaj.getYear()


if (rok < 1000)
rok+=1900


var miesiac=dzisiaj.getMonth()
var dzien=dzisiaj.getDate()
var godzina=dzisiaj.getHours()
var minuta=dzisiaj.getMinutes()
var sekunda=dzisiaj.getSeconds()
var dzisiajstring=Tablica[miesiac]+" "+dzien+", "+rok+" "+godzina+":"+minuta+":"+sekunda


dataa=Tablica[m-1]+" "+d+", "+r
dd=Date.parse(dataa)-Date.parse(dzisiajstring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dgodz=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)

if(dday==0&&dgodz==0&&dmin==0&&dsec==1){
document.forms.count.count2.value=obecnie
return
}
else
document.forms.count.count2.value=dday+ " dni, "+dgodz+" godzin, "+dmin+" minut, i "+dsec+" sekund "+przed
setTimeout("odliczanie(theyear,themonth,theday)",1000)
}

odliczanie(2015,1,20)

overImg=[];outImg=[];
outImg[0]=new Image();outImg[0].src="images/enter1.gif";
overImg[0]=new Image();overImg[0].src="images/enter2.gif";
outImg[1]=new Image();outImg[1].src="images/keio.gif";
overImg[1]=new Image();overImg[1].src="images/inria.gif";
function chgImg(img,type){
switch(type){
case "over":document.images[img].src=overImg[img].src;break;
case "out":document.images[img].src=outImg[img].src;break;
}}


why are arrays used here ?

So I had the orginial code just switch images, I was under the impression I could use "var clientData" to make an array. However this is not working out the way I had hoped. Any help or explanation, greatly appreciated.

It's very sloppy now! Don't judge.

Here is my Javascript:
Code:

<script type="text/javascript">
var imgList = [
"../Assets/Images_Revised/40_kitchen.jpg",
"../Assets/Images_Revised/40_stair.jpg",
"../Assets/Images_Revised/C_front2.jpg",
"../Assets/Images_Revised/C_rear_side_combo.jpg",
"../Assets/Images_Revised/C_side.jpg",
"../Assets/Images_Revised/Y_combo.jpg",
"../Assets/Images_Revised/Y_window.jpg"
];

var clientData = [
     "This is Data for Client 1";
     "This is Data for Client 2";
  "This is Data for Client 3";
 "This is Data for Client 4";
 "This is Data for Client 5";
 "This is Data for Client 6";
"This is Data for Client 7"
];


var currentMain = 0;
var currentMainT = 0;

function Prev() 
{
    return ShowMain(currentMain-1);
				return ShowMainT(currentMainT-1);
}
function Next() 
{
    return ShowMain(currentMain+1);
			 return ShowMainT(currentMainT+1);
}


function ShowMain(which)
{
    currentMain = which;
				currentMainT = which;
    if ( currentMain < 0 ) currentMain = 0;
				if ( currentMainT < 0 ) currentMainT = 0;
    	if ( currentMain > imgList.length-1) currentMain = imgList.length-1; 
					if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1; 
    					document.getElementById('mainImg').src = imgList[currentMain];
					    document.getElementById('mainText').src = clientData[currentMainT];
   						 var PD = document.getElementById('Pg');
										var PD2 = document.getElementById('Pg2');
   		 if (PD != null ) PD.innerHTML = 'Image '+(currentMain+1)+' of '+imgList.length;
				  if (PD2 != null ) PD2.innerHTML = (currentMainT+1)+' of '+clientData.length;
    return false;
}

onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
</script>

Here is my area I am showing it.
Code:

<a href="#" onclick="return ShowMain(0); return ShowMainT(0)">1</a
><a href="#" onclick="return ShowMain(1); return ShowMainT(1);">2</a
><a href="#" onclick="return ShowMain(2); return ShowMainT(2)">3</a
><a href="#" onclick="return ShowMain(3); return ShowMainT(3)">4</a
><a href="#" onclick="return ShowMain(4); return ShowMainT(4)">5</a
><a href="#" onclick="return ShowMain(5); return ShowMainT(5)">6</a
><a href="#" onclick="return ShowMain(6); return ShowMainT(6)">7</a
><a href="#" onclick="return Prev();" class="gallery"><</a
><a href="#" class="gallery" onclick="return Next();">></a>

<span id="mainText">Click on a Client for Information.</span>

OK, I work for a company that accepts donations. Currently, the donation page looks nothing like the rest of the site. So I recreated the page to look like the rest of the site. But when I do so, Chrome shows it as a "security risk". Someone looked at it and told me that it's because the .js files aren't compressed and the browser considers this a security risk.

So how do I compress the files?

PHP Code:
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementByClass("subMenuWrapper");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script> 


Im trying to get the sub navigation to work in ie 6 but can get it working..

can anybody tell me what the above funtion does and how i might be able to apply it to my code...

the navigation i have so far is on http://www.corkdesigns.ie/ep3/testing.html

Hope someone can help

or is the a simple hack i can use for ie 6 for this navigation http://www.corkdesigns.ie/ep3/navigation1.html

Thanks