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?
Related
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 want to do is a Navbar is stored in a file called index.php. This is the main page which shows up. When the user clicks a tab in the Navbar, in the body part, another php shows up and the tab becomes active. When the user clicks an other tab, the "active" should Switch Places. I'm having trouble with showing the php and switching the active class. Any Help?
What I was able to do:
There's a script above the navbar code which describes the path of the .php file and tells to show it where it is bounded with.
The code:
<script type="text/javascript">
function homeshow() {
$.get("index.php");
return false;
}
function aboutshow() {
$.get("about.php");
return false;
}
</script>
One of Navbar's link or Navigation Button should enable the Javascript/jQuery code to show up between <p></p> tags located in the body. I've tried this:
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#" class onclick="homeshow();">Home</li>
<li><a href="#" class onclick="aboutshow();">About</li>
</ul>
If your trying to check the active tab in a standard click event then the active class wont have been added to the most recently selected tab until after the event.
Subscribe to the bootstrap show.bs.tab instead.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})
See here for more info.
You can use jQuery or javascript code to change the active state from the previous li to the one you clicked on.
Example with jQuery:
$('ul.navbar-nav a').on('click', function () {
$('ul.navbar-nav li').removeClass('active');
$(this).closest('li').addClass('active');
})
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.
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 :) )
I am trying to hide a comment form on my wordpress blog (although the page isn't the wordpress blog, I just get the posts).
If I have comments then the hide/show will work for the form and for the comments. If I have no comments the function doesn't work and i'm not sure why.
If anybody can help I can upload the php files that show the posts (blog.php) and the comments page (comments.php) that is generated within the wordpress theme.
EDIT: PHP code removed as not relevant to error. Relevant HTML code as follows:
...
<body class="home blog logged-in custom-background">
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#content img").addClass("imageSeven");
});
</script>
...
<a id="replytitle" href="javascript:togglecommentform('replyform17');">Show Comment Form</a>
<div id="replyform17" style="display:block;">
...
</div>
...
<a id="replytitle" href="javascript:togglecommentform('replyform6');">Show Comment Form</a>
<div id="replyform6" style="display:block;">
...
</div>
...
You have a problem, in that the output (view source) has a reference to jQuery right at the top:
<body class="home blog logged-in custom-background">
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#content img").addClass("imageSeven");
});
</script>
Some points on this:
Because you don't include a reference to jQuery anywhere - this will cause an error, meaning that even if the rest of you JavaScript is valid, it will fail to run.
You don't need jQuery(document).ready... if you move all your JavaScript to the bottom of the page (just before the </body> end tag.)
Your main problem seems to be a confused code structure. Based on the messy code you have (no offense), I would recommend using a library like jQuery:
Step 1: Remove all the JavaScript you have in that page.
By the looks of things, that just means the <script> block thats right beneath your <body> tag.
Step 2: Replace these <a> start tags:
<a id="replytitle" href="javascript:togglecommentform('replyform17');">
<a id="replytitle" href="javascript:togglecommentform('replyform6');">
With these:
<a id="replytitle17" href="#">
<a id="replytitle6" href="#">
Step 3: Just before the </body> tag, include the following:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var images = $('#content img');
if (images.length > 0) { images.addClass("imageSeven"); }
$('#replytitle17').click(function() { $('#replyform17').toggle(); });
$('#replytitle6').click(function() { $('#replyform6').toggle(); });
</script>
This should achieve everything your page has, in jQuery.