little problem with javascript

**tpravioti** · 01-18-2010, 09:51 AM

hi eveybody!!
i have a problem..if i have 6,12,.. images my maxsets(maximum sets of images) is ok..
but if i have another number of images the 'parseInt' rounds it(for example if i have maxsets=1,33 it becomes 1, but i want to make it 2 to show correctly my sets of images!!)
take a look at this code:

Code:

var len=images.length;
var offset=6;
var maxsets=parseInt(len/offset);

how to change my js code to do this??

**jscheuer1** · 01-18-2010, 10:52 AM

Code:

var len=images.length;
var offset=6;
var maxsets=Math.ceil(len/offset);

**tpravioti** · 01-18-2010, 11:42 AM

can you help me with something else too??
i have this:

Code:

var step=0;
var offset=6;

function changestep(st)
{  
   var len=images.length;
   var maxsets=Math.ceil(len/offset);
				
    if (st==0) {
       step=0;
       //alert('step0: '+step);
       maxsets=1;
       update_tag();
    }
    else {
        step=step+st;
	//alert('step: '+step);
        if (step>maxsets) {
            step=maxsets-1;
        }
        update_tag();
    }
					
    //buttons display or not
    if (step == 0) {
	$('btn_prev').style.visibility='hidden';
	$('btn_next').style.visibility='visible';
    } 
    else {
	if (step == (maxsets-1)) {
	     $('btn_next').style.visibility='hidden';
	     $('btn_prev').style.visibility='visible';
	}
	else {
	     $('btn_prev').style.visibility='visible';
	     $('btn_next').style.visibility='visible';
	}
     }
}

my code calculates only once the maxsets and shows the buttons depends on this maxsets...i want to recalculate it every time i call the function because i have checkboxes and if one checkbox has less images it shows the buttons as long as are the maxsets!!

**jscheuer1** · 01-18-2010, 01:57 PM

Checkboxes don't have images, at least not normally. So I don't get that part. The term images.length appears to refer to something I cannot see. It's probably an array, collection, or node list, but who knows? The $('btn_prev') requires a function, often from a script library, but possibly your own, what's it do here? Where's st come from?

I'd have a better chance at figuring this out if I had a link to the page. But I still also might need more of a clue as to what it's supposed to do that it's not doing now.

**tpravioti** · 01-18-2010, 02:07 PM

here is all my code:

Code:

<%@ Page Inherits="Skin" Src="active.cs" %>
<%@ Import Namespace="Active3" %>
<%@ Import Namespace="Oxygen" %>
<%@ Import Namespace="Active3.Shop" %>

<html>
<head>
	<%= Active.Head %>
	<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<center>

<!-- ----- Multiple Tag Gallery ----- -->

<div id="taggallery" style="width:200px;">
<table width="200" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="15"><img src="skn/spacer.gif" width="15" height="1"/></td>
    <td>
    	<table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="skn/spacer.gif" width="1" height="15"/></td>
          </tr>
          <tr>
            <td>
            	<table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td align="center" valign="middle">
						<!-- ----- Main image ----- -->
                    	<img src="skn/spacer.gif" id="main_img" width="200" height="150" align="absmiddle" alt="" title="" style="border:none;"/>
						<!-- --- End Main image --- -->
                    </td>
                  </tr>
                  <tr>
                   	<td><img src="skn/spacer.gif" width="1" height="5"/></td>
                  </tr>
                  <tr>
					<!-- ----- Title ----- -->
                    <td align="center" valign="middle"><b id="gallerytitle"></b></td>
					<!-- --- End Title --- -->
                  </tr>
                  <tr>
                    <td><img src="skn/spacer.gif" width="1" height="15"/></td>
                  </tr>
                  <tr>
                    <td>
                    	<table width="100%" border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td width="12"><img src="skn/spacer.gif" width="12" height="1"/></td>
                            <td align="left" valign="top">
			      <!-- ----- Tags Select ----- -->
				<table width="100%" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
				<!-- ----- btn select all tags ----- -->
					<td align="left" valign="top"><input type="button" value="Select All" onClick="$$('#taggallery input').each(function(s) {if(s.type=='checkbox')s.checked=true;});$('imgcnt').value='';$('buttons').style.display='block';changestep(0);"></td>
					<td align="left" valign="top"><input type="button" value="Deselect All" onClick="$$('#taggallery input').each(function(s) {if(s.type=='checkbox')s.checked=false;});$('imgcnt').value='';$('buttons').style.display='none';changestep(0);"></td>
					<!-- --- end btn select all tags --- -->
					</tr>
					<tr>
                                        <td><img src="skn/spacer.gif" width="1" height="10"/></td>
                                    </tr>
                                    <tr>
					<!-- ----- All tags ----- -->
				<td>
                                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
				<%int cc=0; foreach (Tag t in Tag.Select()) {
				if(cc==6)break; cc++;%>
				<tr><td>
				   <input type="checkbox" id="tag_<%=t.id.Hex%>" checked="checked" onClick="changestep(0);$('imgcnt').value='';if($('gallery_div').getElementsByTagName('img').length<offset){$('btn_next').style.visibility='hidden';$('btn_prev').style.visibility='hidden';}"><%=t.Name%></input>
				</td></tr>
				<%}%>
				</table>					
                                  </td>
				<!-- --- End All tags --- -->
				</tr>
				</table>
			<!-- --- End Tags Select --- -->
                           </td>
                          </tr>
                        </table>
                    </td>
                  </tr>
                </table>
            </td>
          </tr>
          <tr>
            <td><img src="skn/spacer.gif" width="1" height="20"/></td>
          </tr>
          <tr>
            <td align="center" valign="middle">
            	<table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
					<td align="center" valign="middle">
					<div id="buttons" style="display:block;">
                        <table border="0" cellpadding="0" cellspacing="0"><tr>
                            <!-- ----- Next btn ----- -->
                            <td align="center" valign="middle"><input type="image" src="skn/prev2.gif" id="btn_prev" align="absmiddle" onClick="changestep(-1);" style="visibility:hidden; cursor:pointer;"></td>
                            <!-- --- End Next btn --- -->
                                            
                            <td width="5"><img src="skn/spacer.gif" width="5" height="1"/></td>
                                            
                            <!-- ----- cnt(1 from 4) ----- -->
                           <td align="center" valign="middle"><input style="text-align:center; border:none; background:#e7e7e8; font-size:11px; font-weight:bold; color:#0057a7;" type="text" value="" id="imgcnt"  size="10" readonly="readonly"></td>
                            <!-- --- end cnt(1 from 4) --- -->
                                
                            <td width="5"><img src="skn/spacer.gif" width="5" height="1"/></td>
                                            
                            <!-- ----- Prev btn ----- -->
                            <td align="center" valign="middle"><input type="image" src="skn/next3.gif" id="btn_next" align="absmiddle" onClick="changestep(1);" style="visibility:visible; cursor:pointer;"></td>
                            <!-- --- End Prev btn --- -->
                        </tr></table>
					</div>
        			</td>
                    <td width="10" align="left" valign="middle"><img src="skn/spacer.gif" width="10" height="1"/></td>
                  </tr>
                </table>
            </td>
          </tr>
          <tr>
            <td><img src="skn/spacer.gif" width="1" height="5"/></td>
          </tr>
          <tr>
            <td align="left" valign="bottom">
				<!-- ----- Thumbs ----- -->
				<div id="gallery_div"></div>
				<!-- --- End Thumbs --- -->
            </td>
          </tr>
          <tr>
            <td><img src="skn/spacer.gif" width="1" height="15"/></td>
          </tr>
        </table>
    </td>
    <td width="15"><img src="skn/spacer.gif" width="15" height="1"/></td>
  </tr>
</table>
</div>

<script>
var images=[];
//array with images
<%foreach (Tag x in Tag.Select()) {%>
	<%foreach(Node xx in x.SelectAllNodes()) {%>
		<%if(xx is Product) {%>
			images[images.length]={src:<%= (Js)xx.ThumbnailSrc%>,idnode:<%= (Js)xx.id.Hex%>,idtag:<%= (Js)x.id.Hex%>,title:<%= (Js)(""+xx.Caption.Replace(Environment.NewLine,""))%>,desc:<%= (Js)(""+xx.Description.Replace(Environment.NewLine,""))%>};
		<%}%>
	<%}%>
<%}%>

var nextstepentimg=0;
var nextstepentthumb=0;

function photos(img) {
	//change image
	$('main_img').src=images[img].src;
	$('main_img').alt=images[img].desc;
	$('main_img').title=images[img].desc;
	$('gallerytitle').update(images[img].title);
	//counter
	$('imgcnt').value=(img+1)+' / '+images.length;
	nextstepentimg=img+1;
	if (nextstepentimg>images.length-1) nextstepentimg=0;
	var n=img-1;
	if (n<0) n=images.length-1;
}

var step=0;
var offset=6;
	
function update_tag()
{
    var c=0;
	var start=step*offset;
	var end=start+offset-1;
	var gallery='';
	gallery+='<table width="160" border="0" cellpadding="0" cellspacing="8" align="center">';
	
	for (var ii=0; ii<images.length; ii++) {
		if ($('tag_'+images[ii].idtag+'').checked) {	
			if(c>=start && c<=end) {	
				if (c%2==0) { gallery+='<tr>'; }
				gallery+='<td align="center" valign="top">';
				gallery+='<img src="'+images[ii].src+'" onclick="photos('+ii+');" id="thumb_'+images[ii].idnode+'" title="'+images[ii].title+'" alt="'+images[ii].title+'" width="85" height="60" style="cursor:pointer;"/>';
				gallery+='</td>';
			}	
		c++;
		}
	}
	gallery+='</tr></table>';
    $('gallery_div').update(gallery);
}

function changestep(st)
{  
	var len=images.length;
    var maxsets=Math.ceil(len/offset);
				
    if (st==0) {
        step=0;
		maxsets=1;
		update_tag();
	}
    else {
        step=step+st;
        if (step>maxsets) {
            step=maxsets-1;
        }
        update_tag();
    }
                    
    //buttons display or not
    if (step == 0) {
		$('btn_prev').style.visibility='hidden';
		$('btn_next').style.visibility='visible';
    } 
    else {
        if (step == (maxsets-1)) {
			$('btn_next').style.visibility='hidden';
            $('btn_prev').style.visibility='visible';
        }
        else {
            $('btn_prev').style.visibility='visible';
            $('btn_next').style.visibility='visible';
        }
    }
}
</script>

<script>
document.observe("dom:loaded", function() {
	$$('#taggallery input').each(function(s) {if(s.type=='checkbox')s.checked=true;});
	update_tag();
	$('imgcnt').value='';
	$('main_img').src=images[0].src;
	$('main_img').alt=images[0].desc;
	$('main_img').title=images[0].desc;
	$('gallerytitle').update(images[0].title);
});
</script>

<!-- --- End of Multiple Tag Gallery --- -->

</center>
</body>
</html>

i haven't upload it anywhere at the moment..
hope that helps!!

**jscheuer1** · 01-18-2010, 03:12 PM

Looks like you're using asp and a bit of Visual Basic there as well. I think (from some of the syntax) that you are using the Prototype javascript framework, but the tag(s) for that and any helper script(s) for it are not shown. Are you using the Prototype javascript framework? Any helper scripts for it like scriptaculous, effects, builder, etc? If you are using any of that, they're probably on one of the pages that asp is importing.

I still don't get a real sense of what this is doing, or of what you want it to do that it's not.

I'm assuming that all of the server side stuff works, so it might be easier - if you cannot upload a demo - if you would use your browser's 'view source' to show what the page is being served as. Copy that and if it's not too long paste that into your next post.

But a link to the page would be better. And:

What exactly do you want it to do that it isn't doing?

**tpravioti** · 01-19-2010, 08:51 AM

no, i don't use any Prototype javascript framework or any helper scripts for it like scriptaculous, effects, builder, etc..

i want to display correct the buttons next and previous (after it re-calculates the variable maxsets)

look this image-screenshot and i hope you understand better...

**jscheuer1** · 01-19-2010, 02:13 PM

No prototype.js huh? So you are getting an error on this code:

Code:

<script>
document.observe("dom:loaded", function() {
	$$('#taggallery input').each(function(s) {if(s.type=='checkbox')s.checked=true;});
	update_tag();
	$('imgcnt').value='';
	$('main_img').src=images[0].src;
	$('main_img').alt=images[0].desc;
	$('main_img').title=images[0].desc;
	$('gallerytitle').update(images[0].title);
});
</script>

then?

**tpravioti** · 01-20-2010, 09:28 AM

ahhh you mean prototype.js...i use prototype!!(sorry!)
but my code doesn't have errors..
the only thing i want is to modify in my code the function changestep so it shows my buttons(arrows) correct..
only this!!!

**jscheuer1** · 01-20-2010, 02:55 PM

I didn't say there was an error, only that there probably would be one if you weren't using prototype.js javascript framework. However, you see how long it took to establish just that much?

I really need to see the page:

Please post a link to the page on your site that contains the problematic code so we can check it out.

If I had seen the page, I would have known right away about prototype and not even had to ask. There are other things seeing the page should answer. Any questions I have left after that will be more to the point.

Thread: little problem with javascript

Thread Tools

Search Thread

little problem with javascript

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions