Jquery plugin not working after display block with jquery - javascript

I want to use some divs like tabs with jQuery in my project . Inside the div I want to use another jQuery plugin . I built those div tabs manually with jQuery and the default style for second and more divs are display: none with pure css or class name . When I change display of divs to display: block the second jQuery plugin inside the div not working .
Only second jQuery plugin can work correctly when I use code blow for hiding divs and don't using pure css or class name :
$('div.selector').hide();
The problem shows in this case , when html page loading for first time , there is a delay about 1sec to hide divs with jquery . Any suggestion except using loading logo for this case ?
I used bootstrap tabs and the problem still exist too .
How can I use pre-defined class or pure css to display: none divs for this case and client click to the button to show div and second jQuery plugin work correctly inside the div ?
<div class="tabs-wrapper">
<div class="tab-container tab1">
some code here
</div>
<div class="tab-container tab2 d-none">
<div>
second jquery plugin code here
</div>
</div>
</div>
<button id="btn1">Btn1</button>
<button id="btn2">Btn2</button>
<script>
$(function(){
$('#btn1').click(function () {
$('.tabs-wrapper .tab1').addClass('d-none');
$('.tabs-wrapper .tab2').removeClass('d-none');
});
$('#btn2').click(function () {
$('.tabs-wrapper .tab2').removeClass('d-none');
$('.tabs-wrapper .tab1').addClass('d-none');
});
});
</script>
When I used css class or inline style for hiding divs , the second jQuery plugin not working , the second plugin like same jquery sliders .

Please attach an example of the inner code you want it to run.
But anyway, a code doesn't run only because you hide or display a div. for that you should handle an event fired when your div is displayed.
Anyway, for properly displaying or hiding the div, you have a bug in yoer code.
here is 2 possible fixes (one is marked out )
<style>
.d-none
{
display:none;
}
</style>
<body>
<div class="tabs-wrapper">
<div class="tab-container tab1">
some code here
</div>
<div class="tab-container tab2 d-none">
<div>
second jquery plugin code here
</div>
</div>
</div>
<button id="btn1">Btn1</button>
<button id="btn2">Btn2</button>
<script>
//Option 1
$(function(){
$('#btn1').click(function () {
$('.tabs-wrapper .tab1').addClass('d-none');
$('.tabs-wrapper .tab2').removeClass('d-none');
});
$('#btn2').click(function () {
$('.tabs-wrapper .tab1').removeClass('d-none');
$('.tabs-wrapper .tab2').addClass('d-none');
});
});
/* Option 2
$(function(){
$('#btn1').click(function () {
$('.tab1').hide();
$('.tab2').show();
});
$('#btn2').click(function () {
$('.tab2').hide();
$('.tab1').show();
});
});
*/
</script>

$('#btn1').click(function () {
$('.tabs-wrapper .tab1').addClass('d-none');
$('.tabs-wrapper .tab2').removeClass('d-none');
});
$('#btn2').click(function () {
$('.tabs-wrapper .tab1').removeClass('d-none');
$('.tabs-wrapper .tab2').addClass('d-none');
});
.d-none
{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs-wrapper">
<div class="tab-container tab1">
some code here
</div>
<div class="tab-container tab2 d-none">
<div>
second jquery plugin code here
</div>
</div>
</div>
<button id="btn1">Btn1</button>
<button id="btn2">Btn2</button>
You can try this way
$(function(){
$('#btn1').click(function () {
$('.tabs-wrapper .tab1').addClass('d-none');
$('.tabs-wrapper .tab2').removeClass('d-none');
});
$('#btn2').click(function () {
$('.tabs-wrapper .tab1').removeClass('d-none');
$('.tabs-wrapper .tab2').addClass('d-none');
});
});

Related

Toggle div on link click

http://jsfiddle.net/FsCHJ/2/
what now happens is, whenever I have another link example it will also use this link as the toggle button. I just want Toggle Edit Mode to be toggling hidden div's on/off. So I tried to change $("a").click(function () to $("toggle").click(function () and <a>Toggle Edit Mode</a> to Toggle Edit Mode`, but doesn't work. Any idea's?
HTML
<li><a>Toggle Edit Mode</a>
</li>
<div class="hidden rightButton">hello</div>
CSS
.hidden {
display: none;
}
.unhidden {
display: block;
}
JS
$(document).ready(function () {
$("a").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
You want this.
<li><a class="toggle">Toggle Edit Mode</a>
$(".toggle").click(function () {
$("div").toggleClass("hidden unhidden");
}
You cannot use $("toggle"), because this looks for the html tag <toggle>. Instead add a class toggle to the link for which you want to toggle.
Use "ID" selector.
http://jsfiddle.net/FsCHJ/1/
There can be many classes (class=...) in one page but juste on id (id=...) per page. More informations here.
Javascript:
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
Html:
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
.hidden {
display: none;
}
.unhidden {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
Use .className selector:
$(".toggle").click(function () {});
You can also use jQuery's toggle function.
$(".toggle").click(function () {
$("div").toggle();
});
Created fiddle to demonstrate toggle.
This worked for me. Allowing me to show or hide text with the same link. I associate the link with the div i want to show. This works in lists with multiple records, each record having it's own ID.
<a class="showHideToggle div1">View Details</a>
<div id="div1" style="display:none;">Record 1 details goes here</div>
<a class="showHideToggle div2">View Details</a>
<div id="div2" style="display:none;">Record 2 details goes here</div>
<script>
$(document).ready(function () {
$(".showHideToggle").click(function (ctl) {
var linkedDivName = $(this).attr('class').replace('showHideToggle ', '');
var divToToggle = $("#" + linkedDivName);
//alert('current status: ' + divToToggle.css('display'));
if (divToToggle.css('display') == 'none') {
divToToggle.css("display", "block");
$(this).text("Hide Details");
} else {
divToToggle.css("display", "none");
$(this).text("Show Details");
}
});
});
</script>

JQuery does not hide div if p element is before it?

I am trying to make use of a JQuery snippet to hide some content on SharePoint. It works without the <p> element, but SharePoint has a lot of stuff in between the div so I think that's why it's not working.
JQuery:
jQuery(document).ready(function() {
jQuery(".ms-wpcontentdivspace").hide();
//toggle the componenet with class msg_body
jQuery(".ms-webpart-chrome-title").click(function(e)
{
e.preventDefault();
jQuery(this).next("div.ms-wpcontentdivspace").slideToggle(200);
});
});
Here's the working code:
<div class="ms-webpart-chrome-title"><h2><span>Hello</span> </h2></div>
<div class="ms-wpcontentdivspace">Hi there. I am hidden</div>
<div class="ms-webpart-chrome-title"><h2>Another title</h2></div>
<div class="ms-wpcontentdivspace">More hidden stuff</div>
Here's the code that doesn't:
<div class="ms-webpart-chrome-title"><h2><span>Hello</span></h2></div>
<p>some text</p>
<div class="ms-wpcontentdivspace">Hi there. I am hidden</div>
<div class="ms-webpart-chrome-title"><h2>Another title</h2></div>
<div class="ms-wpcontentdivspace">More hidden stuff</div>
Here's a Jsfiddle. Thanks!
The jQuery version used 1.3.x is pretty old, anyway try
jQuery(document).ready(function () {
jQuery(".ms-wpcontentdivspace").hide();
//toggle the componenet with class msg_body
jQuery(".ms-webpart-chrome-title").click(function (e) {
e.preventDefault();
jQuery(this).nextAll("div.ms-wpcontentdivspace").eq(0).slideToggle(200);
});
});
Demo: Fiddle
$.next() only gets the immediately following sibling, so you will want to use $.nextAll()
jQuery(document).ready(function() {
jQuery(".ms-wpcontentdivspace").hide();
//toggle the componenet with class msg_body
jQuery(".ms-webpart-chrome-title").click(function(e)
{
e.preventDefault();
jQuery(this).nextAll("div.ms-wpcontentdivspace").eq(0).slideToggle(200);
});
});

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();
});

Link onClick event needs to show just one DIV

I have this code, works fine but the problem is when I click on link (1) shows all the DIVs while I need each Link showing ONLY its own div.
Java Script
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
Map //Link(1)
<div class="slidingDiv">
hide
</div>
Map//Link(2)
<div class="slidingDiv">
hide
</div>
Map//Link(3)
<div class="slidingDiv">
hide
</div>
//...............And so on.....
If I click on any of those links it shows all the DIVs while it should show just its own one.
How to do that?
You are targeting all elements with slidingDiv class, Change below code
$(".slidingDiv").slideToggle();
As below and try
$(this).next(".slidingDiv").slideToggle();
Update*:
You have show_hide class as child of slidingDiv to handle it's click event try below code
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
var div = $(this).next(".slidingDiv");
console.log(div);
if (!div.length) {
div = $(this).parent('.slidingDiv');
}
console.log(div);
div.slideToggle();
});
});
jsFiddle
Try this;
HTML:
Map //Link(1)
<div class="slidingDiv">
hide1
</div>
Map//Link(2)
<div class="slidingDiv">
hide2
</div>
Map//Link(3)
<div class="slidingDiv">
hide3
</div>
jQuery:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(this).next().slideToggle();
});
});
Here is the fiddle: http://jsfiddle.net/MrvXB/

expand ALL or collapse ALL

We are creating the FAQ section for our project.
Each FAQ question has a slide toggle to slide up or down the answer to a FAQ.
The js we use is :
$(function ()
{
$('input#search_term').quicksearch('.portlet ul li',
{
loader: 'span.loader'
, onBefore: function ()
{
$('.answer').hide ();
}
, noResults: '#no_results'
});
$('#search-bar form').live ('submit' , function () { return false; });
$('.faq .answer').hide ();
$('.faq p a').live ('click' , function () { $(this).parent ().next ('.answer').slideToggle (); });
});
The html for each question , which are contained in individual LI tags is like:
<li style="display:none;">
<p><span class="plus_icon">+</span><a class="faq" href="javascript:;">Question Title here</a></p>
<div class="answer">
<p>Answer here</p>
</div>
All I want to do is add an element which onclick expands ALL or contracts all LI's
Could anyone help Please.
All you need is a single selector for all of the elements you want to expand/contract. If you have that, you can select on it and use slideDown() or slideUp() to slide all of them at once; jQuery will affect all of them at once. Like so:
HTML:
<span id="expand-all">Expand All</span>
<span id="contract-all">Contract All</span>
JS:
$('#expand-all').click(function() {$('.answer').slideDown();});
$('#contract-all').click(function() {$('.answer').slideUp();});

Categories

Resources