I haven't worked much with Javascript, but I have a rough idea of how to make an image rollover to another image. I'm trying to make an image that, when moused over, will become a transparent background to a block of text that will occupy the space the image occupied. I've seen lots of tutorials but nothing matching quite that.
Also: is there any way to format this text with css or otherwise? (Like adding padding, line breaks, etc.)
Any help or links to a site where I can figure it out would be greatly appreciated! Thanks!
This fiddle is a pure css implementation that changes the opacity of an image placed in front of the text on hover. To do this I used put the text and image containers both within a container div and set position: absolute so that they overlap. I then change the opacity of the image by using the :hover selector. Since the text is behind the image, it can't be selected. Let me know if this what your looking for, and specify what you would like differently if it isn't :)
If you want the text to stay after the mouseover, you could use javascript to toggle a class on the rollover and add some text. E.g., put an image as the background to a div with some class (e.g., class="solid-image"). When you want to change the element, just change the class (e.g., with myElement.className="translucent-image") and then you can either have text that was previously invisible or you can add text to the div (so long as it doesn't have children) by using the textContent or innerText element. E.g.:
text = "textContent" in document ? "textContent" : "innerText";
myDomElement[text] = "My text here";
And then add an event listener for the appropriate events.
Related
I am a very new (see: about a week) CSS user trying to do something that I think is pretty simple. I'm trying to (in a paragraph of text) post an image that is a help icon, that will display more information when you hover over it.
I'm having a bit of a problem with getting my divs to align correctly. I'd like the div containing the picture to only trigger when you hover over the help icon itself, not the entire line it's on. On my code (although not exactly in jsfiddle), I can do this with positioning it absolutely, however this causes the text below it to be overlapped when you use the hover. If I position it any other way, it doesn't overlap, but it isn't fit to the picture. It's back to only working on the entire line.
Is there a way to both fit a div to its contents (a small ~25x25 help icon) and then cause the hover below to not overlap what's under it? I'm trying to keep it on just css.
http://jsfiddle.net/YbGE6/ <--- Very basic jsfiddle format.
<div id = "Big">
<div id = "one"> "Hover" <div id="two"> "Hover text" </div></div></div>
Change the CSS for the div with the help icon to include display: inline-block;, which will cause it to fit its contents. div is by default display: block; which stretches across the entire line. Do not position the div absolutely, use the default static position, and have it float to wherever you want. The text will flow around it, and when the size of the help div changes on hover, it will push the text aside and the text will reflow around it.
Here is some documentation for float: https://developer.mozilla.org/en-US/docs/Web/CSS/float
Here's the thing. I can get selected text with that solution: How to replace selected text with html in a contenteditable element?
But now i have a problem. I'm adding to website divs with different colors to mark some parts of page (i'm setting just position=absolute, top, left, width, height, backgroundColor and opacity) and now when i want to select marked text, selected is that div (which i guess have higher z-index or something else is placing it over other html). And now when i want to get selected text i'm getting nothing. Not even that div. Just null... Any idea how can i get text covered by that div?
And all these things i'm doing in UIWebView component in iOS but that's not relevant, i think.
My document looks like this:
Basically the background is one full-screen, transparent div. There are couple problems...if I just create the background div and don't apply any z-index to it, it ends up being on top of everything, and I cannot click on the box. If I set the z-index of the background div to be below the box, I can't seem to click on the background. What I want to do, it to be able to click both on the box, and the background.
var x = document.getElementById("bg");
x.addEventListener("click",reset,false);
function reset() {
alert("reset was clicked");
}
CLARIFICATION: box is on the same node level as the bg. it is not inside the bg div.
Take a look at this jQuery plugin - even if it doesn't solve your particular question the code could provide insight into your dilemma.
jQuery clickoutside
You must post your code so every one can help you. My test work correctly on Firefox and Chrome. If I'm guessing right, the background in your code isn't expanded. Try to remove html, body { width:100%; height:100%; } in my example to see the problem.
On IE browser, you need to use a transparent gif image as background of the background div, otherwise the background div may be unable to receive mouse click event.
This problem was not solved.. it was just evaded.. so dont use this as reference
what i have is
<div>
<img onclick='this.style.display="none";this.parentNode.getElementsByTagName("div")[0].style.display="block";this.parentNode.getElementsByTagName("div")[0].style.width=this.offsetWidth+"px";this.parentNode.getElementsByTagName("div")[0].style.height=this.height+"px";' src='http://static.***.pl/cache/***.pl/math/cafc682a15c9c6f1b7bb41eb004d6c45935cbf06434221f7201665f85242cb94.png'/>
<div onclick='this.style.display="none";this.parentNode.getElementsByTagName("img")[0].style.display="inline";' style='display:none'>
<pre style='width:100%;height:100%;'>
\lim_{t\to\infty}\int\limits_1^{t} \frac{1}{x^2}\,dx=\lim_{t\to\infty}\left(-\frac{1}{x}\right)\bigg|_1^t=\lim_{t\to\infty}\left(-\frac{1}{t}-\left(-\frac{1}{1}\right)\right)=\kappa=1880154404
</pre>
</div>
</div>
yes i know its ugly but well..
my problem is when i click the image it does what i want but if i then click the div it only works if i click on the text and i want it to work for the full div !
i dont want to use document.getElementById etc...
there will be multiple instances of this code and it will be in unknown places.
i really dont want to write up bloated code to do this (this includes jQuery,flash,.NET, Zend Engine etc etc...)
my question is simple :
why the hell does it work only if i click on text and how to fire onclick for the whole div
In your original Javascript action, you were setting the width and height of your div to zero, which means that there is no area to click on.
Here is a demo: http://jsfiddle.net/audetwebdesign/ndKqM/
which should demonstrate the fix. I added some background color and padding to show the dimensions of the various boxes.
I removed the parts of the JS that calculated width and height and that fixed the issue.
If you click on the lime green area that holds your text, the action works.
Unless there is some other reason, you don't need to adjust width or height.
It's hard to tell what behavior you really want.
You are setting the image to display:none, and then you set the style.height and style.width of the sibling div to image.height and image.width. So - those will both be zero (as display:none is set for the image).
Do yourself a favor and set background colors or borders for your divs so you can see what's going on as you code.
Use an A tag with your onclick event and a null URL href="javascript://" instead of a DIV
I got a div with some text and a link tag in it, when i click on the link i would like to have an overlay over the div so the opacity is set to .3 or something and have a little form put over it. Does anyone know how to approach this in jquery?
You can use my elementOverlay plugin:
var overlay = $('#yourDiv').elementOverlay();
// some code
overlay.elementOverlay('hide');
Plugin code: https://github.com/jgauffin/griffin.jquery.tools/blob/master/Source/Plugins/jquery.griffin.elementoverlay.js
Just make a div of a fixed size, width and position (the same and place as the original) and set It's background color to slightly transparent.