How is it possible to close a div that's currently open when you click on its trigger that usely opens the div or any other trigger (that opens a different event on the page)?
So basicaly I have two links: Login and Register. When you click Register, the Login block/div disappears and the Register div shows up. When I hit Login, the Register div hides and the Login div shows up.
Also when I, e.g. click Login and the Login div is already shown - the Login div must hide aswell.
How do I accomplish this? I tried for days now, but unfortunately i'm a beginner to jQuery and my skills in jQuery aren't great at the moment. I made the following script that works. I only can hide/show divs when you click the same trigger. If you click Register AND Login the divs will just show up on top of eachother, without the hiding.
;(function($) {
var $jq = jQuery.noConflict();
$jq.fn.login_switch = function(options) {
var o = $jq.extend({}, $jq.fn.login_switch.defaults, options);
var $this = $jq(this);
$jq(this).click(function(e)
{
e.preventDefault();
// hides matched elements if shown, shows if hidden
$jq(this).closest("div#wrapper").children("div#member_login").eq(0)[o.method](o.speed);
});
};
$jq.fn.reg_switch = function(options) {
var o = $jq.extend({}, $jq.fn.reg_switch.defaults, options);
var $this = $jq(this);
$jq(this).click(function(e)
{
e.preventDefault();
// hides matched elements if shown, shows if hidden
$jq(this).closest("div#wrapper").children("div#member_reg").eq(0)[o.method](o.speed);
});
};
$jq.fn.login_switch.defaults = {
speed : "slow",
method: "slideFadeToggle"
};
$jq("a.log-expand").login_switch();
$jq.fn.reg_switch.defaults = {
speed : "slow",
method: "slideFadeToggle"
};
$jq("a.reg-expand").reg_switch();
var msie = false;
if(typeof window.attachEvent != 'undefined') { msie = true; }
$jq.fn.slideFadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, function() {
if (msie) { this.style.removeAttribute('filter'); }
if (jQuery.isFunction(callback)) { callback(); }
});
};
};
})(jQuery);
My html is:
<div id="member_reg" style="display:none;">
<div class="container">
<div class="sixteen columns">
REGISTRATION.
</div>
</div>
</div>
<div id="member_login" style="display:none;">
<div class="container">
<div class="sixteen columns">
LOGIN.
</div>
</div>
</div>
with the trigger buttons:
<ul class="user">
<li>Register</li>
<li>Login</li>
</ul>
Here I have created a FIDDLE for you with the behavior I think you are trying to achieve.
Let me know if you have any questions or if I'm way off base.
HTML
<button id="btnLogin" data-bound="login">Login</button><button id="btnRegister" data-bound="register">Register</button>
<hr />
<div id="login" class="area" data-state="closed">
Login div
</div>
<div id="register" class="area" data-state="closed">
Register div
</div>
CSS
.area{
float:left;
width:200px;
height:0;
margin:10px;
overflow:hidden;
text-align:center;
line-height:100px;
}
#login{
background:#41cc36;
}
#register{
background:#3764e3;
}
JAVASCRIPT
$(document).ready(function(){
$('button').bind('click', function(){
//close any open areas
$('.area').each(function(){
if($(this).data('state') == 'open'){
$(this).animate({'height': 0}, 750, function(){
$(this).data('state', 'closed');
});
}
});
//retrieve the div we need to toggle and it's state
var divID = $(this).data('bound'),
div = $('#' + divID),
state = div.data('state');
//animate the div based on it's state, then set the new state
if(state == 'closed'){
div.animate({'height': 100}, 750, function(){
div.data('state', 'open');
});
}else{
div.animate({'height': 0}, 750, function(){
div.data('state', 'closed');
});
}
});
//init
$('#btnLogin').trigger('click');
});
Related
I have a show/hide toggle that switches between content if menu a is clicked.
Before the click function is triggered content is shown in the default div.
For some reason if you click one of the a tag's twice it successfully toggles the content on/off; however you are left with a blank screen
This is a poor user experience.
How can I avoid this and ensure that the default content is shown if a user selects a menu item twice?
$(document).ready(function() {
var $show = $('.show');
$('.menu a').on('click', function(e) {
e.preventDefault();
$show.not(this).stop().hide(450);
$($(this).attr('href')).stop().toggle(450);
$('.default').addClass('hidden');
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
Screen
Music
Art
Food
</div>
<div id="show-screen" class="show">show screen</div>
<div id="show-music" class="show">show music</div>
<div id="show-art" class="show">show art</div>
<div id="show-food" class="show">show food</div>
<div class="default">default content</div>
Thanks
Although I'd suggest a completely different approach to handle this problem, to make your code work, I'd do something like this.
https://jsfiddle.net/6cnt95ap/1/
$(document).ready(function() {
var $show = $('.show');
$('.menu a').on('click', function(e) {
e.preventDefault();
$show.not(this).stop().hide(450);
$($(this).attr('href')).stop().toggle(450);
$('.default').addClass('hidden');
window.setTimeout(()=>{
var showDefault = true, divs = $('.show');
divs.each(function(){
if($(this).css("display") !=='none'){
showDefault = false;
return false;
}
});
if(showDefault){
$('.default').removeClass('hidden');
}
}, 500)
});
})
Thanks to #mplungjan for helping me complete my first query which can be found here: Remove div with button click using JavaScript
The code works as intended however when we tried to get the slideDown() function to work it looks a bit... laggy and then just pops up without the animation being completed as intended.
Would like some support to see how can this be fixed.
Find below working code:
$(function() {
var $original = $('#ValuWrapper'),
$crossButton = $('#cross'),
$content = $("#content");
$content.on("click", ".cross", function() {
if ($(this).is("#cross")) return false;
var $cross = $(this);
$(this).next().slideUp(400, function() {
$(this).remove();
$cross.remove();
});
});
$("#repeat").on("click", function() {
$content.append($crossButton.clone(true).removeAttr("id"));
$content.append(
$original.clone(true)
.hide() // if sliding
.attr("id",$original.attr("id")+$content.find("button.cross").length)
.slideDown("slow") // does not slide much so remove if you do not like it
);
});
});
#content { height:100%}
#cross { display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="content">
<button type="button" class="buttonImgTop cross" id="cross">X</button>
<div id="ValuWrapper">
...content comes here... <br/>
</div>
</div>
<button type="button" class="buttonImg" id="repeat">Add</button>
Kindly use below updated code for animation.
$("#repeat").on("click", function() {
$content.append($crossButton.clone(true).removeAttr("id"));
$content.append(
$original.clone(true)
// if sliding
.attr("id",$original.attr("id")+$content.find("button.cross").length).hide());
// does not slide much so remove if you do not like it
$("#"+$original.attr("id")+$content.find("button.cross").length).slideDown("slow");//change
});
and remove #content { height:100%;}
When you clone the $original you should reset its height so jQuery knows what height its got to animate to.
E.G: $original.css('height', $(this).height())
See demo:
$(function() {
var $original = $('#ValuWrapper'),
$crossButton = $('#cross'),
$content = $("#content");
$content.on("click", ".cross", function() {
if ($(this).is("#cross")) return false;
var $cross = $(this);
$(this).next().slideUp(400, function() {
$(this).remove();
$cross.remove();
});
});
$("#repeat").on("click", function() {
$content.append($crossButton.clone(true).removeAttr("id"));
$content.append(
$original.clone(true)
.css('height', $(this).height())//set height
.hide() .attr("id",$original.attr("id")+$content.find("button.cross").length)
.slideDown("slow")
);
});
});
#content { height:100%;}
#cross { display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="content">
<button type="button" class="buttonImgTop cross" id="cross">X</button>
<div id="ValuWrapper">
...content comes here...
</div>
</div>
<button type="button" class="buttonImg" id="repeat">Add</button>
I have a button on the top of my page that links to /#tabs (index id="tabs"). it uses a script to scroll nicely down to the id but it changes the url to www.domain.com/#tabs how can I remvoe the #tabs part? I was thinking about doing it in .htaccess but not sure if thats possible and its proerbly a bad idea.
heres the html:
<a class="smoothscroll" href="/#tabs">
<div class="scroll-down"></div>
</a>
</header>
<br />
<div id="tabs" style="padding:20px;"></div>
<div class="tabs">
<h1>About</h1>
<div class="p">
about us
<input type="submit" value="Contact Us" class="btn" name="contact" style="min-width:15%;"/>
</div>
</div>
<a class="smoothscroll" href="/#tabs">
<div class="scroll-down"></div>
</a>
Is the button part and it uses this script to scroll smoothly
<script>
/*----------------------------------------------------*/
/* Quote Loop
------------------------------------------------------ */
function fade($ele) {
$ele.fadeIn(1000).delay(3000).fadeOut(1000, function() {
var $next = $(this).next('.quote');
fade($next.length > 0 ? $next : $(this).parent().children().first());
});
}
fade($('.quoteLoop > .quote').first());
/*----------------------------------------------------*/
/* Smooth Scrolling
------------------------------------------------------ */
jQuery(document).ready(function($) {
$('.smoothscroll').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 800, 'swing', function () {
window.location.hash = target;
});
});
});
TweenMax.staggerFrom(".heading", 0.8, {opacity: 0, y: 20, delay: 0.2}, 0.4);
</script>
just forget about the top of the script, thats just a part for the index.
You can do it otherwise like this:
In html
<a href="" class="smoothscroll" onclick="functionforscroll('tabs')">
<div class="scroll-down"></div></a>
in js
var functionforscroll = function(id){
var reqId = "#"+id;
window.scrollTo(0, $(reqId).offset().top-85);
}
this way you can scroll to the required position without changing the url
All you need to do is put a tabindex="-1" to the element you want the focus to, and on the event of focusout/blur remove that tab index. This will enable the element not to be tabbed, but will bring the focus to the element.
I have done that using JQuery:
(ELEMENT_FOR_FOCUS).attr('tabindex', -1).on('blur focusout', function () {
$(this).removeAttr('tabindex');
}).focus();
Try use "data-target" instead "href". Works for me.
Changing Vicky Kumar's answer, this will work.
HTML:
<button class="smoothscroll" onclick="functionforscroll('id')">
<div class="scroll-down"></div></button>
Javascript
const functionforscroll = function(id){
const reqId = "#"+id;
window.scrollTo(0, $(reqId).offset().top-85);
}
You can style the button to be like the rest of your links in your project. One thing is to set outline to none, so that when someone clicks the button it will not show the border/outline of the button.
I am wanting the popups to only appear one at a time, no matter how many popups there are. So if one popup is currently open, it will close and the new one would remain open. I currently have them coded so the initial link will open and close the popup, and the user should be able to click anywhere in the document to close the popup after it has been opened.
I have a jsfiddle here.
Problems I'm having with this code:
1.The first popup clicked wont disappear if another is selected
2.You have to double click the link to make the popup reappear if you click anywhere besides the inital link to close it
3.All the popups should be initially closed
HTML:
<div id="link"> One</div>
<div class="popup popup_hide" id="one">Content</div>
<div id="link"> Two</div>
<div class="popup popup_hide" id="two">Content link</div>
<div id="link"> Three</div>
<div class="popup popup_hide" id="three">Content </div>
Javascript:
jQuery(document).ready(function() {
var popupStatus = 0;
if (popupStatus == 0) { // if value is 0, show popup
$('.showPopup').click(function () {
$('#' + $(this).attr('rel') + '_img').removeClass('border_grey');
if ($(this).hasClass("selected")) {
$('#' + $(this).attr('rel')).hide();
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
$('#' + $(this).attr('rel') + '_img').addClass('border_grey');
$('#' + $(this).attr('rel')).show();
popupStatus = 1;
}
return false;
});
}
else if (popupStatus == 1){
$('.popup').hide();
popupStatus = 0;
}
$('.hide_popup').click(function () {
$('img').removeClass('border_grey');
$('.popup').hide();
return false;
});
$(document).click(function (e) {
if (e.target.class !== 'popup_hide') {
$('.popup_hide').hide();
}
});
}); // jQuery End
This might do what you are looking for:
jsFiddle Demo
var rr, popupStatus = 0;
$('.popup').hide();
$('.showPopup').click(function (e) {
rr = $(this).attr('rel');
$('.popup').hide();
$('#' + rr).show();
e.stopImmediatePropagation();
});
$(document).click(function (e) {
if (e.target.class !== 'popup_hide' && e.target.class !== 'showPopup') {
$('.popup_hide').hide();
}
});
first thing to mention is, that you should rework your html, because it is containing Id's with the same name, which should not be, because an element Id should be unique.
I'm not sure if this is what you are looking for but I updated your code a little, so this could be some starting point for you
HTML
<div id="link1">
hello
</div>
<div class="popup popup_hide" id="popup_brain">Content</div>
<div id="link2"> Goodbye
</div>
<div class="popup popup_hide" id="heart">Content hi</div>
JS
jQuery(document).ready(function(){
$('.popup_hide').hide()
$('#link1').click(function(){
$('#popup_brain').show()
$('#heart').hide()
})
$('#link2').click(function(){
$('#heart').show()
$('#popup_brain').hide()
})
})
Best
I'm creating a page with an image at the top, and a menu below. When the user clicks on on of the 3 menu buttons, the image slideUp and the page scrolls down so the menu is at the top of the page, then the right .content div fades in. The slideUp should only happen the first time the user clicks on of the buttons.
What the absolute best way to do this with jQuery? (no plugins)
I also need to know how I can't prevent it to fade in the page that is already visible if i click the same button twice?
I'm using rel instead of href, since the href made the page jump, even with return false.
This is what I have so far:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
imgVisible = true;
$('#mainmenu a').click(function(){
var $activeTab = $(this).attr('rel');
if(!imgVisible){
$('html:not(:animated),body:not(:animated)').animate({scrollTop:$('#mainmenu').offset().top-20},500);
$('.content').hide();
$($activeTab).fadeIn();
} else{
$('#imgholder').slideUp(500,function(){
imgVisible = false;
$('#mainmenu a[rel="'+$activeTab+'"]').click();
});
}
return false;
});
});
</script>
<div id="imgholder"><img src="image.jpg" /></div>
<div id="mainmenu">
<ul>
<li><a rel="#tab1"></a></li>
<li><a rel="#tab2"></a></li>
<li><a rel="#tab3"></a></li>
</ul>
</div>
<div id="container">
<div class="content" id="tab1">
content
</div>
<div class="content" id="tab2">
content
</div>
<div class="content" id="tab3">
content
</div>
</div>
The following code accomplishes what you need:
$('#mainmenu a').click(function(){
var myrel=$(this).attr('rel');
$('.content:not([id='+myrel+'])').hide();
$('#imgholder').slideUp(500,function(){
$('#'+myrel).fadeIn();
});
});
....
<li><a href='#' rel='tab0'></a></li>
I have removed the '#' sign from your rel='' piece ;-)
I am not sure why you would want to scroll the page. When a user clicks on the menu, he/she already has it focused (so it is visible inside the current viewport). But do you have a very large top image? If that is the case, let me know and I will modify the snippet. (Still, it depends on the amount of content below the menu visible when the page first loads.)
Also, for SEO reasons you might want to use the href instead of the rel attribute and create separate content holding pages. The following snippet would remove the navigation action.
$('#mainmenu a').each(function(){
var myhref = $(this).attr('href');
$(this).attr('href','#').attr('rel',myhref);
}).click(function(){
var myrel=$(this).attr('rel');
$('.content:not([id='+myrel+'])').hide();
//....etc
I think this is a great example of what your looking for: Organic Tabs
var imgVisible = true;
var $activeTab, $lastTab;
var $mainmenu = $('#mainmenu');
var offset = $mainmenu.offset().top - 20;
$mainmenu.find('a').click(function() {
$activeTab = $($(this).attr('rel'));
if (!imgVisible) {
// dont fire any events if already open
if ($lastTab.attr('id') == $activeTab.attr('id')) return false;
$lastTab.fadeOut('normal', function() {
$activeTab.fadeIn(500, function() {
$lastTab = $activeTab;
});
});
} else {
$('#imgholder').slideUp(500, function() {
imgVisible = false;
window.scrollTo(0, offset);
$activeTab.fadeIn(500, function() {
$lastTab = $activeTab;
});
});
}
return false;
});
I highly suggest adding <a href="#"> as this will not make the page jump when done properly and will ensure validation on your anchor links. Someone let me know if I missed something, it can be resolved quickly (or you can do it for me if you have an optimization or improvement).