It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
Hey guys, this is my first time actually posting at stackflow but i've used people's answers before. Really a great site.
Anywho onto my problemo. I have some 'li' tags. When I hover the mouse over these 'li's, I need a DIV to appear over the 'li' with some buttons, etc. Basically it's kind of a menu. the 'li's are an unpredictable length, usually somewhere from 1 line to 5.
A great example of what I'm trying to accomp is the dribbble.com homepage. Hover over an image (though I'm using 'li's) and a nifty lil info thing comes up.
I have absolutely no experience with javascript or jqry, I'm just a PHP guy with some CSS. I do the back-end work. Anywho, can anyone show me how to do this and include a basic example please? Would really really appreciate it.
Help?
Lets say you have the following structure:
<ul id="myMenu">
<li><div class="inactive">Menu 1</div><div class="active">..some icons..</div></li>
<li><div class="inactive">Menu 2</div><div class="active">..some icons..</div></li>
<li><div class="inactive">Menu 3</div><div class="active">..some icons..</div></li>
</ul>
This is a very basic menu and I'm sure you'll have something more complicated, but by using wrapped divs this will make setting up your structure much easier.
Your CSS would look something like this:
/* Initially hide rollover content */
#myMenu li div.active {
display: none;
/* Use the following if you want to overlay, otherwise delete */
z-index: 2;
position: absolute;
top: 0px; left: 0px;
}
And assuming you're using jQuery the javascript would look something like this:
// DOM Ready
jQuery(function($) {
// Reference to menu
$("#myMenu").delegate("li", "mouseenter mouseleave", function(evt) {
var $this = $(this);
switch(evt.type) {
// When the client mouses over
case "mouseover":
// To swap content use this
$this.find(".inactive").hide(); // Remove this line to overlay
$this.find(".active").show();
break;
// When the client mouses out
case "mouseout":
// To swap content use this
$this.find(".inactive").show(); // Remove this line to overlay
$this.find(".active").hide();
break;
}
});
});
Edit: had a typo in the css and the javascript, sorry bro
Create a .js file and paste this code in.
(function($) {
$.fn.tooltip = function(options) {
var
defaults = {
background: '#e3e3e3',
color: 'black',
rounded: false
},
settings = $.extend({}, defaults, options);
this.each(function() {
var $this = $(this);
var title = this.title;
if ($this.is('a') && $this.attr('title') != '') {
this.title = '';
$this.hover(function(e) {
// mouse over
$('<div id="tooltip" />')
.appendTo('body')
.text(title)
.hide()
.css({
backgroundColor: settings.background,
color: settings.color,
top: e.pageY + 10,
left: e.pageX + 20
})
.fadeIn(350);
if (settings.rounded) {
$('#tooltip').addClass('rounded');
}
}, function() {
// mouse out
$('#tooltip').remove();
});
}
$this.mousemove(function(e) {
$('#tooltip').css({
top: e.pageY + 10,
left: e.pageX + 20
});
});
});
// returns the jQuery object to allow for chainability.
return this;
}
})(jQuery);
This should go in your page;
<script src="../../Scripts/jQuery.tooltip.js" type="text/javascript"></script>
<style>
#tooltip {
background: url(../images/search.png) no-repeat 5px 50%;
border: 1px solid #BFBFBF;
float: left;
font-size: 12px;
max-width: 160px;
padding: 1em 1em 1em 3em;
position: absolute;
}
.rounded {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
</style>
<script type="text/javascript">
$('.tooltip').tooltip();
</script>
This is the link that will give you a tooltip;
over the years
Now, you can replace the <a> with anything you want so long as you have the class "tooltip". Then you can place buttons etc inside it.
This isn't the whole solution but it should get you pretty close.
Related
The image will change when it expands, but when it collapses back, it won't change, my code looks like below:
JS:
(function ($) {
$(document).ready(function () {
// Categories menu opening
$('.woocommerce.widget_product_categories .product-categories li.cat-parent').prepend('<div class="cat-menu-close"></div>');
$(document).on("click", ".woocommerce.widget_product_categories .product-categories li.cat-parent > .cat-menu-close", function (e) {
var $catParent = $(this).closest('li.cat-parent');
var state = $catParent.hasClass('close');
$catParent.toggleClass('opened', !state);
$(this).nextAll('ul.children:first').slideToggle(state);
});
});
})(jQuery);
CSS:
.woocommerce.widget_product_categories .product-categories li .cat-menu-close {
position: absolute;
right: 0;
line-height: 20px;
text-align: center;
cursor: pointer;
top: 4px;
width: 20px;
height: 20px;
}
.woocommerce.widget_product_categories .product-categories li > .cat-menu- close:hover {
opacity: 0.5;
}
.woocommerce.widget_product_categories .product-categories li > .cat-menu- close:after {
display: inline-block;
margin-left: 2px;
background: url("../img/arrow-right.svg") no-repeat center center;
background-size: 20px 20px;
width: 10px;
height: 20px;
content: "";
}
.woocommerce.widget_product_categories .product-categories li.opened > .cat- menu-close:after {
background: url("../img/arrow-down.svg") no-repeat center center;
background-size: 20px 20px;
}
Could someone help? I need to change the image when it expands and collapses, thank you and much appreciated.
the issue is that the category even after the SlideUp stays like this
class="cat-item cat-item-69 cat-parent opened"
instead of returning to it's original state that is
class="cat-item cat-item-69 cat-parent"
I am trying to find out the reason myself but I have too little experience with js so it's kinda hard to figure it out.
now if you remove the "!" from
$catParent.toggleClass('opened', !state);
the image will stop moving in general as it will not change the state.
edited answer bellow
Alright I have solved the riddle
After a bit of trial and error, I have your answer. In your code you have this:
var $catParent = $(this).closest('li.cat-parent');
var state = $catParent.hasClass('close');
$catParent.toggleClass('opened', !state);
this part of the code sets the starting state "close"
var state = $catParent.hasClass('close');
and when you click you get the state "opened" with the
$catParent.toggleClass('opened', !state);
This doesn't give you the option to change back to the original state onclick as the "opened" state is set to as important with the exclamation mark.
Now if you edit your code to set two variable states as opened and close. and then leave the toggleClass to change between the states you get the outcome you want. I am not sure if my explanation is correct but here is the code you need.
I have already tested it and I am using it on the webpage I am administrating if you want you can check it out
// Categories menu opening
$('.woocommerce.widget_product_categories .product-categories li.cat-parent').prepend('<div class="cat-menu-close"></div>');
$(document).on("click", ".woocommerce.widget_product_categories .product-categories li.cat-parent > .cat-menu-close", function(e) {
var $catParent = $(this).closest('li.cat-parent');
var state = 'close'
var state = 'opened'
$catParent.toggleClass(state);
$(this).nextAll('ul.children:first').slideToggle(state);
[Edit]
To anyone checking out this answer I would better recommend another plugin named 'WooCommerce Product Categories Selection' as it seems to be functioning way better.
I am using it on my websites now, the only downside is that it doesn't have icons for expand and collapse but it's really easy to add it, and if you do decide to go that way you may like find this solution helpfull
When clicking on a link I need to load a huge pdf on FancyBox overlay. Until the pdf is loaded I'm displaying a FancyBox loader. The problem is I need to add a text like "Please Wait...etc" in the FancyBox loader. Can any one help?
This is My Code:
<p>
<a class="fancypdf" href="hugepdf.pdf">Click
Here To View The PDF</a>
</p>
<script type="text/javascript">
$(document).ready(function() {
$(".fancypdf").click(function(event) {
$.fancybox.open(this.href, {
type : "iframe"
});
$.fancybox.showLoading();
$("iframe.fancybox-iframe").load(function() {
$.fancybox.hideLoading();
content: {
text: 'Loading...',}
});
event.preventDefault();
});
});
</script>
P.S.
You can modify following fiddle.
DEMO
Please have a look at below modifications:
Updated Fiddle Link: http://jsfiddle.net/PudLq/619/
1) added CSS class as:
#fancybox-loading{
background-repeat: no-repeat;
background-position: center -108px;
text-align: center;
}
#fancybox-loading div{
margin: auto;
}
.overrideLoading{
background: none !important;
color: white;
width: 92px !important;
}
2) after showing loading animation; altering the loading div HTML as per our need as follows:
$.fancybox.showLoading();
$('#fancybox-loading').append("<div class='overrideLoading'>Please Wait...</div>");
3) On hiding the animation; As suggested by "rockmandew" there is absolutely no need of reverting our HTML/CSS changes. On calling $.fancybox.showLoading() again directly; default loading animation will be shown to user. I have tested it and added one more link in fiddle to show default loading animation. Please click on "Show Default loading" to see that effect.
I hope this will help you.
I didn't have a chance to tweak the resulting positioning being a little off-center, but this may be a more simple solution:
http://jsfiddle.net/PudLq/621/
Simply add your text to an :after pseudo element with a content: rule and modify the styles of the loading wrapper to accomodate.
here's the CSS I added:
#fancybox-loading {
background: #000;
padding: 5px;
border-radius: 6px;}
#fancybox-loading:after {
content:"Please wait...";
display:inline-block;
color:#fff;}
#fancybox-loading div {margin:auto;}
Here is a forked version of your Fiddle.
I've basically span with the text "Please Wait". Then I've applied some CSS to that to position it as you did with #fancybox-loading .
Here is the new javascript code -
$(".on").click(function () {
var target = $('#target');
var overlay = $('#overlay');
overlay.width(target.width()).height(target.height()).css({
'left': target.position().left,
'top': target.position().top
}).fadeIn(200);
$.fancybox.showLoading();
$('#fancybox-loading').css({
'left': (target.width() - $('#fancybox-loading').width()) / 2,
'top': (target.height() - $('#fancybox-loading').height()) / 2,
'margin': 0
});
var labelWidth = 80;
$('body').append($('<span>', {
'class': 'waitText'
}).text("Please Wait").css({
'width': labelWidth,
'left': (target.width() - labelWidth) / 2,
'top': ((target.height() - $('#fancybox-loading').height()) / 2) + $('#fancybox-loading').height()
}));
});
$(".off").click(function () {
$('#overlay').fadeOut(200);
$.fancybox.hideLoading();
$('.waitText').remove();
});
And my new CSS -
.waitText {
position: fixed;
margin: auto;
color: white;
text-align: center;
}
Following vijayP's answers:
JsFiddle: http://jsfiddle.net/rockmandew/kmfeppec/
I modified his CSS class of "overrideLoading":
.overrideLoading{
background: none !important;
color: white;
position: absolute;
top: 42px;
}
As you can see I added a "position:absolute" and a "top" position - you can modify this to however you need it to appear.
Next I altered his jQuery, which I modified to actually append a new element:
$('#fancybox-loading div').append("<div class='overrideLoading'>Please Wait...</div>");
As you can see, that reduced your required jQuery to one line.
Finally, I removed the last part of the function, which was removing the class. Since this is no longer required, you can just keep the FancyBox "hideLoading" call.
For learning purposes, I removed the following from the last function:
$('#fancybox-loading div').removeClass("overrideLoading");
$('#fancybox-loading div').text("");
Again, here is the JsFiddle: http://jsfiddle.net/rockmandew/kmfeppec/
First Update:
I saw that the first user to answer, updated his answer and while works, I would suggest shying away from "!important" tags as much as possible. I too refined my answer and developed a solution that didn't use any !important tags.
What was originally: $('#fancybox-loading div').append("Please Wait..."); was now changed to:
$('#target ~ #overlay').append("<div class='overrideLoading'>Please Wait...</div>");
I noticed an earlier comment from you, which specified that you wanted to target specific loading overlays - what this function does is it: Selects every '#overlay' element that is preceded by a '#target' element - you can insert whatever target you want.
I removed all instances of the "!important" tag - this is just best/standard practice.
.overrideLoading{
color: white;
position: absolute;
top: 86px;
left: 16px;
}
Updated JsFiddle: https://jsfiddle.net/rockmandew/kmfeppec/7/
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I needed to create an accordion that could keep track of the adjustments it made to height. In most cases, an accordion's container will adjust its height automatically, but my accordion was in an absolutely positioned div that was within a relatively positioned div, and I needed to adjust the height of the relatively positioned div along with the accordion to move some background images around. In case anyone else ever needs something similar, here is the result I came up with (with the help of ahren and dmi3y):
http://jsfiddle.net/MSatE/48/
The html:
<div id="accordion">
<h3>Sample Header 1</h3>
<div>
<p>
Sample<br />
More Sample Text<br />
Yet More Sample Text<br />
I wish I could come up with something more clever<br />
This should be enough for you to see the problem
</p>
</div>
<h3>Sample Header 2</h3>
<div>
<p>
Sample<br />
More Sample Text<br />
Yet More Sample Text<br />
I wish I could come up with something more clever<br />
This should be enough for you to see the problem Sample<br />
More Sample Text<br />
Yet More Sample Text<br />
I wish I could come up with something more clever<br />
This should be enough for you to see the problem
</p>
</div>
</div>
The css:
#accordion {
width: 600px;
border: 1px solid #C0C0C0;
border-bottom: none;
box-shadow: 0 0 5px #C0C0C0;
-webkit-box-shadow: 0 0 5px #C0C0C0;
margin: 30px auto;
background: #FFF;
}
#accordion h3 {
border-bottom: 1px solid #C0C0C0;
padding: 10px;
}
#accordion div {
display: none;
padding: 20px;
border-bottom: 1px solid #C0C0C0;
background: #F4F4F4;
}
#accordion p {
padding: 0;
margin: 0;
}
#accordion h3:hover {
cursor: pointer;
}
.forMeasure {
position: absolute;
visibility: hidden;
display: block!important;
}
The javascript/jQuery:
$('#accordion h3').click(function(){
var adjustment = 0;
var div = $(this).next('div');
if(div.css('display') == 'none')
{
adjustment += div.addClass('forMeasure').outerHeight();
div.removeClass('forMeasure');
div.slideDown();
div.siblings('div').each(function(){
if($(this).css('display') == 'block')
{
adjustment -= $(this).outerHeight();
$(this).slideUp();
}
});
}
else
{
adjustment -= div.outerHeight();
div.slideUp();
}
});
I've simplified your accordion...
http://jsfiddle.net/MSatE/3/
$('#accordion h3').click(function(){
$(this).next().slideDown().siblings('div').slideUp();
});
The only CSS change I made:
#accordion div {
position: relative; /* <-- changed to relative */
display:none; /* <-- changed from visibility:hidden; to display:none; */
padding: 20px;
border-bottom: 1px solid #C0C0C0;
background: #F4F4F4;
}
EDIT
As requested... a method to retrieve the new height of the accordion before animation begins...
http://jsfiddle.net/MSatE/6/
$('#accordion h3').click(function(){
/* Extra code to get the height of the new accordion once this div has been shown... */
var $t = $(this);
$t.siblings('div').filter(':visible').addClass('oldVisible');
$t.next().show().siblings('div').hide();
var height = $('#accordion').outerHeight();
$t.next().hide().siblings('.oldVisible').show().removeClass('oldVisible');
console.log(height);
$t.next().slideDown().siblings('div').slideUp();
});
Have you examined the jQueryUI accordion feature? If not, take a look at their examples, copy/paste them into a doc on your web site, and spend ten minutes playing with it. You'll be glad you did.
Here i have altered your jquery a small bit to get what i think you are asking for. Basically now the height of the content div covers all of the content in it. http://jsfiddle.net/MSatE/9/
Was very simple when looking at it just had to adjust the following line to 100%:
var div_height = $(this).height();
$(this).css('height', '100%');
Hope this is what you were looking for!
Regards,
-Epik-
This question already has answers here:
How can I highlight the line of text that is closest to the mouse?
(3 answers)
Closed 8 years ago.
I'm currently working on a website which will feature a bunch of stories for people to read (basically a blog). I want to make them as easy to read as possible and I figured it would be useful to 'highlight' lines of text with the cursor. Kinda like following the lines of text with your finger when reading a book.
I stumbled upon this answer, however I can't seem to get it to work for my page. It's also a pretty old answer so maybe there's an improved version of this?
If anyone could help me out I'd be forever grateful!
Wrote some jQuery code that, atleast to me, both looks and works better than the code in the post that you are referring to. Hope it fits your needs :)
There's also a live demo up at http://jsfiddle.net/gFTrS/2/
HTML
<div class="textWrapper">
<div class="highlight"></div>
<p>Your text goes here</p>
</div>
CSS
.textWrapper
{
position: relative;
width: 600px;
padding: 0px 10px;
margin: 0 auto;
cursor: default;
}
.textWrapper p
{
font: normal 12px Arial;
color: #000000;
line-height: 18px;
padding: 0;
margin: 0;
}
.highlight
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 18px;
background: yellow;
z-index: -1;
display: none;
}
jQuery
$(document).ready(function()
{
var lineHeight = 18;
$('.textWrapper').hover(function()
{
$('.highlight', this).show();
$(this).mousemove(function(e)
{
var relativePos = e.pageY - this.offsetTop;
var textRow = (Math.ceil(relativePos / lineHeight) * lineHeight) - lineHeight;
if (textRow => 0)
{
$('.highlight', this).css('top', textRow + 'px');
}
});
}, function()
{
$('.highlight', this).hide();
});
});
Most of the answers and suggestions in the older post on SO you reffered to try to manipulate the DOM by adding spans or divs for each line. But that's actually not a waterproof approach since it is not cross- browser compatble, especially not with mobile browsers. You should use a dynamically jquery controlled div that jumps behind the lines. The div should be dynamically be positioned with a jquery function triggered on mousemove calculating the div jumping on line-height depending on mouse cursor position
I want to suppress the web browser's default tooltip display when a user hovers over certain links and elements. I know it's possible but I don't know how. Can anyone help?
The reason for this is to suppress the tooltip for microformatted date-times. The BBC dropped support for hCalendar because the appearane of the machine-readable date was an accessibility issue for those with cognitive disabilities aswell as some screen reader users. http://www.bbc.co.uk/blogs/bbcinternet/2008/07/why_the_bbc_removed_microforma.html
EDIT:
I whipped up a jquery plugin along the same lines as Aron's suggestion...
// uFsuppress plugin v1.0 - toggle microformatted dates
(function($){
$.ufsuppress = function() {
$(".dtstart,.dtend,.bday").hover(function(){
$(this).attr("ufdata",$(this).attr("title"));
$(this).removeAttr("title");
},function(){
$(this).attr("title",$(this).attr("ufdata"));
$(this).removeAttr("ufdata");
});
}
})(jQuery);
// Usage
$.ufsuppress();
As far as I know it is not possible to actually suppress showing the title tag.
There are some workarounds however.
Assuming you mean you want to preserve the title property on your links and elements, you could use Javascript to remove the title property at onmouseover() and set it again at onmouseout().
// Suppress tooltip display for links that have the classname 'suppress'
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if (links[i].className == 'suppress') {
links[i]._title = links[i].title;
links[i].onmouseover = function() {
this.title = '';
}
links[i].onmouseout = function() {
this.title = this._title;
}
}
}
Add this element to your html
onmouseover="title='';"
For example i have a asp.net checkbox I store a hidden variable but do not want the user to see on as the tooltip.
Ran across this thread when using the jQuery plugin timeago. Actually the solution is very simple using the CSS property pointer-events. Posting this for the benefit of people coming here through a search engine :)
.suppress {
pointer-events:none;
}
Note that you shouldn't use this for things like links that should click through to something. In this case use the accepted JS solution.
Something like this in prototype would blank all title attributes of datetime microformats with a class of 'dtstart':
$$('abbr.dtstart').each(function(abbr){abbr.title=' '})
Note I used a blank space, the Mozilla documentation for element.title states
According to bug 264001 , setting
title to the empty string triggers the
default inheriting behavior. To cancel
inheritance, title must be set to a
non-empty whitespace string.
This won't help with your problem but might be interesting nevertheless: There's another universal attribute apart from title which can be used to store data - lang!
Just convert the data you want to store to a continuous string and prefix it with 'x-' to declare private usage in accordance with RFC 1766.
In the comments, sanchothefat clarified that he wants to solve the usability-issues with the abbr-design-pattern in microformats. But there are other patterns which are as semantically meaningful (or, in my opinion even more so) than this pattern. What I'd do:
<p>
The party is at
<dfn class="micro-date">10 o'clock on the 10th
<var>20051010T10:10:10-010</var></dfn>.
</p>
together wtih these styles
dfn.micro-date {
font-weight: inherit;
font-style: inherit;
}
dfn.micro-date var {
display: none;
}
In my opinion, the semantically most correct way would be to use a dl definition list - which isn't allowed inside of paragraphs. This can be worked around with the following pattern:
<p>
The party is at <q cite="#micro-dates">10 o'clock on the 10th</q>.
</p>
<dl id="micro-dates">
<dt>10 o'clock on the 10th</dt>
<dd>20051010T10:10:10-010</dd>
</dl>
which requires a more sophisticated stylesheet:
q[cite='#micro-dates']:before {
content: '';
}
q[cite='#micro-dates']:after {
content: '';
}
dl#micro-dates {
display: none;
}
This is what i did.
$('.fancybox').hover(
function(){
$(this).attr('alt',$(this).attr('title'));
$(this).attr('title','');
},
function(){
$(this).attr('title',$(this).attr('alt'));
$(this).removeAttr('alt');
}
).click(function(){
$(this).attr('title',$(this).attr('alt'));
$(this).removeAttr('alt');
});
You can hook the 'mouseenter' event and return false which will stop the native tooltips from being displayed.
$(selector).on( 'mouseenter', function(){
return false;
});
It's possible to suppress this behaviour with jQuery
var tempTitle;
$('[title]').hover(
function(e) {
debugger;
e.preventDefault();
tempTitle = $(this).attr('title');
$(this).attr('title', '');
// add attribute 'tipTitle' & populate on hover
$(this).hover(
function() {
$(this).attr('tipTitle', tempTitle);
}
);
},
// restore title on mouseout
function() {
$(this).attr('title', tempTitle);
}
);
.progress3 {
position: relative;
width: 100px;
height: 100px;
background: red;
}
.progress3:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(data-tooltip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.progress3:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div title='abc' data-tooltip="This is some information for our tooltip." class="progress3">
title='abc' will not be displayed
</div>
fiddle