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
Related
Is there any way to convert an iframe with all attributes it contains into a div or php.
<iframe src='left_nav.php' name='left_nav' class="daemon" scrolling="auto" frameborder='0' height='100%' width="100%"></iframe>
If I use the php include function to call the left_nav.php file:
<?php include left_nav.php; ?>
How to load content which was loading in the frame into the div.
In main.title file (other file)
function toencounter(rawdata) {
document.getElementById('EncounterHistory').selectedIndex=0;
if(rawdata=='') {
return false;
} else if (rawdata=='New Encounter') {
top.window.parent.left_nav.loadFrame2('nen1','RBot','forms/newpatient/new.php? autoloaded=1&calenc=')
return true;
} else if (rawdata=='Past Encounter List') {
top.window.parent.left_nav.loadFrame2('pel1','RBot','patient_file/history/encounters.php')
return true;
}
var parts = rawdata.split("~");
var enc = parts[0];
var datestr = parts[1];
var f = top.window.parent.left_nav.document.forms[0];
frame = 'RBot';
if (!f.cb_bot.checked) {
frame = 'RTop';
}
parent.left_nav.setEncounter(datestr, enc, frame);
top.frames[frame].location.href = '../patient_file/encounter/encounter_top.php?set_encounter=' + enc;
}
In left_nav file
setEncounter(edate, eid, frname) {
if (eid == active_encounter) return;
if (!eid) edate = '<?php xl('None','e'); ?>';
var str = '<b>' + edate + '</b>';
setDivContent('current_encounter', str);
active_encounter = eid;
encounter_locked=isEncounterLocked(active_encounter);
reloadEncounter(frname);
syncRadios();
var encounter_block = $(parent.Title.document.getElementById('current_encounter_block'));
var encounter = $(parent.Title.document.getElementById('current_encounter'));
var estr = ' <b>' + edate + ' (' + eid + ')</b>';
encounter.html( estr );
encounter_block.show();
}
function loadCurrentEncounterFromTitle() {
top.restoreSession();
top.frames[ parent.left_nav.getEncounterTargetFrame('enc') ].location='../patient_file/encounter/encounter_top.php';
}
This is a JS script to loadFrame2
function loadFrame2(fname, frame, url) {
var usage = fname.substring(3);
if (active_pid == 0 && usage > '0') {
alert('<?php xl('You must first select or add a visitor.','e') ?>');
return false;
}
if (active_encounter == 0 && usage > '1') {
alert('<?php xl('You must first select or create an encounter.','e') ?>');
return false;
}
if (encounter_locked && usage > '1') {
alert('<?php echo xls('This encounter is locked. No new forms can be added.') ?>');
return false;
}
var f = document.forms[0];
top.restoreSession();
var i = url.indexOf('{PID}');
if (i >= 0) url = url.substring(0,i) + active_pid + url.substring(i+5);
if(f.sel_frame)
{
var fi = f.sel_frame.selectedIndex;
if (fi == 1) frame = 'RTop'; else if (fi == 2) frame = 'RBot';
}
if (!f.cb_bot.checked) frame = 'RTop';
top.frames[frame].location = '<?php echo "$web_root/interface/" ?>' + url;
if (frame == 'RTop') topName = fname;
return false;
}
Since you want to load content of an other file (left_nav.php) into a div rather than into an iframe, you can use multiple ways to do that.
1) JS:
Create a div container which will hold your content:
<div id="left_nav"></div>
Now, you can use jQuery to load the content easily:
onClick="loadContent('path/to/file/left_nav.php')"
This would be your loadContent function:
function loadContent(path){
$("#left_nav").load(path);
}
2) PHP:
You could also use PHP (pass a parameter to the URL you are currently on yourfile.php?m=left_nav). Then you can include the file, with a controller (MVC principle -> if you want to learn more about it):
<?php
if($_GET["m"] == "left_nav")
include("left_nav.php");
?>
EDIT:
It seems like you need a little mix of both. Instead of your iframe you need to insert a div and load the content at the same time:
<div id="left_nav"><?php include("left_nav.php"); ?></div>
This should be equivalent to creating the iframe. Now, when you change the src of the iframe in your JS scripts, instead of using this line:
top.window.parent.left_nav.loadFrame2('pel1','RBot','patient_file/history/encounters.php');
try changing the content of the div as I stated previously at 1), but you should only need the loadContent function.
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>
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 one image slide show. JS code is:
function slideSwitch()
{
var $active = $('#slideshow IMG.active');
if ($active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
var $sibs = $active.siblings();
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1400, function() {
$active.removeClass('active last-active');
});
}
$(function()
{
setInterval( "slideSwitch()", 4000 );
});
If I use the following code, this works perfect and shows images in sequence...
<div id="slideshow">
<?php
$getGa=$objN->getGa();
foreach($getGa as $getGa)
{
echo '<IMG src="banner/'.$getGa['gall'].'">';
}
?>
</div>
Now if I alter the code with <a> as following
<div id="slideshow">
<?php
$getGa=$objN->getGa();
foreach($getGa as $getGa)
{
echo '<IMG src="banner/'.$getGa['gall'].'">';
}
?>
</div>
If you see I just add <a> before each image tag and
this keeps on showing the same image again and again....
I think I need to change something in the JS code?
Thanks
It could be because your <img> will no longer have <img> siblings. Because you've wrapped each image tag in another element, it no longer has any siblings at all. Therefore you should change
var $sibs = $active.siblings();
to
var $sibs = $active.parent().siblings().children('img');
You will also need to change $next
var $next = $active.parent().next().find('img').length ? $active.parent().next().find('img')
: $('#slideshow IMG:first');
Try changing IMG for a in your JS:
function slideSwitch() {
var $active = $('#slideshow a.active');
if ($active.length == 0 ) $active = $('#slideshow a:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow a:first');
var $sibs = $active.siblings();
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1400, function() {
$active.removeClass('active last-active');
});
}