Using JQuery, how do I change a map icon whenever I mouse hover over a row in an HTML table/div?
Here is an example:
http://www.sfsunriseidx.com/homes/94131/?uuid=9ed7269b-5327-4c88-ba15-f700ed343d69&source=REDIR
Notice when you mouse hover over a home listing on the left, the corresponding map icon on the right changes.
Question: how do I emulate this functionality using JQuery?
Update: It was suggested below that an ID linked the two elements. If that is the case, how would you still accomplish this?
Use the for="" attribute in html, like
Hover Link
On the image:
<img id="mapIcon4" src="myImg.png" />
jQuery, using the hover function to animate the corresponding ID, the same one in the for:
$(".mapHover").hover(function() {
$("#" + $(this).attr('for')).animate({"left": "-=50px"}, "slow");
}, function() {
$("#" + $(this).attr('for')).animate({"right": "+=50px"}, "slow");
});
Probably both elements are linked by a ID..
Something like this:
$(document).ready(function() {
var googleMap = $("#googleMaps");
$('a', '#mapLinks').hover(function() {
var index = $(this).index(this);
$('img:eq(' + index + ')', googleMap).animate({
width: '+=10%'
});
}, function() {
var index = $(this).index(this);
$('img:eq(' + index + ')', googleMap).animate({
width: '-=10%'
});
});
});
Just make sure you change the "#googleMaps" and "#mapLinks" thing :)
Related
I have an image slider that is linked with some links, in the desktop version when you click on the image it is directed to the link correctly, but when I switch to the mobile version and click on the image the link does not work, I tried to resolve this issue using this Jquery:
jQuery (document) .ready (function () {
jQuery ('. fullwidthbanner-container ul> li: nth-child (3) img'). each (function () {
var currentImage = jQuery (this);
currentImage.wrap ("<a target='_self' href='http://jquerybyexample.blogspot.com'" + currentImage.attr("href") + "'</a>");
});
});
but it still didn't work, is there a way for me to make these images hyperlinked?
Would advise trying something like the following.
jQuery(function($) {
$('.fullwidthbanner-container > ul > li:eq(3) > img').each(function(i, el) {
$(el).wrap(function() {
return "<a href='http://jquerybyexample.blogspot.com" + $(this).attr("src") + "'></a>";
});
});
});
See More: https://api.jquery.com/wrap/
Images usually have a src attribute and not a href.
I have a repeated component with a control that toggles between displaying 2 images (mobile image and desktop image). I need each control to only toggle the component it is in, and function independently from every other component.
I am able to generate unique ids for all the controls, unique ids for all the images, and on click I am able to add/remove classes as well as show/hide images. My problem is that I don't know how to associate the toggle control id to the image id so that I'm only changing one component. Right now I am targeting the class (which is the same for every component) so everything toggles when you click the control.
This is inside Wordpress using Visual Composer, so I don't believe I am able to use a loop to render the repeated components.
JSFiddle Here
below is a single component, which would be repeated a number of times
<div class="wrapper">
<div class="platform-toggle">
<div class="mobile-toggle">
mobile
</div>
<div class="desktop-toggle">
desktop
</div>
</div>
<div class="platform-images">
<img class="mobile-image" src="https://via.placeholder.com/100x100.png?text=mobile" />
<img class="desktop-image" src="https://via.placeholder.com/100x100.png?text=desktop" />
</div>
</div>
$.each($('.platform-toggle'), function(ind) {
$(this).attr('id', 'platform-toggle_' + parseInt(ind + 1));
});
$.each($('.mobile-toggle'), function(ind) {
$(this).attr('id', 'mobile-toggle_' + parseInt(ind + 1));
});
$.each($('.desktop-toggle'), function(ind) {
$(this).attr('id', 'desktop-toggle_' + parseInt(ind + 1));
});
$.each($('.mobile-image'), function(ind) {
$(this).attr('id', 'mobile-image_' + parseInt(ind + 1));
});
$.each($('.desktop-image'), function(ind) {
$(this).attr('id', 'desktop-image_' + parseInt(ind + 1));
});
$(".mobile-toggle").click(function() {
if ($(".mobile-toggle").hasClass("inactive")) {
$(".mobile-toggle").removeClass("inactive");
$(".mobile-toggle").addClass("active");
$(".mobile-image").show()
$(".desktop-toggle").removeClass("active");
$(".desktop-toggle").addClass("inactive");
$(".desktop-image").hide()
}
});
$(".desktop-toggle").click(function() {
if ($(".desktop-toggle").hasClass("inactive")) {
$(".desktop-toggle").removeClass("inactive");
$(".desktop-toggle").addClass("active");
$(".desktop-image").show()
$(".mobile-toggle").removeClass("active");
$(".mobile-toggle").addClass("inactive");
$(".mobile-image").hide()
}
});
You would use $(this) selector for this case, and jQuery has lot of functions for finding parent, sibling, children, next, prev or etc elements.
I've changed your fiddle and added new selectors.
JSFiddle
$(".mobile-toggle").click(function() {
if ($(this).hasClass("inactive")) {
$(this).removeClass("inactive");
$(this).addClass("active");
//find current toggle element parent, then find next element(wrapper of the images) and finally find children image.
$(this).parent('.platform-toggle').next('.platform-images').children('.mobile-image').show();
$(this).siblings('.desktop-toggle').removeClass("active");
$(this).siblings('.desktop-toggle').addClass("inactive");
$(this).parent('.platform-toggle').next('.platform-images').children('.desktop-image').hide();
}
});
You may use parent div of the specific control in this way:
$(".mobile-toggle").click(function() {
var parentObj=$(this).closest(".wrapper");
if ($(parentObj).find(".mobile-toggle").hasClass("inactive")) {
$(parentObj).find(".mobile-toggle").removeClass("inactive");
$(parentObj).find(".mobile-toggle").addClass("active");
$(parentObj).find(".mobile-image").show()
$(parentObj).find(".desktop-toggle").removeClass("active");
$(parentObj).find(".desktop-toggle").addClass("inactive");
$(parentObj).find(".desktop-image").hide()
}
});
$(".desktop-toggle").click(function() {
var parentObj=$(this).closest(".wrapper");
if ($(parentObj).find(".desktop-toggle").hasClass("inactive")) {
$(parentObj).find(".desktop-toggle").removeClass("inactive");
$(parentObj).find(".desktop-toggle").addClass("active");
$(parentObj).find(".desktop-image").show()
$(parentObj).find(".mobile-toggle").removeClass("active");
$(parentObj).find(".mobile-toggle").addClass("inactive");
$(parentObj).find(".mobile-image").hide()
}
});
This should be exactly the same as #Slim's answer, but with simplified code that doesn't re-select the same elements again and again. The $() selector in jQuery is fast, but there's no reason to keep selecting $(this) 7 times if we don't have to.
$(".mobile-toggle").click(function() {
var $this = $(this);
if ($this.hasClass("inactive")) {
$this.removeClass("inactive").addClass("active");
//find current toggle element parent, then find next element(wrapper of the images) and finally find children image.
var $platformImgs = $this.parent('.platform-toggle').next('.platform-images')
$platformImgs.children('.mobile-image').show();
$this.siblings('.desktop-toggle').removeClass("active").addClass("inactive");
$platformImgs.children('.desktop-image').hide();
}
});
I have a problem with this code
I'll explain a little how this works,
The idea of this is that when hovering in tag (a), change the image of the id="meal", by the one that is in the (data-meal = "meal-14") .. in a few words
The pre-determined image is meal-0.png, hover in tag (a) with (data-meal = 14), replaces the url of the image with (meal-14.png),
Everything works fine, I only have one problem and is that when you stop hovering, do not go back to the pre-determined image, it stays in the image that became hover. Should return to the image meal-0.png.
<div class="imagen-hover" id="meal">
<img src="/public/tienda/meal-0.png" alt="">
</div>
<ul>
<li><a class="carne-a" data-meal="meal-14">14. Punta de Anca</a></li>
<li><a class="carne-a" data-meal="meal-16">16. Chata Angosta</a></li>
</ul>
jQuery(document).ready(function($) {
var path = "/public/images/";
$(".meal-a").on("mouseover", function() {
var meal = $(this).attr("data-meal") + ".png";
$("#meal img").attr("src", path + meal)
});
});
that is because it is doing exactly what you told it to do.
you need to make another event handler for mouseleave
or you can look at the jQuery docs , mouseenter can take two call backs , one for entering and one for leaving
$(".meal-a").mouseenter( function() {
var meal = $(this).attr("data-meal") + ".png";
$("#meal img").attr("src", path + meal)
}).mouseleave( function() { //for when mouse leaves
});
What I would recommend though... you do not need javascript or jQuery at all for this , there is a css selector for while the user is hovering over an element
.meal-a{ // regular code
}
.meal-a:hover{ // hover code
}
Also add a "mouseout" function to handle returning the image to its previous value
$(".meal-a").on("mouseout", function() {
$("#meal img").attr("src", "meal-0.png")
});
My goal is on hover a p element contained inside an a tag gets bigger on hover. I have achieved this via css3 transitions, however this is not the issue.
A loop creates a variable amount of elements in the form below on each iteration.
anchorElement = "<a id='anchor" + countWide + "' class=\"boxOPT oneplustwo\" alt=\'"+ image_website +"' style=\"cursor:pointer;width:"+ itemWidth + "px"+";height:"+anchorHeight+";position:absolute;left:"+ locationLeft + "px"+";top:0.3%;\" ><p id=\"test\" class=\"popupDynamic\"> " + popupImageTitles[i] + "</p>";
anchorElement += '</a>';
I would love to be able to add a mouse in/out effect whenever the user scrolls on the relevant anchor. each p tag contains unique information that needs to be conveyed and on hover only the relevant one should react.
I dont want to it it the below way, making two each of the methods every time a new element is created above. is there a way to have the following below which will work for a dynamic amount of elements?
$("#anchor" + etc).mouseover(function() {
document.getElementById("test").style.height="1.1em";
});
$("#anchor" + etc).mouseout(function() {
document.getElementById("test").style.height="1.1em";
});
My version of suggestions. the console logs works.
.popupHighlight {
color: red;
}
..
$('.boxOPToneplustwo').mouseover(function (e) {
console.log("in");
$(e.target).next('p').addClass("popupHighlight");
});
$('.boxOPToneplustwo').mouseout(function (e) {
$(e.target).next('p').removeClass("popupHighlight");
});
What about selecting all a elements?
$('a').mouseout(function() {
//do stuff in here
});
or better yet, have a class selector:
$('.mySpecialRolloverClass').mouseover(function (e) {
$(e.target).next('p').addClass("highlight");
});
$('.mySpecialRolloverClass').mouseout(function (e) {
$(e.target).next('p').removeClass("highlight");
});
which would go hand in hand with
An anchor
and
.highlight {
color:red;
}
Here's a jsfiddle demo:
http://jsfiddle.net/8J6kM/
The #yochannah answer is correct, however if you want to add more links dynamically, you then need to use on method instead of mouseover and mouseout, otherwise it won't work. See the demo and jQuery documentation for further details.
// I assumed that links are placed inside of a container element: #links
$('#links').on('mouseover', '.mySpecialRolloverClass', function (e) {
$(e.target).next('p').addClass("highlight");
});
I have received help earlier in another question about some jQuery transitioning and I got my website to behave properly, but now I need to get a bit deeper into this jQuery transitioning...
I need a particular effect/transition to happen based on the hashtag that is written in the address bar. This is the code provided by the other question by pckill:
$('.nav').on('click', 'li', function(){
var id = $(this).data('id');
var breadcrumbs = document.getElementById('breadcrumbs');
breadcrumbs.innerHTML = 'IMGit » <span class="capitalize">' + id + '</span>';
var current = $('#inner').find('[data-page=' + id + ']');
if (current.hasClass('hidden'))
{
current.css('marginLeft', '-200%');
$('#inner > div').not(current).animate(
{marginLeft: '100%'},
'fast',
function(){
$('#inner > div').not(current).addClass('hidden');
current.removeClass('hidden');
current.animate({marginLeft: '0%'}, 'fast');
});
}
});
And this is the HTML: http://pastebin.com/pu7jmefC
Let's say, for example, I link someone to http://mywebsite.com/index.php#remote, I want the user to be transitioned with jQuery to the proper div. The approach above works perfectly with the menu I have, but I want to be able to share the URL with someone and they'd still be able to get directly to the proper div.
I think the code above needs some altering to make it do what I seek, but I unfortunately, I'm not that good in Javascript/jQuery.
I guess we'd have to touch the code somewhere around here: $('#inner > div').not(current).
I know we have window.location.hash to work with hashtags, but I have no idea how to put it to use in the code above.
Ideas?
If you just need to check the hash on page load and perform an action accordingly, that's really simple. First of all you need to move the logic of transitioning to a div into a separate function, say transitionToDiv:
function transitionToDiv(id) {
var current = $('#inner').find('[data-page=' + id + ']');
if (current.hasClass('hidden'))
{
current.css('marginLeft', '-200%');
$('#inner > div').not(current).animate(
{marginLeft: '100%'},
'fast',
function(){
$('#inner > div').not(current).addClass('hidden');
current.removeClass('hidden');
current.animate({marginLeft: '0%'}, 'fast');
});
}
}
And change the click event (the code in your question) to:
$('.nav').on('click', 'li', function() {
var id = $(this).data('id');
var breadcrumbs = document.getElementById('breadcrumbs');
breadcrumbs.innerHTML = 'IMGit » <span class="capitalize">' + id + '</span>';
transitionToDiv(id);
}
Now, to transition to a div on page load based on the address hash, simply add these lines at some point after page load:
var id = window.location.hash.substr(1);
transitionToDiv(id);