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')" />
Related
I have created a jQuery Dialog for storing a hidden image, which will only be triggered by clicking a link. Some of the codes are as followed:
<div id="dialogdialog" style="background-color: white;">
<div>
<div style="clear: right">
<a href="#" class="closeDialogButton">
<div id="fitClose" class='sprite x' style="float:right;"></div></a>
</div>
</div>
<div>
<div id="fitLogoBlack" class='sprite black-logo'></div>
<br/><br/>
<img id="fitTitle" src="img/fitguide_title.jpg">
<img id="fitLogoBlue" src="img/blue.png">
</div>
<div>
<img src="img/topbanner01.jpg">
<br/>
<img src="img/slim02.jpg">
</div>
</div>
<a class="fit-guide" href="#fit-guide" target="_self" rel="nofollow" id="fitguidePic">Fit Guide</a>
<script>
$(function() {
$("#dialogdialog").dialog({
width: 900,
border: 0,
autoOpen: false,
modal: true,
resizeable: false,
dialogClass:"myClass"
});
$("#fitguidePic").on("click", function() {
$("#dialogdialog").dialog("open");
});
});
$('.closeDialogButton').click(function(e){
e.preventDefault();
$('#dialogdialog').dialog('close');
})
</script>
And the codes are working, the image can be hidden until I clicked on the link, however, occasionally when I refresh my page, I will see the hidden content appeared on the page for few seconds, but after the whole page is fully loaded, it will be hidden again. But this situation does not happened for every refresh.
I have no idea what this problem is caused. How can I stop the image popping up when refreshing? Thanks!
Add this to your CSS:
#dialogdialog {
display: none;
}
Because displaying of the page in the browser doesn't wait for Javascript to be fully loaded the dialog is sometimes visible, because it is visible by default. jQuery will later 'overwrite' this initial setting by attaching CSS directly to the element.
How can I stop the image popping up when refreshing?
By using vanilla js (raw js). Why ?
I have no idea what this problem is caused.
This is because jQuery (if properly set) is loaded only after the whole document has loaded. So when you refresh the image appear first and then the code hidding it is loaded after that. Anytime there is a delay and the loading is slow, you will see the picture before it is hidden if using jQuery.
Alt solution : you can load jQuery without waiting for the document to fully load but your code might break and this is generally a really bad idea. jQuery works only on whole documents.
display: none; on #dialogdialog
I am new in CSS and JS. I am trying to have two events happening on mousehover but It is not wroking. Here is the code I have
<div class="ht2_icon ht2left" style="background: url(icons/img4.png) no-repeat center;" onClick="popup('#newTeam')">
<span class="tooltip" onmouseover="tooltip.pop(this, 'New Team', {position:0})">
<img src="icons/img4hover.png"/>
</span>
</div>
I should have the tooltip and the other image working on mouse hover but it is not the case.
To see other image only on hover please use separate css definition for ht2_icon or ht2left:
.ht2left:hover { background: url(icons/img_hover.png) no-repeat center; }
For lunching multiple events please use bind (it is tagged jquery so this is jquery solution, but with other frameworks it will be very similar)
$( ".ht2left" ).bind( "hover", popup('#newTeam'));
$( ".ht2left" ).bind( "hover", method2('#newTeam'));
You should keep your HTML, CSS and JavaScript separate and bind your callbacks programmatically. Your "clean" HTML would look like this (I added the class popup-trigger):
<div class="ht2_icon ht2left popup-trigger">
<span class="tooltip">
<img src="icons/img4hover.png"/>
</span>
</div>
In JavaScript, your can then add multiple event listener to an element, please check this example and the following code:
tooltips[i].addEventListener('mouseover', popTooltip);
tooltips[i].addEventListener('mouseover', doSomethingElse);
If you are using jQuery, you should use the .on() function, it will execute the callback for all current and future elements that match the selector.
var $triggers = $(".popup-triggers");
$triggers.on("click", function() {
// do something
});
What's the correct way to change an image on mouseover and back on mouseout (with/without jQuery)?
<a href="#" id="name">
<img title="Hello" src="/ico/view.png" onmouseover="$(this).attr('src','/ico/view.hover.png')" />
</a>
Ok, this is working, but how to change back to the original image after mouseout?
If it is possible, I want to do this thing inline, without document.ready function.
here's a native javascript inline code to change image onmouseover & onmouseout:
<a href="#" id="name">
<img title="Hello" src="/ico/view.png" onmouseover="this.src='/ico/view.hover.png'" onmouseout="this.src='/ico/view.png'" />
</a>
Try something like this:
HTML:
<img src='/folder/image1.jpg' id='imageid'/>
jQuery:
$('#imageid').hover(function() {
$(this).attr('src', '/folder/image2.jpg');
}, function() {
$(this).attr('src', '/folder/image1.jpg');
});
DEMO
EDIT: (After OP HTML posted)
HTML:
<a href="#" id="name">
<img title="Hello" src="/ico/view.png"/>
</a>
jQuery:
$('#name img').hover(function() {
$(this).attr('src', '/ico/view1.png');
}, function() {
$(this).attr('src', '/ico/view.png');
});
DEMO
Thy to put a dot or two before the /
('src','./ico/view.hover.png')"
Here is an example:
HTML code:
<img id="myImg" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"/>
JavaScript code:
$(document).ready(function() {
$( "#myImg" ).mouseover(function(){
$(this).attr("src", "http://www.jqueryui.com/images/logo.gif");
});
$( "#myImg" ).mouseout(function(){
$(this).attr("src", "http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif");
});
});
Edit: Sorry, your code was a bit strange. Now I understood what you were doing. ;)
The hover method is better, of course.
jQuery has .mouseover() and .html(). You can tie the mouseover event to a function:
Hides the current image.
Replaces the current html image with the one you want to toggle.
Shows the div that you hid.
The same thing can be done when you get the mouseover event indicating that the cursor is no longer hanging over the div.
You can do that just using CSS.
You'll need to place another tag inside the <a> and then you can change the CSS background-image attribute on a:hover.
i.e.
HTML:
<a href="#" id="name">
<span> </span>
</a>
CSS:
a#name span{
background-image:url(image/path);
}
a#name:hover span{
background-image:url(another/image/path);
}
<a href="" onMouseOver="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/ask-icon.png';" onMouseOut="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png';">
<img src="http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png" name="MyImage">
Demo
http://jsfiddle.net/W6zs5/
I know someone answered this the same way, but I made my own research, and I wrote this before to see that answer. So: I was looking for something simple with inline JavaScript, with just on the img, without "wrapping" it into the a tag (so instead of the document.MyImage, I used this.src)
<img
onMouseOver="this.src='ico/view.hover.png';"
onMouseOut="this.src='ico/view.png';"
src="ico/view.png" alt="hover effect" />
It works on all currently updated browsers; IE 11 (and I also tested it in the Developer Tools of IE from IE5 and above), Chrome, Firefox, Opera, Edge.
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();
I have the standard setup of one main image and multiple thumbnails which can be cliced to change the main image. I'm using jqzoom on the main image but was having the common problem of the main image changing and the zoomed image just going blank. Looking through stack overflow i found some code that claimed to correct this, and in a way it does. But rather than allow each changed image to have a zoom, it makes the main image just a link to the large version, bypassing the jqzoom function call.
to show the two examples:
with the standard jqzoom code and thumbnails not showing zooms:
http://designerspider.net/clients/jge/project2.php?id=17
with added code and images just becoming links:
http://designerspider.net/clients/jge/project.php?id=17
the code i added was
$(".thumbs a").click(function(){
$(".jqclass").unbind();
$(".jqclass").jqzoom(options);
return false;
};
if anyone can see if i have missed anything, or need to do it a diffferent way, i'd appreciate any and all advice. I can't understand why adding the extra function would disable the main jqzoom feature :/
You may find, because you are using two functions side by side, one to change images, and the other to unbind the zoom function, and then rebind it, the 2nd function is finishing before the image has changed. So when the image does change, it still won't work.
Second problem, you are not actually unbinding anything.
So, try firstly changing to:
$(".jqclass").unbind(".jqclass");
Alternatively you could migrate a little more to jQuery. I have tested this:
You HTML would look like this:
<div class="projectphotos">
<div id="photo_1">
<a href="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" class="jqclass">
<img src="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" class="projectimg2" alt="Mid 15th C Oakeshott Type XXa" />
</a>
</div>
<div id="photo_2" style="display:none;">
<a href="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg">
<img src="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg" class="projectimg2" alt="Mid 15th C Oakeshott Type XXa" />
</a>
</div>
<div class="thumbsdiv">
<ul class="thumbs">
<li>
<img rel="photo_1" src="http://designerspider.net/clients/jge/projects/h07_03_11_12_10_58.jpg" width="80" />
</li>
<li>
<img rel="photo_2" src="http://designerspider.net/clients/jge/projects/h07_03_11_12_19_49.jpg" width="80" />
</li>
</ul>
</div>
</div>
And your jQuery like this, I've explained each line:
var options = {
zoomWidth: 250,
zoomHeight: 250,
position: 'right',
yOffset: 0,
xOffset: 0,
title: false
}
$(".jqclass").jqzoom(options);
// Make the thumbnail look clickable:
$(".thumbs img").each(function() {
$(this).css('cursor', 'pointer');
});
// React to clicking on a thumbnail:
$(".thumbs img").click(function() {
// Get the photo linked to:
var photo = $(this).attr('rel');
// Unbind the zoom:
$(".jqclass").unbind(".jqclass");
// Hide the current image via its parent DIV:
$(".jqclass").parent().hide();
// Remove teh jqclass:
$(".jqclass").removeClass("jqclass");
// Show the clicked photo:
$("#"+photo).show();
// Add the class and the zoom:
$("#"+photo+" a").addClass("jqclass").jqzoom(options);
});
This is how you can clean the data from jQZoom:
$('.jqclass').removeData('jqzoom');
Because jQZoom saves the object data the following way:
$(el).data("jqzoom", obj);