I have been trying to make a copy of a FAQ Accordion style like this one
here.
The problems are that the first question is collapsed and when I click on the other questions they wont open nor respond to any of my clicks. What should i do to make this correct? I believe something is wrong with my JQuery.
HTML CODE
<div class="accordion-header active-header">Q: Is this free?</div>
<div class="accordion-content open-content" style="display: block;">
<p>A: Yes, uploading and downloading is 100% Free for all users. We offer PRO accounts which allows for greater flexibility with uploading/downloading.</p>
</div>
<div class="accordion-header inactive-header">Q: Will my files be removed?</div>
<div class="accordion-content">
<p>A: Free/non accounts files are kept for 90 days. PRO accounts files are kept for unlimited days.</p>
</div>
<div class="accordion-header inactive-header">Q: How many files can I upload?</div>
<div class="accordion-content">
<p>A: You can upload as many files as you want, as long as each one adheres to the Terms of Service and the maximum file upload size.</p>
</div>
<div class="accordion-header inactive-header">Q: Which files types am I allowed to upload?</div>
<div class="accordion-content">
<p>A: You may upload the following types of files: Any.</p>
</div>
<div class="accordion-header inactive-header">Q: Are there any restrictions to the size of my uploaded files?</div>
<div class="accordion-content">
<p>A: Each file you upload must be less than 1.00 GB in size for free/non accounts or less than 10.00 GB in size for PRO accounts. If it is greater than that amount, your file will be rejected.</p>
</div>
<div class="accordion-header inactive-header">Q: Can I upload music or videos?</div>
<div class="accordion-content">
<p>A: Yes. Music and video hosting is permitted as long as you own the copyright on the content and it adheres to the terms and conditions.</p>
</div>
<div class="accordion-header inactive-header">Q: There are some files on our servers which may have been subject to copyright protection, how can I notify you of them?</div>
<div class="accordion-content">
<p>A: Via our report abuse pages.</p>
</div>
<div class="accordion-header inactive-header">Q: Do files have direct links?</div>
<div class="accordion-content">
<p>A: All users are shown a download page so no direct links are available, we may introduce direct link generation in the future.</p>
</div>
CSS CODE
.accordion-header {
font-size: 18px;
background: #ebebeb;
margin: 5px 0 0 0;
padding: 14px;
border: 1px solid #D8D8D8;
cursor: pointer;
color: #8E8E8E;
text-align: left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.active-header {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
background: rgb(96, 168, 227);
background-repeat: no-repeat;
background-position: right 50%;
color: white;
text-shadow: 1px 1px rgb(72, 141, 197);
}
.inactive-header {
background: url(images/inactive-header.gif) #fff;
background-repeat: no-repeat;
background-position: right 50%;
}
.inactive-header:hover {
background: url(images/inactive-header.gif) #f5f5f5;
background-repeat: no-repeat;
background-position: right 50%;
}
.accordion-content {
display: none;
padding: 18px;
width: 100%;
background: #ffffff;
border: 1px solid #cccccc;
border-top: 0;
text-align: left;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
JS CODE
$(document).ready(function () {
'use strict';
$('.nav').onePageNav({
filter: ':not(.external)'
});
});
jQuery(document).ready(function ($) {
'use strict';
$('.animated').appear(function () {
var elem = $(this);
var animation = elem.data('animation');
if (!elem.hasClass('visible')) {
var animationDelay = elem.data('animation-delay');
if (animationDelay) {
setTimeout(function () {
elem.addClass(animation + " visible");
}, animationDelay);
} else {
elem.addClass(animation + " visible");
}
}
});
});
$(document).ready(function () {
'use strict';
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
});
function showUploaderPopup() {
jQuery('#fileUploadWrapper').modal('show', {
backdrop: 'static'
}).on('shown.bs.modal');
}
function createSlowGauge() {
var opts = {
lines: 12,
angle: 0,
lineWidth: 0.25,
pointer: {
length: 0.9,
strokeWidth: 0.04,
color: '#000000'
},
limitMax: 'true',
colorStart: '#CF0808',
colorStop: '#DA0202',
strokeColor: '#E0E0E0',
generateGradient: true
};
var target = document.getElementById('canvas-slow');
var gauge = new Gauge(target).setOptions(opts);
gauge.maxValue = 100;
gauge.animationSpeed = 128;
gauge.set(9);
}
$(document).ready(function () {
$('.accordion-header').toggleClass('inactive-header');
$('.accordion-header').click(function () {
if ($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
} else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});
return false;
});
function createFastGauge() {
var opts = {
lines: 12,
angle: 0,
lineWidth: 0.25,
pointer: {
length: 0.9,
strokeWidth: 0.04,
color: '#000000'
},
limitMax: 'true',
percentColors: [
[0.0, "#000000"],
[0.50, "#cc0000"],
[1.0, "#00cc00"]
],
strokeColor: '#E0E0E0',
generateGradient: true
};
var target = document.getElementById('canvas-fast');
var gauge = new Gauge(target).setOptions(opts);
gauge.maxValue = 100;
gauge.animationSpeed = 128;
gauge.set(100);
}! function ($) {
$(function () {
var $root = $('html, body');
$('.smooth-anchor-link').click(function () {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
})
}(window.jQuery);
Here is the JSFiddle example, you may try to update it if you know the correct solution :)
PS:
I know there are other similar questions here but I tried all of them none solved my problem.
Your code throws an error Uncaught TypeError: undefined is not a function which is caused by onePageNav() and appear(), these are not official javascript/jQuery functions. If you copied them from somewhere else, they are most likely external plugin functions.
Simply removing these 2 functions from your javascript fixes your clicking issue. JSFiddle link
Please note that you also do not need to use $(document).ready(function () in JSFiddle, it does this automatically.
When trying to replicate something, try to build it yourself from scratch. You will not learn anything from just copying the entire thing. Try to write your own functions instead, so you can learn how everything works. The jQuery documentations should help.
If you are interested in learning how code in Javascript and/or jQuery, try the following sites:
CodeAcademy - General knowledge basics of several languages.
Tuts+ - Tutorials on more specific topics.
KhanAcademy
Mozilla Docs
Related
I'm trying to find the most concise way to throttle a hover function with jQuery. There are many examples of this but they all seem to not work as intended. For example the use of $.throttle doesn't error but it stops the animation from working altogether. This is the code which I'm trying to throttle:
jQuery(document).ready(function($){
var $navTab = $('.nav-tab-parent');
function moveNavTab(e) {
TweenLite.to($navTab, 0.3, {
css: {
left: e.pageX,
top: e.pageY
}
});
}
$(window).on('mousemove', moveNavTab);
$(".toggle-bars").hover( // this is the .hover() function I need to throttle.
function() {
$(".nav-tab-parent").animate({
opacity: 1
});
$(".nav-tab-parent").delay(10).animate({
width: "36px",
easing: "swing"
});
$(".nav-tab").html("MENU");
$(".nav-tab").delay(350).animate({
opacity: 1
});
}, function() {
$(".nav-tab").animate({
opacity: 0
});
$(".nav-tab-parent").delay(150).animate({
width: "0",
opacity: 0,
easing: "swing"
});
}
);
});
I must be missing something here but can't figure it out. Any help in achieving this would be greatly appreciated!
Changed to use entirely GSAP and relying on .timescale() see the documentation — didn't know the underlying structure so will need some configuring but the basis is there. GSAP has a crazy deep documentation but should be familiar enough to jquery with object animations.
var tl = gsap.timeline().timeScale(-1);
tl.fromTo(".nav-tab-parent", {
autoAlpha: 0,
duration: 1
}, {
autoAlpha: 1,
duration: 1
});
$(".toggle-bars").hover(function() {
tl.timeScale(1);
}, function() {
tl.timeScale(-1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle-bars">.toggle-bars
<div class="nav-tab-parent">.nav-tab-parent</div>
</div>
I suppose you are trying to achieve something like this. You could try to use .stop() method - it will stop current animation and after that you can run next one. Try to play with arguments to choose what best will suit your case.
let $hover = $('.hover-box'),
$target = $('.animated-box');
function show() {
$target.stop(true, true).animate({
opacity: 1,
})
}
function hide() {
$target.stop(true, true).animate({
opacity: 0
})
}
$hover.hover(show, hide)
.hover-box,
.animated-box {
width: 100px;
height: 100px;
border-radius: 8px;
}
.hover-box {
border: 1px solid #ddd;
display: inline-flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-family: sans-serif;
cursor: pointer;
margin-bottom: 16px;
}
.hover-box:hover {
background: #ddd;
}
.animated-box {
opacity: 0;
background: gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='hover-box'>Hover</div>
<div class='animated-box'></div>
Basically, I am getting an href value, then taking that value, creating a new element after the one im getting it from, then applying the href to the new one. The problem is, after every time I copy and paste this code, one for facebook, and one for twitter, as a share button, it multiplies from 2 to 3, showing 1 twitter button, and two facebook buttons. This has completely stumped me, never ran into this issue before.
$(document).ready(function () {
$('.mm').each(function () {
$('a', this).after('<br><a class="tw">twitter</a><br>');
var lnk = $(this).find('a').attr('href');
$('.tw', this).attr('href', lnk);
});
});
$(document).ready(function () {
$('.mm').each(function () {
$('a', this).after('<br><a class="fb">facebook</a><br>');
var lnk = $(this).find('a').attr('href');
$('.fb', this).attr('href', lnk);
});
});
Codepen: https://codepen.io/zachreynolds/pen/oEBMzz
It's because you are applying .each() 2 times.
You need to Merge your code into one .each() like below:-
$(document).ready(function () {
$('.mm').each(function () {
var lnk = $(this).find('a').attr('href');
$(this).find('a').after('<br><a class="tw" href="'+lnk+'">twitter</a><br><br><a class="fb" href="'+lnk+'">Facebook</a><br>');
});
});
Working example:-
$(document).ready(function () {
$('.mm').each(function () {
var lnk = $(this).find('a').attr('href');
$(this).find('a').after('<br><a class="tw" href="'+lnk+'">twitter</a><br><br><a class="fb" href="'+lnk+'">Facebook</a><br>');
});
});
html {
background-color: #eee;
}
.mm{background:#ccc;margin:5px}
body {
margin: 0 auto;
color: #323232;
max-width: 100%;
line-height: 1.5;
padding: 1em 3em;
background-color: #fff;
font-family: 'Roboto', serif;
}
h1 {line-height: 2;}
p{ font-size: 1.2em;}
pre {
padding: .5em;
color:#bada55; /* bright green */
display: block;
border-radius: 0.3em;
font-size:1em;
background-color: #000;}
}
code {
background-color: #eee;
font-size:.25em;
font-family:verdana;
}
a:link {color:#DB2929;text-decoration:underline;}
a:visited{color:green;text-decoration:none;}
a:hover{color:green;}
a:active{color:red;}
.tw,.fb{width:100px;height:33px;padding:7px;}
.tw {background:#09f}
.fb {background:#46a}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cc-m-8497708420" class="j-module n j-rss ">
<div class="rssFeed">
<h3>sustainability</h3>
<div class="mm">
<span class="rssFeedTitle j-rss-feed-title">Trees that helped save America's farms during the Dust Bowl are now under threat</span><br><br>
>> Read More<br><br>
</div>
<div class="wrappedtext">(Tue, 06 Feb 2018)</div>
<div class="mm">
<span class="rssFeedTitle j-rss-feed-title">Can Money Grow on Trees? Across the world, businesses are making money by restoring forests and farmland.</span><br><br>
>> Read More<br><br>
</div>
<div class="wrappedtext">(Wed, 07 Feb 2018) </div>
</div>
</div>
I have a function that alters the size of a div when I click on it. Now I have to write the onclick command in my html page, but I want it to stand in the extern .js file.
Now in html:
<div id="box1" class="kaesten" onclick="changeSize('box1')"> Title 1 </div>
What I want:
<div id="box1" class="kaesten" > Title 1 </div>
Tried something in jquery but it didn't work:
function changeSize(id) {
var elem = document.getElementById(id);
var currentAbsoluteElem = document.getElementById('dummy');
var text = elem.innerHTML;
currentAbsoluteElem.innerHTML = text;
currentAbsoluteElem.setAttribute('style', 'display:block');
/*Extra styling neeed to be done here*/
}
var elems = document.getElementsByClassName('kaesten');
for (var i = 0; i < elems.length; i++) {
elems[i].onclick = function() {
changeSize(this.id);
}
}
var absoluteCl = document.getElementsByClassName('absoluteclass');
absoluteCl[0].onclick = function() {
console.log(document.getElementsByClassName('absoluteclass'))
document.getElementsByClassName('absoluteclass')[0].setAttribute('style', 'display:none');
}
$(document).ready(function() {
$('.kaesten').click(function() {
changeSize($(this).attr('id'));
});
});
.kaesten {
width: 240px;
height: 300px;
background-color: darkgrey;
background-position: center;
background-repeat: no-repeat;
text-shadow: 0px 0px 3px #000;
border: 5px solid #F0F8ff;
vertical-align: top;
text-shadow: 3px 3px 4px #777;
float: left;
margin-left: 30px;
}
.absoluteclass {
position: absolute;
background-color: darkgrey;
width: 600px;
height: 600px;
left: calc(30%);
display: none;
}
<div id="box1" class="kaesten">title1</div>
<div id="box2" class="kaesten">title2</div>
<div id="box3" class="kaesten">title3</div>
<div id="box4" class="kaesten">title4</div>
<div id="dummy" class="absoluteclass"></div>
I know it works in the fiddle, but I don't know why it doesn't work on my homepage without writing the function in the div's.
I guess the problem is that you are trying to assign the onclick event handler before the DOM is actually rendered and ready. My suggestion is to wrap your "initialization code" inside a $(document).ready() method. As follows:
$(document).ready(function() {
// Apply the on click event handlers here, using jQuery or not
// For instance:
$('.kaesten').click(function() {
changeSize($(this).attr('id'));
});
});
if you want to pass the id from jquery to your function you should do it like this:
$(function(){
$(".kaesten").click(function(){
changeSize($(this).attr("id"));
});
});
you can use .css in jquery
$(function(){
$(".kaesten").click(function(){
$(this).css({'width' : '600px' , 'height' : '600px'});;
});
});
I want to create a functionality in my site that'll highlight the drag and drop area for the ease of user.
I dug up a code that is working perfectly on JSFIDDLE. But can't perform any actions on my local server.
I've also included the java script library, but results are as disappointing as earlier tries. I might be missing something.
I'm also giving the link of JSFiddle where the code is in working condition.
Demo
HTML
<div id='container'><div name='drop' style='display: none;'>DROP HERE</div><div name='drag'>DRAG HERE</div></div>
jQuery
var $dropTarget = $("#container");
$(document).bind("dragover", function(e) {
if ($dropTarget.hasClass("highlight"))
return;
$dropTarget.addClass("highlight");
$dropTarget.find("[name='drop']").show();
$dropTarget.find("[name='drag']").hide();
}).bind("dragleave drop", function(e) {
if (!$dropTarget.hasClass("highlight"))
return;
$dropTarget.removeClass("highlight");
$dropTarget.find("[name='drop']").hide();
$dropTarget.find("[name='drag']").show();
});
CSS
#container {
padding: 10px;
background: #fdd;
border: 2px solid #fdd;
}
#container [name=drop] {
padding: 10px;
background: #dfd;
border: 2px solid #dfd;
}
#container [name=drag] {
padding: 10px;
background: #ddf;
border: 2px solid #ddf;
}
.highlight {
border-color: #fc0;
}
Worked For me-
// var $dropTarget = $("#container");
$(document).bind("dragover", function(e) {
if ($("#container").hasClass("highlight"))
return;
$("#container").addClass("highlight");
$("#container").find("[name='drop']").show();
$("#container").find("[name='drag']").hide();
}).bind("dragleave drop", function(e) {
// alert('asdasd');
if (!$("#container").hasClass("highlight"))
return;
$("#container").removeClass("highlight");
$("#container").find("[name='drop']").hide();
$("#container").find("[name='drag']").show();
});
Also in fiddle
I am new to JavaScript/CSS (basically the whole world of web dev) and I am really struggling to create the following widget. I created a picture of what I want to make to make it more clear.
The Play/Pause and Stop button are ready. Loop checkbox is no problem. But the progress bar is painful. The two markers are supposed to mark the point from where the file would start playing and where it would stop. The progress bar is also supposed to be click-able, so if I want to access a certain point in time, then its possible.
What I tried so far
jQuery UI slider: For a sliding progress bar and use that draggable slider to access a certain point in audio file. Works fine. But no markers and looks really ugly. Don't how to change it.
<progress> tag: not very flexible. Marker? Clicking?
<div> tag: there seems to be no way to get the point where I clicked.
So, what do you guys recommend? How should I proceed?
Canvas Alternative
You might want to use a canvas and draw your own progress bar element within it.
Here are some canvas progress bar tutorials:
How to create a progress bar with HTML5
A progress bar using HTML5 canvas
Doing it with <progress>
To access the clicked position within a DOMElement, you can proceed with the click event's properties: clientX and clientY (MDN Source), like so:
HTML
<div class="marker" id="StartMarker">^</div>
<div class="marker" id="StopMarker">^</div>
<progress id="progress" value="0" min="0" max="100">0%</progress>
<form id="choice">
<button id="marker1">Beginning marker</button>
<button id="marker2">Ending marker</button>
<input type="hidden" id="markerValue" value="0" />
</form>
JavaScript (not optimized)
document.getElementById('progress').onclick = function (event, element) {
/* Math.floor((event.offsetX / this.offsetWidth) * 100) */
var newProgress = event.offsetX;
document.getElementById('choice').style.display = "block";
document.getElementById('markerValue').setAttribute('value', newProgress);
document.getElementById('marker1').onclick = function (event) {
event.preventDefault();
var newProgress = document.getElementById('markerValue').value;
var progressBar = document.getElementById('progress');
var startMarker = document.getElementById('StartMarker');
var stopMarker = document.getElementById('StopMarker');
var marker = startMarker;
marker.style.display = "block";
startMarker.style.display = "block";
startMarker.offsetTop = (progressBar.offsetTop + progressBar.offsetHeight + 2) + "px";
startMarker.style.left = newProgress + "px";
};
document.getElementById('marker2').onclick = function (event) {
event.preventDefault();
var newProgress = document.getElementById('markerValue').value;
var progressBar = document.getElementById('progress');
var startMarker = document.getElementById('StartMarker');
var stopMarker = document.getElementById('StopMarker');
stopMarker.style.display = "block";
stopMarker.offsetTop = (progressBar.offsetTop + progressBar.offsetHeight + 2) + "px";
stopMarker.style.left = newProgress + "px";
};
};
CSS
.marker {
position:absolute;
top:24px;
left:9px;
display:none;
z-index:8;
font-weight:bold;
text-align:center;
}
#StartMarker {
color: #CF0;
}
#StopMarker {
color:#F00;
}
#choice {
display:none;
}
progress {
display: inline-block;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 300px;
height: 20px;
padding: 3px 3px 2px 3px;
background: #333;
background: -webkit-linear-gradient(#2d2d2d, #444);
background: -moz-linear-gradient(#2d2d2d, #444);
background: -o-linear-gradient(#2d2d2d, #444);
background: linear-gradient(#2d2d2d, #444);
border: 1px solid rgba(0, 0, 0, .5);
border-radius: 15px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .2);
}
Live Demo
Using simple blocks for that is possible. Your layout would look like this (simplified):
HTML
<div class="progressbar">
<div class="bar">
<div class="progress" style="width: 30%;">
</div>
</div>
<div class="markers">
<div class="right" style="width: 70%;">
<div class="marker">
</div>
<div class="left" style="width: 20%;">
<div class="marker">
</div>
</div>
</div>
</div>
</div>
SCSS
.progressbar {
width: 20em;
background: grey;
.bar {
height: 2em;
.progress {
background: blue;
height: 100%;
}
}
.markers {
height: 1em;
background: white;
.right {
height: 100%;
background: red;
.marker {
width: 1em;
height: 100%;
background: green;
position: relative;
float: right;
}
.left {
background: white;
height: 100%;
}
}
}
}
The operations can be quite difficult
jQuery
$('.bar').click(function(e){
$(this).find('.progress').css('width', (e.offsetX / this.offsetWidth)*100+'%');
});
will set the Progressbar properly on clicks.
For the markers though you will need mousedown, mousemove, mouseleave events, since you got 2 of them.
Example
http://jsfiddle.net/JXauW/