I am creating a web app in which i want to use a date picker
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="documents/css/reset.css"/>
<link rel="stylesheet" href="css/BeatPicker.min.css"/>
<link rel="stylesheet" href="documents/css/demos.css"/>
<link rel="stylesheet" href="documents/css/prism.css"/>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/BeatPicker.min.js"></script>
these are the script and link i downloaded from the web
this is my input field where i want to use datepicker
<body>
<input type="text" data-beatpicker="true"/>
</body>
but there is a by default button with the textbox
i used the css to remove the button by making the visibility:hidden;
<style>
button, input[type="button"] {
background-color: #D36161;
border: medium none;
color: #FFFFFF;
cursor: pointer;
font: bold 14px arial,serif;
margin: 3px;
padding: 4px;
visibility: hidden;
width: 72px;
}
</style>
but when i try to add another button it also disabled because of the stylesheet where i put visibility:hidden
this is my button with id
<button id="butt">close</button>
i edited th stylesheet like this
<style>
.butt{
visibility:visible;
}
</style>
but still it is not showing me the desired button
how can i do? i want to disable the button with textbox but visible other button
You are using a library called "BeatPicker".
Before messing arrond with the css, you should read the documentation.
To remove the 'clear' button you will need to add the following attribute to the date input
data-beatpicker-module="clear"
This will remove the clear button
More features are available here: http://act1gmr.github.io/BeatPicker/demos.html
A class selector is preceded by ., and an ID selector is preceded by #. So in your code, change the selector to #butt, because it is the ID of your button.
Try something like this:
<!DOCTYPE html>
<html>
<head>
<style>
button.visible {
visibility: visible
}
button.hidden {
visibility: hidden
}
</style>
</head>
<body>
<button class="visible">This is a visible button</button>
<button class="hidden">This is an invisible button</button>
<button>Notice that the invisible button still takes up space.</button >
</body>
</html>
Do the following
change button, input[type="button"] to .beatpicker-clearButton so you don't have this problem any more or as Adi Darachi sad add clear to the data-beatpicker-module attribute to remove the button
Use this
<body>
<input type="text" data-beatpicker="true" data-beatpicker-position="['*','*']" data-beatpicker-module="today,clear" />
</body>
Add the following css. This will hide only the beatpicker clear buttons.
.beatpicker-clearButton {
display: none;
}
Related
So I made a display: block when the mouse hovers over a certain , and display: none when the cursor moves away. '
A div I have made that displays only when the mouse hovers over a certain link
the div has a display: none when the mouse moves away from the link
this is the code I have used
HTML:
Login/Sign Up
JavaScript:
function LoginShow (){
document.getElementById("log").style.display="block";}
function LoginHide(){
document.getElementById("log").style.display="none";}
But I can't click on the div because as soon as I try to move my cursor to the buttons in the div, the div goes to display none as I have to move my cursor away from the link.
I am new to JS, but I have seen other web pages do it, what's the way for the div to display on mouseover and can be clicked on and goes to display: none only when I move away from the div.
I have also tried
Login/Sign Up
<div class="login" id="log" onmouseover="LoginShow()"
onmouseout="LoginHide()">
It kind of solves the problem, but for the div to go to display none I have to move the cursor away from the div, if the move the cursor away from the anchor tag, it doesn't go away.
You can do it without any js, take a look at below snippet.
let target = document.getElementById('target');
function showLog() {
target.style.display = 'block';
}
function hideLog() {
target.style.display = 'none';
}
.wrapper {
background: #eee;
}
.wrapper .inner-content {
display: none;
position: absolute;
background: red;
}
<div class="wrapper" onmouseover="showLog()" onmouseout="hideLog()">
I am the wrapper
<div class="inner-content" id="target">
<p>Here is some content inside wrapper element</p>
</div>
</div>
i think it can be done with css selectors as you can make other div as the switch to change other elements.
Reference for css selectors
And i think your div is part of button which is the reason why they disappear. if that is the case then you should try giving your button "position:relative" and then your div element the "position:absolute". it might work.
Edited:
here is what i tried, its not appealing but just look at it, if it is what you are trying to achieve.
function LoginShow (){
document.getElementById("log").style.display="block";
}
function LoginHide(){
document.getElementById("log").style.display="none";
}
.container{
width:400px;
height:400px;
background:lightgreen;
border:1px red solid;
}
#log{
background:#efefef;
padding:20px;
width:100px;
text-align: center;
display:none;
}
.log>button{
padding:20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="custom.css">
</head>
<body>
<div class="container">
Login/Sign Up
<div id="log" onmouseover="LoginShow()" onmouseout="LoginHide()"><button>Sign Up</button></div>
</div>
<script src="main.js"></script>
</body>
</html>
I have created a webpage with a button. When you click it, it turns from the default black to pink and when you click it again, it turns purple. For some reason, it is taking two clicks to turn from the default black button to pink. Please help me figure out how to make it so it changes on the first click (or if you know a better way to carry this out)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Events Lab</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="changeh1"> Clicking the button will change its color <h1>
<button onclick="changeStyle()" type="button" name="button" id="buttonStyle">My color will change!</button>
<script src="script.js"></script>
</body>
</html>
JavaScript
function changeStyle() {
//sets variable "button" to connect to HTML ID "buttonStyle"
var button = document.getElementById("buttonStyle"),
click = false;
button.onclick = function() {
click = !click;
//toggles background color back and forth between pink and purple when you click button
button.style.background = click? "#ff0066": "#9933ff";
//toggles text back and forth between "I am now pink!" and "I am now purple!"
document.getElementById('buttonStyle').innerHTML = click? 'I am now pink!': 'I am now purple!';
}
}
let buttonClick = document.getElementById('buttonStyle');
buttonClick.addEventListener('click', changeStyle);
CSS
body{
text-align: center;
font-family: Helvetica;
}
button {
width:350px;
height: 125px;
background-color: black;
color:white;
border: 5px solid black;
font-size: 20px;
}
In your javascript, you wrote the below codelines.
let buttonClick = document.getElementById('buttonStyle');
buttonClick.addEventListener('click', changeStyle);
Also in your html you wrote the code like the below.
<button onclick="changeStyle()" type="button" name="button" id="buttonStyle">My color will change!</button>
Meaning, when you click the My color will change! button, the changeStyle function will be called twice.
Why?
One from the event defined in html code and the other one from the event defined in javascript code.
In case you remove the above 2 codelines in javascript it will work correctly.
Or else, you can remove the onclick event in the html code like this :
<button type="button" name="button" id="buttonStyle">My color will change!</button>
You added eventListener two times, one in HTML onclick, the other one in Javascript with addEventListener.
You can make Javascript code as simple as follows:
var click = false;
let buttonClick = document.getElementById('buttonStyle');
function changeStyle() {
click = !click;
//toggles background color back and forth between pink and purple when you click button
buttonClick.style.background = click? "#ff0066": "#9933ff";
//toggles text back and forth between "I am now pink!" and "I am now purple!"
buttonClick.innerHTML = click? 'I am now pink!': 'I am now purple!';
}
body{
text-align: center;
font-family: Helvetica;
}
button {
width:350px;
height: 125px;
background-color: black;
color:white;
border: 5px solid black;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Events Lab</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="changeh1"> Clicking the button will change its color <h1>
<button onclick="changeStyle()" type="button" name="button" id="buttonStyle">My color will change!</button>
<script src="script.js"></script>
</body>
</html>
I got a problem with tag. I have list of clickable phone numbers on the page and I want to mark used urls.
I created small example and tried to use :visited selector to change color for clicked urls, but it doesn't work.
Let me show the code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.phone:visited {
color: red;
}
.phone {
color: blue;
}
</style>
</head>
<body>
<h1>Hi</h1>
<a class="phone" href="tel:#">Call me</a>
</body>
</html>
I found in Google Chrome inspector, that css works correctly (I manually added "visited" class and url's color was changed), but browser doesn't mark url as visited after click.
Is there any chance to fix this behavior?
Thank you!
Nothing will happen on desktop, because desktop browsers don't know what to do with tel:.
You could use something like jQuery to achieve this on desktop.
$('.phone').click(function() {
$('.phone').css({"color": 'red'});
});
You have to assign class through jquery.
$('.phone').click(function () {
$(this).addClass("visited");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.visited {
color: red !important;
background-color: yellow;
}
.phone {
color: blue;
}
</style>
</head>
<body>
<h1>Hi</h1>
<a class="phone" href="#">Call me</a>
<a class="phone" href="#">Calling you</a>
</body>
</html>
So manage with javascript session and additional css class will be handle your problem
<style type="text/css">
.selected {
color: red !important;
}
.phone {
color: blue;
}
</style>
JS
<script type="text/javascript">
var a = document.getElementsByTagName("a");
//I assumed there is only one a link so tried with index 0
if(sessionStorage.getItem("visited") != null) a[0].classList.add("selected"); //check visited link then add class selected
a[0].addEventListener("click",function(){
sessionStorage.setItem("visited","true");//set session visited
this.classList.add("selected");
});
</script>
You need to declare .phone first before .phone:visited in your css.
I have form fields such as <input type="text" placeholder="Name*"> . Then I have CSS applied to the placeholder, so it's grey. However, I want to change the asterisk(*) to be red. How would I target just that one character inside the attribute with jQuery or Javascript?
Here you go works for me
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
input::-webkit-input-placeholder:after {
content: '*'; color: red;
}
</style>
</head>
<body>
<input type="text" placeholder="Name"></input>
<script>
</script>
</body>
</html>
So CSS only has ::first-letter and not ::last-letter styling... To make ::first-letter apply to the last letter, you do a trick by changing the direction of the text like so:
::-webkit-input-placeholder {
unicode-bidi: bidi-override;
direction: rtl;
text-align: left;
}
::-webkit-input-placeholder::first-letter { /* WebKit browsers */
color: red;
}
The issue with this is that you'll need to reverse your placeholder attribute and you can't use an asterisk because that's considered punctionation. But you can use unicode characters :)...
<input type="text" placeholder="★ emaN">
Here's the JSFiddle: http://jsfiddle.net/988aejrg/1/
I'm trying to show a popup when the mouse is over "a" element.
The problem is that I want to keep the popup when the mouse is over the popup element but the popup disappear when the mouse is over it.
The popup is just under the <a> element (on the display).
This is my code
HTML:
<ul>
<li>
<a id="test">
<div>
Some text
</div>
<div id="popup">
<ul>
<li><a>text0</a>
</li>
<li><a>text1</a>
</li>
</ul>
</div>
</a>
</li>
<li> TEXT
</li>
</ul>
CSS:
#popup {
display:none;
}
#test:hover #popup {
display:block;
}
I tagged the question 'JAVASCRIPT / JQUERY' because if there is a solution with them, it would be welcome.
EDIT
THIS IS ACTUALLY MY CODE, and it doesn't works
Before your start coding take a look at jQueryUI Tooltip (http://jqueryui.com/tooltip/ ).
It does what you want with minimal programming requirements.
From the doku:
Customizable, themeable tooltips, replacing native tooltips.
Example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p>Tooltips can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
ThemeRoller
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
<p>Hover the field to see the tooltip.</p>
</body>
</html>
#popup {
display:none;
}
a:hover + #popup {
display:block;
}
Try this should work.
jsfiddle
If you really wanna make a nice popup use this:
http://getbootstrap.com/2.3.2/javascript.html#popovers
If you're not looking to use jQuery, you can make the div a child of the a tag and use some css trickery to make it all work (http://jsfiddle.net/TMBGm/):
<a>some text<div>popup text</div></a>
a {
position: relative;
}
a div {
display: none;
}
a:hover div {
display: block;
position: absolute;
}
The adjacent sibling selector is perfect for this example:
div {
display: none;
}
a:hover + div {
display: block;
}
Demo: http://jsfiddle.net/G4hd9/
Article: http://css-tricks.com/child-and-sibling-selectors/
This will keep the popup active while the user is hovering it if the element is not related, otherwise if its a child of the element it won't lose focus.
#popup:hover {
display:block
}