i liked this countdown script from http://www.jqueryscript.net/time-clock/Modern-Circular-jQuery-Countdown-Timer-Plugin-Final-Countdown.html and want to use this one to my wordpress website , i read some tutorials about how to put any script in wordpress but i could not understand exactly cause i am newbie , can you help me to do this step by step
now i will show the script author instructions to use this script on normal html page
i want to do these steps also but in wordpress .
Include the necessary javascript files at the end of the page.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js">
</script>
<script type="text/javascript" src="js/kinetic.js"></script>
<script type="text/javascript" src="../jquery.final-countdown.js"></script>
Include the required bootstrap 3 CSS in the head of the page.
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
Create a countdown timer using the html structure like this:
<div class="countdown-container container">
<div class="clock row">
<!-- days -->
<div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_days" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-days type-time">DAYS</p>
</div>
</div>
</div>
</div>
<!-- hours -->
<div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_hours" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-hours type-time">HOURS</p>
</div>
</div>
</div>
</div>
<!-- minutes -->
<div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_minutes" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-minutes type-time">MINUTES</p>
</div>
</div>
</div>
</div>
<!-- seconds -->
<div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
<div class="wrap">
<div class="inner">
<div id="canvas_seconds" class="clock-canvas"></div>
<div class="text">
<p class="val">0</p>
<p class="type-seconds type-time">SECONDS</p>
</div>
</div>
</div>
</div>
</div>
</div>
Add the following CSS snippet to your CSS file.
html, body {
height: 100%;
}
html {
background-image: url('../img/sample.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body {
background-color: rgba(44,62,80 , 0.6 );
background-image: url('../img/pattern.png');
background-position: center;
background-repeat: repeat;
font-family: 'Raleway', 'Arial', sans-serif;
}
.countdown-container {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
.clock-item .inner {
height: 0px;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.clock-canvas {
background-color: rgba(255, 255, 255, .1);
border-radius: 50%;
height: 0px;
padding-bottom: 100%;
}
.text {
color: #fff;
font-size: 30px;
font-weight: bold;
margin-top: -50px;
position: absolute;
top: 50%;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
width: 100%;
}
.text .val {
font-size: 50px;
}
.text .type-time {
font-size: 20px;
}
#media (min-width: 768px) and (max-width: 991px) {
.clock-item {
margin-bottom: 30px;
}
}
#media (max-width: 767px) {
.clock-item {
margin: 0px 30px 30px 30px;
}
}
Initialize the countdown timer and set the start time, end time and current time in the javascript.
<script type="text/javascript">
$('.countdown').final_countdown({
start: '1362139200',
end: '1388461320',
now: '1387461319'
});
</script>
All the default options.
$(document).ready(function() {
$('.countdown').final_countdown({
start: '1362139200',
end: '1388461320',
now: '1387461319',
selectors: {
value_seconds: '.clock-seconds .val',
canvas_seconds: 'canvas_seconds',
value_minutes: '.clock-minutes .val',
canvas_minutes: 'canvas_minutes',
value_hours: '.clock-hours .val',
canvas_hours: 'canvas_hours',
value_days: '.clock-days .val',
canvas_days: 'canvas_days'
},
seconds: {
borderColor: '#7995D5',
borderWidth: '6'
},
minutes: {
borderColor: '#ACC742',
borderWidth: '6'
},
hours: {
borderColor: '#ECEFCB',
borderWidth: '6'
},
days: {
borderColor: '#FF9900',
borderWidth: '6'
}}, function() {
// Finish callback
});
});
To add Javascript and CSS files inside Wordpress, you need to use wp_register_script and wp_register_style functions inside your functions.php theme file.
So let's translate every step:
Include the necessary javascript files at the end of the page.
You don't need to include jquery as it is already included by Wordpress. Download kinetic.js and jquery.final-countdown.js, and add them into your theme folder in a js directory.
Then in your functions.php add the following:
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts() {
wp_enqueue_script('kinetic', get_stylesheet_directory_uri() . '/js/kinetic.js', array('jquery'), '', true);
wp_enqueue_script('countdown', get_stylesheet_directory_uri() . '/js/jquery.final-countdown.js', array('jquery'), '', true);
}
Include the required bootstrap 3 CSS in the head of the page.
In the same function, add the following line:
wp_enqueue_style('bootstrap_css', '//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');
Create a countdown timer using the html structure like this
See where you want to include it. If you want this on all the pages inside header, add this inside header.php in your theme folder.
Add the following CSS snippet to your CSS file.
Just add the code inside your actual stylesheet.
Initialize the countdown timer and set the start time, end time and current time in the javascript.
You could do this in your own js file. Add a countdown.js file in your js folder, and enqueue it like before:
wp_enqueue_script('countdown_script', get_stylesheet_directory_uri() . '/js/countdown.js', array('jquery'), '', true);
And in your countdown.js file:
jQuery(document).ready(function($) {
$('.countdown').final_countdown({
start: '1362139200',
end: '1388461320',
now: '1387461319'
});
});
That way it will prevent any conflict.
Related
I'm working on a Web GIS, and I just learned about JavaScript and Bootstrap.
I want to make a website with 2 columns for text and map (col-4 and col-8). However, col-8 don't display the whole map, and I should scroll to the right and below to see more map. Also, the right-side map looks more extended than the navbar. I've tried to edit the style but it still doesn't work. Here's my html and css code:
HTML
<div class="container-fluid">
<div class="row">
<div class="col-4">
<div>
<h3> About Jakarta Landmark Markers Map</h3>
</div>
</div>
</body>
<link rel="stylesheet" href="./leaflet/leaflet.css">
<div class="col-8">
<body>
<div id="map"></div>
<!-- <script src="index.js"></script>
<script src="./leaflet.ajax.js"></script> -->
</div>
</body>
</html>
CSS
.navbar{
padding: 20px 20px 10px 10px;
background-color: #28a7e9;
transition: all ease 0.4s;
position: relative;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
#map {
flex: 1;
width: 100%;
height: 360px;
position: absolute;
margin:0;
padding:0;
}
I am stuck with a problem adding jQuery to WordPress.
I feel that there is a problem with my code but if I run it normally it works.
$("#newark").click(function() {
$("#mencontoz").toggle();
});
#mencontoz{display:none;}
.column {
float: left;
width: 20%;
padding: 10px;
background-color: #E8EFEF;
height: 392px;
}
/* Style links inside the columns */
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background color on hover */
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.attopicons{direction:rtl;
padding-top:10px;
align-content:center;
margin-top:10px;
font-size:25px;}
.fa-shopping-basket:hover{ color:#E8EFEF;}
.fomo{
text-align:center;
box-sizing: border-box;
width: 20%;
border: solid #fff 4px;
padding: 5px;
margin-left:40%;
margin-top:2%;
color:#fff; }
.fomo:hover{background-color:#E8EFEF;
color:#000;}
.chevron::before {
border-style: solid;
border-width: 0.25em 0.25em 0 0;
content: '';
display: inline-block;
height: 0.90em;
left: 0.30em;
position: relative;
top: 0.30em;
transform: rotate(-45deg);
vertical-align: top;
width: 0.90em;
color:#fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newark">
Shop
</div>
<div id="mencontoz" class="drobdown-content">
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
Link 4
Link 6
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
<div class="column">
<h3>Category 4</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 5</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
I tried to enqueue a file called "your-script.js" which is located in my theme directory /assets/js/your-script.js.
I started the file with the code without any scripts tag.
Here's the PHP code I used to enqueue my script:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'your-script',
get_template_directory_uri() . '/assets/js/your-script.js',
array('jquery')
);
}
But I did not get it working after all.
What I am doing wrong?
You're almost there! You just need to adjust a few things in order to get it to work!
Enqueue jquery too!
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script('jquery'); // Explicitly telling wordpress to load jquery
wp_enqueue_script(
'your-script',
get_template_directory_uri() . '/assets/js/your-script.js',
array('jquery'),
1.5, // put the version of your script here
TRUE // This will make sure that your script will be loaded in the footer
);
}
Get $ from jquery in your javascript file.
jQuery(document).ready($ => {
$("#newark").click(function () {
$("#mencontoz").toggle();
});
});
Remove the cdn link that tries to bring in jquery in your html template.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Use jQuery instead of $. The $ isn't available by default in WordPress environments. This is known as safe mode or compatibility mode.
Read more here: https://wpengine.com/resources/jquery-wordpress/
Note: This may not be your issue - but if it's not, you're not including enough information for anyone to help you most likely.
So I have an index page with some bootstrap code to make the columns resize. I want to have a navbar on the left side and the body for the rest. However, I want to have more than one navbar. I want to create a few categories across the top and depending on which one of those you choose, it will load a navbar and a default body page into the bootstrap columns. It's for a tabletop RPG that I am writing.
So if I have Character Creation, Combat, Magic, Vehicles, etc. across the top and you click on Character Creation then it will load the navbar on the left for character creation and the main body would have a default overview page. If you click a link in the navbar, I want it to change the page on the main body.
I know how to do this the slow way and create a huge number of pages with all the navbars and such already in there. If I update one section, I have to go through and update dozens of pages.
I am trying to teach myself javascript and I know that I can do it in there but I am not sure how.
I can't seem to find an example of this to figure out the coding. I assume that there would be a variable that is being changed by the navbar when you click on the navbar links? Not sure.
This is what I have for the test index page:
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<h1>This is Test 4</h1>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="thumbnail">
<div class="caption">
<div class="load-html" id="Navbar" data-source="navBar.html"></div>
</div>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<div class="thumbnail">
<div class="caption">
<div class="load-html" id="mainBody" data-source="test3.html"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function () {
$(".load-html").each(function () {
$(this).load(this.dataset.source);
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
I have written a basic JS example for you below which will work ok in a small project, however it would not scale well in a larger project. You would be better learning a framework like vue.js and using the router along side it, or just using a router like the one Jon B linked you to in his comment above.
Anyway, something this will get you going. I have included a couple tricks which you will likely use in the future, for example data attributes, foreach loops and querySelectors and updating the dom. Let me know if you have any questions and enjoy Javascript :)
// Get all the nav items
var navItems = document.querySelectorAll(".nav-item");
var sideNavTitelEl = document.getElementById('side-nav-title');
var containersEls = document.querySelectorAll(".content");
// selected will be set to the nav item that was clicked on
var selected = 0;
// Add an event listener to all the nav items
navItems.forEach(addingEventListener);
function addingEventListener(item, index) {
item.addEventListener('click', function() {
// the item is what nav item we clicked on,
// lets set the side nav and main container value to be what was clicked on
sideNavTitelEl.innerHTML = item.innerHTML;
// Now lets update the main page container
selected = parseInt(item.dataset.value);
// We use the displayNone to show / hide a container.
// In a large scale project, you will want to begin to look at using a router, as this will speed
// up your site. For this example, it will work fine as is here.
// Hide and show the correct content on page
containersEls.forEach(hideContent);
});
}
function hideContent(item, index) {
if(index === selected) {
// we want to show this container
item.classList.remove('displayNone');
} else {
// hide the container
item.classList.add('displayNone');
}
}
body {
box-sizing: border-box;;
margin: 0;
padding: 0;
position: relative;
}
.top-nav {
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.logo {
margin-left: 30px;
margin-right: auto;
}
.nav-item {
margin-left: auto;
margin-right: 30px;
}
.nav-item:hover {
cursor: pointer;
}
.side-nav {
width: 200px;
height: calc(100vh - 60px);
position: absolute;
top: 60px;
left: 0;
display: flex;
align-items: center;
flex-direction: column;
}
.main-container {
width: 200px;
height: 200px;
background-color: yellow;
margin-left: 200px;
width: calc(100% - 200px);
height: calc(100vh - 60px);
display: flex;
justify-content: center;
align-items: center;
}
.content {
width: 100%;
height: calc(100vh - 60px);
display: flex;
justify-content: center;
align-items: center;
}
.displayNone {
display: none;
}
.container-one {
background-color: red;
}
.container-two {
background-color: green;
}
.container-three {
background-color: blue;
}
<div class="top-nav">
<p class="logo">Home</p>
<p class="nav-item item-1" data-value='0'>Item 1</p>
<p class="nav-item item-2" data-value='1'>Item 2</p>
<p class="nav-item item-3" data-value='2'>Item 3</p>
</div>
<div class="side-nav">
<p id="side-nav-title">Home</p>
<p>Something</p>
<p>Something</p>
<p>Something</p>
</div>
<div class="main-container">
<div class="content container-one" data-value='1'>
<h1>Container 1</h1>
</div>
<div class="content container-two displayNone" data-value='2'>
<h1>Container 2</h1>
</div>
<div class="content container-three displayNone" data-value='3'>
<h1>Container 3</h1>
</div>
</div>
I am looking to make a slider that holds multple images, its an extremely simple product slider with images that link to their product pages. I want the arrows to be on either side of the slider. I notice that when i also implement my slider it negates the "prettyPhoto" feature i have in the div before.
I am using HTML4 unfortunately. here is a JS fiddle i put together of my slider!
I cant get the arrows to show for some reason... and all the images are on top of eachother. im just not quite sure what im doing wrong with this. i am fairly new at javascript and sliders.
Thanks in advance for all the help.
I need it to look like this:
There a couple of things you must do in order to customize the controls :
You have to have the controls in the first place. By default, the prev/Next controls are are set to false:
navigation: true
Next, we will create the actual arrows for the the controls using the navigationText options to parse the array of strings into real functioning HTML.
navigationText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
]
I almost forgot, when I reviewed your Fiddle, it wasn't functioning at all. There are at least 3 external files that are needed to run Owl Carousel.
Owl Carousel CSS (Optional Recommended):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css">
Owl Carousel Themed CSS (Optional):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css">
Font-Awesome Icons CSS (Optional):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
jQuery (Essential):
<script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
Owl Carousel JS (Essential):
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<!--These 4 external Files are necessary for Owl to function-->
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.theme.css">
-->
<!--This link is both owl CSS files combined into one-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/g/jquery.owlcarousel#1.31(owl.carousel.css+owl.theme.css)">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css">
<!--<script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.owlcarousel/1.31/owl.carousel.min.js"></script>
<style>-->
<!--This tag is both JS files combined-->
<script src="https://cdn.jsdelivr.net/g/jquery#2.2.4,jquery.owlcarousel#1.31"></script>
<style>
/*
| SVG Nav Arrow Style
*/
/* https://gist.github.com/seeRead/11229083 */
.prod-slider-container {
position: relative;
font-family: font-awesome;
}
.owl-buttons {
display: flex;
width: 100%;
justify-content: space-between;
}
.owl-prev,
.owl-next {
position: absolute;
}
i.fa {
cursor: pointer;
position: absolute;
font-size: 60px;
padding-top: 8px;
height: 64px;
width: 72px;
color: rgba(0, 0, 0, .5);
background: rgba(0, 75, 222, .7);
border-radius: 50%;
display: table-cell;
}
.owl-prev,
.owl-next {
background-color: transparent;
border: 0px none transparent;
width: 0px;
height: 0px;
}
.owl-perv {
left: 0;
}
.owl-next {
right: 72px;
}
.item {
outline: 3px dashed grey;
}
</style>
</head>
<body>
<!-- + PRODUCT SLIDERS -->
<div class="prod-slider-container">
<div class="inner-container">
<div class="slider_header_text">
<b>LIKE WHAT YOU SAW?</b> Purchase the products seen in the videos.</div>
</div>
<div class="owl-carousel">
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
<div class="item">
<img src="http://assets.daddario.com/core_landing_tst/images/headstock_tuner.png" alt="Tuner Image">
</div>
</div>
<!--.owl-carousel-->
</div>
<!--.prod-slider-container-->
<script>
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
items: 3,
autoPlay: 3000,
itemsDesktop: [1199, 3],
itemsDesktopSmall: [979, 3],
navigation: true,
navigationText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
]
});
});
</script>
</body>
</html>
I'm very much basic to jquery so im doing a site where when the page loads, i want my Heading on the top jumbotron fadeIn while the buttons below remains constant.
Could someone help me with this.because the buttons stay on top when the page starts and comes back to its position, i mean to the bottom. when the page completely loads and the Heading fadein...
$(document).ready(function () {
$('.main-heading').fadeIn(1000).removeClass('main-heading-hidden');
});
.jumbotron {
background-image: url("googlenownewyork.png");
background-position: center center ;
background-repeat: no-repeat;
background-size: cover;
width:100%;
height: 600px;
margin:0;
padding: 0;
}
.main-heading{
color: white;
text-align: center;
padding-top:140px;
}
.main-heading-hidden{
display: none;
}
.header-button{
text-align: center;
padding-top: 30px;
}
.header-button .btn:hover{
color: white;
background-color: black;
}
<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" ></script>
<script src="metcorp.js" type="text/javascript"></script>
<div class="jumbotron">
<div class="container first-div">
<div class="row main-heading main-heading-hidden">
<h1>Mount Edge Technologies</h1>
<h3></h3>
</div>
<div class="row header-button btn-padding">
<button type="button" class="btn">About Us</button>
<button type="button" class="btn">Get A Quote</button>
</div>
</div>
</div>
display: none removes the header from the layout of the page.
Rather than display, try opacity.
You can also do this with css3 animations fairly easily, avoiding needing to use jquery's fadeIn function at all.
Live Demo
Add this script link to your code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js" type="text/javascript"></script>
And Don't write this code in ready function:
write directly in script
$('.main-heading').fadeIn(2000).removeClass('main-heading-hidden');