Is it possible to switch the display:block part of #about{ with display:none part of #downloads with a OnClick?
#about {
position:relative;
-moz-border-radius: 5px;
border-radius: 5px;
width:800px;
height:450px;
margin-left:50px;
margin-right:50px;
border:solid 2px #000000;
background-color:#448efc;
margin-bottom:5px;
display:block
}
#downloads {
position:relative;
-moz-border-radius: 5px;
border-radius: 5px;
width:800px;
height:450px;
margin-left:50px;
margin-right:50px;
border:solid 2px #000000;
background-color:#448efc;
margin-bottom:5px;
display:none
}
heres my OnClick Code<a href="#downloads" onclick="somthing?"> im not sure if its possible do any of you know how?
You can change the css using jquery.
<a href="#downloads" onclick="$('#about').css("display", "none");">
I would suggest something like this:
#about, #downloads {
/* all of the CSS rules EXCEPT display here */
}
.hidden {display:none}
Then your HTML should be:
<div id="about">...</div>
<div id="downlaods" class="hidden">...</div>
Now your link can be:
<a href="#downloads" onClick="document.getElementById('about').className = 'hidden';
document.getElementById('downloads').className = '';">Downloads</a>
It seems you are actually looking for jQuery toggle(). because it makes no sense keeping onclick event on the element which has already display: none.
<div id="about" onclick="$('#downloads').toggle()"></div>
<div id="downloads" onclick="$('#about').toggle()"></div>
Working Fiddle
Seems like you want to hide #about:
$('#downloads').click(function() {
$('#about').hide();
});
With this, there's no need to add onclick attributes.
I had to change my quotesmarks, code below fully works for me....
<form action="uploadprofileaccept.php"
class="dropzone" onclick="$('#imageform').css('display', 'none');">
</form>
Related
HTML:- <input> & <button>
You may have noticed when a user clicks on it (:focus) in mobile browsers (or others), a deep yellow border appears on the screen!
I want to hide those borders using CSS or Javascript.
If I use border: none; code, it hides the black borders, not those deep yellow colored borders!
So how can I hide those borders?
Try this:
input:focus {
outline:none;
}
You can use css
input:focus, button:focus {
box-shadow: none;
}
You can try this.
CSS
<style>
#inputId:focus OR input[type=text]:focus
{
outline: none !important;
border:none !important;;
box-shadow: none !important;;
OR
border:1px black solid;
}
</style>
HTML
<input id="inputId">
You can try this code.
input:focus{
outline: none;
}
input[type=text],button{
border: none;
background: red;
}
<input type="text">
<button type="button" >Ok</button>
I'm using javascript to insert paragraphs inside a div. What it does is get the value of an input form when you click a button and append it into a specific div as a paragraph. The problem is that their margin is too big and I have no idea how to decrease them (make them closer). What do I do in this case?
jsfiddle
- Anyway, my code looks like this:
HTML
<div id="red">
<button id="bt_1" onclick="addParagraph()">Add</button>
<form>
<input id="box_top" type="text" placeholder="Spacing is too big -->">
</form>
</div>
<div id="blue">
<!--Paragraphs that are being added here have their top and bottom margin too big, but I don't know how to fix it.-->
<!--Type something in thet input form and keep clicking the add button to see what I mean.-->
</div>
CSS
#blue {
height:100px;
width:250px;
margin-top: 10px;
float:left;
position:relative;
background-color:blue;
overflow:auto;
}
#red {
height:100px;
width:250px;
margin-top: 10px;
float:left;
position:relative;
background-color:red
}
form {
font-size: 12px;
font-family: Verdana, Arial, Sans-Serif;
display: inline-block;
}
#bt_1 {
margin-left:5px;
height:35px;
width:70px;
margin-top: 25px;
border-radius:5px;
}
JavaScript
function addParagraph() {
var word = document.getElementById("box_top").value;
var pMaker = document.createElement("p");
var nodeMaker = document.createTextNode(word);
pMaker.appendChild(nodeMaker);
var blueDiv = document.getElementById("blue");
blueDiv.appendChild(pMaker);
}
You can modify the margin with css.
#blue p{
margin:0;
}
Just add the following class in your css.
#blue p{margin:0;}
DEMO
simply aply the css
#blue p {
margin: 5px;
}
or any other number instead of 5 you want to add
You can simply add something like this to css:
#blue p {
margin: 2px auto;
}
Regards
Add this in your css: Demo
p {
line-height: normal;
margin: 0;
}
I have a div and I want to be both inline-block and display none, but I have to choose one of them.
My HTML:
.like_user_wrapper{
margin-top:20px;
padding:5px;
height:55px;
box-shadow:1px 1px 10px #f0f0f0;
background:white;
display:inline-block;
display:none;
}
It's not a good idea to have the div just hide using JavaScript
Just use visibility: hidden;
#like_user_wrapper{
margin-top:20px;
padding:5px;
height:55px;
box-shadow:1px 1px 10px #f0f0f0;
background:white;
display:inline-block;
visibility: hidden;
}
Note this is using a custom ID (#...) , not a class (....)
If you want is to become visible at some point, you can use this JavaScript property with that ID:
document.getElementById('like_user_wrapper').style.visibility='visible';
This can be included in a onmouseover="", or a javascript function etc, so it appears when you want it to. This can be implemented in html like this:
<!DOCTYPE HTML>
<html>
<head>
<style>
#like_user_wrapper {
margin-top:20px;
padding:5px;
height:55px;
box-shadow:1px 1px 10px #f0f0f0;
background:white;
display:inline-block;
visibility: hidden;
}
#hover {
width: 80px;
height: 50px;
background-color: red;
}
</style>
</head>
<body style="background-color:blue;">
<div id="like_user_wrapper">Like User Wrapper</div>
<br><br>
<div id="hover" onmouseover="document.getElementById('like_user_wrapper').style.visibility='visible';" onmouseout="document.getElementById('like_user_wrapper').style.visibility='hidden';">Hover over me</div>
</body>
</html>
Help page on the visibility CSS property here
N.B. In most browsers, by default a DIV has the display property block, so you might not need inline-block - you could just wrap it in a <div> with that property anyway.
If you are trying to hide and show the element using jQuery, to display it back avoid using jQuery.show().
Instead do $('.like_user_wrapper').css({'display': 'inline-block'}); to display the element.
On the other hand, to hide it is ok to just do $('.like_user_wrapper').hide();
And remove the display: inline-block from your css.
I need change the text color , when mouse move on the images,
Here i have done some work. i can't able to change the text color. can anyone please help me.
html:
<div class="hover">
<img src="th.jpg" /><span>Add</span>
</div>
css:
.hover
{
width:65px;
height:56px;
display:inline;
text-align:center;
}
.hover a
{
color:#000;
display:block;
margin:0 5px 0 0;
float:left;
text-align:center;
height:56px;
text-decoration:none;
width:65px;
}
.hover span {
display:block;
text-align:center;
}
.hover img {
margin:0 auto;
padding:3px 0;
}
.hover img:hover{
border:solid 1px #ccc;
}
You should change:
.hover img:hover{
border:solid 1px #ccc;
}
to
.hover a:hover img{
border:solid 1px #ccc;
}
Early IEs don't support hover on elements other than "a"
Changing text color:
.hover a:hover{
color:red;
}
Use .hover:hover, or .hover a:hover, or img:hover + span. You may have to explicitly set the child elements to inherit their text color.
The first two won't do exactly what you want, but try them if the last one doesn't work.
If you really want to have it just trigger on hover over the image, but change the style in another element, probably jquery is the way to go if the last of the three selectors above doesn't work for you.
Add this to your code:
.hover a:hover {
color: #whatevercoloryouwant;
}
Some older browsers will ignore hovering on anything other than a link. Therefore my choice for the 'a'.
XpertEase
if you want the text within the tag to change color then the CSS should be:
.hover a span{ /* THE STYLE FOR THE SPAN */ }
.hover a:hover span{ /* THE STYLE FOR THE SPAN ON MOUSEOVER */ }
you can do that by writing CSS for the outer tag.
e.g.
a:hover {
color:green;
}
That will change the color of any text inside the tag.
using html and css you can do something like this;
<html>
<style type="text/css">
td.menuon { color: #CC0000; }
td.menuoff { color: #000000; }
</style>
<table>
<tr>
<td class="menuoff" onmouseover="className='menuon';" onmouseout="className='menuoff';">
test
</td>
</tr>
</table>
</html>
save it as a html document and open in browser texts goes red on mouseover.
add this in your css:
.hover a:hover { color:red; /* or whatever color you want */ }
I am developing an application which requires that user must be notified about some background events i.e. invitation from other user, reminder time out etc.
Whenever the event occurs the controller will be notified, and a small window should be displayed to the user.
How should I proceed to achieve this. Which technology / tool will help me. I am using jQuery, JSF 2.0 and Spring 3.0.
this will give a notification similar to the stackoverflow
jQuery
$("#notification").fadeIn("slow").append('your message');
$(".dismiss").click(function(){
$("#notification").fadeOut("slow");
});
HTML
<div id="notification" style="display: none;">
<span class="dismiss"><a title="dismiss this notification">x</a></span>
</div>
CSS
#notification {
position:fixed;
top:0px;
width:100%;
z-index:105;
text-align:center;
font-weight:normal;
font-size:14px;
font-weight:bold;
color:white;
background-color:#FF7800;
padding:5px;
}
#notification span.dismiss {
border:2px solid #FFF;
padding:0 5px;
cursor:pointer;
float:right;
margin-right:10px;
}
#notification a {
color:white;
text-decoration:none;
font-weight:bold
}
Also take a look at mplungjan's answer on how to listen to server updates and message load
HTML:
<input type="button" id="pop" value="Submit"/>
<div id="popup">
<div id="topbar"> TITLE..</div>
<div id="content">Here is you content...</div>
<input type="button" id="ok" value="OK"/>
</div>
CSS:
#popup { background:#ccc; -moz-border-radius: 10px; width:300px; height: 200px; padding: 5px; position: absolute; left: 50%; margin-left: -150px; z-index: 500; display:none }
#topbar { background:#ddd; -moz-border-radius: 10px; padding:5px; height:20px; line-height:20px }
#content { padding:5px; -moz-border-radius: 10px; text-align:center }
#ok { position: absolute; left: 140px; top: 180px }
JQUERY:
$(function(){
$('#pop').click(function(){
$('#popup').fadeIn().css('top',$(document).height()/2);
});
$('#ok').click(function(){
$('#popup').fadeOut();
});
});
Using code from #Anu's suggestion - my fiddle, you can simply add a poll
$(document).ready(function() {
$(".dismiss").click(function(){$("#notification").fadeOut("slow");});
setInterval(function() {
$.get("ping.jsp?userid=<%= userID %>",function(message) {
if (message) $("#notification").fadeIn("slow").html(message);
});
,10000);
})
the message could include a timestamp to see if you had notified earlier instead of sending an empty message if no notificati9on is needed
Alternatives: Long poll or Comet
Jquery ui dialog is what you are looking for. It will come in handy for you. Although there are lots of other plugin available. This is the simplest..