I'm trying to give all "posts" title in a specific page. So If someone clicks on that posts, it's content must be toggle below the title and if some clicks the title again then the content must hide.
I solved half of the problem with the help of WP-Archives Plugin. And my page is looking like this Check this image here.. So these are
"Archives" titles links. And if someone clicks on it, it will take to the that.. I want the content in the particular posts to be in the same page in the form of toggle (in abvoe image..). Is it possible?
It sounds like you're describing an accordion function. Wordpress offers a bunch of accordion plugins. Here are a few:
http://wordpress.org/plugins/tags/accordion
If you're looking for something with a little more control you might want to look straight into the jquery accordion widget. See information here: http://jqueryui.com/accordion/
EDIT
To add the accordion plugin to your list, you'll need to apply the following changes. Add the following to your head tag:
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
In your wp-archives plugin modify the following line:
echo "<div class='list'><ul>\n";
to this:
echo "<div class='list'><ul id=\"unique_id_of_your_choice\">\n";
As for the content that should follow each post title, You will need to update the plugin once again to include the archive post content(either the entire post or a snippet, whichever you choose). It should look something like this if the database field holding the content were named "post_content".
$arcresults2 = $wpdb->get_results("SELECT ID, post_date, post_title, post_content, comment_status FROM " . $wpdb-> posts . " WHERE post_date LIKE '$thisyear-$thismonth-%' AND $current_posts AND post_status='publish' AND post_password='' ORDER BY post_date DESC");
...
...
$arc_title = $arcresult2->post_title;
$arc_content = $arcresult2->post_content;
...
...
echo "<li class='list'>" . wptexturize($text) . "\n";
echo"<ul><li>".$arc_content."</li></ul></li>\n";
This is possible with an accordion script like jQueryUI Accordion, but if you want to apply this to your posts page, you will also have to edit your page template.
Here is one simple method (see source):
1) Add the following to your theme's functions.php
function add_accordion_script() {
wp_enqueue_script('acc', get_template_directory_uri() . '/acc.js', array('jquery-ui-accordion'));
}
add_action('wp_enqueue_scripts', 'add_accordion_script');
2) Create acc.js in your themes directory thus:
jQuery(document).ready(function($) {
$( "#accordion" ).accordion({
header: "div.accordion-header",
collapsible: true,
active:false });
});
3) Finally modify your theme page to something like this:
<?php if (have_posts()): ?>
<div id="accordion">
<?php while (have_posts()) : the_post();?>
<div class="accordion-header">
<h1><?php the_title();?></h1>
<?php the_excerpt();?>
</div>
<div><?php the_content();?></div>
<?php endwhile; ?>
</div>
<?php else:?>
<p><?php _e('No posts'); ?></p>
<?php endif;?>
Depending on your wordpress template this may be more complicated to implement than is outlined above... in which case you'd have to provide more information.
Another alternative would be to use some sort of plugin specifically designed for this purpose. I found three that might work for you, but they do not seem to be well supported/maintained... so the above method may still be your best option:
Wordpress jQuery Accordion Plugin
WP Post Accordion
Read More Right Here Plugin
Collapse-O-Matic Plugin for wordpress is another alternative for this which is working like a charm for my website but only if I'm changing it to default theme of Wordpress :(. Seems like there is any glitch in my theme. Anyways, thanks for all the responses posted above.
Related
I have a JSON object which store data about a website RSS feed:
var varNameSpace = <?php echo json_encode($article); ?>;
and I'm on the way to develop a Ticker, I need to display all objects elements on <li> tags and add the effect of scrolling dynamically.
Before I have used a javascript function to do that scrolling my javascript function look like:
<script>
var boutton=document.getElementById("start");
function startTicker(){
$("#news li:first").slideUp(function(){
$(this).appendTo($("#news")).slideDown();
});
}
boutton.onclick=setInterval(startTicker, 3000);
</script>
my HTML page look like:
<div>
<?php
foreach(getFeed() as $article){
?>
<ul id="news">
<li><h3><?php echo $article['title']; ?></h3></li>
</ul>
<p>
<?php echo $article['description']; ?>
</p>
<?php
}
?>
</div>
Once I execute this page, it was just the first element of the list which scroll the other list elements was considered as a unique element.
So, how can i scroll over all the list elements ?
I haven't tested your code, but I suspect the li:first has something to do with only selecting the first element.
No need to reinvent the wheel with this though, there are some great plugins out there that can achieve what you're asking for with minimal effort.
One such example that I've used before is http://richhollis.github.io/vticker/
It was quite easy to implement, and as you're already using jQuery won't require you to load any additional libraries.
On the other hand, if you're set on writing your own, this CodePen by Noel Killebrew looks like it would be a good starting point https://codepen.io/noelietrex/pen/ZGGoZM
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'm adapting a javascript toolbar to a Joomla CMS module. This javascript toolbar has many buttons whereby each buttons invoke a javascript file (plugin)
Current toolbar was done on Javascript.
This is the code to load the toolbar.
Initial code to call the toolbar and its plugins;
"undefined"==typeof window.AtKit?(d=document,jf=d.createElement("script"),jf.src="http://domain.com/jw3c/atkit.min.js",jf.type="text/javascript",jf.id="AtKitLib",d.getElementsByTagName("head")[0].appendChild(jf),window.AtKitLoaded=function(){var c=null;this.subscribe=function(b){c=b};this.fire=function(b,e){null!=c&&c(b,e)}},window.AtKitLoaded=new AtKitLoaded,window.AtKitLoaded.subscribe(function(){__start()})):__start();
function __start(){var c=window,b=AtKit;$lib=b.lib();var e="ftw resize fonts spellng dictionary insipio-tts readability wordprediction css overlay shortcutkeys tooltip".split(" ");b.importPlugins(e,function(){b.setLogo("http://domain.com/services/logo.jpg");b.setName("JW3C");"undefined"==typeof c.AtKitLanguage?b.setLanguage("en"):b.setLanguage(c.AtKitLanguage);var a;a="Version 1.0.0<p style=\"line-height:120%\">Created by <a href='http://domain.com'>S</a>, <a href='http://www.domain.my/'></a>.<br><br>";
a+="Fugue Icons © Brandon Aaron under MIT licence.<br>';a+="Word prediction provided by <a href='http://www.aitype.com/'>AIType</a>.<br>";
a+="Text-to-Speech provided by <a href='http://www.acapela-group.com/'>Acapela Group</a>.";a+="</p>";b.setAbout(a);$lib.each(e,function(a,c){b.addPlugin(c)});b.addResetFn("reset-saved",function(){b.clearStorage();null!=typeof localStorage&&localStorage.removeItem("ATBarAutoLoad")});b.addCloseFn("close-saved",function(){null!=typeof localStorage&&localStorage.removeItem("ATBarAutoLoad")});b.render();$lib(".at-btn:first a").focus();null!=typeof localStorage&&localStorage.setItem("ATBarAutoLoad",1)})}
;
The full javascript of the toolbar:
https://github.com/AccessAtECS/AtKit/blob/master/atkit/latest/atkit.js
One of the javascript button in the above code calls the following plugin to be included in the toolbar.
http://domain.com/services/jw3c/plugins/tts.js
As per the above code, the toolbar appears on top of my site with all plugins(javascript files).
Right now I dont want the toolbar invoke itself. But need to embed each item of these toolbar plugins into my php file below;
<div id="samsc-<?php echo $module->id?>" class="samsc <?php echo $css; ?>">
<div class="inner normal-msg">
<?php echo $text; ?>
//Need add javascript buttons here
</div>
<div class="buttons">
<span class="icon-toogle opened"><?php echo JText::_('TOGGLE_BAR'); ?></span>
</div>
</div>
Any hints greatly appreciated.
You are best looking at a non-minified version of the code to see how it works.
There appears to be one for this here:
https://github.com/AccessAtECS/AtKit/blob/master/atkit/latest/atkit.js
I'd imagine from that you should look around lines 94, as that "position:fixed" is what is fixing the bar to the top of your page.
Line 387 would be my guess where it is saying it should render the html next to the opening body tag.
If you don't want to edit this code directly, then it may be simpler (though bulkier) to use css and javascript to modify the display of the bar after it has loaded. For example, onload you could strip the "position:fixed" style and change the left and top values to match the left and top values of your module.
I have a static website, but I have included different bits of the page (head, header, image slider, footer) by php's include function, to make the website manageable.
Now the problem is that the current page's name in the menu-bar must have selected="selected" to show the current page's name pressed in the front end.
I made a solution of giving every menu-item an id and than injecting the following code to end of every page and setting that page's id (the home button id selected in the example code).
<script type="text/javascript">
$(document).ready(function() {
$('#home').addClass('active');
});
</script>
Now the problem is that I must include this script in every page and to change the id to that page (eg in the above script I have pasted the code in the home page,
I wanna have a solution where I add only once chunk of the code to my footer.php and it automatically detect the current page and set the select="selected" for that menu-item.
Thank You all in advance...
In PHP, you can put the active class on your menu definition (if it's the same on every page), if you know the current page visited:
<ul>
<li <?php if($current_page == 'home') echo 'class="active"'; ?>>Home</li>
<li <?php if($current_page == 'blog') echo 'class="active"'; ?>>Blog</li>
<li <?php if($current_page == 'contact') echo 'class="active"'; ?>>Contact</li>
</ul>
and so on... You don't need Javascript for this (which is disable by some users). The only need is to get the $current_page variable, which can be based on the URL or the ID of the page, depending on your current website architecture.
The solution I discovered for my (specific) problem is,
I gave id(s) to all the menu-items, and those ids were the namesake of the related files (the files to which they'll link), for example the button which links to the home.php was given the id of "home" and the button which was linking to the profile.php was given the id of "profile" than included the following code in the footer
<?php
$php_self = $_SERVER['PHP_SELF'];
$basename = basename($php_self);
$id = basename($basename, ".php");
?>
<script type="text/javascript">
$(document).ready(function() {
$('#<?php echo $id; ?>.addClass('active');
});
</script>
( jQuery used, but if the website doesn't have jQuery already, than the document.getElementById must be used ).
Thank You all for Your time..
You can use js and php together:
$(document).ready(function(){
$("#<?=$current_page?>").addClass('active')
})
It's shorter than Maxime Lorant's code...
Or if your url is something like site.com/#home , this is the solution:
Get css id from url (without php/js)
I tried adding a social share script inside index template, when i click share burron i want to get the URL of Individual post.I defined the structure inside javascript.
<a class="fb-share" href="javascript:void(0)" onclick="facebook('Link of the post', 'Title of the post','Excerpt of the post','Thumbnail of featured image');"></a>
I tried using link of the post http://www.dreamstopixels.com/%postname% and failed. I need some suggestions Thanks.
You need to add some code inside The Loop on your index template to get the data and generate the link. Put the following inside the while loop after the_post(); is called:
<?php
$url = get_permalink();
$title = get_the_title();
$excerpt = get_the_excerpt();
$image = get_the_post_thumbnail(get_the_ID(), 'thumbnail');
?>
That sets up all the data you need, then you just build the anchor tag that calls the script and passes the data to facebook: (still within the loop)
<?php
$fbonclick = "facebook('".$link."','".$title."','".$excerpt."','".$image."');";
?>
Then to create the link itself:
<a class="fb-share" href="javascript:void(0)" onclick="<?php echo $fbonclick; ?>"></a>
To be honest I'm not sure why you need to do it this way though, there are a thousand social share plugins out there. Just use AddThis or something.
Try using thoses function:
http://codex.wordpress.org/Function_Reference/get_permalink
http://codex.wordpress.org/Function_Reference/get_the_title
http://codex.wordpress.org/Function_Reference/get_the_excerpt
There is a lot of docs on WORDPRESS CODEX.
You should always keep it open when developping a wordpress template.
LAL.