I am using the title attribute in all my links but I don't want to be visible on mouse hover, but still visible in the code for screen readers.
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;
}
Using jQuery, you can hide the title attr on hover, and replace it on mouseout:
$(function(){
$('a').hover(function(e){
$(this).attr('data-title', $(this).attr('title'));
$(this).removeAttr('title');
},
function(e){
$(this).attr('title', $(this).attr('data-title'));
});
});
Like in this fiddle.
Since you are using jQuery, you can do it in a simple way:
$(document).ready(function(){
$("a").removeAttr("title");
});
Or, setting it to empty value:
$(document).ready(function(){
$("a").attr("title", "");
});
If this is gonna change the way the screen readers read, then, you can just target on hover.
$(document).ready(function(){
$("a").hover(function(){
$(this).attr("rel", $(this).attr("title"));
$(this).removeAttr("title");
}, function(){
$(this).attr("title", $(this).attr("rel"));
$(this).removeAttr("rel");
});
});
I was trying to create a bubble tool-tip in CSS but the browser tool-tip would always appear and mess things up. So, like you, I needed to disable the default tool-tip.
I used a bit of JQuery to remove the "Title" tag but only on mouse hover. As soon as the mouse is out, the "Title" tag is restored.
Following is a DIV with some "Title" content:
<div class="tooltip-class" title="This is some information for our tooltip.">
This is a test
</div>
Now you can run the following JQuery to hide the Title tag on mouse hover:
$(document).ready(function(){
$(".tooltip-class").hover(function(){
$(this).attr("tooltip-data", $(this).attr("title"));
$(this).removeAttr("title");
}, function(){
$(this).attr("title", $(this).attr("tooltip-data"));
$(this).removeAttr("tooltip-data");
});
});
Following is a link to the full example:
http://jsfiddle.net/eliasb/emG6E/54/
$(".element").hover(function(){
// Get the current title
var title = $(this).attr("title");
// Store it in a temporary attribute
$(this).attr("tmp_title", title);
// Set the title to nothing so we don't see the tooltips
$(this).attr("title","");
});
$(".element").click(function(){// Fired when we leave the element
// Retrieve the title from the temporary attribute
var title = $(this).attr("tmp_title");
// Return the title to what it was
$(this).attr("title", title);
});
Related
I have a responsive accordion function inside a website and i want to (open) and (close) all content with one button that also change his content name to (open) when all content is closed and (closed) when all content is open.
Also now the content that already was opened closes again when using the (open) button and the plus and minus icons don't react the right way showing the (minus icon) when the content is closed and visa versa.
Here is the fiddle
Can someone help me with this?
// Accordion //
$('.header').click(function(){
$('.content',$(this).parent()).slideToggle();
$(this).toggleClass('active');
})
$('.toggle-btn').click(function(){
$('.content').slideToggle();
$(this).toggleClass('active');
})
There you go:
http://jsfiddle.net/w3srayj6/21/
// Accordion //
$(document).ready(function() {
$('.header').click(function(){
$('.content',$(this).parent()).slideToggle();
$(this).toggleClass('active');
$('.toggle-btn').addClass('active').trigger("change");
})
});
$(document).ready(function() {
$('.toggle-btn').change(function(){
var headers = $('.header');
var state = 'open';
$.each(headers,function(){
if($(this).hasClass('active'))
state = 'close';
});
if(state == 'open')
$(this).addClass('active')
$(this).text(state);
});
$('.toggle-btn').click(function(){
var current = $(this);
current.toggleClass('active');
current.trigger("change");
var contents = $('.content');
$.each(contents, function(){
if(!current.hasClass('active'))
$(this).slideUp();
else
$(this).slideDown();
});
var headers = $('.header');
$.each(headers, function(){
if(current.hasClass('active'))
$(this).addClass('active');
else
$(this).removeClass('active');
});
current.trigger("change");
})
});
// Read more //
$(window).scroll(function() {
if ($(this).scrollTop() < 20) {
$('.read-more').slideDown(200);
} else {
console.log('there');
$('.read-more').slideUp(200);
}
});
Sometimes working with toggles may be a bit tricky and confusing.
In this case I used "hasClass" in order to determine if items are already open or not.
Since we have only "opened" and "closed" states, we can say that as long that "open" is not "Active" (has class active on it), we should add the "active" class flag to all headers and contents. same in the opposite situation.
this makes sure that already toggled items are not re-toggled.
To change your minus/plus icone with your button, you must select specific .header class with parent() and child() jQuery method like this :
$('.toggle-btn').click(function(){
$('.content').each( function() {
$(this).slideToggle();
$(this).parent().find('.header').toggleClass('active');
});
});
If you check for the class active after the toggle occurs, you can then change the text of the button depending on if the toggled class is active or not.
See this updated fiddle (edited to change the icons also)
I'm trying to add/remove .css('overflow-y','hidden') onclick, Which I did. The problem appears when I try to remove that css, also onclick. But this time, user needs to click on another element.
Idea is to have modal (twitter bootstrap 2.3) window where there is some data and when user click on modal button (triggers) the css applies to html element in order to prevent scrolling of the website. And now when I click anywhere on modal (modal shuts down) but there is still overflow-y styling and because of it I can't scroll my page.
So this is what I've made, but I have been stuck here and don't know where I am making mistake. Could anyone help me with this one, and if is possible give me some advice so I could take care in future.
Thanks!
<script type="text/javascript">
$('#myModal').modal('hide') // initializes and invokes show immediately</p>
$('.note').delay(10000).fadeOut('slow');
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
alert('WORKS!');
}
else {
$modal.onclick( function() {
$html.css('overflow-y','scroll');
});
};
});
});
</script>
Put your css in a class and use jquery's .toggleClass() to show/hide the overflow.
Here's a simplified example: http://jsbin.com/towiyaqa/1/
You can use like this:
$button.on('click', function(e) {
$html.css('overflow-y','hidden' ? 'scroll' : 'hidden');
e.preventDefault();
})
Here is solution for problem:
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$('.note').delay(10000).fadeOut('slow');
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
console.log("overflow-y: hidden added");
}
});
$('#myModal').on('hidden.bs.modal', function () {
// do something…
console.log("fires myModal");
$html.css('overflow-y','scroll');
});
});
</script>
I'm facing an issue, issue is I've a product page where image thumbnails are appearing,
i want when user hover or mouseenter on any thumnail the associated 'add to cart' button should appear, current when i mouseenter on any product all 'add to cart' buttons are appearing,
link is: http://etekstudio.org/demo/crateen/en/men
cod is:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
jQuery(target).mouseenter(function(){
jQuery('.popUpPrice button ').show();
});
});
I'd go with something like this:
jQuery(document).ready(function(){
jQuery(".product-image").hover(function(){
jQuery(this).find(".popupPrice button").show();
}, function() {
jQuery(this).find(".popupPrice button").hide();
});
});
That way it hides it on mouse exit as well.
Try to use:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
target.mouseenter(function(){
jQuery(this).find('.popUpPrice button').show();
});
});
Also target is already a jQuery object. You can just use target.mouseenter instead of jQuery(target).mouseenter
Try this:
jQuery(".product-image").mouseenter(function(){
jQuery('.popUpPrice button').show();
});
use hover in jquery
jQuery(".product-image").hover(
function() {
jQuery('.popUpPrice button ').show();
}, function() {
jQuery('.popUpPrice button ').hide();
}
);
try this :
jQuery(document).ready(function(){
jQuery('.product-image').hover(function(){
jQuery(this).next('.popUpPrice').find('button').show();
},function(){
jQuery(this).next('.popUpPrice').find('button').hide();
});
});
Try it.
And you also don't have need to create new object with the name target.You an do directly with this way also.
jQuery(document).ready(function(){
jQuery('.product-image').mouseenter(function(){
jQuery(this).find('.popUpPrice button').show();
});
});
You can try this:
jQuery(document).ready(function(){
var target = jQuery('.product-image');
target.each (function () {
jQuery(this).mouseenter(function(){
jQuery(this).find('.popUpPrice button').show()
});
});
});
inside the function
you are selecting all elements with '.popUpPrice button', you must find the correct button to show.
in this html structure, for instance:
<div class="product">
<div class="product-image><img src="" /></div>
<div class="popUpPrice"><button>Add to cart</button></div>
</div>
all you have to do is:
jQuery('.product-image').mouseenter(function(evt) {
var target = jQuery(evt.currentTarget);
target.parent().find('.popUpPrice button').show();
});
evt.currentTarget is the element which triggered the event. In this case will always be .product-image
Try this
$('.product-image').hover(function(){
$(this).next('.popUpPrice').find('.disc button').show();
},function(){
$(this).next('.popUpPrice').find('.disc button').hide();
});
DEMO
I would like to add/remove a new div when the corresponding checkbox is checked/unchecked with jQuery. Here's my attempt:
<script type="text/javascript">
$(function() {
$("#form1 :checkbox#checkbox1").click(function() {
var d = document.createElement('div');
if ($(this).is(":checked")) {
$(d).addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
//$(".newdiv").fadeOut(1000);
$(d).fadeOut(1000);
}
});
});
</script>
The fadeIn process comes out smoothly. But when I tried to fadeOut $(d) using the same methodology, it didn't work: the new generated div remained on the page. I did some research and get a work around, with $(".newdiv").fadeOut(1000); (commented in the code above), but that's not the best solution for me I think. And also I really want to know why my first attempt didn't work. Any suggestions? Thanks.
There are few changes you can make
1. No need for the selector #form1 :checkbox#checkbox1 since you have an id for the checkbox, you can just use #checkbox1
2. Create the div using jQuery instead of using createElement $('<div/>')
3. After fading out the div you need to remove it from the dom
$(function() {
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
$('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
$('#mydiv .newdiv').fadeOut(function(){
$(this).remove()
})
}
});
});
Demo: Fiddle
Another solution is to have a static div which will be shown and hidden
$(function() {
var div = $('<div/>').addClass("newdiv")
.html("This is a new div")
.appendTo($("#mydiv"))
.hide();
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
div.fadeIn(1000);
} else {
div.fadeOut(1000)
}
});
});
Demo: Fiddle
jsFiddle Demo
Every time your click handler runs, you're creating a new variable d with a new element. Instead, do that before the click handler, so each instance will reference the same element. I have included other optional improvements below.
A change event is more appropriate for checkboxes. Also, notice I made your selector just #checkbox1, since that is already unambiguous and maximally specific.
To get a better visual effect, don't add the element, hide it, then fade it in. In most browsers that will show the element flicker before it appears. Instead, use a class to hide it with css: .hidden {display: none;}. You can also use fadeToggle to toggle the visibility, instead of doing if/else. clearQueue removes extra events for multiple clicks during a transition, and makes transitions appear smoother.
Finally, use jQuery to create the element:
$(function () {
var $d = $('<div>', {
"class": "hidden",
text: "This is a new div"
}).appendTo("#mydiv");
$("#checkbox1").change(function () {
$d.clearQueue()
.stop()
.fadeToggle(1000);
});
});
You better make d a jQuery object.
<script type="text/javascript">
$(function() {
$("#checkbox1").click(function() {
var d = $('<div class="newdiv"></div>');
if ($(this).is(":checked")) {
d.html("This is a new div")
.appendTo($("#mydiv"))
.hide()
.fadeIn(1000);
}
else {
d.fadeOut(1000);
}
});
});
</script>
I have a jquery function that when a li is clicked, the li expands. That part is working fine. Now, I want, when the li is clicked it toggles a background color. But it works, however when i have to click on the li item again to untoggle the background color. Can someone assist me in the right direction on how to achieve this.
$(function() {
$('.a').click(function() {
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide('fast');
$('.selected').css('background', 'yellow');
content.slideToggle('fast');
});
$("li").click(function() {
$(this).toggleClass("highlight");
});
});
On every click set your <li>-s to default color and highlight the current:
$("li").click(function() {
$("li").removeClass("highlight");
$(this).addClass("highlight");
});
...
UPDATE
http://jsfiddle.net/NXVhE/4/
$(function() {
$('.a').click(function() {
$(this).removeClass("highlight");
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide();
content.toggle();
});
$("a").click(function () {
$("a").removeClass("highlight");
if ( $(".content").is(":visible") ) {
$(this).addClass("highlight");
}
});
});
Assuming the <li>s are all siblings, it would be slightly more efficient to do something like this, and would allow for more than one list on the same page to function independently of one another (again, assuming that is the desired functionality)
$('li').click(function() {
$('this').addClass('highlight').siblings().removeClass('highlight').
});