I am implementing a closable <div> using pure CSS and not Javascript.
HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<style>
div.messages
{
padding: 10px;
background-image: none;
border: 1px solid transparent;
border-color: #bce8a1;
border-radius: 5px;
width: 300px;
}
div.messages:before
{
content: "\274C";
float: right;
cursor: pointer;
}
div.messages:active
{
height: 0px;
display: none;
}
</style>
</head>
<body>
<div class= "messages">
In publishing and graphic design, lorem ipsum is a filler text commonly used to demonstrate the graphic elements of a document or visual presentation. Replacing meaningful content that could be distracting with placeholder text may allow viewers to focus on graphic aspects such as font, typography, and page layout. It also reduces the need for the designer to come up with meaningful text, as they can instead use hastily generated lorem ipsum text.
</div>
</body>
</html>
The code works (sort of) but am having a few notes that I would like to ask for help with
The close works OK on Firefox; Chrome appears to close also but the <div> reappears as soon as the mouse is released
The <div> blinks whenever I click anywhere within its bounds. How do I make it remain showing?
The problem here is you are using :active to modify your div. Active is a css word reserved for mouse events on an element. I have myself never found need to use :active on a div. (In essence I use them for clickable objects ie. anchors, buttons). Now :active is also only applied when click is happening.
You'll notice clicking in the center of the div will also mike it shrink to height: 0px.
Solution:
-The proper solution would use js, toggled by a button, to apply a class to the div you want to shrink. The class will have height: 0; display:none;
-You could hack this using anchor with :active. But this is bad practice.(I will update with this when I get the chance)
Related
I was just wondering if I could make a circular image (transparent PNG), that only activates when you click the non-transparent part of it. Thanks in advance.
My code right now:
img {
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<body>
<img src="https://upload.wikimedia.org/wikipedia/en/9/98/Green_circle_filled.png" alt="circular image" onclick="alert('you can click anywhere in the border')">
</body>
</html>
To answer your question, No. What you desire is currently impossible with your current setup. If you'd like to restrict click events to the circle only, you have to first crop the image to have equal width and height, and then apply
border-radius: 50%;
This will ensure that the img element itself only takes up the same amount of space as the circle instead of just "containing a circle" (which is what your image does).
Although, this is the less preferred way. A better way would be to create an element that is a circle.
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: green;
}
<div> /* This the container */
<div class="circle" onclick="alert('You have clicked on the circle')"></div>
</div>
This has a number of benefits:
Your code is more readable
The functionality doesn't depend on a link to work (in this case, the Wikimedia link)
You may nest elements inside the circle as opposed to the image which is a self-closing element
An alternative would be to use and SVG as #j08691 suggested, but this would do exactly the same thing.
Recently I've encountered a few situations where I ended up using CSS hacks so that the user would be able to place a cursor for text editing in a previously position in a contenteditable div. My specific situation is close to what I have below:
div {
border: 1px solid blue;
padding: 5px;
margin: 10px;
}
p {
border: 1px solid green;
padding: 5px;
line-height: 4em;
min-height: 4em;
}
span {
visibility: hidden;
border: 1px solid red;
}
br:last-of-type {
display: none;
}
div.hack br:last-of-type {
display: inline-block;
height: 4em; // This seems to be necessary for the correct vertical alignment of the blinking input cursor
}
Using Google Chrome, Version 79.0.3945.130 (Official Build) (64-bit) Can't place the cursor here:
<div contenteditable="true">
<p>
<!-- This is an existing implementation. Hopefully someday I'll get to rewrite it. -->
<span> some hidden text for padding </span>
<!-- Can't put the cursor here for text input -->
<br />
</p>
</div>
But I can here:
<div class="hack" contenteditable="true">
<p>
<!-- This is an existing implementation. Hopefully someday I'll get to rewrite it. -->
<span> some hidden text for padding </span>
<!-- Can't put the cursor here for text input -->
<br />
</p>
</div>
My guess is that the issue is that there were no selectable inline elements in the paragraph, so the browser (I'm using Chrome) doesn't let the user place a cursor there. Setting the display style on the <br/> tag in the paragraph fixes this, but it feels hacky. This solution is fine for our purposes, but for future reference I'd like to know if there is any kind of specification for determining what is a valid text input position in a contenteditable div. I've done a bit of Googling and didn't find much, though it's possible I just don't know the correct wording for the question.
Side note - The structure of the document is an existing implementation, and I am not currently looking for alternatives for that. In particular, the <br/> tag is an implementation detail in a dependency and based on some of their Q&A stuff, that isn't likely to change.
On the following page, http://duncanmorley.com/ there are the following issues:
One cannot highlight text within the document
When a user hovers over an object with the ":hover" property applied,in the CSS file, the hover effect doesn't happen (See social icons at the top) (class="fb")
It seems that there is a transparent object over the page which is not allowing the user to interact with the elements. I'm unsure what this is, as there is nothing in the CSS file (that I can see) that suggests this is the issue.
I believe these issues are likely the result of one problem.
text-indent: -99999999px; causes the issue here because it will modify the area hover works, too.
Fix for the Facebook share button (an example)
Remove the text-indent style from the fb class and change <li class="fb">Facebook</li> to <li class="fb"><span class="hide">Facebook</span></li>
Now you can style the text the sr-only way:
.hide {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
At the end you should get the same effect, the "Facebook" text will be hidden for the visual presence and the hover effect will work on the entire element.
Oddly enough, your text-indent is too large. If you make it -9999999px instead, Chrome seems to like it better.
I have CSS with an image
.backgroundImg {
background: url('./path/file.gif');
background-repeat: no repeat;
width: 24px;
height: 24px;
}
.ui-highlight {
border: 2px solid green;
color: #363636;
padding: 0.7em;
}
I have div tag which imports this class
<div class="ui-highlight ui-corner-all">
<div class="backgroundImg" style="float:left;">
some text.........
</div>
</div>
EDIT
I am trying to achieve a bordered box with image on the left and text on the right of the image. I inspected the element and the image shows up when I hover over the ui-highlight class
I know css and honestly I am not a pro at it. Can someone help me why the image doesn't show up
UPDATE
After adding width and height to the backgroundImg class the image is visible.
The first thing I would do is use Firebug for Firefox or the Developer Tools in a Webkit browser to inspect your situation.
Right-click on "some text...." and choose Inspect Element.
In the HTML inspector click on the div with the class "backgroundImg"
On the right hand side you should see the CSS inspector for this element. Hover your mouse over ('./path/file.gif') and see if the image thumbnail loads. If it doesn't you may have the path set-up incorrectly.
Hover over the div in the HTML inspector and see how it highlights on the page. It may be that your div isn't taking up enough space to reveal the image. If this is the case you'll need to set a width/height or put more content in the div to fill it out.
The jQuery UI classes on your parent div (ui-highlight ui-corner-all) might be setting some styles that obscure the image in the child div. Make sure to inspect this with the HTML/CSS inspector as well.
What you're trying to do from your code is give the text with the background of the image. It works, but not in the way you're intending. Replace the backgroundImg div with an tag in the HTML, with the "align='top'" element. The code I've got is:
<html>
<head>
<style type="text/css">
.ui-highlight {
border: 2px solid green;
color: #363636;
padding: 0.7em;
}
</style>
</head>
<body>
<div class="ui-highlight">
<img src="path/img.gif" style="padding:0px;" align="top">
some text.........
</br>
</div>
</body>
</html>
Try using an absolute path:
background: url('/path/from/root/file.gif')
Or:
background: url('http://example.com/path/from/root/file.gif')
This ensures that there is no ambiguity as to where the image is coming from.
First of all i would advise you to apply some sort of clearfix. The easy way would be to add overflow:hidden; to your .ui-highlight. This is required to give the wrapper some height. DDo some searching on clearfix for the how and why.
Second a would check if the image is actually getting loaded, your path might be wrong. Checking it in the code inspector from Chrome would be the way for me.
There's nothing syntactically with your CSS which leads me to believe that the image is not where you specify in your CSS. Try an absolute URL or a path relative to the CSS file itself.
However: I'm not sure you're going to get the results you're looking for with this CSS, though. If you try changing
background: url('./path/file.gif');
to
background: #f00;
you can preview what you're going to get when you get the image url worked out.
Since you say that you're trying to get "a bordered box with image on the left and text on the right of the image" you might try something like this:
CSS:
.ui-highlight {
background: url('http://www.site.com/file.gif') top left no-repeat;
border: 2px solid green;
color: #363636;
padding: 0.7em;
padding-left: 90px; /* This should be the width of the background image */
}
HTML:
<div class="ui-highlight">
some text.........
</div>
That would draw a border around the div, add a background image to the top left of the div, then write the text to the right of that image.
I'm trying to replace <img> elements with emoticons with different images through CSS (so that I can match them to the style being used). I thought that I can just insert another smiley with the :before CSS pseudo-element, and hide the original element. This would work, except that the browsers don't seem to insert the extra image! This only happens if I try it with an <img> element, works perfectly when I try it with <span>. The code I tried:
<!doctype html>
<style>
img.icon:before {
display: inline-block;
content: url(smiley.png);
width: 16px;
height: 16px;
}
</style>
<p>Lorem ipsum <img src="smiley.png" class="icon" alt=":)"> dolor sit amet...</p>
The specification at http://www.w3.org/TR/CSS2/generate.html#before-after-content has a note at the bottom:
Note. This specification does not
fully define the interaction of
:before and :after with replaced
elements (such as IMG in HTML). This
will be defined in more detail in a
future specification.
We are using a background image, like it is suggested in the comments, but that has the problem that the images won't print with default printing settings then. The next option we are considering is using <span class="icon"><img ...></span> and putting the :before on the span, but it's a little ugly.
I also wonder if this is specified in CSS3 so that there is a chance for fixing it in the near future.
It's almost certainly easier to use:
img.icon:before {
display: inline-block;
background-image: transparent url(smiley.png) 0 0 no-repeat;
width: 16px;
height: 16px;
}
You might not want to use background-image, but the :before and :after psuedo-elements are already poorly implemented; trying to use content to place images is probably a step too far at this stage.
I'm not sure I see the point of this approach, though; it seems you'll end with two versions of smiley.png next to each other. This might be more easily implemented (replacing the generic smiley.png with a themed smiley.png) on the server-side, than client.
Another way to do this is just set a background-image and hide the img element with overflow, without using :before:
<style>
.icon {
width: 0;
height: 0;
padding-top: 16px;
padding-left: 16px;
overflow: hidden;
background-position: 0 0;
background-repeat: no-repeat;
}
.smiley { background-image: url(smiley.png); }
</style>
<img class="icon smiley" src="smiley.png" alt=":)">
Also, have a look at this article about using data attributes instead of classes for this.