I have a question regarding image alignment with CSS. For example I have created a css class as below:
.link {
background: url("images/image1.gif") scroll right;
}
and below is the markup
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<p class="link">This is a link</p>
</head>
<body>
</body>
</html>
When I check in the browser I get the image on the text. I want it after the text i mean
This is a link (this is where I want the image to appear)
Try
.link {
background: url("images/image1.gif") top right no-repeat;
padding-right: 32px; /* or the width of your image */
}
Not sure if I understand right, but assuming you trying to display image right after text ends you might try something like that:
.link {
background: url("images/image1.gif") scroll right;
padding-right: 20px; /* adjust to fit nicely with your design */
}
hope it helps :)
shouldn't it be position right not scroll right?
You can also give the link text some padding to clear the background picture.
Related
*To the reader looking from help: Each of the first 4 solutions worked for me, and the suggested question shows potential. I picked Hunsnul Amand's code because it allows for easy expansion of colors in a JavaScript string, and toggles through all three colors mentioned in the problem below. I like the way this sets up the possibility of additional or random colors later. The other three solutions on this page rely on various snippets of JavaScript toggling between additional classes made in CSS. Ranjeep and Keith's snippets use this in very simple and clean code that's easy to follow. Jateen makes use of the .toggle and ++> elements, which are useful as well. His code was also easy to follow. *
Thank You for checking this out. I'm trying to do something that seems like a very basic skill, but am having trouble finding the specific syntax or code that will cause a webpage to repeatedly toggle the background color of a circular div on a click rather than on a button using Vanilla JavaScript. I've tried too many iterations to post here, and received various effects from trying to modify similar projects to my needs, but haven't been able to get the div's background color to toggle.
background: I started with a sample project that lets you cause a div shaped in a circle with a red background to disappear by setting the background color to "none." I'd like to change the code to something that will instead allow a repeated toggle of the circular div's background color between either red to blue, or at least from red to none and back again.
<!-- This document should let you toggle a circle's color between
red and blue using vanilla JavaScript, HTML, and CSS.
The circle is an HTML div shaped and colored in CSS,
and given the toggle function that changes the div's color
in JavaScript.
Biggest need: A JavaScript toggle funciton that alternates
the color of a div when the user clicks on the div.-->
Mini Challenge: Disappearing Circles
minichallenge.html!
<!doctype html>
<html>
<head>
<title>Learning Javascript</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#circle {
width:200px;
height:200px;
border-radius:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="circle"></div>
<script type="text/javascript">
/*original JavaScript Project*/
document.getElementById("circle").onclick=function() {
document.getElementById("circle").style.display="none";
}
/* New JS: Purpose: A JavaScript toggle funciton that alternates
the color of a div when the user clicks on the div.-
var userClick = document.getElementById("circle").onclick=function() {
var noDiv = document.getElementById("circle").style.display="blue";
var redDiv = document.getElementById("circle").style.display="red";
-Pseudocode-:
if userClick
noDiv
else redDiv; */
</script>
</body>
</html>
Thanks Again.
Here is one of many solutions. In your script try this.
let i = 0;
const colors = ["blue", "red", "transparent"];
document.getElementById("circle").onclick = function () {
document.getElementById("circle").style.backgroundColor = colors[i];
i++;
if (i == colors.length) i = 0;
};
This way you can add as many colors as want to the colors array and it will work.
You can create a .bg-none class in you css. Then toggle that class onclick of the element. I have updated the code, please chekc
<style>
.bg-none{
background-color: transparent !important;
}
</style>
<script>
document.getElementById("circle").onclick=function() {
document.getElementById("circle").classList.toggle("bg-none");
}
</script>
Using CSS here, and the classList toggle method is the simplest way.
eg.
document.getElementById("circle").onclick=function() {
document.getElementById("circle").classList.toggle('toggle');
}
#circle {
width:200px;
height:200px;
border-radius:100px;
background-color:red;
}
#circle.toggle {
background-color:blue;
}
<div id="circle"></div>
I have moved your background-color CSS to 2 new classes, which would toggle as you click on the div. I hope this resolved your query.
<!doctype html>
<html>
<head>
<title>Learning Javascript</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#circle {
width:200px;
height:200px;
border-radius:100px;
}
.bg-red {
background-color: red;
}
.bg-blue {
background-color: blue;
}
</style>
</head>
<body>
<div id="circle" class="bg-red"></div>
<script type="text/javascript">
const circleDiv = document.getElementById("circle");
circleDiv.addEventListener('click', () => {
circleDiv.classList.toggle('bg-red');
circleDiv.classList.toggle('bg-blue');
});
</script>
</body>
</html>
I am developing a WCAG compliant website and we implemented links that navigate to a new tab by following the pattern suggested on the WCAG website.
Below is a working example of the issue: (Both Google and IE)
http://www.w3.org/WAI/WCAG20/Techniques/working-examples/G201/new-window.html
If you hover over the link and then click, the new tab appears. When you click back on the original tab, the hover remains open until you click somewhere.
I am not sure if this is a bug or by design, but what would be an appropriate WCAG method of clearing it. Using Javascript might work, but I am not familiar with how to do the hooks.
I was thinking about a transition on the hover that after x seconds, it fades away. Would that be okay for WCAG compliance?
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Pop-Up Warning</title>
<style type="text/css">
body
{
margin-left:2em;
margin-right:2em;
}
:focus
{
outline: 0;
}
a.info
{
position:relative;
z-index:24;
background-color:#ccc;
color:#000;
text-decoration:none
}
a.info:hover, a.info:focus, a.info:active
{
z-index:25;
background-color:#ff0
}
a.info span
{
position: absolute;
left: -9000px;
width: 0;
overflow: hidden;
}
a.info:hover span, a.info:focus span, a.info:active span
{
display:block;
position:absolute;
top:1em; left:1em; width:12em;
border:1px solid #0cf;
background-color:#cff;
color:#000;
text-align: center
}
div.example
{
margin-left: 5em;
}
</style>
</head>
<body>
<h1>Pop-Up Warning</h1>
<p>
This is an example of an <a target="_blank" class="info" href="http://example.com/popup_advisory_technique.html"><strong>External link</strong><span>Opens a new window</span></a>
</p>
</body>
</html>
Based on the comments, the target="_blank" attribute will open the page in a new tab, and keep the states in current tab unchanged. You can remove the target="_blank", and open the page in current tab. Or you can use javascript to clear the focus state in the click callback
<a target="_blank" onclick="this.blur();">Hello<span>Open in new window</span></a>
I would like an iframe to be above a footer section that has some content.
I am a real beginner at this, but I was able to scrap together some code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Layout</title>
<style type="text/css">
body, html {
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#footer {
position:absolute; left: 0;
top: expression(document.body.clientHeight-150);
right: 0;
height: 150px;
background: red;
}
#content {
position:absolute;
left: 0;
right: 0;
bottom: expression(document.body.clientHeight-150);
top: 0;
background: blue;
height: expression(document.body.clientHeight-150);
}
</style>
</head>
<body>
<div id="content">
<iframe width="100%" height="100%" src="https://www.link.com" />
</div>
<div id="footer">
Test content
</div>
</body>
</html>
-The order is right, the iframe sits above, however the iframe itself is too small. I want there to be there is no scroll bar. The footer section doesn't show the background color or text. I've clearly made a mess of things.
-I also don't want the footer to be absolutely positioned, a user should scroll down a bit to see it.
-I am also curious to learn how to get rid of a scroll bar from an iframe even when the iframe is too small. Actually, it would be nice if there was a way to 'cut off' the bottom section of a source link and replace it with my footer.
oke first of - I would advise refraining from inline CSS and ID's it's 'better' practice to use a CSS file and link to it and rather using classes and for instance using footer tags for the footer etc. - But that's minor! don't worry about that, you can see on the fiddle bellow I took your example and put it into what I believe is what you wanted:
Edit: Updated jsFiddle -- http://jsfiddle.net/xuwd9/1/
I will add your code edited if need be :)
how I can change font size of a Ext.Net button.
I have tryed:
Css:
.x-16
{
font-size: 16px;
}
Razor:
X.Button().Icon(Icon.PluginAdd).ID("NewTask").Text("New Task").Handler("Myapp.ShowWinAddTask").Cls("x-16")
Any ideas?
You need to modify the CSS declaration to this
.x-16 .x-btn-default-small .x-btn-inner
{
font-size: 16px !important;
}
and set the CtCls property to your custom class
X.Button().CtCls="x-16"
I would recommend a bit different solution.
It prunes "-small" from the CSS rule. That "-small" part depends on a Button's Scale.
Also it prunes the "!important" statement which is good to avoid as much as possible.
<!DOCTYPE html>
<html>
<head>
<title>Ext.Net.MVC v2 Example</title>
<style>
.x-16 .x-btn-inner {
font-size: 16px;
}
</style>
</head>
<body>
#Html.X().ResourceManager()
#Html.X().Button().Text("Button").Cls("x-16")
</body>
</html>
I'm new to Raphael as well as to JS.. I need to be able to drag the Canvas itself, not the object in it, to various locations on the screen. I looked everywhere on the web and can't find a clue. Of course, the user would have to try and grab the canvas at some free spot ... free from child objects...
Any clue would be greatly appreciated.
Here is how I constructed the Canvas on this site:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Raphael Play</title>
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/mood.js"></script>
<style type="text/css">
#canvas_container {
position:absolute;
width: 803;
left:200px;
top:100px;
border: 0px solid #555;
-webkit-box-shadow: 0px 0px 84px #999;
-moz-box-shadow: 0px 0px 84px #999;
box-shadow: 0px 0px 84px #000;
border-radius: 20px 20px 20px 20px;
background-color:#fff;
background-image:url(static/VAZZZ.png);
}
</style>
</head>
<body>
<div id="canvas_container" ></div>
</body>
</html>
Here is a cross-browser drag function and event listener for the <div>.
http://jsfiddle.net/MtbJe/
Your CSS was incomplete (no height specified and width was missing "px").
The box-shadow significantly reduces the smoothness of the dragging, you may actually want to use an image in this instance (remove the box-shadow to see how much smoother it is).
If you want to make something else in the UI be the actual drag handler (but still move the entire <div>) you will have to change the event listener to be for that element and change the 15th line of the JavaScript from:
var dragObj = e.target ? e.target : e.srcElement;
to something like:
var dragObj = e.target ? e.target.parentNode : e.srcElement.parentNode;
I've had this code saved for many years and I believe the original author is http://www.quirksmode.org/ though I don't see it there anymore. You will find a lot of great information about JS on this site. Again, this is a cross-browser script which I'm not sure you need given you are using canvas. If you are very new to JS and working with the DOM, then I'm sure the code will look a bit confusing and I encourage you to ask additional questions.