I've been working with older versions of Tooltipster to HTML content (mostly divs with another picture and some text) on mouseovers over text or pictures, using the now deprecated writing HTML in the title method. After the update I want to switch to the current standard and I'm not quite managing it.
Jquery and Tooltipster are loaded correctly in my header, (verified that by triggering some Tooltipster error messages), and all tooltip instances in the page I'm working on have their class name changed to 'tooltipstered', so I'm pretty sure the script recognizes those too.
The page is written in php (using codeigniter) and the content produced by a foreach loop, the $key variable is numerical here.
echo "<img src='{$value['bild']}' style='width:60px; height:60px;'>";
echo "<br>";
echo "<span class='tooltip' data-tooltip-content='#$key'>";
echo "{$value['name']}";
echo "</span>";
echo "<br>";
This outputs:
<span data-tooltip-content="#1" class="tooltip tooltipstered">Schütze</span>
(There are 24 such instances on the page all in all, the tooltip-content attribute ranging from #1 to #24 so)
My tooltips are generated in a similar fashion, by another foreach loop:
<div class='tooltip_templates'>
<?php
foreach ($klassenbaum as $key => $value){
echo "<span id='$key'>";
echo "<h1>Text für Klasse Nummer $key!</h1>";
echo "</span>";
}
?>
</div>
Result:
<div class="tooltip_templates">
<span id="1"><h1>Text für Klasse Nummer 1!</h1></span
</div>
I've been following the instructions provived here:
http://iamceege.github.io/tooltipster/#getting-started under section 5. I'm quite clueless where my error is, the tooltips aren't showing up at all on a mouseover. And even more curiously: Some script is executed on hovering, because the spans containing the tooltip disappear from the code afterwards. (At least by checking the firebug console).
Thanks beforehand for any help on this!
Made a very poor mistake - the code seems to be indeed correct; the error was the CSS file from Tooltipster not loading correctly due to a spelling mistake.
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
I am very confused! Here's the site I'm working on: http://209.200.104.187/
I am using the Cycle2 plugin for jQuery and CodeIgniter.
In Chrome, it looks like this:
There is a cycler behind the main content. It works for me in Chrome, but not in IE11. Furthermore, my client says it is not working in their chrome browser.
The way I generate the image cycler is like this:
<?php if(#$home_header == 1): ?>
<div id="slideshow" class="cycle-slideshow" data-cycle-pause-on-hover="false"
data-cycle-speed="3000">
<?php
$slides = glob('assets/images/home/background/'.'*.jpg');
foreach($slides as $s) {
echo '<img src="'.$s.'" />';
}
?>
</div>
<?php endif; ?>
I checked the IE11 source code and there are no images, but there IS <div id="slideshow"></div>. It just has an empty <div>.
MOREOVER, if I try to output straight HTML <img/> tags, IE11 is NOT showing them. Just for debugging purposes, I tried to put some images inside #slideshow, and they didn't appear in IE, even when I cleared the cache and refreshed.
I'm very confused because the debugging images show up immediately in Chrome. But never in IE.
Any ideas why IE is behaving so strangely? I am not using jQuery to initiate the Cycle2 plugin, I'm using data- attributes.
I tried it with jQuery initialization instead and that didn't work either.
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'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.
One page checkout was working properly about a week ago and now its not. I am no doubt at fault, because I was still having an issue related to the admin backend, and I probably fouled this up somehow in the process of working on that.
In any case, what happens is that when a (logged in, registered) user clicks on the "Continue" button in the Billing Information step of the one page checkout, its as if the button was not clicked. It doesn't proceed to the next step. And the error console (in Firefox) reports "TypeError: checkout is undefined", and it shows line 303 in opcheckout.js.
This problem is very similar to another one posted on SO but (a) that one isn't really answered and (b) I don't have a high enough score to comment (or add to to the question there).
While a solution would be wonderful, I am also really trying to learn how to debug this myself. I have already applied many magento solutions that I've found by googling (for other problems) and, though they work and that's the main thing, I am starting to want to be able to solve my own problems. And maybe even be able to help others eventually...
So, in this case, given that "checkout in undefined", how might I find where it should get defined?
In my case, the /skin/frontend/base/default/js/opcheckout.js file did not match the one in /skin/frontend/[yourpackage]/[yourtheme]/js/opcheckout.js as pspahn suggested. The .js file in my theme was completely blank. Copying the contents over fixed everything up. Commenting here for visibility for others who might be searching.
The solution here was to
Correct two bad class references in onepage.phtml, and
Rename some css classes to match what the stock magento checkout code wants.
The specific css classes needed were:
step-title
step
number
Here is an excerpt of the corrected onepage.html file:
<ol id="checkoutSteps" class="one-page-checkout">`<?php $i=0; foreach($this->getSteps() as $_stepId => $_stepInfo): ?>
<?php if (!$this->getChild($_stepId) || !$this->getChild($_stepId)->isShow()): continue; endif; $i++ ?>
<li id="opc-<?php echo $_stepId ?>" class="section <?php echo !empty($_stepInfo['allow'])?'allow':'' ?> <?php echo !empty($_stepInfo['complete'])?'saved':'' ?>">
<div class="step-title">
<h3><span class="step-count"><?php echo $i ?></span> <?php echo $_stepInfo['label'] ?></h3><?php echo $this->__('Edit') ?>
</div>
<div id="checkout-step-<?php echo $_stepId ?>" class="step <?php if($_stepId=='shipping_method'): ?>-no-padding<?php endif; ?> a-item" style="display:none;">
<?php echo $this->getChildHtml($_stepId) ?>
</div>
</li>
<?php endforeach ?>
</ol>
And here is an example of copying one of my existing css classes to one of the new required ones (from the file boxes.css):
.one-page-checkout .box { border:1px solid #bbb6a5; border-top:0; padding:15px 20px; background:#faf7ee; }
.one-page-checkout .step { border:1px solid #bbb6a5; border-top:0; padding:15px 20px; background:#faf7ee; }
I had called this "box", but it needs to be "step" as far as Magento is concerned. Since your css classes are likely to have been different, you will need to copy
I hope this helps someone.
By the way, here is how I figured this out:
Observe problem with my theme
Test with stock theme: confirm that works
Go back to my theme, and disable files selectively to figure out which ones make a difference,
Narrowed it down to one file: onepage.phtml, examine it carefully, compare to stock
Found css class names that my theme didn't have
Add them, debug
This is long and tedious, but it seems to work.