I have a text that I would like to change ("Happy Clients" in the code below). I tried to find the text on the WP dashboard and in the template editor but with no luck, how can i locate the class so I'll be able to change the text?
<div class="_slider_shadow"></div>
</div><!-- /.carousel -->
<div class="count"><div class="count-info"><strong id="targetElem">0</strong><span class="count-description"> Happy Clients</span></div></div>
<script type="text/javascript">
EDIT
I found a file that contains the following code that is related to text that i want to change:
<div class="count"><div class="count-info"><strong id="targetElem">0</strong><span class="count-description"><?php the_field('text_for_count'); ?></span></div></div>
<script type="text/javascript">
var endVal = <?php the_field('count'); ?>;
var numAnim = new CountUp("targetElem", 0, endVal - 300, 0 , );
numAnim.start(function() {
numAnim.update(endVal);
});
</script>
You can install Query Monitor plugin. It has a section called Template which shows all template files that have been used to load the page. That should help you to find what you need.
Example output
Using jQuery you can do this :)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".count-description").text("No Clients");
});
});
</script>
</head>
<body>
<button>Click me</button>
<div class="enigma_slider_shadow"></div>
</div><!-- /.carousel -->
<div class="count"><div class="count-info"><strong id="targetElem">0</strong><span class="count-description"> Happy Clients</span></div></div>
</body>
</html>
Related
I tried to use a web library, and now I use it locally (also NPM installed it), but the function on button click doesn't give me any response. The console log is also completely empty. No more ideas on how to make it work.
Here is my code:
<!doctype html>
<head>
<link rel="stylesheet" href="/css/app.css">
<script src="{{asset('js/jquery.min.js')}}"></script>
</head>
<body>
#include('inc.navbar')
<div class = 'container'>
<div class = 'row'>
<div class = 'col-md-8 col-lg-8' >
#include('inc.messages')
#yeld('content')
<button class = 'btn' id = 'test1'>SES</button>
</div>
</div>
</div>
</body>
<footer id='footer' class = 'text-center'>
<p>Copyright 2018 © FitnessBook </p>
</footer>
#section('script')
<script>
$( "#test1" ).click(function(){
alert( "Handler for .click() called.");
});
</script>
#endsection
</html>
You have to add your footer tag and script inside body of HTML document.
and replace your script tag with below code :
<script>
$(document).on('click','#test1',function(){
alert("Hello !!!");
});
<script>
I found the solution. Removing #section('script') and adding the script src of cdn solved the problem.
I tried to do a simple slider but that did not work, so i am copying one of code cademy, but it still qont work.
I have used 4 different browsers all have the same problem, i can type in the box but wont post, and show below.
PLEASE HELP?
Html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link type='text/css' href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class="posts">
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
AMMENDED
script.js
$(document).ready() {
$('.btn').click(function() {
var post = $('.status-box').val()
$('<li>').text(post).prependTo('posts');
});
};
THANK YOU ALL, this has been corrected and it now works :)
val is a jQuery function ... you need () to invoke it so it returns the value of element. As your code stands now you are trying to set a function object as text.
You are also using incorrect selectors $('btn') and $('status-box') which are looking for non existent tags <btn> and <status-box>.
Add dot prefix for both to represent class:
$('.btn') and $('.status-box')
As well as what's been mentioned in the other answer, I don't believe your main method is ever called. If it isn't called then the event handler isn't going to be attached.
The main method would be easier set up via jquery, so instead of:
var main = function() {
$('btn').click(function() {
var post = $('status-box').val
$('<li>').text(post).prependTo('.posts');
});
}
Just do:
$(function() {
$('btn').click(function() {
var post = $('status-box').val
$('<li>').text(post).prependTo('.posts');
});
});
Alternatively you could adjust your body tag as follows:
<body onload="main()">
Here is the HTML:
<html>
<head>
<Script type = "text/javascript" src = "CprMdlrSrch.js"></Script>
<link type="text/css"rel="stylesheet"href="CprMdlrSrch.css"/>
</head>
<body>
<div id="main_box">
<p id="instructions"><strong>Please enter a part number to search.</strong></p>
<input id="part_num_search" type="text" name="searchPhrase">
<button id="search_button" type="button" value="button"> <strong>Search</strong></button>
<div id="results"></div>
<script type="text/javascript">
</div>
</body>
</html>
Here is the Javascript:
$(document).ready(function(){
$("#search_button").toggle(function() {
$("#part_num_search").fadeIn("slow");
},
$("#part_num_search").fadeOut("slow");
});
});
I am just unsure what I am doing wrong. I am really just trying to out the button to make sure I am on the right track.
thanks!
-Dustin
I'm not sure you understand how to use the toggle command. Please check out the API documentation: http://api.jquery.com/toggle/
For fade toggling, try .fadeToggle(), which started becoming available since JQuery 1.4.4.
http://api.jquery.com/fadeToggle/
Try something like this:
$(document).ready(function(){
$("#search_button").click(function() {
$("#part_num_search").fadeToggle("slow");
});
});
You'll be better served using http://api.jquery.com/fadetoggle/.
$("#search_button").click(function() {
$("#part_num_search").fadeToggle("slow");
});
I have created two simple pages as a test.
The first, PIG_TEST.htm, outputs a simple page containing 3 <DIV> sections; Header, Menu and Main.
The Menu section contains a link which, when selected should load the second page, PIG_TEST_1-php, into the <DIV> with the id of 'mainx', on the main page via a jquery click function.
However, when selected it just replaces the original page.
Seems like it is not finding or seeing the "mainx" div.
<!DOCTYPE html>
<html lang='en'><head>
</head>
<body style='background-color:#eeeecc'>
<div style='background-color:#6495ed; height: 110px;'>
<div class='col-md-12 text-center'>Header TEST PAGE
</div>
</div>
<div style='background-color:#ffaaaa; height: 150px;'>
<div class='col-md-12 text-center'>Menu TEST PAGE
<ul>
<li><a href='PIG_TEST_1.php' id='but1'>Item 1</a></li>
</ul>
</div>
</div>
<div id='mainx' style='background-color:#cccccc; height: 300px;'>
Main TEST PAGE
</div>
<script type='text/javascript' charset='utf-8'>
(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>
<script src='js/jquery-1.8.0.min.js'></script>
</body></html>
The PIG_TEST_1.php is:
<?php
echo "<body>";
echo " THIS IS A DUMMY PAGE <br></p>";
echo "</body>";
?>
I've tried putting the call to "jquery-1.8.0.min.js" just after the <body> but it stll fails.
Sorry, I'm new to jquery, any help would be appreciated.
You should move the jquery <script> tag outside of the other one (you have it nested), and you also need a $ symbol before (document).ready:
<script src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>
There are lot of problems with your code!
<script> cannot be contained inside another <script> tag.
Load jQuery before calling the function.
Add $ before (document).
So your code should be:
<script src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>
I'm trying to slide the info but it doesn't work. Here is my code:
<div Class="article">
<div id="ebook1">Ebook1</div>
<div id="infoOfEbook1">
Download The Ebook1 From Here.
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.js">
$(document).ready(function(){
$("#ebook1").click(function(){
$("#infoOfEbook1").slideToggle("slow");
});
});
</script>
You don't put your code inside the script tag with the src. Change it to this:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ebook1").click(function(){
$("#infoOfEbook1").slideToggle("slow");
});
});
</script>