Response title
This is preview!
- Screen name: nickgowdy
nickgowdy's Profile
2 Posts
4 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- Hi forum,I am using some excellent code for a photo slide show from http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited .The way this slide show gallery works is there are mulitple list items in an UL and within each list item is an image. sequentially one list item has the class .show and this changes the css of that list item so opaque is set to 1. Making it visible. A timer determines when the list items change so the next list item within the hierarchy has .show. Once is reaches the last list item, it goes back to the first item.The problem I have with my code is that when the page first loads up, the first image displays briefly before changing to the second image. After this happens, the slide show behaves correctly.In bold are the the important lines of code. First I use jquery to assign .class to first list item. The second line of code in bold is a conditional statement. If no image has .show, assign it to the first list item. This is when the code doesn't work as intended.
- $(document).ready(function (e) {
// Execute the slideShow
slideShow(6000);
thumbInt(); // Assign int to thumbnail list items
gallery();
function clearShowClass()
{
setTimeout(timedInterval, 1000);
};
function timedInterval(){
$('ul.slideshow li').not('.show').css("opacity", 0);
clearShowClass();
}
- function slideShow(speed) {
- //Set the opacity of all images to 0
$('ul.slideshow li').css({
opacity: 0.0
}); - //Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({
opacity: 1.0
}).addClass('show'); - //Get the first thumbnail and change css
$('#footer li:first').addClass('highlight'); - //Call the gallery function to run the slideshow
var timer = setInterval('gallery()', speed); - //Pause the slideshow on mouse over content
$('#footer, ul.slideshow').hover( - function () {
clearInterval(timer);
}, - function () {
timer = setInterval('gallery()', speed);
});
} - function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show') ? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
if(current.queue('fx').length == 0) {
// grab next image and animate code in here
} - //Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption') ? $('ul.slideshow li:first') : current.next()) : $('ul.slideshow li:first'));
//Set the fade in effect for the next image, show class has higher z-index
next.css({
opacity: 0.0
}).addClass('show').animate({
opacity: 4.0
}, 1000);- // Hide the current image
current.animate({
opacity: 0.0
}, 1000).removeClass('show'); - //if no thumbnails have the highlight class, grab the first thumbnail
var currentThumb = ($('#footer li.highlight') ? $('#footer li.highlight') : $('#footer li:first')); - var nextThumb = ($('#footer li:last').hasClass('highlight')) ? $('#footer li:nth-child(1)') : $('#footer li.highlight').next($('#footer li'));
nextThumb.addClass('highlight');
currentThumb.removeClass('highlight');
}
Any suggestions on how to fix this would be most welcome.Nick- 26-Aug-2011 10:43 AM
- Forum: Using jQuery
Hello,I have been experiencing a problem with a project that has got me scratching my head. I have tried looking online but can't find a solution.I am developing a mobile web app which communicates with a wcf service that returns data in json format. The way security is handled is the user logins and recieves a token which is added to the http header. The login ajax request which passes the url strings to the service is using https protocol. This works fine. The other 2 ajax requests are also supposed to use https but when I do this the custom header isn't added. If I use http which is the old url, the custom header is added to http header. I have tested this using fiddler2 and firebug and for some reason it doesn't like https in the ajax request url.- function login_service()
{
//$.mobile.pageLoading();
var stringUsername = $('#txtUsername').val();
var stringPassword = $('#txtPassword').val();
$('#loginMessage').empty(); // Empty message div
$.ajax(
{
url: "https url string"+stringUsername+"/"+stringPassword, - dataType: "jsonp",
type: 'GET',
headers:{"Authorization" : tkn},
success: function(loginResult)
{
$('#loginMessage').html('<a>'+ loginResult.tkt + '</a>');
tkn = loginResult.tkt; // Json token
if(tkn == null)
{
$('#loginMessage').append("invalid login:" + ' ' + '<br>' + "token:" + ' ' + tkn);
$.mobile.pageLoading(true);
}
else
{
$.mobile.changePage('#search'); // Change page to search screen
}
}, - error: function(status)
{
alert(status);
$.mobile.pageLoading(true); // End loading animation
}
})
} - function doSearch_webservice(){ // Start of function webservice
- $.ajax({ // Start of ajax call
headers:{"Authorization" : tkn},
url: "https url string"+$('#jsonSearch').val(),
dataType: 'jsonp',
type: 'GET',
timeout: '20000',
success: function(json_results)
{// Start of success function
if(json_results.keys == null)
{
$('#errMessage').html('<p class="error"><strong>'+ "Status:"
+ "No record found" + "<br>Please try again" +'</strong> </p>');
$.mobile.pageLoading(true);
}
else
{
$('#jsonResponse ul').remove();
// jquery mobile type i.e. data-inset
$('#jsonResponse').append('<ul class="listItems" data-role="listview" data-inset="true"></ul>');
var listItems = $('#jsonResponse').find('ul');
$.each(json_results.keys, function(key) { // Start of each loop -
html=
'<a href="#" data-transition="slide" data-position="inline"OnClick="passQryStrg(''+json_results.keys[key].id+'' , ''+json_results.keys[key].cat+'' );">'+'<br>'+' '+'<font class="big-text"><b>'+' '+json_results.keys[key].lbl[0]+' '+'</font></b>'+' '+'<font class="small-text">'+' '+'<br>'+' '+json_results.keys[key].lbl[1]+' '+'</font>'+'</a>' - listItems.append('<li>'+html+'</li>');
}); // End of each loop
$('#info jsonResponse ul').listview();
$.mobile.pageLoading(true);
$.mobile.changePage( "#info", { transition: "slide"} );
$("#info").page("destroy").page();
}
// Destroy the page - next function call won't break css
}, // End of success function - error: function(jqXHR, textStatus, errorThrown)
- {
$('#errMessage').html('<p class="error"><strong>'+ "Status:" + textStatus + "<br>Please try again" +'</strong> </p>');
$.mobile.pageLoading(true);
}
}); // End of ajax call
}; // Emd of webservice function
Any ideas why this doesn't work are greatly appreciated.Nick- «Prev
- Next »
- $(document).ready(function (e) {
Moderate user : nickgowdy