I am pretty sure everyone knows the hover issue in IE6.
I tried to fix the problem by using "csshoverfix.htc" or "whatever:hover". I downloaded it from the writer's page, and ofcourse I added
body { behavior:url("csshover.htc"); }
to my css file, But it didnt help.
I also tried to use jquery hover function:
$(document).ready(function(){
$('#autoSuggestionsList li').hover(
function(){
alert("test");
},
function(){
alert("test");
})
});
But also it didnt work.
I dont know if it can be the reason why it doesnt work, but the <li> with the hover, are made in real time (ajax).
anyway, how can I fix the hover issue?
Thank you.
I dont know if it can be the reason why it doesnt work, but the <li> with the hover, are made in real time (ajax).
Possibly. Try using .live() instead so that it works with elements that come from Ajax responses:
$(document).ready(function() {
$('#autoSuggestionsList li').live(
{
mouseover: function() {
alert("test");
},
mouseout: function() {
alert("test");
}
});
});
Related
so in the back of the 'discover meteor' book they explain how to do page transitions. i've got it working, however it causes problems with the loading of javascript functions and variables on other pages that its animating into. it seems they're not ready or simply don't exist at the time the page is routed.
Template.layout.onRendered(function() {
this.find('.pos-rel')._uihooks = {
insertElement: function(node, next) {
$(node).hide().insertBefore(next)
.delay(200)
.velocity("transition.slideUpIn", 1000)
},
removeElement: function(node) {
$(node).velocity({
opacity: 0,
},
{
duration: 100,
complete: function() {
$(this).remove();
}
});
}
}
});
if i remove the above code then all my javascript variables and functions work correctly. does anyone have another working solution to page transitions using velocity.js ? i did find this one but its a year old and i couldn't get it to work at all, it just makes the content where '{> yield}' is go blank :(
Just a note for asking questions on stack overflow: "causes problems with the loading of javascript functions and variables" is pretty vague. Its best to give more specifics.
But anyways, you said here that you're using isotope to render items in a grid. I'm assuming you're calling $elements.isotope() within a Template[name].onRendered callback.
This is probably the issue because its trying to compute and rearrange into a grid the elements while they're hidden. Using display: none actually removed the elements, thus isotope can't compute the sizes, etc. for the layout. Try this:
insertElement: function(node, next) {
$(node).css("opacity", 0).insertBefore(next)
.delay(200)
.velocity("transition.slideUpIn", {duration:1000, display:null})
},
opacity: 0 should do what you're looking for. It will make them transparent without removing them from the transition.slideUpIn should animate opacity so you're good there.
Also, velocity transitions mess with the display property. Setting display: null in the animation options prevents it from setting the display to block or whatever it wants to do. This may or may not be necessary, but I pretty much always use it.
You could use:
onAfterAction
onBeforeAction
. The solution should be something like this:
animateContentOut = function() {
$('#content').css('display', 'none');
this.next();
}
fadeContentIn = function() {
$('#content').velocity('transition.fadeIn',1000);
}
Router.onBeforeAction(animateContentOut)
Router.onAfterAction(fadeContentIn)
and if a link is underlined, i want it to get rid of the underline on hover. If a link has no underline, i want it to get one on hover.
Is there a smart way to do this with SASS rather than hard coding it for every link?
As others have stated, to do this within CSS or SASS this is something that requires a default style for links and a class or data attribute that must be applied to alternative links.
The type of auto-smart styling is possible with javascript though if that's an acceptable alternative. I made a quick jQuery Fiddle that would work by checking all links for the text-decoration style. This has performance drawbacks due to scanning the DOM for all links every page load. It also breaks the law of keeping styling with the CSS realm so it's up to you if it's worth it.
var links = $('a');
links.each(function (i) {
var $this = $(this);
// if this has underline
if ($this.css('text-decoration') == 'underline') {
$this.hover(
function() {
$this.css('text-decoration', 'none');
}, function() {
$this.css('text-decoration', 'underline');
});
} else {
$this.hover(
function() {
$this.css('text-decoration', 'underline');
}, function() {
$this.css('text-decoration', 'none');
});
};
});
https://jsfiddle.net/ym8s6Lwh/
I have the following scripts which work fairly nicely:
$("#spanLoading").ajaxStart(function () {
$('#spanLoading').empty().append("<img src='/img/loading.gif' />");
});
$("#spanLoading").ajaxComplete(function () {
$('#spanLoading').empty();
});
Is it possible to change these a little, so instead of loading an image on ajaxStart, the mouse cursor changes instead to css cursor wait, and then changes back to normal when ajaxComplete.
Yes, you can do this by changing the cursor property of the body element:
$("#spanLoading").ajaxStart(function () {
$('body').css('cursor', 'wait');
});
$("#spanLoading").ajaxComplete(function () {
$('body').css('cursor', 'auto');
});
Yes:
$('html').css('cursor', 'wait');
On ajaxComplete you change it back.
Neither seem to work right for me. Starting with query:
<script>
$(function() {
$("#button1").hover(function() {
$("#button1").animate({opacity: 0.5}, 500);
});
});
</script>
This causes the opacity to shift down, but it doesnt resume on mouseleave. Jquerys hover page says to put a in and out action like so:
.hover( handlerIn(eventObject), handlerOut(eventObject) )
so when i do this it just gives me both animations on mouse in and again on mouseout:
<script>
$(function() {
$("#button1").hover(function() {
$("#button1").animate({opacity: 0.5}, 500),
$("#button1").animate({opacity: 1}, 500);
});
});
</script>
So i gave up on that and tried mouseenter/mouseleave combo:
<script>
$(function() {
$("#button1").mouseenter(function() {
$("#button1").animate({opacity: 0.5}, 500);
});
("#button1").mouseleave(function() {
$("#button1").animate({opacity: 1}, 500);
});
});
</script>
It just sticks on the mouseenter animation. So i tried the css method:
<style>
a:hover {
opacity: 0.5;
}
</style>
<div>
<a id="button1" ><img src="Assets/button.png"></a>
</div>
Doesnt do jack. :shrug:
Try passing in the hover handlers in separate functions, like this:
$(function() {
$("#button1").hover(function() {
$("#button1").animate({
opacity: 0.5
}, 500);
}, function() {
$("#button1").animate({
opacity: 1
}, 500)
});
});
I don't use jQuery, but the CSS example you've provided works perfectly for me. I just copied code from the example and swapped the image with one of my own.
Consider checking whether your browser (it's version) fully supports opacity. I'm using Firefox 12.0
nm, i give up. The only way ive gotten mouse events to work is by putting it directly within the element (onmouseup: onmousedown: etc...). I did get a:hover to work finally but theres no way to animate it without cutting out ie9 and below, so thats out of the question. At least theres a solution, no thanks to jquery.
I'm working on my new portfolio and I have a list of projects which are using show and hide functions. In my case, I'wrote the code for each project, but is it very repetitive. So I would like to know if there's a technique to write the same function for each project.
Here is my jquery code:
$project1.hide();
$("a.show_hide_project1").show();
$('a.show_hide_project1').click(function() {
$project1.delay(100).slideToggle("slow");
$project2.hide(); $project3.hide(); $project4.hide(); $project5.hide();
$project6.hide(); $project7.hide(); $project8.hide(); $project9.hide();
$project10.hide();$project11.hide(); $project12.hide();
});
$('a.next1').click(function() {
$project2.fadeToggle("slow");
$project1.delay(600).hide();
});
$project2.hide();
$("a.show_hide_project2").show();
$('a.show_hide_project2').click(function() {
$project2.delay(100).slideFadeToggle("slow");
$project1.hide(); $project3.hide(); $project4.hide(); $project5.hide();
$project6.hide(); $project7.hide(); $project8.hide(); $project9.hide();
$project10.hide();$project11.hide(); $project12.hide();
});
$('a.next2').click(function() {
$project3.fadeToggle("slow");
$project2.hide();
});
$('a.previous2').click(function(){
$project1.fadeToggle();
$project2.hide();
});
$project3.hide();
$("a.show_hide_project3").show();
$('a.show_hide_project3').click(function() {
$project3.delay(100).slideFadeToggle("slow");
$project2.hide(); $project1.hide(); $project4.hide(); $project5.hide();
$project6.hide(); $project7.hide(); $project8.hide(); $project9.hide();
$project10.hide();$project11.hide(); $project12.hide();
});
$('a.next3').click(function(){
$project4.fadeToggle("slow");
$project3.hide();
});
$('a.previous3').click(function() {
$project2.fadeToggle();
$project3.hide();
});
Any help will be very appreciated.
Thanks in advance.
Here's a quick stab at it: http://jsfiddle.net/Jj2Q7/1/
The animations are not exactly as you have it, and I doubt if that's the most efficient way to do it, but hopefully it'll serve as a starting point.
Update
Here's another version which makes liberal use of data attributes: http://jsfiddle.net/Jj2Q7/3/
It should be faster than the previous, but relies on the HTML tags having the right attributes set.
First off, you should probably be leveraging a common css class to select all of them
$('.projectItem').click(function () {
$('.projectItem').hide(); //hide them all
$(this).delay(100).slideFadeToggle("slow"); //then show the one being clicked.
});
Where your Html would look more like this.
<div class="projectItem" id="project1"/>
<div class="projectItem" id="project2"/>
<div class="projectItem" id="project3"/>
<div class="projectItem" id="project4"/>
Just a really rough idea.
Basically you need to give your HTML a sort of class that makes it identifiable as a "project" , and add some rel or data attribute to the individual projects
Your code then translates to something like this: (depending on your HTML , may vary)
$(function(){
$(".project").hide();
$("a.show_hide_project").show();
$('a.show_hide_project').click(function(){
$(".project").hide();
$(".project[rel="+$(this).attr('rel')+"]").delay(100).slideFadeToggle("slow");
});
});