I have some divs that appear on click of a link, but i am trying to make it so that when you click on a 2nd link to popup, any open ones will be closed before the new one opens. there should only be one open at a time.
the js...
<script>
$.fn.slideFadeToggle = function (easing, callback) {
return this.animate({
opacity: 'toggle',
width: 'toggle'
}, "fast", easing, callback);
};
$(function () {
function select($link) {
$link.addClass('selected');
$($link.attr('href')).slideFadeToggle(function () {});
}
function deselect($link) {
$($link.attr('href')).slideFadeToggle(function () {
$link.removeClass('selected');
});
}
$('.contact').click(function () {
var $link = $(this);
if ($link.hasClass('selected')) {
deselect($link);
} else {
select($link);
}
return false;
});
$('.close').live('click', function () {
deselect();
return false;
});
});
</script>
the divs...
<div id='did_{$page_trackid}' class='arrow_box pop_{$page_trackid}' style=''> <img src='".$info4['Image']."' class='subtext_img'>
<h2 class='subtext'><a href='http://www.xxxxxxx.co.uk/dnb/".$info2['username']."'>".$info2['username']."</a></h2>
<p class='subtext'>".$info3['user_title']."</p>
<p class='subtext'><a href='".$info3['website_link']."' target='_blank'>".$info3['website_link']."</a>
</p>
</div>
<div id='did_2_{$page_trackid}' class='arrow_box2 pop_stats_{$page_trackid}' style=''>
<h2 class='subtext'>Stats</h2><br />
<p class='subtext'>Plays: 1m <br />
Downloads: 527, 046
</p>
</div>
the links...
<div style='position: absolute; z-index: 2; padding-top: 30px; padding-left: 699px;'>
<a href='#did_{$page_trackid}' class='contact' ><img style='height: 20px;' alt='Posted by' src='http://www.xxxxxxxxxx.co.uk/play1/skin/user-profile2.png' style=''></a>
</div>
<div style='position: absolute; z-index: 1; width: 20px; height: 20px; padding-top: 50px; padding-left: 699px;'>
<a href='#did_2_{$page_trackid}' class='contact'><img style='height: 20px;' alt='Track stats' src='http://www.xxxxxxxx.co.uk/play1/skin/stats.png' style=''></a>
</div>
I have tried replacing the first function with
function select($link) {
$link.addClass('selected');
$('.arrow_box:visible').slideFadeToggle(function () {});
$($link.attr('href')).slideFadeToggle(function () {});
}
but that bugs out, with one pop over lapping the other. I have 2 classes for the divs(1 for each) so i attempted to add
$('.arrow_box2:visible').slideFadeToggle(function () {});
but that too doesnt work.
Am i going about it the right way to close any open arrow_box or arrow_box2 when clicking a link to open a new pop up??
thanks
I copied your html and js into a jsfiddle and modified the select method. Try it out here:
http://jsfiddle.net/mchail/wHyfK/1/
I believe this now does what you asked for. The key is to toggle any shown panes (to hide them) before toggling the new "selected" pane (to show it).
Hope this helps.
Related
I'm trying to make a menu slider for a restaurant with two clickable menus, the lunch menu and the dinner menu. I don't want the menus opening in a new window, just a clean click and the wanted menu opens.
Here is the code I have so far, I know it needs a lot of work, I'm new to the javascript/jQuery world. Pure javascript would be cool but anything jQuery would work too.
If someone can help me and please explain what needs to be fixed so i can understand this more I would greatly appreciate it. Thank You. On codepen
let lunchContainer = document.querySelectorAll('div.lunchmenu');
dinnerContainer = document.querySelectorAll('div.dinnermenu');
function reset() {
for(let i = 0; i < lunchContainer.length; i++) {
lunchContainer[i].style.display = 'none';
dinnerContainer[i].style.display = 'none';
}
};
$('.lunch').click(function(event) {
reset();
$('.lunchmenu').addClass('active');
lunchContainer.style.display = 'block';
});
$('.dinner').click(function() {
reset();
$('.lunchmenu').removeClass('active');
});
$('.dinner').click(function(event) {
reset();
$('.dinnermenu').addClass('active');
// dinnerContainer.style.display = 'block';
});
$('.lunch').click(function() {
reset();
$('.dinnermenu').removeClass('active');
// dinnerContainer.style.display = 'block';
});
<div class="page">
<div class="header">
<div class="logoHeader">
<a href="index.html" >
<img class="crab" src="http://images.all-free-download.com/images/graphicthumb/vivid_hand_drawn_crab_decoration_pattern_vector_551463.jpg " alt="KingChef Krab logo">
</a>
<h1 id="titleHeader">
King Chef
</h1>
</div>
<nav class="menuHeader">
<a class="specMenu" href="about.html">about</a></li>
<a class="specMenu" href="team.html">team</a></li>
<a class="specMenu" href="menus/dinner.html">menu</a></li>
<a class="specMenu" href="#">news</a></li>
<a class="specMenu" href="#">hours</a></li>
<a class="lastMenu" href="#">reservations</a></li>
</nav>
</div>
<nav id="menuCategory">
<a class="menuStyles lunch" href="#lunch">lunch</a>
<a class="menuStyles dinner" href="#dinner">dinner</a>
</nav>
<div class="container">
<div class="lunchmenu">
<p>hehehfdsafhkalfj</p>
</div>
<div class="dinnermenu">
<p>hdhfsahf</p>
</div>
</div>
</div>
.lunchmenu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
&.active {
display: block;
}
}
.dinnermenu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
&.active {
display: block;
}
}
Notice how much code I removed! You don't need to set display if you're going to use an 'active' class to do that job and you don't need to define the behavior of a click on your buttons twice.
Also, if each menu has a container, you don't need to iterate over all the items inside of them to set their display to none, setting the parent container to none will suffice.
Hope that helps!
let lunchContainer = document.querySelectorAll('.lunchmenu'), // notice ',' instead of ';'
dinnerContainer = document.querySelectorAll('.dinnermenu');
$('.lunch').click(function(event) {
$('.dinnermenu').removeClass('active');
$('.lunchmenu').addClass('active');
});
$('.dinner').click(function() {
$('.lunchmenu').removeClass('active');
$('.dinnermenu').addClass('active');
});
.lunchmenu, .dinnermenu {
display:none;
}
.active {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="lunch">lunch</button>
<button class="dinner">dinner</button>
<div class="lunchmenu">
<h5>lunch menu yayyy</h5>
<p>item lunch 1</p>
<p>item lunch 2</p>
</div>
<div class="dinnermenu">
<h5>Dinner menu yayyy</h5>
<p>itemdinner 1</p>
<p>item dinner 2</p>
</div>
I originally found a good jQuery pop-up function I'm using for a website I'm creating. The original post was from here: Reducing duplicated code with JQuery function
Basically what I want to achieve is to have each pop-up box contain different content (such as everything in my .pop1 & .pop2 divs: p and img), so then I can be able to still give it styles through CSS. I also need to make sure the right divs pop-up on their related link.
This is the code I'm working with:
Jquery
$.fn.slideFadeToggle = function(easing, callback) {
return this.each(function() {
$(this).animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
});
};
$.fn.myPopup = function(popupText) {
return this.each(function() {
var popupHtml = $('<div />', {'class': 'messagepop pop', text: popupText}),
p = $('<p />', {style: 'align="right"'}),
close = $('<a />', {href: '#', 'class': 'close', text: 'Close'});
$(this).on('click', function(){
$(this).addClass("selected").parent().append(popupHtml.append(p).append(close));
$(".pop").slideFadeToggle()
$("#email").focus();
});
close.on('click', function(e) {
$(".pop").slideFadeToggle();
$(this).removeClass("selected");
});
});
};
$("#word1234").myPopup($(".pop"));
$("#wordABCD").myPopup($(".pop2"));
And the HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>Supercalifragilisticexpialidocious</li>
<li>Foo</li>
<div class="messagepop pop">
<img src="https://upload.wikimedia.org/wikipedia/en/f/f7/Sugimoris025.png" width="100px" />
<p>
Lorem Ipsum
</p>
</div>
<div class="messagepop pop2">
<img src="https://pbs.twimg.com/profile_images/378800000822867536/3f5a00acf72df93528b6bb7cd0a4fd0c.jpeg" width="100px" />
<p>
Hello World
</p>
</div>
Here is the code on jsfiddle: https://jsfiddle.net/6rcr1d2v/
I'm a beginner at jQuery, so if anyone could help me fix and explain as easiest as possible how this can be done I would very much appreciate it. Thank you!
Edit: Someone did help with getting the boxes to pop up. Now I need help getting the pop-up boxes to not come out at the same time. They need to pop-up separately with their related link (class).
Your issue is that you had a few syntax errors. You are not surrounding the pop and pop2 selectors in quotations.
The correct way to find a jQuery element is
$(".className")
Notice quotations around the class selector.
$.fn.slideFadeToggle = function(easing, callback) {
return this.each(function() {
$(this).animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
});
};
$.fn.myPopup = function(popupText) {
return this.each(function() {
var popupHtml = $('<div />', {'class': 'messagepop pop', text: popupText}),
p = $('<p />', {style: 'align="right"'}),
close = $('<a />', {href: '#', 'class': 'close', text: 'Close'});
$(this).on('click', function(){
$(this).addClass("selected").parent().append(popupHtml.append(p).append(close));
$(popupText).slideFadeToggle()
$("#email").focus();
});
close.on('click', function(e) {
$(popupText).slideFadeToggle();
$(this).removeClass("selected");
});
});
};
$("#word1234").myPopup($(".pop"));
$("#wordABCD").myPopup($(".pop2"));
a.selected {
z-index:100;
}
.messagepop {
background-color:#FFFFFF;
border:1px solid #999999;
cursor:default;
display:none;
margin-top: 15px;
position:absolute;
text-align:left;
width:394px;
z-index:50;
padding: 25px 25px 20px;
}
label {
display: block;
margin-bottom: 3px;
padding-left: 15px;
text-indent: -15px;
}
.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>Supercalifragilisticexpialidocious</li>
<li>Foo</li>
<div class="messagepop pop">
<img src="https://upload.wikimedia.org/wikipedia/en/f/f7/Sugimoris025.png" width="100px" />
<p>
Lorem Ipsum
</p>
</div>
<div class="messagepop pop2">
<img src="https://pbs.twimg.com/profile_images/378800000822867536/3f5a00acf72df93528b6bb7cd0a4fd0c.jpeg" width="100px" />
<p>
Hello World
</p>
</div>
I currently work with some jQuery, where i have got some problems.
I got this code
if ($(".accordion").length > 0) {
$(".accordion").each(function() {
var item = $(this).find(".accordion-text");
var height = item.outerHeight() + 20;
item.data("height", height + "px").css("height", "0px");
})
}
$(".accordion").on("click", function(e) {
foldOut($(this));
});
function foldOut(accordien) {
console.log(accordien);
var item = $(accordien).find(".accordion-text");
if ($(accordien).hasClass("accordion-open")) {
$(item).stop().transition({
height: '0px'
}, 500, 'in-out');
$(accordien).find(".accordionArrow").removeClass("accordionBgActive");
console.log($(accordien).find(".accordionArrow"));
} else {
$(accordien).find(".accordionArrow").addClass("accordionBgActive");
$(item).stop().transition({
height: item.data("height")
}, 500, 'in-out');
}
$(accordien).toggleClass("accordion-open");
}
But inside the div that is folding out, there may be an a tag, and when i click on the a tag it opens the link but also folds the div..
How can i get the div not to fold when the click is on an a tag?
HTML Where its "closed"
<div class="row">
<div class="overflow-hide rel">
<div class="accordion rel col-md-12 no-pad">
<div class="accordionHeaderDiv">
<h3>Test</h3>
<div class="accordion-header-teaser">
<p>TestTestTestTestTestTestTestTestTestTest</p>
</div>
</div>
<div class="accordion-text" style="height: 0px;">
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>Test</p>
</div>
<div class="accordionArrow" style=" position: absolute; top: 0; cursor: pointer; right: 43px; height: 30px;"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
Filter it out regarding event target:
$(".accordion").on("click", function(e) {
if(e.target.tagName.toLowerCase() === "a") return;
foldOut($(this));
});
As anchor can contains other contents, a more relevant way would be:
$(".accordion").on("click", function (e) {
if ($(e.target).closest('a').length) return;
foldOut($(this));
});
I have added 2 codes here the window.scroll works on my example but not the second one binding the div to the scroll.
Any one knows what am I doing wrong!?
Just so you know I'm working in MeteorJS <- I dont think that this is the problem bc. the window scrolling works.
This 2 codes are in the same js file.
$(window).scroll(function() {
lastSession = Session.get('c_info')[Session.get('c_info').current]
if(lastSession.list == 0 && $(window).height() + $(window).scrollTop() >= $(document).height()){
lastItem = $( ".list-item div:last" ).html();
if (lastSession.page == 1){
currentSession().more();
lastItem2 = $( ".list-item div:last" ).html();
} else if( lastItem2 != lastItem) {
currentSession().more();
lastItem2 = $( ".list-item div:last" ).html()
}
}
});
$('#playlist').bind('scroll',function() {
console.log("div is scrolling");
});
I tried this too:
$('#playlist').scroll(function() {
console.log("div is scrolling");
});
MeteorJS Template:
<template name="playList">
<div id="playlist" class="playlist show-for-large-up">
{{#each list}}
<a href="/video/{{_id}}" class="large-12 columns" id="pl{{v_id}}">
<div>
<div class="large-7 columns plRight">
<span>{{vTitle}}</span>
</div>
</div>
</a>
{{/each}}
</div>
</template>
Also Tried:
$('#playlist').on('scroll',function() {console.log('test')});// not working
Tried to Change the id name and putting on the document ready:
$( document ).ready(function (){
$('#pl_list').bind('scroll',function() {
console.log("div is scrolling");
});
})//failed
The div has a scrollbar and the list is long and i have a css like this:
.playlist {
padding: 0;
overflow-y: scroll;
height: 458px;
}
Also tried:
Template.playList.rendered = function () {
console.log("playlist rendered");// i can see this on logs this tells that template is in doom
Meteor.setTimeout(function(){
$('#playlist').on('scroll',function(){
console.log('Scrolling...');
});
}, 2000);// with settimeout i have giveng it 2 more seconds
}
Try this out -
$(document).ready(function(){
$('#playlist').on('scroll',function(){
console.log('Scrolling...');
});
});
Use
$('#playlist').scroll(function() {
console.log("div is scrolling");
});
instead (like you did for window).
Thats the purpose of scroll(). See jquery documentation.
Scrolling event is fired on the element, if it has scrolled. So if you only scrolling the "body" element of the DOM it will not be triggered for #playlist.
So you have put a scrollbar to the container element of #playlist. Shot answer, cut the height and add a scrollbar, then the event will fire on it.
I did a Jsfiddle http://jsfiddle.net/34j0qnpg/4/
html
<div id="playlist-wrapper">
<div id="playlist" class="playlist show-for-large-up">
<a href="/video/1" class="large-12 columns" id="pl1">
<div>
<div class="large-7 columns plRight">
<span>Titel</span>
</div>
</div>
</a>
css part
body, html {
padding: 0;
margin: 0;
background-color: lightgrey;
color: #fff;
font-family: Arial;
height: 5000px;
overflow-y:scroll;
}
#stats {
position: relative;
}
#playlist-wrapper {
border: 1px solid #000;
padding: 10px;
height: 300px;
overflow-y: scroll;
}
#playlist {
height: 1000px;
background-color: darkgrey;
}
var $stats = $('#stats');
$('#playlist-wrapper').on('scroll', function() {
$stats.html('playlist scrolling');
console.log('playlist scrolling');
});
$(window).on('scroll', function() {
$stats.html('window scrolling');
console.log('window scrolling');
});
Solved with this code:
Tried it earlyer no results, after meteorjs project reset it just automagicly workded:
Template.playList.rendered = function () {
console.log("playlist rendered");
$('#playlist').on('scroll',function(){
console.log('Scrolling...');
});
}
I answered my question just if anybody is searching for the same answer.
Thanks to anybody who tried to help me.
I LOVE THIS COMMUNITY.
I'm trying to create a multi-page navigation using jQuery, where when we change page the current one would suffer a slideUp() and disappear.
Until now I have this JS:
$(document).ready(function() {
current = "#div1";
$("#btn1").click(function() {
if (current != "#div1") {
$(current).slideUp("slow");
current = "#div1";
}
});
$("#btn2").click(function() {
if (current != "#div2") {
$(current).slideUp("slow");
current = "#div2";
}
});
$("#btn3").click(function() {
if (current != "#div3") {
$(current).slideUp("slow");
current = "#div3";
}
});
});
Running on this: http://jsfiddle.net/93gk3oyg/
I just can't seem to correctly navigate from page 1 to 3, 3 to 2, and so on...
Any help would be appreciated :)
I have refactored your code somewhat. I actually do not make any use of the slide-up functionality, everything is handled using CSS animations, which means you will be able to alter those to something else later. Also notice, that this means you don't really need to mess about with z-index.
HTML:
<div id="menu">
<button class="btn" id="btn1" data-rel-page="div1">Pag1</button>
<button class="btn" id="btn2" data-rel-page="div2">Pag2</button>
<button class="btn" id="btn3" data-rel-page="div3">Pag3</button>
<button class="btn" id="btn4" data-rel-page="div4">Pag4</button>
</div>
<div id="div1" class="fullscreen active">
<center>HOME</center>
</div>
<div id="div2" class="fullscreen">
<center>PAGE2</center>
</div>
<div id="div3" class="fullscreen">
<center>PAGE3</center>
</div>
<div id="div4" class="fullscreen">
<center>PAGE4</center>
</div>
JS:
$(document).ready(function () {
var current = "div1";
$("[data-rel-page]").bind('click', function (evt) {
var el = $(evt.currentTarget).attr('data-rel-page');
if (el === current) return;
var $el = $("#" + el);
var $cur = $("#" + current);
current = el;
$cur.removeClass('active');
$el.addClass('active');
})
});
CSS:
.fullscreen {
transition: all 0.4s linear;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 0%;
overflow: hidden;
}
.fullscreen.active {
display: block;
height: 100%;
}
Here is the fiddle: http://jsfiddle.net/93gk3oyg/9/