My jQuery Won't Work on my Webpage - javascript

All of my HTML and CSS code works fine, and my script is properly linked (or so I assume), but I can't get the script to load or do any actions I've coded. Here's my HTML, CSS, and JS code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Highlights</title>
<link rel='stylesheet' type='text/css' href='testwebcss.css'/>
<script type='text/javascript' src='testwebjs.js'></script>
</head>
<body>
<div id="title" class="highlighted">I'm highlighted!</div>
<div id="text">Highlight me, too!</div>
</body>
</html>
CSS
#title {
background-color: #C02942;
border-radius: 5px;
text-align: center;
font-family: Verdana, Arial, Sans-Serif;
color: #FFFFFF;
width: 200px;
height: 25px;
}
#text {
background-color: #0B486B;
border-radius: 5px;
text-align: center;
font-family: Vivaldi, Cursive;
color: #FFFFFF;
width: 200px;
height: 25px;
opacity: 0.5;
}
.highlighted {
-webkit-box-shadow: 0 0 8px #FFD700;
-moz-box-shadow: 0 0 8px #FFD700;
box-shadow: 0 0 8px #FFD700;
cursor:pointer;
}
JS
$(document).ready(function(){
$('#text').mouseenter(function(){
$(this).fadeTo('fast', 1);
});
$('#text').mouseleave(function(){
$(this).fadeTo('fast', 0.5);
});
});
So I don't understand why it's not working. As you can see, the script simply doubles the opacity when the mouse enters the perimeter of #text. So, why is nothing working. I got this from the console:
Uncaught ReferenceError: $ is not defined

Add this to the HTML head (before you include your script):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

You have to add more jQuery
<!DOCTYPE html>
<html>
<head>
<title>Highlights</title>
<link rel='stylesheet' type='text/css' href='testwebcss.css'/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='testwebjs.js'></script>
</head>
<body>
<div id="title" class="highlighted">I'm highlighted!</div>
<div id="text">Highlight me, too!</div>
</body>
</html>

Related

How grow a text area height on top when it overflows

I found the code below but the text area height grows at the bottom.
backspace increases value of scrollheight
How could I grow it from top to up direction?
It is for a chat application I am building, and this would be the typing area.
I spent some time on the net looking for the solution but it apparently is not that easy.
Edit: Looking at how the snipped behaves here in stackoverflow, I am thinking now that it may be related with how the parent wrapper is set on css, but still do not know how to fix it.
document.querySelectorAll('textarea').forEach( element => {
element.style.height = `${element.scrollHeight}px`;
element.addEventListener('input', event => {
event.target.style.height = 'auto';
event.target.style.height = `${event.target.scrollHeight}px`;
})
})
/* style.css */
main, header {
max-width: 600px;
margin: auto;
}
textarea {
font-family: 'Times New Roman', Times, serif;
font-size: 1em;
border-style: hidden;
outline: none;
padding: 0.1em;
margin: none;
resize: none;
width: 80%;
border-radius: 0.2em;
border: 1px solid #EEE;
}
textarea:focus {
border: 1px solid #DDD;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width" , initial-scale="1.0" />
<title>Data Management</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="module" src="script.js" defer></script>
</head>
<body>
<header>
<h1>Growing textarea</h1>
</header>
<main>
<p><textarea class="data p" id="article" ></textarea></p>
</main>
</body>
</html>
For expanding the textarea to the top you can use position:absolute and bottom: 0 in a container with position:relative. This way the text-area will always stick to the bottom of the container with 0 margin.
Also, you can set the default rows of the textarea to 1 to look like a text input when the text fits inside one line:
<textarea rows="1"></textarea>
document.querySelectorAll('textarea').forEach( element => {
element.style.height = `${element.scrollHeight}px`;
element.addEventListener('input', event => {
event.target.style.height = 'auto';
event.target.style.height = `${event.target.scrollHeight}px`;
})
})
/* style.css */
main, header {
max-width: 600px;
margin: auto;
}
textarea {
font-family: 'Times New Roman', Times, serif;
font-size: 1em;
border-style: hidden;
outline: none;
padding: 0.1em;
margin: none;
resize: none;
width: 80%;
border-radius: 0.2em;
border: 1px solid #EEE;
position:absolute;
bottom:0
}
main{
position: relative;
}
textarea:focus {
border: 1px solid #DDD;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width" , initial-scale="1.0" />
<title>Data Management</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="module" src="script.js" defer></script>
</head>
<body>
<header>
<h1>Growing textarea</h1>
</header>
<main>
<textarea rows="1" class="data p" id="article"></textarea>
</main>
</body>
</html>

make plugin to embed video player on wordpress

I want from anyone to do plugin WordPress that add my special link video to post.
I have this page that is work good and I want to change it to do as plugin wordpress.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ace Stream</title>
<style type="text/css">
* {
font-family: Arial;
}
body {
background-color: #222
}
.modal {
background-color:#fff;
display:none;
width: 500px;
padding:15px;
text-align:left;
border:2px solid #333;
font-size: 12px;
opacity:0.8;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc;
}
.modal input {
font-size: 12px;
}
.button-long {
display: inline-block;
background: transparent url(http://static.torrentstream.org/htmlplayer/img/sprite-player-black.png) no-repeat 100% -129px;
height: 27px;
line-height: 24px;
cursor: pointer;
position: relative;
margin-left: 17px;
top: -3px;
padding-right: 12px;
width: 115px;
text-align: center;
color: #fff;
text-decoration: none;
font-size: 14px;
}
.button-long b {
background: transparent url(http://static.torrentstream.org/htmlplayer/img/sprite-player-black.png) no-repeat -579px -129px;
height: 27px;
width: 17px;
position: absolute;
left: -17px;
}
</style>
<!-- black style -->
<link type="text/css" rel="stylesheet" href="http://static.torrentstream.org/jsapi/css/ts-controls-black.css" />
<!-- api files -->
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/ts/core.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery.jscrollpane.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery.scrollText.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/jquery/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/cufon/cufon.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/cufon/a_LCDNova_400.font.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/ts/player.js"></script>
<script type="text/javascript" src="http://static.torrentstream.org/jsapi/js/lib/ts/controls.js"></script>
<script type="text/javascript">
function init() {
var useInternalControls = true;
var controls = new TorrentStream.Controls("tsplayer", {
style: useInternalControls ? "internal" : "ts-black",
debug: true
});
try {
var player = new TorrentStream.Player(controls.getPluginContainer(), {
debug: true,
useInternalControls: useInternalControls,
bgColor: "#000000",
fontColor: "#ffffff",
onLoad: function() {
this.registerEventHandler(controls);
controls.attachPlayer(this);
try {
var p = this;
this.loadPlayer("f47d788d767eaec24320f265e9c0cec5307d94ab", {autoplay: true});
}
catch(e) {
console.log("init: " + e);
}
}
});
}
catch(e) {
controls.onSystemMessage(e);
}
}
</script>
</head>
<body>
<div id="player_container" style="background-color: #000; width: 800px; height: 483px; margin: 0 auto 0 auto;">
<div id="tsplayer" style="width: 100%; height: 100%; color: #fff; text-align: center;">
<div style="padding-top: 232px; background-color: #000000;">Подождите, идет загрузка плеера...</div>
</div>
</div>
<script type="text/javascript">
init();
</script>
</body>
</html>​
when add these code in this page to my post on wordpress is work good but it is difficult to add all this codes with all new posts
just my changeable with all my new post is this "f47d788d767eaec24320f265e9c0cec5307d94ab"
I want the plugin to use above codes when add [/tv_vid]link[/tv_vid] to my post
for example
[/tv_vid]f47d788d767eaec24320f265e9c0cec5307d94ab[/tv_vid]
Also I want the height and width of player suitable with browsers and mobile devises
I don't know any programming language.
please help me and thank you for all.

How i get external CSS value From external JS file?

I wanna to get element background value from javascript file.
I has three files -
html.html
css.css
js.js
html.html
<!DOCTYPE html>
<html>
<head>
<title> I'm Button! </title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div class="myBlock" onclick="heyJS()"></div>
</body>
</html>
css.css
.myBlock {
width: 300px; max-width: 100%;
height: 100px; max-height: 100%;
margin: 0 auto; margin-top: 100px;
font-size: 50px; font-weight: lighter; font-style: normal; text-align: center;
line-height: 100px; position: relative;
background-color: #83DF31;
}
js.js
function heyJS() {
alert(document.getElementsByClassName('myBlock')[0].style.backgroundColor);
}
After running the scrpit,I only get blank alert box.
How can i get div background value ?
You can replace your alert() with this
alert(window.getComputedStyle(document.getElementById('myBlock')).backgroundColor);
or
alert(window.getComputedStyle(document.getElementsByClassName('myBlock')[0]).backgroundColor);
And modify your html a little bit if you using the first one.
<div id="myBlock" class="myBlock" onclick="heyJS()"></div>
Try the following:
window.getComputedStyle(document.querySelector(".myblock")).getPropertyValue("background-color");

Jquery autocomplete - doesn't highlight items on hover and arrows don't work

I've been wrestling with Jquery's autocomplete for a couple days now. I now have it properly displaying a JSON list of dictionaries from a page (/jsontest) using this:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src=/static/js/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="static/css/jquery-ui-1.10.3.custom.css">
<link rel="stylesheet" type="text/css" href="/static/css/autocomplete2.css">
<script>
$(function() {
$( "#tags" ).autocomplete({
source: '/jsontest',
minchar: 2,
delay: 500,
select: function (event, ui) {
window.location = ui.item.url;}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Search: </label>
<input id="tags" />
</div>
</body>
</html>
My autocomplete.css file looks like this:
#tags {
border-radius: 0px;
background: white;
color: #96f226;
border: 1px solid #454545;
height: 0 0 30px;
}
#tags:hover {
background: white; /*#656565*/
}
#tags:active {
box-shadow: 0 0 60px #96f226
}
#tags:focus {
box-shadow: 0 0 30px #96f226
}
.ui-tooltip {
background: #4a4a4a;
color: #96f226;
border: 2px solid #454545;
border-radius: 0px;
box-shadow: 0 0
}
.ui-autocomplete {
background: #4a4a4a;
border-radius: 0px;
}
.ui-autocomplete.source:hover {
background: #454545;
}
.ui-menu .ui-menu-item a{
color: red; /*#96f226;*/
border-radius: 0px;
border: 1px solid #454545;
}
I got a lot of this from this jsfiddle example, but while there the arrow keys work fine and the highlighting works, on my page neither do. Can anyone help?
Thanks a lot,
Alex
Thanks to user2187738, I was able to narrow it down to the jquery file I was using. Don't know if I messed it up or what, but it worked when I changed this:
<script type="text/javascript" src=/static/js/jquery-latest.js"></script>
to this:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
The arrows behaviour is regulated by the "focus" option
focus: function(event) {
event.preventDefault();
};
this code DISABLES the arrow keys. Given that you don't have this code, they should work fine.
However, I notice that you are using minChar while, if you are using jQueryUI, it should be "minLength" instead!

How Can I Change The Style Of A Div On Mousedown?, or any other event for that matter…

But it doesn't work. You can see I'm trying to change the class of the div containing season.png onmousedown and revert it onmouseup.
What am I missing?
Thanks.
Mike
It's working just fine. There is nothing wrong with the code that you posted, so if you can't see it there has to be something wrong with your css.
I used this to test the code:
<html>
<head>
<title>Test</title>
<style>
.winter { border: 1px solid blue; }
.spring { background: yellow; }
.summer { background: green; }
</style>
</head>
<body>
<div class="winter spring" onmousedown="this.className='winter summer'" onmouseup="this.className='winter spring'">
<img src="Resources/season.png" />
</div>
</body>
</html>
It works for me so I guess you need to run some checks on your code. Make sure your css is included.
Post the complete code you are using so we can look for errors.
This is the code I used:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onmouseevents on div</title>
<style type="text/css">
body
{
background-color: #FFF;
color: #000;
}
.page
{
margin: 10px auto;
width: 640px;
}
.winter
{
background-color: cyan;
}
.spring
{
color: magenta;
}
.summer
{
color: yellow;
}
</style>
</head>
<body>
<div class="page">
<div class="winter spring" onmousedown="this.className='winter summer'" onmouseup="this.className='winter spring'">
Cats!
</div>
</div>
</body>
</html>
As an alternative - I have used the hover pseudoselector for this.
Here's a personal example:
.sidebar ul.sidebuttons li a
{
font: bold italic x-large/1.1 trebuchet ms,verdana,sans-serif;
display: block; /* effect should be in a new box not inline */
text-decoration: none; /* turn off link underlining */
color: yellow;
background: black url(sidebar_off.png) no-repeat center;
padding: 10px 10px 10px 5px;
margin: 0px 0px 20px 0px;
border: white outset;
border-width: 2px 2px 2px 0px;
text-align: right;
text-transform: lowercase;
}
.sidebar ul.sidebuttons li a:hover
{
background: yellow url(sidebar_on.png) no-repeat center;
color: black;
border: black inset;
text-decoration: none;
border-width: 2px 2px 2px 0px;
}
The HTML looks like:
<div class="sidebar">
<ul class="sidebuttons">
<li>Go Somewhere</li>
If you're having trouble, try Firefox Web Developer add-on or something similar to check the style information on that part of the page. It might not be triggering what you think it should be triggering.
<style>
.summer{ background-color:red;}
.spring{ background-color:blue;}
.aa{ font-size:18px;}
.bb{ font-size:36px;}
</style>
<div class="aa spring" onmousedown="this.className='summer aa'" onmouseup="this.className='spring bb'">
aaaaaaaaa
</div>
I test this code, it works well.
I think, not javascript problem. Try to check css, or other things.
Maybe put js code and css code on the img is what you need.
It's very easy with jQuery:
$(".winter").mouseup(function() {
$(this).addClass("spring");
$(this).removeClass("summer");
},function(){
$(this).addClass("summer");
$(this).removeClass("spring");
});
The Javascript file I was using was a very inflexible library. I solved the problem a different way.

Categories