|
JavaScript - Jquery, Jcarousel Problems - Want It To Go Back To The Start And Then Stop
Jquery, Jcarousel problems - want it to go back to the start and then stop
Here is the link - I want it to go from the last - which would be the 3rd image and swoosh back to the beginning and stop. my alternative is already uploaded where I have it just go to the 4th which is the same at the first.. Help it would look nicer with it swooshing back to the beginning and stopping. http://www.macrojump.com/sti_demo/home.php Code: $(document).ready( function() {
function carouselInit(carousel) {
$('.level0-hero-carousel .carousel-control a').bind('click', function() {
carousel.scroll( parseInt( $(this).attr('rel') ) );
carousel.stopAuto();
return false;
});
carousel.clip.hover(function() {
//carousel.stopAuto();
}, function() {
//carousel.startAuto();
});
};
function firstItemAction(carousel, item, idx, state) {
$('.level0-hero-carousel .carousel-control a').removeClass('active').eq(idx-1).addClass('active');
};
$('.level0-hero-carousel').jcarousel({
scroll: 1,
initCallback: carouselInit,
itemFirstInCallback: firstItemAction,
auto: 4,
wrap: 'first',
animation: 1500,
buttonNextHTML: null,
buttonPrevHTML: null
});
if( $('.level0-hero-carousel ul li').size() > 1 )
$('.level0-hero-carousel .carousel-control').show();
$('.level0-hero-carousel .carousel-control a').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
/* Alerts */
$('.level0-alerts ul li').eq(0).show();
var alertsInterval = null;
var alertsIndex = 0;
var alertsIntervalLength = 1500;
var alertsCount = $('.level0-alerts ul li').size();
var expandedSizeClass = 'level0-alerts-expanded-' + alertsCount;
// Update NumAlerts Text
$('.level0-alerts .alerts-toggle span').text(
alertsCount + ' Alerts'
);
$('.level0-alerts .alerts-controls .alerts-toggle').bind('click', function() {
var itemsCount = $('.level0-alerts ul li').size();
if( $('.level0-alerts').hasClass('level0-alerts-expanded') ) {
$('.level0-alerts').removeClass('level0-alerts-expanded');
$('.level0-alerts').removeClass(expandedSizeClass);
switchAlert();
startAlertsInterval();
} else {
$('.level0-alerts').addClass('level0-alerts-expanded');
$('.level0-alerts').addClass(expandedSizeClass);
$('.level0-alerts ul li').show();
stopAlertsInterval();
}
return false;
});
var switchAlert = function() {
$('.level0-alerts ul li').hide();
alertsIndex++;
$('.level0-alerts ul li').eq(alertsIndex % alertsCount).show();
}
var startAlertsInterval = function() {
if(alertsInterval == null)
alertsInterval = setInterval(switchAlert, alertsIntervalLength);
}
var stopAlertsInterval = function() {
if(alertsInterval != null) {
clearInterval(alertsInterval);
alertsInterval = null;
}
}
if(alertsCount > 1) {
$('.level0-alerts .alerts-controls').show();
startAlertsInterval();
}
});
/*
* jQuery Placeholder Plug-in
*
* Copyright (c) 2010 Max Davis
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Revision: 1
* Version: 0.1
*
* v0.1
* - First public release
*
*/
(function($){
$.fn.placeholder = function() {
$(this).each( function() {
if($(this).attr("type") == "password") {
var original_pass_field = $(this);
if(original_pass_field.val() == "") {
$(this).parent().append("<input type=\"text\" value=\""+ $(this).attr("placeholder") +"\" name=\"pass_placeholder\" class=\"form-text placeholder-inactive\" id=\"pass_placeholder\">");
$(this).css("display","none");
}
var original_pass_field = $(this);
$("#pass_placeholder").focus(function() {
if(original_pass_field.val() == "") {
$("#pass_placeholder").css("display","none");
original_pass_field.css("display","");
original_pass_field.focus();
}
});
original_pass_field.blur(function() {
if(original_pass_field.val() == "") {
$("#pass_placeholder").css("display","");
original_pass_field.css("display","none");
}
});
} else {
if($(this).val() === "") {
$(this).val($(this).attr("placeholder"));
$(this).addClass('placeholder-inactive');
}
$(this).focus(function() {
if($(this).val() === $(this).attr("placeholder")) {
$(this).removeClass('placeholder-inactive').addClass('placeholder-active');
$(this).val("");
}
}).blur(function() {
if($(this).val() === "") {
$(this).removeClass('placeholder-active').addClass('placeholder-inactive');
$(this).val($(this).attr("placeholder"));
}
});
}
} )
}
})(jQuery);
Similar TutorialsHi, I was wondering if there is anyone who could help me! I'm creating a Javascript slideshow, I have 'back' & 'next' functions which work. However, I'm not sure how to create a 'start' and 'stop' function (have to be separate functions), here is my current code below? IS there a genius out there who can help?! ------------------------------------------- <div id="slideshow"> <div class="mainimage"> <img height="300px" src="images/homemainimage.jpg" width="300px" height="300px" name="photoslider"/> <script language="JavaScript1.1"> var photos=new Array() var which=0 photos[0]="images/css3.svg" photos[1]="images/cloudcomputing.png" photos[2]="images/Rss.jpg" photos[3]="images/html5.png" photos[4]="images/jQuery.png" photos[5]="images/firewall.png" function swapImage(){ if (which<photos.length-1){ which++ document.images.photoslider.src=photos[which] } setTimeout("swapImage()",10000); } window.onload=swapImage; function backward(){ if (which>0){ window.status='' which-- document.images.photoslider.src=photos[which] } } function forward(){ if (which<photos.length-1){ which++ document.images.photoslider.src=photos[which] } } </script> <input type="button" value="<<Back" name="B2" onClick="backward()"> <input type="button" value="Next>>" name="B1" onClick="forward()"><br> --------------------------------------------------------- Thanks in advance!! Reply With Quote 01-20-2015, 09:56 PM #2 felgall View Profile View Forum Posts Visit Homepage Master Coder Join Date Sep 2005 Location Sydney, Australia Posts 6,745 Thanks 0 Thanked 666 Times in 655 Posts It would be easier if you used setInterval rather than setTimeout as then you just need to use clearInterval to stop and setInterval to restart. Note also that both setTimeout and setInterval expect a function as their first parameter and not a string (except for IE3) and so the way you have it coded it has to eval() the string to convert it to a function. Also the language attribute on the script tag was replaced by a type attribute about 15 years ago. Also most browsers don't allow JavaScript to access window.status any more for security reasons. Hey guys, I am new at JavaScript, but I have been able to piece together some code for a stopwatch. I have everything the way I want it in regards to the function and look of the stopwatch, but I want to be able to set timers so that the ss() function in the code below will go and stop automatically at intervals I can set. I just can't seem to get there with this one and any help is greatly appreciated. Thank you for your time. Code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<script type="text/javascript">
var t=[0, 0, 0, 0, 0, 0, 0, 1];
document.onkeyup=function(event) {
if((event.which && event.which === 32) || (event.keyCode && event.keyCode === 32))
{
ss()
}
}
function ss()
{
t[t[2]]=(new Date()).valueOf();
t[2]=1-t[2];
if (0==t[2])
{
clearInterval(t[4]);
t[3]+=t[1]-t[0];
t[4]=t[1]=t[0]=0;
disp();
}
else
{
t[4]=setInterval(disp, 43);
}
}
function r()
{
if (t[2]) ss();
t[4]=t[3]=t[2]=t[1]=t[0]=0;
disp();
t[7]=1;
}
function disp()
{
if (t[2]) t[1]=(new Date()).valueOf();
t[6].value=format(t[3]+t[1]-t[0]);
}
function format(ms)
{
var d=new Date(ms+t[5]).toString()
.replace(/.*([0-9][0-9]:[0-9][0-9]:[0-9][0-9]).*/, '$1');
var x=String(ms%1000);
while (x.length<3) x='0'+x;
d+='.'+x;
return d;
}
function load()
{
t[5]=new Date(1970, 1, 1, 0, 0, 0, 0).valueOf();
t[6]=document.getElementById("disp");
disp();
}
</script>
</head>
<body onload='load();'>
<div></div>
<input type="text" style="border: none" id="disp" readonly />
<style type="text/css">
#disp {
font-size: 180px;
text-align: center;
font-family: Verdana;
}
</style>
</body>
<form>
</form>
</html>
is there a way to stop a flash video with jQuery?? I'm using a html5 video with flash fallback.. i'm using the video on a modal pop up.. when i try to hide the video, the flash video doesn't stop... so before i hide the mask, i must stop or pause the video, then hide.. i tried various ways, but i can't seem to make them work.. Code: <video id="480p" width="848" height="480" controls="controls" poster="New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/poster.jpg">
<source src="New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/Marie_Mcray_Test-H264_480p.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/Marie_Mcray_Test.ogg" type='video/ogg; codecs="theora, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object id="480pfallback" class="480p" width="848" height="480" type="application/x-shockwave-flash" data="flowplayer/flowplayer-3.2.7.swf">
<param name="movie" value="flowplayer/flowplayer-3.2.7.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/poster.jpg", {"url": "New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/Marie_Mcray_Test-H264_480p.mp4","autoPlay":false,"autoBuffering":false}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/Marie_McCray_A_O_poster.jpg" width="848" height="480" alt="Poster Image" title="No video playback capabilities." />
</object>
</video><!--480p-->
You've probably seen this many times with two dynamic linking select boxes that deals in form or another deal with countries and then cities for the second one or something similar well I have another question about that. I've looked at a few others and well their coding is so different then mine that I don't want to use code for my own project that I don't understand in case I need to reuse it for some other reason down the road. The user selects a country and with the users selection it passes the countryid as a variable through jquery's ajax fuction as a post parameter to a php process page in which it goes to a table and matches the country id with the db field called country_id in the arenas table. With all the records that matches that countryid it selects the arena name and city that the arena is in and displays it as an option tag now I'm trying to figure out with muliple entries how can I pass the results back to the form page and insert it into the arenas dropdown box. Following is my coding separated out for you. I only included the necessary parts. All help would be greatly appreciated. form page Code: $('#countryid').change(function() {
var countryid = $("select#countryid").val();
var dataString = 'countryid='+ countryid;
$.ajax({
type: "POST",
url: "processes/booking.php",
data: dataString,
success: function() {
}
});
});
<div class="field required">
<label for="countryid">Country</label>
<select class="dropdown" name="countryid" id="countryid" title="Country">
<option value="0">- Select -</option>
<?php
$query = 'SELECT id, countryname FROM countries';
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) )
{
print "<option value=\"".$row['id']."\">".$row['countryname']."</option>\r";
}
?>
</select>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="arena">Arenas</label>
<select class="dropdown" name="arenas" id="arenas" title="Arenas">
</select>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
php process page PHP Code: $countryid = (int)$_GET['countryid']; $query = "SELECT * FROM `arenas` WHERE `country_id` = '$countryid'"; $result = mysqli_query ($dbc, $query); while ($row = mysqli_fetch_array($dbc, $result)) { echo '<option value="'.$row['arena'].'">'.$row['arena'].' - '.$row['city'].'</option>\n'; } http://sorgalla.com/projects/jcarousel/ I would like to use this jcarousel. I dont use AJAX, I just want to set it up with script in my head and html on my website. Is this possible or do I have ot use AJAX? I am not familiar with it at all.. I completed the steps it said. I put the folder in my directory. I added the script to my head code, as well as the other one. I then also added the other two scripts in my html where I would like them to be. It's not showing up so I know I am missing steps or not doing it correctly Help anyone? THANK YOU!!! Hi i have a question and i would really appreciate the help of fellow coders. I came across a certain horizontal jcarousel on the website http://www.goal.com , i would like to know how this was done as i would like to use this type of jcarousel for my websites homepage . i would really appreciate the help of you guys .
Hello, We have jcarousel on our forum site which rotates automatically. It is vbulletine forum. In fact originally it was working fine with old design and rotating images automatically in horizontal direction with a set of 5 images visible at a time and total 12 images in set. But we have upgraded our forum design in last week and I started getting issues with Jcarousel scroller. Our site URL is http://newtest.naturalparenting.com.au Please go at any topic and post page finally, Below first post there is a scroller e.g http://newtest.naturalparenting.com....ad.php?t=42713 While old site design is still active at http://ninad.naturalparenting.com.au Please go at any topic and post page finally, Below first post there is a scroller e.g http://ninad.naturalparenting.com.au...ad.php?t=40745 At new design when we implemented jcarousel scroller it is showing only one image in a horizontal row at jscroller and it disappears immediately and after 3-4 min it do reappear again. When I inspected it using firebug I have noticed that other images are coming below vertically not horizontally, really strange. Also I noticed another thing is that it is not updating width at element.style in firebug for UL tag. It is showing fix width 220 px all time. I think due to that all images appearing vertically one after one rather than horizontally. It is really very strange issue for me. I have tried all ways to fix it but alas !!! Any help would be greatly appreciated. Code: <style type="text/css">
.jcarousel-skin-tango .jcarousel-container {
-moz-border-radius: 0px;
background: transparent;
border: 0px solid #CEC8B7;
}
.jcarousel-skin-tango .jcarousel-direction-rtl {
direction: rtl;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 695px;
padding: 20px 30px;
}
.jcarousel-skin-tango .jcarousel-container-vertical {
width: 75px;
height: 220px;
padding: 40px 20px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
height: 220px;
margin-left: auto;
margin-right: auto;
width: 675px;
}
.jcarousel-skin-tango .jcarousel-clip-vertical {
width: 75px;
height: 220px;
}
.jcarousel-skin-tango .jcarousel-item {
width: 75px;
height: 75px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left: 0;
margin-right: 10px;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
margin-left: 10px;
margin-right: 0;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: 10px;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
background: #fff;
color: #000;
}
/**
* Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
position: absolute;
top: 83px;
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
/* background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll right top;*/
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
left: 5px;
right: auto;
background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll right top;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
position: absolute;
top: 83px;
left: 5px;
width: 31px;
height: 31px;
cursor: pointer;
/*background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll left top;*/
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
left: auto;
right: 31px;
/*background-image: url(images/checkout/nivo_nav.png);*/
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
/**
* Vertical Buttons
*/
.jcarousel-skin-tango .jcarousel-next-vertical {
position: absolute;
bottom: 5px;
left: 43px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(next-vertical.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-next-vertical:hover {
background-position: 0 -32px;
}
.jcarousel-skin-tango .jcarousel-next-vertical:active {
background-position: 0 -64px;
}
.jcarousel-skin-tango .jcarousel-next-disabled-vertical, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
cursor: default;
background-position: 0 -96px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical {
position: absolute;
top: 5px;
left: 43px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(prev-vertical.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-prev-vertical:hover {
background-position: 0 -32px;
}
.jcarousel-skin-tango .jcarousel-prev-vertical:active {
background-position: 0 -64px;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
cursor: default;
background-position: 0 -96px;
}
#upsell {
margin-bottom: 10px;
margin-top: 0;
text-align: center;
}
#upsell li {
border: 0 dashed #CCCCCC;
float: left;
height: 220px;
list-style: none outside none;
margin: 0 10px 0 0;
padding: 2px;
width: 125px;
}
</style>
<script type="text/javascript" src="/resources/scripts/jquery-1.4.2.min.js"></script>
Hi everyone.. I am using the script below to run a rating plugin... it works on all browsers except ie6 and 7.. any help would be greatly appreciated.. thanks in advance.. $.fn.rater = function(options) { var opts = $.extend({}, $.fn.rater.defaults, options); return this.each(function() { var $this = $(this); var $on = $this.find('.ui-rater-starsOn'); var $off = $this.find('.ui-rater-starsOff'); opts.size = $on.height(); if (opts.rating == undefined) opts.rating = $on.width() / opts.size; if (opts.id == undefined) opts.id = $this.attr('id'); $off.mousemove(function(e) { var left = e.clientX - $off.offset().left; var width = $off.width() - ($off.width() - left); width = Math.ceil(width / (opts.size / opts.step)) * opts.size / opts.step; $on.width(width); }).hover(function(e) { $on.addClass('ui-rater-starsHover'); }, function(e) { $on.removeClass('ui-rater-starsHover'); $on.width(opts.rating * opts.size); }).click(function(e) { var r = Math.round($on.width() / $off.width() * (opts.units * opts.step)) / opts.step; $off.unbind('click').unbind('mousemove').unbind('mouseenter').unbind('mouseleave'); $off.css('cursor', 'default'); $on.css('cursor', 'default'); $.fn.rater.rate($this, opts, r); }).css('cursor', 'pointer'); $on.css('cursor', 'pointer'); }); }; $.fn.rater.defaults = { postHref: location.href, guid: 0, units: 5, step: 1, }; $.fn.rater.rate = function($this, opts, rating) { var $on = $this.find('.ui-rater-starsOn'); var $off = $this.find('.ui-rater-starsOff'); $off.fadeTo(600, 0.4, function() { $.ajax({ url: opts.postHref, type: "POST", data: 'id=' + opts.id + '&guid=' + opts.guid + '&rating=' + rating, complete: function(req) { if (req.status == 200) { //success opts.rating = parseFloat(req.responseText); $off.fadeTo(600, 0.1, function() { $on.removeClass('ui-rater-starsHover').width(opts.rating * opts.size); var $count = $this.find('.ui-rater-rateCount'); $count.text(parseInt($count.text()) + 1); $this.find('.ui-rater-rating').text(opts.rating.toFixed(1)); $off.fadeTo(600, 1); $this.attr('title', 'Your rating: ' + rating.toFixed(1)); }); } else { //failure alert(req.responseText); $on.removeClass('ui-rater-starsHover').width(opts.rating * opts.size); $this.rater(opts); $off.fadeTo(2200, 1); } } }); }); }; -Carlos Hi guys, been running into some problems with all IE browsers and my jQuery Gallery from Galleryview. Background: I am using Java to do an image search and build up some HTML including the calls to run the galleryview scripts and return this back to the page using document.write() When I use the simple structure of placing the scripts and parameters into a sample page: Code: <body>
<script type="text/javascript" src="http://spaceforaname.com/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://spaceforaname.com/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.galleryview-1.1.js"></script>
<script type="text/javascript" src="http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.timers-1.1.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#photos').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100
});
});
</script>
It works fine. When I try and pull all the scripts out of the page and inject them back in using document.write() I get an error on IE: Code: sb.append("(function(){ document.write('" +
" <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery-1.3.2.min.js\"></script> " +
" <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery.easing.1.3.js\"></script> " +
" <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.galleryview-1.1.js\"></script> " +
" <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.timers-1.1.2.js\"></script> " +
" <script type=\"text/javascript\"> " +
" $(document).ready(function(){ " +
" $(\"#photos\").galleryView({ " +
" panel_width: 800, " +
" panel_height: 300, " +
" frame_width: 100, " +
" frame_height: 100 " +
" }); " +
" }); " +
" </script> " +............+
"')})()");
The variable sb is a StringBuffer and is formatted and returned: Code: nextPage.setValue(sb.toString()); nextPage.setEscapeHTML(false); return nextPage; This particular error in this case in IE(8) is: Object expected which I think is referring to the jQuery as the resulting images are displayed just not in Galleryview style. This is really wracking my brains and any and all help is appreciated. D. I created an FAQ toggle for my site. I have the toggle working great. The problem is everytime I click one of the toggle links I am brought to the top of the page. Here it is. Any help is appreciated. Hey, while your there if you want to like my site on facebook, I won't complain. Hi there, I am trying to make a view that stacks images on top of one another. As the user uses mouseup or mousedown (+ LMB click) the user can scroll through the images. I am trying to use Ajax to load the new image when the user mousesup. RIght now nothing happens on mouseup. Can someone tell me what I am doing wrong please? thank you. FYI: no errors on Firebug, hence I am posting here. Code: $("#filmviewer").mouseup(function(){
alert("t");
});
html Code: <div id="filmviewer" style="width:400px;"> <img src="pic_1.jpg" /> </div> The problem is when I click and mouseup over the image the alert("t") does not fire. what am I doing wrong? Here is the code I am working with, been at it for 3 days now. I am at a loss....cant see why it shouldnt work. window.onload = defineMarquee; var timeID; var marqueeTxt = new Array(); var marqueeOff = true; function defineMarquee(){ var topValue = 0; var allElems = document.getElementsByTagName("*"); for (var i=0; i < allElems.length; i++){ if (allElems[i].className =="marqueTxt") marqueeTxt.push(allElems[i]); } for (i = 0; i < marqueeTxt.length; i++) { if (marqueeTxt[i].getComputedStyle) { topValue = marqueeTxt[i].getPropertyValue("top"); } else if (marqueeTxt[i].currentStyle) { topValue = marqueeTxt[i].currentStyle("top"); } } document.getElementById("startMarquee").onclick = startMarquee; document.getElementById("stopMarquee").onclick = stopMarquee; } function startMarquee(){ if (marqueeOff == true) { timeID = setInterval("moveMarquee()", 50); marqueeOff = false; } } function stopMarquee(){ clearInterval(timeID); marqueeOff = true; } function moveMarquee(){ var topPos = 0; for (i=0; i < marqueeTxt.length; i++){ if (marqueeTxt[i].getComputedStyle) { topPos = parseInt(marqueeTxt[i].getPropertyValue("top")); } else if (marqueeTxt[i].currentStyle) { topPos = parseInt(marqueeTxt[i].currentStyle("top")); } if (topPos < -110) { topPos = 700; } else { topPos -= 1; } marqueeTxt[i].style.top = topPos + "px"; } } So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){
//References
var change = $("#menu li a");
var loading = $("#loading");
var content = $("#content");
//Manage click events
change.click(function(){
//show the loading bar
showLoading();
//load selected section
if(this.id == "home")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/index.php", hideLoading);
content.slideDown();
}
else if(this.id == "secondpage")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/secondpage.php", hideLoading);
content.slideDown();
}
else
{
//hide loading bar if there is no selected section
hideLoading();
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) {
function load(num) {
$('#content').load(num +".html");
}
$.history.init(function(url) {
load(url == "" ? "1" : url);
});
$('#ajax-links a').live('click', function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
hi, i have a jquery problem... this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above: (it is not working the tab actions, the slideout works...) http://www.benjaminsterling.com/wp-c...es/sidetab.htm the javascript code is the above: PHP Code: var jqsideTabs; var tabs, h = 50, r = 0,ra = 0; $(document) .ready(function(){ jqsideTabs = $('#sideTabs').addClass('closed'); tabs = jqsideTabs .find('.tab h3') .clone() .appendTo(jqsideTabs) .each(function(i){ var that = $(this), cls = '',ow,newThis, newEl; if( i == 0 ) cls = ' active'; newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>'); that.replaceWith(newEl); ow = newEl.outerWidth(); if( i == 0 ) ra = ow; else r = ow; h = newEl.css({'top':h , 'right': -ow }).height() + h; newThis = newEl.get(0); newThis.jq = newEl; newThis.i = i; newEl.click(function(){ var el = this.jq; if( jqsideTabs.hasClass( 'closed' ) ){ jqsideTabs.removeClass('closed'); } else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){ jqsideTabs.addClass('closed'); } el .siblings() .removeClass('active') .css({'right': -r }) .end() .addClass('active') .css({'right': -ra }); tabs.eq( this.i ).show().siblings('.tab').hide(); return false; }); }) .end() .parent() .eq(0) .addClass('active') .end() .filter(':not(:eq(0))') .hide() .end(); jqsideTabs.bind("mouseleave",function(){ jqsideTabs .animate({left:-310}, 'fast', function(){ jqsideTabs.addClass('closed').removeAttr('style'); }); }); }); and the html file is: [HTML] <div id="sideTabs"> <div class="tab"> <h3>Tab 1</h3> <div class="gut"> <p>Some text</p> </div> </div> <div class="tab"> <h3>Tab 2</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> <div class="tab"> <h3>Tab 3</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> </div> [/HTML] the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content).... can anyone help...please..... i keep getting the error GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS & Failed to load resource: net::ERR_TOO_MANY_REDIRECTS when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this. thanx in advance var s="attr" var i=$(s) // jQuery(elem).attr(attr,eval("elm"+attr)); jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this. how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem". I'm a student and i missed first Javascript. Could someone please just put me into the right way to make it work, I can't honestly find an answer anywhere. E.g. I have following declaration in the head section of html: <script language="javascript" type="text/javascript" src="java1.js" </script> My aim is to initialize a string variable firstname in java.js to be displayed on a page. I declare it in java.js as: var firstname="Tom"; I put document.write statement to the head of html section as: <script language="javascript" type="text/javascript" src="java1.js"> document.write; </script> ....but it doesn't work. Could someone just point me into the right direction, I tried w3c and others but unsuccessfully, it looks like everyone just seamlessly go straight to the coding. Ok so i want to code something like this http://i45.tinypic.com/29y10s1.png I want it to where the user just clicks on one of the buttons and it changes to the thing. But then i want to be where if the user doesn't click anything then it just changes by itself. so like on a timer. Can anyone give me some references that might help me get started with coding this. I have no clue where tos tart. hi every one i;m new here and i love to know programming languages and some friends adviced me to start with java script then php , and i guess i'm at the right place can you please tell how to start and where to begain i'm really don't know anything about programming
|
|||||||