hide toggle div when clicking control in toggle div - javascript

I use a toggle div in page. I have a textbox and a dropdownlist in it.
<div class="Search" style="display: none" >
<table width="100%" style="border: 1px solid #fff; border-radius:5px;padding:15px">
<tr>
<td width="60px">دسته بندی</td>
<td>
<asp:DropDownList ID="CategoryDropDownList" runat="server" />
</td>
</tr>
<tr>
<td>کلمه کلیدی</td>
<td>
<asp:TextBox ID="SearchTextBox" runat="server" Width="95%" />
</td>
<td><asp:ImageButton runat="server" ID="SerachButton" ImageUrl="~/images/btnSearchIcon.png" OnClick="SerachButton_Click" ValidationGroup="Search" /></td>
</tr>
</table>
</div>
I hide it when clicking anywhere on the page.
<script type="text/javascript">
$(document).ready(function () {
$('#showSreachDiv').click(function (evt) {
$(".Search").toggle("slow");
evt.stopPropagation();
});
$(document).click(function () {
var $el = $(".Search");
// toggle div
if ($el.is(":visible")) {
// fade out
$(".Search").toggle("slow");
}
});
});
</script>
But when i clicking control in toggle div, hide it.
I want insert text in textbox but don't it.

Try this:
$(document).ready(function () {
$('#showSreachDiv').toggle(function (evt) {
$(".Search").fadeout("slow");
}, function(evt){
$(".Search").fadein("slow");
}
);
}

Try This example:
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#showSreachDiv').toggle(function (evt) {
$(".Search").toggle("slow");
}, function(evt){
$(".Search").toggle("slow");
}
);
});
</script>
Toggle
<div class="search" style="border:solid 2px #CCC;display:none;">
<h1>//Your Work Here...</h1>
</div>

You could check in document.click whether the clicked element is a child of the search DIV and in that case, cancel the click handler:
$(document).click(function (evt) {
if ($(evt.target).parents('.Search').length > 0) return;
// put original code here ...
});

Related

Placing cursor and focus inside contenteditable div onclick

When you click on my td the hidden div will display over the top of it and the div will be made contenteditable but I want the mouse cursor to appear in the so after a single click I can start typing. Currently you need to click twice -- once to focus, and again to place the cursor.
Please don't worry about why I'm doing it this way, I've just stripped my code down to the essentials to isolate this problem.
$(document).ready(function() {
$("td").on("mousedown", function() {
var cellOffset = $(this).offset();
$('#cellSelect').offset({ top:cellOffset.top-1, left:cellOffset.left-1 });
$('#cellSelect').show(0);
$('#cellSelect').attr('contenteditable','true');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="cellSelect" style="display:none;position:absolute;border: 2px solid blue;width:91px;height:91px"></div>
<table border="1" cellpadding="10" width="100" height="100">
<tr>
<td id="1-1"></td>
</tr>
</table>
Call focus on the element.
You'll need to wrap the focus call in a setTimeout to ensure that the element is editable before focusing, otherwise you won't be able to type.
$(document).ready(function() {
$("td").on("mousedown", function() {
var cellOffset = $(this).offset();
$('#cellSelect').offset({ top:cellOffset.top-1, left:cellOffset.left-1 });
$('#cellSelect').show(0);
$('#cellSelect').attr('contenteditable','true');
setTimeout(() => $('#cellSelect').focus(), 0)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="cellSelect" style="display:none;position:absolute;border: 2px solid blue;width:91px;height:91px"></div>
<table border="1" cellpadding="10" width="100" height="100">
<tr>
<td id="1-1"></td>
</tr>
</table>

How do I make elements fadeOut one by one on click in Jquery and at the end display a message

I am trying to make a game that finishes when you click on the boxes with same colors so that they fadeout on click and at the end display a message.
I am not able to do so, I am relatively new to jquery and javascript. It would be a great help if someone could find a solution.
Here is my script:
<script>
$(document).ready(function () {
$(".boxr").click(function() {
var me = $(this);
$(".boxr").not(this).fadeTo('slow', 1, function() {
$(me).next().add(me).fadeOut('slow');
}).unbind('click');
$.when($('.boxr').fadeOut(500)).done(function() {
alert("You WIN!");
});
$(".boxy").click(function () {
$(this).fadeOut();
});
$(".boxb").click(function () {
$(this).fadeOut();
});
});
</script>
Here is the html body:
<body>
<center>
<div>
<h1 style="font-size:72px;">Welcome!</h1>
<h1 id="op"></h1>
<table><tr>
<td><div class="boxr" ></div></td>
<td><div class="boxy" ></div></td>
<td><div class="boxb" ></div></td>
<td><div class="boxy" ></div></td>
</tr>
</table>
</div>
</center>
</body>
boxr is a box with red color boxy is yellow and so on.
Isn't it as simple as this?
$(document).ready(function () {
"use strict";
// Bind
$('#a').click(function () {
$('#a').fadeOut(500, function () {
// Remove
$('#a').remove();
// Bind again
$('#b').click(function () {
$('#b').fadeOut(500, function () {
// Remove
$('#b').remove();
// Bind again!
$('#c').click(function () {
$('#c').fadeOut(500, function () {
// Remove again!
$('#c').remove();
});
});
});
});
});
});
});

Chrome hides element that shouldn't be effected

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

Change elements background image and not siblings

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>

Set jQuery Toggle to be open on ASP.Net Gridview Postback

I have a jQuery 'toggle' function on a table that I am using in conjunction with an asp.net gridview. I have pagination on my gridview and when I click on the next page, it posts back and therefore closes the Toggle/Table - I need a way of keeping it open. I have had a similar issue in the past with the Accordion function but resolved it via this method and wondered if one of you jQuery/Javascript geniuses could help:
<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" />
<script language="javascript" type="text/javascript">
$(function () {
var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());
$("#accordion").accordion({
autoHeight: false,
event: "mousedown",
active: activeIndex,
change: function (event, ui) {
var index = $(this).children('h3').index(ui.newHeader);
$('#<%=hidAccordionIndex.ClientID %>').val(index);
}
});
});
</script>
<div id="accordion">
<h3>Table Header 1 here</h3>
<div>
Some text here
</div>
<h3>Table Header 2 here</h3>
<div>
Here is my current code that I have the issue with:
<div class="box grid_16 round_all">
<h2 class="box_head grad_colour round_top">Client List</h2>
<div class="toggle_container" style="display:none;">
<asp:Label ID="LBLMessage" runat="server" />
<asp:GridView ID="gvClients" runat="server" CssClass="static" AutoGenerateColumns="true" AllowPaging="true" Visible="true" />
</div>
</div>
and here is the jQuery:
// Content Box Toggle Config
$("a.toggle").click(function(){
$(this).toggleClass("toggle_closed").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
});
Thanks in advance!
Try this:
$(function () {
$("a.toggle").click(function () {
$(this).toggleClass("toggle_closed").next().slideToggle("slow", function () {
if($(this).is(':visible')){
$('#<%=hidAccordionIndex.ClientID %>').val("1");
}
else{
$('#<%=hidAccordionIndex.ClientID %>').val("0");
}
});
return false; //Prevent the browser jump to the link anchor
});
var val = $('#<%=hidAccordionIndex.ClientID %>').val();
if (val == "1") {
$("a.toggle").click();
}
});
<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" />
Update 1:
Check this test page. GV paging isn't functional but it does simulate the scenario. Let me know in terms of this example how it differs from what you are expecting.
Wondering if you want to use UpdatePanel and see if that helps.

Categories

Resources