Is there a javascript way to display or hide element title (defined as an html attribute), as if the mouse was hovering above said dom element, without actually involving the mouse?
Thanks in advance.
Not with native tooltips/titles. But there are jQuery plugins like this which let you cutomize and control them.
I would use an absolutely positioned DIV that looks like the native tooltip and contains the same text as an alternative. It should be fairly trivial to loop through all elements and create a DIV for each one that has a title attribute.
Very little hassle and no JavaScript plugins required.
You can make a tooltip layout (div with border) yourself, and show it when you want with jQuery. You can select a link element with a title like this:
a[title] {}
Related
Is it possible to highlight text in an HTML document using without wrapping it with <span> or any other tag for that matter?
For example, in the HTML code <p>The quick fox</p> I would like to highlight quick but without adding a DOM element around it. Adding a DOM element to a parent element is fine.
Thanks!
No, it is not possible.
You can't tell the browser to render a piece of text differently without inherently changing the DOM, regardless of whether you do it statically or dynamically (with Javascript, for example, as a post processing step).
It is possible if you use an absolutely positioned element with a transparent repeating background image or a transparent background color (using rgba or hsla) and position it over the selected area.
Another way to do it would be to have an absolutely positioned canvas element without a background that takes up the whole browser viewport and draw a transparent rectangle over the selection.
It's not possible.
If you just want no tags in the original source code, it might be possible by adding tags later using Javascript magic. You could do something like
<p highlight="quick">The quick fox</p>
and write a JQuery/Prototype/plain JS function to highlight it on the fly, but what for and why? If you elaborate a bit, someone may come up with an idea.
The only way to do this than I can imagine would be to use the <canvas> element, and render absolutely everything by hand.
I'm working with D3, and I'm trying to create two overlaid SVG elements and displaying only one at a time (a tab panel) but I really don't know how to overlay them.
I already tried to insert each SVG element into a < div> and set the display to inline, I also tried to directly set the SVG's display attribute to "inline" but none of these methods work, and now,I'm stuck !
Thank you in advance for your help !
You cannot use HTML elements like <div> inside an SVG. The CSS display property works in SVG, but only to turn the visibility of objects on and off. The value none will hide an element, but all of the other values (inline, block etc) make an element visible.
I have an AngularJS, JS, JQ, HTML5, CSS3 web app. Web interface is supposed to be divided into 2 parts and the first part should be resizable.
I would like to bind location of <preview> element from the first part to the location UNDER the top level of second part (location of "response" word on image) using jquery. So it looked something like this:
It should always be under the border line whenever it goes up or down.
Does anyone know how to solve this using JQuery? Every useful answer is highly appreciated and evaluated.
Thank you.
I might not understand the question but you could try creating a container div around all your HTML elements and giving it a float css property.
then you can cut/paste the element you want underneath to outside of your container and giving it the clear both css property
At the moment I've been using the css line-height property in the parent div to increase the line spacing, and this works fine for the text, and even <input> elements. The only problem is any custom controls like the JQuery spinner or Chosen will try to fill up this entire line height (as they're set to display:inline-block)
Currently it appears like this:
How do I get these widgets to appear the same height as the text? I mean the default <input> elements can, so surely it's possible?
Find the element class/id and on your own style.css you can customize it's property with !important But use of !important is not considered as a good practice. (But if there's issue on one-or-two places, i think that is Ok)
Another way can be, why not making changes on jquery ui css that you are linked to.
I have some scanned news paper and i want to dynamically generate div above the image. So when users click on specific DIV they are redirected to detail of that news.
How is it possible ?
One way of doing is to create Absoulute positioned div in front of the Image. But i dont want to create DIV for all scanned images. I am searching for some dynamic way. Plus! I am not looking for image Maps.
Example : http://www.express.com.pk/epaper/
This is an e-paper and they are using a single image on their background. Of course they are not creating static html pages each day and redefine their div positions
Edit: For my case i found my solution using Facebook Like Tagging jQuery Plugin.
Have one absolutely positioned <div> and move it around to whatever image is focused. Change the click effect of the div accordingly.
You will have a div containing the image, like this:
<div id="imageDiv">
<img ... />
</div>
And you will use jquery to create a div before the img in your click event:
$("#imageDiv").prepend("<div>created div before image</div>");
Unfortunately, for a variable layout such as a newspaper image, absolutely positioned divs are probably your best bet.
In this case, Javascript would likely cause more problems than it would solve: it isn't a necessity for what you want to achieve, and people with Javascript disabled will be unable to use your site.
One other possibility is to use a server-sided language to read a xml file that says where the divs should be placed over an image. This would allow for a dynamic html page, as only a xml (or similar) file would need to be altered to change content.
I can generate an example if you're interested in this solution.
A slightly easier way may be to use an image map. Here's a good resource with working examples.