I'm attempting to remove the browser generated title box that appears with anchors that have a title attribute. The reason I want to do this is so it doesn't interfere with my tooltip jQuery.
As of right now I am removing the title attr on hover, but it won't reassign it after removing yourself from the hover state. How come?
http://jsfiddle.net/fj4xz/5/
Thats because the
var title
is in the HandlerIn function and not defined in the handler out.
Simplest solution is to put de var title outside of your hover function and assign it inside the hover handlers.
Edit: Removing the vars as stated by Photon is also a solution. I highly recommend you use vars though. Your code soon gets messy and unmaintainable if variables that are global are not defined. But thats just my opinion.
http://jsfiddle.net/RubenJonker/fj4xz/6/
That's because your title variable is within the mouseenter function, but you're using it inside mouseleave. You should move your title variable outside the hover method.
var title;
$('a.tooltip').hover(function() {
title = $(this).attr('title');
var offset = $(this).offset();
var width = $(this).outerWidth();
var height = $(this).outerHeight();
$content = $('<div class="tooltip">' + title + '</div>').fadeIn('fast');
$(this).append($content);
$(this).attr('title', '');
$content.offset({
top: offset.top + height,
left: offset.left + (width - $content.outerWidth()) / 2
});
}, function() {
$(this).find('div').fadeOut('fast');
$(this).attr('title', title);
});
The reason why it won't re-assign the title value is because you're declaring the title variable in the first function, which is out of the scope of the second. If you want to preserve the original title value, you need to do so in such a way the second function has access to it.
Instead, try adding it to a data value:
$(this).data("originalTitle", $(this).attr("title"));
And then re-assign it within your second function:
$(this).attr("title", $(this).data("originalTitle"));
I would avoid having a generic title variable floating around that you're setting and getting for n links on the page. Storing the values as data on the element itself seems like a far better approach to me.
You're declaring var title = $(this).attr('title'); in your first function there, but your second function has no knowledge of title.
just remove all var declarations before variable name
it will become global variable See this
$('a.tooltip').hover(function() {
title = $(this).attr('title');
offset = $(this).offset();
width = $(this).outerWidth();
height = $(this).outerHeight();
$content = $('<div class="tooltip">' + title + '</div>').fadeIn('fast');
$(this).append($content);
$(this).attr('title', '');
$content.offset({ top: offset.top+height, left: offset.left+(width-$content.outerWidth())/2 });
}, function() {
$(this).find('div').fadeOut('fast');
$(this).attr('title', title);
});
Related
here is a problem i am facing in my progressbar. i have data-percent attribute in my "pro-bar" class . each data-percent is different but when in browser i'am getting first pro-bar's data-percent value applied to all
Here is my code:
$('.pro-bar').each(function( i, elem ){
var percent = $('.pro-bar').attr('data-percent'),
barparcent = Math.round(percent*5.56),
$elem = $(this);
console.log(percent);
$elem.animate({'width':barparcent}, 2000, 'easeInOutExpo');
});
Your problem is how you are referring to your pro-bar inside the each. Use "this" to refer to the current element, not a general class selector.
$('.pro-bar').each(function( i, elem ){
var percent = $(this).attr('data-percent'),//change here
barparcent = Math.round(percent*5.56),
$elem = $(this);
console.log(percent);
$elem.animate({'width':barparcent}, 2000, 'easeInOutExpo');
});
Further explanation:
$(".pro-bar").attr("data-percent") gets all of the .pro-bar, then .attr("data-percent") gets the value of the first element (as does most other similar jquery methods). Then as you loop through each element, this same effect is called multiple times.
My aim is to be able to type a text on the fly (that can be resized and move) inside a given div element, so I have created a textbox that is appended where i clicked.
$('div').click(function(e){
var top = e.clientY+'px';
var left = e.clientX+'px';
$('div').append('<input type="text">');
$('input[type="text"]').css({'position' : 'absolute','top' : top,'left' : left});
});
problem is that, when I was about to type a text, it won't let me and it created a new textbox instead.
Heres a fiddle to demo the problem.
Is there any clean approach as to what I wanted to do? Any suggestions is greatly appreciated. TIA
Use .focus() on input additionally.
Demo: http://jsfiddle.net/p2ct8eL7/4/
JS:
$('div').click(function (e) {
var top = e.clientY - 20 + 'px';
var left = e.clientX - 20 + 'px';
var i = $('<input type="text">'); //Store the input in a variable.
$('div').append(i);
i.css({
'position': 'absolute',
'top': top,
'left': left
}).focus(); // modify the current input instead of all.
});
When clicking, simply remove the click-Handler or check if there already is an input, so that your code can be skipped. Put this at the top of your event handler function:
if($(this).find('input[type="text"]').length > 0){
return;
}
Here's the fiddle: http://jsfiddle.net/p2ct8eL7/2/
Anyone see what I'm doing wrong here? Creating circles using jQuery and then filling them with a variable from an input field.
The issue: The variable firstletter is is not being displayed when 1. there's input in the input box and 2. when the result pane is clicked to generate a circle. The variable should be in the middle of the circle.
jQuery:
// making of the circles
$('<div/>').attr({
'id': i
}).addClass('circle').css({
'top': e.pageY - 75,
'left': e.pageX - 75,
'content': firstletter
}).appendTo('#area');
firstletter being a variable here which I am using with the content css property.
Here's the fiddle:
http://jsfiddle.net/hslincoln/ZM7dC/
Need to use .val() instead of .text() and add the firstletter as the content of the div since https://developer.mozilla.org/en-US/docs/Web/CSS/content
Demo:http://jsfiddle.net/robschmuecker/ZM7dC/7/
var i = 0;
$('#area').bind('click', function (e) {
// input stuff
$('#jibberjabber').val(
function (index, value) {
var jimmy = value.substring(1);
return jimmy;
});
// push letter to variable ready for circle
var jibberjabbercontent = $('#jibberjabber').val();
var firstletter = jibberjabbercontent.charAt(0);
console.log(jibberjabbercontent, firstletter);
// making of the circles
$('<div>' + firstletter + '</div>').attr({
'id': i
}).addClass('circle').css({
'top': e.pageY - 75,
'left': e.pageX - 75
}).appendTo('#area');
i++;
});
Have updated the fiddle as per your requirement.
the problem is, you used text() instead of val().
jQuery
$('#'+i).html('<span class="charIn">'+firstletter+'</span>');
css
.charIn{
position:absolute;
top:47%;
left:46%;
}
used the above code to add the letter inside the span to make the letter appear center of the cirlce.
here is the working fiddle
Content can only be used with pseudo tags. Since the circle divs are not, the content is simply not displaying. Instead use
.addClass('circle').css({
'top': e.pageY - 75,
'left': e.pageX - 75,
}).text(firstletter).appendTo('#area');
Also you can't use .text to grab jibberjabber content. Instead use .val
Quote from W3Schools:
The content property is used with the :before and :after pseudo-elements, to insert generated content.
You don't have either of those, so the content is going nowhere.
#RobSchmuecker The OP wants the letter to be in the center. Also, your code skips the first letter.
I have created "myCanvas" div element dynamically and try to set styles to the div tag it throw the undefined exception. Please check my code and suggest me
// move the canvas, so it's contained by the same parent as the image
var imgParent = img.parentNode;
$('<div id="myCanvas">');
var can = $('myCanvas');
can.appendTo(imgParent);
// position it over the image
can.style.left = x + 'px'; //If set styles to can element, it's styles is undefined
What i did wrong here.. ? please anyone suggest me a right things..
Thanks,
Bharathi
Make is simple:
$('<div id="myCanvas">').appendTo(img.parentNode).css('left', x);
You don't need to select the myCanvas element because it hasn't been added to the DOM just yet (your selector wasn't right either). You can use this instead:
var imgParent = img.parentNode;
// By default when creating an element in jQuery, it returns an instance of the jQuery object created
var can = $('<div id="myCanvas">');
can.appendTo(imgParent);
can.style.left = x + 'px';
Replace
var can = $('myCanvas');
with
var can = $('#myCanvas');
[edit user="dholakiyaankit"]
QA asking for id not class
Antegias response should read
Replace ... with :
var can = $('#myCanvas');
as you have given it an id not a class, you cant select it in this way till its added to DOM, but you have a reference to it anyway in the variable can
I am taking the value of a select element and trying to modify it so that I can have access to the onscreen preview element that the select item represents. Here is the first part of the code...
$("#single_area_select").change(function(){
var $element = '#preview_' + $("#single_area_select").val().toLowerCase();
elementChangedOrSelected($element);
});
And the critical part of the elementChangedOrSelected() method...
function elementChangedOrSelected(element){
element = '$("' + element + '")';
alert(element);
var position = element.position();
alert(position);
My first alert makes it look like i've got it right (ie, $("#preview_title") ), but the second alert doesn't make an appearance which tells me that the position query is failing. Can anyone see something that I can't?
function elementChangedOrSelected(element){
element = $(element);
alert(element);
var position = element.position();
alert("left: " + position.left + ", top: " + position.top);
}
you just need to do this:
position = $(element).position();