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.
Related
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
I integrated Jasny Fileinput Widget into my existing form. When I select new file, It will display two button: Change and Remove. I think Change button is not neccessary in this case so I would like to remove this button completely. By adding style="display:none" to the element and I also try to remove this element. However, this still appear a blank spot like this:
jsfiddle.
MY HTML:
<div class="fileinput fileinput-exists" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" />
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span style="display:none" class="fileinput-exists">Change</span><input type="file" name="file[]"></span>
Remove
</div>
</div>
Any suggestions how to remove this completely please?
It doesn't look like you'll be able to remove that button completely. As that button belongs to the file input, you can't remove it. You could however write custom styles to hide the file input button but it may hide other buttons that are associated with it.
Sorry I couldn't help any further mate.
I need to draw text in top of the image this the look like
when the page load i need to display price in side the photo.I try it like this
<button class="btn btn-danger" id="buy-btn" data-toggle="modal" data-target=".package-buy-modal">BOOK NOW</button>
<img id="price-tag" style="position: relative;width: 100%; /* for IE 6 */" src="<?php echo base_url()?>assets_profile/img/price.png">
<h2 style="-o-transform: rotate(32deg);-moz-transform: rotate(32deg);-webkit-transform: rotate(32deg);">$<?php echo $car_data['Charges']; ?></h2>
But it didn't work as i expected.how can i do this.if there is another easy way to this ?
Here is an example of using background-image within a div so that you can put more inside the div, ie)text
HTML:
<div id='image' src='http://i.stack.imgur.com/1DZ6X.jpg'>
<h2 id='price'>Price: $10</h2>
</div>
CSS:
#image {
width:243px;
height:163px;
background-image:url('http://i.stack.imgur.com/1DZ6X.jpg');
}
check it out here
Add a z-index value to the <img> and the <h2>. For example, z-index:98 on the <img>, and z-index:99 for the <h2>. (A higher value because you want it on top).
I would also recommend moving all styles to a css file, rather than use the inline style attribute.
I have searched and gone through many so called solutions but none helped.
I have a situation where i need multiple facebook comments on a same page for different li tags.
The code will make it clear I guess.
<?php foreach($events_without_upcoming as $single_events):?>
<li id="event_<?php echo $single_events->id; ?>" class="events" style="cursor:default">
<span class="sn"><?php $i++; ?></span>
<span class="date"><?php echo $new_date?></span>
<span class="venue"><?php echo $single_events->venue; ?></span>
<span class="address"><?php echo $single_events->address; ?></span>
<span class="option"><?php echo share_button('facebook', array('url'=>"http://www.xxxxxx.com", 'text'=>$text))?><?php echo share_button('twitter', array('url'=>$url, 'text'=>$text, 'via'=>'Lightning At The Opera', 'type'=>'iframe'))?></span>
<div id="fb_<?php echo $single_events->id; ?>" class="fb_plugin" style="display:none;"></div>
<div class="fb-like" style="display:block" data-href="http://www.xxxxxx.com/<?php echo $single_events->id; ?>" data-send="true" data-width="450" data-show-faces="false"></div>
<div class="fb-comments" data-href="http://www.xxxxxx.com/#event<?php echo $single_events->id;?>" data-width="470"></div>
</li>
<?php endforeach;?>
The FB comment plugin is within a foreach loop.
Every li contains the comment plugin.
I tried giving data-href a unique url as in code but its not working.
I have been trying this from morning but I couldn't find anything.
If i haven't made myself clear please ask anything thats required.
Thx in advance.
<iframe
style="border: none; overflow: hidden; height: 155px; width: 470px;"
scrolling="no"
src="https://www.facebook.com/plugins/comments.php?api_key=your_api_key&elation%3Dparent.parent&numposts=1&width=470&href=http%3A%2F%2Fexample.com"></iframe>
as we cannot find any solution with js so We are using iframe without any js libs,
it also helpful when we want to show comments dynamically.
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.