I have a one-pager style page in which the top nav links to an anchor within the same page with a smooth scroll effect.
The problem is that that same nav snippet is used in other internal pages, so I want to know:
How do I create the condition of going to the one-pager if the current page is not the one-pager.
This is what I have so far, maybe reading the code makes it easier to understand what I want to achieve.
<ul id="main_menu">
<li>Start</li>
<li>Overview</li>
<li>Make a Gift</li>
<li>Activities</li>
<li>Resources</li>
</ul>
This works fine in my home page which is sample.com/start
But if I am in let's say sample.com/overview, when I click on "Resources" on the main menu links, I should be taken back to sample.com/start#resources instead of sample.com/overview#resources
Any ideas?
On your start page use your code as it is and on other pages put the start#resources into your URL instead of the #resources only.
<li><a href="
<?php if(!strpos($_SERVER['SCRIPT_NAME'], 'start.php')): ?>
start.php
<?php endif;?>
#start">Start</a>
</li>
<li><a href="
<?php if(!strpos($_SERVER['SCRIPT_NAME'], 'start.php')): ?>
start.php
<?php endif;?>
#overview">Overview</a>
</li>
<!-- etc.. -->
This checks if the current page is start.php: if it is, do nothing; if it isn't, add start.php to the href attribute before the #anchor.
I've indented like this to make it easier to read and understand what's going on, but in practice you'll want to take out the indentation inside the href attribute, because whitespace will mess up the resulting url with loads of %20s.
Related questions:
If index.php, show "this", if not, show "this"
How can I echo HTML in PHP?
Also:
http://php.net/manual/en/language.basic-syntax.phpmode.php
Related
I have a Wordpress site that uses an index.php that contains a menu structure that appears only on the index. I'd like to add that menu selection to each page. The menu is executed with javascript.
<div class="filternav" id="maintabs">
<ul>
<li><a id="newsid" href="javascript:showonlyone('news');" title="View Latest Activity" class="active">Latest</a></li>
<li><a class="" id="outlineid" href="javascript:showonlyone('outline');" title="View Course Outline">Outline</a></li>
<li><a id="assignmentsid" href="javascript:showonlyone('assignments');" title="View Only Assignments" class="">Assignments</a></li>
<li><a class="" id="linkstextsid" href="javascript:showonlyone('linkstexts');" title="View Links & Media Resources">Resources</a></li>
<li><a id="peopleid" title="View by People" href="javascript:showonlyone('people');" class="mpix">f</a></li>
</ul>
</div>
Clicking "Outline" on the index.php page lists all posts categorized with that id.
Is there anyway to create href links on subpages to execute the javascript when the links are clicked on subpages.
The function is
function showonlyone(thechosenone) {
$('div[name|="pane"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(".filternav a").removeClass("active");
$("#"+thechosenone+"id").addClass("active");
$(this).fadeIn(150);
}
else {
$(this).fadeOut(150);
}
});
}
I've tried adding these elements to the page.php
Is it your custom theme or are you editing some existing one? Check the WP template hierarchy docs. There is a list of PHP files with their backup template files.
If your theme contained only the index.php, it would be sufficient to put your code only in there. Usually though you'd need to include it also in single.php, page.php, archive.php, search.php and home.php (and probably more).
One of the possible approaches would be creating menu.php file and then including it in all files needed using include(). Another option would be putting the menu to header.php or footer.php as these are already included in all files metioned.
I have a page on my website where users can visit to access the website in the language they need.
For example:
<ul class="locale-list">
<li><a title="Deutsch" href="/de-de/" locale="de">Deutsch</a></li>
<li><a title="English" href="/en-en" locale=en">English</a></li>
<li><a title="French" href="/fr-fr/" locale="fr">Français</a></li>
</div>
Those links will lead to the homepage in that language.
What I'm trying to do is make it so if someone visits this page from an existing page on the website, they are sent BACK to the previous page via this URL parameter:
example.com/languages?target=[page-slug]"
The reason for this is because if you a user is viewing the page "Acme" and needs to change the language, the user should click over to the language selector page, click on which which one they want, and it will kick them back to the "Acme" page so they can review the page in that language.
My thought here is that I can snag the 'target' parameter value and have the links update like this:
<ul class="locale-list">
<li><a title="Deutsch" href="/de-de/[page-slug]" locale="de">Deutsch</a></li>
<li><a title="English" href="/en-en/[page-slug]" locale=en">English</a></li>
<li><a title="French" href="/fr-fr/[page-slug]" locale="fr">Français</a></li>
</div>
This would send the user back to the page they were on, but in the language they need.
I found a solution for this using PHP...
<?php if (isset($_GET['target'])) {?><?php echo $_GET['target']; ?><?php } ?>
...but the website has to be static and can't support the PHP solution.
Is there a similar way to do this with javascript?
Use this code. It may help you.
$(document).ready(function(){
$("button").click(function(){
var pageURL = $(location).attr("href");
alert(pageURL);
});
});
Really struggling to think of a solution to this problem. I have thought anchor links might help (using the #example on the end of a link to scroll to a position on the page) but not sure how best to implement them.
So on the homepage of my site I have a list of links, that correlate to tabs on another page.
The links on the homepage:
(What is e-Bate, What are rebates etc.)
Links
When you click one of the tabs on the other page, it activates a script which shows a certain div below:
Tabs
This is how the tabs are shown:
HTML:
<div class="page-links">
<ul>
<li>What is e-Bate?</li>
<li>What are rebates?</li>
<li>e-Bate features</li>
<li>How e-Bate works</li>
<li>Case studies</li>
</ul>
</div>
<div class="page-contents">
<div id="whatebate" class="hideshowdiv">
<?php echo CFS()->get('whatisebate'); ?>
</div>
<div id="whatrebate" class="hideshowdiv">
<?php echo CFS()->get('what_are_rebates'); ?>
</div>
<div id="ebatefeat" class="hideshowdiv">
<?php echo CFS()->get('e_bate_features'); ?>
</div>
<div id="howebate" class="hideshowdiv">
<?php echo CFS()->get('how_e_bate_works'); ?>
</div>
<div id="casestud" class="hideshowdiv">
<?php echo CFS()->get('case_studies'); ?>
</div>
</div>
jQuery:
jQuery(document).ready(function() {
jQuery(".page-contents div.hideshowdiv").hide();
// Show chosen div, and hide all others
jQuery("a").click(function (e)
{
//e.preventDefault();
jQuery("#" + jQuery(this).attr("class")).fadeIn().siblings('div.hideshowdiv').hide();
});
});
So when one of the links is clicked on the homepage, for instance, the 'What is e-Bate?' link, I want it to go to the other page, and click the corresponding tab, showing the content for that section. Is this possible? Thanks in advance.
This is very possible and you had half the equation with the anchors. Now you just need to write a small function to parse out the URL and check for a certain tag.
So something like this:
$(function(){
if (location.href.indexOf("#example") != -1) {
//This is where you put your function to show the tab
}
if (location.href.indexOf("#anotherexample") != -1) {
//This is where you put your function to show the tab
}
})
Well, if you can use PHP, then it is indeed pretty easy:
First, you need to create a PHP file, obvious with an input parameter, preference, two GET variables, the first one being the link of the page you want to visit and the second one can be, well that depends on how you want it to be, it can be a div id, or a div class or pretty much id of anything you want to click on the second site (You MUST KNOW which button/link you want to click on the second site)
Then first in your php code, store these two things into variables, Let us take $Path and $DivToClick,
Now, use this PHP function:
file_get_contents(path,include_path,context,start,max_length)
Here, the path is an required field, rest is all optional.. and then after that, echo a JQuery code which will do something like this
function ClickTheButton ()
{
$('#divId').click ();
}
Now, let me explain what we are doing here... First, you are sending link to a php script that get all the contents of that webpage and display it on my screen, and then when you are echo-ing the JQuery code, you are telling browser, that yes, this is the part of the page, execute it and simulate the action of click on this page, and thus the click action is simulated and things are done as per your need...
Hope this helps... :)
I have a web application that uses tabbed navigation from a UI kit: http://www.getuikit.com/docs/tab.html.
Each tab will load different content, which is broken down into several php scripts, one per tab.
One (not very efficient, but so for successful) option is to load up all of the tabs content when the page first loads, so to use the standard example:
<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id'}">
<li><a id="1" class="load-tab" href="">Tab 1</a></li>
<li><a id="2" class="load-tab" href="">Tab 2</a></li>
</ul>
<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
<li><?php require('script1.php'); ?></li>
<li><?php require('script2.php'); ?></li>
</ul>
I want to avoid this though, because the scripts are quite hefty so want to load them on demand for better user experience.
So what I've done is instead add holding divs and target them with a jQuery load():
<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
<li><div id="1"></div></li>
<li><div id="2"></div></li>
</ul>
jq:
$(document).on("click", "a.load-tab", function(){
//get the value of the tab clicked in the nav
var tab = $(this).attr('id');
//determine the filename to load based on tab clicked
if (tab == '1'){ var filename = 'script1.php'; }
if (tab == '2'){ var filename = 'script2.php'; }
//load it
$( "#"+tab+ ).load( filename );
});
This works fine ... ish.
Question is this: With the initial (non jquery) method, each script could use the main page's core files that have already been included, e.g. header.php, functions.php etc etc. But when the content is loaded from jquery it seems each script needs to be included in the scipt1.php file and loaded again, which results in duplicate content being created in the DOM.
EDIT
script1.php currently is structured something like:
<?php
require('header.php');
require('connect.php');
require('setUser.php');
require('setParams.php');
require('functions.php');
?>
<div id="header">
//header content
</div>
<table>
//table content
</table>
The page that the navigation sits within, let's just call it index.php for now, already must have those php files included, so you can see the duplication issue.
What can be done to avoid this? Thought of a few options like iframes but seems like it might be a hack.
Your issue is essentially inside 'script1.php' you have something that requires 'connect.php' / data that is populated. But you are doubling up on DOM elements when you pull that in.
Two solutions to that issue are: 1 - create slimmer versions of your lib php files that don't include any DOM elements, only the data required to populate script1.php's data, or
script1.php contains
<?php
require('header.php');
require('connect.php');
require('setUser.php');
require('setParams.php');
require('functions.php');
?>
<div id="header">
//header content
</div>
//Everything inside #content is what you want to pull in
<div id="content">
<table>
//table content
</table>
</div>
And then call
$("#1").load("script1.php #content");
This will only load the HTML that is inside the #content div.
I am writing a simple Wordpress child theme.
There is a portfolio feature which uses flexslider to display the thumbnail from the most recent posts and, when clicking on them, it uses ajax to open up the post content in a div on the page.
I have written a category page based on this, which pulls out all the post categories and displays the thumbnail for the most recent post. However, when I click on the thumbnail, I need the page to go to a new page and not open up in the content div.
The problem is, I am reusing code which looks a bit like this:
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="flexslider">
<ul class="slides">
<li>
<a href="http://the-url-here">
<img src="<?php echo $thumb[0]; ?>" />
</a>
</li>
</ul>
</div>
<?php endwhile; ?>
But there is custom js within the parent theme global footer as follows which handles the opening up of the content, rather than redirecting to the location specified in the tag as usual.
$(".flexslider ul.slides li a").live('click', function(e){ e.preventDefault();
/*Set Function Variables */
$this = $(this);
$selectedthing = $this;
$postId = $($this).attr('data-url');
// and so on...
return false;
});
So, I need to disable the javascript attached to .flexslider ul.slides li a on that one single page template only, preferably without having to change the classes, as I think thatwould open up another can of worms around the css. Remember the theme loads the javascript in the footer, so I assume any changes Imake in the page template will be overridden in the footer.
Any ideas on the best way to approach this?
Just remove click live listener in your child theme. Add this javascript only for that specific page template.
$(".flexslider ul.slides li a").die('click');