I am using jquery and what I want to do here is to be able to set the image that will show up based upon the link that is being hovered to.
<script type='text/javascript'>
$(function(){
$('img').hide();
$('a').mouseenter(function(){
var currentimg= $(this).html();
alert(currentimg);
$("img[src=currentimg.jpg]").show(); //I want to use currentimg variable here for the name of the jpg file
});
$('a').mouseleave(function(){
$('img').hide();
});
});
</script>
You can just concatenate the string for use, for example:
$("img[src='" + currentimg +"']").show();
Just to note, there's also a .hover() shortcut for .mouseenter(handler).mouseleave(handler), like this:
$(function(){
$('img').hide();
$('a').hover(function(){
var currentimg = $(this).html();
$("img[src='" + currentimg +"']").show();
}, function(){
$('img').hide();
});
});
Related
I want the user to go to this URL: domain.com/index.php#index This operation occurs:
$("#index").click(function(){
$(".active").removeClass("active");
$("li#index").addClass("active");
$(".loading").show(1000);
$(document).ready(function() {
$('#wrapper').fadeOut('slow', function(){
$('#wrapper').load("indexs.php", function(){
$(".loading").hide(1000);
$('#wrapper').fadeIn('slow');
});
});
});
});
You may be looking for window.location.hash. This could be implemented, in your example, by doing something like this, assuming you want the value of the hash to affect your jquery selectors.
var hash = window.location.hash;
$(hash).click(function(){
$(".active").removeClass("active");
$("li" + hash).addClass("active");
$(".loading").show(1000);
$(document).ready(function() {
$('#wrapper').fadeOut('slow', function(){
$('#wrapper').load("indexs.php", function(){
$(".loading").hide(1000);
$('#wrapper').fadeIn('slow');
});
});
});
});
I have a Select option where if I select any option related div Shows up. Upto this it's fine. But I am wanting to make something like if I select the option it will display the related div but option it self will be removed.
FIDDLE
Is this possible ? Any help will be appreciated.
JS
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
$('div').hide();
div.show();
});
});
Fixed my answer to reflect the update in the question:
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
var selIndex = $("#contact-location").prop('selectedIndex');
$("#contact-location").prop(selIndex).remove();
$('div').hide();
div.show();
});
});
http://jsfiddle.net/uwt73sj3/
var selIndex = $("#contact-location").prop('selectedIndex'); here we set the select element index to a variable we can work with later.
$("#contact-location").prop(selIndex).remove(); removed the index value from the select drop down.
You could try something like:
$(document).ready(function() {
$('#contact-location').change(function(){
$('#contact-location option').show(); //clean alls
$('option:selected',this).hide(); // hide selected
var location = $(this).val(),
div = $('#' + location);
$('div').hide();
div.show();
});
})
LIVE DEMO
Why not make things more generic at the same time?
$(function () {
$('#contact-location').change(function () {
var $this = $(this);
// show only correct location
$('div').hide(); // maybe use a class rather than hiding every <div>
$('#' + $this.val()).show();
// show only alternate options
$this.find('option').show();
$this.find('option:selected').hide();
});
});
one solution is to use click on the children of select (i.e. the options) and then hide this (which is the option). Then the value of the select still has the value of the selected option and you have to reset it manually (I used the content of the first child via the css :first-child selector but you could use anything else, too).
$(document).ready(function(e) {
$('#contact-location').children().click(function(){
var $select = $(this).parent();
var $clicked = $(this);
var location = $clicked.val(); //is the same like $select.val()
var $div = $('#' + location);
$clicked.hide();
$select.val($select.children(":first-child"));
$div.show();
});
});
I used $ before the names of some variables to indicate that these variables store jQuery objects.
You can get the selected option like this:
$("option:selected", this);
From there you can hide or remove it:
$("option:selected", this).hide();
$("option:selected", this).remove();
I was wondering how can I add a fade effect when hovering using this example http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htm
I was wondering if its possible to achieve something like this www.bungie.net
Here's the code used in the example
$(document).ready(function() {
// Image swap on hover
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
// Image preload
var imgSwap = [];
$("#gallery li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
I used bruchowski's code which worked great for me. I did change .hover to .mouseover because I was getting a double fade effect when mousing out and I just wanted the last moused over image to stick.
I'm also very new to jquery and at first pasted it in the wrong place. Once I placed it directly before $(imgSwap).preload(); it worked.
And I slowed the fade down.
So my code is as follows:
<script type="text/JavaScript">
// prepare the form when the DOM is ready
$(document).ready(function() {
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
var imgSwap = [];
$("#gallery li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$("#gallery li img").mouseover(function(){
if ($("#main-img:animated").length){
$("#main-img:animated").stop();
}
$("#main-img").css("opacity", "0").animate({"opacity":"1"}, 1400);
}); $(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
</script>
Thanks!!!
This is a quick solution (you would add this to their existing code, do not edit what they already have)
$("#gallery li img").hover(function(){
if ($("#main-img:animated").length){
$("#main-img:animated").stop();
}
$("#main-img").css("opacity", "0").animate({"opacity":"1"}, 300);
});
In this part of the code that is like this in their example
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
Change to
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this)
.fadeOut('fast')
.attr('src').replace('thumb/', ''));
});
Have this block:
jQuery(document).ready(function($) {
$("img[src$='.jpeg'], img[src$='.jpg'], img[src$='.png'], img[src$='.gif']").wrap('<div class="b-img"/>').each(function() {
var src = $(this).attr('src');
var a = $('<a/>').attr('href', src).addClass('img-link').colorbox();
$(this).wrap(a);
});
})(jQuery);
and after that have link like <img src>... but I need <img src> before <a href="">
You can use after() instead of wrap
jQuery(document).ready(function($) {
$("img[src$='.jpeg'], img[src$='.jpg'], img[src$='.png'], img[src$='.gif']").wrap('<div class="b-img"/>').each(function() {
var src = $(this).attr('src');
var a = $('<a/>').attr('href', src).addClass('img-link').colorbox();
$(this).after(a);
});
})(jQuery);
Edit based on comments by OP, for changing image src
jQuery(document).ready(function($) {
$("img[src$='.jpeg'], img[src$='.jpg'], img[src$='.png'], img[src$='.gif']").wrap('<div class="b-img"/>').each(function() {
var src = $(this).attr('src');
var a = $('<a/>').attr('href', src).addClass('img-link').colorbox();
$(this).after(a);
$(this).attr('src', 'http://www.yoursite.com/images/img1.jpg');
});
})(jQuery);
insertBefore() inserts the elements before this, like so:
$(function() {
$("img").wrap('<div class="b-img"/>').each(function() {
$('<a />', {href: this.src, 'class': 'img-link'}).colorbox().insertBefore(this);
});
});
Also, there should be no need to check for all available image file extensions, if you have images that are svg etc, use a class instead.
$('.icon1').mouseover(function(){
$(this).find('img').attr('src', 'recursos/botban/maq1.png');
});
Should work right? It's just an arbitrary test to see what was wrong, but it's still broken.
I've also tried with $('.icon1').hover(function(){..., and it also does not work.
What I really want is more like...
$('.icon1').mouseover(function(){
var alt = $(this).find('img').attr('src')+'.png';
$(this).find('img').attr('src', $(this).attr('id')+''.png);
}).mouseout(function(){
$(this).find('img').attr('src', alt);
});
The HTML for each image is as follows...
<a class='icon1'><img src='recursos/botban/veh1.png'></a>
A few things, I'd use mouseenter instead of mouseover (since mouseout will fire when entering a child), and also make sure it's running inside a document.ready handler, like this:
$(function() {
$('.icon1').each(function(){
$.data(this, 'src', $(this).find('img').attr('src'));
}).hover(function(){
$(this).find('img').attr('src', this.id + '.png'); //may need adjustment
}).mouseout(function(){
$(this).find('img').attr('src', $.data(this, 'src'));
});
});
I'm not sure exactly what hover image you want, but the general approach is to store what it was originally and use than then restoring it on mouseleave. Or, just put the hover on the <img> itself, like this:
$(function() {
$('.icon1 img').each(function(){
$.data(this, 'src', this.src);
}).hover(function(){
this.src = 'otherImage.png';
}).mouseout(function(){
this.src = $.data(this, 'src');
});
});
(function($) { // private closure;
$(function() { // document load;
$('.icon1').hover(function(){
$(this).find('img').attr('src', "recursos/botban/veh1.png");
}, function(){
$(this).find('img').attr('src', "recursos/botban/veh2.png");
});
});
})(jQuery);