In my web application, I have tabs and if any of the tab is clicked, the corresponding page will be displayed. But even after the tab is selected, the hyperlink button is enabled. My need is that if i do mouse over on the selected tab, the normal pointer should display instead of hyperlink. please help me suggesting the solution.
regards,
Jeya
Either
<a>you can't click me</a>
or
<a href='...' style='cursor:default'>you can click me but the cusror doesn't indicate this</a>
Here is a complete sample :
<html>
<head>
<style type="text/css">
a:target
{
cursor: default;
}
</style>
</head>
<body>
<a id="anchor1" href="#anchor1">Anchor1</a>
<a id="anchor2" href="#anchor2">Anchor2</a>
<a id="anchor3" href="#anchor3">Anchor3</a>
</body>
</html>
When you click any of the link it'll become the current target of the page, then the a:target rule will be applied to it, setting the default cursor.
EDIT for IE :
Changing my original sample, here is another implementation using jQuery, tested with IE8 but not IE7.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function()
{
var hash = null;
var updateAnchors = function()
{
hash = window.location.hash;
$(".tab").removeClass("target");
$(".tab[href=" + hash + "]").addClass("target");
};
window.setInterval(function ()
{
if (window.location.hash != hash)
{
updateAnchors();
}
}, 100);
updateAnchors();
});
</script>
<style type="text/css">
.target
{
cursor: default;
}
</style>
</head>
<body>
<a id="anchor1" href="#anchor1" class="tab">Anchor1</a>
<a id="anchor2" href="#anchor2" class="tab">Anchor2</a>
<a id="anchor3" href="#anchor3" class="tab">Anchor3</a>
</body>
</html>
You can select an element using javascript:
document.getElementById('element-id');
Once you've done that, you can modify the style within that element:
document.getElementById('your-element').style.cursor = 'default';
Now your cursor should look normal.
Use JavaScript:
document.getElementById("myATagId").style.cursor = "default";
Related
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.
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 a problem that some link we show is separeted from the rest of the page itself, so the link showes up immediatly as you open the page but the page takes 2-3 seconds to load, I'm trying to delay the link (in this example it's google) so it will show up a few seconds after the page is loaded.
am I getting close?
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show(), 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com;
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<style>
#Link{display:none;}
</style>
<body window.onLoad="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</div>
</body>
</html>
You have a few errors in your page which is stopping this from working:
Usually the first thing to check when something is not working is the browser console (press F12) and looks for errors. This won't fix problems with logic but should put you in a good position to start debugging things.
You have a missing " syntax error in exportSrc - this will show in the browser console
The load attribute in the body is incorrect. You should just use onload="myFunction()"
Your setTimeout is calling show instead of referencing it. Remove the ()s.
Put the <style> tags inside the <head>
You have an extra </div> tag
This should work better:
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<style>
#Link{display:none;}
</style>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show, 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com";
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<body onload="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</body>
</html>
Try
<body onLoad="myFunction();">
Instead of window.onLoad
I'm trying to do screen shot paste in my website using firefox. It can be done easily by giving the div as contenteditable='true'.
html
<Html>
<Head>
<Title>Screen Shot Example</Title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:258px;
height:165px;
z-index:1;
left: 71px;
top: 59px;
}
</style>
</Head>
<Body>
<div id="apDiv1" contenteditable='true'>Paste Test</div>
</Body>
</Html>
I can paste images from clipboard to particular div. Now the issue starts, how do I get the value from the div. For an example my user paste screenshot in the div and i want it to be save in db. If it normal textbox I can get the textbox value. Is there any way I can convert the DIV to image. Any advice and any referral links is highly appreciated.
document.addEventListener('DOMContentLoaded', function(){
var text = document.getElementById('apDiv1').innerText;
}, false);
To replace the div:
document.addEventListener('DOMContentLoaded', function(){
var el = document.getElementById("apDiv1");
var img = document.createElement("img");
img.setAttribute('src', '...');
el.parentNode.replaceChild(el, img);
}, false);
How can i load the original image when the tumbnail version of the image has been clicked?
Im using ASP.NET in combinaton with javascript.
The original images are big, so they have been scaled on server side. This makes the site load faster. But somehow, both versions (original and tumbnail) of the images are being downloaded.
I'm trying to download only the tumbnail version of the image. And when the user clicks on the image, i want to show the original image.
How can i get this done?
Html such as below for each thumbnail image should do the trick
<a href="[url to original image]" target="_blank" id="thumbnail_link">
<img src="[url to thumbnail image]" alt="Click to see the full image" />
</a>
Edit: Modified to illustrate use of FancyBox.
Use above markup along with below java-script:
$(document).ready(function() {
$("a#thumbnail_link").fancybox();
})'
Don't forget to include jquery and fancybox js files.
I think you have to show thumbnails first and on click you need to open the original images in a new pop up window. You can do this using code as given below -
<SCRIPT LANGUAGE="JavaScript">
function openImage(imageFile){
windowOpen=window.open("",'Open','toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=1,width=420,height=420');
windowOpen.document.writeln("<head><title>Image</title></head><body>");
windowOpen.document.writeln('<img src=http://www.mysite.com/' + imageFile + 'border=1>');
windowOpen.document.writeln("</body></html>");
}
</SCRIPT>
Then call this openImage() method during onClick of the thumbnail image.
You can pass imageFile as parameter to the function.
It sounds like you have both images referenced in your HTML, even though one is hidden from view, so the browser requests both. What you'd need to do is use JavaScript to create the full size <img> tag from scratch and then add it to the relevant place in the HTML. The browser will then load the full size image once it's added to the DOM.
For fancy box, all you need to do is
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
Regards,
Andy.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://identify.site88.net/showimage.js'></script>
<style type='text/css'>
#test{
display:none
}
#blackout {
width:50%;
position:absolute;
background-color: rgba(0, 0, 0, .5);
display: none;
z-index: 20;
}
.modal {
margin: auto;
}
#close {
color: white;
font-weight: bold;
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$('img').click(function () {
var img = $(this).clone().addClass('modal').appendTo($('#blackout'));
$('#blackout > #close').click(function () {
$('#blackout').fadeOut(function () {
img.remove();
});
});
$('#blackout').fadeIn();
});
});
$(window).load(function(){
$('#close2').hide();
$('span').click(function () {
$('#test').show();
$('#close2').show();
$('#txtsp').hide();
$('#blackout2 > #close2').click(function () {
$('#blackout2').fadeOut(function () {
$('#test').hide();
$('#txtsp').show();
$(this).css({
"text-decoration": ''
});
});
});
$('#blackout2').fadeIn();
});
});
</script>
</head>
<body>
<div id="blackout2"><div id="close2" >Close</div></div><img id="test" src="http://data.vietinfo.eu/News//2012/10/16/179281/1350402084.7404.jpg"/> <span id="txtsp">Click here to show image</span>
<br /><br />
<div id="blackout"><div id="close">Close</div></div><div style="width: 50px; height: 50px;"><img width="100%" src="http://dantri.vcmedia.vn/Uploaded/2009/06/02/hh02066.jpg" /></div>
</body>
</html>
You can replace tag span by your image have been scaled on server side.