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.
Related
JQuery beginner here. I'm trying to get a group of divs to change from red to blue when I click on them. When I click them again, I want the divs to change back to red. I tried using jQuery's animate() method (with the jQuery color plugin) to change the div's color. However, the code below only partially works.
$(document).ready(function(){
$("div").click(function() {
$("div").each(function() {
if (this.style.color !== "blue") {
$(this).animate({
color:'blue'
},1000);
} else {
this.style.color = "red";
}
});
});
});
When I click a div, the if statement works fine. The divs change to blue. However, when I click a div again, the divs don't change back to red. The else statement doesn't seem to work. Any ideas on my mistake? The else statement works when I replace $(this).animate({...}) with this.style.color = "blue"; which so I think I'm doing something wrong with the animate() method.
Here is the HTML file
<!DOCTYPE html>
<html>
<head>
<title> each() test1 </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
body{
background-color: #000000;
color: #ffffff;
}
div {
font-size: 3em;
color: #ff0000;
text-align: center;
cursor:pointer;
font-weight: bolder;
width: 300px;
}
</style>
</head>
<body>
<div> Click here </div>
<div> to iterate through </div>
<div> these divs </div>
</body>
<script src="theJavaScriptFile.js"> </script>
</html>
Just don't use blue or red color codes. It will get converted to RGB code.
For example this.style.color will be RGB(0,0,255) not blue so your expression always returns true no matter what color is it.
I create this example in different color mode for you to take a look https://jsfiddle.net/3tpncgr1/1/
Anyway, if you want to have special logic for particular color then keep using this approach. Otherwise, use class name instead of color code to determine. Because browsers always return rgb value for color attribute
I would manage it by using a active class to control the states.
In that case I would succes changing
$(document).ready(function(){
$("div").click(function() {
$.each( $(this).parent().children("div"),function() {
if (!$(this).hasClass('active')) {
$(this).addClass('active');
$(this).animate({
color:'blue'
},1000);
} else {
$(this).removeClass('active');
this.style.color = "red";
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title> each() test1 </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
body{
background-color: #000000;
color: #ffffff;
}
div.active{ }
div {
font-size: 1em;
color: #ff0000;
text-align: center;
cursor:pointer;
font-weight: bolder;
width: 300px;
}
</style>
</head>
<body>
<div id="containerOne">
<div> Click here </div>
<div> to iterate through </div>
<div> these divs </div>
</div>
<div id="containerTwo">
<div> Click here </div>
<div> to iterate through </div>
<div> these divs </div>
</div>
</body>
<script src="theJavaScriptFile.js"> </script>
</html>
I'm using Background Check JS to try and get some text on my website to change based on the background being light or dark. I can't get it to work on my site to made a minimal replica of it and still no dice:
<html>
<head>
<style>
.background--light {
color: black;
}
.background--dark {
color: white;
}
.background--complex {
color: gray;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://www.kennethcachia.com/background-check/scripts/background-check.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
BackgroundCheck.init({
targets: '.target',
});
});
</script>
</head>
<body>
<img src="http://www.kennethcachia.com/background-check/images/6.jpg">
<div style="position: fixed; top: 65%;" class="target">Why not white?</div>
</body>
</html>
Also sometimes an "CanvasRenderingContext2D': The canvas has been tainted by cross-origin data." Error pops up in this demo sometimes?
I may have missed something trivial in this demo but I can't get it to work at all on my "full" version I'm trying to write.
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;
}
I have this code, and it is working fine on my test website but not in a browser as local (on my hdd) standalone page
Here it the code in jfiddle: https://jsfiddle.net/9jdsvjfb/
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
function toggleDiv(divId) {
var ele = document.getElementById(divId);
ele.toggle();
}
</script>
<style>
a:hover {
color: purple;
}
a:active {
color: purple;
}
</style>
<title></title>
</head>
<body>
<a class="ConceptLevel1" href="javascript:toggleDiv('PktS/h+L5EeSqM/4hMH9JA==');"
style="text-decoration: none; font-weight:bold; font-size:13pt">BGP -concept list</a>
<br />
<div style="padding-left:15px;" id="PktS/h+L5EeSqM/4hMH9JA==">
<div>fds</div>
<div>sdfdsfdfdsf</div>
<div>sdfsdf</div>
<div>gdhgf</div>
<a class="ConceptLevel2" href="javascript:toggleDiv('SPrQVTbDx0WO6As2F+43tw==');"
style="text-decoration: none; font-weight:bold; font-size:12pt">hfghg</a>
<br />
<div style="padding-left:15px;" id="SPrQVTbDx0WO6As2F+43tw==">
<div>hfghgh</div>
<div>fghfgh</div>
</div>
</div>
</body>
</html>
I can see two problems here. First, Divs doesn't have a toggle function; I think you mean:
function toggleDiv(divId) {
var ele = jQuery('#' + divId);
ele.toggle();
}
The other problem is in the jsFiddle: since jsFiddle sends all Javascript wrapped inside a function (in windows.load) it is needed to define the function toggleDiv as a global variable, for it to be found when clicking the link:
window.toggleDiv = function (divId) {
var ele = jQuery('#' + divId);
ele.toggle();
}
Just a final note: It may be better if instead of embedding the Javascript insite the HMTL, you use events in order to bind the toggle function to the links' click event.
Is there a way to link javascript to a certain style in the css? Here is an example of what I want to do:
syntax onclick="[change style to external stylesheet class-for example changes]". Is there a special function to do this.?
changes { /*just an example, i know i can do this is css and html only*/
background-img:url("");
}
Please comment if you need more information.
sample.css
.rednode{
background-color: red;
}
.bluenode{
background-color: blue;
}
In JS,
function changeClass(node) {
node.classList.remove("rednode");
node.classList.add("bluenode");
}
In HTML,
<span class='rednode' onclick='changeClass(this)'/>
Try Add class Remove Class
Here I will show one Example ;
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#RC").click(function(){
$("p").removeClass("intro");
});
$("#AC").click(function(){
$("p").addClass("intro");
});
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<p class="intro">Add Class Remove Class Example</p>
<button id="RC">Remove Class</button>
<button id="AC">Add Class</button>
</body>
</html>
Try this.. It may Help you !
Yes, you could do
onclick="this.style='color: red;';"
if that's what you want.
You would put it in an HTML element:
<p style="" onclick="this.style='color: red;';">Some text</p>
Or, if you want to link to a class or id:
<p class="" onclick="this.class='red';">Some text</p>
With the external css file having:
.red { color: red;
}
Hope this helps!