I want to make my li to be active using javascript. But the problem is, it's not working when only one click. Need a consecutive 2 clicks before it active. Can someone help me about this?
<li data-popover="true" rel="popover" data-placement="right"><i class="fa fa-fw fa-book"></i> Lectures<i class="fa fa-collapse"></i></li>
<li><ul class="premium-menu nav nav-list collapse in">
<?php
$sql ="SELECT enroll_ref FROM std_enrolled WHERE stud_no = '$stud_no'";
$result = mysqli_query($con, $sql);
while($row = mysqli_fetch_array($result)){
$enroll_ref = $row['enroll_ref'];
}
$sql3 ="SELECT DISTINCT subj_descr FROM subj_enrolled WHERE enroll_ref = '$enroll_ref'";
$results = mysqli_query($con, $sql3);
while($row = mysqli_fetch_array($results)){
$subj_descr = $row['subj_descr'];
?>
<li><a class="item" href="viewlecture.php?subjdescr=<?php echo $subj_descr;?>"><span class="fa fa-caret-right"></span><?php echo ucwords(strtolower($subj_descr)); ?></a></li>
<?php
}
?>
</ul></li>
<script type="text/javascript">
$(".item").click(function() {
$(this).parent('li').addClass("active");
});
</script>
Set the class server side if the list of links is in every viewlecture.php OR
Ajax the page
$(".item").on("click",function(e) {
e.preventDefault(); // stop link from reloading the page
$("#lectureContainer").load(this.href); // load the lecture into a div or so
$(this).closest("ul").find("li").removeClass("active");
$(this).parent('li').addClass("active");
});
For more examples look here Set active link based on URL
Related
I am trying to change the active pagination button when I click on it but it refreshes and remains the same as I get data after refresh. Here is the code:
<?php
for ($page=1;$page<=$number_of_pages;$page++) {
?>
<li class="page-item"><a class="page-link" href="view_videos.php?page=<?php echo $page;?>"><?php echo $page; ?></a></li>
<?php
}
?>
I will be getting urls as:
domain.com/hello.php?page=1
domain.com/hello.php?page=2
When I click on the second button the url changes to domain.com/hello.php?page=2 then I want change the background of second button color as active but due to page refresh its not becoming active.
Here is a screenshot of my navigation bar
Very simple:
Get the page_id like this:
$page_id = isset($_GET['page']) ? $_GET['page'] : false;
Now you have the number of the current page you are on
Then inside the loop, you could do another check like this:
<li class="page-item<?php echo ($page_id == $page) ? ' my-background' : '' ?>"><a class="page-link" href="view_videos.php?page=<?php echo $page;?>"><?php echo $page; ?></a></li>
Then you could do this in your .css-file:
.my-background {
background-color: #FF0000; /* Maybe add "!important" if necessary */
}
You have to get the page number from the URL after the page loads, and check it against each page indicator to see if it is the active one. Then you can add a class active, and style that in your CSS.
So you can try this:
<?php
for ($page = 1; $page <= $number_of_pages; $page++) {
if ($page === $_GET["page"]) {
$active = " active";
} else {
$active = "";
}
?>
<li class="page-item">
<a class="page-link <?= $active ?>" href="view_videos.php?page=<?= $page ?>"><?= $page ?></a>
</li>
<?php
}
?>
Note: <?= $foo ?> is the same as <?php echo $foo ?> manual
I'm creating dynamic menu. I wanted to highlight the menu once it is selected.
We use php. just need to figure out how to append the class active to the current page. Can anyone help me with this?
<div id="sidebar-wrapper" class="sidebar-toggle">
<ul class="sidebar-nav">
<?php
$i=1;
if(count($shipments) > 0)
{
foreach($shipments as $row)
{
$shipment_id = $row['id'];
$containerdest = $row['no']."-".$row['destination'];
?>
<li id="shipment<?php echo $shipment_id; ?>"><?php echo $containerdest; ?>
</li>
<?php $i++;
}
} ?>
<li>
Logout
</li>
</ul>
</div>
</div>
Change your html line with below line
<li id="shipment<?php echo $shipment_id; ?>" class="menu"><a href="<?php echo ite_url("users/get_details/$shipment_id");?>" shipmentid="<?php echo $shipment_id; ?>" ><?php echo $containerdest; ?></a>
And write javascript code as below (assuming you have included jquery library file)
<script>
$(document).ready(function(){
var url = location.pathname;
var arr = mystr.split("/");
var id = arr[2];
$(#shipment'+id).attr('shipmentid');
$('.menu').removeClass('active'); //this will remove all active class after page loading
$('#shipment'+id).addClass('active'); // this will append active class to the current clicked menu
});
</script>
I am just beginner in php and I am finding difficulty in the pagination code. According to my client he needs a pagination on top and as well in bottom. So for that I have written this code like in below : which the code states I have totally 8 pages to display and each page has 12 records. It will work in inline display till 8 pages but that looks odd. So my management said to do in this format << < 1 2 3 4 > >> and each time the page changes the next number should be displayed but it display only till 4 pages after that it doesn't show the next page.
<?php
$limit = 12;
$sql = "SELECT COUNT(*) FROM products WHERE type='1'";
$rs_result = mysql_query($sql);
$row = mysql_fetch_row($rs_result);
$total_records = $row[0];
$total_pages = ceil($total_records / $limit);
?>
<div align="center">
<ul class='pagination text-center' id="pagination">
<?php if(!empty($total_pages)):for ($i=1; $i <= $total_pages; $i++):
if($i == 1):?>
<li class="page-item">
<a class="page-link" href="granite.php?page=<?php echo $i;?>" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class='current' id="<?php echo $i;?>"><a href='granite.php?page=<?php echo $i;?>'><?php echo $i;?></a></li>
<?php else:?>
<li id="<?php echo $i;?>"><a href='granite.php?page=<?php echo $i;?>'><?php echo $i;?></a></li>
<?php endif;?>
<?php endfor;endif;?>
<li class="page-item">
<a class="page-link" href="granite.php?page=<?php echo $i;?>" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</div>
And i have written this javascript code for changing the pagination like this
$(document).ready(function(){
//Loading Image Display
function Display_Load()
{
$("#loading").fadeIn(100);
$("#loading").html("<img src='loading.gif' />");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first").css({'color' : '#FF0084','border' : 'none'});
$("#content").load("granite.php?page=1", Hide_Load());
//Pagination Click
$("#pagination li").click(function(){
Display_Load();
//CSS Styles
$("#pagination li")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$("#content").load("granite.php?page=" + pageNum, Hide_Load());
});
});
Please can anyone help me where I am doing wrong and give me the guidelines to correct it.
i am using php codeigniter. I am sending data in an array to my view. In my view i have a foreach loop in place which iterates through the array and displays the data in my view. Also inside this foreach loop i am displaying some action buttons.
<?php
foreach($studentList as $r)
{
echo '<tr>';
echo $r->id;
echo '</tr>'?>
<a class="lock" data-id="<?= $r->id?>_lock" data-placement="top" data-original-title="Lock Profile" href="javascript:void(0)"><i class="clip-locked"></i></a>
<a class="hidden unlock" data-id="<?= $r->id?>_unlock" data-placement="top" data-original-title="Unlock Profile" href="javascript:void(0)"><i class="clip-unlocked"></i></a>
<?php
} ?>
What i want to do is to display the lock button by default, when someone clicks on this button lock should get hidden and unlock button should get displayed. in my jquery i am doing it like this but clicking on single button accounts for changing the buttons on the whole page.
I know the reason as i am accessing the element using class which all of them have common but i haven't yet figured out how to do that using id which will account for single elements.
$('.unlock').click(function() {
var id = $(this).attr("data-id");
console.log(id);
$('.unlock').addClass("hidden");
$('.lock').removeClass("hidden");
});
This slight modification should help you.
$('.unlock').click(function(){
var id = $(this).attr("data-id").split('_')[0];
console.log(id);
$(this).addClass("hidden");
$('[data-id='+id+'_unlock]').removeClass("hidden");
});
OK, so first off, you're putting the anchors outside of the <tr>'s. Is this intended?
If you have code like this:
<?php
foreach($studentList as $r)
{
echo '<tr>';
echo $r->id;?>
<a class="lock" data-id="<?= $r->id?>_lock" data-placement="top" data-original-title="Lock Profile" href="javascript:void(0)"><i class="clip-locked"></i></a>
<a class="hidden unlock" data-id="<?= $r->id?>_unlock" data-placement="top" data-original-title="Unlock Profile" href="javascript:void(0)"><i class="clip-unlocked"></i></a>
<?php
echo '</tr>';
} ?>
You can simply do:
$('.unlock').click(function(){
var id = $(this).attr("data-id");
console.log(id);
$(this).parent('tr').find('.unlock').addClass("hidden");
$(this).parent('tr').find('.lock').removeClass("hidden");
});
Also have a look here on information on how to fetch siblings, as an alternative way to locate the element you're looking for.
First of all, your html is semantically wrong, tr should contain th or td depending of what you want to do. Even when the browsers doesn't complaint for bad html doesn't mean it is correct. So, this is what a recommend:
Supposing we have this
<table id="myTable">
<tbody>
<?php foreach($studentList as $r) { ?>
<?php echo '<tr><td>'; ?>
<?php echo $r->id; ?>
<a class="lock" data-id="<?= $r->id?>_lock" data-placement="top" data-original-title="Lock Profile" href="javascript:void(0)"><i class="clip-locked"></i></a>
<a class="hidden unlock" data-id="<?= $r->id?>_unlock" data-placement="top" data-original-title="Unlock Profile" href="javascript:void(0)"><i class="clip-unlocked"></i></a>
<?php echo '</td></tr>'; ?>
<?php } ?>
</tbody>
</table>
Bind a single event to both anchors:
$("#myTable tr a").click(function(){
//save the element for future reference and avoid repeat $(this)
var elm = $(this),
id = elm.attr("data-id"),
elmtoShow = elm.hasClass('unlock') ? '.lock' : '.unlock';
console.log(id);
elm.addClass("hidden");
//we can pass a second param to jQuery to query into
//that single element instead the whole document
$(elmtoShow, this.parentNode).removeClass("hidden");
});
Please, note that I added an id to the table to make the query to all anchors, also read the comments in the code. Hope it helps
I am using opencart template. Here I'm trying to show some mysql table datas in div tab. it works fine. But, when I reload the browser it doesn't show the default current div mysql datas. If I click another tab it shows all datas properly
When I reload the browser it shows like this
Then I click Notes tab and again I click Reviews tab. I got this.
Why Reviews tab content doesn't show on page load?
<ul id="dashboard_tabs">
<?php if($description) { ?>
<li><?php echo $tab_description; ?></li>
<?php } ?>
<?php if ($review_status) { ?>
<li><a href="#two" ><?php echo $tab_review; ?></a></li>
<?php } ?>
<?php if ($attribute_groups) { ?>
<li>Notes</li>
<?php } ?>
<?php if ($products) { ?>
<li><a href="#four" ><?php echo $tab_related; ?> <?php /*echo count($products);*/ ?></a></li>
<?php } ?>
</ul>
<div id="dashboard_content_details">
<div id="one">
<?php echo $description; ?>
</div>
<div id="two">
some contents
</div>
<div id="three">
some contents
</div>
<div id="four">
some contents
</div>
</div>
Jquery
$(function(){
function resetTabs(){
$("#dashboard_content_details > div").hide(); //Hide all content
$("#dashboard_tabs a").attr("id",""); //Reset id's
}
var myUrl = window.location.href; //get URL
var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2
var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab
(function(){
$("#dashboard_content_details > div").hide(); // Initially hide all content
$("#dashboard_tabs li:first a").attr("id","current"); // Activate first tab
$("#dashboard_content_details > div:first").fadeIn(); // Show first tab content
$("#dashboard_tabs a").on("click",function(e) {
e.preventDefault();
if ($(this).attr("id") == "current"){ //detection for current tab
return
}
else{
resetTabs();
$(this).attr("id","current"); // Activate this
$($(this).attr('href')).fadeIn(); // Show content for current tab
}
});
})()
});
I think so you need to put these function in
$(document).ready(function(){
// do the above task
})