|
JavaScript - Strange Image Scroll Behavior
hi i am using an image scroller and i have it on three pages, the pages use the same header, the same css and the same basic structure.
such as table content footer the problem is that the scroller works fine on two of the pages but does not work at all on the one page. here is what i am getting on that page Code: Message: 'ElementExtensions' is null or not an object Line: 1898 Char: 3 Code: 0 URI: http://www.mysite.com/lightbox_slideshow/prototype.js Message: Object doesn't support this property or method Line: 705 Char: 41 Code: 0 URI: http://www.mysite.com/lightbox_slideshow/lightbox.js Message: Array length must be assigned a finite positive number Line: 464 Char: 5 Code: 0 URI: http://www.mysite.com/lightbox/js/prototype.js the only common denominator i can see is that the page it does NOT work on is in fact a photo manager page, the other two (that DO work dont deal with photos) i checked the array and the js vars and stuff are different from my photo manager vars (php) so i was thinking maybe there might be a clash of some kind accessing the queries at the same time when the page loads but i dont get any errors other than these. by the way the scroller is black not grey like the others for background. does it sound like from the errors that i am getting that it might be a db query clash of somekind or do you know anything about those errors above that might give me a clue whats going on. thanks Similar TutorialsI have an interval set that runs indefinitely (backgrounds switching) or until the viewer stops it. I've noticed that when I close a tab while it's running and revisit the page, it "doubles" the interval and the backgrounds get mixed up. Refreshing the page returns it to normal. Does anyone know how to fix this? I've tried clearing the interval with window.onunload and window.onbeforeunload. I'm thinking it has something to do with firefox not clearing its cache for the tab. I'll look into disabling that. have a look at this website. www.projectorhire.ie in the contactDetails div the number appears for a split second and then disappears.. it only happens in firefox.. Can anyone tell me what the prob could be? So I've started learning Javascript some days ago. Reading 'JavaScript Bible' Seventh Edition. One of the things the book repeatedly says is: use: Code: if(!document.getElementById()) return; (and others like: Code: if(!document.createTextNode()) return; ) to filter out all the browser who are in fact not supporting DOM. As I'm using Safari (and Firefox for testing purpose) the 'document.getElementById()' and therefo DOM is supported. Now, my browsers (both Safari and Firefox) get returned out of the javascript anyway. as simple as: Code: if(!document.getElementById()) return;
document.write("testIt!");
the document.write doesn't get executed. Now: I found a simple solutions which seems to work.... partially: Code: if(document.getElementById() == "undefined") return;
document.write("testIt!");
This seems to work for Safari, but Firefox still gets returned out of the javascript. I could just omit the if statements to make it work altogether. But that doesn't sound like the best method to me, because (so I've read) it can crash browsers and such. Now my question: Why are my browsers (or javascript for all I care) acting so strange? Is there a way to make the if(!document.getElementById()) work? or is it just a silly rule the writers of the JavaScript Bible made up? Thanks in advance for any help :) I am using the JavaScript Image Scroll found on http://net.tutsplus.com/tutorials/ja...mage-scroller/. I would like to make it so that the images loop with no gap, it has a view demo on the site which you can see here; http://net.tutsplus.com/tutorials/ja...mage-scroller/ Many Thanks, Tim Hello, I have an image scroll on my site that uses JavaScript. Each individual image/slide can be linked to a url. My problem is that it opens a new window when you click an image, and I want it to simply open the new link in the same window. Here is what I have in the head section: Code: <script language="JavaScript1.1">
<!--
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
//-->
</script>
Here is what I have in the body: Code: <script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("images/scroll-logo.jpg","images/scroll-natingredients.jpg","images/scroll-ucoriginal.jpg","images/scroll-organic.jpg","images/scroll-uckick.jpg")
slideshowlinks("healthprogressives.html","faq.html","index.html","faq.html","index.html")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=5000
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
Thank you~ Hi, I have this simple code for gallery on my page. And everything working fine but when i click on small picture to change big picture if I'm page scroll up to top of page. So i scroll to the gallery change picture ad page scroll up to the top. What could be the reason? Here is live axample: http://www.galerija-galiotovic.kus-s...test-hrvatski# Code: <table id="Table_galerija">
<tr>
<td style="width:520px;height:445px;vertical-align:top;padding:20px;">
<h2 style="position:absolute;top:200px;color:#FFF;" id="naslov">Test hrvatski</h2>
<div id="slika_velika"><img id="glavna_slika" style="max-height:390px;max-width:520px;vertical-align:middle;" src="/slike/10012012_7119092522.jpg" alt="KUS Sinj" /></div></td>
<td>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/10012012_7119092522.jpg'"><img src="/slike/thumbnails/10012012_7119092522.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_7509043961.jpg'"><img src="/slike/thumbnails/12012012_7509043961.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_9295689431.jpg'"><img src="/slike/thumbnails/12012012_9295689431.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_8527430603.jpg'"><img src="/slike/thumbnails/12012012_8527430603.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_2126924535.jpg'"><img src="/slike/thumbnails/12012012_2126924535.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div id="gori"><a href="#" onmousedown="moveup()" onmouseup="clearTimeout(moveupvar)"><img src="/images/gori.png" width="119" height="23" alt="Top Sport" /></a></div>
<div id="doli"><a href="#" onmousedown="movedown()" onmouseup="clearTimeout(movedownvar)"><img src="/images/doli.png" width="119" height="23" alt="Top Sport" /></a></div></td>
</tr>
</table>
I am brand new to Javascript, have been studying on Lynda.com for almost a week trying to get the hang. I found a cool scrolling effect with controls here at the very bottom of the page, and have built a page just trying to duplicate the html and js below. Unfortunately, it doesn't work. The CSS seems to be there, however no scrolling, any help would be greatly appreciated. PHP Code: <title>Untitled Document</title> <style type="text/css"> #footersponsors ul { list-style-type:none; } #footersponsors { float:left; padding-top:5px; position:relative; width:980px; } #footersponsors #buttons { border:1px solid #777777; margin-bottom:5px; width:955px; } #footersponsors #buttons a { color:#6699CC; margin:10px; } #footersponsors .prev { float:left; } #footersponsors .next { float:right; } #footersponsors .prev img { border:0 none; padding-top:30px; text-decoration:none; } #footersponsors .next img { border:0 none; padding-top:30px; text-decoration:none; } #footersponsorsitems { float:left; margin-left:9px; overflow:hidden; width:895px; } #footersponsorsitems ul { padding-left:2px; width:3900px; } #footersponsorsitems li { float:left; height:90px; line-height:90px; margin:0 2px; width:179px; } </style> </head> <script type="text/javascript" language="javascript"> <!-- jQuery.easing.easeOutQuart = function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }; jQuery().ready(function() { var intval = 2600;//how often to autoscroll (in milliseconds) - This is set with a var to enable trigger functions below jQuery('#footersponsorsitems').serialScroll( { items:'li', prev:'#footersponsors a.prev', next:'#footersponsors a.next', start:0, duration:700, force:true, stop:true, lock:false, interval:intval, //autoscroll set here cycle:true, //pull back once you reach the end easing:'easeOutQuart', //use this easing equation for a funny effect jump: false, //click on the images to scroll to them exclude: 4 //stop scrolling when there are 4 items left as not to pull the others off the screen }); $('#footersponsorsitems').hover(function(){ $(this).trigger('stop'); },function(){ $(this).trigger('start'); }); $('#footersponsorsitems li').hover( function(){ $(this) .stop() .fadeTo(250, 1.0) .siblings() .stop() .fadeTo(500, 0.15); }, function(){ $('#footersponsorsitems li') .stop() .fadeTo(500, 1.0); }); }); // --> </script> <div id="footersponsors"> <input type="hidden" name="ctl26$hfCurrentPage" id="ctl26_hfCurrentPage" value="0" /> <a class="prev" href="#"><img src="/images/buttons/sponsor_select_left_off.gif" alt="<"></a> <div id="footersponsorsitems"> <ul id="ctl26_ulFooterSponsors" style="width:13725px;"> <li><a href="http://www.nhra.com/points/kn-horsepower.aspx" title="" target="_blank"><img src="/assets/footersponsor/KN-HorsePowerChallenge_4c1.gif" alt="" /></a></li> <li><a href="http://www.nhra.com/streetlegal/default.aspx" title="Street Legal Drags" target="_blank"><img src="/assets/footersponsor/NHRA_StreetLegal.gif" alt="Street Legal Drags" /></a></li> <li><a href="http://www.promodchallenge.com/" title="" target="_blank"><img src="/assets/footersponsor/promod.gif" alt="" /></a></li> <li><a href="http://www.nhra.net/yes/" title="Youth and Education Services" target="_blank"><img src="/assets/footersponsor/YESarmy_20th.gif" alt="Youth and Education Services" /></a></li> <li><a href="http://www.coca-cola.com/" title="Coke" target="_blank"><img src="/assets/footersponsor/Coke-official1.gif" alt="Coke" /></a></li> <li><a href="http://www.dasani.com/" title="Dasani" target="_blank"><img src="/assets/footersponsor/Dasani-official.gif" alt="Dasani" /></a></li> <li><a href="http://www.fullthrottleenergy.com/" title="Full Throttle" target="_blank"><img src="/assets/footersponsor/Full-Throttle-Official.gif" alt="Full Throttle" /></a></li> <li><a href="http://www.powerade.com/" title="POWERade" target="_blank"><img src="/assets/footersponsor/Powerade-official.gif" alt="POWERade" /></a></li> <li><a href="http://www.budweiser.com/" title="Budweiser" target="_blank"><img src="/assets/footersponsor/Bud-official.gif" alt="Budweiser" /></a></li> <li><a href="http://www.cat.com/" title="" target="_blank"><img src="/assets/footersponsor/Cat_official.gif" alt="" /></a></li> <li><a href="http://www.fordracing.com/" title="" target="_blank"><img src="/assets/footersponsor/ford1.gif" alt="" /></a></li> <li><a href="http://www.fram.com/" title="Fram" target="_blank"><img src="/assets/footersponsor/FRAM--Official.gif" alt="Fram" /></a></li> <li><a href="http://www.goodyeartires.com/" title="Goodyear" target="_blank"><img src="/assets/footersponsor/Goodyear_Official_4c.gif" alt="Goodyear" /></a></li> <li><a href="http://www.harley-davidson.com/" title="Harley-Davidson" target="_blank"><img src="/assets/footersponsor/HarleyOfficial-4c.gif" alt="Harley-Davidson" /></a></li> <li><a href="http://www.hurstjaws.com/" title="Hurst" target="_blank"><img src="/assets/footersponsor/HURST-tool-official.gif" alt="Hurst" /></a></li> <li><a href="http://www.lucasoil.com/" title="Lucas Oil" target="_blank"><img src="/assets/footersponsor/Lucas-official.gif" alt="Lucas Oil" /></a></li> <li><a href="http://www.maingateinc.com/" title="Main Gate" target="_blank"><img src="/assets/footersponsor/Main-Gate-Logo-NHRA.gif" alt="Main Gate" /></a></li> <li><a href="http://www.motel6.com" title="" target="_blank"><img src="/assets/footersponsor/Motel-6logo-Official1.gif" alt="" /></a></li> <li><a href="http://www.okuma.com/" title="Okuma" target="_blank"><img src="/assets/footersponsor/OKUMA_rev.gif" alt="Okuma" /></a></li> <li><a href="http://www.prestone.com/" title="Prestone" target="_blank"><img src="/assets/footersponsor/Prestone-official.gif" alt="Prestone" /></a></li> <li><a href="http://www.racingelectronics.com/" title="Racing Electronics" target="_blank"><img src="/assets/footersponsor/RE-official.gif" alt="Racing Electronics" /></a></li> <li><a href="http://www.siouxcitykenworth.com/" title="Sioux City Truck and Trailer" target="_blank"><img src="/assets/footersponsor/Sioux-City-TT.gif" alt="Sioux City Truck and Trailer" /></a></li> <li><a href="http://www.summitracing.com/" title="Summit" target="_blank"><img src="/assets/footersponsor/Summit_Official_4C.gif" alt="Summit" /></a></li> <li><a href="http://www.vpracingfuels.com/" title="VP Racing Fuels" target="_blank"><img src="/assets/footersponsor/VPofficial.gif" alt="VP Racing Fuels" /></a></li> <li><a href="http://www.wyotech.edu/" title="WyoTech" target="_blank"><img src="/assets/footersponsor/WyoTechOfficial_large_4C.gif" alt="WyoTech" /></a></li> <li><a href="http://www.nhra.com/points/kn-horsepower.aspx" title="" target="_blank"><img src="/assets/footersponsor/KN-HorsePowerChallenge_4c1.gif" alt="" /></a></li> <li><a href="http://www.nhra.com/streetlegal/default.aspx" title="Street Legal Drags" target="_blank"><img src="/assets/footersponsor/NHRA_StreetLegal.gif" alt="Street Legal Drags" /></a></li> <li><a href="http://www.promodchallenge.com/" title="" target="_blank"><img src="/assets/footersponsor/promod.gif" alt="" /></a></li> <li><a href="http://www.nhra.net/yes/" title="Youth and Education Services" target="_blank"><img src="/assets/footersponsor/YESarmy_20th.gif" alt="Youth and Education Services" /></a></li> <li><a href="http://www.coca-cola.com/" title="Coke" target="_blank"><img src="/assets/footersponsor/Coke-official1.gif" alt="Coke" /></a></li> <li><a href="http://www.dasani.com/" title="Dasani" target="_blank"><img src="/assets/footersponsor/Dasani-official.gif" alt="Dasani" /></a></li> <li><a href="http://www.fullthrottleenergy.com/" title="Full Throttle" target="_blank"><img src="/assets/footersponsor/Full-Throttle-Official.gif" alt="Full Throttle" /></a></li> <li><a href="http://www.powerade.com/" title="POWERade" target="_blank"><img src="/assets/footersponsor/Powerade-official.gif" alt="POWERade" /></a></li> <li><a href="http://www.budweiser.com/" title="Budweiser" target="_blank"><img src="/assets/footersponsor/Bud-official.gif" alt="Budweiser" /></a></li> <li><a href="http://www.cat.com/" title="" target="_blank"><img src="/assets/footersponsor/Cat_official.gif" alt="" /></a></li> <li><a href="http://www.fordracing.com/" title="" target="_blank"><img src="/assets/footersponsor/ford1.gif" alt="" /></a></li> <li><a href="http://www.fram.com/" title="Fram" target="_blank"><img src="/assets/footersponsor/FRAM--Official.gif" alt="Fram" /></a></li> <li><a href="http://www.goodyeartires.com/" title="Goodyear" target="_blank"><img src="/assets/footersponsor/Goodyear_Official_4c.gif" alt="Goodyear" /></a></li> <li><a href="http://www.harley-davidson.com/" title="Harley-Davidson" target="_blank"><img src="/assets/footersponsor/HarleyOfficial-4c.gif" alt="Harley-Davidson" /></a></li> <li><a href="http://www.hurstjaws.com/" title="Hurst" target="_blank"><img src="/assets/footersponsor/HURST-tool-official.gif" alt="Hurst" /></a></li> <li><a href="http://www.lucasoil.com/" title="Lucas Oil" target="_blank"><img src="/assets/footersponsor/Lucas-official.gif" alt="Lucas Oil" /></a></li> <li><a href="http://www.maingateinc.com/" title="Main Gate" target="_blank"><img src="/assets/footersponsor/Main-Gate-Logo-NHRA.gif" alt="Main Gate" /></a></li> <li><a href="http://www.motel6.com" title="" target="_blank"><img src="/assets/footersponsor/Motel-6logo-Official1.gif" alt="" /></a></li> <li><a href="http://www.okuma.com/" title="Okuma" target="_blank"><img src="/assets/footersponsor/OKUMA_rev.gif" alt="Okuma" /></a></li> <li><a href="http://www.prestone.com/" title="Prestone" target="_blank"><img src="/assets/footersponsor/Prestone-official.gif" alt="Prestone" /></a></li> <li><a href="http://www.racingelectronics.com/" title="Racing Electronics" target="_blank"><img src="/assets/footersponsor/RE-official.gif" alt="Racing Electronics" /></a></li> <li><a href="http://www.siouxcitykenworth.com/" title="Sioux City Truck and Trailer" target="_blank"><img src="/assets/footersponsor/Sioux-City-TT.gif" alt="Sioux City Truck and Trailer" /></a></li> <li><a href="http://www.summitracing.com/" title="Summit" target="_blank"><img src="/assets/footersponsor/Summit_Official_4C.gif" alt="Summit" /></a></li> <li><a href="http://www.vpracingfuels.com/" title="VP Racing Fuels" target="_blank"><img src="/assets/footersponsor/VPofficial.gif" alt="VP Racing Fuels" /></a></li> <li><a href="http://www.wyotech.edu/" title="WyoTech" target="_blank"><img src="/assets/footersponsor/WyoTechOfficial_large_4C.gif" alt="WyoTech" /></a></li> <li><a href="http://www.nhra.com/points/kn-horsepower.aspx" title="" target="_blank"><img src="/assets/footersponsor/KN-HorsePowerChallenge_4c1.gif" alt="" /></a></li> <li><a href="http://www.nhra.com/streetlegal/default.aspx" title="Street Legal Drags" target="_blank"><img src="/assets/footersponsor/NHRA_StreetLegal.gif" alt="Street Legal Drags" /></a></li> <li><a href="http://www.promodchallenge.com/" title="" target="_blank"><img src="/assets/footersponsor/promod.gif" alt="" /></a></li> <li><a href="http://www.nhra.net/yes/" title="Youth and Education Services" target="_blank"><img src="/assets/footersponsor/YESarmy_20th.gif" alt="Youth and Education Services" /></a></li> <li><a href="http://www.coca-cola.com/" title="Coke" target="_blank"><img src="/assets/footersponsor/Coke-official1.gif" alt="Coke" /></a></li> <li><a href="http://www.dasani.com/" title="Dasani" target="_blank"><img src="/assets/footersponsor/Dasani-official.gif" alt="Dasani" /></a></li> <li><a href="http://www.fullthrottleenergy.com/" title="Full Throttle" target="_blank"><img src="/assets/footersponsor/Full-Throttle-Official.gif" alt="Full Throttle" /></a></li> <li><a href="http://www.powerade.com/" title="POWERade" target="_blank"><img src="/assets/footersponsor/Powerade-official.gif" alt="POWERade" /></a></li> <li><a href="http://www.budweiser.com/" title="Budweiser" target="_blank"><img src="/assets/footersponsor/Bud-official.gif" alt="Budweiser" /></a></li> <li><a href="http://www.cat.com/" title="" target="_blank"><img src="/assets/footersponsor/Cat_official.gif" alt="" /></a></li> <li><a href="http://www.fordracing.com/" title="" target="_blank"><img src="/assets/footersponsor/ford1.gif" alt="" /></a></li> <li><a href="http://www.fram.com/" title="Fram" target="_blank"><img src="/assets/footersponsor/FRAM--Official.gif" alt="Fram" /></a></li> <li><a href="http://www.goodyeartires.com/" title="Goodyear" target="_blank"><img src="/assets/footersponsor/Goodyear_Official_4c.gif" alt="Goodyear" /></a></li> <li><a href="http://www.harley-davidson.com/" title="Harley-Davidson" target="_blank"><img src="/assets/footersponsor/HarleyOfficial-4c.gif" alt="Harley-Davidson" /></a></li> <li><a href="http://www.hurstjaws.com/" title="Hurst" target="_blank"><img src="/assets/footersponsor/HURST-tool-official.gif" alt="Hurst" /></a></li> <li><a href="http://www.lucasoil.com/" title="Lucas Oil" target="_blank"><img src="/assets/footersponsor/Lucas-official.gif" alt="Lucas Oil" /></a></li> <li><a href="http://www.maingateinc.com/" title="Main Gate" target="_blank"><img src="/assets/footersponsor/Main-Gate-Logo-NHRA.gif" alt="Main Gate" /></a></li> <li><a href="http://www.motel6.com" title="" target="_blank"><img src="/assets/footersponsor/Motel-6logo-Official1.gif" alt="" /></a></li> <li><a href="http://www.okuma.com/" title="Okuma" target="_blank"><img src="/assets/footersponsor/OKUMA_rev.gif" alt="Okuma" /></a></li> <li><a href="http://www.prestone.com/" title="Prestone" target="_blank"><img src="/assets/footersponsor/Prestone-official.gif" alt="Prestone" /></a></li> <li><a href="http://www.racingelectronics.com/" title="Racing Electronics" target="_blank"><img src="/assets/footersponsor/RE-official.gif" alt="Racing Electronics" /></a></li> <li><a href="http://www.siouxcitykenworth.com/" title="Sioux City Truck and Trailer" target="_blank"><img src="/assets/footersponsor/Sioux-City-TT.gif" alt="Sioux City Truck and Trailer" /></a></li> <li><a href="http://www.summitracing.com/" title="Summit" target="_blank"><img src="/assets/footersponsor/Summit_Official_4C.gif" alt="Summit" /></a></li> <li><a href="http://www.vpracingfuels.com/" title="VP Racing Fuels" target="_blank"><img src="/assets/footersponsor/VPofficial.gif" alt="VP Racing Fuels" /></a></li> <li><a href="http://www.wyotech.edu/" title="WyoTech" target="_blank"><img src="/assets/footersponsor/WyoTechOfficial_large_4C.gif" alt="WyoTech" /></a></li> </ul> </div> <a class="next" href="#"><img src="/images/buttons/sponsor_select_right_off.gif" alt=" />"></a> </div> </div> </body> </html> Hi. I am trying to make one small modification to a website. I just want to make an image that, when clicked, scrolls to a certain point. Pleeeeeeaaaaaase help! This is the javascript that I think controls the scrolling: var element_y; var swiffy; var cur_groupid; var group_sortable = new Array(); var lightbox; var content; window.addEvent('load', function() { checkScrollerWidth(); checkImages(); }); function checkImages() { var check_w = window.getSize().x + 500; var winh = window.getSize().y; var divs = $$('.single_image_holder'); for(var i=0; i<divs.length; i++) { if(divs[i].getChildren().length) continue; if((parseInt($('main_images').getPosition().x) + parseInt(divs[i].get('xpos'))) >= check_w) return; var img = new Element('img', { 'src': divs[i].get('source') }); divs[i].adopt(img); } } window.addEvent('resize', function(){ checkScrollerWidth(); }); function checkScrollerWidth() { if($('scrollbar2') && $('content2') && $('handle2')) makeScrollbar( $('content2'), $('main_images'), $('scrollbar2'), $('handle2'), true); } function makeScrollbar(content,checkContent,scrollbar,handle,horizontal,ignoreMouse){ if(checkContent.getScrollSize().x < scrollbar.getSize().x) { handle.setStyle('display','none'); return; } handle.setStyle('display','block'); var steps = (horizontal?(content.getScrollSize().x - content.getSize().x)content.getScrollSize().y - content.getSize().y)) var slider = new Slider(scrollbar, handle, { steps: steps, mode: (horizontal?'horizontal':'vertical'), onChange: function(step){ var x = (horizontal?step:0); var y = (horizontal?0:step); content.scrollTo(x,y); checkImages(); } }).set(230); if( !(ignoreMouse) ){ $$(content, scrollbar).addEvent('mousewheel', function(e){ e = new Event(e).stop(); var step = slider.step - e.wheel * 30; slider.set(step); }); } } Hi everyone Im new here nice forum Hope someone can help out with my problem http://www.testingremote.ucoz.com/ When you click on anything other than home on the nav bar it messes up the appear/fade behavior that I added with dreamweaver any solutions ? Please help ! Hi, I am trying to figure out how the get the featured area at http://blueoceanportfolios.com to link to webpages rather than displaying it within the featured box on the left . This area is using JS file to display the videos on content in the featured box when different items on the menu are clicked, here is the working example : http://www.blueoceanportfolios.com/company/ Okay , The problem: Loading a new webpage rather than displaying the content at featured box at http://blueoceanportfolios.com Tried solutions: linking to javascript functions like onclick="window.location="http://someplace.com";" etc but still the content loads up in the featured box , try clicking on 2) it displays http://www.codingforums.com rather than loading new page. Any suggestions I have been testing regex test string to match the following pattern (- <any number with/without . decimal point>) ( -[#[.#]] ) here is the code that works the best: Code: var testStr = '99999+((-25.533) - 5)/99*(-25.533)';
var negValTestStr = new RegExp('\\(\-{1}[0-9]*\.?[0-9]*\\)', 'g');
var test = testStr.match(negValTestStr)
alert(test);
The question is: Why does it only work when the open and close parenthesis are double escaped: '\\(' and '\\)' When I use one backslash to escape, it will find -25.533, -5 and -25.533 With two backslashes for escape sequence: (-25.533), (-25.533) Also, I have to escape the - to get just one -. If I do not escape the -, -?; which should read - {0, 1} will match --# without escaping - Thanks for thoughts on this JK Since it is not clear to me where this post should fit in the forum, I'm just posting it here. Is it possible to create a tracking code that would allow me to: (1) a) Find out the identity of visitors to a certain website (a website unrelated to me and the visitors did not visit my website) b) The identity of those who recently searched for a certain keywords and/or... (2) Find out what websites certain individuals have recently visited (or visiting in real-time)? Ok, so I wanted to use the following object to copy the contents of the Report array at index [file][entry]. Code: Selected = {
fileIndex : file,
entryIndex : entry,
Entry : Report[file][entry]
}
This was done so that the user may perform modifications to the entry without updating the entry until I have run validation on the input. Then I used Code: if(valid) Report[Selected.fileIndex][Selected.entryIndex] = Selected.Entry to finish up. I noticed that the Report array was getting the new input even when I didn't validate. I used the following to view all the contents of the Report Array in real time Code: window.setInterval('SHOW_ARRAY();',200);
Report=[];
function SHOW_ARRAY(){
HTML('ReportDebug','') //Reset "ReportDebug" HTML element
for(var t in Report){
for(var y in Report[t]){
for(var u in Report[t][y]){
HTML('ReportDebug','<span style="position:relative ; border:2px solid black">'+Report[t][y][u]+'</span>',1) // last argument signifies to append HTML element
}
}
HTML('ReportDebug','<br />',1)
}
}
And what I discovered was that whenever I stored values in Selected.Entry the Report array would update with those values! This is my first attempt to create an object in this fashion, so my only guess is that Selected.Entry is not independent from Report[file][entry], but instead some kind of pointer... Where have I gone wrong, and how can I accomplish my goal? Let me know if my code samples were too brief. Sorry if this is the wrong forum for this question. I get confused about what forum to post a question in with regards to DHTML technologies since they are all frequently used together. Anyhoo, heres my question. I've recently discovered an interesting behavior. When I mouse over a nested element it triggers the 'onmouseout' event handler of the parent element. Take the following code snippet, for instance: Code: <table>
<tr>
<td onmouseout="window.alert('you moused out of td');">
<img src="image0.gif" style="height:50px; width:50px;" />
</td>
</tr>
</table>
In the code snippet above, the 'onmouseout' event handler executes when you mouse over the image nested inside the <td> element. I wouldn't have thought this would be the appropriate behavior since from my perspective the mouse is still inside the <td> element. Can someone make comments on this. Thank You. Edit: I've discovered that mousing over a nested element causes both an 'onmouseout' and an 'onmouseover' event for the parent element. They are called back to back. Seems a little bit of an odd sequence of events but maybe it makes sense in the grand scheme of things. Yeah, right. Hi! I couldn't find any information about this topic in the internet and I really wonder, how come people do not discuss it anywhere? Okay, jQuery works really great and offers many interesting effects, but what if you have JavaScript disabled? I mean I've browsed through several websites powered by jQuery with JS disabled and they doesn't work or behave weird. I know there aren't much people, who disable JS, but well I do want my page to be seen by all people in the end. I managed to do it with slider on my page (however I want to use other jQuery effects), but, for example, http://www.flowplaye...ools/index.html doesn't provide any information about this. Try to disable JS and see that nothing works. I can use <noscript></noscript> tag, but I have to make two main pages. And what if I want to view it on one page? What would you do? Regards, Aleks. The code below is supposed to cancel the default form behavior when it finds certain info missing. Currently, however, in spite of detecting missing info it allows the form submission to continue. Anyone see what wrong? Thanks. Code: var DOM = YAHOO.util.Dom;
YAHOO.util.Event.onDOMReady(init);
function init() {
YAHOO.util.Event.addListener("contact_form", "submit", checkForm);
}
function checkForm() {
var fName = DOM.get('f_name');
var lName = DOM.get('l_name');
if (fName.value == "") {
DOM.get('f_name_error').innerHTML = "This field is required!";
fName.focus();
return false;
}
Hi guys! I'm having trouble deciphering the javascript on my webpage www.laurahenderson.org is my website, and I'd like the nav bar to be closed when the site loads. Here is the code: Code: jQuery.noConflict(); jQuery(document).ready(function(){
//VAR SETUP
var rightBg = jQuery('#rightBg'),
boxStuff = jQuery('.boxStuff'),
bgControls = jQuery("#bgControls"),
nextImg = jQuery('#nextImg'),
prevImg = jQuery('#prevImg'),
blogNav = jQuery('#blogNav'),
navBox = jQuery("#navBox"),
navBoxa = jQuery("#navBox a"),
navHeight = navBox.height(),
firstImg = jQuery('.wrapperli:first-child'),
lastImg = jQuery('.wrapperli:last-child'),
//iPad,iPhone,iPod...
deviceAgent = navigator.userAgent.toLowerCase(),
iPhone = deviceAgent.match(/(iphone|ipod)/);
//CLOSE FUNCTION
function closeSesame(){
jQuery('.activeBox').fadeOut(600,function(){
navBox.animate({right:"0%",marginRight:"20px"},800).removeClass('openNav');
jQuery(".activeNav").removeClass('activeNav');
rightBg.animate({width:"0%"},800);//HIDE RIGHT BG
bgControls.fadeIn(600);
}).removeClass('activeBox');
}
//OPEN FUNCTION
function openSesame(){
navBox.addClass("openNav").animate({right:"50%",marginRight:"2px"},800);//ADD OPEN NAV
rightBg.animate({width:"50%"},800,function(){//SHOW RIGHT BG
jQuery('.activeBox').fadeIn(600);//ADD ACTIVE BOX & FADE IN
navBox.fadeIn(600);
});
bgControls.fadeOut(300);
}
//OPACITY STUFF
rightBg.css({opacity:".85"});
//REMOVE TITLE ATTRIBUTE
jQuery("#dropmenu a").removeAttr("title");
//MENU
jQuery("#dropmenu ul").css("display", "none"); // Opera Fix
jQuery("#dropmenu li").hover(function(){
jQuery(this).find('ul:first').show();
},function(){
jQuery(this).find('ul:first').hide();
});
jQuery("#dropmenu ul li ul").parent().children("a").prepend("<span style='float:right;'>›</span>");
//PRETTY PHOTO
jQuery("a[href$='jpg'],a[href$='png'],a[href$='gif']").not(".wrapperli a").attr({rel: "prettyPhoto"});
jQuery(".gallery-icon > a[href$='jpg'],.gallery-icon > a[href$='png'],.gallery-icon > a[href$='gif']").attr({rel: "prettyPhoto[pp_gal]"});
jQuery("a[rel^='prettyPhoto']").prettyPhoto({
animation_speed: 'normal', // fast/slow/normal
opacity: 0.35, // Value betwee 0 and 1
show_title: false, // true/false
allow_resize: true, // true/false
overlay_gallery: false,
counter_separator_label: ' of ', // The separator for the gallery counter 1 "of" 2
//theme: 'light_rounded', // light_rounded / dark_rounded / light_square / dark_square
hideflash: true, // Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto
modal: false // If set to true, only the close button will close the window
});
//WINDOW LOAD
jQuery(window).load(function(){
//REMOVE WIDTH AND HEIGHT ATTRIBUTES FROM IMAGES
jQuery('.attachment-full, .attachment-post-thumbnail, .attachment-gallery').removeAttr('height').removeAttr('width');
//LOAD MESH BG
jQuery('#mesh').fadeIn(600);
jQuery('#loading').fadeOut(600);
//IF GALLERY PAGE
if(jQuery('body').hasClass('page-template-page_gallery-php')){
navBox.fadeIn(600);
bgControls.fadeIn(600);
jQuery(".wrapperli:first-child a").click();
//IF NOT GALLERY PAGE
} else {
openSesame();
}
});
//FADE CRUMBS IN/OUT ON SCROLL
jQuery('#pageContent').scroll(function(){
if(jQuery('#pageContent').scrollTop()>150){
blogNav.fadeOut(300);
} else {
blogNav.fadeIn(300);
}
});
//NAV BOX STUFF
navBox.css({marginTop:"-"+navHeight/2+"px"});
boxStuff.css({marginTop:"-"+navHeight/2+"px"});
//NAV BUTTON CLICK
navBoxa.click(function(){
//VAR SETUP
var thisBox = jQuery(this).attr('href');
//IF ACTIVE LINK, CLOSE STUFF
if(jQuery(this).hasClass('activeNav')){
closeSesame();
return false;
//IF NOT ACTIVE LINK
}else{
//IF CONTENT OPEN
if(navBox.hasClass("openNav")){
navBoxa.removeClass('activeNav');//REMOVE CURRENT ACTIVE NAV
jQuery(this).addClass('activeNav');//ADD NEW ACTIVE NAV
jQuery('.activeBox').removeClass('activeBox').fadeOut(300,function(){//REMOVE CURRENT ACTIVE BOX & FADE OUT
jQuery(thisBox).addClass('activeBox').fadeIn(300);//ADD NEW ACTIVE BOX & FADE IN
});
//IF CONTENT NOT OPEN
} else {
jQuery(this).addClass('activeNav');//ADD ACTIVE NAV
jQuery(thisBox).addClass('activeBox');
openSesame();
}
}
});
//CLICKING GALLERY IMG
jQuery(".wrapperli a").click(function(){
if(iPhone){
return false;
}else{
//GET HREF
var galleryHref = jQuery(this).attr('href'),
galleryTitle = jQuery(this).attr('title'),
imageInfo = jQuery('#imgInfo'),
itemNumber = jQuery(this).parent().index() + 1;
numberItems = jQuery('.wrapperli').length;
//CHANGE TITLE INFO
if(galleryTitle){
imageInfo.hide().html(galleryTitle + "  /  "+ itemNumber + " of " + numberItems).fadeIn(150);
} else {
imageInfo.hide();
}
//CHANGE CLASSES
jQuery(".wrapperli").not(this).removeClass('activeImg');
jQuery(this).parent().addClass('activeImg');
//IF MENU OPEN, CLOSE IT
if(navBox.hasClass("openNav")){ closeSesame(); }
//CHANGE BACKGROUND
jQuery.backstretch(galleryHref, {speed: 300});
return false;
}
});
//NEXT CONTROLS
nextImg.click(function(){
var activeImg = jQuery('.activeImg');
if(activeImg.length > 0){
if(activeImg.next().length > 0){
activeImg.removeClass('activeImg').next().addClass('activeImg').children().click();
} else {
activeImg.removeClass('activeImg');
firstImg.addClass('activeImg').children().click();
}
} else {
firstImg.addClass('activeImg').children().click();
}
return false;
});
//PREV CONTROLS
prevImg.click(function(){
var activeImg = jQuery('.activeImg');
if(activeImg.length > 0){
if(activeImg.prev().length > 0){
activeImg.removeClass('activeImg').prev().addClass('activeImg').children().click();
} else {
activeImg.removeClass('activeImg');
lastImg.addClass('activeImg').children().click();
}
} else {
firstImg.addClass('activeImg').children().click();
}
return false;
});
// Keyboard shortcuts
jQuery(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
if (unicode == 39) { nextImg.click();} // right arrow
else if (unicode == 37) {prevImg.click();} // left arrow
});
});
and I changed the open sesame to closed sesame here in the code Code: //IF CONTENT NOT OPEN
} else {
jQuery(this).addClass('activeNav');//ADD ACTIVE NAV
jQuery(thisBox).addClass('activeBox');
openSesame();
}
}
});
but now when the page loads the navbar wont show up at all. Any help/insight would be much appreciated! I am attempting to implement a Close icon which responds to mouseover, mouseup, mousedown, and mouseout. The problem is that the first DIV I display, using this code, works as intended, i.e. all the button states work. I can close and reopen the same DIV and everything is still fine. If I open a second DIV, which uses the reuse code below, the button states do not appear, although the DIV will close properly. If I step through the debugger all of the state images load properly but do not appear. Once I have tried to use the button in the second DIV, all of the DIV's fail to display the button states but close properly. Additionally all of the pages where this is used are generated using XMLHttpRequest(). The DIV's using this are generated when the site loads and then shown and hidden as needed with their contents being generated via XMLHttpRequest(). Anyone have any ideas? The intent is to reuse the following in a number of DIV's: Code: rtn = "<div id='closepanel' class='closepanel'><img src='images/closebutup.png' name='closebut' width='20px' height='20px' border='0px' onmouseover=\"swapbuttonstate('closebut','over')\" onmouseout=\"swapbuttonstate('closebut','out')\" onmousedown=\"swapbuttonstate('closebut','down')\" onmouseup=\"closePanel('"+this.msDivid+"')\" ></div>";
On startup I preload the images using : Code: if (document.images) {
closebutup= new Image();
closebutup.src="images/closebutup.png";
closebutover= new Image();
closebutover.src="images/closebutover.png";
closebutdown=new Image();
closebutdown.src="images/closebutdown.png";
}
The swapbuttonstate function is defined as: Code: function swapbuttonstate(buttonname, state) {
switch(state) {
case "over":
if (document.images) {
butover=eval(buttonname + "over.src");
document[buttonname].src= butover;
}
break;
case "out":
case "up":
if (document.images) {
butup=eval(buttonname + "up.src");
document[buttonname].src= butup;
}
break;
case "down":
if (document.images) {
butdown=eval(buttonname + "down.src");
document[buttonname].src= butdown;
}
break;
}
}
and closePanel is defined as: Code: function closePanel(divid) {
document.getElementById(divid).style.display='none';
}
Any help would be greatly appreciated. Hi, I used the code on the following example: http://www.w3schools.com/php/php_ajax_livesearch.asp Instead of xml I use mysql but it works the same way. My problem is with this character '#' (shift 3 - on my keyboard, or otherwise known as 'sharp'). Some of the words in my database table contain this character but when I type it, it acts like nothing was typed. Any idea on what to do to make this work like any other character? Thanks I'm trying to create a demo to display a new way of showing our data. I thought I remembered this being pretty simple but I'm hitting a snag. The table, the mouse over, and the check row by clicking on the row all work separately but when the check row by clicking function is on, seen in the first row, the checkbox stops working. Any insight into why this may be true? Any help is greatly appreciated Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function selectRow(row) {
var firstInput = row.getElementsByTagName('input')[0];
firstInput.checked = !firstInput.checked;
}
</script>
</head>
<body>
<table id="tbl" border="2">
<thead>
<tr>
<td></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr onclick="selectRow(this)" onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr onmouseover="this.style.cursor='hand'">
<td>
<input type="checkbox" class = "chcktbl"/>
</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
|
|||||||