<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);
}
Related
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?
I have 3 links on page index.php:
<div id="languages">
<a href="index.php?page=test&lang=en" id="flag">
<img src="./images/flags/en.png" class="flag_off" alt="en" title="en">
</a>
<a href="index.php?page=test&lang=sk" id="flag">
<img src="./images/flags/sk.png" class="flag_off" alt="sk" title="sk">
</a>
<a href="index.php?page=test&lang=cz" id="flag">
<img src="./images/flags/cz.png" class="flag_on" alt="cz" title="cz">
</a>
</div>
each of them is passing lang parameter and on same page (index.php). Then I have variable
$_GET['lang']
which will call function for changing language:
$obj->change_language($_GET['lang']);
Q: How can I do this by using jquery get() function without showing parameter in url of index.php page?
(Pass variable $lang through jquery)
I don't like URL with parameters after calling function for example:
index.php?page=test&lang=sk
I suppose using .click() function as handler.
EDIT:
I have something like this:
$(document).ready(function(){
$("#flag").click(function(){
$.get('index.php',
{ lang: "VARIABLE LANG FROM HREF" }
);
});
});
How to parse sk from href index.php?page=test&lang=sk part ?
If your problem is the parameter in the URL, you could try setting it with Ajax (http://api.jquery.com/jQuery.ajax/) and than reloading the page. I don't think you could get around refreshing since your content should be changed to the selected language as well?
$(".flag").click(function(event) {
event.preventDefault();
$.get(this.href, function(data) {
location.reload();
});
});
You don't need jQuery at all do to this. You can do something like
<div id="languages">
<a href="changeLanguage.php?lang=en">
<img src="/flags/en.png" alt="en" title="en">
</a>
<a href="changeLanguage.php?lang=sk">
<img src="/flags/sk.png" alt="sk" title="sk">
</a>
<a href="changeLanguage.php?lang=cz">
<img src="/flags/cz.png" alt="cz" title="cz">
</a>
</div>
Then, in this changeLanguage.php, you do your $obj->change_language($_GET['lang']); (where you should check/cast the value of the lang parameter), then, you can redirect the user to the referer page with something like
$url = (string) $_SERVER['HTTP_REFERER'];
if (0 === strlen($url)) {
// redirect to the home page if there is no referer
$url = '/';
}
header('Location: '.$url);
This way, you don't need any Javascript code to this. I think this is important in some ways:
you only do one HTTP request instead of two with the AJAX solution,
when the user click, the browser reacts immediately: the request is sent right after the click so the "loading icon" of the browser is showing that something is happening
this effect of action->reaction is something important in the User Experience, with the AJAX solution you have to wait for the first request to finish to trigger the "loading icon",
the location.reload() used with the AJAX solution can show up a dialog like Would you like to submit the form again ? if the user has arrived to this page with a POST request, and he might not understand what's the relation between its action (change the language) and this "error" message, which leads to a degraded User Experience too,
if your Javascript is broken is some way, those link might not work at all if your page to change the language only change the language. Let's say the page index.php?page=test&lang=en is doing something like $obj->change_language($_GET['lang']); exit;, because this page's purpose is only to change the language. Then if the Javascript code is not triggered for any reason (the code is broken, handlers are not bound, the user open up the page in a new tab), then the page loaded will be a blank page. And if you handle this case, then the "change language page" would look like a normal page, that's ok but it means that you'll do two HTTP requests with a "complete" response (one for changing the language, one other after the location.reload), and this leads to the first point,
use Javascript only where it's needed :)
What do you think ?
I have an overlay popup box (DIV + JavaScript + some CSS) which is toggled by a link, like this:
<a href="#" onclick="popup('popUpDiv')">
The box that pops up contains an iframe. Now I want different links on my page to load different iframes when the box opens; so that link A would toggle the box to appear, and load iframe1.html inside the box, while link B would toggle the same box to appear, but load iframe2.html inside the box, and so forth.
I'm a beginning programmer, and I first figured maybe this could be done with PHP, by putting something like this inside the popUpDiv:
<iframe src="http://mysite.com/iframe<?php echo $_GET ["iframeid"] ?>.html">
... and then simply adding ?iframeid=x to each link's href, where x is the id of the iframe to be loaded.
This obviously won't work in practice though, because it requires a page reload, and when the link is clicked, the popUpDiv is toggled to open, but at the same instant, the page reloads, now with the ?iframeid=x query string in place, but too late, since the popUpDiv disappeared on reload.
Is there perhaps a JavaScript equivalent that could be used, or can anybody suggest another way to make this work?
FYI, this is the kind of popup box I'm working with:
http://www.pat-burt.com/csspopup.html
I finally found a really simple way of accomplishing this without additional JavaScripting, by simply using the target attribute:
<iframe name="myfavoriteiframe">
Then:
This is a link.
P.S. Just FYI for any of those out there who might want to use this feature with Vimeo's JavaScript API, as I'm doing: In order to make API buttons work with this target method, it seems like the iframe src-attribute cannot be left blank. You need to specify a link to any of your videos in the src, so that a video loads into the iframe on page load, like this:
<iframe name="myfavoriteiframe" id="player_1" src="http://player.vimeo.com/video/[the_number_of_your_video]?api=1&player_id=player_1">
I simply inserted the URL to the first video on my page, but you can use any of them, since they're hidden anyway.
Then link to any of your videos using the target method described above, and the pre-set iframe video will be replaced by a video of your choice.
Create two divs with the two variations of content (the two iframes with each specific URL). Then toggle by the name of the div.
<a href="#" onclick="popup('popUpDiv1')">
<a href="#" onclick="popup('popUpDiv2')">
Set the id attributes of the div elements appropriately.
Rather than adding something to the popup DIV element, I would add a required link to the href property of the link that you use to open the popup:
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
And then inside the popup function I would take the href parameter of the link that has triggered the event and use it in a popup:
function pre_popup(id) {
// Take the href parameter of the link
var href = this.href;
// And then use it in the iframe
window.frames["your_iframe"].src = href;
// And then pop it
popup(id);
}
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.
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.