I am using a jquery tabbed interface here http://www.imashdigital.com/#2 and would like to return the tab number in php.
Ideally I would like to run a javascript function (on a timer) that continually updates a global php variable with the current tab.
Based on this php value, 1 through to 4, I will then load a different sidebar.
I would be grateful for any help and some code examples as I am a novice.
Kind regards
Jonathan
The part of an URI that comes after the hash is never sent to the server. There is no way that PHP can access it. Use a querystring parameter ($_GET) instead. Or use client side scripting (javascript).
I would suggest you do not run a timer but instead attach the $.post to the event "tab activation". This will make any tab change applied in real time and it won't trigger needless requests.
I have used tabbed panels in a couple recent projects, and the solution I've used is the following:
HTML
<ul class="tabs">
<li>English</li>
<li>Français</li>
</ul>
<div class="panel" id="en_en"><!-- Content --></div>
<div class="panel" id="fr_fr"><!-- Content --></div>
jQuery
// the currently selected tab, or a default tab (don't forget to prepend the #)
var tab = location.hash || '#en_en';
// register a click handler on all the tabs
$('ul.tabs a').click(function(event){
event.preventDefault(); // prevents the browser from scrolling to the anchor
// hide all panels, then use the link's href attribute to find
// the matching panel, and make it visible
// you can, of course, use whatever animation you like
$('div.panel').hide().filter( $(this).attr('href') ).show();
).filter('[href*='+tab+']').click();
// above: in case of refreshing/bookmarking: find the tab link that contains
// the current location.hash, and fire its click handler
It works well because the server-side code doesn't need to know which tab is selected, but it also supports refreshing or bookmarking a specific tab without requiring the user select the tab again.
Related
I am trying to load a specific portion of an article with using of jquery load() function when a tab is clicked. The tab is inside an article and trying to show another article within the first article from where the tab is being clicked. The jquery code I have put inside the template.php of choosen template. The main problem is that when I click nothing is comming inside the first article under the tab. I am using joomla2.5.11 version. Please give some suggestion.The jquery code what I am trying is shown below:
$(function(){
$("h3.menuheader").click(function(){
$(".active-tab").removeClass("active-tab");
$(this).addClass("active-tab");
$(".tabcontent-ul").slideUp();
$(".tabcontent").load("http://www.mpsinfoservices.com/projects/teamzstudio/web-application-development#link1",function(){
$(".tabcontent").slideToggle();
});
});
});
Unfortunately I don't think you've provided enough to diagnose this issue. But perhaps I can help with how I would diagnose.
To start with, try this instead:
// http://www.mpsinfoservices.com/projects/teamzstudio/web-application-development#link1
$(".tabcontent").load("http://www.google.co.uk",function(){
$(".tabcontent").slideToggle();
});
Then open up your developer tools and see if a call is being made to load that data.
If it is, then you need to consider that it might be loading the data and putting it in another element you can't see.
So to test, create a new container on the page near your footer, which you know will be visible with a specific #ID like <div id="testID"></div> and load into that. Once that is working, look to confirm your .tabcontent element is the one you want using something like console.log().
I have an index.php with two major sections: the navbar and the main-content. The navbar contains links which will load another webpage to the main-content through this jQuery code:
jQuery('#main-content').load('sampleurl');
Some of these web pages contain links to another web page, so I want to add a back button.
I tried using the history.back() and history.go(-1), as well as the $_SERVER['HTTP_REFERER'], but they don't really work in my case.
How will I add the back button in this situation?
You should keep your last viewed page in JavaScript variable or in value of hidden input and then you only need to add button with
jQuery('#main-content').load(old_url);
You must always update your variable when you load your next page via jQuery('#main-content').load('sampleurl');
Try manipulating the javascript location or location.hash
https://developer.mozilla.org/en-US/docs/DOM/window.location
Of course, you need to be able to turn your URL back into the relevant page content too.
In conjunction with both Charlie and Michael's answers, since you are already using jQuery, another option is to include the jQuery Address plugin.
You can implement this idea, by creating a function to read a hash path to load new content. Following this, the content can be navigated by the built-in back + forward buttons.
The only challenge I foresee with this implementation is associating the new content with the hash path.
Good luck!
Just an idea: Add hash to Url whenever you load the page; and then you can use history.back()
$(function(){
if(window.location.hash === 'sampleurl'){
jQuery('#main-content').load('sampleurl', function(){
window.location.hash = 'sampleurl'; //<<-- match with your loaded page;
});
}
});
good luck !
I have a drop down user menu that contains child links that I cannot get to redirect properly. I unfortunately did not code the front-end, so I'm just trying to get it to link to dynamic PHP urls. I'm also working within the CodeIgniter framework, by the way. There are two clicks in the user's process (similar to Google's user icon). 1. You click the user image and drop down arrow, 2. You see profile, settings, logout.
With the following script, clicking the drop-down arrow redirects to the first link, profile, without even doing the drop-down animation. Any thoughts?
Here's the PHP file:
<div class="user css3">
<img src="images/user.jpg" alt="user" class="css3" />
<div class="child css3">
<ul class="user_links">
<li>Profile</li>
<li>Settings</li>
<li>Logout</li>
</ul>
</div>
</div>
Here's the JavaScript for drop-down arrow button:
$('div.user').click(function() {
$('div.user div.child').slideToggle("fast");
$('div.live div.action div.category div.child, div.live div.action div.sort div.child').slideUp();
return false;
});
Here's the JavaScript that I came up with for the <ul> (I'm not much of a JS dev. haha):
$('ul.user_links li a').click(function() {
document.location($(this).attr("href"));
});
Any thoughts are greatly appreciated!
I said in the comments:
Remove the js for the <ul>, and then return false from the other block, and it should work.
Here is why: when you click an anchor, the event starts propagating upwards through the document structure (the DOM). When it reaches another element wired to catch the click event, it runs this element's event handler.
When you click the anchor, the click handler on div.user runs. The last statement there, return false, means "stop the event propagation, and prevent the default behavior". On an anchor, the default behavior would be to follow the link. Your code told the browser not to do it.
Not sure if this is the root cause, but anyways use:
window.location = $(this).attr("href");
Instead of
document.location($(this).attr("href"));
try adding an onclick event to the drop down that returns false, thus stopping the default action for links.
<img src="images/user.jpg" alt="user" class="css3" />
Or changing it so it's just a 'span' tag instead of a 'a' tag. You'd have to change the JQuery selector that causes the drop down as well so that it looks for 'span' instead of 'a'
I'm not sure why you need change the default behaviour of the links 3 links though, they would redirect to the href location anyway surely?
<ul class="tabs" style="background: ">
<li>Payment Gateway Basics</li>
<li><a href="javascript:tabSwitch('tab_4', 'content_4');" id="tab_4" >Contact Us</a></li>
</ul>
These are my tabs, once I submit a form in the "contact us" tab, it goes back to the first tab. Can anyone tell me how to stay in the same tab?
I'm using PHP server side switching, I'm using JavaScript.
(I used href not onclick in the listing. Stack Overflow doesn't allow to use more href so I changed it into onclick, before this post was edited).
no directly provision
You have to pass some querystring
Read it on page_load in javascript
and set the tab from javascript based on the query string value.
You'll need some initialization script to determine what tab to activate when loading your page. The most common way is to add an anchor to your request url and read that using javascript. Evaluate that value to determine what tab to activate and do so with your javascript tabSwitch function.
This is a very simplistic example but illustrates the idea. This should be executed after domready.
var activeTab = self.document.location.hash;
if(activeTab !== ''){
switchTab(activeTab);
}
Basically, I want the same effect as the oldschool html 'frameset' I think.
Take a look at this page please:
http://onomadesign.com/wordpress/identity-design/alteon-a-boeing-company/
If a user selects a project from industry -> transportation for example, I would like that the right scrollmenu keeps its initial state when the new project page comes up. So they won't get lost and have to click again to be in the same submenu section.
So, the right thumbnail navigation should stay in the same way, I don't want it to reload.
Do I have to do it with frames or iframes? Or can I make some kind of jQuery call to 'not reload' that div? Maybe PHP? I'm sorry, I am not a programmer from origin.
Update:
Guys, I managed to put the whole thumbnail navigation code into a seperate php file, called sidebar.php. Now this gets called in my single.php (Wordpress) by <?php get_sidebar(); ?>.
Should it now be easier to make this sidebar.php NOT refresh on page reload? I've been looking at cookies, php sessions, iframes.. but I can't get it to work.
Any more help would be greatly appreciated!
Facebook kinda does this without frames for optimization's sake. They take every single link and, if supported, using AJAX to load the page content without reloading the layout.
Obviously, this sort of thing may require significant restructuring of the internals of your app. Another option is to simply store the menu's state as a cookie on link click (see the jQuery Cookie plugin) and, on every reload, either have Javascript look at the cookie and dynamically restore the menu to its correct state, or use your internal PHP to read the cookie and decide what menu to display.
But if you get really desperate, you may end up falling back on frames. Sometimes that can be okay - but try everything else first :)
You also can detect what menu item was activated (you got the page request due to clicking on the corresponding link) and use this information to restore/select this menu item.
At least that is what I do and... No cookies or AJAX required!
You can use a technique known as "AHAH" Asynchronous HTML and HTTP. Essentially you're doing a jQuery
$.post("whatever.html",function(data) {
$("contentdivelement").html(data);
}
You can wrap this in a function like:
updateContent(sPage) {
$.post(sPage,function(data) {
$("contentdivelement").html(data);
}
}
This will load the content from your "frame" page into the div without reloading the page.
You can also bind to each of the navigation links and use their HREF as your path to load in your content div such as:
$(".menuLink").click(function() {
var menuLink = $(this).attr('href');
updateContent(menuLink);
/* prevents the browser from taking the parent to that link */
return false;
});
ADDITION:
Your menu may look like this:
<ul class="myMenu">
<li>Frame 1</li>
<li>Frame 2</li>
</ul>
Also,
If you want it to remember the page you're on you can use cookies or #anchors. There are many ways to add "tab" or "menu" anchors but one way would just be to use a jQuery plugin.
The most COMMON and TRENDY way to do it is to use #anchors. Your browser address bar ass #frame1 to the end so when the page is refreshed or reloaded it will load up "frame1" automatically with some additional code.
You can even called the anchor #/frame1.html and read the anchor in
$(document).ready(function() {
/* you'll need to either use a plugin or parse out the anchor from your current browser address bar */
updateContent(anchorContentVar);
});
Instead of updating your content using click-handlers I suggest a slightly different approach. Just replace your hyperlinks with this kind of link:
#info_page
Now set up a simple interval that reads out the current URL and updates the DIV accordingly:
__LOC = document.location.href;
setInterval(function(){
if (__LOC!=document.location.href) __LOC=document.location.href;
var fetchURL = __LOC.split("#")[1];
$.get( "/getcontent/"+fetchURL, function(d){ $("#mydiv").html( d ); } )
} 1000);
This allows visitors to use bookmarks as well.