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
Related
I currently have the following code.
to get the #headerfader to resume running after the second function runs (hovering over and off again to reset the fading text)
I've duplicated the code inside the function.
Is there a more elegant way of handling this?
//FADER TEXT
$('#headerFader').carousel({
interval: 2500,
pause: false
});
//BACK HOME TEXT
$('#headerText').hover(
function(){
$(this).find("h1#masterHeader").animate({opacity:0}, 0, function(){
$(this).css("display", "none");
$('#headerText').find("h1#takemeback").css("display", "block");
$('#headerText').find("h1#takemeback").animate({opacity:1,});
});
},
function(){
$(this).find("h1#takemeback").animate({opacity:0}, 0, function(){
$(this).css("display", "none");
$('#headerText').find("h1#masterHeader").css("display", "block");
$('#headerText').find("h1#masterHeader").animate({opacity:1,});
//FADER TEXT
$('#headerFader').carousel({
interval: 2500,
pause: false
});
});
}
);
This is a complex solution to this problem, which minimizes the numbers of jQuery element fetching calls
Note that it's clean and a lot faster than the other solutions provided. Unless it's tested I believe that this is a working piece of code.
Since you are using # div id selector (which is unique) the is no need for calling find() function.
//Object handles
var headerFader = $('#headerFader');
var masterHeader = $('#masterHeader');
var takemeback = $('#takemeback');
headerFader.carousel({
interval: 2500,
pause: false
});
//BACK HOME TEXT
headerFader.hover(
function(){
masterHeader.animate({opacity:0}, 0, function(){
$(this).css("display", "none");
takemeback.css("display", "block").animate({opacity:1}, 1000);
});
},
function(){
takemeback.animate({opacity:0}, 0, function(){
$(this).css("display", "none");
masterHeader.css("display", "block").animate({opacity:1}, 1000);
headerFader.carousel({
interval: 2500,
pause: false
});
});
}
);
Outside your other functions, you'd do this:
function showHeader(el) {
$(el).css("display", "none");
$('#headerText').find("h1#takemeback").css("display", "block");
$('#headerText').find("h1#takemeback").animate({opacity:1,});
}
Then, inside your hover functions, call it:
showHeader(this);
Along with the variable suggestion above, you can chain your statements:
$('#headerText').find("h1#takemeback").css("display", "block").animate({opacity:1,});
Also, #takemeback should be unique, so this would do:
$("#takemeback").css("display", "block").animate({opacity:1,});
My page was working perfectly and suddenly, the hero image is not loading and I am seeing an error message in the console "ReferenceError: imagesLoaded is not defined" on wine-cheese.js, which is preceeded by another error "Error: multipleDefine" on dojo.js. I have not changed the files since the content launched 6 weeks ago.
Some external developers have been doing some work on the site and I believe they have introduced a conflict. But I am stumped as to how to figure it out. I tried setting breakpoints in Firebug but that isn't helping me because I'm not really sure what I'm doing. All of the tutorials I find about how to use the debugger focus on one script within a page rather than debugging a page that is part of a CMS and merged with many other scripts you have no control over.
When I check the content locally, everything works OK (I used absolute links to reference all the scripts and files to be sure they are actually on the server), so I think there is a conflict with dojo, or maybe even something else.
I have been trying to figure this out all day and feel like I am going in circles.
Any help or advice would be much appreciated. The page in question is here.
Here is the code in the javascript file that causes the error. The site I work on has jQuery 1.3.2 so we have to use noConflict to run a newer library in parallel (hence the jwc)
$.fn.tabs = function() {
return this.each(function() {
var $el = $(this);
var $panels = $el.find('> div');
var $tabs = $el.find('> ul a');
$tabs.click(function() {
setTimeout(function() {
if (window.location.hash) {
window.scrollTo(0, 489);
}
}, 1);
$tabs.removeClass('active');
$(this).addClass('active');
$panels.fadeOut(250);
$panels.filter(this.hash).animate({
opacity:1},
250, 'linear', function(){
$(this).show();
});
animateHeader(this.hash);
//window.location.hash = this.hash;
//return false;
});
if(window.location.hash != 'undefined' && window.location.hash != '') {
//alert(window.location.hash);
tabId = '[href*="' + window.location.hash + '"]';
$tabs.filter(tabId).click();
} else {
$tabs.filter('[href*="#party-tips"]').click();
}
});
};
jQuery.easing.def = "easeInCubic";
function animateHeader(tab) {
if (tab == "#party-tips") {
$('#party-tips #iconcircle').animate({
left:0
},750, 'easeInCubic');
$('#party-tips #mask').animate({
left:980,
width:0,
}, 1200, 'easeInCubic');
} else if(tab == "#pairing-guide") {
$('#pairing-guide #iconcircle').animate({
left:0
},750, 'easeInCubic');
$('#pairing-guide #mask').animate({
left:980,
width:0,
}, 1200, 'easeInCubic');
} else if(tab == "#quick-tips") {
$('#quick-tips #iconcircle').animate({
left:0
},750, 'easeInCubic');
$('#quick-tips #mask').animate({
left:980,
width:0,
}, 1200, 'easeInCubic');
}
}
function laodAnimation() {
imagesLoaded('img#sipbg', function(){
$('#loadblock').hide();
$('img#sipbg').animate({
opacity:1
}, 250, 'linear');
$('#top-block').delay(250).animate({
top:0
}, 350, 'swing', function(){
$('h1#wc-logo').animate({
top:30,
left:84
}, 750, 'linear', function(){
$('span#wine-glass').animate({
top:105,
left:136
}, 500, 'swing', function(){
$('span#text-sip').fadeIn(250, function(){
$('span#text-savor').delay(500).fadeIn(250, function(){
$('span#text-repeat').delay(500).fadeIn(350, function() {
$(this).delay(500).fadeOut(350, function(){
$(this).delay(500).fadeIn(350, function() {
$(this).delay(500).fadeOut(350, function(){
$(this).delay(500).fadeIn(350, function() {
$('span##text-endless').delay(500).fadeIn(350);
$('#bottom-block').animate({
bottom:0
}, 350, 'swing', function() {
$('#bottom-block h1').delay(350).fadeIn(750);
});
});
});
});
});
});
});
});
});
});
});
$('#main-grid').delay(400).animate({
opacity:1
}, 1200, 'linear');
});
}
The first part of the content I plug into the CMS looks like this; imagesLoaded is defined in the second script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/imagesloaded.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/jquery.fancybox.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/retina.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.lecreuset.com/wcsstore/CVWEB/js/wine-cheese.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53d6affc389982ed"></script>
<script type="text/javascript">
var jwc = jQuery.noConflict(true);
jwc(document).ready(function() {
jwc("a#box").fancybox({
maxWidth : 800,
maxHeight : 680,
fitToView : true,
width : '70%',
height : '90%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
laodAnimation();
});
</script>
I recommend using either chrome/chromium or safari for their web console. You can then open up the web inspector and set the inspector to catch all errors.
The tools there should help you figure out where the problem is.
Update:
Looking at the link you provided I saw the problem is with the imageloader.js call. It seems to be defining multiple times the same object. You could try wrapping it in a js check.
Update 2:
Ok so I tested your scripts in jsfiddle. I found the problem to be based in a conflict between dojo and the imagesloaded script. I set up a jsfiddle to test out the scripts to see if the class imagesLoader is defined. In the left toolbar if you change in the settings on the left between jQuery and Dojo frameworks the imagesLoaded js script stops working. The problem is that since it is packaged it doesn't signal an error. Either you make a new script from scratch or find an alternative.
if(!alreadyDefined) {
alreadyDefined=true;
//Rest of your code.
}
Well I don't know correct word for this so I wrote three of them, hope you wont mind...
Now, my question.
I have javascript that is running on pageload as it's usual... The script hide specified id's and reveal them on click. Let's call this script "hide on load".
My problem here is, that another javascript, let's call it "news" is running as well on page load and I can see it only 1 second, until another script hide div id's.
Once I click on specified div that should run reveal "news", nothing happends. I can see that "hide on load" running fading (fadein) but nothing is being revealed.
Hide on Load script:
$(window).load(function(){
var activeElement;
function activateElement( eltSuffix ) {
if( activeElement ) {
activeElement.fadeOut( 500, function() {
activeElement = $('#content-reveal-'+eltSuffix);
activeElement.fadeIn( 500 );
} );
} else {
activeElement = $('#content-reveal-'+eltSuffix);
activeElement.fadeIn( 500 );
}
}
$(document).ready( function() {
$('#content div').hide();
$('#info a').click( function() {
activateElement('info');
} );
$('#search a').click( function() {
activateElement('search');
} );
$('#music a').click( function() {
activateElement('music');
} );
$('#socials a').click( function() {
activateElement('socials');
} );
} );
});
News script:
$(document).ready(function () {
$('#newsticker_1').newsticker({
'style': 'fade',
'showControls': false,
'autoStart': true,
'fadeOutSpeed': 'slow',
'fadeInSpeed': 'slow',
'transitionSpeed': '4000',
'pauseOnHover': true
});
})(jQuery);
Thank you!
You can use onclick html on the div so....
<div id="whatyouwanttoclickon" onclick="news()"></div>
But you would have to name the function news like this.
function news(){
$('#newsticker_1').newsticker({
'style': 'fade',
'showControls': false,
'autoStart': true,
'fadeOutSpeed': 'slow',
'fadeInSpeed': 'slow',
'transitionSpeed': '4000',
'pauseOnHover': true
});
Or you could use jquery like this....
$('#divyouwanttoclickon').click(function(){//putyourfunctioninhere});
On a website im building on a Joomla CMS i call inside the head tag these javascripts :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<script type="text/javascript">document.write('<style>.noscript { display: none; }</style>');</script>
I have two javascripts inserted on my index.php
One for a slideshow (gallerific) and another one for a dropdown menu.
The slideshow javascript :
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.9;
$('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 10,
preloadAhead: 10,
enableTopPager: false,
enableBottomPager: false,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: true,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
// Update the photo index display
this.$captionContainer.find('div.photo-index')
.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
var nextPageLink = this.find('a.next').css('visibility', 'hidden');
// Show appropriate next / prev page links
if (this.displayedPage > 0)
prevPageLink.css('visibility', 'visible');
var lastPage = this.getNumPages() - 1;
if (this.displayedPage < lastPage)
nextPageLink.css('visibility', 'visible');
this.fadeTo('fast', 1.0);
}
});
/**************** Event handlers for custom next / prev page links **********************/
gallery.find('a.prev').click(function(e) {
gallery.previousPage();
e.preventDefault();
});
gallery.find('a.next').click(function(e) {
gallery.nextPage();
e.preventDefault();
});
/****************************************************************************************/
/**** Functions to support integration of galleriffic with the jquery.history plugin ****/
// PageLoad function
// This function is called when:
// 1. after calling $.historyInit();
// 2. after calling $.historyLoad();
// 3. after pushing "Go Back" button of a browser
function pageload(hash) {
// alert("pageload: " + hash);
// hash doesn't contain the first # character.
if(hash) {
$.galleriffic.gotoImage(hash);
} else {
gallery.gotoIndex(0);
}
}
// Initialize history plugin.
// The callback is called at once by present location.hash.
$.historyInit(pageload, "advanced.html");
// set onlick event for buttons using the jQuery 1.3 live method
$("a[rel='history']").live('click', function(e) {
if (e.button != 0) return true;
var hash = this.href;
hash = hash.replace(/^.*#/, '');
// moves to a new page.
// pageload is called at once.
// hash don't contain "#", "?"
$.historyLoad(hash);
return false;
});
/****************************************************************************************/
});
</script>
And the dropdown menu:
<script language="javascript" type="text/javascript">
var axm = {
openMenu: function() {
$('#newmenuheader').stop().animate({ 'height':'140px'}, "fast");
},
closeMenu: function() {
$('#newmenuheader').stop().css({'overflow': 'hidden'}).animate({'height':'55px'}, "fast");
},
};
</script>
I can get only one script run at a time not both. If one runs the other doesn't. I need to have them both.
At the time the javascript for the slideshow is running. Is there a conflict of some sort ?
Thanks in advance.
The second chunk of javascript code with the var axm needs to be added to the
jQuery(document).ready(function($) {}
Otherwise the browser doesn't know to run it. And you should re-write this function, don't use
jQuery(document).ready(function($) {}
just use
$(function(){
//your javascript and jQuery here for binding events, styles, and functions
}
this is a function that will run once the page is ready.
I'm trying to do a simple partial fade effect using toggle to toggle the opacity between two values, when an element is clicked. But the first click does nothing!
The html code:
<html>
<head>
<script type="text/javascript" src="../jquery-1.4.min.js"></script>
<script type="text/javascript" src="toggle.js"></script>
</head>
<body>
<div class="toggler" style="background:grey;width:300px;height:300px;"></div>
</body>
</html>
And the js code:
$(document).ready(function() {
$('div.toggler').click(function(event) {
$(this).unbind('click');
$('div.toggler').toggle(function(event) {
$('div.toggler').css({
'opacity': 0.5
});
alert('0.5');
return false;
}, function() {
$('div.toggler').css({
'opacity': 0.1
});
alert('0.1');
return false;
});
event.preventDefault();
});
});
To elaborate, it does "work", but only after the first click! So I need to click twice to begin with to get it working! I've tried this out in firefox and opera.
Edit: Went with the solution by Marcus Sá and steweb:
$('div.toggler').toggle(
function(event){
$(this).css({ 'opacity':0.5 });
alert('0.5');
return false;
},
function(){
$(this).css({ 'opacity':0.1 });
alert('0.1');
return false;
}
);
Try this, more simple:
$('div.toggler').toggle(
function(event){
$('div.toggler').css({ 'opacity':0.5 });
alert('0.5');
return false;
},
function(){
$('div.toggler').css({ 'opacity':0.1 });
alert('0.1');
return false;
}
);
See working here
Because you bind to click event once, then unbind, and bind to it again via toggle. What for ? Just use toggle. Here is working example.
Even easier without having to use toggle:
$('div.toggler').css('opacity', .5).click( function() {
$(this).css('opacity', $(this).css('opacity') == .5 ? .1 : .5);
});
Actually there is not enough info here, the problem COULD be that your CSS initially sets the opacity to 0.5 to start with, so when you click toggle first, it's already at 0.5 and so it switches from 0.5 to 0.5 and nothing happens.
What I would recommend doing instead is creating 2 css tags, then check which tag is already there and replace it with the other one.
i.e. you can create:
.fiftyPercent{ opacity:0.5; }
.tenPercent{ opacity:0.1; }
Then in your html start with
<div class="toggler fiftyPercent" style="background:grey;width:300px;height:300px;"></div>
Then all you have to do in your JS is toggleClass for both the classes on click.
$('.toggler').click(function(){
$('.toggler').toggleClass('fiftyPercent');
$('.toggler').toggleClass('tenPercent');
});
That's just my 2 cents.