|
JavaScript - [resolved] Help With Jcarousellite - Won't Display More Than 3 Images
howdy,
my site is www.site-tonight.com and on the homepage i have a jcarouselLite that came with the wordpress template that im using. I cannot get it to display more then 3 images, even if i put another <li> item in there. I've copied and pasted the last image 2-3 times over and it won't display. I've also tried changing it to a new image and putting it at the end and it still won't display. I have scoured the internet and spent a lot of time trying to figure this out and it's stumping me, so help is muchhhhhh appreciated. any suggestions for a newbie? Similar TutorialsHello, I'm looking for help as I have the jCarouselLite feature functioning on my website and am looking for a way of displaying another image to the right of the carousel, dependent upon which image is visible in the carousel. I toyed with the idea of implementing another snippet of JavaScript to swap the text to the right and manually synching the swap time wise, but quickly abandoned this idea for a number of reasons, particularly as the carousely has buttons to scroll through the images displaying. I have to admit I'm not particularly great with JavaScript, but was thinking along the lines of another function that listens for the image that is displayed, but have no idea if am way off the mark, or even if this is the right track - no idea how to implement. Any help would be very gratefully recieved. Thanks, Matt So I have the jcarousel with pagination working fine. So Im happy with all of the behavior that is going on right now, it is great. My issue is I would liek to have the pagination numbers still change the class on the slide changes, But my one thing is, I want to make the pagination numbers NOT links. So they keep the same hover states and the color changes on slide change, but only the slide carousel arrows can change the slides, and the pagination is only for notification purposes. not links or able to change slides. Can this be done? my code is here http://www.cesariomendoza.com/jcarousel/
I want to have multiple instances of jcarousellite on the same page, but as you can see, they both scroll together. I am javascript brain dead, so any help would be appreciated, even if it's something obvious. http://goo.gl/vMLPA I found the following guide, but I need my hand held. http://myintarweb.com/dispatch/multiple-jcarouselite Hi, first off I am very green when it comes to this stuff, so it needs to be spelled out for me. First, I was using colorbox on one page for an image gallery, and that works fine. On a different page, I have jcarousellite, which works fine as well. If only I could mix them both on the same page. I couldn't figure that out, so what I did was create a new page each time I clicked a jcarousel image. It opens up a completely different page, but I styled it in such a way that it at least "mimics" how it might look if I were using a lightbox script. So my solution works fine for now EXCEPT that once I close the new page (that mimics lightbox) the jcarousellite slides revert back to starting position. I need the slides to stay at the last clicked position, and not go back to the beginning each time I refresh the page. I searched online and saw some people talk about an "afterEnd" callback, but this is where my ability stops. If anyone could help me here it would be fantastic. Here is my code: Code:
$(document).ready(function() {
$(".slider").jCarouselLite({
speed: 100,
visible: 4,
btnPrev: ".previous",
btnNext: ".next",
circular: true
});
});
Hi Guys, I'm using jcarousellite to show my newsitems in a vertical carousel. http://www.gmarwaha.com/jquery/jcarousellite/ The carousel itself works perfectly, now I'm trying to add that before the news scrolls upwards the top news-item fades-out first. Now it is fading out the complete list and I simply can't seem to figure out how to 'talk' to the 'active/top' <li> in the list. Can someone give me a hint? Thanks in advance, Marcel -- Code Below -- Code: $(function() {
$(".widgetCarousel").jCarouselLite({
circular: true,
vertical: true,
visible: 3,
scroll: 1,
start: 1,
auto: 500,
speed: 1000,
beforeStart: function(a) {
$(a).parent().fadeTo(100, 0);
},
afterEnd: function(a) {
$(a).parent().fadeTo(100, 1);
}
});
});
<div class="widgetCarousel">
<ul>
<li>My very own news item</li>
<li>My very own news item</li>
<li>My very own news item</li>
<li>My very own news item</li>
<li>My very own news item</li>
<li>My very own news item</li>
</ul>
</div>
Hello; New to Javascripting, new to forum. I searched the forum, and tried to adapt, to no avail. I am building a store and want users to be able to see how two items look together. I have it working, but it uses a drop down. I would like to display many items and have the user click on one "image", from the display of "top" images, to display it on top, and from another section of "bottom" images, click another image to display it on bottom. For instance to see what one plant would look like in different vases. If I could be picky, is there a way to make it all happen in the BODY of the page? I use DW and a template. Code:
<html>
<head>
<script language="javascript">
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
document.images.pictures2.src=
document.mygallery2.picture2.options[document.mygallery2.picture2.selectedIndex].value
}
//-->
</script>
</head>
<body>
<p class="style1">Try a few selections for your gift.</p>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><form name="mygallery"><select
name="picture" size="1" onChange="showimage()">
<option selected value="images/bear1.jpg">Bear 1</option>
<option value="images/bear2.jpg">Bear 2</option>
<option value="images/plant1.jpg">Plant 1</option>
<option value="images/plant2.jpg">Plant 2</option>
<option value="images/plant3.jpg">Plant 3</option>
</select>
</form>
</td>
<td><a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onMouseover="window.status='';return true"><img src="images/bear1.jpg" name="pictures" width="150" border=0></a></td>
</tr>
<tr>
<td><form name="mygallery2"><select
name="picture2" size="1" onChange="showimage()">
<option selected value="images/cup1.jpg">Mug 1</option>
<option value="images/cup2.jpg">Mug 2</option>
</select>
</form>
</td>
<td><a href="javascript:linkrotate(document.mygallery2.picture2.selectedIndex)" onMouseover="window.status='';return true"><img src="images/cup1.jpg" name="pictures2" width="150" border=0></a></td>
</tr>
</table>
</body>
</html>
Hello. I've recently implemented this really cool jQuery preloader called queryLoader. When a visitor comes to my site they are fed all the important images for the entire site (it's a very small site). During that time queryLoader shows a percentage loading animation, and once all the images are loaded it wipes the screen & displays the website. I've placed another custom animation in the "page loading" div, and i want to make sure it loads first so that it is displayed while the rest of the images get downloaded. I've tried pre-loading with javascript as the very first script in my header, before jQuery or queryLoader get loaded, like this: Code: <script type="text/javascript">
pic1= new Image(250,300);
pic1.src="images/page_loading.gif";
</script>
<script type="text/javascript" src="scripts/jQuery.js"></script>
<script type="text/javascript" src="scripts/queryLoader.js"></script>
However, this doesn't seem to be that effective. When i clear browser cache and reload the page, the page_loading.gif sometimes doesn't appear until the site is almost completely loaded. Is there a more effective way to assure the page_loading.gif gets loaded before any other images? My site is jugtones.com if that helps in any way. Thanks for your time, -Scott Hi, how would i edit the code below so instead of today is day 16 of the month to an actual date eg Today is 10/11/2011 (dd/mm/yyyy or mm/dd/yyyy compatible). I need the code to execute on a specific date. javascript or php versions very welcome THANKS Code: <script type="text/javascript">
var Date = new Date();
var Today = Date.getDate();
if(Today == 16)
{
document.write('<img src="http://www.imagelocation_here" alt="Image title " width="117" height="100" />');
}
else
{
document.write('<img src="http://www.imagelocation_here" alt="image title " width="117" height="100" />');
}
</script>
www.e-decals.com/dev displays fine in Firefox and Safari, (link color a { color : #b2b2b2 correct) but IE showing default link colors around images in multibox - IE error he User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB6; SLCC1; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.5.30729; .NET CLR 3.0.30618) Timestamp: Thu, 5 Nov 2009 15:11:40 UTC Message: Object doesn't support this property or method Line: 467 Char: 4 Code: 0 URI: http://www.e-decals.com/dev/multibox/multibox.js Any ideas? Okay, ive got 3 css classes. (normalfld, focusfld, and errorfld) When a textbox gets focus, the css class gets set to focusfld, when it looses focus it gets set to normalfld. When a textbox has an error, i set the css class to "errorfld" Now, what I would like to happen is that when a box has been set to "errorfld", when it gets and looses focus, its style will not be changed. This is my first ever attempt at javascripting and im sucking pretty bad. Can someone get me going in the right direction? Here is my attempt, that does not work. It always sets the class, even if the box is set to "errorfld" Code: function DoFocus(fld) {
if (fld.classname != 'errorfld')
{
fld.className = 'focusfld';
}
}
Any ideas where I went wrong? t.i.a, ~Matt I have a radio button group, with 2 options. They have the value YES and NO At the onclick I call the function ButChange() However, it's not fully working correctly.. Initially it shows both DIV's, while only 1 should show (the LoginB div) When I select the NO value in the radio group, the correct DIV is showing, meaning it does hide the RegisterB div as it should. When I select the YES value after selecting NO, it does not change... I have a feeling I must be close with my coding and hope someone can help me out? Here's the script: <script type="text/javascript"> function ButChange() { if (document.LoginForm.PassWordExists.value == "YES") { document.getElementById("RegisterB")["style"]["display"] = "none"; document.getElementById("LoginB")["style"]["display"] = "block"; } else { document.getElementById("LoginB")["style"]["display"] = "none"; document.getElementById("RegisterB")["style"]["display"] = "block"; } } </script> <div id="LoginB"><input type="image" src="<%=rslayout("login")%>" name="SubmitCO" id="submit"></div> <div id="RegisterB"><input type="image" src="<%=rslayout("register")%>" name="SubmitCO" id="submit"></div> Thanks in advance for your help! I have a PHP page with a number of images displayed thumbnail size. I want the image source of a clicked thumbnail to be the image source of a larger image in an image field. Javascript is he Code: <script type="text/javascript">
function getValue(VarSrc)
{
VarSrc = document.getElementById('myimage').src;
}
</script>
The image field HTML is he Code: <form action="" id="PicForm" method="post" name="FindFile"> <input name="MyImage" type="image" id="myimage" value="Image Placeholder"/></form> The thumbnails are generated dynamically by PHP, this is how they look in HTML when rendered: Code: <img src="../158/DSCN3866.JPG" width="100" id="selectpic" onclick="getValue(../158/DSCN3866.JPG)"/> This is how they look in PHP: PHP Code: $output .= "<img src=\"{$pathToImages}{$fname}\" width=\"100\" id=\"selectpic\" onclick=\"getValue({$pathToImages}{$fname})\"/>"; The script doesn't work, which puzzles me because it was a suggested solution to a similar problem, and the author of the question confirmed that it worked. My question for you is: a) Should it work? b) If it won't, can someone suggest a solution that will? Thanks for your help. Elizabeth My first google map, using latlng coordinates works fine. However my second google map isn't working. The map itself is grey. I have my code, but the problem is I am not calling the geocode function and I am not sure where I should do this. Code:
<script type="text/javascript">
var geocoder;
var submap;
function createGMapFromAddress(position){
alert(position);
geocoder = new google.maps.Geocoder();
var sublatlng = new google.maps.LatLng(position);
var map_options = {
zoom: 4,
center: sublatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var submap = new google.maps.Map(document.getElementById("placemap_canvas"), map_options);
}
function codeAddress(address){
alert("address");
var address = document.getElementById("address").value;
geocoder.geocode({address: address}, function(results, status){
if (status == google.maps.GeocoderStatus.OK && results.length){
if (status != google.maps.GeocoderStatus.ZERO_RESULTS){
map.set_center(results[0].geometry.location);
}
} else {
alert("Geocode was unsuccessful due to: " + status);
}
});
}
</script>
The script is called by clicking on a button: Code: <input type="button" value="Click" onclick="createGMapFromAddress('Oxford Street,London,UK')"; />
Edit: Nevermind
I have a script that works until I add the clearInterval command, and I am not sure what I have done wrong. The code is: Code:
<script type="text/javascript">
function loadChatTalkRefresh(File,ID,Msg){
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
empress = setInterval(function(){loadChatTalkRefresh(File,ID,Msg)},3000);
willow = clearInterval(empress,210000);
}
}
var params=Msg;
xmlhttp.open("POST",File,true);
xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
Problem resolved. Please delete.
I have this javascript on top of my HTML codes, that enables the "Free Trial" button if the Checkbox=On. but since I am not a programmer, I need a good mind to help me edit this What I need is to Edit this so that, If focus on Voucher Code field and have at least 6 bytes entered, and also the CheckBox=ON, I want the "Trial" button to change to "Confirm". <script language="Javascript" type="text/javascript"> function enable(){ if (document.agreement_form.agreed.checked==''){ document.agreement_form.submit_button.disabled=true }else{ document.agreement_form.submit_button.disabled=false } } </script> <div style="float:right;width:200px;margin-left:15px;padding-left:15px;margin-top:15px;border-left:2px dotted #99CC00"> <span style="font-weight:bold;font-family:Tahoma;font-size:10pt;">Voucher Code:</span><br/> <form style="font-family:Tahoma;font-size:8pt;" method="GET" action="$authaction" name="agreement_form"> <input name="tok" value="$tok" type="hidden"/> <input name="redir" value="$redir" type="hidden"/> <input size="12" name="voucher" type="password"/> <button type="SUBMIT" disabled="disabled" name="submit_button"><strong> Free Trial </strong></button> <p> </p> <input name="agreed" onchange="enable()" type="checkbox"/> Signed & agreed to all terms and conditions. </form> Hello, I've tried various things I've found online but cannot seem to get the right code to open the links in a drop down menu in a new window. Code: <form id="quicklinks" name="quicklinks" action="">
<select name="quicklinkitem" onchange="openWin(quicklinkitem.value)">
<option value="/lib/board.html">Select a Date</option>
<option value="/lib/boardreports/03-08-12.pdf">March 8, 2012</option>
<option value="/lib/boardreports/02-09-12.pdf">February 9, 2012</option> </select>
</form>
I appreciate any help. Elbee Please try a search on my webpage (search box is located at top of sidebar on the left): http://www.americanchic.net/help Here is the code implemented on the search results page: Code: <div id="cse-search-results"></div> <script type="text/javascript"> var googleSearchIframeName = "cse-search-results"; var googleSearchFormName = "cse-search-box"; var googleSearchFrameWidth = 500; var googleSearchDomain = "www.google.com"; var googleSearchPath = "/cse"; </script> <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script> The original code (from my Google custom search control panel) included a FrameWidth of 600 and I changed it to 500 but it didn't make a difference. Any ideas? Hi, When I try and geocode an addres to my google map I receive the error: Object does not support this method or property I have gone over the script and can't work out what I did wrong. Code: <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {height:250px}
body {height:250px}
#bookmark_map {width:90%; height:250px; margin-left:15px;}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true" />
</script>
<script type="text/javascript">
var geocoder;
var map;
function createGMapFromAddress(){
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(0,0);
var map_options = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("bookmark_map"), map_options);
}
function loadBookMarkMap(location){
alert(location);
var address = location;
alert(address);
geocoder.geocode({address: address}, function(results, status){
if (status == google.maps.GeocoderStatus.OK && results.length){
if (status != google.maps.GeocoderStatus.ZERO_RESULTS){
map.set_center(results[0].geometry.location);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
}
} else {
alert("Geocode was unsuccessful due to: " + status);
}
});
alert(marker);
}
</script>
</head>
<body onload="createGMapFromAddress()">
//php get from table
$possumshaw ="{$row['address']}"; }
echo '<input type="button" class="button4" value="View Map" onclick="loadBookMarkMap(\'' . $possumshaw . '\')" />';
?>
|
|||||||