|
JavaScript - Jquery Cycle
Hi I have a built this Jquery code:
http://blog.mehdi.biz/2010/02/vertic...ry-lovers.html I want the buttons to auto cycle insted of hovering can anyone help please? Similar TutorialsHi, Does anyone know how to make the cycle function in jquery unobtrusive? I've got the following code and when I disable javascript, I get a nasty long list of images Jquery code: $(document).ready(function() { $('.homepage-slideshow').cycle({ fx: 'fade', befo onAfter, pause: 1, timeout: 0, pager: '#nav' }); }); function onAfter() { var cycle_href = this.href; var brokenstring = this.title.split(" :: "); var cycle_title = brokenstring[0]; var cycle_descr = brokenstring[1]; $('#output').html('<a href="'+cycle_href+'">'+cycle_title+'</a>'); $('#output-descr').html(cycle_descr); } Html code: <div class="homepage-slideshow"> <a href="http://url.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image1.jpg" alt="Click here for more on ..." ></a> <a href="http://url2.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image2.jpg" alt="Click here for more on ..." ></a> </div> <div class="homepage-pagination" id="nav" >Click the links to start the Google Tour: </div> <div class="homepage-metadata"> <p id="output-descr"></p> <h3 id="output"></h3> </div> I currently am using the jQuery UI DatePicker for my page. For each date that has an "event" listed for that day, the date is highlighted. The other part of my page on the bottom has a "previous" and "next" button. This is basic record selection/navigation pretty much, but I am new to Javascript. Is there an easy way to navigate through these? Any help would be majorly appreciated. Thanks Hello all I have a problem implementing too JQuery tools; Cycle and Fullsize (together). I have uploaded an example over at: http://lawrencebrown.eu/jquery/index.html The problem is that only the first image pics up the Full size script, I have bene told by a friend to add the following into code into the cycle script: Code: after: function () {
*$("div.album img").fullsize();
}
I have tried putting this in different places from lines 19 to 43 on index.html with no winning results yet. Any help you can offer to the mark up between lines 19 to 43 would be great. I appreciate that their are plenty of other lightbox solutions that can solve this problem - I have even had a few up and running, however this is a specific request on this job to use Fullsize. Full size docs: http://www.addfullsize.com/ Cycle docs: http://malsup.com/jquery/cycle/ Thanks for you time Lawrence Hey all, Hopefully I can explain this so it makes sense. I have a div with some buttons in it going horizontally. Kind of like a top menu of sorts. The div is of a fixed width and these buttons are spaced evenly across it. What I would like to do (and the hardest part is finding the right words for all this) is add more buttons. But because of the limited space I want to leave the current buttons as they are but provide a way, either by hovering over the left or right end of the div ideally or clicking << or >> types of links to 'cycle' through the buttons. So end result would be the user would see lets say 5 buttons upon load but be able to access the other buttons by cycling/scrolling left or right. It would be great if the buttons would loop around so they would never reach the 'end' going left or right. Does this make sense? I haven't been able to find anything close to this but that could possibly be because I am not sure what to call it. Thanks for any help! We've been attempting to set up a drop-down selection box with hidden tables under it for use on a company website. The site has a lot of CSS sheets (like 20 of them) and more could be added at any point so we'd like to write the code to cycle through each one of them to find the correct variable associated with the selections in the drop-down. The code below works fine in dreamweaver, even with the multiple sheets attached, but stops working immediately when putting it in a browser. Any thoughts/suggestions are greatly appreciated. Code: <style type="text/css">
.al {display:none}
.ca {display:none}
.ct {display:none}
.ga {display:none}
.il {display:none}
.la {display:none}
.ma {display:none}
.mi {display:none}
.mn {display:none}
.mo {display:none}
.ms {display:none}
.nc {display:none}
.ne {display:none}
.nh {display:none}
.nv {display:none}
.ny {display:none}
.or {display:none}
.sc {display:none}
.tn {display:none}
.tx {display:none}
.va {display:none}
.vt {display:none}
.wa {display:none}
.wi {display:none}
</style>
<script type="text/javascript">
function showHide(cls, show) {
for (var i=0; i<document.styleSheets.length; i++) {
// browser-compatibility
var rule = document.styleSheets[i].rules ? document.styleSheets[i].rules : document.styleSheets[i].cssRules;
for (var j = 0; j < rule.length; j++) {
if (rule[j].selectorText == "." + cls) { //find css selector
rule[j].style.display = (show) ? 'block' : 'none';
}
}
}
}
function selAction(sel) {
for (var i = 0; i < sel.options.length; i++) {
showHide(sel.options[i].value, i == sel.selectedIndex);
}
}
</script>
</head>
<body>
<table>
<tr>
<td colspan="3">
<select name="type" onchange="selAction(this);">
<strong><option value="et">
Please Select Your State:
</option>
<option value="al">Alabama</option>
<option value="ca">California</option>
<option value="ct">Connecticut</option>
<option value="ga">Georgia</option>
<option value="il">Illinois</option>
<option value="la">Louisiana</option>
<option value="ma">Massachusetts</option>
<option value="mi">Michigan</option>
<option value="mn">Minnesota</option>
<option value="mo">Missouri</option>
<option value="ms">Mississippi</option>
<option value="nc">North Carolina</option>
<option value="ne">Nebraska</option>
<option value="nh">New Hampshire</option>
<option value="nv">Nevada</option>
<option value="ny">New York</option>
<option value="or">Oregon</option>
<option value="sc">South Carolina</option>
<option value="tn">Tennessee</option>
<option value="tx">Texas</option>
<option value="va">Virginia</option>
<option value="vt">Vermont</option>
<option value="wa">Washington</option>
<option value="wi">Wisconsin</option></strong> </select>
</td>
</tr>
<tr class="al">
<td>
No issues in your state at this time.</td>
</tr>
<tr class="ca">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ct">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ga">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="il">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="la">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ma">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="mi">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="mn">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="mo">
<td> No issues in your state at this time. </td>
</tr>
<tr class="ms">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="nc">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ne">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="nh">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="nv">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="ny">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="or">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="sc">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="tn">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="tx">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="va">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="vt">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="wa">
<td>
No issues in your state at this time.
</td>
</tr>
<tr class="wi">
<td>
No issues in your state at this time.
</td>
</tr>
</table>
</center></td>
</tr>
</table>
</body>
</html>
Hi, I'm building a website which uses javascript to cycle through and fade images in the header portion of each web page. The javascipt os located in an external file and called via the master page. Here is the code in the content.js file which specifies where the images are located: Code: // create array of images
var CyclingImages = new Array("header/images/tankimage1.gif",
"header/images/tankimage2.gif",
"header/images/tankimage3.gif",
"header/images/tankimage4.gif")
Here is the code in the master page which finds the javascript: Code: <script language="javascript" src="<%= Page.ResolveUrl("~/content/content.js") %>" type="text/javascript"></script>
Here is the function call in the masterpage to fade and cycle the images: Code: <body onload="FadeAndCycleImages()"> Here is the code in the masterpage which references the cycling images: Code: <span class="fadingimages">
<img src="<%= Page.ResolveUrl("header/images/tankimage1.gif") %>" width="142" height="124" title="" alt="" name="cyclingimage" />
</span>
Each webpage loads the masterpage. If the webpage is located at the root of the project, the cycle and fade functionality works great. When I start to place some of the webpages in separate folders - which I need to do - the cycling and fading functionality breaks down, meaning the images cannot be found. The image place holder is there with the standard red "x" in the upper left. I have done a lot of research and tried many approaches to try to resolve this issue, but with no success. The root of the problem seems to lie in the fact that I cannot apply Page.ResolveUrl within the content.js file. Any suggestions would be greatly appreciated. Thank you, petela Hello everybody, I'll quit new as it comes to programming, so please forgive this nono on forehand. I've used a script and would like to add an other feature. Now the text is fading in and out. What I would like now is instead of the TEXT in the DIV, the script uses the text array, so you see a different text fading in after the last fadeout. Thanks for your help. Code: <html>
<head>
<script language='javascript'>
function blink(elementid){
colorarray = Array(
'#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#E9F6E3',
'#E5EAD8','#E0DDCA','#DACDBB','#D4BCAA','#CEAA99','#C79786',
'#C18474','#BA7161','#B45F50','#AE4E3F','#A83E30','#A33122',
'#9F2517','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f',
'#9c1c0f');
i=0;
setInterval ("changecolor('"+elementid+"')",200);
}
function changecolor(x) {
var x= document.getElementById(x);
if (x != null){
x.style.color = colorarray[i];
if (i==24){ i= 0;
colorarray = colorarray.reverse();
}
}
i++;
}
var text=new Array();
text[0] = "text 1";
text[1] = "text 2";
text[2] = "text 3";
</script>
</head>
<body bgcolor="#ECFFEC">
<script language="javascript">blink('fade');</script>
// INSTEAD OF 'TEXT' I'LL LIKE IF TO BE ONE OF THE TEXT ARRAY
<div id="fade">TEXT</div>
</body>
</html>
Hello! I'm trying to figure out a way of having + and - buttons which cycle through the options in a select box such as: <select name="distance" id="jr_radius"> <option value="0.5">0.5 Miles</option> <option value="1">1 Mile</option> <option value="3" selected="selected">3 Miles</option> <option value="5">5 Miles</option> <option value="10">10 Miles</option> </select> So far I've only been able to have a button change the select box to a specific value, or add or subtract to a numerical value. Both of which aren't quite right. Ideally if the default value is "3" then clicking the + button could make it "5" and clicking the same button again would make it "10". Visa versa, the minus button would make the value "1" and then if pressed again it would become "0.5". Does that make sense? Any help will be greatly appreciated! I want to loop through a form containing various fields and replace them with values I have in a JS object. E.g. (1) <form id="theform"> <input type="text" name="field_1" value="" /> <input type="checkbox" name="field_2" value="" /> </form (2) object.field_1 = "Dave"; object.field_2 = ""; // empty as not checked, else holds value of checked one -- The problem is: what about checkboxes and <select> drop downs, and radios?? Is there a script like this around as I'm guessing this could be useful for Ajax to populate input boxes in some situations (depending on the content etc.) so I'm guessing I'm not the only one who needs this? Hi I have some Javascript on my website http://www.restoreanddesign.co.uk The top bar has 4 images on a random cycle on load up/ refresh. Im trying to validate the xhtml, but it is coming up with errors. I dont understand javascript enough to be able to fix this. Anyone know what needs to be done to validate this javascript. i have bolded/coloured the lines i think is causing the problems -------------------------------------------------------------------- Code: <script type="text/javascript" language="JavaScript">
// JavaScript Document
var imagenumber = 4 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
images = new Array
images[1] = "images/newtopbar.jpg"
images[2] = "images/newtopbar2.jpg"
images[3] = "images/newtopbar3.jpg"
images[4] = "images/newtopbar4.jpg"
var image = images[rand1]
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
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". Ok, I would post my entire data here but then yall would be reading insane amounts of script. I've got a div content jquery slider on my site I am making and it works beautifully in all browsers(took me a while). Then, I decided why not have it where when people click on a "read more" link that it pops up a box, instead of directing to the new page, and displays the contents of a div. It would not work at all. My question is there a possible way to do this?
All, I have the following jQuery code: Code: $("#other").click(function(){
var checked = $(this).is(':checked');
if(checked){
$('textarea#other_text').removeAttr("disabled");
}else {
$('textarea#other_text').attr("disabled", "disabled");
}
});
This works fine. However, what I'm allowing the users to do is edit this field. So I have the following PHP code: PHP Code: <input type="checkbox" name="other" value="x" id="other" <?php if($resultsetedits['other']=="x"){ echo "checked"; } ?>> Other:<br>If you choose other, please explain what other options you'd like us to do to your photo:<textarea name="other_text" rows="3" cols="119" id="other_text" disabled><?php if($resultsetedits['instructions']!=""){ echo $resultsetedits['instructions']; } ?></textarea> Since the checkbox is checked with the PHP code the click function to jQuery never gets invoked and my textarea remains disabled. Is there anyway to basically invoke the jQuery code with my PHP script? Thanks in advance. Hi Guys, Please check this link out. I'm curious if you can attain the same functionality with jquery. Which include the hover over effects and sliding. If this can be done can you point me in the right direction to find some documentation to start learning. Thanks. http://www.gensler.com/#projects I'm not sure if this is something jquery can do or what but here's what I want to do but I have this following code and when it shows either Public or Archived for the Event Status I want it to be a link so that if I click on Public then it turn it into Archived because it'll change its status_id in the DB from 4 to 5. PHP Code: case 1: echo $e; ?> <h1 class=backstage>Archiving Management</h1><br /> <h2 class=backstage>Weekly Events</h2><br /> <?php $query = "SELECT ecb.bookingdate, els.name, ele.statusname, ecb.label FROM `efed_content_booking` AS ecb LEFT JOIN `efed_list_shownames` AS els ON ( ecb.event_id = els.id ) LEFT JOIN `efed_list_eventstatus` AS ele ON ( ecb.status_id = ele.id ) WHERE els.type = 'singular' OR els.type = 'recurring'"; $result = mysql_query ( $query ); $rows = mysql_num_rows($result); if ($rows > 0) { print'<table width="100%" class="table1"> <tr class="rowheading"> <td>Event</td> <td align="center">Booking Date</td> <td align="center">Event Status</td> </tr>'; $i = 0; while ( $row = mysql_fetch_array($result, MYSQL_ASSOC) ) { $sClass = 'row2'; if ($i++ % 2) $sClass = 'row1'; printf ( "<tr class=\"%s\">", $sClass ); printf ( "<td valign=\"top\">%s%s</td>", $row['name'],$row['label'] ); printf ( "<td valign=\"top\" align=\"center\">%s</td>", convertdate($row['bookingdate'] )); printf ( "<td valign=\"top\" align=\"center\">%s</td>", $row['statusname'] ); echo '</tr>'; } echo '</table><br>'; } else { echo '<span>There are no weekly events to archive.</span><br /><br />'; } ?> <h2 class=backstage>Pay-Per-View Events</h2><br /> <?php $query = "SELECT ecb.bookingdate, els.name, ele.statusname, ecb.label FROM `efed_content_booking` AS ecb LEFT JOIN `efed_list_shownames` AS els ON ( ecb.event_id = els.id ) LEFT JOIN `efed_list_eventstatus` AS ele ON ( ecb.status_id = ele.id ) WHERE els.type = 'ppv'"; $result = mysql_query ( $query ); $rows = mysql_num_rows($result); if ($rows > 0) { print'<table width="100%" class="table1"> <tr class="rowheading"> <td>Event</td> <td align="center">Booking Date</td> <td align="center">Event Status</td> </tr>'; $i = 0; while ( $row = mysql_fetch_array($result, MYSQL_ASSOC) ) { $sClass = 'row2'; if ($i++ % 2) $sClass = 'row1'; printf ( "<tr class=\"%s\">", $sClass ); printf ( "<td valign=\"top\">%s%s</td>", $row['name'],$row['label'] ); printf ( "<td valign=\"top\" align=\"center\">%s</td>", convertdate($row['bookingdate']) ); printf ( "<td valign=\"top\" align=\"center\">%s</td>", $row['statusname'] ); echo '</tr>'; } echo '</table><br>'; } else { echo '<span>There are no ppv events to archive.</span><br /><br />'; } returnmain(); footercode(); break; |
|||||||