I am working on my final for my webpage development class, I am trying to make a blog themed website. I want to make my code it so that there is a profile picture and when clicked it turns into a box and reveals a bio and some other info. I already have that part done, but now I want to make it so that when the profile picture is clicked again, it will make the box and the info disappear. I understand that there are ways and I have tried some but to no success. When I try .toggle, it just disappears it completely. Any advice would help, thank you
(JSfiddle wasn't working for me, sorry) >
CodePen
JavaScript:
$(document).ready(function() {
$('#picback').click(function() {
$('#picback').animate({
borderTopLeftRadius: 100,
borderTopRightRadius: 100,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
height: 460
}, 'slow');
$('#info').fadeIn('slow');
});
});
We're in 2015. Javascript or jQuery is not needed here!
Use CSS transitions and make use of :checked pseudo class. This way you can also easily set an initial state.
Fully working demo: http://codepen.io/anon/pen/mJrvXo
#visibleToggle {
display: none;
}
#picback {
background-color: #B8B8B8;
border-radius: 50%;
width: 230px;
height: 230px;
border: 2px solid white;
margin: 0 auto;
box-shadow: 0 0 5px;
text-align: center;
transition-duration: 0.6s;
}
#picback:hover {
box-shadow: 0px 0px 8px black;
cursor: pointer;
}
#profilepic {
height: 200px;
position: relative;
top: 16px;
left: 2px;
}
#profilepic:hover {
cursor: pointer;
}
#name {
font-family: 'Playball', cursive;
color: blue;
text-shadow: 0 0 3px white;
}
#age {
font-family: 'Pragati Narrow', sans-serif;
font-size: 25px;
}
#bio {
font-family: 'Roboto', sans-serif;
color: white;
}
#info {
opacity: 0;
}
#visibleToggle:checked + #picback {
border-radius: 120px 120px 2px 2px;
height: 460px;
}
#visibleToggle:checked + #picback #info {
opacity: 1;
}
<input type="checkbox" id="visibleToggle" />
<div id='picback'>
<label for="visibleToggle">
<img src='https://www.shoptab.net/blog/wp-content/uploads/2014/07/profile-circle.png' id='profilepic' />
</label>
<div id='info'>
<h2 id='name'>Joshua T. Hurlburt</h2>
<h2 id='age'>15</h2>
<p id='bio'>My name is Josh. I attend school as a freshman at Rhinelander High School. This is a project I made for my Web Page Development Final.</p>
</div>
</div>
This is what I would recommend:
Instead of performing the animations in jQuery on click, give an active class to the picture element when clicked.
Perform your animations with CSS only when the picture has the active class.
Remove the class if you click on the picture element and it exists.
I would love to give you actual code, but since it's for your final, this should give you a good starting place :) Best of luck!
Try utilizing px unit values at css , js ; checking for display property of $("#info") at click of #picback to fade in , fade out #info ; reset #picback css back to initial borderRadius , height
$(document).ready(function() {
var picback = $("#picback")
, info = $("#info");
picback.click(function() {
if (info.css("display") === "none") {
$(this).animate({
borderTopLeftRadius: 100,
borderTopRightRadius: 100,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
height: 460
}, 'slow');
info.fadeIn('slow');
} else {
$(this).animate({borderRadius:120,height:230}, 'slow');
info.fadeOut('slow');
}
});
});
a {
text-decoration: none;
color: black;
text-align: center;
}
#picback {
background-color: #B8B8B8;
border-radius: 120px;
width: 230px;
height: 230px;
border: 2px solid white;
margin: 0 auto;
box-shadow: 0 0 5px;
}
#picback:hover {
box-shadow: 0px 0px 8px black;
}
#profilepic {
height: 200px;
position: relative;
top: 15px;
left: 5px;
}
#name {
font-family: 'Playball', cursive;
color: blue;
text-shadow: 0 0 3px white;
}
#age {
font-family: 'Pragati Narrow', sans-serif;
font-size: 25px;
}
#bio {
font-family: 'Roboto', sans-serif;
color: white;
}
#info {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href='#'>
<div id='picback'>
<img src='https://www.shoptab.net/blog/wp-content/uploads/2014/07/profile-circle.png' id='profilepic'>
<div id='info'>
<h2 id='name'>Joshua T. Hurlburt</h2>
<h2 id='age'>15</h2>
<p id='bio'>My name is Josh. I attend school as a freshman at Rhinelander High School. This is a project I made for my Web Page Development Final.</p>
</div>
</div>
</a>
codepen http://codepen.io/anon/pen/zGKepE
You should use .toggleClass() for click in the image and control the states of bio (for example collapsed and expanded) directly in css.
Here's an example of a very simple solution. Other examples posted already are a bit sexier, but I just used a variable to check whether or not it's open or closed. I also added in the basic closing animation, but you'll want to fiddle with that to make it not terrible. For example I'd suggest resetting the border radius in the callback after the animation function to prevent that ugly oval effect.
$(document).ready(function() {
var dropped = false;
$('#picback').click(function() {
if (!dropped) {
$('#picback').animate({
borderTopLeftRadius: 100,
borderTopRightRadius: 100,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
height: 460
}, 'slow');
$('#info').fadeIn('slow');
dropped = true;
} else { // Closing animation
$('#picback').animate({
borderRadius: "50%",
height: "230px"
}, 'slow');
$('#info').fadeOut('slow');
dropped = false;
}
});
});
http://codepen.io/anon/pen/dopaJq
What you can do here is use a closure function that remembers its state:
var clickHandler = (function () {
var isOpen = false;
return function () {
isOpen = !isOpen; // Toggles between true and false
if (isOpen) {
$('#picback').animate({
borderTopLeftRadius: 100,
borderTopRightRadius: 100,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
height: 460
}, 'slow');
$('#info').fadeIn('slow');
} else {
// Add close animation here
}
};
})();
$('#picback').click(clickHandler);
Try this code. It adds a class when animated and then checks for it before animating.
$(document).ready(function() {
$('#picback').click(function() {
var $this = $(this);
if($this.hasClass('animated')) {
$this.removeAttr('style').removeClass('animated');
} else {
$this.animate({
borderTopLeftRadius: 100,
borderTopRightRadius: 100,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
height: 460
}, 'slow').addClass('animated');
$('#info').fadeIn('slow');
}
});
});
Related
I searched a lot and finding nothing on it. I want to make a progress bar with round corners.progress bar need to have shadow. All I did as of now is here :
$(".progress-bar").each(function(){
var bar = $(this).find(".bar");
var val = $(this).find("span");
var per = parseInt( val.text(), 10);
$({p:0}).animate({p:per}, {
duration: 3000,
easing: "swing",
step: function(p) {
bar.css({
transform: "rotate("+ (45+(p*1.8)) +"deg)"
});
val.text(p|0);
}
});
});
body{
background-color:#3F63D3;
}
.progress-bar{
position: relative;
margin: 4px;
float:left;
text-align: center;
}
.barOverflow{
position: relative;
overflow: hidden;
width: 150px; height: 70px;
margin-bottom: -14px;
}
.bar{
position: absolute;
top: 0; left: 0;
width: 150px; height: 150px;
border-radius: 50%;
box-sizing: border-box;
border: 15px solid gray;
border-bottom-color: white;
border-right-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar">
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>100</span>%
</div>
I want to make corners round and having shadow. below given image represent what actually i want. Shadow is missing because i don't know to draw. :
I have tried Progressbar.js also, but I don't have much knowledge about SVG. Any answer would be appreciated.
#jaromanda for suggestion of learning SVG.
Yes is looks very hard to achieve from border-radius. So i looked into SVG and find it pretty handy. Here is my snippet:
// progressbar.js#1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/
var bar = new ProgressBar.SemiCircle(container, {
strokeWidth: 10,
color: 'red',
trailColor: '#eee',
trailWidth: 10,
easing: 'easeInOut',
duration: 1400,
svgStyle: null,
text: {
value: '',
alignToBottom: false
},
// Set default step function for all animate calls
step: (state, bar) => {
bar.path.setAttribute('stroke', state.color);
var value = Math.round(bar.value() * 100);
if (value === 0) {
bar.setText('');
} else {
bar.setText(value+"%");
}
bar.text.style.color = state.color;
}
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';
bar.animate(0.45); // Number from 0.0 to 1.0
#container {
width: 200px;
height: 100px;
}
svg {
height: 120px;
width: 200px;
fill: none;
stroke: red;
stroke-width: 10;
stroke-linecap: round;
-webkit-filter: drop-shadow( -3px -2px 5px gray );
filter: drop-shadow( -3px -2px 5px gray );
}
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<div id="container"></div>
I want to suggest some stupid but quick solution since you're already using position: absolute. You can add background color to the circles when your animation starts.
html:
<div class="progress-bar">
<div class="left"></div>
<div class="right"><div class="back"></div></div>
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>0</span>%
</div>
css:
/** all your css here **/
body{
background-color:#3F63D3;
}
.progress-bar{
position: relative;
margin: 4px;
float: left;
text-align: center;
}
.barOverflow{
position: relative;
overflow: hidden;
width: 150px; height: 70px;
margin-bottom: -14px;
}
.bar{
position: absolute;
top: 0; left: 0;
width: 150px; height: 150px;
border-radius: 50%;
box-sizing: border-box;
border: 15px solid gray;
border-bottom-color: white;
border-right-color: white;
transform: rotate(45deg);
}
.progress-bar > .left {
position: absolute;
background: white;
width: 15px;
height: 15px;
border-radius: 50%;
left: 0;
bottom: -4px;
overflow: hidden;
}
.progress-bar > .right {
position: absolute;
background: white;
width: 15px;
height: 15px;
border-radius: 50%;
right: 0;
bottom: -4px;
overflow: hidden;
}
.back {
width: 15px;
height: 15px;
background: gray;
position: absolute;
}
jquery:
$(".progress-bar").each(function(){
var bar = $(this).find(".bar");
var val = $(this).find("span");
var per = parseInt( val.text(), 10);
var $right = $('.right');
var $back = $('.back');
$({p:0}).animate({p:per}, {
duration: 3000,
step: function(p) {
bar.css({
transform: "rotate("+ (45+(p*1.8)) +"deg)"
});
val.text(p|0);
}
}).delay( 200 );
if (per == 100) {
$back.delay( 2600 ).animate({'top': '18px'}, 200 );
}
if (per == 0) {
$('.left').css('background', 'gray');
}
});
https://jsfiddle.net/y86qs0a9/7/
Same as the answers above, I found it much easier to implement using SVG instead of pure CSS.
However I couldn't find a single simplistic implementation using only HTML and CSS, or at least with no libraries, no external scripts or no dependencies. I found that given the math that needs to be calculated to make the SVG transformations to represent the percentage, JS needs to be included (if someone knows how to achieve this with only HTML and CSS I'd love to learn how). But what the JS script does is not long or complex enough to justify the overhead of adding yet another dependency to my codebase.
The JS calculations are pretty easy once you read through. You need to calculate the coordinate for the end point of the gauge in the coordinate system of the SVG. so basic trig.
Most of the CSS is not even needed and I added just to style it and to make it pretty. You can add shadow or gradients same as you could with any HTML pure shape.
Here is the codePen https://codepen.io/naticaceres/pen/QWQeyGX
You can easily tinker with this code to achieve any kind of shape of circular gauge (full circle, lower half of the semi-circle, or any variation including ellipsis).
Hope this is helpful.
// # Thanks to mxle for the first rounded corner CSS only solution https://stackoverflow.com/a/42478006/4709712
// # Thanks to Aniket Naik for the styling and the basic idea and implementation https://codepen.io/naikus/pen/BzZoLL
// - Aniket Naik has a library, linked to that codepen you should check out if you don't want to copy-paste or implement yourself
// the arc radius in the meter-value needs to stay the same, and must always be x=y, not lower than the possible circle that can connect the two points (otherwise the ratio is not preserved and the curvature doesn't match the background path).
// to style the gauge, make it bigger or smaller, play with its parent element and transform scale. don't edit width and height of SVG directly
function percentageInRadians(percentage) {
return percentage * (Math.PI / 100);
}
function setGaugeValue(gaugeElement, percentage, color) {
const gaugeRadius = 65;
const startingY = 70;
const startingX = 10;
const zeroBasedY = gaugeRadius * Math.sin(percentageInRadians(percentage));
const y = -zeroBasedY + startingY;
const zeroBasedX = gaugeRadius * Math.cos(percentageInRadians(percentage));
const x = -zeroBasedX + gaugeRadius + startingX;
// # uncomment this to log the calculations of the coordinates for the final point of the gauge value path.
//console.log(
// `percentage: ${percentage}, zeroBasedY: ${zeroBasedY}, y: ${y}, zeroBasedX: ${zeroBasedX}, x: ${x}`
//);
gaugeElement.innerHTML = `<path d="M ${startingX} ${startingY}
A ${gaugeRadius} ${gaugeRadius} 0 0 1 ${x} ${y}
" stroke="${color}" stroke-width="10" stroke-linecap="round" />`;
}
percentageChangedEvent = (gauge, newPercentage, color) => {
const percentage =
newPercentage > 100 ? 100 : newPercentage < 0 ? 0 : newPercentage;
setGaugeValue(gauge, percentage, color);
};
function initialGaugeSetup(gaugeElementId, inputId, meterColor, initialValue) {
const gaugeElement = document.getElementById(gaugeElementId);
setGaugeValue(gaugeElement, 0, meterColor);
const inputElement = document.getElementById(inputId);
inputElement.value = initialValue;
setGaugeValue(gaugeElement, initialValue, meterColor);
inputElement.addEventListener("change", (event) =>
percentageChangedEvent(gaugeElement, event.target.value, meterColor)
);
}
// Gauge Initial Config
initialGaugeSetup(
"svg-graph-meter-value",
"svg-gauge-percentage-2",
"rgb(227 127 215)",
40
);
body {
background-color: rgba(0, 0, 0, 0.8);
color: #999;
font-family: Hevletica, sans-serif;
}
/* SVG Path implementation */
.svg-container {
margin: 20px auto 10px;
height: 80px;
width: 150px;
}
svg {
fill: transparent;
}
.input-percent-container {
text-align: center;
}
.input-percent-container>* {
display: inline;
}
input {
text-align: right;
width: 40px;
margin: auto;
background-color: #5d5d5d;
color: white;
border-radius: 6px;
border: black;
}
<div class="svg-container">
<svg width="150" height="80" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 70
A 65 65 0 1 1 140 70
" stroke="grey" stroke-width="3" stroke-linecap="round" />
<g id="svg-graph-meter-value">
</g>
</svg>
</div>
<div class="input-percent-container"><input id="svg-gauge-percentage-2" /><span>%<span/></div>
I've been looking at previously posted StackOverflow questions, and still could not find my answer. So, I've been trying to simply delete the entire modal when I click on the close button. I can't get it to work, unfortunately. This is my code, so far.
var jQueryLoaded = 0;
function Modal(title, contents) {
if (jQueryLoaded === 1) {
var modal = document.createElement('div'),
modal_box = document.createElement('div'),
modal_head = document.createElement('div'),
modal_title = document.createElement('div'),
close_btn = document.createElement('div'),
modal_content = document.createElement('div');
modal.className = 'modal';
modal_box.className = 'modal_box';
modal_head.className = 'modal_head';
modal_title.className = 'modal_title';
modal_title.innerHTML = title;
close_btn.className = 'modal_close';
close_btn.innerHTML = '\u00D7';
modal_content.className = 'modal_content';
modal_content.innerHTML = contents;
$("body").append(modal);
$(modal).append(modal_box);
$(modal_box).append(modal_head, modal_content);
$(modal_head).prepend(modal_title);
$(modal_head).append(close_btn);
} else {
console.warn('jQuery, a required library, is not available at moment of function run. Please double check jQuery is loaded properly before running this function again.');
}
}
$(document).ready(function () {
jQueryLoaded = 1;
$("div.modal_close").on('click', function () {
$(this).parent().parent().closest('.modal').remove();
});
Modal('hello','<p>Example</p>');
});
/* Modals based off of W3Schools example! */
div.modal {
display: block;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background: rgba(0, 0, 0, 0.4);
font-family: 'Open Sans', sans-serif;
}
div.modal > div.modal_box {
background: #FFFFFF;
margin: auto;
padding: 5px;
border: 1px solid #000000;
width: 80%;
box-shadow: 3px 5px 3px rgba(0, 0, 0, 0.6);
}
div.modal > div.modal_box > div.modal_head {
width: 100%;
height: auto;
border: none;
border-radius: 0;
border-bottom: 1px solid #000000;
min-height: 10px;
font-weight: 16px;
}
div.modal > div.modal_box > div.modal_head > div.modal_title {
display: inline-block;
color: #000000;
text-align: center;
font-weight: 900;
font-size: 24px;
}
div.modal > div.modal_box > div.modal_head > div.modal_close {
margin: 1px;
font-weight: 900;
color: #000000;
border: 1px solid transparent;
padding: 2px;
border-radius: 5px;
background: transparent;
cursor: pointer;
float: right;
line-height: 10px;
user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-k-user-select: none;
-moz-user-select: none;
}
div.modal > div.modal_box > div.modal_head > div.modal_close:hover,
div.modal > div.modal_box > div.modal_head > div.modal_close:focus {
border: 1px solid #000000;
background: rgba(0, 0, 0, 0.3);
}
div.modal > div.modal_box > div.modal_head > div.modal_close:active {
background: rgba(255, 0, 0, 0.8);
border: 1px solid #000000;
}
div.modal > div.modal_box > div.modal_content {
padding: 4px;
padding-left: 10px;
font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Mind you, the code to remove the modal was just the last one I tried. I tried many others like $(this).parent().parent().closest('.modal').remove(); and $(this).parent().parent().find('.modal').remove().
You're mixing JS and jQuery, not that it's not good, but you use it in an inappropriate way. jQuery is designed to help you manipulate with DOM and events - make use of it!
If you're building a Modal function to handle modals, the close should be handled from within the script, not by adding extra stuff all around your .js files.
How do you call your Modal?
Here's an example to give you an idea and get you started:
jQuery(function ($) { // DOM is ready and $ alias secured
Modal("opened",{
title : "Opened example",
content : "<p>Immediately opened from JS using <code>.open()</code></p>"
}).open();
Modal("test1", {
title : "This is Title",
content :
`<p>
<b>Lorem Ipsum</b>
Dolor sit amet<br>
Example
</p>`
});
Modal("another", {
title: "Auto-hide in 3sec",
content: "<p>Like it? <b>Show some love</b></p>",
duration: 3000
});
});
/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
[data-modal]{ color:blue; cursor:pointer; }
<h1>Modal Demo</h1>
Click <a data-modal="test1">here</a> to call modal ID test1<br>
or you can click <a data-modal="another">here</a> to call another modal
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
/** Modal - Custom modals example by RokoCB
* #param {String} modalId - A modal name used to reference a modal
* #param {Object} data - {title:"String", content:"HTML", duration:ms}
* #return {Object} - methods: .open() .close()
*/
function Modal(modalId, data) {
// DEFAULT MODAL STYLES
var css = {
area: {
position: "fixed",
visibility: "hidden",
opacity: 0,
left: 0,
top: 0,
right: 0,
bottom: 0,
zIndex: 99999,
background: "rgba(0,0,0,0.4)",
transition: "0.4s",
},
modal: {
position: "absolute",
left: "50%",
top: "50%",
minWidth: 240,
transform: "translate(-50%, -50%)",
background: "#fff",
boxShadow: "0 8px 24px rgba(0,0,0,0.6)",
},
title: {
padding: "8px 32px 8px 16px",
fontSize: 18,
borderBottom:"1px solid rgba(0,0,0,0.15)",
},
content: {
padding: "16px",
},
close: {
position: "absolute",
top: 4,
right: 4,
padding: 8,
cursor: "pointer",
userSelect: "none",
}
}
// ELEMENTS
var $area = $("<div/>", {
class: "modal_area",
appendTo: "body",
css: css.area,
click : closeModal,
});
var $modal = $("<div/>", {
class: "modal",
appendTo: $area,
css: css.modal,
click: function(evt){evt.stopPropagation();}
});
$("<div/>", {
class: "modal_title",
appendTo : $modal,
text : data.title,
css: css.title,
});
$("<div/>", {
class: "modal_content",
appendTo : $modal,
html : data.content,
css: css.content,
});
$("<div/>", {
class: "modal_close",
appendTo : $modal,
text : '\u00d7',
css: css.close,
click : closeModal,
});
// ACTIONS
var closeTimeout = null;
function closeModal() {
$area.removeClass("open").css({visibility:"hidden", opacity:0});
}
function openModal() {
$area.addClass("open").css({visibility:"visible", opacity:1});
if(data.duration) {
clearTimeout(closeTimeout);
closeTimeout = setTimeout(closeModal, data.duration);
}
}
$(document).on("click", "[data-modal='"+modalId+"']", openModal);
// METHODS
return {
open : openModal,
close : closeModal
}
}
</script>
The button will have no event listener attached to it because you're creating it after the attaching of the event listener. There is two solution for this:
EITHER:
Add the event listener just after the button is created inside the Modal class here:
close_btn.onclick = function() {
$(this).closest('.modal').remove();
}
OR:
Use event delegation like this:
$(document).on('click', 'div.modal_close', function () {
$(this).closest('.modal').remove();
});
NOTE: Since, as mentioned in the comments, you are already using jQuery why not using it inside the Modal class too.
I have an accordion on my website which is working but when i click one of the buttons all of the elements with the same class get given the toggle not just the next element
i have the following CSS
button.flxaccordion {
background-color: rgb(255, 231, 217);
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: solid 0px;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight: 600;
}
button.flxaccordion.active,
button.flxaccordion:hover {
background-color: rgb(233, 93, 15);
}
button.flxaccordion:after {
content: '\25bc';
font-size: 13px;
color: rgb(233, 93, 15);
float: right;
margin-left: 5px;
}
button.flxaccordion.active:after {
content: "\25b2";
color: rgb(255, 231, 217);
}
.flxpanel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}
.flxpanel.show {
opacity: 1;
max-height: 500px;
}
.flxpanel.hide {
opacity: 0;
height: 0;
}
and the following code on my page
<p><button class="flxaccordion">Satellite</button></p>
<div class="flxpanel">
<p>Multi disc Floor Grinders and Polishers with passive or active heads</p>
</div>
<p><button class="flxaccordion">Meteor</button></p>
<div class="flxpanel">
<p>Small Single Head Floor Grinders</p>
</div>
<p><button class="flxaccordion">GrinderTec</button></p>
<div class="flxpanel">
<p>Hand Held Floor Grinders</p>
</div>
<script type="text/javascript">// <![CDATA[
var acc = $(".flxaccordion"); //jquery flxaccordion
acc.click(function() //when we click on element
{
$(this).toggleClass("active"); //it is active
$('.flxpanel').not($(this).next()).toggleClass("show");
});
// ]]></script>
I think i have confused some elements here but it seems to show every element after each button.
I need to change the toggleClass("show"); to toggleClass("hide"); and add another line to make it so it changes the element after the active button to toggleClass("show");.
Any suggestions?
Your jquery script needs to change something like below:
$(document).ready(function(){
var acc = $(".flxaccordion"); //jquery flxaccordion
acc.click(function() {
$(this).toggleClass("active");
$(this).parent().next().toggleClass('show');
});
});
I'm using a jQuery plugin called bPopup , which receives a jQuery object and creates a popup element.
it is constructed using an options element that looks like this:
{
modalClose: false,
modalColor: "#ffffff",
follow: [false, false] // Follow x, follow y
}
I want to change the "follow" property within the popup dynamically, without re-creating the popup or cloning it, but actually changing the existing popup.
in other words: I want the popup to follow when scrolling, and be able to pause that following when desired.
A fiddle displaying the problem:
https://jsfiddle.net/syoels/9tqcaq7m/11/
Thanks a lot in advance!
Ok. It was much simpler than I thought...
just find the popped up div, address it's 'bPopup' data attribute and change the follow property.
Working fiddle with the solution: https://jsfiddle.net/syoels/ydu5s9zu/
$(document).ready(function() {
$('#popupBtn').click(function() {
var popup_div = $('<div id="popup"><p>Holy guacamole! what a gorgeous popup!<br><br>scroll down and see if it follows you</p> <button id="stopFollowingBtn">Toggle follow</button></div>');
popup_div.bPopup({
follow: [true, true], //x, y
opacity: 0.6,
modalColor: 'greenYellow',
});
$('#stopFollowingBtn').click(function() {
var follow_x = $('#popup').data('bPopup').follow[0];
var follow_y = $('#popup').data('bPopup').follow[1];
$('#popup').data('bPopup').follow = [!follow_x, !follow_y];
});
});
});
body {
background: black;
height: 1000px;
}
#popup {
display: none;
position: absolute;
width: 140px;
height: 200px;
background: #ccc;
text-align: center;
border: 2px solid white;
border-radius: 3px;
box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
}
#popupBtn {
display: block;
margin: 10px auto;
}
#stopFollowingBtn {
background: red;
color: white;
font-weight: bold;
cursor: pointer;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bPopup/0.11.0/jquery.bpopup.js"></script>
<body>
<button id="popupBtn">show popup</button>
</body>
New to coding, please help me out. I have a sliding code for a vertical nav. When the user hovers over the nav, it slides out to the right. I want it to stay active once the user clicks on the nav. How do I go about doing that? Here is a link to a visiual
http://edgecastcdn.net/00009B//TEMP/NAV/index.html
in return for you help, here is a joke you guys might enjoy (if you haven't heard of it already)
A wife asks her husband, a computer programmer; "Could you please go
to the store for me and buy one carton of milk, and if they have eggs,
get 6!"
A short time later the husband comes back with 6 cartons of milk.
The wife asks him, "Why the hell did you buy 6 cartons of milk?"
He replied, "They had eggs."
Thanks guys, any help is appreciated! Here is the code. Let me know if you need the css too.
$(document).ready(function(){
slide("#sliding-navigation", 30, 15, 150, .8);
});
function slide(navigation_id, pad_out, pad_in, time, multiplier){
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";
// initiates the timer used for the sliding animation
var timer = 0;
// creates the slide animation for all list elements
$(list_elements).each(function(i)
{
// margin left = - ([width of element] + [total vertical padding of element])
$(this).css("margin-left","-180px");
// updates timer
timer = (timer*multiplier + time);
$(this).animate({ marginLeft: "0" }, timer);
$(this).animate({ marginLeft: "12px" }, timer);
$(this).animate({ marginLeft: "0" }, timer);
});
// creates the hover-slide effect for all link elements
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
});
});
}
Here is my CSS code (Updated with Douglas "active" code) Thanks!
body
{
margin: 0;
padding: 0;
background: #1d1d1d;
font-family: "Lucida Grande", Verdana, sans-serif;
font-size: 100%;
}
h2
{
color: #999;
margin-bottom: 0;
margin-left:13px;
background:url(navigation.jpg) no-repeat;
height:40px;
}
h2 span
{
display: none;
}
p navigation-block
{
color: #00b7e6;
margin-top: .5em;
font-size: .75em;
padding-left:15px;
}
#navigation-block {
position:relative;
}
#hide {
position:absolute;
top:30px;
left:-190px;
}
ul#sliding-navigation
{
list-style: none;
font-size: 0.75em;
margin: 30px 0;
padding: 0;
}
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
display: block;
width: 150px;
padding: 2px 18px;
margin: 0;
margin-bottom: 0px;
}
ul#sliding-navigation li.sliding-element h3
{
color: #fff;
background:#333333 url(heading_bg.jpg) repeat-y;
padding-top: 7px;
padding-bottom: 7px;
}
ul#sliding-navigation li.sliding-element a
{
color: #999;
background:#222 url(tab_bg.jpg) repeat-y;
border: 1px solid #1a1a1a;
text-decoration: none;
}
ul#sliding-navigation li.sliding-element a.selected { color: #cc0000; }
{
color: #FFF;
margin-top: 0.5em;
font-size: 10pt;
padding-left:15px;
font-weight: bolder;
}
ul#sliding-navigation li.sliding-element a:hover { color: #00b7e6; background:#2a2a2a; }
#navigation-block p {
color: #FFF;
margin-top: 0.5em;
font-size: 10pt;
padding-left:15px;
font-weight: bolder;
}
.active{
padding-left:12px;
/*Add whatever other styles you need */
}
It looks like your nav doesn't actually change the page, just loads (or switches out) new content on the page.
The easiest way to make this stay after a user clicks a link would be to add a class with the correct settings. For example:
jQuery
$(link_elements).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
}
).click(function(){
$(link_elements).removeClass("active");
$(this).addClass("active");
});
CSS
.active{
padding-left:12px;
/*Add whatever other styles you need */
}
EDIT: Added CSS
EDIT:
Okay, I see what I missed before - the jQuery is setting the padding inline which overrides the external CSS. You technically could use !important in the .active CSS, but I personally like this method more.
Basically, I add the active class like before, but I only use it as a reference. When a user clicks a link, the active class is added. If a link has the active class, it does not animate on mouseout. When a not active class is clicked, active is removed from all other nav links, they're all animated to their start point, and the new link is made active.
This may be better explained with the relevant code:
// creates the hover-slide effect for all link elements
$(link_elements).each(function(i) {
$(this)
.hover(
function() {
$(this).animate({ paddingLeft: pad_out }, 150);
}, function() {
if(!$(this).hasClass("active"))
$(this).animate({ paddingLeft: pad_in }, 150);
})
.click(
function() {
$(link_elements).not($(this)).removeClass("active").animate({ paddingLeft: pad_in}, 150);
$(this).addClass("active");
});
}); // End `each` loop
And the related jsFiddle: http://jsfiddle.net/eAaCn/
(added console.log() and return false in the jsFiddle for testing only)