I am trying to have a link open a popup window that holds some inline HTML and an image when the user clicks on the link.
I've gotten it to work so that each link opens the popup window, but it will not show the right content - It keeps pulling the last hidden div instead of the one for the link that is clicked on.
;(function($){
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#popup,#popup2,#popup3,#popup4').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#popup,#popup2,#popup3,#popup4'));
return false;
});
});
$.prototype.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
})(jQuery);
#media screen and (max-width:980px) {
.hide {
font-weight: bold;
color: #0f2c6a;
display: block !important;
}
}
.hide {
display: none;
}
a.selected {
background-color:#1F75CC;
color:white;
z-index:100;
}
.messagepop {
box-shadow: 0 0 100px 450px rgba(0,0,0,0.2);
background-color:#FFFFFF;
border:1px solid #999999;
cursor:default;
display:none;
margin-top: 15px;
text-align:left;
min-width:500px;
max-width: 1200px;
min-height: 00px;
max-height: 820px;
z-index:99999;
padding: 25px 25px 25px;
margin: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#media screen and (max-width:480px) {
.messagepop {
min-width: 300px !important;
max-width: 330px !important;
min-height: 300px !important;
max-height: 330px !important;
}
.pop-right {
font-size: 16px;
}
}
#media screen and (max-width:980px) {
.messagepop {
min-width: 600px;
max-width: 650px;
min-height: 400px;
max-height: 640px;
}
.pop-right {
font-size: 20px;
}
}
#media screen and (max-width: 768px) {
.messagepop {
min-height: 500px;
max-height: 550px;
min-width:335px;
max-width:385px;
}
.pop-right {
font-size: 18px;
}
}
.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}
#close {
position: absolute;
top: -10px;
right: -10px;
background: #000;
border-radius: 40px;
border: 1px solid #fff;
width: 25px;
height: 25px;
}
#close a {
color: #fff;
font-size: 15px;
line-height: 20px;
text-decoration: none;
text-align: center;
width: 25px;
height: 25px;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.pop-left {
float: left;
width: 50%;
}
.pop-right {
float: right;
width: 50%;
padding-left: 20px;
font-size: 20px;
line-height: 1.7em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hide">Details</div>
<div class="messagepop pop">
<div id="close"><a class="close" href="/">x</a></div>
<div class="pop-left">Left 1</div>
<div class="pop-right">Right 1</div>
</div>
<a id="popup" href="#popup">View Details</a>
<div class="hide">Details</div>
<div class="messagepop pop">
<div id="close"><a class="close" href="/">x</a></div>
<div class="pop-left">Left 2</div>
<div class="pop-right">Right 2</div>
</div>
<a id="popup2" href="#popup2">View Details</a>
<div class="hide">Details</div>
<div class="messagepop pop">
<div id="close"><a class="close" href="/">x</a></div>
<div class="pop-left">Left 3</div>
<div class="pop-right">Right 3</div>
</div>
<a id="popup3" href="#popup3">View Details</a>
<div class="hide">Details</div>
<div class="messagepop pop">
<div id="close"><a class="close" href="/">x</a></div>
<div class="pop-left">Left 4</div>
<div class="pop-right">Right 4</div>
</div>
<a id="popup4" href="#popup4">View Details</a>
As you can see it's only pulling the last 'messagepop pop' div.
you are trying to select and fire events on your elements using the class selector. The class selector will give you the array like object for all the matching elements for the class.
What you need to do is to find the exact element which is clicked, you have $(this) jquery object in your click events which tell you which exact element is clicked by user.
Now you will have to get the other elements by using this exact element $(this).
Make the changes as below in your code.
(function($){
function deselect(e) {
e.prev().slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#popup,#popup2,#popup3,#popup4').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$(this).prev().slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
var link = $(this).parent().parent().next().attr("id");
deselect($("#"+link));
return false;
});
});
$.prototype.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
})(jQuery);
Working example : http://jsfiddle.net/SRw67/3042/
You are calling all ".pop" divs at the same time they fall over each other so you always see the last one
Related
I've created a Back to Top function with jQuery.
The scroll back to top works but I can't seem to figure out how to hide it and only appear when say scrollTop() > 300. I created a function to take care of that but unfortunately no luck.
Here's a link to a jsfiddle https://jsfiddle.net/pvan_ren1/st3mdp6a/10/
//This is the function that's supposed to take care of the hide and reveal of toTop button.
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
You should edit your CSS to hide your "Back to Top" button by default, and then show it when the show class is added.
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
jQuery(document).ready(function() {
var btn = $('#toTop');
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: 0
}, 700);
});
});
.sectionA {
width: 100%;
height: 600px;
background-color: pink;
}
.sectionB {
width: 100%;
height: 600px;
background-color: green;
}
.sectionC {
width: 100%;
height: 600px;
background-color: purple;
}
.sectionD {
width: 100%;
height: 600px;
background-color: orange;
}
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
#toTop:hover {
cursor: pointer;
background-color: #333;
}
#toTop:active {
background-color: #555;
}
#toTop::after {
content: "\f077";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<p style="position:fixed">Scroll Down and use the toTop button</p>
<br>
<p style="position:fixed">
At the top, the "Back to Top" button does not show.
<b>It works!</b>
</p>
<section class="sectionA">
</section>
<section class="sectionB">
</section>
<section class="sectionC">
</section>
<section class="sectionD">
</section>
</body>
<a id="toTop"></a>
Before anything, set the style of the button to display: none then the code below should do it for you:
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('#toTop').css('display','inline-block');
} else {
$('#toTop').css('display','none');
}
});
I'm new to javascript/jquery, and I'm building an image slider. I can't seem to get the images to animate. I'm not sure what's wrong here.
What I've been trying to do is to get the active slide then slide the next sibling and animate it, but all I get in result is that the first image animate then it stops.
Here is the code: https://jsfiddle.net/6qntgg5z/
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=" > ">
<input type="button" name="next" id="prev" value=" < ">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
</div>
</div>
CSS
html,body {
height: 100%;
position: relative;
}
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
}
.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {
}
#prev,#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border:none;
font-size: 2em;
color: white;
font-weight: bold;
/* font-family: 'Baloo Tamma', cursive;
*/ padding:10px;
top:15%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left:0;
}
#next {
right:0;
}
.active {
z-index: 1;
}
Javascript
$(document).ready(function(){
setInterval(animateSlider(), 5000);
});
//configuration
var currentSlide=activeSlide();
var slides=$("#carousel .slides .slide");
//get active slide index
function activeSlide(){
var activeSlide=$("#carousel .slides .active").index();
return activeSlide;
}
function animateSlider() {
var $current=slides.eq(activeSlide());
var $next= $(".slides img:first");
$next.addClass('active');
$current.animate({opacity: 0.0}, 1000,
function () {
$current.removeClass('active');
$current.css({opacity: 1.0});
});
try this fiddle (does what you need but has other flaws i think). in your html you used the '<' and '>' characters as your button text, this breaks the flow of the html so you should instead use character codes:
< becomes < and
> becomes > www.w3schools.com/html/html_entities.asp
also your js was missing a closing } and the jsfiddle was missing aa jquery library call (I wish jsfiddle would make it faster to integrate libraries). hope it helps.
$(document).ready(function(){
setInterval(function(){ animateSlider() }, 5000);
});
//configuration
var currentSlide = activeSlide();
var slides = $("#carousel .slides .slide");
//get active slide index
function activeSlide(){
var activeSlide=$("#carousel .slides .active").index();
return activeSlide;
}
function animateSlider() {
//remove active class from previous element and assign it to the current one then animate it using animate() function
var $current=slides.eq(activeSlide());
var $next= $(".slides img:first");
$next.addClass('active');
$current.animate({opacity: 0.0}, 1000, function () {
$current.removeClass('active');
$current.css({opacity: 1});
});
}
html,body {
height: 100%;
position: relative;
}
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
}
.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {
}
#prev,#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border:none;
font-size: 1em;
color: white;
font-weight: bold;
/* font-family: 'Baloo Tamma', cursive;
*/ padding:10px;
top:15%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left:0;
}
#next {
right:0;
}
.active {
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=">">
<input type="button" name="next" id="prev" value="<">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
</div>
</div>
I have a menu on the left where all the elements have the same class. I've added the event $('.menuitem').click and also tried several other options, even calling the event based on the div id but without success.
As there aren't any error messages on the browser console, I'm kinda lost on the search for the error. I appreciate if you could help me figure out what the problem is.
Here is the Fiddle
HTML:
<div class='mainwindow'>
<div class='menupane'>
<div id='entity' class='menuitem'><p class='glyphicon glyphicon-triangle-right'>ENTITIES</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>COURSES</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>STUDENTS</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>CLASSES</p></div>
<div class='menuitem'></div>
</div>
<div class='contentpane'></div>
</div>
DOM:
$(document).ready(function(){
console.log("loaded");
$('.menuitem').click(function(){
console.log("CLICKED 1");
});
$('#entity').click(function(){
console.log("CLICKED 2");
});
$('.menupane').on('click', '.menuitem', function(){
console.log('CLICKED 3');
});
});
As you can see, I tried adding the click event through several methods and I'm not getting it. Thanks a ton for your help.
Negative z-index will not let event to dispatch on elements.
$(document).ready(function() {
console.log("loaded");
$('.menuitem').click(function() {
console.log("CLICKED 1");
});
$('#entity').click(function() {
console.log("CLICKED 2");
});
$('.menupane').on('click', '.menuitem', function() {
console.log('CLICKED 3');
});
});
.header {
position: absolute;
background-color: #525252;
height: 5%;
width: 100%;
min-height: 30px;
display: block;
margin: 0;
z-index: 0;
font-weight: 700;
line-height: 175%;
font-size: 1.4em;
text-align: center;
color: #FFFFFF;
display: inline-block
}
.mainwindow .menupane {
position: relative;
display: inline-block;
width: 25%;
min-width: 200px;
background-color: #FFFFFF;
margin: 0;
box-shadow: 1px 0px 10px -0px #F5F5F5;
//z-index: -1;
padding-top: 40px;
}
.mainwindow .contentpane {
position: relative;
display: inline-block;
width: 100%;
background-color: #FFFFFF;
margin: 0;
//z-index: -2;
padding-top: 40px;
}
.menuitem {
background-color: #525252;
position: relative;
width: 75%;
height: 1.5em;
min-height: 10px;
border-radius: 0.65em;
margin: 7.5%;
color: lightgray;
/*font-size: 0.8vw;*/
/*line-height: 1.5em;*/
padding-left: 10%;
border: 0.05em solid lightgray;
/*box-shadow: 0px 0px 1px 1px gray;*/
}
glyphicon-triangle-right {
transition: transform 180ms ease-in;
}
glyphicon-triangle-right.rotate90 {
transform: rotate(90deg);
transition: transform 180ms ease-in;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='header'>SISTEMA CONTROLE DE CURSOS</div>
<div class='mainwindow'>
<div class='menupane'>
<div id='entity' class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>ENTITIES</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>COURSES</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>STUDENTS</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>CLASSES</p>
</div>
<div class='menuitem'></div>
</div>
<div class='contentpane'></div>
</div>
Fiddle Demo
Your z-index CSS was causing issues. Here is an updated example without those so you can fix from there: https://jsfiddle.net/zxgkprw9/1/
your issue is not the binding of the event but the class .mainwindow .menupane having this property position: relative;
the events is added properly but due to this class the actual position of the element is different . Remove this property and all work fine
jsfiddle : https://jsfiddle.net/zxgkprw9/3/
.mainwindow .menupane{
display: inline-block;
width: 25%;
min-width: 200px;
background-color: #FFFFFF;
margin: 0;
box-shadow: 1px 0px 10px -0px #F5F5F5;
z-index: -1;
padding-top: 40px;
}
I am trying to create a tabbed content area which opens and closes each section. My HTML is as follows:
<div class="more-info">
<p>HELLO</p>
</div>
<div class="more-info">
<p>GOODBYE</p>
</div>
The JQuery is
$("a.toggle").click(function () {
$(this).find(".more-info").slideToggle("slow");
});
and my styles are :
a.open {display:block; width:30px; height:30px; background:#999;}
.more-info {display:none; width:100%;}
The idea is to click on the a link and open the it's content box. How do I do this? Doesn't seem to work? The only thing is I can't use unique IDs as the way the page will be created. Therefore, this has to work on a generic class.
You need to slide the required section down and any currently open section up.
Try :
$("a.toggle").on('click', function (e) {
e.preventDefault();
var $section = $(this).next(".more-info").slideDown("slow");
$(".more-info").not($section).slideUp("fast");
});
Try this :
$("a.toggle").on('click', function (e) {
e.preventDefault();
var $a = $(this).next(".more-info");
if($a.is(':visible')){
$a.hide();
}else{
$a.show();
}
});
Check this well designed toggle effect
$('#ce-toggle').click(function(event) {
$('.plan-toggle-wrap').toggleClass('active');
});
$('#ce-toggle').change(function(){
if ($(this).is(':checked')) {
$('.tab-content #yearly').hide();
$('.tab-content #monthly').show();
}
else{
$('.tab-content #yearly').show();
$('.tab-content #monthly').hide();
}
});
body{
margin:0;
}
.plan-toggle-wrap {
text-align: center;
padding: 10px;
background-color: rgb(75,88,152);
position:sticky;
top:0;
}
.toggle-inner input {
position: absolute;
left: 0;
width: 100%;
height: 100%;
margin: 0;
border-radius: 25px;
right: 0;
z-index: 1;
opacity: 0;
cursor: pointer;
}
.custom-toggle {
position: absolute;
height: 25px;
width: 25px;
background-color: #ffffff;
top: 4px;
left: 5px;
border-radius: 50%;
transition: 300ms all;
}
.toggle-inner .t-month, .toggle-inner .t-year {
position: absolute;
left: -70px;
top: 5px;
color: #ffffff;
transition: 300ms all;
}
.toggle-inner .t-year {
left: unset;
right: -85px;
opacity: 0.5;
}
.active > .toggle-inner .t-month {
opacity: 0.5;
}
.active > .toggle-inner .t-year {
opacity: 1;
}
.toggle-inner input:checked + span {
left: 43px;
}
.toggle-inner {
width: 75px;
margin: 0 auto;
height: 35px;
border: 1px solid #ffffff;
border-radius: 25px;
position: relative;
}
.tab-content > div {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(94,110,191);
color: #fff;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="plan-toggle-wrap">
<div class="toggle-inner">
<input id="ce-toggle" type="checkbox">
<span class="custom-toggle"></span>
<span class="t-month">Yearly</span>
<span class="t-year">Monthly</span>
</div>
</div>
<div class="tab-content">
<div id="monthly">MONTHLY</div>
<div id="yearly">YEARLY</div>
</div>
https://codepen.io/Vikaspatel/pen/yRQrpZ
Project Outline
I am building a web page with a slide out menu, which works as expected and the display stays the way I expect it would during the animations to slide the menu in/out.
This is working correctly on the following browsers;
Windows
Internet Explorer (11.0.9600.17239)
Firefox (32.0)
Opera (17.12)
Chrome (38.0.2125.44 beta-m)
Mac
Opera (12.15)
FireFox (32.0)
Chrome (36.0.1985.125)
Safari (6.0.5)
iOS
Chrome (37.0.2062.52)
Safari (Iphone 5s - can't find version number)
Problem Browser
The problem seems to only be with Safari on windows (5.1.7);
The Issue
When you click to slide out the menu, it appears to reload and slide in from the right, when it is off-page to the left, so I'd assume it should come in from the left like every other browser I've tried!
When the menu is out and you press for it to slide back in, it seems to slide off to the left and then slide back out from the right and all the way off the left again.
Related jsFiddle link and code
(Link at the end of post)
JS
$(document).ready(function () {
// Set menu_out var, for clicks to activate slideIn/Out
var menu_out = false;
// Works if menu is in OR out;
$(".top_button").click(function () {
menu_move();
});
$('#menu a').click(function () {
menu_move();
});
// Only work if menu if out;
$('#content').click(function () {
if (menu_out == true) {
menu_move();
}
});
function menu_move() {
if (menu_out) {
$('#menu').animate({
'margin-left': "-71%"
}, 300, function () {
menu_out = false;
});
}
else {
$('#menu').animate({
'margin-left': "0"
}, 300, function () {
menu_out = true;
});
}
}
});
CSS
* {
font-family:"Helvetica Neu", "Helvetica", sans-serif;
}
html, body {
background: #c3c3c3;
font-weight: 300;
margin: 0;
}
#container {
position: relative;
background: black;
width: 100%;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
}
#menu {
background: #000;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
color: white;
margin-left: -71%;
float: left;
}
.menu_item {
width: 100%;
border-bottom: solid 1px #333;
background: #222222;
height: 40px;
font-size: 14px;
color: #fff;
}
.menu_item a {
font-size: 14px;
font-weight: 400;
display: block;
color: white;
text-decoration: none;
padding: 12px 0 0 15px;
}
.menu_head {
height: 47px;
}
.menu_head h1 {
color: #fff;
font-size: 15px;
font-weight: bold;
padding: 14px 0 15px 10px;
margin: 0;
background: #000;
border-bottom: solid 1px #333;
}
#content {
color: white;
overflow: hidden;
}
.top_button {
border: none;
background: black;
position: absolute;
top: 11px;
left: 18px;
}
.button_strips {
width: 21px;
height: 3px;
margin: 3px 5px;
background: white;
}
.top {
height: 46px;
border-bottom: solid 1px #333;
position: relative;
}
.display {
text-align: right;
white-space: nowrap
}
p {
white-space: nowrap;
}
HTML
<div id="container">
<div id="menu">
<div class="menu_head"><h1>MENU</h1></div>
<div class="menu_item">Link 1</div>
<div class="menu_item">Link 2</div>
<div class="menu_item">Link 3</div>
<div class="menu_item">Link 4</div>
<div class="menu_item">Link 5</div>
</div>
<div id="content">
<div class="top"> <a class="top_button">
<div class="button_strips"></div>
<div class="button_strips"></div>
<div class="button_strips"></div>
</a>
</div>
<div class="display">
<!-- Add text when needed /-->
</div>
</div>
</div>
http://jsfiddle.net/L7zs39dj/
Always try to use preventDefault when using function event with link:
$('#menu a').click(function (e) {
e.preventDefault();
menu_move();
});