I have slightly modified the code in this post jQuery div content partial hide, show all to show/hide a list of div's on my page.
I am still learning jQuery and am trying to figure out how I can modify the code so that when I open one div, it will close any other's that are open.
Thanks a lot for any help. Here is my code block:
function setScroll(){
var slideHeight = 80;
$(".container").each(function() {
var $this = $(this);
var $wrap = $this.children(".wrap");
var defHeight = $wrap.height();
if (defHeight >= slideHeight) {
var $readMore = $this.find(".heading");
$wrap.css("height", slideHeight + "px");
$readMore.append("<div id='clickButton' class='expand-div'>Click for More Info</div>");
$readMore.children("#clickButton").bind("click", function(event) {
var curHeight = $wrap.height();
if (curHeight == slideHeight) {
$wrap.animate({
height: defHeight
}, "normal");
$(this).removeClass("expand-div").addClass("collapse-div");
$(this).text("Close");
$wrap.children(".gradient").fadeOut();
} else {
$wrap.animate({
height: slideHeight
}, "normal");
$(this).removeClass("collapse-div").addClass("expand-div");
$(this).text("Click for More Info");
$wrap.children(".gradient").fadeIn();
}
return false;
});
}
});
}
Simple example (jsfiddle) demonstrates closing all and opening one.
var divs = $('div.highlander').hide();
var which = divs.length;
$('#cycler').click(function () {
which += 1;
if (which >= divs.length) {
which = 0;
}
divs.hide();
divs.eq(which).show();
});
Roy's answer is good. I have another example of something you could do. A little bit more general and possible easier to understand. http://jsfiddle.net/sFR6Q/2/
<button class="show1">show1</button>
<button class="show2">show2</button>
<button class="show3">show3</button>
<button class="show4">show4</button>
<div class="show1">1</div>
<div class="show2">2</div>
<div class="show3">3</div>
<div class="show4">4</div>
var divs = $("div")
$('button').click(function () {
divs.hide();
$("div." + $(this).attr("class")).show();
});
First close all the div's irrespective of if they are open or closed.
Then just open the div you need.
Related
I have been working on creating a custom javascript thumbnail slider using data-src. Everything is working perfectly just the next button and prev button is not working at all. Any help would be appreciated.
Here is the link to the codepen
https://codepen.io/mandipluitel/pen/BbOXgZ
I am using this code.
$(document).ready(function(e){
$(".thumbnails li").click(function(e){
var thisDataSrc = $(this).attr("data-src");
var thisDataCount = $(this).children().attr("data-count");
if(thisDataSrc == "undefined"){}
else{
$(this).siblings("li").removeClass("active");
$(this).addClass("active");
$(this).parents(".thumbnails").next().find("img").attr("src",thisDataSrc);
$(this).parents(".thumbnails").next().find("span.number").html("" + thisDataCount + "");
}
});
$("button.next").click(function(e) {
var currentDiv = 0;
var newDataSrc = $(this).parents(".slider-hold").prev().find(".active").attr("data-src");
if(newDataSrc == "undefined"){}
else{
currentDiv = currentDiv .next();
currentDiv.siblings("li").removeClass("active");
currentDiv.addClass("active");
currentDiv.parents(".thumbnails").next().find("img").attr("src",newDataSrc);
}
});
});
Help here.
the problem is that currentDiv is set to zero. So when you later set it to currentDiv.next(), it doesn't really do anything.
I belive that the function should start something like this:
$("button.next").click(function(e) {
var currentLi = $("li.active");
var nextLi = currentLi.next();
if (nextLi) {
nextLi.siblings("li").removeClass("active");
nextLi.addClass("active");
$("#large-image").attr("src",nextLi.attr("data-src"));
}
});
In the mobile version on my form appears 'Close' button.
Unfortunately, it does not work. I see a normal button, but when I click there is no reaction. In the javascript I load the file form-with-button.html to render form content in my all .html files.
<div id="form-with-button">
</div>
and use javascript to show and close.
//Onload show header and footer content
$("#header").load('header.html', function(){
$('#nav').affix({
offset: {top: $('#header').height()-$('#nav').height()}
});
});
$("#footer").load('footer.html');
$("#contact").load('footer-contact.html');
$("#form-with-button").load('form-with-button.html');
// Sticky Buttons Show Hide
$("#fix-quote, #fix-contact").on("click", function() {
var body = $("body");
var openPos= ["",""];
var id = $(this).attr("id");
var content = $("#"+id+"-content");
var property = (content.attr("class").toString().indexOf("left") > -1)? "left": "right";
if (!body.hasClass("bd_"+id)) {
openPos= [0,380]
var ele = $(this);
body.addClass("bd_"+id)
setTimeout(function(){
body.on("click.fix",function(ev) {
if($(ev.target).closest(".fixed-container").length == 0){
$(ele).click()
}
});
},10);
} else {
body.removeClass("bd_"+id).off("click.fix");
}
content.css("top","").show().css(property, openPos[0]);
$(this).css(property, openPos[1]);
});
// Mobile Requests Showhide
$("#fix-quote-mob, #fix-contact-mob").on("click", function() {
var id = $(this).attr("id").slice(0,-4);
var content = $("#"+id+"-content");
content.show()
setTimeout(function(){
content.css("top",0)
},10)
});
$(".fix-contact-close").on("click", function() {
var content = $(this).closest(".fixed-container");
content.css("top","").delay(400).hide(0);
});
Please help, why my button does not work?
You are trying to add a handler to an element created in a dynamic way, so you need to refactor your code in order to make it work:
$(document).on("click", ".fix-contact-close", function() {
var content = $(this).closest(".fixed-container");
content.css("top","").delay(400).hide(0);
});
I find myself getting frustrated with JS yet again! please help!
below is some code I am using for a simple chat app, that refreshes the content from a text file via an AJAX request. At the same time it scrolls to the bottom of the window. I want it so if the user scrolls up to catch up it doesnt keep interupting this behavour by sending them down to the bottom when it refreshes. How could I do this.
<script>
$(function() {
startRefresh();
});
function startRefresh() {
setTimeout(startRefresh,3000);
$.post('pollchat.php', function(data) {
$('#content_div_id').html(data);
var wtf = $('#content_div_id');
var height = wtf[0].scrollHeight;
wtf.scrollTop(height);
});
}
</script>
Any help greatly appreciated.
See How I have used current scroll position and counted that whether user has scrolled or not..
$(function() {
startRefresh();
});
function startRefresh() {
setTimeout(startRefresh, 1000);
var wtf = $('#content_div_id');
var currentScrollPos = wtf.scrollTop();
var elementHeight = wtf[0].scrollHeight;
var scroll = false;
//User has scrolled, don't set scroll
if (wtf.height() + currentScrollPos >= elementHeight) {
scroll = true;
}
var data = $('#content_div_id').html();
data += "Some Text<br/>";
$('#content_div_id').html(data);
if (scroll) {
var height = wtf[0].scrollHeight;
wtf.scrollTop(height);
}
}
#content_div_id {
max-height: 100px;
overflow-y: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content_div_id">
Some Text
<br/>Some Text
<br/>Some Text
<br/>Some Text
<br/>
</div>
UPDATE:
Try this code, you probably need to fix one or two things .. but have a look at the code and get an idea
$(function() {
startRefresh();
});
function startRefresh() {
setTimeout(startRefresh,3000);
$.post('pollchat.php', function(data) {
var wtf = $('#content_div_id');
var currentScrollPos = wtf.scrollTop();
var elementHeight = wtf[0].scrollHeight;
var scroll = false;
//User has scrolled, don't set scroll
if (wtf.height() + currentScrollPos >= elementHeight) {
scroll = true;
}
$('#content_div_id').html(data);
if (scroll) {
var height = wtf[0].scrollHeight;
wtf.scrollTop(height);
}
});
}
so i've made a jquery carousel which you can see here: http://teste.boleiafacil.com/ (it's the one in the end of the page
this is the jquery:
//highlights slide animation
var prdlength = $(".rproducts").length;
var prdleft = 1;
var i = 0;
function swapC() {
i++;
prdleft++;
$(".rproducts").each(function(){
$(this).animate({"left":"-" + prdleft + "px"}, 10);
if (prdleft == 180){
$(this).appendTo(".rproductswrapper");
prdleft = 0;
}
});
if (i == prdlength) {
i = 0
}
window.setTimeout(function() { swapC() }, 10);
}
$(window).on("load", swapC);
the problem is when the divs get appended to the end of the wrapper it looks glitchy.
how can i fix this?
Try wrapping your function in a document ready rather than window load, the shorthand for it is:
$(function(){
//code here
});
I have the following j-query code (using the jquery plugin ajax/libs/jquery/1.10.1) to move a div element to the left upon clicking on a separate div element:
<script>
$(document).ready(function(){
$("#tab_box3").click(function(){
$.fx.speeds._default = 800;
$("#tab3").animate({left:"+=97%"});
});
});
</script>
What I want to happen is when the #tab_box3 div is clicked on a second time, the #tab3 div moves back to where it originally started.
I tried the following, using Toggle, but it does not seem to have worked:
<script>
$(document).ready(function(){
$("#tab_box3").click(function(){
$.fx.speeds._default = 800;
$("#tab3").animateToggle({left:"+=97%"});
});
});
</script>
Can anyone offer advice please?
You must doing something like this :
$(document).ready(function(){
$("#tab_box3").click(function(e){
var element = $(this),
clicked = parseInt(element.data('clicked')) || 0;
element.data('clicked', clicked + 1);
$("#tab3").stop();
if (clicked % 2 == 0)
{
$("#tab3").animate({left:"+=97%"}, 800);
}
else
{
$("#tab3").animate({left:"-=97%"}, 800);
}
e.preventDefault();
});
});
An example here :
http://jsfiddle.net/Q5HDu/
You will have to use -=97% to offset the previous animation change.
var $tab3 = $("#tab3");
if ($tab3.data("animated")) {
$tab3.animate({left: "-=97%").data("animated", false);
}
else {
$tab3.animate({left: "+=97%").data("animated", true);
}