Inside my entry header I have entry title (h1 tag) and inside of it I have <sup> tag. This title is coming from WordPress and superscript tag is working but I want to find every "tm" inside every title and capitalize it using js/jquery.
This is my html:
<div class="entry-header">
<h1 class="entry-title">Just Testing Something<sup>TM</sup></h1>
</div>
and my js:
$(document).ready(function(){
$('sup:contains("tm")')
$(this).css({
'cssText': 'text-transform: uppercase !important'
});
});
But this doesn't work. Does anybody know why?
I was working on a "pure JS" solution when #gabriel-lupu answered! :-D
Well, I'm posting here just in case:
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
<style type="text/css">
.myStyle {
text-transform: uppercase;
color: red;
}
</style>
</head>
<body>
<div class="entry-header">
<h1 class="entry-title">Just Testing Something<sup>TM1</sup></h1>
</div>
<div class="entry-header">
<h1 class="entry-title">Just Testing Something<sup>Middle</sup></h1>
</div>
<div class="entry-header">
<h1 class="entry-title">Just Testing Something<sup>TM2</sup></h1>
</div>
<script type="text/javascript">
function setClassOfElemWithText(elem, text, myClass) {
var nodes = document.querySelectorAll(elem);
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (node.textContent.indexOf(text) !== -1) {
node.setAttribute('class', myClass);
}
}
}
setClassOfElemWithText('sup', 'TM', 'myStyle');
</script>
</body>
</html>
Just looked at your question and this works for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Change tm</title>
</head>
<body>
<div class="entry-header">
<h1 class="entry-title">
<sup>copy</sup>Just Testing Something<sup>tm</sup>
</h1>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
<script>
$(document).ready(function () {
$("sup:contains('tm')").css("text-transform", "uppercase");
});
</script>
</body>
</html>
Related
Question:
why I am not seeing the image appear when I click on the checkbox?
Problem:
I get no errors with Inspect Tools. Does anyone see something I am missing? Thank you.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#your_img {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#show_image').on("click", function() {
if ($('#your_img').is(':hidden')) {
$('#your_img').show();
} else {
$('#your_img').hide();
}
});
</script>
</head>
<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height:
485px;width:71px">
</div>
<body>
</body>
</html>
The problem is your click event is getting registered before the checkbox is rendered in dom. Your click event should get registered after the checkbox is rendered in dom.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#your_img {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</head>
<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height:
485px;width:71px">
</div>
<body>
<script type="text/javascript">
$('#show_image').on("click", function() {
if ($('#your_img').is(':hidden')) {
$('#your_img').show();
} else {
$('#your_img').hide();
}
});
</script>
</body>
</html>
I see a clear mistake with the body tag! You opened it after all the div and stuff.
Here's the fixed code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#your_img {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#show_image').on("click", function() {
if ($('#your_img').is(':hidden')) {
$('#your_img').show();
} else {
$('#your_img').hide();
}
});
</script>
</head>
<body>
<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height:
485px;width:71px">
</div>
</body>
</html>
Please add your div elements and logic code in the body section. All the logic code is placed before the ending of the body section. The last script section containing your logic compiles after the dom is ready.
You can use the below code. Hope it helps!!!
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#your_img {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</head>
<body>
<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height:
485px;width:71px">
</div>
<script type="text/javascript">
$('#show_image').on("click", function() {
if ($('#your_img').is(':hidden')) {
$('#your_img').show();
} else {
$('#your_img').hide();
}
});
</script>
</body>
</html>
Sorry for my English at first :-)
I have a web site! And only one page I need to export to PDF.
I use kendo.all.min.js and it works excellent on desktop browsers!
I read documentation and found that mobile browsers not support (((
But i need export only one page .... Would you so kind help me with this problem! Only this part of code i need to work on mobile devices
My JS: (button.js)
var generatePDF = function() {
kendo.drawing.drawDOM($("#formConfirmation")).then(function(group) {
kendo.drawing.pdf.saveAs(group, "Converted PDF.pdf");
});
}
kendo.pdf.defineFont({
"DejaVu Sans" : "/lk-tst/fonts/Sans.ttf",
});
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name = "viewport" content = "width=device-width, maximum-scale = 1, minimum-scale=1" />
<link rel="stylesheet" href="css/site_001.css">
<script src="/lk-tst/pdfmake/jquery.min.js"></script>
<script src="/lk-tst/pdfmake/kendo.all.min.js"></script>
<script src="/lk-tst/pdfmake/button.js"></script>
</head>
<body>
</div>
<div class="content">
<div id="formConfirmation">
<button onclick="generatePDF().open();">Save as PDF</button>
{pers_plan}
</div>
</div>
<div class="footer">
<div class="copyright">
{copyright}
</div>
</div>
{script}
</body>
</html>
I want to animate with animate.css but it doesn't work.this is my code:
$(document).ready(function(){
$('a').hover(function(){
$(this).toggleClass('animated infinite pulse');
});
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Animate.css Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<h1>
<a href='#hi'>Hello World</a>
</h1>
<p>bye</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
if i use another selector like h1 & p it works but why a doesn't work?
Anchor tags are displayed inline by default. You need to change the display property in order for the animation to work. I'd suggest using inline-block. I've provided an inline example:
$(document).ready(function(){
$('a').hover(function(){
$(this).toggleClass('animated infinite pulse');
});
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Animate.css Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<h1>
<a href='#hi'>Hello World</a>
</h1>
<p>bye</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
You can set the a tags to have a style of inline-block
a {
display: inline-block;
}
Updated Example:
$(document).ready(function() {
$('a').hover(function() {
$(this).toggleClass('animated infinite pulse');
});
})
a {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Animate.css Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<h1>
<a href='#hi'>Hello World</a>
</h1>
<p>bye
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
The a tags are inline element so the animation won't work with it. Instead make them inline-block or apply the class to its parent since which are block elements.
$(document).ready(function() {
$('a').hover(function() {
$(this).parent().toggleClass('animated infinite pulse');
});
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<h1>
<a href='#hi'>Hello World</a>
</h1>
<p>bye
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
$('a').hover(function() {
$(this).toggleClass('animated infinite pulse');
});
})
a {
display: inline-block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<h1>
<a href='#hi'>Hello World</a>
</h1>
<p>bye
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
PHP Version 7.0
JQuery Version 3.1.0
You can see that the everything above the code is simply copied and pasted every five seconds rather than refreshing.
The intention is to refresh the include every five seconds.
Website: http://ssmsportal.cf/pages/incomingCalls.php
Code:
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>ServerSide Moderation Services</title>
<link rel="stylesheet" href="../styles/tablesStyles.css" type="text/css" />
<link rel="stylesheet" href="../styles/incomingCallsStyle.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<script src="../scripts/general.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Whats Up?</title>
</head>
<body class="body">
<?php include '../includes/header.php'; ?>
<div class="mainContent">
<div class="logRegArea">
<article class="callsContent" style='padding-left: 0px; padding-right: 0px;'>
<header>
<h2 class="loginArea" style="text-align:center">Incoming Calls:</h2>
</header>
<content>
<div id="login">
<?php include '../includes/incomingCalls.php'; ?>
</div>
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function () {
$('#login').load('../includes/incomingCalls.php')
}, 5000);
});
</script>
</content>
</article>
</div>
</div>
<footer class="mainFooter">
<p>This website was developed by ROBLOX user: wattleman</p>
</footer>
</body>
</html>
That's the normal behavior of the load function.
You should instead try:
$.get("../includes/incomingCalls.php", function(data) {
$("#login").html(data);
});
This code should set an elements height; however no style gets added. Am I missing something obvious?
function setGround() {
document.getElementById('content').style.height = '40px';
}
document.onload = setGround;
The HTML is quite basic:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template</title>
<link rel="stylesheet" type="text/css" href="css/default.css"/>
<link rel="stylesheet" type="text/css" href="css/orange.css"/>
<script type="text/javascript" src="javascript/detect-css.js"></script>
</head>
<body>
<header>
<div id="logo"></div>
</header>
<section id="sidebar"><p>sf </p>
</section>
<section id="content"><p>sf </p>
</section>
</body>
</html>
Thank you for your help!
Don't use document.onload use window.onload instead.
See http://jsfiddle.net/mowglisanu/r6NzE/
you can use this:
function setGround() {
document.getElementById('content').style.height = '40px';
}
document.onload = setGround;
but if you want see changes, you should create border on section tag by use this:
<section id="content" style='border:1px solid fuchsia;' >
<p>sf </p>
</section>
You should use
window.onLoad = setGround;
instead of
document.onload = setGround;
Where have you placed the javascript-code? Is it in the detect-css.js?
This works:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template</title>
<link rel="stylesheet" type="text/css" href="css/default.css"/>
<link rel="stylesheet" type="text/css" href="css/orange.css"/>
<script language="javascript">
function resize(){
document.getElementById("content").style.height='100px';
}
</script>
</head>
<body onload="resize()">
<header><div id="logo"></div></header>
<section id="sidebar"><p>sf </p>
</section>
<section id="content" style="background-color:#CCC; display:block;"><p>sf </p>
</section>
</body>
</html>