I have this simple tooltip inside an echo..
echo '<a data-toggle="tooltip" title="<img src=http://cjrtec.com/dist/img/undersold.png/> "><img src="http://cjrtec.com/dist/img/guarantee-best-price.jpg" alt="guarantee best price" class="img-responsive guarantee-best-price" style="float: left;" /></a>';
my problem is i cant display the image..
I tried separate the elements to another echo but it didn't work.
I dont know how to deal with this multiple quotations.
Thanks
This question might help you--
Image in tooltip using bootstrap?
This is the fiddle used in this question
<div class="cart">
<a data-toggle="tooltip" title="<img src='http://getbootstrap.com/apple-
touch-icon.png' />">
<i class="icon-shopping-cart"></i>
</a>
</div>
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
html: true
});
The maniputed fiddle
Related
I successfully implemented the Bootstrap popover after some trying...
Now I want to implement another HTML into the popover. Normal Tags like <p align=center>some text</p>
are working, but if I add some quotes, it doesen't work anymore:
" data-placement="top">...
Then I tried this:
" data-placement="top">...
I also tried to replace the content of the data-content-attribute with <?PHP echo '...' ?> but that didn't work too.
Can anyone help me please?
Edit: Actual code
<a href="myFacebookPage" rel="popover" data-content='<div style="width: 100px; height: 200px;" class="fb-like" data-href="myFacebookPage" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div>' data-placement="top" target="_blank">
<img src="theUsedIcon"
</a>
In the options for the popover you'll note that it states to use the html option set to true, because if false, jQuery's text method will be used to insert content into the DOM. It also warns that the default value is false, and you should use text if you're worried about XSS attacks.
So, try writing your link this way instead:
<a href="myFacebookPage" rel="popover" data-content='<div style="width: 100px; height: 200px;" class="fb-like" data-href="myFacebookPage" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div>' data-placement="top" target="_blank" data-html="true">
<img src="theUsedIcon">
</a>
Ok thanks for your answers :)
I replaced the javascript Like-Button with the iFrame Like-Button and now it's working.
To create an editable pane in C5 I use the following between div tags so the user can simply use the content editor to add text. This works quite well:
<div class="myWrapper">
<?php
$a = new Area('WelcomeText');
$a->display($c);
?>
</div>
But what do I do when the mark-up is a little complicated? I would like to get user to update the 2 images and respective links themselves. Eg picture: http://i48.tinypic.com/4jma8p.png
What is the easiest way for non-code literate users to do this?
<ul class="Gal_2">
<li class="Frst">
<a href="<?php echo $this->getThemePath(); ?>/Images/TEMP_IMG2.jpg" rel="group">
<img src="<?php echo $this->getThemePath(); ?>/Images/TEMP_IMG2.jpg" width="224" height="150" alt="Island Rab" align="left" />
</a>
</li>
<li>
<a href="<?php echo $this->getThemePath(); ?>/Images/TEMP_IMG1.jpg" rel="group">
<img src="<?php echo $this->getThemePath(); ?>/Images/TEMP_IMG1.jpg" width="224" height="150" alt="Island Rab - Lopar beach" align="right" />
</a>
</li>
</ul>
Thanks in advance...
PC
Create a custom block with the free Designer Content addon: http://www.concrete5.org/marketplace/addons/designer-content
The block you create will have two image fields that link to other pages, and then use "static html" fields to surround the images with your <ul> and <li> tags.
This is actually a perfect use case for Designer Content, so it should be fairly self-explanatory. But if you run into problems, post a message to the support forum (or just email me directly at concrete#jordanlev.com).
I'm trying to limit maintnance headaches by avoiding having to copy and paste code and having to update it on several different sites. Should I use an iframe? So far I just used inline CSS to style it and plan on copying a pasting to 3 or 4 other sites. Kind of like:
<div style="width:165px; height:40px; background: url('http://site1.com/images/DH-sharebar.gif') repeat-x top #333;float:right;margin-top:15px;margin-right:20px;border-radius:5px;border:1px #565656 solid;">
<a href="http://site1.com/" target="_blank" title="site 1">
<img src="http://davidhairabedian.com/davidhairabedian/images/DH-sharebar-icon.png" style="border-radius:0;margin-top:5px;margin-left:10px;">
</a>
<a href="http://site2.org/" target="_blank" title="site 2">
<img src="http://site1.com/images/DH-sharebar-HPM-icon.png" style="border-radius:0;margin-top:5px;margin-left:10px;">
</a>
<a href="http://site3.org/" target="_blank" title="site 3">
<img src="http://site1.com/images/DH-sharbar-EHF.png" style="border-radius:0;margin-top:5px;margin-left:3px;">
</a>
<a href="http://site4.org/" target="_blank" title="site 4">
<img src="http://site1.com/images/DH-sharebar-EHC.png" style="border-radius:0;margin-top:5px;margin-left:10px;">
</a>
</div>
If you don't mind having a slight delay, you could write a light JavaScript that loaded the content into the page via AJAX, much like facebook / many other widgets do.
The benefit that offsets the fact that your links are not part of the page's initial HTML is the fact that you can update the content of all widgets from one place, with no chance that you'll forget one int he future.
Have a look into how Facebook / Google + / Twitter / Everyone else does this.
Edit
Your question got me thinking about how one might do this, so I did it. I've made a working JSFiddle example.
Basically, you paste an empty div and a script tag into your target pages. The script references a file stored on your central server. It creates another script tag in the document, which itself contains a call to a function defined in the first script, which inserts your widget into the specified div on the page.
Pasted into your pages
<div id="placeholder-div"></div>
<script type="text/javascript" src="http://pagesofinterest.net/stack-examples/what-would-be-the-best-way-to-make-a-widget-that-will-link-to-4-different-websit/script.js"></script>
First script content
(function loadContent() {
(function xss_ajax(url) {
var script_id = null;
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'http://pagesofinterest.net/stack-examples/what-would-be-the-best-way-to-make-a-widget-that-will-link-to-4-different-websit/content.php');
script.setAttribute('id', 'script_id');
script_id = document.getElementById('script_id');
if(script_id){
document.getElementsByTagName('head')[0].removeChild(script_id);
}
// Insert <script> into DOM
document.getElementsByTagName('head')[0].appendChild(script);
})();
})();
function callback(data) {
document.getElementById('placeholder-div').innerHTML = data;
}
Inserted script content:
<?php ob_start(); ?>
<div style="width:165px; height:40px; background: url('http://site1.com/images/DH-sharebar.gif') repeat-x top #333;float:right;margin-top:15px;margin-right:20px;border-radius:5px;border:1px #565656 solid;">
<a href="http://site1.com/" target="_blank" title="site 1">
<img src="http://davidhairabedian.com/davidhairabedian/images/DH-sharebar-icon.png" style="border-radius:0;margin-top:5px;margin-left:10px;"/>
</a>
<a href="http://site2.org/" target="_blank" title="site 2">
<img src="http://site1.com/images/DH-sharebar-HPM-icon.png" style="border-radius:0;margin-top:5px;margin-left:10px;"/>
</a>
<a href="http://site3.org/" target="_blank" title="site 3">
<img src="http://site1.com/images/DH-sharbar-EHF.png" style="border-radius:0;margin-top:5px;margin-left:3px;"/>
</a>
<a href="http://site4.org/" target="_blank" title="site 4">
<img src="http://site1.com/images/DH-sharebar-EHC.png" style="border-radius:0;margin-top:5px;margin-left:10px;"/>
</a>
</div>
<?php $content = json_encode(ob_get_clean());
echo "callback($content);";
And after all this, it occurred to me that you could just use an iframe:
<iframe src="http://pagesofinterest.net/stack-examples/what-would-be-the-best-way-to-make-a-widget-that-will-link-to-4-different-websit/iframe.html"></iframe>
Personally, I would use the JavaScript method, as this would allow me to modify the style of the widget whenever I wanted, without requiring my users to update their pages.
I was wondering if it was possible to get all the video IDs from a YouTube playlist pages and display them in a list.
<li class="playlist-video-item odd">
<a href="/watch?v=oHg5SJYRHA0&list=FLk8PLezsTU6MuuBxE5utNQw&index=3" class="tile-link-block video-tile">
<span class="video-index">3</span>
<span class="playlist-video-item-base-content">
<span class="thumb-container">
<span class="ux-thumb-wrap">
<span class="video-thumb ux-thumb-114 "><span class="clip"><img src="//i2.ytimg.com/vi/eVMWgmQA4Ig/default.jpg" alt="Thumbnail" ></span></span>
<span class="video-time">3:37</span>
<button type="button" class="addto-container addto-button short video-actions yt-uix-button yt-uix-button-short" onclick=";return false;" data-button-menu-id="shared-addto-menu" data-video-ids="oHg5SJYRHA0" data-button-action="yt.www.addtomenu.load" data-feature="thumbnail" role="button"><img class="yt-uix-button-icon yt-uix-button-icon-addto" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt=""><span class="yt-uix-button-content"><span class="addto-label hid">Add to</span></span><img class="yt-uix-button-arrow" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt=""></button>
</span>
As you can see the ID is here data-video-ids="oHg5SJYRHA0"
Rather than scraping the IDs from markup like that, you should probably take a look at the YouTube API
I guess you want this to be done with jQuery, according to your tags.
$('span.ux-thumb-wrap button').data('video-ids')
Your example code only have one ID, so I wouldn't know how to create a list. Or what type of list for that matter. Please add a comment with further instrux as needed.
I have a simple php site that I built, but for some reason my photo gallery page takes a little long to load. Can someone tell what the problem is and how to speed up the load time?
Here is php code. By the way I coded everything within this one file (photography.php), with only references to images in another folder...
<?php
$thisPage="Photographer, Caribbean, Jamaica, Bahamas - Cheryl Blackerby";
$thisDescription="";
$thisKeywords="Caribbean, Jamaica, Bahamas";
include("header.php");
//include("html/photography.html");
?>
<div id="photography">
<div id='coin-slider'>
<div id="photos">
<a href="#" target="_blank">
<img src='photography/img_01.jpg' alt="Staniel Cay Yacht Club in the Exumas, Bahamas" />
<span>Staniel Cay Yacht Club in the Exumas, Bahamas</span>
</a>
<a href="#" target="_blank">
<img src='photography/img_02.jpg' alt="Junkanoo dancer in Inagua, Bahamas" />
<span>Junkanoo dancer in Inagua, Bahamas</span>
</a>
<a href="#" target="_blank">
<img src='photography/img_03.jpg' alt="Doctor's Cave Beach in Montego Bay, Jamaica" />
<span>Doctor's Cave Beach in Montego Bay, Jamaica</span>
</a>
<a href="#" target="_blank">
<img src='photography/img_04.jpg' alt="Paella at the Beach House, Eleuthera, Bahamas" />
<span>Paella at the Beach House, Eleuthera, Bahamas</span>
</a>
<a href="#" target="_blank">
<img src='photography/img_05.jpg' alt="Opening of the Supreme Court, Nassau, Bahamas" />
<span>Opening of the Supreme Court, Nassau, Bahamas</span>
</a>
<a href="#">
<img src='photography/img_06.jpg' alt="Flamingos on Inagua, Bahamas" />
<span>Flamingos on Inagua, Bahamas</span>
</a>
</div><!-- end photos -->
</div>
<p id="right-description"><img src="images/side-descrip-photos.jpg" width="20" height="90" alt="Photo Description" /></p>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 840, height: 520, navigation: true, delay: 5000, links : false, hoverPause: true, opacity: 0.7, effect: 'practice', sph: 1, spw: 1 });
});
</script>
</div><!-- end photography -->
<?php
include("footer.php");
?>
Here is the link to the site: here
I would appreciate any advice on the issue and any coding techniques that would help.
Thanks,
Gary D.
Loads nice and quickly for me - impressively fast in fact.
I'd say it is bandwidth-heavy, and you tried it from a slow connection.
One thing about it is that you pre-load all your large images, even though you only show the top one. This is a good idea, except that they appear earlier in your code than the navigation on the right, so I imagine on a slow connection, there'd be some wait for all the large images to download before it shows the navigation on the right. You could get around this by pre-loading these images using a different method, using JQuery, so that the request to load those images doesn't come before other images on the page.
Start here: http://developer.yahoo.com/yslow/ that's a firefox plugin that will analyze your page for download bottlenecks. It could have nothing to do with your php code.