We Keep Coding

using yep/nope with document.ready

I am using yepnope.js but having a slight issue with on load loading a function
in the head i include yep nope and make a call to the relevant js file
<script type="text/javascript" src="/code/trunk/javascript/external/modernizr/modernizr-development.js"></script>
<script type="text/javascript" src="/code/trunk/javascript/external/yepnope.1.5.3-min.js"></script>
<script type="text/javascript">
yepnope({
test: Modernizr.mq('only all and (max-width: 700px)'),
yep: ['/templates/client/jquery/qff/plugin.mobile.js'],
nope:['/templates/client/jquery/qff/plugin.website.js']
});
</script>
and then at the bottom of the page
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery("#mainContent").setupQantas({
startSlide: 1,
googleAnalytics:1,
googleCode:""
});
});
</script>
so i am looking at this on a main screen. so it's suppoed to call in plugin.mobile.js
in the plugin.mobile.js file
(function( $ ){
$.fn.setupQantas = function( options ) {
// Create some defaults, extending them with any options that were provided
var settings = $.extend( {
startSlide: 1,
googleAnalytics:0, // 1 sends to google
googleCode: ""
}, options);
var methods = {};
return this.each(function() {
if (settings.startSlide === 1) {
alert("slide = 1");
} else {
alert("slide > 1");
}
});
};
})( jQuery );// JavaScript Document
instead of giving the alert slide 1 it has the error
jQuery("#mainContent").setupQantas is not a function
if i dont use yepnope and just have it in a script tag it works. There seems to be a delay on when the yepnope loads in the js file and doesnt seem to do before doc.ready
is there a way around this?
thanks

Yes there is a delay. That's all the point behind an asynchronous script loader.
You should use a callback after the script is loaded by yepnope. Check the complete and callback options.

here is the code
<script type="text/javascript">
yepnope({
test: Modernizr.mq('only all and (max-width: 700px)'),
yep: ['/templates/client/jquery/qff/mobile.js'],
nope:['/templates/client/jquery/qff/website.js'],
complete: function () {
jQuery("#mainContent").setupQantas({
startSlide: 1,
googleAnalytics:1,
googleCode:""
});
}
});
</script>

HIGHLIGHT <li> on click MAXIMAGE2

im a very very noobie in jquery question, im developing a site using maximage plug in, it seem every work perfectly, but i dont know how to hightlight a link when is click it on it, sorry for my terrible english.
Here's the website i'm developing.
http://aranasoluciones.com/azulejera/ejemplo-ok.html
and there is the js
<script type="text/javascript" charset="utf-8">
$(function(){
$('#maximage').maximage({
cycleOptions: {
fx: 'fade',
speed: 3000, // Has to match the speed for CSS transitions in jQuery.maximage.css (lines 30 - 33)
timeout: 0,
prev: '#arrow_left',
next: '#arrow_right',
},
onFirstImageLoaded: function(){
jQuery('#cycle-loader').hide();
jQuery('#maximage').fadeIn(1500);
jQuery('.in-slide-content').delay(1200).fadeIn('slow');
}
});
});
$('.toggle').bind('click', function(e){e.preventDefault();
$('#maximage').cycle('toggle');
});
$("#2").click(function(e) {
$('#maximage').cycle(1);
return false;
});
$("#1").click(function(e) {
$('#maximage').cycle(0);
return false;
});
$("#3").click(function(e) {
$('#maximage').cycle(2);
return false;
});
</script>
PLEASE HELP!!!!! i will preaciated very much!!!

This would do what you need:
$("#nav li a").click(function () {
$("#nav li a").removeClass("selected"); // OR $("#nav li a").css("background-color");
this.addClass("selected"); // OR $("#nav li a").css("background-color","#0070ba");
});
However would suggest you to change your navigation link id to something more meaningful (instead of #1 #2 #3 to #nav1 #nav2 #nav3).

If i use the code
$("#maximage").cycle(1);
$("#maximage").cycle(2);
explicitly in your website specified using firebug the image getting changed. Could you please check whether the button with id "#1","#2" are defined and event defined for it are correct and the definition for click event should be defined inside $(function(){ }); or document ready. Please check the below code.
<script type="text/javascript" charset="utf-8">
$(function(){
$('#maximage').maximage({
cycleOptions: {
fx: 'fade',
speed: 3000, // HastomatchthespeedforCSStransitionsinjQuery.maximage.css(lines 30 - 33)
timeout: 0,
prev: '#arrow_left',
next: '#arrow_right',
},
onFirstImageLoaded: function(){
jQuery('#cycle-loader').hide();
jQuery('#maximage').fadeIn(1500);
jQuery('.in-slide-content').delay(1200).fadeIn('slow');
}
});
});
$('.toggle').bind('click', function(e){e.preventDefault();
$('#maximage').cycle('toggle');
$("#2").click(function(e) {
$('#maximage').cycle(1);
return false;
});
$("#1").click(function(e) {
$('#maximage').cycle(0);
return false;
});
$("#3").click(function(e) {
$('#maximage').cycle(2);
return false;
});
});
</script>
Thanks

Scrolling works in Chrome but not in Firefox or IE

I'm using the following code to scroll the window when a user clicks on a few different links:
$(document).ready(function(){
$("#footerlink").click(function(){
$("#slide1").slideto({});
});
$("#logo").click(function(){
$("#slide1").slideto({});
});
$("#home").click(function(){
$("#slide1").slideto({});
})
$("#others").click(function(){
$("#slide2").slideto({});
})
$("#me").click(function(){
$("#slide3").slideto({});
});
$("#laughs").click(function(){
$("#slide4").slideto({});
});
})
The slide functionality is coming from this script:
(function(b) {
b.fn.slideto = function(a) {
a = b.extend({
slide_duration: 1000,
highlight_duration: 3E3,
highlight: false,
highlight_color: "#FFFF99"
}, a);
return this.each(function() {
obj = b(this);
b("body").animate({
scrollTop: obj.offset().top
}, a.slide_duration, function() {
a.highlight && b.ui.version && obj.effect("highlight", {
color: a.highlight_color
}, a.highlight_duration)
})
})
}
})(jQuery);
My problem is the scrolling only works in Chrome and not Firefox or IE. FF and IE degrade nicely so the links still work, but I really like the scrolling animation.
FYI: I am calling Jquery with these two lines:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
Here is a Fiddle of my code: http://jsfiddle.net/LwXR3/
Can you help me track down my issue?

Okay this is too long to be in a comment. You should really avoid the copy paste mess in that code above. The code is almost exactly the same minus the ids. Use the href to get the location instead of hard coding it.
HTML
<a class="slideLinks" href="#foo">go to foo</a>
JavaScript
$(".slideLinks").on("click", function(e){
e.preventDefault(); //p[revent the click
$(this.hash).slideto({}); //call your slide to function with the hash value for the id
});

jQuery plugin issues in IE

I don't understand why my code doesn't work on internet explorer/
This is my index.php where I am invoking js libraries.
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/shadowbox.js" ></script>
<script type="text/javascript" src="js/slides.min.jquery.js" > </script>
<script type="text/javascript" src="js/jquery.simpleWeather-2.0.1.min.js" > </script>
<script type="text/javascript" src="js/jquery.clock.js" > </script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="js/default.js" > </script>
And this is my default.js
$(document).ready(function() {
Shadowbox.init({
overlayOpacity: 0.8
}, setupDemos);
if (typeof $().slides != "undefined") {
$('#slides').slides({
preload: true,
preloadImage: 'images/slides/loading.gif',
play: 3000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
}
$.each($(".menu li"), function(index, li) {
if ($(li).hasClass("active")) {
$("title").append(": " + $(li).children("a").text());
}
});
if (typeof $.simpleWeather != "undefined") {
$.simpleWeather({
location: 'Armenia, Yerevan',
unit: 'c',
success: function(weather) {
html = "<div style='height: 117px;'><h2>"+weather.city+', '+weather.region+'</h2>';
html += '<img style="float:left;" width="125px" src="'+weather.image+'">';
html += '<p>'+weather.temp+'° '+weather.units.temp+'<br /></p>';
html += '</div>';
$("#weather").html(html);
},
error: function(error) {
$("#weather").html('<p>'+error+'</p>');
}
});
}
$('#yerevan-time').clock({offset: '+4', type: 'analog'});
$('#london-time').clock({offset: '+0', type: 'analog'});
$('#new-york-time').clock({offset: '-5', type: 'analog'});
});
function setupDemos() {
Shadowbox.setup("a[rel=photos]", {
gallery: "cars",
continuous: true,
counterType: "skip"
});
}
$(function() {
$( "#day1" ).datepicker();
$( "#day2").datepicker();
});
I can't find a solution here. You can check this out here. This is my website. So in internet explorer the clock and the weather doesn't work. What's the problem here. Any help will be useful. thanks.

The error has nothing to do with the code you posted..
If you check the console, you will see an error that is related to google maps.
And that error is being fired when you run the initialize method (you have it bound to the onload event of the body tag)
Remove that to check that the clocks work correctly, and then make sure to run in only when there are maps to be shown in the page..
Update
The other , more important, issue in your case is that the clock plugin you use has code like this
jQuery(_this)
.find(".sec")
.css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
Seeing the vendor prefixes -moz- and -webkit- means that the rotation of the hands is only applied to the mozilla and webkit browsers..
They have specifically excluded all other browsers..
Modern IE (>=9) workaround
For IE >= 9 you could add "-ms-transform" : srotate
jQuery(_this)
.find(".sec")
.css({"-moz-transform" : srotate, "-webkit-transform" : srotate, "-ms-transform" : srotate});
and it would work (as IE >= 9 supports rotation..)
(make sure to correct the code for all hands.. my example is only about the seconds)

Scrolling and .addClass(); issues

I am working on a "one page" website with a fixed navigation and about 5 different pages inside the one document.
UPDATED WORKING LINK
http://www.coco-works.com/Archive/ LIVE VERSION
I'm having trouble with the active class addition. When you click Keep in Touch or Home, the class is not applied. As you can see from the live version, it's not function properly.
The page works something like this;
And here is the JavaScript;
$(document).ready(function() {
$('body').click(function(event) {
if (event.target.nodeName.toLowerCase() == 'a') {
var op = $(event.target);
var id = op.attr('href');
if (id.indexOf('#') == 0) {
$.scrollTo(id, 1000, {
offset: {
top: 75
},
axis: 'y',
onAfter: function() {
window.location.hash = id.split('#')[1];
}
});
}
return false;
}
});
$.fn.waypoint.defaults.offset = 75;
$('.section h1.page_name').waypoint(function() {
var id = this.id;
var op = $('#navigation a[href = "#' + id + '"]');
if (op.length) {
$("#navigation a").removeClass("active");
op.addClass('active');
}
});
});
I'm not a strong programmer. I've tried to edit it as best as I can and I'm just stuck. Any insight to fixing this would highly be appreciated.
Still looking for an answer, below couldn't fix the problem.

I'm not sure what the waypoints plugin was doing, but I've refactored your code and it is working for me. Note that I took out the call to .waypoints, and changed your $('body').click() handler to be a more specific handler on the navigation link elements. This handler will scroll to each element and then will perform the removal and addition of the class correctly when the scrolling is done:
$(document).ready(function()
{
function highlightNav(navElement){
$("#navigation a").removeClass('active');
navElement.addClass('active');
}
$('#navigation a').click(function(event){
var nav = $(this);
var id = nav.attr('href');
$.scrollTo(id, 1000, {
offset: { top: -75 },
axis: 'y',
onAfter: function(){
highlightNav(nav);
}
});
return false;
});
$(window).scroll(function(){
if($(this).scrollTop() == 0){
highlightNav($("#navigation a[href*='home']"));
}
});
$.fn.waypoint.defaults.offset = 75;
$('.section h1.page_name').waypoint(function() {
var id = this.id;
var op = $('#navigation a[href = "#' + id + '"]');
if (op.length) {
highlightNav(op);
}
});
// Fancybox
$("a.zoom").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$("a.outside_shade").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9
});
$("a.inside_white").fancybox({
'titlePosition' : 'inside'
});
$("a.inside_shade").fancybox({
'titlePosition' : 'over'
});
// validation
$("form").validate();
// nivo slider
$('#slider').nivoSlider();
});
In the html I added a default active class to the first link:
<div id="navigation">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Who Are We?</li>
<li>Our Services</li>
<li>Features</li>
<li>Keep in Touch</li>
</ul>
</div>
Also I noticed on the page you have your css defined before the reset.css is called in. That's usually bad practice you might want to make sure reset.css is always the very first css file pulled in. It doesn't appear to have affected the page much but sometimes you'll get weird results doing that.
I made a jsfiddle of the results here: http://jsfiddle.net/RNsFw/2/
the waypoints plugin isn't needed anymore I think. I didn't change the fancybox or validation stuff because i'm not sure what those are doing and it wasn't really part of your issue.
I tested it in firefox and Chrome. Let me know if you have questions :)

http://jsfiddle.net/vCgy8/9/
This removes the dependency on scrollTo, and the waypoints plugin.
$('body').click(function(event)
{
if(event.target.nodeName.toLowerCase() == 'a')
{
var op = $(event.target);
var id = op.attr('href');
if(id.indexOf('#') == 0)
{
destination = $(id).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 1000, function() {
var hash = id.split('#')[1];
window.location.hash = hash;
});
}
return false;
}
});
$(window).scroll(function (event){
makeActive();
});
function makeActive(){
var y = $(this).scrollTop();
if(y!==0){
$('.page_name').each(function(){
var curPos = parseInt($(this).offset().top - y);
if(curPos <= 0){
var op = $('#navigation a[href = "#'+$(this).attr('id')+'"]');
$("#navigation a").removeClass("active");
op.addClass('active');
}
});
}else{
$("#navigation a").removeClass("active");
$("#navigation a:first").addClass('active');
}
}
makeActive();

This may be completely unrelated, but I had a similar problem yesterday - where, in the callback of an event handler, jQuery operations weren't being performed in that scope but if you threw the code into something like:
setTimeout(function() {
$(selector).addClass('foo');
}, 0);
it would work - similar to how $.animate() functions (ish) if you call $(selector).stop().animate() without the queue param being false, eg:
$(selector).stop();
$(selector).animate({ foo }, { no queue:false here });
// ^ fail
$(selector).stop();
setTimeout(function() {
$(selector).animate({ foo }, { no queue:false here either });
}, 0);
// ^ success
The problem, completely unrelated to the above example though similar in behavior/functional hack, turned out to be the method of binding - in my case I had been using $.bind() - but then I refactored this to use $.delegate() ($.live() would work also) and it functioned as expected.
Again, not sure if this related, but figured I'd pass that along just in case. Unsure if it's a bug or just me not properly understanding some of the subtler parts of jQuery.

The problem is not in your js code, but in your css/page layout.
Or maybe the problem is that you are using the waypoint plugin and you might not want to for this particular page. (As you will see you also have trouble hitting the "Home" waypoint again once you have left it, because of the offset you use.)
The thing is, the waypoint plugin won't trigger until the target element you are scrolling to is in the very top of the browser window, with respect to the offset that is. "Keep in touch" will never get to the top unless your browser window is small enough that the "keep in touch" section takes up the entire browser window (minus the offset).
You can see it visualized here: