My requirement is to show tooltip on the image mouse over. I'm using jquery1.11 . But I'm not able to achieve it.
This is my fiddle
I want to show below table data on the tooltip on mouseover of the image:
<table class="statusRollup" style="position:absolute;">
<tr><td>tooltip Data1 </td></tr>
<tr><td>tooltip Data2</td></tr>
</table>
Sample code:
$.widget("ui.tooltip", $.ui.tooltip, {
options: {
content: function () {
return $(this).prop('title');
}
}
});
$(function () {
$('.one').attr('title', $('.statusRollup').remove().html())
$(document).tooltip();
});
Are they any suggestions?
Thanks.
You have it working, you just need to apply a title="" attribute to the items you want to have a tooltip.
<td class="sample-two">Row1
<img class="one" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png"
width="15" height="15" alt="" title="testing"/>
Working JSFiddle: http://jsfiddle.net/ubKtd/1132/
row1's img says testing.
Also I suggest visiting: http://jqueryui.com/tooltip/
If you want what you asked in the comments here:
JS:
$(function () {
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
});
$(function () {
$('.one').attr('title', $('.statusRollup').remove().html())
$(document).tooltip();
});
Also added jQuery UI as it wasn't added from what I was seeing:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
Working JSFiddle: http://jsfiddle.net/0w9yo8x6/3/ * Using jQuery 1.11.1 *
Related
$(".site-main").on("sf:ajaxstart",function(){
alert("show loader");
});
$(".site-main").on("sf:ajaxfinish",function(){
alert("hide loader");
});
I got this above code from a forum and it is showing me the alerts as it should. However, I'm planning to show a loader image with location path <img src="/path/image.gif" class="loader"> instead of the alert.
How can I go about this?
You could do like this
$(".site-main").on("sf:ajaxstart",function(){
$('img.loader').show()
});
$(".site-main").on("sf:ajaxfinish",function(){
$('img.loader').hide()
});
Note:- You can do toggle show hide.based on events triggered. Here is the basic demo which will help you to understand the functionality.
$(document).ready(function() {
$(document).ajaxStart(function() {
$("img").show();
}).ajaxStop(function() {
$("img").hide('slow');
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://icon-library.net/images/loading-icon-png/loading-icon-png-12.jpg" height='50px' width='50px' alt="Loading" class='loader' style="display:none">
<form>
<button type="button" class="btn" onclick="showLoader(); return false;">Show Data</button>
</form>
<script>
function showLoader() {
$.post("/echo/json", {});
}
</script>
Here's a fiddle of my problem, and a code snippet in case that doesn't work:
$(function() {
$('div').hover(
function() {
$(this).append("<div id='xxx'>ccc</div>")
},
function() {
$('#xxx').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
<tr>
<td>
<div>
<a href="xxx">
<img src="xxx">aaa
</a>
bbb
</div>
</td>
</tr>
</table>
When I hover out of div, Text part of the link aaa disappears. I becomes :hover{visibility:visible} for some reason.
It has nothing to do with elements ids or text or links.
It is Chrome problem, Firefox works as should.
Is it a bug or it is a js problem here? Why does Chrome do that?
Surrounding 'bbb' with span fixes the problem:
$(function() {
$('div').hover(
function() {
$(this).append("<div id='xxx'>ccc</div>")
},
function() {
$('#xxx').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
<tr>
<td>
<div>
<a href="xxx">
<img src="xxx">aaa
</a>
<span>bbb</span>
</div>
</td>
</tr>
</table>
user after method to solve this problem
<script>
$('div').hover(
function() {
$(this).after("<div id='xxx'>ccc</div>")
},
function() {
$('#xxx').remove();
}
);
</script>
Try using this:
$('div').hover(
function() {
$(this).parent().append("<div id='xxx'>ccc</div>");
},
function() {
$('#xxx').remove();
}
);
Interesting behaviour. I've tried to add this, and text part of aaa is showing.
function(){
$(this).clearfix:after {
/* visibility: hidden; */}}
So I have a problem that I do know the solution to, but it would require a ton of repetitive code in the process so I know there must be a simpler way to do this. I have a list of divs that all have a main image and alt image. The alt images are hidden behind the main images and are supposed to switch with each other when the user hovers over the main image. Each div has it's own specific ID, but I really don't want to have to write the same script over and over just changing the ID. Here's my HTML (simplified but same structure minus fluff):
<section>
<div id="one">
<img src="#" class="main" />
<img src="##" class="alt" style="display: none;" />
</div>
<div id="two">
<img src="#" class="main" />
<img src="##" class="alt" style="display: none;" />
</div>
<div id="three">
<img src="#" class="main" />
<img src="##" class="alt" style="display: none;" />
</div>
</section>
and the jQuery I had written up:
<script type="text/javascript">
$(document).ready(function () {
$('#one img.main').mouseenter(function () {
$('#one img.main').hide();
$('#one img.alt').show();
});
$('#one img.alt').mouseleave(function () {
$('#one img.alt').hide();
$('#one img.main').show();
});
});
</script>
I really don't want to repeat for each div since there are 9 in my current page. Any suggestions?
SOLVED:
jQuery(document).ready(function () {
//swap out main images on hover
jQuery('.stores div img.main').mouseenter(function () {
jQuery(this).hide();
jQuery(this).next('img.alt').show();
});
jQuery('.stores div').mouseleave(function () {
jQuery('img.alt').hide();
jQuery('img.main').show();
});
});
You should be able to reduce it to:
$(document).ready(function () {
$('section > div > img.main').mouseenter(function () {
$(this).hide();
$(this).next('img.alt').show();
});
$('section > div > img.alt').mouseleave(function () {
$(this).hide();
$(this).prev('img.main').show();
});
});
You can use this selector for each first img:
$('section div img:first')
So if you put an id in the section:
$('#yourSectionId div img:first')
You need to write scripts mouseenter on .main and mouseleave on the div itself
<script type="text/javascript">
$(document).ready(function () {
$('section > div > img.main').on('mouseenter', function (e) {
$(this).find('~ .alt').show();
$(this).hide();
});
$('section > div').on('mouseleave', function (e) {
$(this).find('.alt').hide();
$(this).find('.main').show();
});
});
</script>
I would use:
<script>
$(document).ready(function () {
$('section > div').on('mouseenter', function () {
var el = $(this);
el.find('.main').hide();
el.find('.alt').show();
});
$('section > div').on('mouseleave', function () {
var el = $(this);
el.find('.alt').hide();
el.find('.main').show();
});
});
</script>
I have tried everything to remove the inline style from <img> tags in a page. And nothing has worked.
Given rendered html like:
<p><img alt="" src="../../../../images/Cuffs.jpg" style="width: 620px; height: 395px;" /></p>
How can I remove the <style> attribute from all images in page? I have tried removeAttr as well as code from various SO posts and nothing has worked.
EDIT:
I tried
<script>
$(document).ready(function ($) {
$('img').each(function () {
$(this).removeAttr('style')
});
});
</script>
And:
<script>
$(document).ready(function ($) {
$('img').removeAttr("style")
});
</script>
And
<script>
$(document).ready(function ($) {
$('img').attr('style', '');
});
</script>
As well as about 3 or 4 other examples from around the web.
When I view source I see:
<p><img alt="" src="../../../../images/Cuffs.jpg" style="width: 620px; height: 395px;" /</p>
Checking in Chrome
Your first try works perfectly:
$(document).ready(function ($) {
$('img').each(function () {
$(this).removeAttr('style')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<p>
<img alt="" src="http://lorempixel.com/32/32" style="width: 620px; height: 395px;" />
</p>
$().removeAttr('style'); works in Safari, Chrome and Firefox (all latest). Not sure on IE, but it certainly should.
$(function() {
$('img').removeAttr("style");
});
See this jsBin: http://jsbin.com/yokaxo/1/
Use the .removeAttr() method (documentation).
In my case the images had their 'height' and 'width' attributes set, so instead of targeting the 'style' attribute, you may need to do this:
$('img').each(function ()
{
$(this).removeAttr('width');
$(this).removeAttr('height');
});
Of course you could also remove the style attribute too for completeness, but that's up to you.
$('img').each(function ()
{
$(this).removeAttr('width');
$(this).removeAttr('height');
$(this).removeAttr('style');
});
Anyway, hope it helps someone.
I have the code below that clicking on an image hides a div.
Works perfectly, but does not work in IE ...
Why?
http://jsfiddle.net/mtsys/6qAfp/
codes:
$(document).ready(function () {
$('.fechar').click( function() { alert('testes'); $(".nav").attr("hidden",true); });
$('.mais').click( function() {
var status = $(".nav").attr("hidden");
if (status)
{
$(".nav").attr("hidden",false);
}
else
{
$(".nav").attr("hidden",true);
}
});
});
HTML:
<div class="header">
Estágio
<div class="mais"></div>
</div>
<div class ="parent">
<div class="content">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
<div class="nav"><div class="fechar"></div><div id="dadosDiv"></div></div>
</div>
tks
Use .hide() and toggle() to change the display of the elements
$('.fechar').click(function () {
$(".nav").hide()
});
$('.mais').click(function () {
$(".nav").toggle()
});
Demo: Fiddle
Why not change your JS to:
$('.fechar').click( function() { alert('testes'); $(".nav").hide(); });
$('.mais').click( function() {
$(".nav").toggle();
});
This will not only simplify your code but utilise jQuery's inbuilt function for toggling content visibility. Incidentally, the issue was the hidden attr reference, this should have been .css('hidden',true) if you want to go down that route...