I believe this might be one of the most common problem that users faces when they uses hover in cufon. Furthermore, there might be tons of solutions, but I have tried to no avail. Please help me. the website that I am having trouble with is [[here]]
jQuery(document).ready(function(){
jQuery('.menubar a').hover(function(){
jQuery('menubar a').css('color','#000000');
Cufon.refresh('menubar a');
},function(){ // this is the mouse out
jQuery('menubar a').css('color','#707070');
Cufon.refresh('menubar a');
});
});
I have also tried several attempt of refreshing the cufon using Cufon.refresh(). The hover still doesnt work. is there another solution or am I missing out something?
You're selecting every .menubar a instead of only the one that was hovered. Try this: (pun intended)
jQuery(document).ready(function(){
jQuery('.menubar a').hover(function(){
jQuery(this).css('color','#000000');
Cufon.refresh(this);
},function(){ // this is the mouse out
jQuery(this).css('color','#707070');
Cufon.refresh(this);
});
});
Not only that, several of your selectors are menubar a when they should be .menubar a (note the .).
Related
Here is a Fiddle, to show my current state: (attempting onClick())
http://jsfiddle.net/D5N4f/7/
$('.associationLinks').click(function () {
alert("I've been clicked"); //test to see if click is working
//$(this).next().toggle();
$(this.content).toggle();
//$(this .content').css("display", "block");
});
here is a version of the working HOVER, that I need to convert to onClick:
http://jsfiddle.net/D5N4f/6/
This is working fine.. however.. on HOVER is just not practical for my use.. I need to change it to onClick..but have the same behavior.
Do I need to use jQuery for this? (I havent been able to get it to work)
the content I want displayed starts off as display:none..
I have tried to show(), toggle() and even .css("display", "block"); (maybe Im not targeting things correctly?)
the last part of this (since there will be MANY links set-up like this) is to close the previous 'SHOW' content.. when I click on a new link.. (ie: only having one content box displayed at a time vs. having several open at same time!)
Please use the fiddle example instead of just random code suggestions! Thanks!
I removed the following CSS:
/*.associationLinks:hover .content {
display:block;
}*/
I also use a .children() selector to get the content div to display, and I change it's CSS on a click.
Is this closer to what you want? Hiding the image is a bit tricker, and I have an idea for that but I'm not sure if you need it.
I'm using bootstrap for UI Design. I have configured updated IntroJS to my site.
Now it works fine with other elements but giving problem with Dropdown Menu Elements.
hey man make sure your jquery link placed first then write javascript link
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Check the Console. Most likely jQuery was not referenced, in which case you need to include it before IntroJS:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
A bit late to the party but for anyone googling:
The dropdown menu UL has introjs-fixParent added to it, for me this caused my menu to appear behind other elements on the page, so I fixed that by doing a z-index: 1000!important on the UL. Intro.js adds introjs-showElement on the element to be shown, which has a really high z-index. The problem here is the parents z-index is lower than the mask so any children are always behind the mask.
My fix was to remove the z-index: 1000!important on the UL and put the other elements behind my menu.
I've had the same issue and I manage to resolve it, I posted an explanation there:
use intro.js on bootstrap dropdown element
Hope these help.
EDIT: Added snippet of code and explanation from link
I found a workaround, it's quite ugly, but does the job:
$scope.ChangeEvent = function (e) {
if (e.id === 'step2') {
document.getElementById('step1').click();
setTimeout(function () {
document.getElementById('step2').style.display = 'block';
}, 500);
}
console.log("Change Event called");
};
I set the display attribute to block just after the click event I added in the change event
When clicking executing the click on the element 1, I noticed that jquery set the state of the style.display of the element 2 to '', so I wait a bit after clicking in order to set it back to 'block', I know it's ugly, but I didn't find anything better at the time
http://jsfiddle.net/b4fwQ/
Hi all. The link above goes to a jsFiddle example of where i have got to thus far. What i am trying to accomplish is that which ever <li> has the selected class on it will shows its child. Now this is working as above, but once you start moving your mouse around the "selected" border needs to become white as you are now looking at a different page.
How can the css be changed?
thanks.
Chris
With the current HTML markup I'm not sure this is possible with pure CSS. But a bit of jQuery can get the desired effect:
$(function(){
var selectedLi = $("#navigation ul#home-nav li.grey");
$("#navigation ul#home-nav").hover(function(){
selectedLi.removeClass("selected");
}, function(){
selectedLi.addClass("selected");
});
});
See Demo: http://jsfiddle.net/b4fwQ/1/
I was given a Wordpress theme to install for a new website and then asked to make some customizations.
The site is here: http://centergrovepto.org/townsend/ (I'm not sure where the original theme came from.)
There are 3 buttons along the right side of the front page slider. "Employers", "Candidates", and "Open Positions". The buttons were initially clickable and all they did was change the current slider image.
I'm trying to make them clickable so that they open the corresponding page. If you hover over each button you can see in the status bar that the link paths are setup correctly, but when I click the button nothing happens.
I'm guessing it is a CSS issue and some layer is covering up the actual buttons, but I don't know enough CSS to figure out what the cause is. I have the Firebug plugin for Firefox installed so I can more easily inspect the CSS. I've played around with changing the z-index of various elements, but I just can't get it to work.
I actually think it's your jQuery Faded plugin. It looks as if this:
if (o.pagination) {
if (o.autopagination) {
$t.append("<ul class="+o.pagination+"></ul>");
$c.children().each(function(){
$("."+o.pagination+"",$t).append("<li><a rel="+number+" href=\"#\" >"+(number+1)+"</a></li>");
number++;
});
}
$("."+o.pagination+" li a:eq(0)",$t).parent().addClass("current");
$("."+o.pagination+" li a",$t).click(function(){
current = $("."+o.pagination+" li.current a",$t).attr("rel");
clicked = $(this).attr("rel");
if (current != clicked) {animate("pagination",clicked,current);}
if(o.autoplay){pause();}
return false; //THIS LINE PREVENTS DEFAULT ACTION WHEN <a> LINK IS CLICKED
});
}
Is preventing the default action of your links. I'm not sure what will happen, but try commenting the "return false" line out. See if any unwanted side-effects happen. Otherwise, add this code to your (or what I assume is yours) custom.js file:
jQuery(".pagination ul li a").click(function()
{
window.location = this.href; //UPDATED FOR EPHRAIM
});
I'm not exactly sure why this is happining, because if you open the link in a new tab, it works perfectly. It's possible that it's a css problem, but more likely, it has to do with your HTML.
What I would try is adding a target to your link. This will tell it to open the link specifically in the window your in, which may solve the problem. (I haven't tested it myself though)
Instead of
Try changing it to one of the following:
Or, if that one doesn't work, try this one as well
Let me know if that helps!
as I've seen on your site, the 3 buttons are linked like this:
a href="/townsend/employers/"
But i think it should be like this to work because a href="/townsend/employers/" does not refer to anywhere in your server
try changing it like so:
<a href="http://centergrovepto.org/townsend/employers/">
is there any way to use "hover" attribute for all html elements instead of just '' in IE?
for example 'li:hover' . it doesn't work in IE6 . (i don't know about other versions of IE).
Edited:
i just want to do it with CSS no javascript.
it is a simple menu.
No, IE6 didn't properly implement the :hover pseudo-class for all elements. It only supports it for anchors.
I don't think there is anyway that you can do it without javascript in IE 6.
If it is a one level menu, you might be able to tweak the styling to make the links render as display:block inside of the li so you can perform hovers on them, and if needed put spans inside the links for extra styling flexibility, but personally never had much luck trying to extend that to multi level menus.
A strategy of graceful degradation may be your best bet there.
Use onmouseover/onmouseout with javascript.
When you mouseover an element you simply show a hidden div with your hover contents.
When you mouseout of an element you will then hide the div with you hover contents.
Jquery makes this easier if you dont want to do all the leg work
<span id="hoverSpan" class="hoverelement" hoverdata="this is my hoverdata">HoverSpan</span>
HoverAnchor
<div id="hoverdiv" style="display:none"></div>
<script language="javascript">
$(document).ready(function () {
$(".hoverelement").each( function () {
var myelement = $(this);
myelement.mouseover( function (e) {
var myhovertext = myelement.attr("hoverdata");
$("#hoverdiv").html(myhovertext).show();
});
myelement.mouseout( function (e) {
$("#hoverdiv").html(myhovertext).hide();
});
});
});
</script>
Its late and I did not test this, but the idea is there. Basically you would make a hover for any element with the class "hoverelement"
try jquery...i don't know exactly but it might work in IE6....