I'm using javascript to show and hide 3 divs on my site, but unless the menu is clicked again the current div just stays open. I am trying to find out how to make one div close when another is opening. There are three divs in total. Here is my current javascript:
<script type="text/javascript">
$(document).ready(function () {
$('#slide').click(function () {
var hidden = $('.hidden');
if (hidden.hasClass('visible')) {
hidden.animate({
"left": "-500px"
}, "slow").removeClass('visible');
} else {
hidden.animate({
"left": "0px"
}, "slow").addClass('visible');
}
});
});
</script>
Any insight would be greatly appreciated!
I would do it something like this instead:
$(document).ready(function () {
$('#slide').click(function () {
var hidden = $('.hidden').not('.visible');
var vis = $('.hidden.visible');
vis.animate({
"left": "-500px"
}, "slow").removeClass('visible');
hidden.animate({
"left": "0px"
}, "slow").addClass('visible');
});
});
Related
This question is based on my last question.
show or make visible active tab
there were some issues that I have to fix so I have fixed. but still I can't make it work properly.
Like I want to scroll left and right active/clicked tabs to show. please have look to jsfiddle example. such as: when I click on overflowed tab 5 and it should show visible. then from 1 till 4 will be overflowed (hidden) so now If I click on 2 (2 click) then it should scroll to right and show it visible. In reality, there will be N number of list(li) elements.
I just found don't know why but jsfiddle example doesn't work on IE.
Thank you...
Jsfiddle
$(document).on('click', '.liClicked', function () {
var idValue = ($(this).attr('id'));
console.log(idValue);
var idValues = ($(".element ul li#" + idValue));
console.log(idValues);
// $(idValues).css('left','-50px');
$('.element').animate({
"left": "-=50px",
}, "slow")
});
$("#right").click(function () {
var calcs = ($('ul li#tab1').width());
$(".element").animate({
"left": "+=" + calcs,
}, "slow");
});
$("#left").click(function () {
$(".element").animate({
"left": "-=50px"
}, "slow");
});
Try this:
$(document).on('click', '.liClicked', function() {
var idValue = ($(this).attr('id'));
console.log(idValue);
var idValues = ($(".element ul li#" + idValue));
console.log(idValues);
// $(idValues).css('left','-50px');
var me = $(this);
$('.element').animate({
"left": $('li#' + me.prop('id')).position().left * -1 ,
}, "slow")
});
Also, it isn't recommended to have two elements with the same ID
I have a little problem that I'd love to solve on my website.
Have a look at this JSFIDDLE — https://jsfiddle.net/sm25t089/
This is the javascript code:
$(document).ready(function () {
$(".bottoni").hide();
$(".reveal").click(function () {
$(this).toggleClass("active").next().slideToggle(200, "linear");
if ($.trim($(this).text()) === '(+)') {
$(this).text('(×)');
} else {
$(this).text('(+)');
}
return false;
});
$("a[href='" + window.location.hash + "']").parent(".reveal").click();
});
I'd love the menu to move from out-of-the-screen to the left, to the right, instead the actual bottom to top.
Thanks for the help.
F.
here is one solution using css3
transition:0.3s;
https://jsfiddle.net/sm25t089/1/
if you prefer using only ccs2 then you can do the same with a jquery animate
You can use the jQuery method .animate()
(function($) {
$(document).off("click.slide").on("click.slide", ".reveal", function (e) {
var $self = $(this),
$menu = $(".bottoni"),
isActive;
e.preventDefault();
$self.toggleClass("active");
isActive = $self.hasClass("active");
$self.text(isActive ? "(x)" : "(+)");
$menu.animate({
"left": isActive ? "21px" : "-100px"
}, 200, "linear");
});
})(jQuery);
Here are a JSFiddle with the sample: https://jsfiddle.net/sm25t089/3/
I have a search button on my website, i have a function that wil animate my input field when clicking by moving it to the right. And if i click out of it then it wil close.
This works only after like 2 times open/close it is broken and won't animate anymorge. I added a console.log(); so i can see what its doing.
Here is my function.
function setupSearchButton()
{
j(".icon").click(function() {
var icon = j(this),
input = icon.parent().find("#search"),
submit = icon.parent().find(".submit"),
is_submit_clicked = false;
j(".searchform").animate({ "margin-left": "+=180px", "display": "block !important" }, "slow", function(){
console.log("Move the searchbar to the right 180px;");
});
// Animate the input field
input.animate({
"width": "165px",
"opacity": 1
}, 300, function() {
input.focus();
});
submit.mousedown(function() {
is_submit_clicked = true;
});
// Now, we need to hide the icon too
icon.fadeOut(300);
input.blur(function() {
if(!input.val() && !is_submit_clicked) {
input.animate({
"width": "0",
"padding": "0",
"opacity": 0
}, 200);
// Get the icon back
icon.fadeIn(200);
j(".searchform").animate({ "margin-left": "-=180px", "display": "block !important" }, "slow", function(){
console.log("Move the searchbar back by adding a negative -180px to the left.");
});
};
});
});
}
Also i'm using "noconflict".
So what i'm doing wrong here ?.
Thx
Check if the field is animated. if it is animated then return otherwise apply animation. Try with below code sample inside click function.
input = icon.parent().find("#search");
if(input.is(":animated")){
// return if Animate applied.
return;
}
else
{
// Animate the input field
input.animate({
"width": "165px",
"opacity": 1
}, 300, function() {
input.focus();
});
}
I am using the following javascript to slide open panels to the right when links are clicked.
jQuery(function($) {
$('a.panel').click(function() {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active'),
animIn = function () {
$target.addClass('active').show().css({
left: -($target.width())
}).animate({
left: 0
}, 500);
};
if (!$target.hasClass('active') && $other.length > 0) {
$other.each(function(index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: -$this.width()
}, 500, animIn);
});
} else if (!$target.hasClass('active')) {
animIn();
}
});
$('.close').click(function(){
$(this).closest('.panel').animate({
left: -200
}, 500);
});
});
When a close button is clicked the panel is closed.
What I need is that when a close button is clicked, the 'ACTIVE' class is removed from the panel. And IF possible, the anchor is removed.
This is because if the user clicks on the same panel link again it won't open.
See this jsfiddle
Thanks
Just add .removeClass('active') to your close function, see http://jsfiddle.net/RZpbK/479/
$('.close').click(function(){
$(this).closest('.panel').animate({
left: -200
}, 500).removeClass('active');
});
As I see it then the function works as expected, but I cant understand why you would want to remove the anchor? Then it cant be closed the next time you open it?
I have a button which fixes the position of the page content then pushes it left while a form slides in from the right.
This is working fine except for one thing. When the user has scrolled down the page slightly and clicks on the button it successfully fixes the position. However when they then close this form, the page does not return to the original position... it takes the user back to the top of the page. I've posted the jquery below which might help to explain the problem better.
There's also a jsfiddle example here...
http://jsfiddle.net/CMbBC/
var pageContents;
var currentscrollpos;
$(document).ready(function() {
$("a#testbutton").live('click', function() {
var currentscrollpos = $(window).scrollTop();
var pageContents = $("body").html();
$("body").html("");
$("<div class='pageContainer'>" + pageContents + "</div>").prependTo("body");
$(".pageContainer").css({'position':'fixed','top':currentscrollpos*-1});
$("html, body").animate({ scrollTop: 0 }, 0);
$("<div class='blackout'></div>").appendTo("body");
$(".blackout").css("opacity",0.8).fadeIn('slow', function() {
$("<div class='popupPanel'><a class='closeme'>close</a></div>").appendTo("body");
$(".popupPanel").animate({
right: "0px"
}, 500, function() {
$(".popupPanel").css("position","absolute")
});
$(".pageContainer").animate({
left: "-200px"
}, 500, function() {
});
$("a#testbutton").append(currentscrollpos)
});
return false;
});
$('.closeme').live('click', function() {
var pageContents = $(".pageContainer").html();
$(".popupPanel").css("position","fixed").animate({
right: "-200px"
}, 500, function() {
});
$(".pageContainer").animate({
left: "0px"
}, 500, function() {
$(".blackout").fadeOut('slow', function() {
$(".blackout").remove();
$("body").html(pageContents);
$("html, body").animate({ scrollTop: currentscrollpos }, 0);
});
});
});
});
You are using a local variable because you are using var:
var currentscrollpos = $(window).scrollTop();
Instead, drop the var so that it's accessible inside the .closeme click function. You already used var at the very beginning. So:
currentscrollpos = $(window).scrollTop();
That way, the variable at the very beginning will be set, which can be accessed by both functions. Currently, you are declaring another variable inside the a#testbutton click function, leaving the original variable untouched.
http://jsfiddle.net/pimvdb/CMbBC/2/.
You can use this code to return to the position of the page that is closed from the browser
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var currentposition;
$(document).ready(function(){
$(window).scroll(function(){
var scrollPos = $(document).scrollTop();
console.log("scrollPos:"+scrollPos);
localStorage.setItem("key",scrollPos);
});
currentposition=localStorage.getItem("key");
window.scrollTo(0,currentposition);
alert("currentposition:"+currentposition);
});
</script>