Problems, need help? Have a tip or advice? Post it here.
8 posts Page 1 of 1
Hello, I wonder if someone could confirm my suspicion that shortcodes are the way to go on this. I am using a JQUERY feature - hover popover which consists of three parts:

1. The JQUERY script (from Bootstrap).

2. Within the page the anchor / popover content:

Code: Select all
<a class="btn" data-content="text within popover goes in here ... " href="#" id="event1" rel="popover" title="Special event">text to hover/trigger popover</a>

The title is shown at the top of the popup box and the data-content below that.

3. Then instantiate each occurrence of a popover on the page:

Code: Select all
$(function ()  
{ $("#event1").popover({placement:'left', delay: { show: 0, hide: 400 }}); 
  $("#event2").popover({placement:'left', delay: { show: 0, hide: 400 }});
}); 


I would like the client to be able to select a snippet of text on the page and turn that into the link for a hover/popover box, for which they set up the title and data content.

It seems like a lot to ask of Couch and I'm not sure how it would work, when a unique ID is required for each popover.
You are correct, shortcodes is definitely going to be the way to go on this. First lets start with the jQuery script. Unless you want to be able to define different popover options for each popover, I think you should just use a common selector such as a class:
Code: Select all
$(function () 
{ $(".event").popover({placement:'left', delay: { show: 0, hide: 400 }});
});

The anchor link would then need to be formatted as so:
Code: Select all
<a class="btn event" data-content="text within popover goes in here ... " href="#" title="Special event">text to hover/trigger popover</a>

The next step would be to create the kfunctions.php file for the shortcode. http://www.couchcms.com/docs/miscellaneous/shortcodes.html I have found all the couch documentation to be very well written, but if you get stuck while coding this, do reply with the code/problem.

** Edit: Corrected a mistake.
thanks Cheesypoof ... I tried out using class instead of id and unfortunately the popovers cease to function!

I think I'll show the client how to edit them via the 'source' button in the wysiwyg on this occasion.

Also, from now on I'm going to be rather more circumspect when loading pages with features and fiddly layouts - a popover might be nice, but there's numerous other (quicker) ways of skinning this cat!
Hi Potato,

Could you attach a 'working' example of the popover please (basically a stripped-down version of your page with only the essential elements - HTML, JS)?

Making the client edit the source is a 'dangerous' thing :)
Shortcode should handle this beautifully.
Please send over the requested example and I'll try and make it use a shortcode.

Thanks
Adding to what KK said, asking your client to edit the source for this one is a lot to ask. I was able to get it to work:
popover.jpg
popover.jpg (21.36 KiB) Viewed 3616 times

Code: Select all
<head>
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" media="screen,projection">
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/tooltip.js" type="text/javascript"></script>
<script src="/popover.js" type="text/javascript"></script>
</head>
<body>
<a href="#" class="event" data-original-title="Popover Title" data-content="Popover Content">Popover Example</a>
<script type="text/javascript">
$(function ()
{ $(".event").popover({placement:'left', delay: { show: 0, hide: 400 }});
});
</script>
</body>

I found this link helpful: http://www.w3resource.com/twitter-bootstrap/popover-tutorial.php. Make sure that you have styled it properly, otherwise you may deceive yourself into thinking it isn't working because it may display in an unexpected location(bottom left).

kfunctions.php
Code: Select all
<?php
$FUNCS->register_shortcode( 'popover', 'popover_handler' );
function popover_handler( $params, $content=null ){
global $FUNCS;
extract( $FUNCS->get_named_vars(array(
'link' => '#',
'title' => 'Title',
'text' => 'Text'
), $params) );
if( empty($content) ) $content='Content';
return '<a href="'.$link.'" class="event" data-original-title="'.$title.'" data-content="'.$content.'">'.$text.'</a>';
}

Usage:
Code: Select all
[popover link="http://www.couchcms.com/" title="CouchCMS" text="Check out this great CMS!"]A simple and free CMS for designers[/popover]

I am glad you mentioned this bootstrap website, as I was unaware of it. I will definitely use some of these resources in the future. ;)
@cheesypoof
thank you :)
thanks Cheesypoof ... I'll have a go and see if I can get 2 x popovers up and running on the same page - you're right my client may throw a wobbly if they click on Source!

I found Bootstrap by chance a few weeks ago and it is a rich resource - it's good to pick and choose from - I'm trying out the grid as a basis for building all my sites in future - will save a lot of fiddling around in CSS - I'm a fan! :geek:
Success :o

The page in question had the whole right hand column defined as editable i.e. it was wrapped within an opening and closing <cms:editable> tag. So I wasn't using a <cms:show> with which to wrap in <cms:do_shortcodes>. All easy enough to change. Thanks for your help - should be easier to tackle the next time now.

The client will be very pleased with this - I guess he still has to be very careful of formatting the shortcode, but a small price to pay for such flexible and extensive site updateability!
8 posts Page 1 of 1