I am trying to display an Image as a tool tip when hovered onto an image. I have read various posts on Stack Overflow and have tried but still it is not working. I am learning jQuery and would like some help to show me what aspect of tooltip am I missing?
Here is the code I am using so far:
$(document).ready(function () {
$(".panel").tooltip({
delay: 0,
showURL: false,
track: true,
bodyHandler: function () {
return '<img src="images/b_clicktozoom.jpg" alt="Click to Zoom" width="88px" height="20px"/>';
}
});
});
The html is following:
<div class="belt">
<div class="panel" style="float: none; position: absolute; left: 2643px;">
<img width="879" height="510" border="0" usemap="#xyz.jpg"alt="Writing on the Wall" src="xxx.jpg">
</div>
</div>
Please let me know your thoughts on this
Thanks
Are you including the jQuery tooltip external JS file in your page? tooltip() will not work without the tooltip plugin included on your page. You can download it from http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
Go to the following URL
http://flowplayer.org/tools/tooltip/index.html
and include it as the following in the script tag:
src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"
and then call it on the html tag element e.g., $("label").tooltip();
Related
Creating a slideshow using Galleria.io APIs.
Galleria's DIV tag in my HTML page looks like :
<div class="content">
<div id="galleria">
<!-- I have used Javascript to input values in this DIV tag -->
</div>
<div id="full" style="float: right">
<!-- DIV tag for fullscreen and auto slideshow play-->
<button>full screen</button>
<button>play slideshow</button>
</div>
</div>
I have used the classic theme provided in the downloads of Galleria.io, and which has below script to call the contents in the DIV tag ("id = galleria").
<script>
$(function () {
Galleria.run('#galleria');
});
</script>
I have referrer the official documentation of Galleria for enabling fullscreen and auto slideshow.
But these documents only provide the method names, and not the example of implementing those methods. Can someone please guide how to implement these methods in script tag ?
Also, I have gone through the discussion about auto-resize in galleria
and tried to implement but having issues.
So I found the answers, and posting it as a reference in Galleria.io customization.
Everything will be the same, Galleria has parameters for different functionalities, that we have to call. For the functionality of auto slideshow, i edited the same script in the question this way.
<script>
$(function () {
Galleria.run('#galleria', {
autoplay: 3000,
transition: 'flash',
transitionSpeed: 600,
});
});
</script>
Hello stackoverflow community. I am using lightGallery plug-in and have a problems with making it running with external kind of button in my case anchor tag, can you suggest what have i done wrong or maybe any other way to get it working right.
HTML
Enter full screen view
<div class="owl-carousel" id="selector1">
<div class="item" data-src="img/1.jpg" name="fullscreen"><img src="img/1.jpg">
</div>
JavaScript
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
$('#selector1').lightGallery({
selector: '.item'
});
lightGallery plug-in: http://sachinchoolur.github.io/lightGallery/docs/#installation
Here are some things that might/will cause problems:
The href attribute does not work like that. The link will just open another website. Instead you need to execute some javascript to activate the fullscreen mode, when the link is clicked.
You have two opening <div> tags, but only one closing. Also, you should close the <img> tag.
You probably want all of your posted javascript in the $(document).ready(function() {}); function
There is no element with the id lightgallery.
I don't know anything about the data-src attribute.
This should fix most of the problems, however it will not enable the fullscreen functionality:
html
<div class="owl-carousel" id="lightgallery">
<div class="item" data-src="img/1.jpg">
<img src="img/1.jpg" />
</div>
</div>
javascript
$(document).ready(function() {
$('#lightgallery').lightGallery({
selector: '.item'
});
});
I am using sketch.js html canvas library to paint on multiple pages in my e-book.In my application e-book pages are loaded dynamically upon loading book. So i injected multiple canvas sheets in some pages where i am supposed to draw like this :
......//page content
$(pageContent).append('<canvas class="simple_sketch" style="background: url(images/white.jpg);" width="400" height="600"></canvas>');
and then calling the sketch function using each loop
$('.simple_sketch').each(function() {
$(this).sketch();
});
So far this works well, i can draw the painting on each page, but when i am trying to add tools (Marker size, colors, reset button), My href anchor tags does not work. My html mark up looks like this :
<div class="paint_tools">
<img src="images/pen-medium.png" width="49" alt="">
<img src="images/pen-medium.png" width="49" alt="">
<img src="images/pen-large.png" width="49" alt="">
<a class="colors" href="#simple_sketch" data-color="#8f395b" style="background: #8f395b;"></a>
<a class="colors" href="#simple_sketch" data-color="#c44f4f" style="background: #c44f4f;"></a>
<a class="colors" href="#simple_sketch" data-color="#ff66a2" style="background: #ff66a2;"></a> style="background: #46a843;"></a>
</div>
and here i am replacing id's '#' with class's '.' as
$('.paint_tools a').attr('href').replace('#','.');
But seems it does not work, Can any one please point where i am missing to pick size and colors, Btw, i like to have only this as the only tool set for all canvases in book.
Any kind of help much appreciated, Many many thanks in advance.
Problem solved: here is how i fixed it :
i found that no need to replace the # tags , So i removed that part and i just used the click handlers to update my marker size and color as like:
$(function() {
$('.paint_tools a').on('click', function() {
var a = $(this).data('size');
$('.simple_sketch').each(function(){
$(this).sketch().set('size',a);
})
});
});
$(function() {
$('.paint_tools a').on('click', function() {
var a = $(this).data('color');
$('.simple_sketch').each(function(){
$(this).sketch().set('color',a);
})
});
});
Hope it helps someone using sketch Library like me.
I have a bit of what seems like a complicated issue(to me at least)
I've got an external javascript file generating html content for me. It's for tweets. It gives each one a individual ID, which I can see in the browser but of which is obviously not in my index.html.
The JS generates something like this in the browser http://i.imgur.com/8yxLYBa.png
Heres the generated div
<div class="twitter-article" id="tw1"><div class="twitter-pic"><img src="https://pbs.twimg.com/profile_images/461533054800900097/5h4n1K31_normal.jpeg" twitter-feed-icon.png"="" width="42" height="42" alt="twitter icon"></div><div class="twitter-text"><p><span class="tweetprofilelink"><strong>JGD</strong><br> #jdrawsthings</span></p><b><span class="tweet-time"></span></b><d>2h, Glasgow. Favorites: 0 Retweets: 0</d><br><c>Literally desperate and just need to secure a nice room in a nice flat close to DJCAD so I can move in June 20th</c></div><div class="favourite-item" id="fav1"><button class="favouriteButton" id="favBut1"></button></div><div id="twitter-actions" style="opacity: 0; margin-top: -20px; display: none;"><div class="intent" id="intent-reply"></div><div class="intent" id="intent-retweet"></div><div class="intent" id="intent-fave"></div></div></div>
Each one has a button assigned to it, which each also have individual IDs.
I'm wanting to use the clone function to copy across the contents of say, '#tw1' into '#faveDiv'. #faveDiv been a div on my index.html page.
<div id="favouriteStreamHolder">
<div id="favouriteStream" style="display: none;">
<div id="faveDiv"></div>
</div>
</div>
Here is the clone function I'm trying
$("input#favBut1").live( 'click', function(){
$('#faveDiv').html($('#tw1').html());
});
There's to much going on that relies on PHP that putting it into a simulator wouldn't achieve anything. Basically, that JS creates this. i.imgur.com/8yxLYBa.png A stream of 25 tweets of which the content is created in that js function having been pulled from a JSON file. I'm under the assumption that the .clone() function should copy all within the div and duplicate it into the div ive specified. At the moment. It's doing nothing, the div is just empty. Bit new to this, sorry. If theres anything else you need to know. Just say.
Any idea why this isn't working?
Try this (pattern)
html
<div id="favouriteStreamHolder">
<div id="favouriteStream">
<div id="faveDiv"></div>
<!--
duplicate `favBut1` in `feedHTML`,
substitute `id` `feed` for `favBut1`
-->
<input type="button" id="feed" value="click" />
</div>
</div>
js
$(function () {
// var feedHTML = `$.parseHTML(feedHTML)`
var feedHTML = $.parseHTML('<div class="twitter-article" id="tw1">..</div>');
$(document).on("click", "#feed", function (e) {
e.preventDefault();
$(e.target).siblings("#faveDiv").html($(feedHTML));
});
})
jsfiddle http://jsfiddle.net/guest271314/ReK9u/
So I have a list of icons, I'm trying to get a popover to activate when you hover over an icon, I can't seem to get it to work, any help would be appreciated.
<img class="icon" rel="popover" trigger: "hover" data-placement="top" data content="This is a popover"src="images/brandable.png"><br>Brandable</br></li>
And i have this in a separate js file
$('.icon').popover({placement:'top'});
Put attributes in jquery variable instead of tag
<img class="icon" rel="popover" src="images/brandable.png"/>
Add script as following
<script>
$('document').ready(function() {
var popOverSettings = {
placement: 'top',
selector: '.icon',
title:'Brandable',
trigger: "hover",
content:'This is a popover'
};
$(this).popover(popOverSettings);
});
</script>
this is over a year late, but i found this to work:
Fiddler Link
using this JS:
$(function(){
$('[data-toggle=popover]').popover({
trigger: 'focus',
html: true,
title: 'Toolbox'
})
});
And this html:
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS-eTmHxgicEfq4K-sEz_X52cq56uBP2l8cr_q8ivOavSIca5TYtQ"
data-toggle="popover" tabindex="50" data-content="test <b>text</b>" data-placement="right"/>
You need to allow the image to accept focus with the tabindex property. That was the key for me. Remove the "trigger: 'focus' line if you want the popover to stay open on click events...
Hope it helps!
For your code you have:
<img class="icon" rel="popover" trigger: "hover" data-placement="top" data content="This is a popover"src="images/brandable.png"><br>Brandable</br></li>
trigger: "hover" isn't valid html. Bootstrap help document notes, "Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation=""."
So instead you would want to include data-trigger="hover" also looks like your missing a space before src=.
Also you have placement top in the html and also in the javascript. You only need to declare in one place. So you can delete data-placement="top" from the img tag, or in your javascript you can remove it so it would just be $('.icon').popover({placement:'top'});
Also you have "$" in front of your function. Depending on where that code is located you may have a jquery conflict. To note for sure you'll need to post whichever error you are seeing in your error log. If you use chrome right click > web inspect > click the red x at the bottom and copy any errors you see in there.
$(function(){
$('#poper').popover({
html: true,
trigger:'focus',
content: $('#pop')
});
}
);
Perhaps the easiest way to do this uses the OnMouseOver and OnMouseOut events described in this answer: https://stackoverflow.com/a/10709196/121737
I would prefer to do this using one image, the same width as a normal icon but twice the height. This image would show two icons, one above the other, the upper one being the normal icon, the lower being the rolled over icon:
img.icon {
display: block;
width: 4ex; height: 4ex;
background-size: 4ex 8ex;
background-position: 0 0;
}
img.icon:hover {
background-position: 0 -4ex;
}
img.icon#twitter {
background-image:url('icons/twitter.jpg');
}
img.icon#facebook {
background-image:url('icons/facebook.jpg');
}
After this declaring the icons in HTML is much cleaner:
<img class="icon" id="twitter" />
<img class="icon" id="facebook" />
<img class="icon" style="background-image:url('icons/other_icon.jpg')" />