I've been looking at these questions such as these below.
How do I add a simple jQuery script to WordPress?
jQuery addClass not working
Yet I cannot seem to get this to work in wordpress.
I create a myscript.js and add this code.
jQuery(document).ready(function() {
$('#addhere').addClass('well');
})
Then I en queued it in my functions.
wp_enqueue_script( 'myscript_js', get_template_directory_uri() . '/js/myscript.js', array('jquery'), '', true );
I also did the add_action ( 'wp_enqueue_scripts', 'theme_js' );, I know that works as I have included bootstrap.min.js which works correctly.
I am trying to add it here,
<nav id="addhere" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
Just to test so i can see if it worked.
My question is what am I doing wrong? Why will it not add the class?
You mixed up jQuery(..) and $(..).
Im not sure if that would actually work, so try this instead:
jQuery(document).ready(function() {
jQuery('#addhere').addClass('well');
});
It seems that if you load jQuery imlicitly over wordpress, it is beeing loaded in no conflict-mode (see http://api.jquery.com/jquery.noconflict/) as this blog post states.
Related
I have a pretty good understanding of HTML & CSS, but I am having trouble with the Tag Page feature of tumblr. On my blog for every tagpage, I have a heading being grabbed from the name of the tag. I do not want to change the URL. I want to change the heading on the page, but that heading is being grabbed from the {tag}. The tag is vld. Instead of the page saying vld, I want it to say "All Designs". Pretty much overriding the {tag} for just the /tagged/vld tagpage. The TagPage code is:
{block:TagPage}
<div class="tagtitle">{tag}s</div>
{/block:TagPage}
For /tagged/vld, I want the heading on the page to be "All Designs" instead of "vld". how can I make this change for this specific tagpage?
I have tried
{block:TagPage}
<div class="tag" id="{Tag}">All Designs</div>
{/block:TagPage}
My code being:
{block:TagPage}
<div class="tagtitle" id="vld">All Designs</h2>
{/block:TagPage}
I have also tried
<script>
switch(window.location.pathname) {
case "/tagged/vld":
$('.tagtitle').text('All Designs');
break;
}
});
</script>
But neither of the methods have worked - everything is still showing the tag as the heading. You can see my blog at vintagelovedesigns.tumblr.com
OK, I have a test version working here using one of your themes:
https://madox-test.tumblr.com/tagged/vld
Your switch statement should be throwing an error as you have an additional closing bracket.
The script should look like this:
<script type="text/javascript">
$(document).ready(function(){ // if you are using jquery it is a good idea
// to wrap code in a document ready function
switch(window.location.pathname) {
case "/tagged/vld":
$('.tagtitle').text('All Designs');
break;
};
});
</script>
Hope this helps.
Implementing Tooltipster with our WordPress site, but hit a roadblock. The tooltips open correctly, but the content within the tooltip is empty. This code works outside of WordPress. Please help?
Here's how it's all being setup.
1) Within functions.php:
wp_enqueue_style( 'ttcss', '/ours/tt/dist/css/tooltipster.bundle.min.css' );
wp_enqueue_style( 'ttcss-noir', '/ours/tt/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-noir.min.css' );
wp_enqueue_script( 'ttjs', '/ours/tt/dist/js/tooltipster.bundle.min.js', array('jquery'), null, true );
2) Within header.php before closing </head>:
<script> jQuery(document).ready(function() {
jQuery('.ourtip').tooltipster({
theme: 'tooltipster-noir',
contentCloing: true,
contentAsHTML: true
});
});
</script>
3) Within the theme, where the tooltip is desired:
<span class="ourtip" data-tooltip-content="#ourtip_content">Tool</span>
4) Lower down within the theme, what should be displayed (but isn't):
<?php
function ours_publisher_popup()
{
?>
<style>.ourtip_templates {display: none;} </style>
<div class="ourtip_templates">
<div id="ourtip_content">
<strong>This text should display but is missing.<br></strong>
</div>
</div>
<?php
}
ours_publisher_popup(); ?>
Ended up being a conflicting plugin. Disabled WP plugins one at a time until it started working, and then found one that was also trying to use Tooltipster. Deactivated that and functionality returned.
The scenario
The site is built with Bootstrap, and has several div's (or columns) with a variation in height.
My HTML basically looks like this:
<div class="container">
<div id="masonry-container" class="row">
<div class="item col-lg-3 col-md-4 col-sm-3 col-xs-12">
<!-- Text and so on -->
</div>
</div>
</div>
The problem
The problem is that Bootstrap does not work very well with columns when they have different heights. This is a common problem, please see example below, or visit my page.
What I am working on
I am trying to include Masonry with Bootstrap so that the columns are correctly aligned when the heights are different. The columns from the example above would then look like this:
However, I can't get it to work correctly. I am not sure if I am doing something wrong, or if I have missed something.
I am using the Masonry min (here)
I have tried loading it with functions.php by the following:
//Isotope and masonry
function add_isotope() {
wp_register_script( 'isotope', get_template_directory_uri().'/js/isotope.pkgd.min.js', array('jquery'), true );
wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'), true );
wp_enqueue_script( 'masonry_js', 'http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js', array('jquery'), true );
wp_enqueue_script('isotope-init');
}
add_action( 'wp_enqueue_scripts', 'add_isotope' );
I have also tried to include it the regular way in header.php:
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/masonry.pkgd.min.js"></script>
However, nothing seems to work.
Could you please provide a working solution?
The page can be found here.
I don't think you're calling $.masonry(). I looked up the source code, nothing seemed to bind #masonry-container. So, add this snippet to your pages' footer.
$('#masonry-container').masonry({
itemSelector: '.item' // div.item
});
And because you're working with a responsive layout here, you should use reload method like below
$('#masonry-container').masonry({
itemSelector: '.item',
isAnimated: true // the animated makes the process smooth
});
$(window).resize(function() {
$('#masonry-container').masonry({
itemSelector: '.item',
isAnimated: true
}, 'reload');
});
I'm trying to use Bootstraps tooltip. But I just don't get it working. Its not showing up. Whatever I try. I got all latest Jquery, Javascripts loaded. I tested if they actually work by the URL.
I followed many tutorials, read documentations, but no luck :/
This is my complete code with Javascript toggle:
https://gist.github.com/matthijs110/1e7fc36902b0da5184aa
To save you the searching, here is the Script:
<script>
$(function(){
$('#domain').tooltip(animation)
})
});
</script>
And here is the text where it should toggle on hover:
<h4 id="domain" data-toggle="tooltip" title="first tooltip">play.domain.com</h4>
I just don't know what is wrong. I also tried the A tag. But I've read somewhere that H4 etc.. works too.
You must use:
jquery-1.8.3.js
bootstrap.min.css
bootstrap.min.js
I edited codes:
<div class='my_div'>
hover me
</div>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
$(".marker").tooltip({placement: 'right'});
});
});//]]>
</script>
view on http://jsfiddle.net/ytpAy/314/
Edited:
For change the tooltip directions, on placement: 'right' use bottom , top , left or right
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.