In my webpage I am using jquery tabs.
<script type="text/javascript">
$(document).ready(function()
{
$('#horizontalTab').responsiveTabs({
rotate: false,
startCollapsed: 'accordion',
collapsible: 'accordion',
setHash: true,
disabled: [3,4],
activate: function(e, tab) {
$('.info').html('Tab <strong>' + tab.id + '</strong> activated!');
}
});
$('#start-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('active');
});
$('#stop-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('stopRotation');
});
$('#start-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('active');
});
$('.select-tab').on('click', function() {
$('#horizontalTab').responsiveTabs('activate', $(this).val());
});
});
</script>
<div id="horizontalTab" style="margin-top:10px;">
<ul class="tabul">
<li class="tabli">
<?php echo lang('purchasedtickets');?>
</li>
<li class="tabli"><?php echo lang('gifted').' '.lang('tickets');?></li>
<li class="tabli"><?php echo lang('received').' '.lang('tickets');?></li>
</ul>
<div id="purchased"></div>
<div id="gifted"></div>
<div id="received"></div>
</div>
When I click on tab2 ie, #gifted tab, the corresponding result will be fetched from an ajax call and will be set to div with id gifted. In this sections I am using Codeigniter pagination. If I click on pagination link 2 of gifted section, the URL will come like http://domain.org/project/video/tickets/2#gifted where 2 in the URL is the page number.
After this, when I click on any other tab say tab1 ie, purchased tab, then the link of page will come like http://domain.org/project/teshot/video/tickets/2#purchased (instead of http://domain.org/project/teshot/video/tickets#purchased) which is appending the url of previous section.
I want to avoid this problem. How can I solve this?
Can ayone help me?
Thanks in advance.
Related
My HTMl file has code:
<li id="b1" onclick="myfunc(this)" class="thumbsup fa fa-thumbs-up" ></li>
Above code makes a like button whose color changes on click.
Now I want to get its color on form submission so that on php side I can add number of likes in DB accordingly. That is if user clicked this button then it's color changes to grey . So in jquery i want to see if it is grey and then in php increment value in DB accordingly. Not sure how i can retrieve color of li element in jquery.
Please note that user can click button multiple times. like first time on clicking , button turns grey and when clicked again. it turns to its default color and so on...
As #mplungjan states on the comment you don't need a color to get if it is clicked. You can write an onlick function to send an ajax request to your php file, do the query for the like there and on return you can write a very simple code to color and disable click of the button again.
Like this;
myfunc(e){
$.ajax({
type:'POST',
url:'yourphpfile.php',
data:{whatever:youwanttosend},
success:function(data){
$('#b1').css('background-color':'green');
});
}
You do not want the color of the li, you want its state. Toggle the class:
$(function() {
$(".thumbsup").on("click", function() {
$(this).toggleClass('liked'); // every time we click we set or remove
$(this).next().removeClass('disliked'); // remove from the thumbsdown
})
$(".thumbsdown").on("click", function() {
$(this).toggleClass('disliked'); // every time we click we set or remve
$(this).prev().removeClass('liked'); // remove from thumbsup
})
$("#save").on("click", function() {
var liked = $(".liked").length,
disliked = $(".disliked").length;
console.log(liked,disliked);
// ajax here - sending liked:0,disliked:0 if nothing clicked
$.post("savelike.php",{ "liked":liked,"disliked":disliked},function() {
console.log("saved");
});
})
})
.liked { background-color:green }
.disliked { background-color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="a1" class="thumbsup fa fa-thumbs-up">👍</li>
<li id="a2" class="thumbsdown fa fa-thumbs-down">👎</li>
</ul>
<button id="save" type="button">Save</button>
Original more complex example with more than one like/dislike set
$(function() {
$(".thumbsup").on("click", function() {
$(this).toggleClass('liked'); // every time we click we set or remove
$(this).next().removeClass('disliked'); // remove from the thumbsdown
})
$(".thumbsdown").on("click", function() {
$(this).toggleClass('disliked'); // every time we click we set or remve
$(this).prev().removeClass('liked'); // remove from thumbsup
})
$("#count").on("click", function() {
console.log($(".liked").length,"liked",
$(".disliked").length,"disliked"); // how many
// which ones - using http://api.jquery.com/map/
let likes = $('.thumbsup.liked').map(function(){ // array map
return this.id; // each ID that is liked
}).get();
let dislikes = $('.thumbsdown.disliked').map(function(){
return this.id
}).get();
// here are the arrays - use .join(",") to get a list
console.log(likes.length>0?likes:"No likes",
dislikes.length>0?dislikes:"No dislikes")
})
})
.liked { background-color:green }
.disliked { background-color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="a1" class="thumbsup fa fa-thumbs-up">👍</li>
<li id="a2" class="thumbsdown fa fa-thumbs-down">👎</li>
<li id="b1" class="thumbsup fa fa-thumbs-up">👍</li>
<li id="b2" class="thumbsdown fa fa-thumbs-down">👎</li>
</ul>
<button id="count" type="button">Count</button>
You can use find function of jQuery.
Suppose you have multiple li under div element than you can try the following code to get all li elements which color is grey.
$( "div.classname" ).find( "li.thumbsup" ).css( "background-color", "grey " ).
Having issues linking external pages back to home page, which is a single page scroll.
My header.php file:
<div class="navigation">
<ul class="nav">
<li>Work</li>
<li>About</li>
<li>Skills</li>
<li><a class="various apply-button" data-membership="corporate" href="#contactForm">Contact</a></li>
</ul>
</div>
And I'm using Smooth Scroll jquery:
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('a.logo, ul.nav a, #mmenu a, a.mobileLogo').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top-50
}, 800);
event.preventDefault();
});
});
</script>
It works fine on the home page, but once I click a link to an external page, I can't get back. URL just reads test2.php#home-page instead of back to the index. If I simply add the entire URL to the href tag, the scroll quits working on the home page. Any thoughts?
If you add the whole URL, you can just split the string to extract the anchor.
href_arr = $anchor.attr('href').split("#");
$('html, body').stop().animate({
scrollTop: $('#'+href_arr[1]).offset().top-50
}, 800);
I am using jQuery ui tabs with the script below:
JS
$(document).ready(function() {
var tab_index = $('#tab_index').attr('value');
$('#tabs').tabs({ cache:true,
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible.");
}
},
});
$('#tabs').tabs('option', 'active', tab_index);
});
HTML
<input id="tab_index" type="hidden" value="<?php echo $tab_index; ?>" />
<div id = "tabs">
<ul>
<li>Current Portfolio</li>
<li>Realised Gain / Loss</li>
<li class = "tab_trade_list">Add Trades</li>
<li>Test</li>
</ul>
</div>
Where $tab_index is a numeric value generated dynamically from a PHP script based on different scenarios.
The strange thing is that when the page is loaded, I need to click on a tab twice before it is selected, but it would work normally after that, until the page is refreshed and the problem returns. Any idea of how to resolve this will be much appreciated. Many thanks!
I don't use tabs in conjunction with ajax content but comparing your example against the demo example at http://jqueryui.com/tabs/#ajax I see a few things:
You have $('#tabs').tabs({ cache:true, but I don't see that as part of the tabs api
Looks like you are loading the fist tab via ajax as well? Is that part of the problem?
When you initially load the page and click a tab does firebug or the IE developer tools tell you anything is wrong?
In response to your comment below...I use the following:
$(document).ready(function() {
var setTab = $("#setTab").val();
$("#iTABs").tabs("select", setTab);
})
In conjunction with this (on page tabs.php):
<div id="iTABs">
<ul>
<li><a tabindex="-1" href="#tabs-1">Tab Title</a></li>
<li><a tabindex="-1" href="#tabs-2">Tab 2 Title</a></li>
<!-- Repeat for each tab you need -->
</ul>
</div>
<div id="tabs-1">Fancy tab content</div>
<div id="tabs-2">Fancy tab 2 content</div>
<input type="hidden" id="setTab" value="<?php echo $_GET['sTab']; //2 ?>">
With that when a user goes to tabs.php?sTab=2 The tab strip opens to Tab 2 and the tab 2 content is shown. No fancy ajax stuff there...
Also, (not part of the issue but just in general) you use:
var tab_index = $('#tab_index').attr('value');
You could just use:
var tab_index = $('#tab_index').val();
Tristann.tk
On this site click About me and then click back to Home, and then try switching the pages at the bottom, It doesn't change. Why?
jQuery code:
$(document).ready(function(){
$(".page_links .page li").click(function(){
$(".page_links .page li").css({'background-color' : ''});
$(this).css({'background-color' : '#A5CDFA'});
$(".posts").load("/includes/data.php?data=pages&page=" + this.className);
});
$(".navlist #about_me").click(function(){
$(".navlist #home").css({'text-decoration' : 'none'});
$(".navlist #about_me").css({'text-decoration' : 'underline'});
$(".vsebina").load("/includes/data.php?data=about_me");
});
$(".navlist #home").click(function(){
$(".navlist #about_me").css({'text-decoration' : 'none'});
$(".navlist #home").css({'text-decoration' : 'underline'});
$(".vsebina").load("/includes/data.php?data=home");
});
$(".navlist #home").css({'text-decoration' : 'underline'});
$(".1").css({'background-color' : '#A5CDFA'});
});
The divs are like that:
<div class="zunanji">
<div class="glava">
<div class="meni">
<ul class="navlist">
<li><a id="home" href="javascript:void(0)">Home</a></li>
<li><a id="about_me" href="javascript:void(0)">About Me</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="vsebina">
<? get_posts();
get_pages();
?>
</div>
<div class="stranska">
<h2>Archive</h2>
</div>
</div>
</div>
The 2 PHP functions return the 5 posts at the start and the page numbers at the bottom.
You'll need to rebind those events after every load because the page_links are being replaced. An easier and cleaner way to do it is to use event delegation. The best way is to use $.fn.on, which performs better and is less buggy than $.fn.live. Also, since the load will replace the page_links you have to do the background-color stuff in a callback:
$(".vsebina").on('click', '.page_links .page li', function(){
var $page = $(this); // save the page link that was clicked
var path = "/includes/data.php?data=pages&page=" + this.className;
$(".posts").load(path, function(){
$(".page_links .page li").css({'background-color' : ''});
$page.css({'background-color' : '#A5CDFA'});
});
});
This binds a click event to the .vsebina container and checks to see if the clicked item was a page link. If it was, it will fire your handler. This way, even if the content is replaced, your handler will run.
Read more about $.fn.on vs $.fn.live vs $.fn.delegate vs $.fn.bind here
Your click events are getting disconnected when you load new content. Change your page nav code to use the live() method:
$(".page_links .page li").live('click',function(){
$(".page_links .page li").css({'background-color' : ''});
$(this).css({'background-color' : '#A5CDFA'});
$(".posts").load("/includes/data.php?data=pages&page=" + this.className);
});
I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had
<div id="nav">
a link </div>
<div id="content>show the stuff</div>
From the comments below - the OP stated the following :
I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html
Alt 1: Use jquery tabs:
See demo and code here: http://jqueryui.com/demos/tabs/
Alt 2: Hide/show div in same html file:
HTML:
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
jQuery:
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
Demo: http://jsfiddle.net/5NEu3/3/
Alt 3: Load from server ondemand:
To load html into your main div you should use: http://api.jquery.com/load/
Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.
Html
Show content 1
Show content 2
jQuery
$("#nav a").click(function(e){
e.preventDefault();
$('#maindiv').load($(this).attr("href"));
});
Using jQuery, you could do something like this.
This will open the site <a href="example.html"> and put it inside of the <div id="content"> when you click it, and then disable changing the whole site.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">
Some page
Some other page
My page
</div>
<div id="content">
show the stuff
</div>
Something like this:
function setContent(div, content)
{
getElementById(div).innerHtml = content;
return false; // return false to ignore the click
}
a link
to show a hidden div (i think this is what you wanted)
the javascript (using jQuery)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showdiv").click(function () {
$("#hiddendiv").show();
});
});
<script>
the html
Show the Div
<div id="hiddendiv" style="display:none;">Content here</div>
you can see it in action here