|
JavaScript - Js Slideshow. Adding Thumbnail Support?
Hey guys. I am using a javascript slideshow called fadeshow. (Main code below).
I am wondering if there is a way to have thumbnail support, so I could allow the users to click on a thumbnail and have fadeshow go to that photo in the array. I have gotten a next / previous button working but also would like to add thumbnails. How would I write an a href link to specify an image in the array? Can this be done? Code: <script type="text/javascript">
var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [1000, 665], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["images/1m.jpg"],
["images/2m.jpg"],
["images/3m.jpg"]
],
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})
</script>
<div id="fadeshow2toggler">
<a href="#" class="next"><div id="fadeshow2"></div></a><!--allows clicking the photo for next-->
<a href="#" class="prev">Previous</a> <a href="#" class="next">Next Image</a> ( <span class="status"></span> )</span>
</div><!--end fadeshow2toggler-->
<!--thumbnails i would like to work-->
<a href= # ><img src="images/thumbnail1.jpg"></a>
<a href= # ><img src="images/thumbnail2.jpg"></a>
<a href= # ><img src="images/thumbnail3.jpg"></a>
Any advice appreciated! Similar TutorialsHi, Here's the slideshow embed code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#large {width:448px; height:336px; background:#000 url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg) no-repeat center;}
#thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;}
img {padding:1px; width:80px; height:60px;}
img:hover {background:#00F;}
</style>
</head>
<body>
<div id="large"></div>
<div id="thumbs">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg)';">
<img src="http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg)';">
<img src="http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg)';">
</div>
</body>
</html>
I wonder how I can highlight the active thumbnail so its background remains blue until I click another one. I also like to avoid the inline JavaScript. Any feedback to improve the coding is appreciated! Best regards Mike Why does a comment tag hide the havascript if the browser does not support javascript? I thought comment tags were for comments not to hide things...
Hi All, i have an auto suggest function which suggests results to the user from my db. now if i click on one of the suggestions with the mouse it redirects to the relivant url which is stored in the db, however if i use the arrow keys and select a suggestion with the enter key nothing happens can anyone please help me to get this working so that if i press enter when a suggestion is selected it goes to that stores url? thanks and my index.php code PHP Code: <div class="main"> <form id="test" name="form1" method="post" action=""> <div id="holder"> <input type="text" id="keyword" tabindex="0"><img src="images/loading.gif" id="loading"> </div> <div id="ajax_response"></div> </div></form> here is my ajax_server.php page code PHP Code: <?php include("config.php"); $keyword = $_POST['data']; $sql = "select storeName,storeLink from ".$db_table." where ".$db_column." like '".$keyword."%' limit 0,20"; //$sql = "select name from ".$db_table.""; $result = mysql_query($sql) or die(mysql_error()); if(mysql_num_rows($result)) { echo '<ul class="list">'; while($row = mysql_fetch_array($result)) { $str = strtolower($row['storeName']); $link = $row['storeLink']; $start = strpos($str,$keyword); $end = similar_text($str,$keyword); $last = substr($str,$end,strlen($str)); $first = substr($str,$start,$end); $final = '<span class="bold">'.$first.'</span>'.$last; echo '<li><a href="'.$link.'">'.$final.'</a></li>'; } echo "</ul>"; } else echo 0; ?> and my script.js file Code: $(document).ready(function(){
$(document).click(function(){
$("#ajax_response").fadeOut('slow');
});
$("#keyword").focus();
var offset = $("#keyword").offset();
var width = $("#keyword").width()-2;
$("#ajax_response").css("left",offset.left);
$("#ajax_response").css("width",width);
$("#keyword").keyup(function(event){
//alert(event.keyCode);
var keyword = $("#keyword").val();
if(keyword.length)
{
if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13)
{
$("#loading").css("visibility","visible");
$.ajax({
type: "POST",
url: "ajax_server.php",
data: "data="+keyword,
success: function(msg){
if(msg != 0)
$("#ajax_response").fadeIn("slow").html(msg);
else
{
$("#ajax_response").fadeIn("slow");
$("#ajax_response").html('<div style="text-align:left;">No Matches Found</div>');
}
$("#loading").css("visibility","hidden");
}
});
}
else
{
switch (event.keyCode)
{
case 40:
{
found = 0;
$("li").each(function(){
if($(this).attr("class") == "selected")
found = 1;
});
if(found == 1)
{
var sel = $("li[class='selected']");
sel.next().addClass("selected");
sel.removeClass("selected");
}
else
$("li:first").addClass("selected");
}
break;
case 38:
{
found = 0;
$("li").each(function(){
if($(this).attr("class") == "selected")
found = 1;
});
if(found == 1)
{
var sel = $("li[class='selected']");
sel.prev().addClass("selected");
sel.removeClass("selected");
}
else
$("li:last").addClass("selected");
}
break;
case 13:
$("#ajax_response").fadeOut("slow");
$("#keyword").val($("li[class='selected'] a").text());
break;
}
}
}
else
$("#ajax_response").fadeOut("slow");
});
$("#ajax_response").mouseover(function(){
$(this).find("li a:first-child").mouseover(function () {
$(this).addClass("selected");
});
$(this).find("li a:first-child").mouseout(function () {
$(this).removeClass("selected");
});
$(this).find("li a:first-child").click(function () {
$("#keyword").val($(this).text());
$("#ajax_response").fadeOut("slow");
});
});
});
any help would be appreciated thanks Luke I have been trying to develop a script that creates a slideshow that adds hyperlinks to the images. I'm a beginner at Javascript, so I've made a bastardisation of 3 different scripts I've found that, by my reckoning, should work. This is the slideshow code: Code: window.onload = initAll;
var gallery_url = new Array('<a href="http://www.optionstradingaustralia.com.au" target=_blank>', '<a href="http://home.iprimus.com.au/thebyrnes5/splats/index.html">')
var thisUrl = 0;
var gallery = new Array("portfolio_ota.jpg", "portfolio_bashbrothers.jpg");
var thisImage = 0;
var gallery_title = new Array("Options Trading Australia Website", "The Bash Brothers Website");
var thisTitle = 0;
var gallery_number = new Array("1", "2");
var thisNumber = 0;
function initAll() {
document.getElementById("previous").onclick = processPrevious;
document.getElementById("next").onclick = processNext;
}
function processPrevious () {
if (thisUrl == 0) {
thisUrl = gallery_url.length;
}
thisImage--;
document.getElementById("view_portfolio").src = gallery_url[thisUrl]+'<img src="'+thisImage+'"></a>';
document.getElementById("portfolio_title").innerHTML = gallery_title[thisUrl];
document.getElementById("portfolio_number").innerHTML = gallery_number[thisUrl];
return false;
}
function processNext () {
thisImage++;
if (thisUrl == gallery_url.length) {
thisUrl = 0;
}
document.getElementById("view_portfolio").src = gallery_url[thisUrl]+'<img src="'+thisImage+'"></a>';
document.getElementById("portfolio_title").innerHTML = gallery_title[thisUrl];
document.getElementById("portfolio_number").innerHTML = gallery_number[thisUrl];
return false;
}
I know that for the most part, this script works. It was only when I tried to add the component that involved adding a hyperlink that it broke. The bit of code in the HTML that it directly affects is <div id="view_portfolio"> </div> Does anyone know why the javascript doesn't work? I have a feeling it's because I haven't applied the id tag in the HTML properly, but I don't know what exactly is wrong about it. I am hoping someone here can shed some light on the situation! The gallery I have made so far is at http://www.clarebyrnedesign.com.au/portfolio.html, except that at the moment, the images don't show. I've attached the javascript & html code. Thanks! Hello all! This is my first time in the forum and I have been reading for a while. The information in here appears to be very accurate and useful. I am new to JavaScript. I have been programming sites for a while but have been using Flash for most of my animation and never really got into the ActionScript. Thanks to Apple... I can no longer use that crutch. So as I post in this forum please understand 2 things: 1 I am a beginner in JavaScript and 2. I want to learn not just copy, paste and move on! Here is my issue: I have made a VERY SIMPLE slide show and it works perfectly. However, Now I want to add a fade in and out effect to the code. I have seen this done with the CSS opacity(alpha) and that seems to be the simplist way. However, I am having trouble fitting this into my code. Any direction in this matter would be great! Thanks so much! Code:
var step=1
function switchImg()
{
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<9)
step++
else
step=1
setTimeout("switchImg()",3500)
}
switchImg()
PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript"> <!-- var image1=new Image() image1.src="images/slideshow/image001.jpg" var image2=new Image() image2.src="images/slideshow/image002.jpg" var image3=new Image() image3.src="images/slideshow/image003.jpg" var image4=new Image() image4.src="images/slideshow/image004.jpg" var image5=new Image() image5.src="images/slideshow/image005.jpg" var image6=new Image() image6.src="images/slideshow/image006.jpg" var image7=new Image() image7.src="images/slideshow/image007.jpg" var image8=new Image() image8.src="images/slideshow/image008.jpg" var image9=new Image() image9.src="images/slideshow/image009.jpg" var image10=new Image() image10.src="images/slideshow/image010.jpg" var image11=new Image() image11.src="images/slideshow/image011.jpg" var image12=new Image() image12.src="images/slideshow/image012.jpg" var image13=new Image() image13.src="images/slideshow/image013.jpg" var image14=new Image() image14.src="images/slideshow/image014.jpg" var image15=new Image() image15.src="images/slideshow/image015.jpg" var image16=new Image() image16.src="images/slideshow/image016.jpg" var image17=new Image() image17.src="images/slideshow/image017.jpg" var image18=new Image() image18.src="images/slideshow/image018.jpg" var image19=new Image() image19.src="images/slideshow/image019.jpg" var image20=new Image() image20.src="images/slideshow/image020.jpg" //--> </script> </head> <body> <img src="images/slideshow/image001.jpg" name="slide"> <script type="text/javascript"> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src" ) if (step<20) step++ else step=1 //call function "slideit()" every 2.5 seconds setTimeout("slideit()",2500) } slideit() //--> </script> </body> </html> I'm trying to add next and previous buttons to this slideshow done in jQuery. I've gotten stuck trying to figure it out with no progress. Could anyone help me out with this? Thanks. Here's the code: Code: $(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
var totWidth=0;
var positions = new Array();
$('#slides .slide').each(function(i){
/* Traverse through all the slides and store their accumulative widths in totWidth */
positions[i]= totWidth;
totWidth += $(this).width();
/* The positions array contains each slide's commulutative offset from the left part of the container */
if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});
$('#slides').width(totWidth);
/* Change the cotnainer div's width to the exact width of all the slides combined */
$('#menu ul li a').click(function(e,keepScroll){
/* On a thumbnail click */
$('li.menuItem').removeClass('act').addClass('inact');
$(this).parent().addClass('act');
var pos = $(this).parent().prevAll('.menuItem').length;
$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
/* Start the sliding animation */
e.preventDefault();
/* Prevent the default action of the link */
// Stopping the auto-advance if an icon has been clicked:
if(!keepScroll) clearInterval(itvl);
});
$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
/* On page load, mark the first thumbnail as active */
/*****
*
* Enabling auto-advance.
*
****/
var current=1;
function autoAdvance()
{
if(current==-1) return false;
$('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]); // [true] will be passed as the keepScroll parameter of the click function on line 28
current++;
}
// The number of seconds that the slider will auto-advance in:
var changeEvery = 7;
var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
/* End of customizations */
});
Hello - I'm trying to add a fade effect between slideshow transitions. The script I'm building from is the Rich HTML Slideshow script which appears below. The slides that rotate are wrapped in <div> tags with a class of "dyncontent" and I've managed to make the slideshow transition just fine, but not with any kind of fade effect. It just "snaps" from one slide to the next. Is this a fairly simple addition? Thanks! <script type="text/javascript"> if (document.all || document.getElementById){ //if IE4 or NS6+ document.write('<style type="text/css">\n') document.write('.dyncontent{display: none; width: 250px; height: 60px;}\n') document.write('</style>') } var curcontentindex=0 var messages=new Array() function getElementByClass(classname){ var inc=0 var alltags=document.all? document.all : document.getElementsByTagName("*") for (i=0; i<alltags.length; i++){ if (alltags[i].className==classname) messages[inc++]=alltags[i] } } function rotatecontent(){ //get current message index (to show it): curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0 //get previous message index (to hide it): prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1 messages[prevcontentindex].style.display="none" //hide previous message messages[curcontentindex].style.display="block" //show current message } window.onload=function(){ if (document.all || document.getElementById){ getElementByClass("dyncontent") setInterval("rotatecontent()", 2000) } } </script> Hello coding world, After hours of searching the net I found this awesome slideshow. Check it out: http://tympanus.net/codrops/2011/01/...comment-409563 I really do like this slideshow but I am having problems adding a caption to each image. I am hoping to have the caption located under the image and slide in with each image. Can anyone help me out? Please. Thanks in advance. Best regards, Alan Good day all, I was hoping someone could help me out with the following. I currently have a slideshow that as thumbnails under a main image. The thumbnails slide left and right with hover on a button and with a click changes main image without any problems. Few things I am looking to change/add: 1. The ability to mouse over the main image and have the caption appear than disappear when the mouse is moved off. Currently I have the caption as a static text under the main image. 2. Start the thumbnail position in the middle instead of the left 3. Add mouseover buttons to the main image to give the ability to cycle through the images instead of having to always use the thumbnails. Below I've include the Javascript code: Is this the best way or is there a better way? Example of slideshow: http://neileverosborne.com/portfolios/manatees.html JAVASCRIPT: Code:
var displayWaitMessage=true; // Display a please wait message while images are loading?
var activeImage = false;
var imageGalleryLeftPos = false;
var imageGalleryWidth = false;
var imageGalleryObj = false;
var maxGalleryXPos = false;
var slideSpeed = 0;
var imageGalleryCaptions = new Array();
function startSlide(e)
{
if(document.all)e = event;
var id = this.id;
if(this.id=='arrow_right'){
slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
slideSpeed = -1*slideSpeedMultiply;
slideSpeed = Math.max(-10,slideSpeed);
}else{
slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
slideSpeed = 1*slideSpeedMultiply;
slideSpeed = Math.min(10,slideSpeed);
if(slideSpeed<0)slideSpeed=10;
}
}
function releaseSlide()
{
var id = this.id;
slideSpeed=0;
}
function gallerySlide()
{
if(slideSpeed!=0){
var leftPos = imageGalleryObj.offsetLeft;
leftPos = leftPos/1 + slideSpeed;
if(leftPos>maxGalleryXPos){
leftPos = maxGalleryXPos;
slideSpeed = 0;
}
if(leftPos<minGalleryXPos){
leftPos = minGalleryXPos;
slideSpeed=0;
}
imageGalleryObj.style.left = leftPos + 'px';
}
setTimeout('gallerySlide()',20);
}
function showImage()
{
if(activeImage){
activeImage.style.filter = 'alpha(opacity=50)';
activeImage.style.opacity = 0.5;
}
this.style.filter = 'alpha(opacity=100)';
this.style.opacity = 1;
activeImage = this;
}
function initSlideShow()
{
document.getElementById('arrow_left').onmousemove = startSlide;
document.getElementById('arrow_left').onmouseout = releaseSlide;
document.getElementById('arrow_right').onmousemove = startSlide;
document.getElementById('arrow_right').onmouseout = releaseSlide;
imageGalleryObj = document.getElementById('theImages');
imageGalleryLeftPos = imageGalleryObj.offsetLeft;
var galleryContainer = document.getElementById('galleryContainer');
imageGalleryWidth = galleryContainer.offsetWidth - 20;
maxGalleryXPos = imageGalleryObj.offsetLeft;
minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;
if (navigator.userAgent.indexOf('MSIE') >= 0) {
var arrowWidth = document.getElementById('arrow_left').offsetWidth;
var el = document.createElement('div');
el.style.position = 'absolute';
el.style.left = arrowWidth + 'px';
el.style.width = (galleryContainer.offsetWidth - arrowWidth * 2) + 'px';
el.style.overflow = 'hidden';
el.style.height = '100%';
document.getElementById('galleryContainer').appendChild(el);
el.appendChild(document.getElementById('theImages'));
}
var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');
for(var no=0;no<slideshowImages.length;no++){
slideshowImages[no].onmouseover = showImage;
}
var divs = imageGalleryObj.getElementsByTagName('DIV');
for(var no=0;no<divs.length;no++){
if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
}
gallerySlide();
}
function showPreview(imagePath,imageIndex){
var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
if(subImages.length==0){
var img = document.createElement('IMG');
document.getElementById('previewPane').appendChild(img);
}else img = subImages[0];
if(displayWaitMessage){
document.getElementById('waitMessage').style.display='inline';
}
document.getElementById('largeImageCaption').style.display='none';
img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
img.src = imagePath;
}
function hideWaitMessageAndShowCaption(imageIndex)
{
document.getElementById('waitMessage').style.display='none';
document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
document.getElementById('largeImageCaption').style.display='block';
}
window.onload = initSlideShow;
Hey all, I'm trying to add rel="lightbox" somewhere in the slideshow I have on my client's site slideshow [www.bobbovanstudio.com/work.php] but anything I try is unsuccessful. Slideshow javascript piece for the picture's link: Code: this.hotlink = function() {
// This method jumps to the slide's link.
// If a window was specified for the slide, then it opens a new window.
var mywindow;
// If this slide does not have a link, do nothing
if (!this.link) return;
// Open the link in a separate window?
if (this.target) {
// If window attributes are specified,
// use them to open the new window
if (this.attr) {
mywindow = window.open(this.link, this.target, this.attr);
} else {
// If window attributes are not specified, do not use them
// (this will copy the attributes from the originating window)
mywindow = window.open(this.link, this.target);
}
// Pop the window to the front
if (mywindow && mywindow.focus) mywindow.focus();
} else {
// Open the link in the current window
location.href = this.link;
}
}
}
Hyperlink on slideshow for picture link Code: <a HREF="javascript:SLIDES.hotlink()" rel="lightbox"><IMG NAME="SLIDESIMG" SRC="#" BORDER="0" ALT="slideshow image" STYLE="height:300px;filter:progid:DXImageTransform.Microsoft.Fade()"></a> Any ideas on how to fix this? Thanks in advance! Hi, I am using a script called osDate and I am trying to modify the sign up form to suit my setup. So far I have the below, but I would like to check a set ofradio buttons, but not sure, how to add it into the current code. var alphanumeric_chars = "0123456789.+-_#,/ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz ()_"; var alphanum_chars = "0123456789_ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; var text_chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz /'"; var full_chars = "0123456789.+-_#,/ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz() _$+=;:?'"; <script type="text/javascript"> /* <![CDATA[ */ function validateme(form) { var tos_ok = form.accept_tos.checked; ErrorCount=0; ErrorMsg = new Array(); /* log details */ CheckFieldString("noblank",form.username,"Please enter the username."); CheckFieldString("alphanum",form.username,"Only letters, numbers and underscores '_' are allowed in the username."); CheckFieldString("noblank",form.email,"Email must be specified."); CheckFieldString("email",form.email,"Email address is not valid."); CheckFieldString("noblank",form.firstname,"First Name must be specified."); CheckFieldString("text",form.firstname,"Only letters are allowed in First Name."); CheckFieldString("noblank",form.lastname,"Last Name must be specified."); CheckFieldString("text",form.lastname,"Only letters are allowed in Last Name."); CheckFieldString("noblank",form.address1,"Last Name must be specified."); CheckFieldString("full",form.address1,"Only letters, numbers and underscores '_' are allowed in the password."); CheckFieldString("full",form.address2,"Only letters, numbers and underscores '_' are allowed in the password."); CheckFieldString("noblank",form.city,"Last Name must be specified."); CheckFieldString("text",form.city,"Only letters are allowed in Last Name."); if(form.username.value.length >= 5 && form.username.value.length <= 20){ if ( !isNaN(form.username.value.charAt(0)) ){ ErrorCount++; ErrorMsg[ErrorCount] = "Username must start with a letter." ; } }else{ ErrorCount++; ErrorMsg[ErrorCount] = "Number of characters in username should be between the specified range." ; } if (tos_ok != true) { ErrorCount++; ErrorMsg[ErrorCount]="Please read and accept the Terms of Service before registering"; } /* concat all error messages into one string */ result=""; if( ErrorCount > 0) { result = "---- Following errors occured -----"+ String.fromCharCode(13)+ String.fromCharCode(10); for( c in ErrorMsg) result += ErrorMsg[c]+ String.fromCharCode(13)+ String.fromCharCode(10)+ String.fromCharCode(10); alert(result); return false; } return true; } /* ]]> */ </script> Hey Guys, I've been working on a WP site that uses a handful of plugins - several of which include java-script files. I've been having trouble with one of the plugins and have started the debugging process and noticed that the page the problem is occurring on shows a few java-script errors. http://proshotsrange.com/test-contact-page/ What do the "Object Not Supported" errors mean - and what would it entail to fix them? Thanks in advance. Code: Webpage Error Details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0) Timestamp: Mon, 22 Nov 2010 16:43:02 UTC Message: Object doesn't support this property or method Line: 143 Char: 2 Code: 0 URI: http://proshotsrange.com/wp-content/plugins/wp-e-commerce/js/wp-e-commerce.js?ver=3.7.58 Message: Object doesn't support this property or method Line: 4621 Char: 7 Code: 0 URI: http://proshotsrange.com/wp-includes/js/prototype.js?ver=1.6.1 Message: 'style' is null or not an object Line: 33 Char: 6 Code: 0 URI: http://proshotsrange.com/wp-content/plugins/lightbox-2/lightbox.js?ver=1.8 Hi, I am trying to run multiple videos in the JW player by clicking on different links.Its working fine in chrome and firefox, But it doesn't play viseos in IE. Kindly suggest me ...Thanks in advance..Here is the code. <script type="text/javascript"> function start(){ return playVideo("mediaspace","mediawindow"); } function playVideo(sourceId, targetId) { if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);} if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);} targetId.innerHTML=sourceId.innerHTML; return false;} </script> <body onload="start()"> <div id="mediawindow"></div> <div id="mediaspace" class="fltrt" style="display:none"> <script type='text/javascript' > var so = new SWFObject('player.swf','mpl','360','295','9'); so.addParam('allowfullscreen','true'); so.addParam('allowscriptaccess','always'); so.addParam('wmode','opaque'); so.addVariable('playlistfile','IIA2010.xml'); so.addVariable('stretching','fill'); so.addVariable('autostart','true'); so.addVariable('repeat','list'); so.addVariable('skin','stormtrooper.zip'); so.write('mediaspace');</script></div> <p><a href="#" onclick='return playVideo("mediaspace","mediawindow")'>Play all</a><br /> <a href="#" onclick='return playVideo("welcome","mediawindow")'>MC Linda Clark welcomes guests</a><br /></p> You can also have a look on the webpage. Its working well in FF and chrome. you can test it there. http://www.internetindustryawards.co.nz/2010.html Its really urgent... I'm Sunita. I am working in ASP .net . I have created Class1.dll file . and in javascript I am creating ActiveXobject . when i debug the application . Its gives error like Object doesn't support this property or method. my code is Code: Class1.cs
using System;
using System.Collections.Generic;
using System.Text;
using System.IO.Ports;
namespace Ana7140
{
public class Class1
{
//Declare Variables
string data = "";
string log = "";
bool DoneDataReceived = false;
bool tare = false;
private SerialPort comport = new SerialPort();
public void send()
{
//Send comport
comport.Write("?1");
if (data.Length > 1)
{
data = data.Replace('\r', ' ');
char sign = data[1];
string DelimeterStr = "+-";
char[] delimiter = DelimeterStr.ToCharArray();
string[] splited = null;
splited = data.Split(delimiter);
data = Convert.ToString(sign) + Convert.ToString(Convert.ToDouble(splited[1]));
}
else
{
data = "";
}
}
public string GetValue()
{
//Send command to port
if (comport.IsOpen)
{
if (tare == true)
{
comport.Write("?1");
log = log + "Sent ?1 command";
//if (data.Length > 1)
//{
// data = data.Replace('\r', ' ');
// char sign = data[1];
// string DelimeterStr = "+-";
// char[] delimiter = DelimeterStr.ToCharArray();
// string[] splited = null;
// splited = data.Split(delimiter);
// data = Convert.ToString(sign) + Convert.ToString(Convert.ToDouble(splited[1]));
//}
//else
//{
// data = "";
//}
while (true)
{
if (DoneDataReceived == true)
{
DoneDataReceived = false;
break;
}
}
tare = false;
}//end of if(tare==true)
else
{
data = "-2";
}
}
else
{
data = "-1";
}
//This will return the data only
return data;
}
//To fetch the data from Serial Port
public void port_DataReceived(object sender, SerialDataReceivedEventArgs e)
{
try
{
if (comport.IsOpen)
{
//Reading Data from Serial Port
data = comport.ReadLine();//.ReadExisting();
log += data;
// GetValue();
if (data.Length > 1)
{
data = data.Replace('\r', ' ');
char sign = data[1];
string DelimeterStr = "+-";
char[] delimiter = DelimeterStr.ToCharArray();
string[] splited = null;
splited = data.Split(delimiter);
data = Convert.ToString(sign) + Convert.ToString(Convert.ToDouble(splited[1]));
}
else
{
data = "";
}
DoneDataReceived = true; //Done with data processing
}
}
catch (Exception ex)
{
//MessageBox.Show(ex.Message);
}
}
public string getLog()
{
return log;
}
//This Function initialiases the serial port
//public void Initialise()
//{
// try
// {
// isInitialise = true;
// correct = false;
// init = true;
// //sending command to serial port for initialization
// //comport.Write("*\n");
// }
// catch (Exception ex)
// { }
//}
public void Tare()
{
try
{
//sending command to serial port for initialization
comport.Write("T\n");
tare = true;
}
catch (Exception ex)
{ }
}
//This function opens the comport
public void Start()
{
try
{
//if previously comport is open the firstly close this connection then open again comport
if (comport.IsOpen)
{
comport.Close();
}
else
{
//set Baudrate value as 300
comport.BaudRate = 300;
//to read data in string set Data bits as 8
comport.DataBits = 8;
//set stop bits as 1
comport.StopBits = (StopBits)1;
//set parity bit as None
comport.Parity = (Parity)Enum.Parse(typeof(Parity), "None");
//Set Port Name as COM1
//comport.PortName = "COM1";
//Set Read Time Out as 100
comport.ReadTimeout = 100;
//Open comport
comport.Open();
//Call event for serial data received
comport.DataReceived += new SerialDataReceivedEventHandler(port_DataReceived);
//data = "";
// comport.Write("?1");
}
}
catch (Exception ex)
{
}
}
//close the connection and close the comport
public void Stop()
{
try
{
//check whether comport is open or not
//if comport is open then close the comport
if (comport.IsOpen)
{
//comport.ReadExisting();
comport.Close();
}
}
catch (Exception ex)
{ }
}//End of Stop
//To check Connection is Opened or not
public string getStart()
{
string check = "";
try
{
if (comport.IsOpen)
{
check = "0"; //If the connection is opened,then check=0
}
else
{
check = "-1"; //If the connection is closed,then check=-1
}
}//End of try
catch (Exception ex)
{ }
return check;
}//End of getStart
}
}
JavaScript program is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>
<script language="javascript">
var wshell;
wshell=new ActiveXObject("Ana7140.Class1");
function GetVal()
{
var val= wshell.GetValue();
alert(val);
}
function setip()
{
wshell.Start();
wshell.Initialise();
alert(val);
}
function Stop()
{
wshell.Stop();
//alert(val);
// wshell.Stop();
//alert(val);
}
function Tares()
{
wshell.Tares();
//alert(val);
// wshell.Stop();
//alert(val);
}
</script>
</head>
<body>
<form name="form1" method="post" id="form2">
<div>
<a href="#" onclick="javascript:setip()"> Connect </a>
<a href="#" onclick="javascript:GetVal()"> Acquire Weight </a>
<a href="#" onclick="javascript:Stop()"> Disconnect </a>
<a href="#" onclick="javascript:Tares()"> Tares </a>
</div>
</form>
</body>
</html>
plz help me for (var i=0; i < document.myform.registrationtype.length; i++) { if (document.myform.registrationtype[i].checked) { var registrationtype = document.myform.registrationtype[i].value; } } what is wrong with this? i'm trying to get the value of registrationtype (a radio box) i'm getting an error object doesn't support this propery or method Dear All: My apologies - this is probably something that comes up time and time again. However, I was wondering - I realize there does not seem to be a "standard" way to do this (without additional libraries), but is there any "hacky" method that can be used to get XPath support in IE? What I mean is for parsing the loaded HTML document. Thank you Misha I have looked at the various posts about setting onclick in IE and I cannot see any that exactly describe the problem I am having. Firstly I am not trying to set onclick by calling setAttribute, which most of the posts describe. I am simply assigning a value to the onclick attribute of the element, which those posts seem to imply. Specifically I am getting "Object doesn't support this action" on the following line: Code: editButton.onclick = editCitation; editCitation is already a function, so I do not see why I should have to wrap it in an anonymous function wrapper to get IE to permit the assignment. My website is working perfectly on Firefox but when I visit it with IE(7), I get the following errors and some things aren't where they're supposed to be. Quote: Webpage Script Errors User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; InfoPath.2; .NET CLR 3.5.30729; .NET CLR 3.0.30618) Timestamp: Fri, 25 Sep 2009 08:31:56 UTC Message: Object doesn't support this property or method Line: 8 Char: 186 Code: 0 URI: http://icarwakim.com/media/system/js/mootools.js Message: Object doesn't support this property or method Line: 59 Char: 102 Code: 0 URI: http://icarwakim.com/media/system/js/mootools.js Website: http://www.icarwakim.com Any advise? Is there a way to redirect your site to another site if the browser doesn't support HTML 5? So, if you where using an old version of IE or Firefox that didn't support HTML 5 it would redirect them to another page. |
|||||||