I have 2 hyperlinks.
when i click on one hyperlink the another hyperlink should be disabled means it should be seen but not clicked by any user
Please help me
hiii
<a id="check" href="google.com">bye</a>
in JavaScript
$('#check').attr('disabled', true);
but it is not working
Using java script you can disable the hyper link by adding a .disabled class as seen below:
.inactive //add this class to the link if you want to disable it
{
pointer-events: none;// this will disable the link
cursor:default;
}
then use .inactive class in appropriate line...
Try below
$('.my-link').click(function () {return false;});
To re-enable it again, unbind the handler:
$('.my-link').unbind('click');
or
$('.my-link').attr('disabled', 'disabled');
Use this to re-enable it:
$('.my-link').attr('disabled', '');
Thanks,
Siva
Below is the code you need.
<a id="gLink" href="http://google.com">click me</a><br />
<a onclick="disableLink()" href="#">Disable link</a><br />
<a onclick="enableLink()" href="#">Enable link</a>
javsacript functions:
function disableLink() {
var a = document.getElementById('gLink');
a.href = "#";
}
function enableLink() {
var a = document.getElementById('gLink');
a.href = "http://google.com";
}
for e.g if you have
<a id="link1" href="page1.php">One</a> <a id="link2" href="page2.php">Two</a>
document.getElementById('link1').onclick = function()
{
document.getElementById('link1').disabled = true;
document.getElementById('link2').disabled = false;
};
document.getElementById('link2').onclick = function()
{
document.getElementById('link1').disabled = false;
document.getElementById('link2').disabled = true;
};
That's all I know
<html>
<head>
<script language="javascript" type="text/javascript">
window.onload = firstLoad;
function firstLoad() {
document.getElementById("lesson").href = "";
document.getElementById("posttest").href = "";
}
function clickHome() {
document.getElementById("pretest").href = "";
document.getElementById("lesson").href = "lesson.html";
}
function lessonRead() {
document.getElementById("posttest").href = "posttest.html";
document.getElementById("lesson").href = "";
}
</script>
</head>
<body>
Home |
Pre-test |
Lesson |
Post-test |
About |
</body>
</html>
You can use jQuery onClick event (or .on("click") / .live("onClick") or whatever you prefer) to change to attribute of the link like this:
$('.my-link').attr('disabled', true);
Short example:
<a href='#' id='link1'>First</a>
<a href='#' id='link2'>Second</a>
<script>
$("#link2").onClick(function(){
$('#link1').attr('disabled', true);
};
}
</script>
Related
We have built this online prototype and it worked just perfectly on our local environment, but after moving it online, some buttons and a table are not working. The buttons are all buttons that, have conditions to only show if eg. the user is logged in or has a certain user type (in this case a tutor). The table is not showing the search results.
It's possible to register a user and also login, but when entering the subpages, only logout, search button and logo is responding. And we can see that user are being saved in our database.
Can anyone give a hint to what it is we do wrong? I've displayed one of the buttons code here below.
HTML:
<ul>
<li><a class="modal-button modal-button-user" data-modal="modalEditUser"><i class="far fa-user"></i> Hello <?php echo $_SESSION["firstName"];?>!</a></li>
<li>
<form action='_home.php' method='post'><button class="logout_button" type="submit" name="logOutBtn" id="logOutBtn">Log Out</button></form>
</li>
</ul>
JS:
var modalBtns = [...document.querySelectorAll(".modal-button")];
modalBtns.forEach(function(btn){
btn.onclick = function() {
var modal = btn.getAttribute('data-modal');
document.getElementById(modal).style.display = "block"
}
});
var modalBtnsTutor = [...document.querySelectorAll(".modal-button-tutor")];
modalBtnsTutor.forEach(function(btn){
btn.onclick = function() {
var modal = btn.getAttribute('data-modal');
document.getElementById(modal).style.display = "block"
}
});
var closeBtns = [...document.querySelectorAll(".close")];
closeBtns.forEach(function(btn){
btn.onclick = function() {
var modal = btn.closest('.modal');
modal.style.display = "none";
}
});
window.onclick = function(event) {
if (event.target.className === "modal") {
event.target.style.display = "none";
}
}
PHP:
<?php
require 'config.php';
//try to make logout/login/welcomeMessage appear/disappear whether you're
logged in or not
if (isset($_SESSION["userID"])) {
echo "<script>
window.onload = function() {
document.getElementById('navUser').style.display = 'block';};
</script>";
$go = "home.php";
} else {
echo "<script>
window.onload = function() {
document.getElementById('navVisit').style.display = 'block';};
</script>";
$go = "index.php";
}
?>
I Have to delay my redirection by few seconds. When I try to do this It is not working. I have attached my Javascript and php below. can anyone please help me to solve the problem.window location not working.
<script type="text/javascript">
// constants to define the title of the alert and button text.
var ALERT_TITLE = "Answer";
var ALERT_BUTTON_TEXT = "Ok";
// over-ride the alert method only if this a newer browser.
// Older browser will see standard alerts
if(document.getElementById) {
window.alert = function(txt) {
createCustomAlert(txt);
}
}
function createCustomAlert(txt) {
// shortcut reference to the document object
d = document;
// if the modalContainer object already exists in the DOM, bail out.
if(d.getElementById("modalContainer")) return;
// create the modalContainer div as a child of the BODY element
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
// make sure its as tall as it needs to be to overlay all the content on the page
mObj.style.height = document.documentElement.scrollHeight + "px";
// create the DIV that will be the alert
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
// center the alert box
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
// create an H1 element as the title bar
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));
// create a paragraph element to contain the txt argument
msg = alertObj.appendChild(d.createElement("p"));
msg.innerHTML = txt;
// create an anchor element to use as the confirmation button.
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
btn.href = "#";
// set up the onclick event to remove the alert when the anchor is clicked
btn.onclick = function() { removeCustomAlert();return false; }
}
// removes the custom alert from the DOM
function removeCustomAlert() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}
function handler(var1,quizId,isCorrect,score) {
alert(var1);
//var id = parseInt(quizId);
quizId++;
var points=10;
if(isCorrect=='true'){
score=score+points;
var string_url="quiz.php?qusId="+quizId+"&score="+score;
setTimeout('window.location =string_url',5000) ;
}
else{
var string_url="quiz.php?qusId="+quizId+"&score="+score;
setTimeout('window.location =string_url',5000) ;
}
}
</script>
while($row1=mysql_fetch_array($result1)){
?><input type="radio" name="answers" value="<?php echo $row1['answers'];?>" onclick="handler('<?php echo $row1["feedback"]; ?>',<?php echo $qusId;?>,'<?php echo $row1["isCorrect"]; ?>',<?php echo $score;?>)
"/ ><?php echo $row1['answers']; ?><br/>
<?php
} ?>
The first parameter of setTimeout should be a function. Try wrapping it with an anonymous function like so:
setTimeout(function() {
window.location = string_url
}, 5000);
try this:
`setTimeout("createCustomAlert(txt);", 3000);`
I have some code that involves clicking on a button and either you are logged in and you go to the next page or you are logged out and you get an alert. I have never liked onClick inside HTML and so I would like to turn this around into clicking on the id and having the jQuery do its magic.
I understand the click function of jQuery, but I don't know how to put do_bid(".$val["id"]."); down with the rest of the Javascript. If I haven't given enough information or if there is an official resource for this then let me know.
<li class='btn bid' onclick='do_bid(".$val["id"].");'> Bid </li>
<script>
//Some other Javascript above this
function do_bid(aid)
{
var loged_in = "<?= $_SESSION["BPLowbidAuction_LOGGED_IN"] ?>";
if(loged_in=="")
{
alert('You must log in to bid!');
}
else
{
document.location.href="item.php?id="+aid;
}
}
</script>
UPDATE: This is the entirety of the Javascript code. I think none of the answers have worked so far because the answers don't fit the rest of my Javascript. I hope this helps
<script language="JavaScript">
$(document).ready(function(){
function calcage(secs, num1, num2) {
s = ((Math.floor(secs/num1))%num2).toString();
if (LeadingZero && s.length < 2)
s = "0" + s;
return "" + s + "";
}
function CountBack() {
<?
for($i=0; $i<$total_elements; $i++){
echo "myTimeArray[".$i."] = myTimeArray[".$i."] + CountStepper;";
}
for($i=0; $i<$total_elements; $i++){
echo "secs = myTimeArray[".$i."];";
echo "DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,1000000));";
echo "DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));";
echo "DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));";
echo "DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));";
echo "if(secs < 0){
if(document.getElementById('el_type_".$i."').value == '1'){
document.getElementById('el_".$i."').innerHTML = FinishMessage1;
}else{
document.getElementById('el_".$i."').innerHTML = FinishMessage2;";
echo " }";
echo "}else{";
echo " document.getElementById('el_".$i."').innerHTML = DisplayStr;";
echo "}";
}
?>
if (CountActive) setTimeout("CountBack()", SetTimeOutPeriod);
}
function putspan(backcolor, forecolor, id) {
document.write("<span id='"+ id +"' style='background-color:" + backcolor + "; color:" + forecolor + "'></span>");
}
if (typeof(BackColor)=="undefined") BackColor = "white";
if (typeof(ForeColor)=="undefined") ForeColor= "black";
if (typeof(TargetDate)=="undefined") TargetDate = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat)=="undefined") DisplayFormat = "%%D%%d, %%H%%h, %%M%%m, %%S%%s.";
if (typeof(CountActive)=="undefined") CountActive = true;
if (typeof(FinishMessage)=="undefined") FinishMessage = "";
if (typeof(CountStepper)!="number") CountStepper = -1;
if (typeof(LeadingZero)=="undefined") LeadingZero = true;
CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0) CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
var myTimeArray = new Array();
<? for($i=0; $i<$total_elements; $i++){?>
ddiff=document.getElementById('el_sec_'+<?=$i;?>).value;
myTimeArray[<?=$i;?>]=Number(ddiff);
<? } ?>
CountBack();
function do_bid(aid)
{
var loged_in = "<?= $_SESSION["BPLowbidAuction_LOGGED_IN"] ?>";
if(loged_in=="")
{
alert('You must log in to bid!');
}
else
{
document.location.href="item.php?id="+aid;
}
}
}</script>
If you want to attach click event handler using jQuery. You need to first include jQuery library into your page and then try the below code.
You should not have 2 class attributes in an element. Move both btn and bid class into one class attribute.
Markup change. Here I am rendering the session variable into a data attribute to be used later inside the click event handler using jQuery data method.
PHP/HTML:
echo "<li class='btn bid' data-bid='".$val["id"]."'>Bid</li>";
JS:
$('.btn.bid').click(function(){
do_bid($(this).data('bid'));
});
If you don't want to use data attribute and render the id into a JS variable then you can use the below code.
var loged_in = "<?= $_SESSION["BPLowbidAuction_LOGGED_IN"] ?>";
$('.btn.bid').click(function(){
if(!loged_in){
alert('You must log in to bid!');
}
else{
do_bid(loged_in);
}
});
First, you need to make the <li> have the data you need to send, which I would recommend using the data attributes. For example:
echo "<li class=\"btn bid\" data-bid=\"{$val['id']}\">Bid</li>";
Next, you need to bind the click and have it call the javascript method do_bid which can be done using:
function do_bid(bid){
//bid code
}
$(function(){
// when you click on the LI
$('li.btn.bid').click(function(){
// grab the ID we're bidding on
var bid = $(this).data('bid');
// then call the function with the parameter
window.do_bid(bid);
});
});
Assuming that you have multiple of these buttons, you could use the data attribute to store the ID:
<li class='btn' class='bid' data-id='<?php echo $val["id"]; ?>'>
jQuery:
var clicked_id = $(this).data('id'); // assuming this is the element that is clicked on
I would add the id value your trying to append as a data attribute:
Something like:
<li class='btn' class='bid' data-id='.$val["id"].'>
Then bind the event like this:
$('.bid').click(function(){
var dataId = $(this).attr('data-id');
doBid(dataId);
});
You can store the Id in a data- attribute, then use jQuery's .click method.
<li class='btn' class='bid' data-id='".$val["id"]."'>
Bid
</li>
<script>
$(document).ready(function(){
$("li.bid").click(function(){
if ("" === "<?= $_SESSION["BPLowbidAuction_LOGGED_IN"] ?>") {
alert('You must log in to bid!');
}
else {
document.location.href="item.php?id=" + $(this).data("id");
}
});
});
</script>
If you are still searching for an answer to this, I put a workaround.
If data is not working for you, try the html id.
A working example is here: http://jsfiddle.net/aVLk9/
I have a problem with dynamic loading of javascript function from Ajax.
I want to update some part of HTML with Ajax. Let's say I want to place a button and to attach a javascript function to that button dynamically.
For example:
...
<head>
<script src="ajax.js" type="text/javascript"></script>
<script type="text/javascript">
function f_OnLoadMain()
{
fParseBrowserInfo();
getJSFromServer();
getHTMLFromServer();
}
</script>
</head>
<body onload="f_OnLoadMain()">
<div id="AjaxArea" width="100%" height="100%" align="left" valign="top" >
<!-- Updated with ajax -->
</div>
</body>
</html>
----- getJSFromServer() - calls to php code:
<?php
$somesource = '
function Clicked(){
alert("Clicked");
}
';
class TestObject{
public $source = "";
function TestObject()
{
$this->source = "";
}
function setSource($source){
$this->source = $source;
}
}
$ti = new TestObject();
$ti->setSource($somesource);
echo(json_encode($ti));
?>
the script is inserted with:
var oHead = document.getElementsByTagName('HEAD').item(0);
if (oScript){
oHead.removeChild(oScript);
}
oScript = document.createElement("SCRIPT");
oScript.type = 'text/javascript';
oScript.text = oScript.source;
oHead.appendChild( oScript);
And getHTMLFromServer() - call php :
<?php
$error = 0;
$someText = '
<input type="button" id="SomeBtn" name="SomeBtn" onclick="Clicked()" value="SomeBtn">
';
class TestObject{
public $src = "";
public $error = 0;
function TestObject()
{
$this->error = 0;
$this->src = "";
}
function setSrcString($sample){
$this->src = $sample;
}
}
$ti = new TestObject();
$ti->error = $error;
$ti->setSrcString($someText);
echo(json_encode($ti));
?>
Then the content is updated with:
var dynamicArea = document.getElementById("AjaxArea");
if(dynamicArea != null)
{
dynamicArea.innerHTML = obj.src;
}
And that works fine!
So, when the page loads the button is displayed ok, BUT pressing button doesn't call function Clicked().
Someone knows how to fix it?
Regards!
i guess you have to escape your apostrophe:
<input type="button" id="SomeBtn" name="SomeBtn" onclick="Clicked()" value="SomeBtn">
you see: onclick="Clicked()"
Together with: function Clicked(){ alert("Clicked"); }
It renders to: onclick="alert("clicked")"
Try to escape your apostrophe :)
Regards
i have problem that jQuery didnt show up iframe. i have many iframe in my website. when u click link to show up in iframe. but it doesnt show. here my code:
//i load plugin:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function godirect(url, num)
{
var target = 'iframe_url' + num;
var source = jQuery(target).attr('src');
if (source == "about:blank" || source == "")
{
jQuery(target).attr('src', url);
}
else
{
jQuery(target).attr('src', 'about:blank');
}
}
</script>
PHP & HTML code:
$godirect = 'godirect("'.$GetData['link'].'", "'.$a.'");';
<a href="#" <?php echo $godirect; ?> > TEST LINK </a>
Try this code instead, assuming target is the ID of the frame element:
var target = 'iframe_url' + num;
var oFrame = $("#" + target);
var source = oFrame.attr('src');
if (source == "about:blank" || source == "")
{
oFrame.attr('src', url);
}
else
{
oFrame.attr('src', 'about:blank');
}
Edit: when initially empty, the src attribute might be null so try this:
if (source == "about:blank" || source == "" || source == null)
You should place the godirect call in the href-attribute or the onclick-attribute of the anchor. Currently your output looks like this:
<a href="#" godirect("url", "num");>TEST LINK</a>
and should be:
TEST LINK