Is there any way to combine all of this to reduce the amount of javascript?
$(document).ready(function() {
$(".individualImagebox img").bind("click", function()
{
var src = $(this).attr("src");
if (src.search(/Red\.jpg$/) >= 0) return;
// Removes the red overlay from the images folder
$('.individualImagebox img').attr( "src", function () {
var thisSRC = $(this).attr( "src");
return thisSRC.replace(/Red\.jpg$/, ".jpg");
});
// Adds the red overlay from the images folder
$(this).attr( "src", src.replace(/\.jpg$/, "Red.jpg") );
});
});
function ShowHide(index) {
var itemSelector = ".name:eq(" + index + ")";
$(".name .bio").fadeOut();
$(".name").not(itemSelector).fadeOut();
$(itemSelector).animate({"height": "show"}, { duration: 500 });
$(itemSelector + " .bio").animate({"height": "show"}, { duration: 500 });
}
$(function() { // $(function(){}) is a shortcut of $(document).ready(function(){})
var $activeImg; // Maintain a reference to the last activated img
$(".individualImagebox img").click(function(){
if (!!$activeImg) {
$activeImg.attr("src", function(i, src){
return src.replace(/(.+)Red\.jpg$/, "$1.jpg");
});
}
$activeImg = $(this).attr("src", function(i, src){ // replace attribute and updates active img reference
return src.replace(/(.+)\.jpg$/, "$1Red.jpg");
});
});
});
I don’t know exactly what you are trying to do but if possible, you should toggling a class instead of modifying the src attribute.
Combining methods won't save you space. Take a look at
http://developer.yahoo.com/yui/compressor/
Related
If you go to an album (eg. Nature because still working on the others) and click one of the images they all fade out and then the one you clicked appears to just show up on the screen. What is happening is that it is still fading in as the thumbnails are fading out. I tried adding the rest of the code inside a .complete(), but that seems to break it.
$(document).ready(function(){
$('.photos').on('click', function() {
var src = $(this).attr('src').replace('thumb-','');
$('.photos').stop().fadeOut(500);
$('.enlarged').remove();
$('#album').append('<img class="enlarged" src="' + src + '">');
$('.enlarged').hide();
$('.enlarged').stop().fadeIn(500).done(
$('.enlarged').on('click', function () {
$(this).stop().fadeOut({
duration: 500,
done: this.remove()
});
$('.photos').stop().fadeIn(500);
})
);
});
});
You can use promise to catch complete all fade out animation:
$(document).ready(function(){
$('.photos').on('click', function() {
var src = $(this).attr('src').replace('thumb-','');
var photos = $('.photos');
photos.stop().fadeOut(500);
photos.promise().done( function() {
$('.enlarged').remove();
$('#album').append('<img class="enlarged" src="' + src + '">');
$('.enlarged').hide();
$('.enlarged').stop().fadeIn(500).done(
$('.enlarged').on('click', function () {
$(this).stop().fadeOut({
duration: 500,
done: this.remove()
});
$('.photos').stop().fadeIn(500);
})
);
});
});
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I am using jQuery to replace normal checkbox with image. I am able to replace checkbox with image but unable to set CSS and click handler on image.
This is my jQuery code.
(function ($) {
$.fn.SetOnOff = function (onImage,offImage) {
debugger;
var html = '<img style="width: 80px; height: 30px" src="'+offImage +'"/>';
$(this).replaceWith(html);
$(html).css('cursor','pointer');
$(html).click(function(){
var fileName = $(this).attr('src');
if (fileName == onImage)
$(this).attr('src', offImage);
else
$(this).attr('src', onImage);
});
return $(this);
};
} (jQuery));
can anybody let me know how to do this?
you use This link to test it
use event delegation for dynamically created element
$("button").click(function () {
var v = "<div>" + $(this).text() + "</div>";
$(this).replaceWith(v);
$(v).css('cursor', 'pointer');
});
$(document).on("click", "div", function () {
alert($(this).text());
});
DEMO
Your css and click methods are not being called on the replaced element but on a newly-created HTML jQuery is generating from your html string.
Try this instead:
var $v = $("<div>" + $(this).text() + "</div>");
$(this).replaceWith($v);
$v.css('cursor', 'pointer');
$v.click(function () {
alert('a');
});
you are trying to set css to string. make it jquery object just like below
(function ($) {
$.fn.SetOnOff = function (onImage,offImage) {
debugger;
var html = $('<img style="width: 80px; height: 30px" src="'+offImage +'"/>');
$(this).replaceWith(html);
$(html).css('cursor','pointer');
$(html).click(function(){
var fileName = $(this).attr('src');
if (fileName == onImage)
$(this).attr('src', offImage);
else
$(this).attr('src', onImage);
});
return $(this);
};
} (jQuery));
Demo
I have applied a fadeout affect on a background image. How do I slowly apply back the original style on mouseout?
jsfiddle: http://jsfiddle.net/KevinOrin/H6Q3J/
jQuery('.square-section').mouseover(function(){
jQuery(this).fadeTo('slow',0.3, function(){
jQuery(this).css('background-image', 'url(' + $img + ')');
}).fadeTo('slow',1);
});
You are not using the $img variable in the first place .. So the callback function is not required in the first..
The callback function might have been on help here if you are changing the image completely.
jQuery('.square-section').hover(function(){
jQuery(this).fadeTo('slow',0.3);
}, function() {
jQuery(this).fadeTo('slow',1);
});
Check Fiddle
If you want to swap 2 different images you can try this approach
jQuery('.square-section').hover(function(){
jQuery(this).fadeTo('slow', 0.3, function() {
jQuery('.square', this).removeClass('square-chess').addClass('square-chart');
jQuery(this).fadeTo('fast', 1);
});
}, function() {
jQuery(this).fadeTo('fast', 0.3, function() {
jQuery('.square', this).removeClass('square-chart').addClass('square-chess');
jQuery(this).fadeTo('fast', 1);
});
});
Fiddle with 2 images
jQuery('.square-section').hover(function () {
jQuery('.square', this).removeClass('square-chess').addClass('square-chart');
}, function () {
jQuery('.square', this).removeClass('square-chart').addClass('square-chess');
});
jQuery('.square-section').mouseout(function(){
jQuery(this).fadeTo('slow',0.3, function(){
jQuery(this).css('background-image', 'url(' + $img + ')');
}).fadeIn('slow',1);
});
How can I make the my infoWindows have tabbed content? I tried things like:
google.maps.event.addListener(this, "domready", function(){ $("#info").tabs() });
*also tried to use infoWidnwow, infowindow, and iw instead of this keyword
and
.ready(function(){ $("#info").tabs();});
and
.bind('domready', function(){ $("#info").tabs(); });
None of these worked.
Code for creating markers and infowindows:
$('#map').gmap(mapOptions).bind('init', function(){
$.post('getmarkers.php', function(json){
var theMarkers = json;
$.each(theMarkers, function(i, element) {
$.each(element, function(object, attributes){
$('#map').gmap('addMarker', {
'position': new google.maps.LatLng(parseFloat(attributes.Lat), parseFloat(attributes.Lng)),
'bounds':true } ).click(function(){
$('#map').gmap('openInfoWindow', { 'content':'<div id="info"><ul><li><a href="#tab1">Tab1</li><li><a href="#tab2">Tab2</li></ul><div id="tab1"><h1>'+attributes.productName+'</h1></div><div id="tab2"><h2 style="color: grey"><h1>'+attributes.productPrice+'</h1></div></div>' }, this);
});
});
});
});
});
Somehow I need to tell this part:
$('#map').gmap('openInfoWindow', { 'content':'<div id="info"><ul><li><a href="#tab1">Tab1</li><li><a href="#tab2">Tab2</li></ul><div id="tab1"><h1>'+attributes.productName+'</h1></div><div id="tab2"><h2 style="color: grey"><h1>'+attributes.productPrice+'</h1></div></div>' }, this);
To tab the content that I pass to openInfoWindow.
There is a free jquery plugin that takes care of multiple tabs, positioning of each and styling i just found that has an intuitive interface for customization. Here is a demo
https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html
Remove the first three snippets you posted and use this:
$('#map').gmap(mapOptions).bind('init', function() {
$.post('getmarkers.php', function(json) {
var theMarkers = json;
$.each(theMarkers, function(i, element) {
$.each(element, function(object, attributes) {
$('#map').gmap('addMarker', {
'position': new google.maps.LatLng(parseFloat(attributes.Lat), parseFloat(attributes.Lng)),
'bounds': true
}).click(function() {
var ts = $.now();
$('#map').gmap('openInfoWindow', {
"<div id='" + ts + "info'>... your tab content ..."
}, this);
$('#' + ts + 'info').tabs();
});
});
});
});
});
I created a unique string and used it to give the div a unique id, then used that to make the tabs.
I have the following code which loads a JSON feed and creates all the HTML needed for the jCarousel to work. However, I'm not sure how to preload the images. Anyone have any idea's how to do this?
$(".banner ul").jcarousel({
itemLoadCallback:loadTopBanner,
auto: 6,
wrap: 'circular',
scroll: 1,
animation:1000,
itemFallbackDimension:10
});
function loadTopBanner(carousel, state){
$.getJSON("get_top_banner.php", function(data){
carousel.size( data.length );
$.each(data, function(i){
carousel.add(i, makeTag(this.imageURL, this.URL));
});
});
}
function makeTag(img, url){
return "<a href='" + url + "'><img src='" + img + "'></a>";
}
This should do the trick, however, it is untested, and can be further optimised:
function loadTopBanner(carousel, state) {
$.getJSON("get_top_banner.php", function(data) {
carousel.size(data.length);
// make array of elements to which load events can be attached
var imgs = [];
$.each(data, function(i) {
var img = $("<img/>").attr("src", this.imageURL);
imgs.push(img);
});
// init a load counter
var loadCounter = 0;
$.each(imgs, function() {
$(this).one("load", function() {
loadCounter++
// when all have loaded, add to carousel
if (loadCounter == data.length) {
$.each(data, function(i) {
carousel.add(i, makeTag(this.imageURL, this.URL));
});
}
});
if(this.complete) $(this).trigger("load");
});
});
}
May not be a good solution but you can try to load the images somewhere on the page in a hidden div so that they will get cached before you make a ajax call and use them in loadTopBanner method. This way the carousel will not show any delay in loading the images.
If you really want to preload images, you don't need to put them in a hidden div -- you can use the Image object:
var image = new Image();
image.src = "images/foo.jpg";