I am trying to change a play button to be a pause button using Font Awesome 5. I don't understand why it seems to just not toggle on click. It recognizes the clicks (I tried with an alert, so it recognizes when I press the button itself) but it will just not find the element inside and change it.
This is my code:
$(".startButton").click(function() {
$(this).find("i").removeClass("fa-play-circle").addClass("fa-pause-circle")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<div id="timerWrapper">
<div class="valuesWrapper">
<div class="values"> 00:00:00</div>
</div>
<div id="buttonWrapper">
<button class="startButton"><i class="fas fa-play-circle"></i></button>
<button class="stopButton">Stop</button>
<button class="clearButton">Clear</button>
</div>
</div>
The main issue with your code is that you are using Font Awesome 5 that changes the i element to svg so your code won't work.
You have two solution:
The easiest one is to use the CSS version of Font Awesome 5 and you will be able to keep your code as it is:
$(".startButton").click(function() {
$(this).find("i").removeClass("fa-play-circle").addClass("fa-pause-circle");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet">
<div id="timerWrapper">
<div class="valuesWrapper">
<div class="values"> 00:00:00</div>
</div>
<div id="buttonWrapper">
<button class="startButton"><i class="fas fa-play-circle"></i></button>
<button class="stopButton">Stop</button>
<button class="clearButton">Clear</button>
</div>
</div>
The other solution is to change your code in order to handle the SVG. So you may change the data-icon attribute of the generated svg with the needed icon:
$(".startButton").on('click',function() {
$(this).find('svg').attr("data-icon",'pause-circle');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
<div id="timerWrapper">
<div class="valuesWrapper">
<div class="values"> 00:00:00</div>
</div>
<div id="buttonWrapper">
<button class="startButton"><i class="fas fa-play-circle"></i></button>
<button class="stopButton">Stop</button>
<button class="clearButton">Clear</button>
</div>
</div>
Related
<div class="navbar">
<a>
<div class="grid__item theme-1">
<button class="action"></button>
<button class="particles-button">Home</button>
</div>
</a>
</div>
In this Effect applied how can I redirect it after the effect completed?
Just add an onclick event to the button:
<button onclick="location.href = 'www.anysite.com';" id="buttonID" class="particles-button" >Home</button>
and other way is
<button class="particles-button" id="buttonID" >Home</button>
<script type="text/javascript">
document.getElementById("buttonID").onclick = function () {
location.href = "www.anysite.com";
};
</script>
It is better to use a <a> tag for webpage indirect, because:
It doesn't require JavaScript
It is easier to implement accessibility features
It makes the HTML code more readable
<div class="navbar">
<a>
<div class="grid__item theme-1">
Click Here
<button class="particles-button">Home</button>
</div>
</a>
</div>
<button onclick="window.location.href='https://google.com'">Go to link</button>
Let me explain,
I'm making a page about everything I'm learning in PHP. I also want to add a great deal of interactivity to this page. For example, I want to add a button displaying more information (Hidden) and have a jQuery slide down do the job. However, I don't want to line a million and one lines of code making the file obsolete.
I'm trying to make a web page that has my buttons performing the same actions in different paragraphs. I want to know if there's a way to implement a function in order to not type 1000 lines of code to keep up with all the buttons and paragraphs. Please help me, thank you in advance.
<?php
$line_break = '<b><span class="bg-light m-0 p-0">/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ </span></b>';
?>
<!doctype html>
<html lang="en">
<head>
<!-- LOGO -->
<link rel="shortcut icon" type="image/x-icon" href="../imgs/logotree.png" />
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="../js/jquery-3.2.1.min.js"></script>
<title>Treehoose</title>
</head>
<body class="bg-secondary">
<div class="jumbotron bg-dark text-light text-center">
<h1 class="display-4 ">5/<span class="text-primary">23</span>/18</h1>
<p class="lead text-success p-0 m-0">PHP Arrays & Control Structures</p>
<hr class="my-4">
<p><b>Loops & Structuring </b></p>
<p class="lead">
<a class="btn btn-outline-success btn-lg" id="information_1" role="button">Show More Information</a>
</p>
<p id="extra_1" style="display: hidden;">extra information that may be less important, yet necesary</p>
</div>
<?php echo $line_break;?>
<div class="jumbotron bg-dark text-light text-center">
<h1 class="display-4 ">5/<span class="text-primary">24</span>/18</h1>
<p class="lead text-success p-0 m-0">PHP Arrays & Control Structures</p>
<hr class="my-4">
<p><b>Loops & Structuring </b></p>
<p class="lead">
<a class="btn btn-outline-success btn-lg" id="information_1" role="button">Show More Information</a>
</p>
<p id="extra_1" style="display: hidden;">extra information that may be less important, yet necesary</p>
</div>
<?php echo $line_break;?>
<!-- jQuery -->
<script>
$(document).ready(function(){
$('#extra_1').hide();
$("#information_1").dblclick(function(){
$("#extra_1").slideUp();
});
$("#information_1").click(function(){
$("#extra_1").slideDown();
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
You could add a data-target attribute to your button that would be the id of the p tag you want to slide up or down.
<p class="lead">
<a data-target="#extra_1" class="btn btn-outline-success btn-lg" id="information_1" role="button">Show More Information</a>
</p>
<p id="extra_1" style="display: none;">extra information that may be less important, yet necesary</p>
But first you need to make sure you do not have duplicate ids, which you currently do... so fix that first. Also, hidden is not a valid value for the css display property... I think you mean display: none; (you are probably confused with visibility: hidden;)
Once you get you ids fix you can implement the following jquery for every section you want to toggle:
$(document).ready(function() {
$('.lead a').on('click', function(e) {
e.preventDefault();
var target = $(this).data('target');
$(target).slideDown();
});
$('.lead a').on('dblclick', function(e) {
e.preventDefault();
var target = $(this).data('target');
$(target).slideUp();
});
});
$(document).ready(function() {
$('.lead a').on('click', function(e) {
e.preventDefault();
var target = $(this).data('target');
$(target).slideDown();
});
$('.lead a').on('dblclick', function(e) {
e.preventDefault();
var target = $(this).data('target');
$(target).slideUp();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="jumbotron bg-dark text-light text-center">
<h1 class="display-4 ">5/<span class="text-primary">23</span>/18</h1>
<p class="lead text-success p-0 m-0">PHP Arrays & Control Structures</p>
<hr class="my-4">
<p><b>Loops & Structuring </b></p>
<p class="lead">
<a class="btn btn-outline-success btn-lg" id="information_1" role="button" data-target="#extra_1">Show More Information</a>
</p>
<p id="extra_1" style="display: none;">extra information that may be less important, yet necesary</p>
</div>
<div class="jumbotron bg-dark text-light text-center">
<h1 class="display-4 ">5/<span class="text-primary">24</span>/18</h1>
<p class="lead text-success p-0 m-0">PHP Arrays & Control Structures</p>
<hr class="my-4">
<p><b>Loops & Structuring </b></p>
<p class="lead">
<a class="btn btn-outline-success btn-lg" id="information_2" role="button" data-target="#extra_2">Show More Information</a>
</p>
<p id="extra_2" style="display: none;">extra information that may be less important, yet necesary</p>
</div>
For starters, you have duplicate id's (for extra_1 and information_1) in your code. Never ever put duplicate ID's on the same page. I suspect you meant them to be unique, like extra_1, extra_2, and you want each of them opened/closed individually with the information button in the same jumbotron.
You could target elements using id attribute that starts with xxx [id^="xxx"]. For each button get the parent then next sibling.
$(document).ready(function(){
$('[id^="extra"]').hide(); // or use css to hide by default?
$('[id^="information"]').dblclick(function(){
$(this).parent().next().slideUp();
});
$('[id^="information"]').click(function(){
$(this).parent().next().slideDown();
});
});
Alternatively you could use class selectors, eg .btn-outline-success for the buttons.
I am a beginner at this stuff, and right now I am working on a project. To keep it simple, my project right now has a sidebar that has four different options. (Schedule, progress, add course, drop course). I want users to be able to click on this options (after expanding the side bar) and display the information from which ever of the four they clicked on. I want this information to display on the same page, not link to another page. I have done this before by having invisible pages and using a showpage function. This time around though it is coded differently with classes, and I'm not sure how to go about this. Any help is appreciated!
Note: I don't have any data for these 4 pages right now - I just want to set it up so they function right now. To keep it short: I'm asking what code I need and where to display information (Ex: "Here is your schedule") on the same page when Schedule is clicked.
<!doctype html>
<html>
<head>
<title>STUDENT SCHEDULER APP</title>
<link rel="stylesheet" type="text/css" href="ssaStyles.css">
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function() {
console.log("jQuery was loaded");
});
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-left");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
</script>
</head>
<body>
<div id="header">
<h1>Welcome!</h1>
</div>
<div class="nav-right visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
<main>
<nav>
<div class="nav-right hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Schedule
</li>
<li class="sidebar-item">Progress
</li>
<li class="sidebar-item">Add a course
</li>
<li class="sidebar-item"><a href="#" class="sidebar-anchor">Drop a
course</a></li>
</ul>
</div>
</body>
</html>
Its really simple all you have to do is create sections and these sections will be linked to your link, let me show you how.
<html>
<head>
<title>Example</title>
</head>
<body>
<!--create the links but add a # sign before you give them the section names-->
<div class="side-nav">
About
Contact
</div>
<!--Create an id with the same name as the link href source but leave out the # sign-->
<!--this is the about section-->
<div id="about">
<h1>Hello</h1>
</div>
<!--this is the contact section-->
<div id="contact">
<p> done</p>
</div>
</body>
</html>
the name you give your link should be the same as the div id name, and you will have to disable overflow in CSS if you want to....hope it made sense, if you need more help just ask.
I am working on this demo. I am trying to find out why the HTML disappears after using the second button.
As long as you only click on btn #from-content-1 or only on #from-content-2 every thing is fine but if you click on #from-content-1 and then on #from-content-2 and back to the #from-content-1 again, the content disappears!
Here is the code which I have:
<div class="row">
<div class="container">
<div id="dest">Here is the Destination</div>
</div>
</div>
<div class="sr-only">
<div id="content-1">This Is From Content 1</div>
<div id="content-2">This Is From Content 2</div>
</div>
<button class="btn btn-default" id="from-content-1">From Content 1</button>
<button class="btn btn-default" id="from-content-2">From Content 2</button>
and js script is
<script>
$("#from-content-1").on("click",function(){
$("#dest").html($('#content-1'));
});
$("#from-content-2").on("click",function(){
$("#dest").html($('#content-2'));
});
</script>
How can I fix this?
You move the nodes! Do that instead:
<script>
$("#from-content-1").on("click",function(){
$("#dest").html($('#content-1').html());
});
$("#from-content-2").on("click",function(){
$("#dest").html($('#content-2').html());
});
</script>
$("#dest").html($('#content-1')); should be $("#dest").html($('#content-1').html()); and $("#dest").html($('#content-2')); should be $("#dest").html($('#content-2').html());
$("#from-content-1").on("click",function(){
$("#dest").html($('#content-1').html());
});
$("#from-content-2").on("click",function(){
$("#dest").html($('#content-2').html());
});
This is what the code looks like.
<head>
<link type="text/css" rel="stylesheet" href="C:\Users\User\Desktop\css1.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="C:\Users\User\Desktop\js.js"></script>
</head>
<body>
<div id="header_wrap">
<div id="header">
<div id="logo">
LOGO
</div>
<div class="nav">
<a href="http://www.google.se">
Stuff
</a>
<a href="javascript:void(0)">
Other stuff
</a>
<a href="javascript:void(0)">
More stuff
</a>
</div>
<div class="mobile_nav"></div>
<div class="mobile_nav_menu">
<div class="mobile_menu">
<span>Stuff</span>
<span>Other stuff</span>
<span>More stuff</span>
</div>
<div class="mobile_close">
</div>
</div>
</div>
</div>
<div class="image_container">
<div class="inner_content" id="slide1">
<h2>
CONTENTS
</h2>
</div>
<a class="button" href="javascript:void(0)"></a>
</div>
</body>
the .js file contains this code
setTimeout(function(){
$("#slide1").css('opacity', '1');
},800);
setInterval(function(){
$(".button").toggleClass("opacity");
},1000);
//Navigation
$(".mobile_nav").click(function() {
$(".mobile_nav_menu").animate({right: 0});
})
$(".mobile_close").click(function() {
$(".mobile_nav_menu").animate({right: -270});
})
Can anyone help me out with what I'm doing wrong and how it can be fixed?
Thank you! /AJ
UPDATE: The .js loads (tried the alert function), but does not fill the function it should. Original pen can be found on http://codepen.io/yuriylianguzov/pen/qjwEe
One of the problems is that you are trying to reference a javascript file from a physical file path, and not a url (or relative path). You can't use your harddrive path in an html file to include javascript.
<script src="C:\Users\User\Desktop\js.js"></script>
If your javascript is in the same folder as your html, try something like this:
<script src="js.js"></script>
I'm not exactly sure what the expected behavior for the JavaScript is, because it appears to be doing what it is intended to do. If you look at the DOM in the codepen link that you provided the element with the id of 'slide1' has its opacity style set to 1 (see below) and the anchor tag with class of 'button' is getting the class 'opacity' toggled on and off every second (not depicted below, but you can see it happening in firebug).
<div class="image_container">
<div id="slide1" class="inner_content" style="opacity: 1;">
<h2>
We are who we choose to be.
</h2>
</div>
</div>
The other two click handler's are targeting empty elements (the element with class of 'mobile_nav', and the element with class of 'mobile_close') so they aren't going to do anything.
$(".mobile_nav").click(function() {
$(".mobile_nav_menu").animate({right: 0});
})
$(".mobile_close").click(function() {
$(".mobile_nav_menu").animate({right: -270});
})
<div class="mobile_nav"></div>
<div class="mobile_nav_menu">
<div class="mobile_menu">
<span>Projects</span>
<span>Profile</span>
<span>Contact</span>
</div>
<div class="mobile_close"></div>
</div>
I hope this helps!
1) Some of the elements your javascript is acting on don't have any content
2) Change the line $(".mobile_nav_menu").animate({right: 0}); to: $(".mobile_nav_menu").animate({"right": "0"}); and do the same with the other one, though it won't have any functionality, really.
3) your class mobile_nav_menu needs to have css that says position:relative for the attribute "right" to work.
4) I'd recommend moving your mobile_close div outside the mobile_nav_menu div so it doesn't move when you click it
If anyone has stuff to add, please do so.