I want to create ajax updated tabs for user profile tab in frontend magento like categories tab in product management. I was use this code:
<ul id="page_tabs" class="tabs">
<li>
<a id="page_tabs_account" class="tab-item-link ajax active" href="http://localhost/magento/customer/account/" name="account">Account Dashboard</a>
</li>
<li>
<a id="page_tabs_account_edit" class="tab-item-link ajax notloaded" href="http://localhost/magento/customer/account/edit/" name="account_edit">Account Information</a>
</li>
</ul>
<script>
var FORM_KEY="<?php echo Mage::getSingleton('core/session')->getFormKey() ?>";
var varienGlobalEvents=false;
page_tabsJsTabs = new varienTabs('page_tabs', 'tabcontainer', 'page_tabs_account',[]);
</script>
Also add js file in page.xml like:
<action method="addJs"><script>mage/adminhtml/tabs.js</script></action>
When we click on tab then ajax is call but return data is whole page data like with header, footer, left sidebar. We want only perticular tabs assigned .phtml file data (right sidebar).
So how we get that. If other method is easy then let me know.
Thanks.
You would need to create a custom controller that handles AJAX layouts.
Note that varienTabs will fetch the page set on your href links. Having http://localhost/magento/customer/account/ on your tab links will make varienTabs just fetch the content at that URL.
Also, you will need special markup where the content will be posted. There should be a div which ID consists of the ID of your tab link ID + '_content'. E.g.:
<div id="page_tabs_account_content" style="display: none;"></div>
<div id="page_tabs_account_edit_content" style="display: none;"></div>
(Edit) you would aso need the 'tabcontainer' div. It is the second parameter passed to the varienTabs function. Just wrap the divs above on it.
Related
I'm building a website while also trying to keep changing code an easy task.
For that, I include the navbar with <?php require_once('./includes/navbar.php'); ?> so that I only need to change the navbar.php to see changes site-wide.
I also use Bootstrap 5 and let it take care of styling the currently active page by using <a class="active"> (and also using the recommended aria-current="page" attribute).
Now my problem is that I need to somehow dynamically apply the above mentioned class and tag to only the active page. I have no idea how to do that in an elegant way but thought that this might be possible in PHP?
Does somebody know how to do it?
Click here to see code of the navbar
I did some research and managed to fix my problem with a little bit of javascript code which you can just add with <script></script> tags anywhere in the html code:
Give every link in the navbar html a unique id (e.g. id="pricing").
Add class="active" to active page and Bootstrap.css will style that element accordingly.
Remove class="active" from the other pages/links which are not active.
Set aria-current="page" to active page and set aria-current="none" to inactive pages.
in navbar.php:
<a id="home" class="nav-link active" href="index.php">Home</a> <!-- 1. -->
<a id="pricing" class="nav-link" href="pricing.php">Pricing</a> <!-- 1. -->
in pricing.php:
<script>
var pricing = document.getElementById("pricing");
pricing.classList.add('active'); //2.
pricing.setAttribute("aria-current", "page"); //4.
var home = document.getElementById("home");
home.classList.remove('active'); //3.
home.setAttribute("aria-current","none"); //4.
</script>
Hope this may help someone else too.
How do I format a link that will go to an anchor within a PHP document?
For example:
http://chambervu.com/lososos/index.php#p=10 - does not display the intended result, however if I go to http://chambervu.com/lososos/index.php then once that page is displayed if I append "#p=10" then everything displays as intended. How would I form the link to display page 10 directly?
The "pages" in my index file are setup like this:
<li class="page" data-name="5">
<div class="blah....blah"
</div>
</li>
</div>
</li>
<li class="page" data-name="6">
<div class="blah..blah"
</div>
</li>
Fragments point to an ID on the page, when you visit an HTML page with a fragment in the URL, the browser tries to find an element with a matching ID and scroll to it.
The javascript you have running on the page takes the fragment when it changes (after the page has loaded) and parses it to determine which page to show.
Linking directly to that page like you want would require some editting of the javascript at the very least.
I'm new to Wordpress and PHP and this might be a dumb question, but I'm trying to link one of my menu items to one of the sections on my index page.
I know that if I just wanted to link it to the index I should use this:
<?php echo home_url(); ?>
But I want the link to send the user to the "About" section. Basically, I need to know how to do this:
index.php#about
but with PHP.
Thank you!
You're on the right track.
The ideal way to do this would be to add a <a name="about></a> tag to the appropriate section of your template. This is called an HTML anchor and is how those #tags know where to point to.
Given that this is Wordpress, you could probably also get away with just appending that to the title of the appropriate section. So wherever you specified 'call this section "About"', you could probably redo it as 'call this section "<a name="about">About</a>"' and then you'll be able to link to it using anchors like in your example-- About
If you are new to php, maybe you should use wordpress's editor ?
In your page (in the admin page), you can put any html you want.
In the editor, you can add custom links (with anchors or not) and you can put a div tag in the "html" tab.
So if you put your link at the top of your page and put your section in a div id="myanchor", it should do it !
You shouldn't do this with HTML or PHP but rather with JS. Specifically for long pages and require in-page navigation, I really like the scrollTo jQuery plugin.
In practice, you'll have some HTML containers that look something like this:
<!-- Your menu -->
<ul>
<li id="about-button"></li>
<li id="product-button"></li>
<li id="something-button"></li>
<li id="else-button"></li>
</ul>
<!--Your page sections-->
<main class="my-page">
<section id="about"></section>
<section id="product"></section>
<section id="something"></section>
<section id="else"></section>
</main>
Once you've included jQuery and the scrollTo plugin, you'll have some JS that looks like this:
$('#about-button').click(function() {
$.scrollTo($('#about'), {
duration: 800,
offset: -50
});
return false;
});
The JS is saying that once you click on the #about-button, take 800 milliseconds and animate the page down to -50px before the position of the #about HTML element. You could just setup a series of click functions for each button and you'd have a slick in-page nav system.
I have tried to look for this, but I am not sure exactly how to phrase what I am looking for, so please excuse me if this is a duplicate question. I have a .php page with 5 divs that are link controlled by jquery. loading the page initially has the home div displayed and the rest hidden. Clicking on a link causes the home div to fade and the new div to show in it's place using a jquery script called at the bottom of the page. It is also shown in the url as http://example.com/#visible-div. What I would like to be able to do is link to the page and have a specific section load. For example, if I link to http://example.com/#div4, then the page will load with div4 showing. I was thinking that by using a php get command at the beginning, I could get the request and load it, but I am not sure how I would go about that. Here is my existing code:
<div class="menulistbot">
<ul id="divchange">
<li><a class="homediv" href="#home">Home</a></li>
<li><a class="div1" href="#div1">div1</a></li>
<li> <a class="div2" href="#div2">div2</a></li>
<li><a class="div3" href="#div3">div3</a></li>
<li><a class="div4" href="#div4">div4</a></li>
</ul>
</div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<script call>
And here is my controlling script
//Main site operation script
function fadeAll() {
$("#homediv").fadeOut(600);
$("#div1").fadeOut(600);
$("#div2").fadeOut(600);
$("#div3").fadeOut(600);
$("#div4").fadeOut(600);
}
$(".div1").click(function() {
fadeAll();
$("#div1").delay(600).fadeIn(1500);
})
$(".homediv").click(function() {
fadeAll();
$("#homediv").delay(600).fadeIn(1500);
})
$(".div2").click(function() {
fadeAll();
$("#div2").delay(600).fadeIn(1500);
})
$(".div3").click(function() {
fadeAll();
$("#div3").delay(600).fadeIn(1500);
})
$(".div4").click(function() {
fadeAll();
$("#div4").delay(600).fadeIn(1500);
})
As it is the code works fine, but like I said, I want to be able to link directly to div4. Is that possible and if so, how?
I have a multi-page form which works on the principle of loading all of the pages inside the DOM under different DIV id's and as you progress through the form, it simply ads a style="display:none" to the Div's which should not be displayed.
I have a problem where two pages need to have the same content, however as i am using javacript and jquery, i am getting conflicts (as technically, both pages are loaded and the scripts are conflicting).
Can i get a php if Function to say - IF Div id gform_page_2_2 has style="display:none" load (block of html a), and IF Div id gform_page_2_3 has style="display:none" load (block of html b), otherwise load nothing.
How would i go bout doing this?
I'm not quite sure what exactly you are asking but since you have a way to determine when to apply style="display:none" you can use a boolean value display_none=true and use that in your if.
This is a sample code. Here, I have made use of jQuery here. I have included each page's content inside separate DIVs in my index page. Then displayed the content of the page upon clicking the menu in my navbar. I hope this will give you an idea. :)
JScript:
<script type="text/javascript">
$('.nav_button').click(function (){
var page = $(this).text().toLowerCase();
$('#content').html($('#'+page+'_page').html()); //display content of div(that holds the content of the respective page) in the "conetent" div
$('html, body').animate({scrollTop: $("#navbar").offset().top}, 'slow'); //scroll back to the top
return false;
});
</script>
HTML:
<!-- Navigation menu -->
<div id="navbar">
<a class="nav_button" href="#">Home</a>
<a class="nav_button" href="#">About</a>
<a class="nav_button" href="#">Contact</a>
</div>
<div id="content">
<!-- Here page content will be displayed -->
</div>
<!-- This div holds the contents of each page -->
<div style="display:none;">
<!-- Contact Page -->
<div id="contact_page">
You can contact me through this email....
</div>
<!-- About Page -->
<div id="about_page">
About me? I love coding...
</div>
<!-- Home Page -->
<div id="home_page">
Yo! You are at my home page. Check out my whole site and enjoy :)
</div>
</div>
I hope this will help :)
If you want to see it in action, goto: www.magcojennus.co.cc (it's a site that I have created for my college day :) )