|
JavaScript - Jquery... How To Make The Slideshow Repeat Itself?
Hi there!
i want to know, what should I do to make the j query simple slide show repeat playing as currently it stops when the slide show finishes. How can I do it repetitive? Similar TutorialsI have a slideshow that allows the user to see the previous slide title and the next slide title along with the current slide and its content. I tested locally not in WP and the code worked fine. Once I placed my source within WP everything went south. I inspector the first line in the script seems to be what is having the issues - $(window).load(function(){ and I am unsure what to do next. The source was used from Edit fiddle - JSFiddle the page I am trying to get to work is located here - Sevices | Q&D CONSTRUCTION, INC.Q&D CONSTRUCTION, INC. I am open to any suggestions. Code: <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js"></script>
<style type='text/css'>
.cycle-slide {
width: 100%;
text-align: center;
}
img {
max-width: 300px;
}
#next {
float: right;
}
#prev {
float: left;
}
.center {
text-align: center;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
var slideshow = $('.cycle-slideshow');
maxSlides = slideshow.data('cycle.opts').slideCount;
slideshow.on({
'cycle-update-view': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
UpdateTitles();
}
});
function UpdateTitles(){
var currentSlide = slideshow.data('cycle.opts').currSlide;
activeSlide = $(".cycle-slide-active");
activeTitle = activeSlide.data('title');
if(currentSlide == 0){
nextTitle = activeSlide.next().data('title');
prevTitle = $(".cycle-slide").eq(maxSlides).data('title');
}
else if(currentSlide == maxSlides-1){
prevTitle = activeSlide.prev().data('title');
nextTitle = $(".cycle-slide").eq(0).data('title');
}
else {
nextTitle = activeSlide.next().data('title');
prevTitle = activeSlide.prev().data('title');
}
$('h1').html(activeTitle);
$('#prev').html("Previous: "+prevTitle);
$('#next').html("Next: "+nextTitle);
}
UpdateTitles();
});//]]>
</script>
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 */
});
I am looking for tutorials on creating a slideshow with thumbnails, but i need one where i can put the mouse over the thumbnail depending on the direction i am the mouse the thumbnail will move left or right thanks Hi, Following this jQuery slideshow tutorial (Usecase 3 sample, about 2/3 down the page, this is the one without thumbnails): http://www.gcmingati.net/wordpress/w...vwt/index.html I constructed the slideshow: http://backstageweb.net/Salon/slideshowcode.htm ...which works perfectly in browser view locally (FF and IE). When uploaded to the server, however, I've got a static list of photos as you can see. Can someone shed some light on what the problem is? All relevant files are attached (I changed the images to simple colors to get the file size within the attachment limit). Thanks. John So i purchased a template from template monster for wordpress. http://www.templatemonster.com/demo/28861.html On the front page when you click on the thumbnail it changes the big image in the middle. I can't figure out how for the life of me to make that image also a link. My main problem is the code below. img_b1.jpg is the full size image and image_1.jpg is the thumbnail image. When you click on the thumbnail it changes the big image in the middle. When I add a clickable href=" to the main image it breaks the whole chain. --------------------------------------------------------------------- <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" /> </a> ------------------------------------------------------------------------ Full code below <div id="thumbs" class="navigation"> <ul class="thumbs noscript"> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b2.jpg" title="ProClinique"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_2.jpg" alt="ProClinique" /> </a> <div class="caption"> <div class="indent1">in grey</div> <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div> <div class="indent"><h4>Sitting room </h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b3.jpg" title="Beauty"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_3.jpg" alt="Beauty" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b4.jpg" title="Market"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_4.jpg" alt="Market" /> </a> <div class="caption"> <div class="indent1">in grey </div> <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div> <div class="indent"><h4>Sitting room </h4></div> </div> </li> <li class="last"> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b5.jpg" title="Business"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_5.jpg" alt="Business" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> </ul> </div> </div> </div> Hi everyone, I'm new in this forum, and hope that someone can help me out. I have created a clickable slide show and it works like it should. At the moment the pictures are changing like a .gif file. How can I do that each picture when it's changing it should slide from the left or right side? Thanks Robert my problem is when the page loads, the javascript slideshow starts to play even if the image has not yet finished loading... in effect the first image is not displayed since the image is still loading.. what i hopefully want is to start the slide show when all the images has loaded so that the slideshow will run smooth.. Code: <div id="slideshow">
<img src="Image/image1.jpg" alt="Slideshow Image 1" class="active" />
<img src="Image/image2.jpg" alt="Slideshow Image 2" />
<img src="Image/image3.jpg" alt="Slideshow Image 3" />
<img src="Image/image4.jpg" alt="Slideshow Image 4" />
</div>
javascript Code: function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 4000 );//speed of changing image
});
I have a php file lets say file1.php, that printing a variable, its dynamic numbers output that already always increasing, like private message numbers that coming or others : PHP Code: <?php echo $variable ?> i want to put that variable output, in another files page title, lets say file2.php or file3.html, in the front of the another files page titles, and auto refresh every x seconds, maybe like this : Quote: (1) - another text in the page title after x seconds, get a private message Quote: (2) - another text in the page title after another x seconds, get another private message Quote: (3) - another text in the page title or its ok if just like this, only the variable, without the another text in the page title Quote: (1) please share your knowledge to make it, maybe using javascript, jquery or others Hi pals, I am really tired in this problem of event keyup. I given same in my keyup function like: $(document).ready(function () { alert("GGG"+parseInt(jQuery.browser.version)); //To display test value working $("#find_text").keyup(function(e) { if(e.which == 13) { alert('Enter key was pressed'); //enter Here alert("FFF"+parseInt(jQuery.browser.version)); //Here got Error } }); }); I got Error : jQuery is not defined alert("FFF"+parseInt(jQuery.browser.version)); I use keycode,which , but no help, It's Work nicely in Chrome Browser but not in FF. Please give a Solution reply ASAP, I am really Tired.The code enter the Condition But that jQuery part make error. Thankfully Anes P.A 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 Sorry for the stupid question but i can't find a specific answer and i'm a newby. Here is a example of what i have: <html> <head> <script type="text/javascript"> function open_win() {window.open("http://www.microsoft.com","Window1","menubar=no,width=660,height=300,toolbar=no,scrollbars=yes");} </script> </head> <body> <form> <input type=button value="Open Window" onclick="open_win()"> </form> </body> In stead of a button to open one window, i would like a numeric input box that asks "How many windows do you want to open?" then incorporate a loop command to loop the open_win() x amount of times. Any help would be appreciated. Thanks 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'd like to request this thread be moved to the PHP area. Thank you! Hello, I confess, I'm a javascript newbie, but I have a project dilemma that is beyond my capabilities. I'm building a web based scoring system. I will input players names and their individual scores. Each of their 12 "station" scores will be placed into 12 text boxes and the total will be added up and placed into a textbox called Score. I've started with only two textboxes to start out and here is what I have (which works). Code: <HTML>
<HEAD>
<script type="text/javascript">
function popup(form) {
var Box1 = document.scoreform.one.value;
var Box2 = document.scoreform.two.value;
form.Score.value =(Number(Box1) + Number(Box2));
}
</script>
</HEAD>
<BODY>
<table width="980" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><FORM ACTION="#" NAME="scoreform" id="scoreform">
Station 1
<INPUT NAME="one" TYPE=TEXT id="one" ONCHANGE="popup(form)" value="<?php echo $row_Recordset1['one']; ?>" >
Station 2
<INPUT NAME="two" TYPE=TEXT id="two" ONCHANGE="popup(form)" value="<?php echo $row_Recordset1['two']; ?>">
Score
<input type=TEXT name="Score" readonly id="Score">
<BR>
</FORM></td>
</tr>
</table>
</BODY>
</HTML>
My dilemma is when I place a php repeat region (thanks dreamweaver) around this table, nothing works. I think the form needs to have a unique identity but I don't know how to execute it properly. Here's the code that doesn't work. Code: <?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
mysql_select_db($database_mooren, $mooren);
$query_Recordset1 = "SELECT * FROM SIGNUP_NSCA";
$Recordset1 = mysql_query($query_Recordset1, $mooren) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);
?>
<HTML>
<HEAD>
<script type="text/javascript">
function popup(form) {
var Box1 = document.scoreform.one.value;
var Box2 = document.scoreform.two.value;
form.Score.value =(Number(Box1) + Number(Box2));
}
</script>
</HEAD>
<BODY>
<?php do { ?>
<table width="980" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><FORM ACTION="#" NAME="scoreform" id="scoreform">
Station 1
<INPUT NAME="one" TYPE=TEXT id="one" ONCHANGE="popup(form)" value="<?php echo $row_Recordset1['one']; ?>" >
Station 2
<INPUT NAME="two" TYPE=TEXT id="two" ONCHANGE="popup(form)" value="<?php echo $row_Recordset1['two']; ?>">
Score
<input type=TEXT name="Score" readonly id="Score">
<BR>
</FORM></td>
</tr>
</table>
<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
</BODY>
</HTML>
<?php
mysql_free_result($Recordset1);
?>
Thank you for any assistance! import javax.swing.JOptionPane; class TriangleArea { public static void main(String[] args) { //delcare variable for main String Area = "a"; //get user input and convert to integers String firstNumber = JOptionPane.showInputDialog( "Enter first value for height" ); String secondNumber = JOptionPane.showInputDialog( "Enter second value for base" ); //call Methodname String CallBack = "double number1 + double number2"; double number1 = Double.parseDouble( firstNumber ); double number2 = Double.parseDouble( secondNumber ); double total = number1 * number2 * 0.5; JOptionPane.showMessageDialog(null… "Height : " + number1+" " + "Base : " + +number2+" " + "Area : " +total); //end Methodname System.exit(0); } public static void calcArea (Double number1, Double number2) { int c=0; String total="dummy"; //declare tocal variables String CallBack = "double number1 + double number2"; //display result while(c == 0) JOptionPane.showMessageDialog(null… "Height : " + number1+" " + "Base : " + +number2+" " + "Area : " +total); } } I am trying to create a program that will run and repeat asking user for another input. The program is work but i cannot get the while loop or to ask user to enter another input to work. Please help. I've looked everywhere for a random number generator which doesn't repeat. Tried loads and none have seemed to work. I'm making a quiz, 5 questions so far. This button, in html, generates the next random Q: Code: <input type="button" value="Next (random)" name="B0" onClick="rangen();generatequestions();qnum()"><br><br> Lower down in the javascript (in the body), here is the rangen() function: Code: function rangen(){
whichone=Math.floor(Math.random()*5)
}
But I need a random generator which fires them off only once. For reference, here is the next bit (not so important): Code: var whichone=1;
var q=1;
var tempmn=document.instantquiz.thequestion
function generatequestions(){
if (q>0)
q=q++
if (loop>0)
loop=0
document.instantquiz.theresponse.selectedIndex=0
if (!document.instantquiz.cmode.checked||whichone>=total+1||whichone<=0)
document.instantquiz.thesolution.value=''
if (whichone>=total+1)
tempmn.value="End of quiz"
else{
tempmn.value=whichone+")"+question[whichone]+"\n\n"+"a)"+eval('choice'+whichone+'[1]')+"\n"+"b)"+eval('choice'+whichone+'[2]'
)+"\n"+"c)"+eval('choice'+whichone+'[3]')+"\n"+"d)"+eval('choice'+whichone+'[4]')
if (document.instantquiz.cmode.checked)
document.instantquiz.thesolution.value=solution[whichone]
}
}
Anyone have suggestions for a non-repeating random number gen which will work? Even the one now seems to have some slight error associated with it. The one's ive tried so far haven't worked.. My array contains 15 value I want to random pick 5 value: Code: myArray[0] ="a"; myArray[1] ="b"; myArray[2] ="c"; myArray[3] ="d"; myArray[4] ="e"; myArray[5] ="f"; myArray[6] ="g"; myArray[7] ="h"; myArray[8] ="i"; myArray[9] ="j"; myArray[10] ="k"; myArray[11] ="l"; myArray[12] ="a"; myArray[13] ="b"; myArray[14] ="c"; How to random pick from all elements with no repeat of the same content. e.g. if myArray[0] is picked then myArray[12] will not be picked again. (because they have the same value "a") I am using the counter script below to display a count from 1-36. Does anyone know how to edit the javascript to flash or blink the number 36 a few times, and then loop the script to start over and count from 1-36 again (and again)? Here's the script: <html> <head> <title></title> </head> <script type="text/javascript"> var t, max, i; function Increase(amount) { max = amount; i = parseInt(document.getElementById("count").value); t = setInterval("SetIncrease()", 500); } function SetIncrease() { document.getElementById("count").value = ++i; if(i == max) { clearTimeout(t); } } </script> <body onLoad="Increase(36);"> <input id="count" type="text" value="1" style="width:40px;font-family:georgia;font-size:30px;font-weight:bold;color:#CC0000;border: 0px solid #000000;text-align:right;background-color:#FFFF00;" align="center"> </body> </html> Many thanks! |
|||||||