I am trying to hide or show the div based on the div id from the php function. I am not able to make it work, please help me.
Javascript:
<script>
showOrHide(id) {
var elem=getElementById(id);
if(elem.style.visibility="hidden")
elem.style.visibility="visible";
else
elem.style.visibility="hidden";
}
</script>
PHP Script:
<?php
function display_link($link_id,$upvote_array,$downvote_array,$divid) {
?>
More links
<div id="<?php echo $divid ?>" style="visibility:hidden;">
</div>
<?php } ?>
Here's a cleaned-up version of your function.
function showOrHide(id) {
var elem = document.getElementById(id);
elem.style.visibility = (elem.style.visibility === 'hidden')? 'visible' : 'hidden';
}
<script>
function showOrHide(id){
var elem = getElementById(id);
if(elem.style.visibility=="hidden"){
elem.style.visibility="visible";
} else {
elem.style.visibility="hidden";
}
}
</script>
<?php
function display_link($link_id,$upvote_array,$downvote_array,$divid)
{
?>
More links
<div id="<?php echo $divid ?>" style="visibility:hidden;">
</div>
1 - visibility == 'hidden'
2 - missing ; after visibility="visible" and ="hidden"
3 - href="javascript:showOrHide('')" - missing '' inside your javascript function
Try this
<script>
function showOrHide(id){
var elem = document.getElementById(id);
elem.style.visibility = (elem.style.visibility === 'hidden')? 'visible' : 'hidden';
}
</script>
<?php
function display_link($link_id,$upvote_array,$downvote_array,$divid)
{
?>
More links
<div id="<?php echo $divid ?>" style="display:hidden;">
</div>
<?php
}
?>
Related
So I have a table where each cell is a name of a game and when you click it it needs to show in a fancybox the results of the user which clicked the cell (I use table Indexes to get the GameID and the Session variable to get userID) which will be used to load the results from a second PHP page.
If I click on a cell for the first time the fancybox will not display anything and after I close fancybox and click on any cell again it works fine. Am I doing something wrong?
This is the whole javascript:
$(".jogos").fancybox({
'hideOnContentClick': true,
'onComplete':function(element)
{
var gameIdx = $(element).index();
var cateIdx = $(element).parent().parent().index();
var gameIdxPHP;
var catIdxPHP;
var gameID;
var userId = '<?php echo $_SESSION['userID']; ?>'
<?php
for ($i=1; $i<= count($categoryArray);$i++)
{
for ($j=1; $j<=count($categoryArray[$i-1]->gamelist);$j++)
{
?>
catIdxPHP = '<?php echo $i ?>' -1;
gameIdxPHP = '<?php echo $j ?>' -1;
if (catIdxPHP == cateIdx && gameIdxPHP == gameIdx)
{
gameID = '<?php echo $categoryArray[$i-1]->gamelist[$j-1]->GameID; ?>';
$("#graphic").load("backoffice/resUserNivel2short.php", {userId:userId,gameID:gameID}, function(){ });
}
<?php
}
}
?>
}
});
HTML
<div style="display:none">
<div id="data">
<div id="graphic">
</div>
</div>
</div>
Sample code of the link
<a href="#data" class="jogos" id="cat<?php echo $i; ?>jogo<?php echo $j; ?>" >
You have display:none on the parent of your fancybox therefor the grafic isnt displayed.
The Grafic element isn't inside the dom yet if you use display:none initially. Try to use clip: rect instead as a class and add/remove that class using the fancybox callbacks.
Try this code:
$('.jogos').fancybox({
'onStart': function() {
$("#data").removeClass('hidden');
},
'onClosed': function() {
$("#data").addClass('hidden');
}
});
CSS:
.hidden {
clip: rect(1px 1px 1px 1px);
position: absolute;
)}
HTML:
<div>
<div id="data" class="hidden">
<div id="graphic">
</div>
</div>
</div>
No text change of anchor on toggle please provide me some suggestion
Html:
+Flight Details
<div id="flight_<?php echo $flightlist->id; ?>" class="minDetailBox addmarginB10 borT">
<div class="col1">
<div class="padding">
<div class="airLogo"> <span class="airSprites LS2"> </span>
<p>JET Lite</p>
</div>
</div>
</div>
</div>
Script:
function showHide(id) {
var minDetails = document.getElementById(id);
$(minDetails).toggle('slow');
($(this).text() === "+Flight Details") ? $(this).text("-Flight Details") : $(this).text("+Flight Details");
return false;
}
Pass your element as well like onClick="return showHide('flight1',this)"
function showHide(id,element) {
var minDetails = document.getElementById(id);
$(minDetails).toggle('slow');
($(element).text() === "+Flight Details") ?
$(element).text("-Flight Details") :
$(element).text("+Flight Details");
return false;
}
You can try something like this
+Flight Details
function showHide(id, link) {
$('#' + id).toggle('slow');
($(link).text() === "+Flight Details") ? $(link).text("-Flight Details") : $(link).text("+Flight Details");
return false;
}
+Flight Details
jQuery('a.toggle')
.click(function(e) {
var id = jQuery(this).attr('id');
jQuery('#'+id).toggle('slow');
if(jQuery('#'+id).css('display') == 'none') {
jQuery(this).html("+Flight Details");
} else {
jQuery(this).html("-Flight Details");
}
e.preventDefault();
});
You can do this as below,
jQuery Code
$(function()
{
$('div[id^="flight_"]').hide();
$(document).on('click','.fnt-size12',function(e)
{
e.preventDefault();
var $that = $(this);
$(this).next('#flight1').toggle();
if($that.html() == '+Flight Details') {
$that.html('-Flight Details');
} else {
$that.html('+Flight Details');
}
})
});
Your HTML
+Flight Details
<div id="flight1" class="minDetailBox addmarginB10 borT">
<div class="col1">
<div class="padding">
<div class="airLogo"> <span class="airSprites LS2"> </span>
<p>JET Lite</p>
</div>
</div>
</div>
</div>
See i have modified your HTML code and added new few lines of jQuery code.
Hi I'm doing a chat script that I've gotten somewhere that needs quite modifications. The function I need to achieve is after successful loading of user to chat with the view should go to bottom directly. I have done things which failed on several occasions, it does automate to bottom but when I tried scrolling the content it still goes back to bottom which should not happen.
This is what I have so far.
<?php
$ctr = 0;
if (is_array($buddies)) {
foreach ($buddies as $buddy) {
?>
<span style="float: right;"><?php echo $buddy->unreadMsgCtr; ?></span>
<b><?php echo humanize($buddy->fullName) ?></b> <br />
<?php
++$ctr;
}
}
?>
<script type="text/javascript">
$(document).ready(function() {
<?php for ($ctrjs = 0; $ctrjs < $ctr; $ctrjs++) {?>
$('#friend' + <?php echo $ctrjs; ?>).live('click', function() {
$('#buddies').hide();
var chattingWith = $(this).attr('chattingID');
startrefresh();
$('#chatroom').show();
$('#chatmessage').html('<img src="<?php echo site_url('/images/ajax-loader.gif');?>" width="16" height="16" />');
$.post("<?php echo site_url('chats/chatbuddy');?>",{
username: $("#friend"+<?php echo $ctrjs; ?>).html(),
recipientID: chattingWith
});
});
<?php } ?>
});
</script>
//chats.php when a particular buddy has been clicked.
<script type="text/javascript">
var autoScrollEnabled = true;
$(document).ready(function() {
toggleAutoScroll();
if(autoScrollEnabled == true) {
$(".messages").animate({ scrollTop: $('.messages')[0].scrollHeight}, 1000);
//return false;
toggleAutoScroll();
}
function toggleAutoScroll() {
autoScrollEnabled = !autoScrollEnabled; //! reverses the value, true becomes false, false becomes true
if (autoScrollEnabled == true) { //scroll down immediately if a.s. is reenabled
$(".messages").animate({ scrollTop: $('.messages')[0].scrollHeight}, 9999999999);
}
}
$('#closechat').live('click', function() {
$('#chatroom').hide();
//scrolled = 0;
stoprefresh();
});
});
</script>
<div class="headerchat" style="width: 217px;"><div class="buddycontainer"> Chatting</div>
<div class="closecontainer">✖ </div>
<br class="breaker" />
</div>
<?php
if (is_array($chat)) {
foreach ($chat as $item){ ?>
<div class="conversation" style="width: 215px;">
<b><span class="username"><?php echo $item['username']; ?></span></b>
<span class="gray" style="float: right;" title="<?php echo date('M d, Y g:i A', $item['time']);?>"> <?php echo date('g:i A', $item['time']);?></span>
<br /><?php echo $item['message']; ?>
</div>
<?php } ?>
<?php }?>
BTW here is the jsfiddle I don't understand it's working properly in jsfiddle. http://jsfiddle.net/STQnH/3/
I'm not sure if I am heading on the right track. I just want to achieve that. Thank you guys.
Try wrapping your code in:
$(document).ready(function(){ //your code here
});
or
$( window ).load(function() {//your code here
});
If it works in jsFiddle but not on the live site this is likely what's missing. jsFiddle adds it for you. You can change this option in the drop down menu indicated by my freehand circle.
jQuery faq for $(document).ready()
I have the following code :
<?php
$i = 0;
foreach($this->list as $l) {
$link = JRoute::_("index.php?option=com_ecommerce&view=detail&id=$l->id");
<div class="quickview" id="quickview_<?php echo $i;?>">
<a href='<?php echo $link ?>' class='basic'>Quick view</a>
</div>
i++;
}
?>
<script>
jQuery(function ($){
var link = $('.quickview .basic').val();
$('.quickview .basic').click(function (e) {
alert(link);
return false;
});
});
</script>
I can't get link from tag <a>.
var link =$('.quickview .basic').attr("href"); should do the trick.
If you refer
I can't get link from tag <a>, please help me!
to the link you're clicking, this would work:
$(".quickview").find(".basic").click(function(e) {
e.preventDefault();
var url = $(this).attr("href");
alert(url);
});
I have a page in php and all over the page I am using the <a tag to link.
For example:
<?php for($i=1;$i<=5;$++) {?>
<a href="abc.php?ref=<?php echo $i ?>"CLick me No. <?php echo $i ?> </a>
<?php } ?>
What I want to do is once we click on the link, jquery load function should called, like
$('#div1').load('abc.php?ref=1'null, function() {
});
but I can't change the php loop and <a tag ...
Thanks
Give each anchor a common class and an attribute that identifies the value of $i:
...
Then attach an on-click function to them:
$('a.numbered-anchors').click(function(e) {
var i = $(this).attr('anchor-id');
$('#div' + i).load(...);
});
You mean something like this:
"CLick me No. <?php echo $i ?>
$('#yourLink').click(function() {
$('#div1').load('abc.php?ref=1'null, function() {
});
});
Bobby
Something like this maybe :
$('a[href^="abc.php"]').click(function(event){
//do whatever you want
$('#div1').load(event.target.href, null, function() {});
});
PHP:
<?php for($i=1;$i<=5;$++) {?>
<a class="anchor-click" href="#" id="<?php echo $i ?>">CLick me No. <?php echo $i ?></a><br />
<?php } ?>
JS
$(function(){
$(".anchor-click").bind("click", function(event){
event.stopPropagation();
$('#div1').load("abc.php?ref="+$(this).attr("id"), null, function() {
});
});
});