I have a table, but it is not in a list format, meaning not a column/row format. I look for specific cells to add a hover event that displays a description of the cell.
$("#TableID td").hover(function(){
//ifCellThatIWant
$(this).append("<span>Message that was brought in</span>");
},
function(){
$(this).children().remove();
});
The problem is right now is that the hover displays a span(with info. inside) that I used jquery to append the span to the cell when mouseover, which expands the cell, which is an effect that I don't like or want. I'm Trying to have an out of the table look,but still be by the cell that triggered the event; because if the span has a lot of info. in it, expanding the cell dynamically will start to look pretty nasty. Also will help if I had some type of css direction on how will I make the display for the mouseover "description" span look nice. My mind thought is that a way to accomplish what I want is giver the appended span the position of my mouse cursor when hover, but not sure if its the right approach or what the syntax would look like.
Make the span display as block and set the z-index greater than anything else on the page. Then you can absolute position it and set the left and top properties to the x and y positions of the mouse location.
EDIT:
Here's a demo of what I mean --> http://jsbin.com/odape. Instead of appending a span, I would suggest just creating a placeholder one at the bottom of your html to use for each cell and just change the text to display (not sure how you were bringing it in so I didn't add it in my example.
Related
all. I'm a beginner trying to create my own website.
For an input field, I want the text to appear behind horizontal lines. To achieve this, I created a container div element with many sub divs each two pixels high with a bottom border of one pixel, then placed the container div in front of the input field.
The problem is that when hovering over the input field, the cursor only changes into the "text" style cursor in the small area at the very left edge of the input field not covered by the horizontal lines created by the sub div elements.
What I would like to happen, and I fear I may need Javascript, is to have the cursor, when hovering over the container div's horizontal lines, turn into the "text" cursor and when clicked for the focus to activate within the input field.
I hope my question isn't confusing. Thank you in advance.
Add this CSS to your div with horizontal lines:
pointer-events: none;
This indicates that your div element should not become the target of mouse events, effectively letting them "pass through" it.
For more information, see the MDN article on pointer-events.
Assuming that I'm understanding your question, you do need to use JavaScript. Using jQuery you can do the following:
$('.horizontalLines').click(function() {
$('.inputField').focus();
});
This just makes it so that clicking one div will select the text input box.
I created a poc of the given link http://bl.ocks.org/mbostock/4061502, but i wish to display it horizontal instead of vertical.
I was wondering if that can be done using rotate method, so i tried this:-
d3.select("body").selectAll("svg.box").attr("transform", "rotate(90)");
The mark up given below changes are only the attribute is added but the svg element is still vertical.
Earlier:
The box element
Later:
The box element
Where am i going wrong?
I making bookReader and one page will fit to user viewport. For this approach i make div
<div id="book">Long text...</div>
with
#book {
overflow: hidden
}
Then i provide to scroll this element only with buttons next and prev. When user click next button it will scroll like this
$('#next').on('click',function(){
$('#book').scrollTop($('#book').scrollTop() + $('#book').height());
});
But i have problem. That some times user will see part of text-line. How can i check every page is that last text-line is shown broken, and hide them if him is broken. I don't want to change content. I need a function that will check every page if that contains that part text and if this have that part text, hide him by making on the top element that should hide that.
DEMO: I show in red color what i need find and hide.
http://jsfiddle.net/lvivgeorge/jd7mum6c/3/
DEMO 2: It can contains anything (header tags, img, <code> , etc.)
http://jsfiddle.net/lvivgeorge/jd7mum6c/12/
P.S. Make all the same line-height is not solution. Change content styles is not solution too.
IMHO You should set fixed line-height of each text line, and set container height fixed as a multiple height of each textline. This should helps
Check this out: http://jsfiddle.net/jd7mum6c/5/
http://desandro.com/demo/masonry/docs/
I got this to display nicely. But,
How can I modify this plugin so that when someone clicks an object, it does the nice "re-ordering" effect as seen in: http://desandro.com/demo/masonry/docs/filtering.html#demo
And it moves the object "X" positions up or down the list?
Is it easy to modify this to do that?
From the moment that all elements has float:left; when the user click the button hide the element with specific classes, for example if he clicks grey, then will hide red and black. In jquery the above example would be like this:
$(document).ready(function(){
$("#grey-button").click(function(){
$(".red, .black").hide()
});
});
This will hide all elements with classes red and black, adding the css property display and value none.
This will make the browser don't "see" them, so the rest elements will be positioned in a different place, according the floats you have set for them.
So I have created a simple calendar (http://www.akapa.org/newsite/events/calendar.htm) and I have a bunch of "More Info" buttons I made from cells. In a table cell to the right are a bunch of hidden DIV's that all appear when you rollover a "More Info" button, obviously giving more details about the calendar date/event.
My problem is that I have to give an exact "top" css position to every one of these hidden div's every single time I add a new event to the calendar. I want to dynamically tell each hidden div to match the "top" css position to match the top position of each "More Info" button. How do I do that?
You should use jQuery; it makes Javascript much easier.
Using jQuery, you can write the following:
$('#' + popupId).top($('#'+tdId).offset().top);