Chrome hides element that shouldn't be effected - javascript

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; */}}

Related

Replace alert function with an image

$(".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>

How to collapse expanded rows on page Load

I need your help in collapsing the expanded rows which are coming by default when the page loads. Here is the javascript code:
<script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.RowToClick').click(function() {
$(this).nextAll('tr').each(function() {
if ($(this).is('.RowToClick')) {
return false;
}
$(this).toggle(350);
});
});
});
</script>
And below is the tr code in the table tag which collapses and expands the tr tags:
<tr class="RowToClick">
<td><%=i%></td>
<td width="20%" style="padding: 1px; cursor: pointer" title="Click Here to Expand/Collapse Sub Folders">
<span style="text-decoration: underline"><%=sz_FolderName%></span>
</td>
</tr>
Add the below CSS:
.RowToClick {
display:none;
}
or add inline style
<tr class="RowToClick" style="display:none">
If you want that in load. Place your needed HTML elements in a DIV ( or take some existing TR or as u need) say eg divID
Start you script like this
$('#divID').toggle();
Try this script :
$(document).ready(function() {
$("table").each(function() {
$("tr").each(function() {
if ($(this).hasClass('RowToClick')) {
}
else {
$(this).toggle(50);
}
});
});
$('.RowToClick').click(function ()
{
$(this).nextAll('tr').each( function()
{
if ($(this).is('.RowToClick'))
{
return false;
}
$(this).toggle(350);
});
});
});
Update :
Can you try this fiddle :
http://jsfiddle.net/riginvp/xgeth4br/4/

could not show tooltip on mouse over , jquery1.11

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 *

JQuery Is not working properly on mouseenter and mouseleave

Hi I am making an effect that is when Mouse Enter in div one button shows in that div and when user mouse leave that area again button hide.
It works but the problem is that I have used div many times so I have used class for div definition.
So when Mouse enter in one div other div also affected.
Code :
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#container").mouseenter(function(){
$(":button").show();
});
$("#container").mouseleave(function(){
$(":button").hide();
});
});
</script>
jsp code :
<div id="container">
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=3">
<img src="product_images/Tulips1760331818.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">Nokia Lumia 925</div></div>
<div class="mainitemlistprice"><div align="center">38000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=5">
<img src="product_images/Jellyfish456319058.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">HCL Me</div></div>
<div class="mainitemlistprice"><div align="center">40000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
</div>
I have try to put Jquery on class="mainitemlist" but It's not working.
So I have added in id="container".
Anyone have idea, why it's not working ???
You can do this:
$(document).ready(function () {
$(".mainitemlist").mouseenter(function () {
$(this).find(":button").show();
}).mouseleave(function () {
$(this).find(":button").hide();
});
});
Demo: Fiddle
When you used the class mainitemlist you were not using the function scope properly using $(this) and hence it showing all the button on mouseenter, since you used the code:
$(":button").show();
UPDATE
$(document).ready(function () {
$(document).on('mouseenter', '.mainitemlist', function () {
$(this).find(":button").show();
}).on('mouseleave', '.mainitemlist', function () {
$(this).find(":button").hide();
});
});
try:
$(document).ready(function(){
$("#container").mouseenter(function(){
$("#container button").show();
});
$("#container").mouseleave(function(){
$("#container button").hide();
});
});
check out this fiddle.
b.t.w, you have 2 divs with the id of container. this is probably a mistake, and if not, it's bad practice.
hope that helps.
$("#container").mouseenter(function(){
$(this).find('#yourbutton').show();
});
$("#container").mouseleave(function(){
$(this).find('#yourbutton').hide();
});

Why isn't this simple jQuery block not working?

The jQuery:
$(document).ready( function() {
$("#links .button").click(function() {
var id = $(this).attr("id") + "-fade";
$("#sliding-blocks").fadeOut(100);
$("#" + id).fadeIn(300);
});
});
And the simplified HTML:
<table id="links">
<tr>
<td>
<div id="projects" class="button">
Projects
</div>
</td>
</tr>
</table>
<table id="sliding-blocks">
<tr>
<td>
<span id="projects-fade" class="block">
<img class="icon" src="github.png" height="20" width="20" />
</span>
</td>
</tr>
</table>
The non-simplified HTML contains more entries in #links and #sliding-blocks, but all following the same "fade" naming convention.
For some reason, I can't get anything to work (not even something I can work from). And yes, I've loaded jQuery.
Solution:
$(document).ready( function() {
var blocks = ["projects-fade", "blog-fade", "online-fade", "resume-fade"];
$("#links .button").click(function() {
var id = this.id + "-fade";
$("#sliding-blocks").fadeOut(100,function() {
$.each(blocks, function() {
$("#" + this).hide();
});
$("#" + id).show();
$(this).fadeIn(300);
});
});
});
Your fade out the #sliding-blocks table, and fade in one element of it, but the table itself is still faded out. You should instead fade out all .block elements, then fade in the one you want, leaving the table visible all the time.
Because you've faded out an ancestor of the element you're trying to fade in.
When the ancestor is faded out, none of its descendants will be visible.
I assume you're looking for something like this...
$(document).ready( function() {
$("#links .button").click(function() {
var id = this.id + "-fade";
$("#sliding-blocks").fadeOut(100,function() {
$("#" + id).show();
$(this).fadeIn(300);
});
});
});
you're hiding sliding-blocks and then your're trying to fade a child element of it in. that won't work as the parent container sliding-blocks is invisible

Categories

Resources