I have a slight problem that I swear should work...it kinda seems like a silly question ...but here it is ...
i want a div i created to act as a button ...it how ever does not want to change its background when i click on it( giving the effect of a button)
here's my code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#button1 {
width:100px;
height:50px;
background-image:url(normalbutton.jpg)
}
</style>
</head>
<body class="asd">
<div id="container">
<a href="#">
<div id="button1" onmousedown="document.getElementById("button1").style.backgroundImage='url(onmousedownbutton.jpg)'"></div></a>
</body>
</html>
I think using jQuery it will be easy :
$("#button1").mousedown(function() {
$(this).css({'background-image': 'url(1.jpg)'})
});
Just use css :
HTML
<html>
<body class="asd">
<div id="container">
<a href="#">
<div id="button1" ></div>
</a>
</div>
</body>
</html>
CSS
#button1 {width:500px;height:500px;background:red}
#button1:hover {background:green;}
#button1:active {background:grey;}
You use double quotes inside double quotes. Change the quotes around button1 to single quotes like this:
<div id="button1" onmousedown="document.getElementById('button1').style.backgroundImage='url(onmousedownbutton.jpg)'"></div>
Further notes:
Your <div id="container"> isn't closed
You can't use <div> inside of <a>
Change the mouse down like this
<a href="#">
<div id="button1" onmousedown="this.style.backgroundImage='url(http://t3.gstatic.com/images?q=tbn:ANd9GcT6-aJ6Hz_oXi_M2ZScbEiNGKZFKN3hyhffh2NMWTmbgU2WX-IZKA)'">Button
</div>
</a>
LiveDemo
onmousedown="this.style.backgroundImage='url(http://t3.gstatic.com/images?q=tbn:ANd9GcT6-aJ6Hz_oXi_M2ZScbEiNGKZFKN3hyhffh2NMWTmbgU2WX-IZKA)'">
I have used some images from Google it will look good with some custom images. :)
You also can try css:
#button1:focus {
background: url(onmousedownbutton.jpg);
}
or
#button1:active{
background: url(onmousedownbutton.jpg);
}
Building on Bushan's answer, this will swap to the downclick image when mouse is held down, and revert back to the original image when mouse button is released.
$("#button1").mousedown(function() {
$(this).css({'background-image': 'url(image2.jpg)'})
}).mousedown(function(){
$(this).css({'background-image': 'url(image1.jpg)'})
});
HTML:
<div id="button1" style="background-image:url('image1.jpg');"></div>
Sources/References:
CSS background-image - What is the correct usage?
Related
I need to display some text that alternates between one color and another. I've used CSS and <div style=""> to mark any text that should be a particular color:
<html>
<head>
<style type="text/css">
div {
.dark{ color: black }
.light{ color: blue }
}
</style>
</head>
<body>
<div style="dark">This</div><div style="light">text</div><div style="dark">should</div><div style="light">alternate</div><div style="dark">between</div><div style="light">light</div><div style="dark">and</div><div style="light">dark</div>.
</body>
</html>
When I open this in a Web browser, it only displays text in black. What do I need to fix to make this alternate the colors properly?
The HTML is wrong. dark/light are not styles, they should be classes in this instance.
jsFiddle example
Your HTML should be..
<div class="dark">This</div>
<div class="light">text</div>
<div class="dark">should</div>
<div class="light">alternate</div>
<div class="dark">between</div>
<div class="light">light</div>
<div class="dark">and</div>
<div class="light">dark</div>
If you wanted to achieve this via the style attribute, you would use the following:
jsFiddle example
<div style="color:blue">This</div>
<div style="color:black">text</div>
<div style="color:blue">should</div>
<div style="color:black">alternate</div>
<div style="color:blue">between</div>
<div style="color:black">light</div>
<div style="color:blue">and</div>
<div style="color:black">dark</div>
Classes are obviously the better way to achieve this though.
I am trying to develop a web site from scratch. Here is the code
<html>
<head>
</head>
<body >
<div id="top" style="height:200px;background-color:green">
</div>
<div id="middle" style="height:800px;background-color:white">
</div>
<div id="footer" style="height:200px;background-color:green">
</div>
</body>
</html>
Problem is that there is a white space around above div tags. I can remove white space using margin: -10px; property. But I don't like to handle it that way. Is there way to handle this in decent way in css?
<body style="margin: 0;">
Set the margin for the body to 0;
<body style = "margin:0">
I need to display 2 buttons using jquery mobile and the code is here: http://jsfiddle.net/kiranj/rQ3mh/3/
However, I need to make sure
1) first button is left aligned, has a fixed width of 40% and
2) second button is right aligned, has a fixed width of 40%
Seems like I am missing some important thing in achieving this simple looking functionality. Appreciate any help
For reference, here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<br/><br/><br/>
<div data-role="fieldcontain">
<input type="submit" name="agree" data-inline="true" data-corners="false" data-theme="b" id="pageptosagree" value="Agree" />
<input type="submit" data-inline="true" data-corners="false" name="notAgree" id="pagetosdonotagree" value="I Do Not Agree" />
</div>
</body>
</html>
Here is the css:
div.divinput div{
overflow: hidden;
}
div.divinput div.buttonleft div{
width:40%;
float:left;
}
div.divinput div.buttonright div {
float:right;
width:40%;
}
.clear {
clear: both;
}
Change CSS in jquery CSS code to:
`.ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c {
float: right; //just add this single property. Everything will work.
font-family: Helvetica,Arial,sans-serif;
text-decoration: none;
}`
You can find the Jquery CSS that you are using here
If you add/overwrite some CSS properties that originally are in jquery.mobile-1.1.0.min.css i think you will get the result you want. Try the below code:
CSS
.ui-btn{
width:40%;
}
.ui-btn-up-c,
.ui-btn-hover-c{
float:right;
}
HTML
<div data-role="fieldcontain">
<input type="submit" name="agree" id="pageptosagree" data-inline="true" data-corners="false" data-theme="b" value="Agree" />
<input type="submit" name="notAgree" id="pagetosdonotagree" data-inline="true" data-corners="false" value="I Do Not Agree" />
</div>
Hope it can help you!
I was just testing this: http://jsfiddle.net/rQ3mh/8/
Please note that this is not a proper way to style it. Just to see if it works
The reason it doesn't work is because once the interface is applied there is no class .buttonleft or .buttonright (Inspect the element to see the class names) Therefore the only way to address those divs is by number. Maybe you should check the documentation around jquery mobile and how to apply class to the interface or at leas inherit it from the <input>
Hope that helps a little.
I've got a page with a repeater and a bunch of documents that should be hidden to start and then shown with a plus sign next to each.
My question is - do I have to assign unique ID to each document DIV to make it be able to toggle hidden and shown?
What's the most code-efficient way to handle this?
Here is a quick example:
http://jsfiddle.net/aaamU/
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
</head>
<body>
<div id="repeater">
<div class="document">
<div class="title">Document 1</div>
<div class="button">+</div>
</div>
<div class="document">
<div class="title">Document 2</div>
<div class="button">+</div>
</div>
<div class="document">
<div class="title">Document 3</div>
<div class="button">+</div>
</div>
</div>
</body>
</html>
CSS
#repeater .document
{
height: 20px;
border: 1px solid black;
width: 200px;
padding: 10px;
}
.document .title
{
float:left;
}
.document .button
{
float:right;
}
JS
$(document).ready(function(){
$(".title").hide();
$(".button a").click(function(event){
$(this).parents(".document").children(".title").toggle();
event.preventDefault;
});
});
Here is a Fork with the sliding version:
http://jsfiddle.net/W5QkY/1/
You don't have to assign an ID, you can use their position in the document to identify the correct element.
For example, you have something like this:
<div id="documents">
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
You can use jquery like so to trigger individual elements:
$('#documents > div').eq(0).show();
Where the number passed to the eq() method will return the div at that index.
no you dont have to assign them all a different Id. There are many ways to select multiple dom elements with one selector expression
you have a few options
1) you can assign them all the same class and then do $('.className').show()/.hide()
2) you can select them by a css selector related to the page's layout i.e $('#mainContent img').hide() will hide all images inside of a container (prob a div) with id mainContent
You could easily avoid unique id:s on the html tags by using jQuery's traversing capabilities:
<div class="frame">
[Document title] +
<div>[document contents, links or whatever go here]</div>
</div>
And the jQuery magic:
$(function() {
$('.frame a').click(function() {
var $t = $(this);
if ($t.html()=='+')
{
$t.html('-').next('div').show();
} else {
$t.html('+').next('div').hide();
}
});
});
You could obviously switch the .show()/.hide() calls to some animation of your choice.
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
I am pretty new to CSS, I have a simple case like the above. I would like to make the "title" and "some url" clickable but want to make description as non-clickable. Is there any way to do that by applying some CSS on the span so that whatever inside that span, it is not clickable.
My constraint is that, I do not want to change the structure of the div, instead just applying css can we make a span which is inside an anchor tag, not clickable ?
Actually, you can achieve this via CSS. There's an almost unknown css rule named pointer-events. The a element will still be clickable but your description span won't.
a span.description {
pointer-events: none;
}
there are other values like: all, stroke, painted, etc.
ref: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
UPDATE: As of 2016, all browsers now accept it: http://caniuse.com/#search=pointer-events
UPDATE: As of 2022, browsers behavior may have changed, another option can be:
a {
pointer-events: none;
}
a span:not(.description) {
pointer-events: initial;
}
Not with CSS. You could do it with JavaScript easily, though, by canceling the default event handling for those elements. In jQuery:
$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });
CSS is used for applying styling i.e. the visual aspects of an interface.
That clicking an anchor element causes an action to be performed is a behavioural aspect of an interface, not a stylistic aspect.
You cannot achieve what you want using only CSS.
JavaScript is used for applying behaviours to an interface. You can use JavaScript to modify the behaviour of a link.
In response to piemesons rant against jQuery, a Vanilla JavaScript(TM) solution (tested on FF and IE):
Put this in a script tag after your markup is loaded (right before the close of the body tag) and you'll get a similar effect to the jQuery example.
a = document.getElementsByTagName('a');
for (var i = 0; i < a.length;i++) {
a[i].getElementsByTagName('span')[1].onclick = function() { return false;};
}
This will disable the click on every 2nd span inside of an a tag.
You could also check the innerHTML of each span for "description", or set an attribute or class and check that.
This is the simplest way I would have done it. Without bordering about CSS or javascript :
<html>
<head>
</head>
<body>
<div>
<p>
<a href="http://www.google.com">
<span>title<br></span>
</a>
<span>description<br></span>
<a href="http://www.google.com">
<span>some url</span>
</a>
</p>
</div>
</body>
</html>
You can replace the tag with anything you want.
Yes you can....
you can place something on top of the link element.
<!DOCTYPE html>
<html>
<head>
<title>Yes you CAN</title>
<style type="text/css">
ul{
width: 500px;
border: 5px solid black;
}
.product-type-simple {
position: relative;
height: 150px;
width: 150px;
}
.product-type-simple:before{
position: absolute;
height: 100% ;
width: 100% ;
content: '';
background: green;//for debugging purposes , remove this if you want to see whats behind
z-index: 999999999999;
}
</style>
</head>
<body>
<ul>
<li class='product-type-simple'>
<a href="/link1">
<img src="http://placehold.it/150x150">
</a>
</li>
<li class='product-type-simple'>
<a href="/link2">
<img src="http://placehold.it/150x150">
</a>
</li>
</ul>
</body>
</html>
the magic sauce happens at product-type-simple:before class
Whats happening here is that for each element that has class of product-type-simple you create something that has the width and height equal to that of the product-type-simple , then you increase its z-index to make sure it will place it self on top of the content of product-type-simple. You can toggle the background color if you want to see whats going on.
here is an example of the code
https://jsfiddle.net/92qky63j/
CSS relates to visual styling and not behaviour, so the answer is no really.
You could however either use javascript to modify the behaviour or change the styling of the span in question so that it doesn't have the pointy finger, underline, etc. Styling it like that will still leave it clickable.
Even better, change your markup so that it reflects what you want it to do.
Using CSS you cannot, CSS will only change the appearance of the span. However you can do it without changing the structure of the div by adding an onclick handler to the span:
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
You can then style it so that it looks un-clickable too:
<html>
<head>
<style type='text/css'>
a span.unclickable { text-decoration: none; }
a span.unclickable:hover { cursor: default; }
</style>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span class='unclickable' onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>