I wanna like that some plugin just one thing must be different there is have 2 links for 2 div i wanna show there example 10 div but with only one button like "Load More" how i can do this ?
html
Click1
Click2
<div id="outer">
<div id="inner">Initial content</div>
</div>
<div style="display:none" id="hidden1">After click event showing hidden 1</div>
<div style="display:none" id="hidden2">After click event showing hidden 2</div>
Js
$(document).ready(function() {
$('.link').click(function()
{
var id = $(this).attr('href');
$('#inner').fadeOut('slow', function() {
$('#inner').html($(id).html());
$('#inner').fadeIn('slow');
})
})
})
CSS
#hideMsg{
text-align:center;
padding-top:10px;
}
http://jsfiddle.net/G5qGs/2/
You can do it something like this.
Create a load more button
Load More
Use javascript like below
var count = 1;
$('#loadmore').click(function() {
$('#inner').fadeOut('slow', function() {
$('#inner').html($("#hidden" + count).html());
$('#inner').fadeIn('slow');
count++;
})
});
Working example
http://jsfiddle.net/G5qGs/25/
P.S : You might want to display "No more content" at the end. that can be achieved using a simple if else condition
Related
I almost give up. Can't find any solution on this so I hope you can help me. I have a script that shows/hides divs and it's working like this. If you click one button a div shows and if you press another button it switches to that div. That's working great. But I want to be able to close all divs with the last button clicked.
This is my HTML
<div class="hidden-divs-buttons">
<a class="show-div btn" target="1">Div 1</a>
<a class="show-div btn" target="2">Div 2</a>
</div>
<div class="hidden-divs">
<div id="div1" class="target-div">Content div 1</div>
<div id="div2" class="target-div">Content div 2</div>
</div>
This script works but has no closing functionality
$('.show-div').click(function() {
$('.target-div').hide();
$('#div' + $(this).attr('target')).fadeIn(1000);
});
And this is the script I want to replace the working script with. I have been trying to change it to work with closing function. I might be totally of but hopefully you guide in the right direction. I get an error that tell me "box.hasClass() isn't a function".
$('.show-div').click(function() {
var box = $('#div' + $(this).attr('target'));
$('.target-div').hide();
if(box.hasCLass('close-div')) {
box.removeClass('close-div');
$('.target-div').fadeOut(1000);
} else {
box.fadeIn(1000);
box.addClass('close-div');
}
});
Edit Id's are updated.
This is how the code became. With this code I can click on a button and show a div, click the next one to show another div. If I click the same button again it will close all divs.
$('.show-div').click(function() {
var box = $('#div' + $(this).attr('target'));
if(box.hasClass('close-div')) {
$('.target-div').removeClass('close-div');
$('.target-div').fadeOut(1000);
} else {
$('.target-div').removeClass('close-div');
$('.target-div').hide();
box.fadeIn(1000);
box.addClass('close-div');
}
});
You have typo in if(box.has[CL]ass('close-div')) {
hasClass not hasCLass
hasClass does not have a capital L - it's hasClass not hasCLass not sure if this is just a typo in the question or your real code.
Also both your divs in the hidden-divs section have the same id of div1, when they should presumably be div1 and div2. In any event it would be better to specify the full id of the div as the target instead of building it.
In addition, you are applying hide to all elements of class target-div before fading them out, which rather defeats the idea of a fadeout
<div class="hidden-divs-buttons">
<a class="show-div btn" target="div1">Div 1</a>
<a class="show-div btn" target="div2">Div 2</a>
</div>
<div class="hidden-divs">
<div id="div1" class="target-div">Content div 1</div>
<div id="div2" class="target-div">Content div 2</div>
</div>
$('.show-div').click(function() {
var box = $('#' + $(this).attr('target'));
// this makes them invisible, so fadeOut is pointless
$('.target-div').hide();
if(box.hasClass('close-div')) {
box.removeClass('close-div');
$('.target-div').fadeOut(1000);
} else {
box.fadeIn(1000);
box.addClass('close-div');
}
});
I am using this javascript for collapsing and expanding a div in which is some information. The div has class .info.
After page reloading, you can see first that the div is visible, but within a second, when the js is loaded, it disappears.
How can i achieve that when reloading the page, also at the very first second time the div is not visible?
$( document ).ready(function() {
var $accordionIO = $('.accordion .toggle-button');
$accordionIO.prev('div').hide();
$(".accordion .toggle-button").click(function () {
//Inner
var jqInner = $('.info', $(this).parent());
if (jqInner.is(":visible"))
{
jqInner.slideUp();
$(this).find('.button-switch').html('Information');
}
else
{
jqInner.slideDown();
$(this).find('.button-switch').html('Close');
}
});
});
The html:
<!-- Start toggle script -->
<div class="accordion">
<div class="info">
<?php
include('includes/information.txt');
?>
</div>
<div class="toggle-button"><span class="button-switch">Information</span> </div>
</div>
Please try adding inline style attribute. See example below:
<div style="display:none;"></div>
I am trying to implement onClick function for a div which is getting generated depending on some validations while submitting the page. I am trying to implement the same from an external js file.
HTML design is something like :
<div id="QViewInfo" style="top: 207px; left: 531.5px;">
//dynamically generated
<div>
---
----
</div>
</div>
Now, I am trying to implement the onClick function like below :
$('img.popUpClose.popUpCloseQview').each(function (index) {
$(this).on("click", function (e) {
//DO something
});
});
But the issue is, this $('img.popUpClose.popUpCloseQview') element is not there in the code on the first time. After the submit button click valiations are happening and depending on the condition this pop up message is coming up and this function is not working anytime.
Tried some other options too. But none of these are working.
Please advise.
Thanks,
Aniket
If you are dynamically generating the div in jquery, you can add the click event then. For example:
var div = $("<div>");
div.click(function(){//dostuff});
$("#QViewInfo").append(div);
You could attach the click event to all the div's of element #QViewInfo using event delegation on() like :
$('#QViewInfo').on('click', 'div', function(){
//DO something
})
NOTE : No need for using each() loop.
Hope this helps.
$('#QViewInfo').append('<div>Div 3</div>');
$('#QViewInfo').on('click', 'div', function(){
console.log($(this).text());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QViewInfo" style="top: 207px; left: 531.5px;">
<div>Div 1</div>
<div>Div 2</div>
</div>
Working snippet with comment code :
var img = '<img src="/Images/...." onclick="alert(\'QView.close();\')" alt="Close Quick View" class="popUpClose popUpCloseQview">';
$('.oosInfo').append(img);
$('#QViewInfo').on('click', 'img.popUpClose.popUpCloseQview', function(){
alert("A");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QViewInfo">
<div class="oosInfo">
<div class="alertImgDiv">
<span class="oosAlertImg"></span>
</div>
</div>
</div>
Ok, I'm usually pretty good with jQuery but this one is doing my head in.
Basically I have a click event that hides a single DIV (a placeholder), then shows two other DIVs (an input section and control buttons section). Then, when I click on one of the control buttons to change the main DIV being shown (by hiding all the divs then showing the one I want), the hide() does not thing.
This is kind of hard to explain, so I have a jsFiddle that shows the problem at: jsFiddle
In the fiddle, what should happen is when you click the "CLICK ME" text, it should set up the DIVs correctly. Then clicking the boxes (1,2 or 3) it should change the text to "Item 1", "Item 2" or "Item 3". As you can see, the "Item 1" DIV is never hidden because this is the DIV that was shown in the initial layout event. If you comment out line #5 in the JavaScript everything works exactly as it should however the initial layout is incorrect (I'd like "Item 1" to be displayed by default).
Obviously this is a massively simplified version of what I'm actually working.
Has anyone come across this and know what the problem is?
Some code:
HTML:
<div id="newinput">
<div class="inputmode">
<div class="placeholder">CLICK ME</div>
<div class="modeitem item1">Item 1</div>
<div class="modeitem item2">Item 2</div>
<div class="modeitem item3">Item 3</div>
</div>
<div class="controls">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
JavaScript:
$('#newinput').click(function () {
var im = $(this).children('.inputmode');
var ph = im.children('.placeholder').html();
im.children('.placeholder').hide();
im.children('div.item1').show();
$(this).children('.controls').show();
});
$('#newinput .controls .item').click(function () {
var item = 'item' + $(this).html();
var im = $('#newinput').children('.inputmode');
im.children('div').hide();
im.children('.modeitem.' + item).show();
});
It is because of event propagation, when the .item is clicked it triggers the #newinput click handle also.
As a solution register the first handler only to the placeholder element
$('#newinput .inputmode .placeholder').click(function () {
var im = $(this).closest('.inputmode');
var ph = im.children('.placeholder').html();
im.children('.placeholder').hide();
im.children('div.item1').show();
im.next('.controls').show();
});
$('#newinput .controls .item').click(function (e) {
var item = 'item' + $(this).html();
var im = $('#newinput').children('.inputmode');
im.children('div').hide();
im.children('.modeitem.' + item).show();
});
Demo: Fiddle
I have a clickable div (windows.location) and I am trying to display a modal popup when this div is clicked.
here is my div box:
<div class="category_box" onclick="window.location='/Products/#cityName/#categoryName'">
<div class="category_box_catName">
#link
</div>
<div class="category_box_NumOfProds">
#Resources.Categories_GetByCity_NumProdsText
</div>
</div>
I was trying to get the class of this div when it clicked but could not make it work:
if ($(event.target).hasClass('div[class*=category_box]')) {
$('#mdlPopup').show();
}
Then I was trying to change the onclick and to add inside it $('#mdlPopup').show();
<div class="category_box" onclick="$('#mdlPopup').show(); window.location='/Products/#cityName/#categoryName'">
...
but this is also not working for me.
I removed the windows.location from the div and use this code to make the div clickable. then I can get the class from the div using:
$(document).ready(function () {
$('[class^=category_box]').click(function () {
$('#mdlPopup').show();
window.location = $(this).find("a").attr("href");
return false;
});
});