OKay first off this is really really similiar to the http://dribbble.com homepage.
In the simplest form possible. I have an image, and i'm trying to CSS it so that when i hover over the image, a DIV shows up with some text and a partially transparent background color.
I have no idea how to do this..
Here is a start. IE6 won't do this, unless you make the parent an anchor (a).
HTML
<div class="container">
<img src="something.jpg" alt="" />
<div>some text</div>
</div>
CSS
.container div {
display: none;
opacity: 0.7; /* look into cross browser transparency */
}
.container:hover div {
display: block;
}
#alex, I think he wants the text to appear over the image, not under it. Two ways to fix this:
Add position:absolute to the div containing the text.
Use a background-image instead of an img tag.
I'd go with 1, as it's better semantically and better for accessibility to use img tags for content-bearing images.
If what you want to obtain is an effect like that on Dribbble page, then you do not need to create a div over an img.
It's sufficient to have 2 versions of the image, one normal and one desaturated and with luminosity increased (or something like that, to give the impression of "transparency").
Now you create a div with the image as background and on mouseover you switch background and add the text.
On mouseout you revert the changes.
EDIT: Of course in practice you will dynamically assign the images name (e.g. with PHP), but that's another story. You may even automagically generate the "transparent" image by using GD libraries I guess.
A little example:
CSS:
.squareImg
{
display: block;
width: 100px;
height: 100px;
background-image: url("100x100.jpg");
}
.squareImgOver
{
display: block;
width: 100px;
height: 100px;
background-image: url("100x100transp.jpg");
}
HTML
<div id="mydiv" class="squareImg" onmouseover="writeText();"
onmouseout="eraseText()"></div>
JS
function writeText()
{
var d = document.getElementById("mydiv");
d.className = "squareImgOver";
d.innerHTML = "something here!";
}
function eraseText()
{
var d = document.getElementById("mydiv");
d.className = "squareImg";
d.innerHTML = "";
}
</script>
I suggest using jQuery as it's easy to say "mouseover" triggers another thing to show up.
Related
I am making a canvas on my website that you can draw on. To achive this effect I draw a fillRect everytime the mouse moves, at the mouseposition. Everithin works fine but when i try to add a background image, it hides everything. I tried using canvas.drawImage();
Then I found that you can add Background image from CSS, using: background:url(pic1.jpg);
This workes fine, but I dont want to the image to be there from load, but load when the user clickes a button. Anny Idea how to do this? Can I call the CSS from Java like you can from HTML, or is there another way. Thanks for answers
You can use JavaScript to programmatically set the CSS that defines the background.
var img = "some_image.png";
element.style.backgroundImage = "url(" + img + ")";
Make sure to change the element with the actual HTML element you want to set the background image on.
You can use HTML DOM to do this like the code below
<button type="button"
onclick="document.getElementById('id').style.backgroundImage = "url('image.png')"">
Click Me!</button>
You need something like that:
handling the event (in thi example click)
Append the new css property to the element target
function appendImg() {
document.getElementById('result').style.backgroundImage = 'url(http://4.bp.blogspot.com/-Q13U4dlElI8/VSW78iey57I/AAAAAAAAI7k/HO3zYPaRYso/s1600/img_john_lennon2-500.jpg)';
}
#result {
width: 500px;
height: 400px;
background-size: 100% auto;
background-repeat: no-repeat;
visibility: visible;
}
<button onclick="appendImg()">Imagine</button>
<hr>
<div id="result"></div>
There is a website that I would like to print the div content of. The problem is that the div is scrollable and I'm not able to print all the content. I've tried display:none on all the divs except the one I want to print and then used the Awesome Screenshot extension for Google Chrome but it won't scroll just that div.
I've read about using Javascript in the HTML, I'm guessing, but I don't know how to use that code. It's not my website so how do I inject that code so that it will print the content?
I'm not sure what website you're using - but in IE you can open up F12 Developer tools, find the div you want to display, and modify the style on the fly:
{
display: block;
width: auto;
height: auto;
overflow: visible;
}
It would then cause the div to display all it's content, without scrollbars... hopefully this helps!
Without seeing the page or knowing its layout, it's hard to know what to suggest that won't look horrible.
But, if hiding all other content (in a print stylesheet, I assume) works, you may then be able add:
#media only print {
#idOfYourDiv {
width: auto;
height: auto;
overflow: visible;
}
}
to show all the contents at once.
Make all parents visible
I've struggled some hours with this and finally noticed the problem was that some of the parent tags where preventing the div to be fully visible, and instead a scrollbar from some parent tags was being visible on the print.
So the final effective solution was to apply all the rules (mentioned in other answers) to all possible parent tags that could be in the middle, including also an !important rule so they wouldn't be bypassed.
Like this:
#media print {
body, .CLASS-of-parent-tag, #ID-of-div-with-long-content {
display: block !important;
position: relative !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
margin-left: 0 !important;
}
}
This applies for almost any case in my projects.
**DANGEROUS APPROACH**
Use this JS function:
Printable DIV is div1
function printpage(){
var originalContents = document.body.innerHTML;
var printReport= document.getElementById('div1').innerHTML;
document.body.innerHTML = printReport;
window.print();
document.body.innerHTML = originalContents;
}
My answer is based on the ones given by #Porschiey and #Paul Roub with a slight addition.
Their given solution did work for me in most cases except for some where the <div> that I wanted to print had a CSS set to position: fixed. In the resulting print, this would usually contain only the content that was able to fit in the actual size of the <div> on the loaded page.
So, I also had to change the position CSS attribute to something like relative so that everything could get printed. So, the resulting CSS that worked for me is this:-
{
display: block; /* Not really needed in all cases */
position: relative;
width: auto;
height: auto;
overflow: visible;
}
Google messages updated their divs. Use this:
(function() {
var originalContents = document.body.innerHTML;
var printReport= document.querySelector("body > mw-app > mw-bootstrap > div > main > mw-main-container > div > mw-conversation-container > div > div > div > mws-messages-list")
document.body.innerHTML = printReport.innerHTML;
document.body.style.display = 'block';
document.body.style.overflow = 'visible';
window.print();
document.body.innerHTML = originalContents;
}())
In case if someone just want to print the scrollable list, use your mouse to select the scrollable list, right click on selected content and print. Ctrl+A or select all or just right click without selection might not work, so you must select the list from start to end to be able to print on multiple pages
Why won't this work?
Using cuepoint.js; you can define cue points within the html5 video.
But; I'd like to; in addition display a #div on click. And ONLY on click.
Once the video resumes; or the image is clicked again; the video resumes and the #div will disappear!!!!
#playdiv1 {
display: none;
}
$('#1').click(function() {
cuepoint.setTime(1)();
$("playdiv1").style.display = "block"; // Why wont this work?
});
This div should show along with the que:
<div id="playdiv1" style="min-height: 300px; min-width: 500px; display: hidden;">
</div>
Library in reference;
http://cuepoint.org/
FULL CODE ~
http://pastebin.com/HG0wVVaK
This doesn't make sense. THE cuepoint time; works..
$('#1').click(function(){
cuepoint.setTime(0)();
But when I add the '$('#playdiv1').show();' right underneath it. It doesn't work?
$('#1').click(function(){
cuepoint.setTime(0)();
$('#playdiv1').show();
});
Your selector is wrong.
Your code, $("playdiv1"), matches elements of type <playdiv1></playdiv1>, which isn't what you want.
The correct code, $("#playdiv1"), selects the element with id playdiv1.
You're also attempting to set the style attribute on the jQuery wrapper around the element. You need to either use the .show method, or access the first matched element.
Either of these will work:
$('#playdiv1').show();
// or
$('#playdiv1')[0].style.display = "block";
Since you have the CSS hiding the playdiv1 you do not need a display declaration inline with your HTML, so remove that -
<div id="playdiv1" style="min-height: 300px; min-width: 500px;">
and change the jQuery to
$('#playdiv1').show();
You can use this...
$('#1').on('click', function() {
cuepoint.setTime(1)();
$("#playdiv1").show();
});
And remove display: hidden; of the style property in the <div> tag...
Switching the order somehow worked;
$('#1').click(function(){
$('#playdiv1').show();
cuepoint.setTime(0)(); // Having this at the bottom; or after the show.
});
I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.
Assuming that you don't want to use any JavaScript library (which is odd).
See: http://jsfiddle.net/JUtcX/
HTML:
<div id="content"></div>
CSS:
#content {
border: 1px solid red;
height: 1em;
padding: 2px; /* adjust to taste */
overflow: hidden
}
JavaScript:
document.getElementById("content").onclick = function() {
this.style.height = 'auto';
}
Alternatively, if you would like to use a JavaScript framework such as jQuery, you can animate it.
See: http://jsfiddle.net/JUtcX/2/
$('#content').click(function() {
var reducedHeight = $(this).height();
$(this).css('height', 'auto');
var fullHeight = $(this).height();
$(this).height(reducedHeight);
$(this).animate({height: fullHeight}, 500);
});
This is easily done using CSS + JavaScript. You just need to set the height of the div to the height of a single line, and hide all overflow. Then when the user clicks on the div, use a nice animation handler to perform a blind-down or other similar effect to show the full contents of the div.
Here is a very basic example (no animation): http://jsfiddle.net/9Lw6T/
$(document).on('click', '.collapsible', function () {
$(this).toggleClass('collapsed');
});
p {
cursor: pointer;
}
.collapsed {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>
<p class="collapsible">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>
<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>
<div id='a' onclick='toggletext'>first line<br /></div>
function toggletext(){
var html= document.getElementById('a').innerHTML;
if(html=='first line<br />'){
html = 'first line<br />next lines<br />next lines<br />';
}else{
html = 'first line<br />';
}
document.getElementById('a').innerHTML = html
}
this can be optimized and can be made to use one of the common libs
You could do this with some jQuery.
<div id="a">
<span id="first">This is the first line (read more)</span>
<br />
<span id="rest">This is the rest of the text</span>
</div>
script
$('#rest').hide();
$('#first').click(function(){
$('#rest').show();
});
http://jsfiddle.net/jasongennaro/dC32A/
In CSS set the size of the div to size of the line (important: you might need to use line spacing attribute to get proper padding on the bottom with second line).
I don't know about clicking, but you can use :hover in CSS to change the style (reset line spacing, reset div size and overflow to proper values) to get on hover-show effect.
Or you can use JavaScript and change that CSS on click (easy to do with jQuery).
Posting my comment as an answer:
Another approach could be, defining the class height: 1em; overflow-y: hidden; and then adding/removing it on click with javascript.
Or maybe you could also handle it in the :active-pseudo-class by wrapping your <div> with an <a>-tag, so no javascript would be needed. But then the div would collapse again on losing focus.
This will be sufficient:
To hide all but the first line:
var theDiv = document.getElementById('theDiv');
theDiv.style.overflowY = 'hidden';
theDiv.style.height = '1em';
To show all the text:
var theDiv = document.getElementById('theDiv');
theDiv.style.overflowY = 'visible';
theDiv.style.height = 'auto';
Or, if you were to use jQuery:
$('#theDiv').css({ height: '1em', overflowY: 'hidden' });
$('#theDiv').css({ height: 'auto', overflowY: 'visible' });
Setting the hide of the div to 1em and then exapnd it onclick is the solution.
Check this. I haven't used any JS library.
CSS
.expandable{
height:1.2em;
overflow:hidden;
}
HTML
<div class="expandable" onclick="expand(this)">Your text here</div>
JS
window.expand = function(el) {
el.style.height = "auto";
}
Here is the fiddle
http://jsfiddle.net/RwM8S/1/
I've come across an interesting problem in the following line of code:
<img style="background-image:url(Resources/bar.png); width: 300px; height: 50px;"/>
In Safari (at least), a gray border surrounds the 300x50px area. Adding style="border: none;" doesn't remove it. Any ideas?
Thanks.
Mike
So, you have an img element that doesn't have a src attribute, but it does have a background-image style applied.
I'd say that the gray border is the 'placeholder' for where the image would be, if you'd specified a src attribute.
If you don't want a 'foreground' image, then don't use an img tag - you've already stated that changing to a div solves the problem, why not go with that solution?
You can also add a blank image as a place holder:
img.src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw=='
This should do the trick!
Actually, this seems to work at least on Chrome:
img {
content: "";
}
The following will use css to set the src to a tiny transparent image which solves the src attribute issue while maintaining control from image:
content:url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')
My overall approach is to define the following in my reset.css, then use a class to provide the actual image and control it. This behaves just like an img, but is entirely css controlled.
img {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
*display: inline;
vertical-align: middle;
*
vertical-align: auto;
font: 0/0 serif;
text-shadow: none;
color: transparent;
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
box-sizing: border-box;
}
img:not([src]) {
content: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}
.myuniqueimage {
background-image: url('../images/foobar.png');
height: 240px;
}
Thanks to +programming_historian and +binnyb for the data:image tip
try <img border="0" />
That should do the trick.
EDIT
Sorry I see you are doing something very wrong.. you are setting a background image on a img tag.. that doesn't really make sense...
instead of a imagetag use a
<div style="background-image: url(Resources/bar.png);"></div>
or if it is a image you want in that area use a
<img src="Resources/bar.png" border="0" Width="500px" Height="300" />
img tags need a src attribute.
e.g.,
<img src="Resources/bar.png" alt="bar" width="300" height="50" />
But img is only for inline (foreground) images. If you actually want the image to be a background of something, you need to apply the style to the actual element you want it to be the background of:
<div style="background-image:url(Resources/bar.png);">...</div>
Tried setting the border to 0px?
EDIT: Yes, you are meant to have background images in the css of another class. Doing it in div or in the body tag (depending what your trying to do) will work. It also stops the background image being a element in itself which would screw the flow of the elements on the page and mess your positioning up.
<div class="myDivClass">content to go on TOP of the background image</div>
CSS:
.myDiVClass
{
background: url(Resources/bar.png) no-repeat;
width: 300px;
height: 50px;
}
or
<div class="myDivClass" style="background: url(Resources/bar.png) no-repeat; width: 300px; height: 50px;">content to go on TOP of the background image</div>
It's best to keep CSS seperate as it otherwise defeats part of the point though.
I had a similar issue where my initial HTML had an IMAGE tag with no source. My Javascript determined which image to show. However before the image was loaded the user saw the placeholder box.
<img id="myImage">
My fix was to update the initial image tag CSS to
#myImage {
display:none;
}
And then used a JQuery to show it once its content was loaded.
$('#myImage')
.attr('src', "/img/" + dynamicImage + '.png')
.fadeTo(500, 1);
Try setting this instead of background-image:
background: url(Resources/bar.png) no-repeat;
if is happening only in Safari and not in other browsers try to reset the browser CSS using something like YUI CSS RESET
The correct way it would be to separate the css from code and to have a CSS class for the image.
<img src='whatever.png' alt='whatever' class='className' />
and in the css to define what className looks like.
,className {border:0;}
I know this is an old question but I found this useful..
In the case that your Resources/bar.png is a foreground image in the form of a sprite, it makes sense to use an img tag rather than a div. When you do this it can help to have a 1px transparent image file which you use for the src attribute, then set the background image as you do here e.g.
<img src="transparent.png" style="background: url(sprite.png) x y" />
Here you set x and y to be the pixel position on the sprite that you want the image to start at. This technique is also explained at: http://www.w3schools.com/css/css_image_sprites.asp
Of course the downside of this is that there is an extra request, but it you're always using the same transparent image for you sprites it's not a massive deal.
Try this one, it worked for me(on chrome and Safari). That was not the border but the shadow, so please add this line to the tag:
{-webkit-box-shadow:none;}
Hope it works for you too.
add an empty src="" to your image component if your using as a background-image in css the square will disappear
<image class=${styles.moneyIcon} src="" ></image>