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
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)
});
})
I'm having a table listing some comments. Next to the comment there are two links, the hide and show. So what I want to do is when clicking the right link to change the comment's status with ajax.
// inside a loop for showing all comments
<div class="pull-right" class="publish-history-comment">
Publish
</div>
<div class="pull-right" class="hide-history-comment">
Hide
</div>
<?= $row->comment; ?>
<script type="text/javascript">
function toggleHistoryNotes(status) {
var link = $('.' + status + '-history-comment-link');
var time = link.attr('data-time');
alert(time);
}
</script>
How can I target which link was clicked and do the ajax call to toggle the comment status?
You can change your JQuery to trigged on click on a tag. Also, you should add e.preventDefault(); as this is gonna be click on the a tag, and this would prevent default action.
$('.pull-right a').on('click', function(e) {
e.preventDefault();
var time = $(this).data('time');
console.log($(this).text() + ' == ' + time);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pull-right" class="publish-history-comment">
Publish
</div>
<div class="pull-right" class="hide-history-comment">
Hide
</div>
<script type="text/javascript">
$('a').on('click', function(e) {
e.preventDefault();
var time = $(this).data('time');
});
</script>
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');
});
I've the following code on my website: http://jsfiddle.net/dJLK3/1/
As you can see, it works just fine.
The problem is: those divs and link triggers come from a database. Today I have 1, tomorrow it can be 10...
I can not figure out how to convert it and make it work without needing to right lot's of codes like link1, link2, link3, link4, link5 and so on...
Anyone? :)
Use data attr and jQuery.data. reference
Update:
according to this comment.
html
<div class="menu">
Link1
Link2
</div>
<div id="div1" class="slide"></div>
<div id="div2" class="slide"></div>
js
$('.menu').on('click', '.link', function(){
var id = $(this).data('slideContent');
$('.slide').not('#' + id).slideUp(function() {
$('#' + id).slideToggle();
});
});
css
.slide {
display: none;
height: 100px;
width: 100px;
position: fixed;
top: 30px;
}
demo
References:
slideUp - http://api.jquery.com/slideUp/
slideToggle - http://api.jquery.com/slideToggle/
Update
Here's a fiddle with a possible answer - FIDDLE - Update - With new requirements
Code posted here for clarification
<div id='link_collection'>
Link1
Link2
</div>
<div id='div_collection'>
<div class='div current'></div>
<div class='div'></div>
</div>
$(document).ready(function() {
$('#link_collection').on('click', '.link', function() {
var divCollection = $('#div_collection .div'),
index = $(this).index(), hasClickedMeAgain,
current = divCollection.filter('.current');
hasClickedMeAgain = current.index() === index;
if (hasClickedMeAgain){
current.slideToggle();
return false;
}
current.slideUp(function() {
$(this).removeClass('current');
divCollection.eq(index).addClass('current').slideToggle();
});
})
});
This way, you don't need to keep tag of anything. Just keep inserting the div and link in the order in which they arrive, and the code then handles itself. All the best.
Will this work for you? Use the same class attribute for all of them. And have the following code on document.ready() to assign on click events:
HTML:
<a class="ui-link-option">Link 1</a>
<a class="ui-link-option">Link 2</a>
<div class="ui-link-option-text">Text Here 1</div>
<div class="ui-link-option-text">Text Here 2</div>
Javascript:
$("a.ui-link-option").each(
function (index) {
var $this = $(this);
$this.data("index", index);
$this.bind("click", function(e) {
var $this = $(this);
var linkIndex = $this.data("index");
$("div.ui-link-option-text").each(
function (index) {
if (index == linkIndex) {
$(this).slideToggle();
} else {
$(this).hide();
}
}
);
});
}
);
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).