I've got this:
$(document).ready(function() {
$(function(){
$.scrollIt();
});
$("a").hover(function(){
$(".label").show();
},function(){
$(".label").hide();
});
});
The problem is this: I have a list with multiple a's. When I hover anyone of them now, all objects with the class '.label' will show. But I just want the one that belongs to the 'a' i'm hovering over to show up.
Anyone??
Try:
$("a").hover(function(){
var element = $(this);
$(element).next(".label").show();
//or just: $(this).next(".label").show();
},function(){
$(".label").hide();
});
instead of:
$("a").hover(function(){
$(".label").show();
},function(){
$(".label").hide();
});
Related
I'm trying to accomplish two things:
Left Column: Steps are faded by default, but individual steps fade in to full color on hover.
Right Column: A different image is displayed based on the step being hovered in the left column. By default, the first image should be displayed.
I am using the fadeIn function, but I cant get it to work the way I'm hoping. Whats the best way to go about doing this?
Jsfiddle Example
$(document).ready(function() {
$('#step-one')
.hover(
function() {
$('#step-one-image-holder').fadeIn('slow');
}, function() {
$('#step-one-image-holder').fadeOut('fast');
}
);
$('#step-two')
.hover(
function() {
$('#step-two-image-holder').fadeIn('slow');
}, function() {
$('#step-two-image-holder').fadeOut('fast');
}
);
$('#step-three')
.hover(
function() {
$('#step-three-image-holder').fadeIn('slow');
}, function() {
$('#step-three-image-holder').fadeOut('fast');
}
);
});
If you use "hover" the images will disappear always when you leave the left column (I not sure if you want it). You may use "fadeIn" and "fadeOut" inside a "mouseenter" event:
(Maybe you need to put the images on absolute position to avoid the flickering)
//---Show images on mouseenter
$("div[id^='step-']").on("mouseenter", function(){
var image = $("img[id='" + $(this).attr("id") + "-image-holder']");
$("img[id^='step-']").not(image).fadeOut();
image.fadeIn();
});
//---Hide images by default
$("img[id^='step-']:gt(0)").hide();
jsfiddle
http://jsfiddle.net/Lc5gdvge/
In the fiddle above, I've showcased how text(), returns elements text and childrens' as well. How do I avoid this and only make it return "outerdiv"?
NOTE: Just click the blue container to call function.
$(document).ready(function() {
$('.outerdiv').click(function() {
var htmlstring = $(this).text();
alert(htmlstring);
})
});
NOTE 2: This has to be without the use of ID selector.
To get the text of only the .outerDiv and not the children elements, use the following code :
$(this).clone().children().remove().end().text();
What this does is, it clones the element, removes all the children tags, and goes back to the selected tag and gets the text.
The final code should look like :
$(document).ready(function () {
$('.outerdiv').click(function () {
var htmlstring = $(this).clone().children().remove().end().text();
alert(htmlstring);
});
});
I have this code below where I am trying to use Instafeed and Masonry together. Everything works fine until I click the "Load more" button. Then the Masonry layout breaks. It's probably because something is loading before the other or vice versa. I'm new to this so all help would be greatly appreciated.
I got the tip to use imagesLoaded instead of window.load and also to use appended method. But I don't understand how to incorporate that in to my code.
My code is in a script.js doc and outputs in the footer of the page after instafeed.js and masonry.
$(function () {
var loadButton = document.getElementById('load-more');
if(loadButton !== null) {
var userFeed = new Instafeed({
get: 'user',
userId: xxxxxxxxx,
accessToken: 'xxxxxxxxx',
limit: 6,
resolution: 'standard_resolution',
template: '<div class="col30 grid image-top-fill instapic"><img src="{{image}}" alt="Instagram" /> <p class="nomargin">{{caption}}</p></div>',
after: function() {
if (!this.hasNext()) {
loadButton.setAttribute('disabled', 'disabled');
Masonry.start();
}
}
});
loadButton.addEventListener('click', function() {
userFeed.next();
});
userFeed.run();
}
});
$(window).load(function(){
var container = document.querySelector('#instafeed');
var msnry = new Masonry( container, {
itemSelector : '.instapic',
isAnimated : true,
isFitWidth : false
});
});
Thanks in advance for your help! Let me know if there is anything more you need from me.
Cheers / Jeppe
You're correct in that Masonry is trying to work with elements before they're loaded. You can put .masonry('appended', $items) in the after event of Instafeed. Instafeed's developer posted this fix:
https://github.com/stevenschobert/instafeed.js/issues/118#issuecomment-44438003
i will to hide and show a div with my toggle-slide (on the ride site it is the on off slider). I have more than one toggle-slide. For my Example i use the eq() even and i will to solve this with state not with toggle().
Here my start Code:
jQuery('.menu_filter').find('.toggle-slide').eq(0).click(function(){
jQuery('.dark_red_gradient').hide("slow");
});
Here my Testsite:
http://devauth.labscope.de/htmlapp/report-overview.html
First Click to hide the div and second Click to show the div again.
I hope someone have idea.
simply concatenate some classes or id´s to get multiple handles..
e.g.
jQuery('.menu_filter#filter1').find('.toggle-slide#slide1').eq(0).click(function(){
jQuery('.dark_red_gradient').hide("slow");
});
jQuery('.menu_filter#filter2').find('.toggle-slide#slide2').eq(0).click(function(){
jQuery('.dark_red_gradient').hide("slow");
});
jQuery('.menu_filter#filter3').find('.toggle-slide#slide3').eq(0).click(function(){
jQuery('.dark_red_gradient').hide("slow");
});
or less..
furthermore you can do the same with classes..
e.g.
jQuery('.menu_filter.filter1').find('.toggle-slide.slide1').eq(0).click(function(){
jQuery('.dark_red_gradient').hide("slow");
});
jQuery('.menu_filter.filter2').find('.toggle-slide.slide2').eq(0).click(function(){
jQuery('.dark_red_gradient').hide("slow");
});
or merge classes and id´s..
to toggle any div´s hide|show state use something like this
jQuery('.menu_filter#filter1').find('.toggle-slide#slide1').eq(0).click(function(){
jQuery('.dark_red_gradient').toggle(".invisible");
});
css part for this
.dark_red_gradient {
display: block; // or whatever
[...] // your other definitions
}
.invisible {
display: none;
}
as you say you want NOT solve it with trigger but with state:
you mean this ?
I had tried looking up on here many different answers to this question and tried using their solutions, but it didn't seem to work, such as this solution:
Is it possible to hide href title?
My question is how am I able to hide the title attribute tooltip when the user mouses over the picture? I tried using the <span title=" ">text</span> but it only caused the title tooltip to show the space or the span's title attribute.
Here is my website.
I figured out the answer to my question. Thank you Gert G for getting me started! =]
What I did in order to hide the title attribute, was first to put everything into a loop because otherwise, it will take the first link's title and apply it to the picture clicked on:
$("a[rel='portfolio']").each(function(e) {
}
Then, I declared a variable that contains the title to whatever elements you want them applied to:
var title = $(this).attr("title");
Once I declared the variable, I then created a function that hides the title when it's moused over, then adds the title back on when I mouseout on it (for the purpose of having my lightbox, ColorBox).
$(this).mouseover(
function() {
$(this).attr('title','');
}).mouseout(
function() {
$(this).attr('title', title);
});
In order for the title to be viewed when click on, you have to add another function:
$(this).click(
function() {
$(this).attr('title', title);
}
);
Putting it all together, it looks like this:
$("a[rel='portfolio']").each(function(e) {
var title = $(this).attr('title');
$(this).mouseover(
function() {
$(this).attr('title','');
}).mouseout(
function() {
$(this).attr('title', title);
});
$(this).click(
function() {
$(this).attr('title', title);
}
);
});
I hope this helps everyone else looking for a similar or this exact solution!
You can check out the changes here.
Thanks Abriel for the solution, I have converted it to YUI 3 and below is the code in case anyone needed it
YUI().use('node', function(Y) {
Y.all("a[rel='portfolio']").each(function(node) {
var title = node.get('title');
node.on('mouseover', function(ev) {
ev.target.set('title', ev.target.get('text'));
ev.target.on('mouseout', function(e) {
e.target.set('title', title);
})
})
node.on('click', function(ev) {
ev.target.set('title', title);
})
})
})
I was looking for a jquery solution but I am using a javascript solution that works fine for me. I needed the "title" attribute to pass descriptive information about a product / image and within that descriptive information there was basic html tags that were needed. And so whenever someone passed the mouse over the image this mixed code and description will popup. This was less than desirable so I am using the following code so that the "title" information is hidden during mouseover but the title information is still available onclick.
Add this in your link code! Hope this helps someone:
onclick=\"javascript: this.title='description and or html goes here' ;\"
onMouseOver=\"javascript: this.title='' ;
Cheers!
Its works like this:
1:Create your own attribute and call it from lightbox
click me
2:Rename the title attribute in jquery file to:
getAttribute('stitle')
I used it for my tooltip, but it should work even without it.
I nested my link and putted title inside it. Than into nested image I´ve wrote title=" " (with that space).
<a href="http://myweb.com" class="tooltip" id="facebook" title="Sing up to my Newsletter"
<img title=" " src="../img/email.png" alt="email icon" width="32">
</a>
Than, when I hover on my email icon, no title is shown.