I am trying to get the word count from 1 element and put it onto a variable. But i am not sure the best way to do this. Any ideas?
var value = $('#text1').val();
var regex = /\s+/gi;
var wordCount = value.trim().replace(regex, ' ').split(' ').length;
$('#text1').html(wordCount);
<p id="text1" class="entry">This is test text in this template</p>
I have tried answers in this Question, added the below code and got this error.
TypeError: undefined is not an object (evaluating '$('#text1').val().replace')
var word_count = $('#text1').val().replace(/^[\s,.;]+/, "").replace(/[\s,.;]+$/, "").split(/[\s,.;]+/).length;
<!DOCTYPE html>
<html>
<head>
<title>text_centred</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}
body {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
p {
font-size: 16px;
color: #4d4d4d;
font-family: FrescoSans-Normal;
text-align: center;
line-height: 24px;
padding-bottom: 15px;
opacity: 1;
}
#textBlock {
height: 100%;
overflow: auto;
width: 100%;
}
#wrapper {
position: relative;
width: 60%;
margin: 0 auto;
max-width: 800px;
height: auto;
}
</style>
<script type="text/javascript">
var value = $('#text1').text(); //.val() works on inputs, get the text instead
var regex = /\s+/gi;
var wordCount = value.trim().replace(regex, ' ').split(' ').length - 1;
// length - 1 is more accurate because 'cat dog'.split().length == 2, but theres only one space!
$('#text1').html(wordCount);
</script>
</head>
<body id="background">
<div id="textBlock">
<div id="wrapper">
<p id="text1">This is test text in this template</p>
</div>
</div>
</body>
</html>
Given:
<p id="text1">This is test text in this template</p>
The following code seems to do the trick. The output is 7.
var value = $('#text1').text();
var regex = /\s+/gi;
var wordCount = value.trim().split(regex).length;
$('#text1').html(wordCount);
jsfiddle
Related
I am new to Javascript and CSS. I have a div that will contain an image. The below code, I pieced it together after watching some YouTube videos and going over some documentation, however I am sure that this is not the right code.
https://jsfiddle.net/0hp97a6k/
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div {
margin: 0;
}
.headerspace {
width: 100%;
height: 20px;
background-color: white;
}
.header {
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
}
.logo {
width: 200px;
height: 200px;
background-color: red;
margin-top: 50px;
margin-left: 50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="headerspace"></div>
<div class="header">
<div class="logo" id="logoid">
</div>
</div>
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function() {
var value = window.scrollY;
logo.style.marginleft = value * 0.5 + 'px';
})
</script>
</body>
</html>
How do I set the left margin based on scroll?
Also can scroll based properties be applied to two margins, say top and right at the same time?
marginleft should be marginLeft in your javascript
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
})
</script>
And then if you want to edit the left and top you can do the following
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
logo.style.marginTop = value * 0.5 + 'px';
})
</script>
To make sure the logo element goes back where it started you should edit the css like this
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div{
margin: 0;
}
.headerspace{
width: 100%;
height: 20px;
background-color: white;
}
.header{
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
padding-top: 50px;
padding-left: 50px;
}
.logo{
width: 200px;
height: 200px;
background-color: red;
}
I have removed the margin from .logo because that will be overwritten and added those values as padding to the parent (.header)
I try to load an array from an external JS file into my HTML and have problems with that.
My js.js:
var temp_max = [4,9,2,5,8,4,2,10];
My HTML:
Note: Please download this file DateJS and insert it into "DATE-JS"!!
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--CSS for layout-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!--Date library for german date layout-->
<script src="DATE-JS"></script>
<script src="js.js"></script>
</head>
<body>
<br>
<br>
<div style="width:80%" position="absolute">
<div class="header">
<script>
for(var i = 0 ; i <8 ; i++)
{
var weekday=Date.today().addDays(i).toString('dddd');
document.write("<div id='div_weekday'>" + weekday + "</div>");
}
for(var i = 0 ; i <8 ; i++)
{
var day = Date.today().addDays(i).toString('dd');
document.write("<div id='div_date'>" + day + "</div>")
}
</script>
</div>
</div>
</body>
</html>
My CSS:
* {
box-sizing: border-box;
}
body {
background-color: rgb(86,86,85);
}
h1:after {
content: " ";
width: 70.5%;
height: 2px;
background-color: rgb(228,203,153);
position:absolute;
top: 50%;
margin-left: 15px
}
.header {
width: 100%;
}
.header > div {
color: rgb(228,203,153);
width: 12.5%;
float: left;
border: solid rgb(228,203,153);
border-width: 1px 1px 1px 0;
text-align: left;
word-break: break-all;
}
.header > div:first-child {
border-width: 1px;
}
#div_date {
border: none;
width: 12.5%;
font-size: 60px;
text-align: right;
border-bottom: solid rgba(228,203,153,0.3);
border-width: 0.5px;
padding-right: 1%
}
#div_weekday {
border: none;
width: 12.5%;
font-size: 20px;
text-align: left;
padding-left: 1%
}
Here is a screenshot without importing the JS array.
So I want that my temp_max array values are displayed exactly above the German weekdays!
So above the first information: 'Donnerstag' the script should display the value 4 from the array and so on.
Please note that I want to export this array from an external JS-file, I am not able to write this variable into my HTML file!
I already tried to use
document.getElementById
but this does not work for me.
If the problem just in looping over the created divs, I think you can do this.
All what you need to change is just adding a different ids to your divs.
Just use i index in your ids.
Something like this:
Creation:
for(var i = 0 ; i <8 ; i++) {
var weekday=Date.today().addDays(i).toString('dddd');
document.write("<div id='div_weekday_" + i + "'>" + weekday + "</div>");
}
Updating data:
for (var i = 0; i < 8; i++) {
document.getElementById('div_weekday_' + i).innerHTML = temp_max[i].weekday;
}
I have a slider that works by changing positions of background-images. Also i use the BrowserSync. While BrowserSync runs, slider works good, while not - all animations are commiting, but .slide background image not appears at all. What did i do wrong?
P.S. also i use backgroundPosition script - it allows to set few arguments.
Watch correct: https://gyazo.com/2185ae332bac4b1da1bd4f2fcd9bfe5a
Watch uncorrect: https://gyazo.com/681a28e927ef537f1f4f034faeb56b0d
html:
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/reset.css">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/backgroundPosition.js"></script>
<script src="js/slider.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div class="slider">
<div class="upside">
<div class="slide">
<div class="wheel"></div>
</div>
</div>
</div>
<div class="next"></div>
</body>
</html>
css:
body{
height: 100%;
width: 100%;
}
.slider, .upside, .slide{
height: 650px;
width: 1200px;
margin: 0 auto;
border-radius: 15px;
}
.slider{
margin: 50px auto;
background: url(../img/bg.jpg) no-repeat center;
overflow: hidden;
}
.upside{
background-image: url(../img/upside.png);
background-repeat: no-repeat;
background-position: 0px -800px;
}
.slide{
background-image: url(../img/sl_1.jpg);
background-repeat: no-repeat;
}
#keyframes rt{
100%{
transform: rotate(360deg);
}
}
.wheel{
height: 640px;
width: 180px;
background-image: url(../img/wheel.png);
background-repeat: no-repeat;
background-position: left center;
position: relative;
margin: 0px 0 0 -180px;
animation: rt 6s linear infinite
}
.next{
height: 120px;
width: 120px;
margin: 0px auto;
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 30px;
text-align: center;
line-height: 120px;
vertical-align: middle;
text-transform: uppercase;
background:url(../img/next.png) no-repeat;
border-radius: 50%;
opacity: .55;
}
js:
$(function(){
var btn = $(".next"),
wheel = $(".wheel"),
upside = $(".upside"),
slide = $(".slide"),
cur_slide = 1;
var nextSlide = function(){
btn.off();
cur_slide++;
if(cur_slide===4){cur_slide=1;}
var i1 = 0;//upside bottom point
var i2 = 650;//slide bottom point
wheel.animate({
margin: "0px 0 0 -105px"
},800,
function(){
slide.animate({
backgroundPosition:("-1200 0")
},1000,
function(){
upside.animate({
backgroundPosition:("0 0")
},1200,
function(){
slide.css('background-image',"url(../img/sl_"+cur_slide+".jpg)");
var up = setInterval(function(){
upside.css("background-position","0 "+i1+"px");
slide.css("background-position","0 "+i2+"px");
if (i2===0) {
clearInterval(up);
upside.css("background-position","0 -800px");
wheel.animate({
margin: "0px 0 0 -180px"
},800,
function(){
btn.click(nextSlide);
})
}
i1--;
i2--;
},2);
})
})
})
}
btn.click(nextSlide);
})
here is the code of backgroundPosition.js (dont know do you need it or not)
(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.pos === 0 && typeof fx.end == 'string') {
var start = $.css(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);
Well, if someone will get the same problem, i post this solution:
We have to change this:
slide.css('background-image',"url(../img/sl_"+cur_slide+".jpg)");
to this:
slide.css('background-image',"url(img/sl_"+cur_slide+".jpg)");
I'm trying to get a random generator of text and images which should be super simple but I cannot for the life of me figure out why it's not working out. Any help is greatly appreciated!
HTML
Scroll Demo #1
<body>
<div id="container">
<p>Where would you live and what would you drive?</p>
<p id="text"></p>
</div>
</body>
CSS
#container {
width: 960px;
margin-left: auto;
margin-right: auto;
border: gray solid;
padding: auto;
background-image: url(../images/house.jpg) no-repeat;
}
#text {
font-size: 40px;
text-align: left;
}
p {
width: 100px;
color: black;
font-family: arial;
font-size: 18px;
text-align: left;
}
JQUERY
$(document).ready(function(){
var car = ["limo", "golf cart", "pig"];
var images = ["house.jpg", "dumpster.jpg", "mansion.jpg"];
var x = images[Math.Floor(Math.random() * images.length)];
document.getElementById("text").innerHTML=car[x];
$('html').css({'background-image':'url(images/' + images [x] + ')'});
});
Thanks in advance!
You appear to expect x to be a number, not an image:
var x = Math.floor(Math.random() * images.length); // not Floor
I am working on a color mixer where there are 6 colors. When you click on 2 of them it shows the color that it would be if you took mixed two colors of paint and put them together.
I am wondering how to make it so that when you click two things it shows an output.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Mixer</title>
</head>
<body>
<div id="greendiv"></div>
<div id="bluediv"></div>
<div id="yellowdiv"></div>
<div id="reddiv"></div>
<div id="purplediv"></div>
<div id="orangediv"></div>
<p id="separator">------------------------------------------
</body>
</html>
and the CSS
#greendiv {
background-color:green;
width: 100px;
height: 200px;
margin-left: 360px;
}
#bluediv {
background-color:blue;
width: 100px;
height: 200px;
margin-left: 120px;
margin-top: -200px;
}
#yellowdiv {
background-color:yellow;
width: 100px;
height: 200px;
margin-left: 240px;
margin-top: -200px;
}
#reddiv {
background-color: #E42217;
height: 200px;
width: 100px;
margin-top: -200px
}
#purplediv {
background-color: purple;
height: 200px;
width: 100px;
margin-left: 480px;
margin-top: -200px;
}
#orangediv {
background-color: orange;
height: 200px;
width: 100px;
margin-left: 600px;
margin-top: -200px;
}
#separator {
font-size: 50px;
color: #565051;
margin-top: -15px
}
#reddiv:hover {
background-color: #C11B17
}
I'm using JQuery XColor to do the color mixing..
See this fiddle: choose 2 items and hit "Get Mix" button
http://jsfiddle.net/jFIT/X4Qgf/6/
function getMix() {
var colors = $('.selected');
var col1 = rgb2hex($(colors[0]).css('background-color'));
var col2 = rgb2hex($(colors[1]).css('background-color'));
console.log(colors);
var additiveColor = ($.xcolor.average(col1, col2).getHex());
console.log(col1 + ' AND ' + col2);
console.log(' = ' + additiveColor);
$('#result').css('background-color', additiveColor);
}
for this line:
var additiveColor = ($.xcolor.average(col1, col2).getHex());
you can use a number of different color calculations by changing .average( to whatever you want documented here: http://www.xarg.org/project/jquery-color-plugin-xcolor/ (i.e. additive, subtractive.. etc)
Is this what you're after??
Try this: First add 3 more entries to your CSS
#color1div {
background-color: black;
height: 100px;
width: 100px;
}
#color2div {
background-color: black;
height: 100px;
width: 100px;
margin-left: 120px;
}
#resultdiv {
background-color: black;
height: 100px;
width: 100px;
margin-left: 240px;
}
Then, modify your html page like this:
<html>
<head>
<meta charset="utf-8">
<title>Color Mixer</title>
<script type="text/javascript">
var nextColor = 'color1div';
function selectColor(colorName)
{
//select color
document.getElementById(nextColor).style.backgroundColor=colorName;
//toggle color 1 and color 2
if(nextColor == 'color1div')
nextColor = 'color2div';
else
nextColor = 'color1div';
//mix the colors
var color1 = document.getElementById('color1div').style.backgroundColor;
var color2 = document.getElementById('color2div').style.backgroundColor;
//insert your color mixing formula here and set result
//example:
//var result = mix(color1, color2);
//document.getElementById('resultdiv').style.backgroundColor = result;
}
</script>
</head>
<body>
<div id="greendiv" onclick="javascript:selectColor('green')"></div>
<div id="bluediv" onclick="javascript:selectColor('blue')"></div>
<div id="yellowdiv" onclick="javascript:selectColor('yellow')"></div>
<div id="reddiv" onclick="javascript:selectColor('red')"></div>
<div id="purplediv" onclick="javascript:selectColor('purple')"></div>
<div id="orangediv" onclick="javascript:selectColor('orange')"></div>
<p id="separator">------------------------------------------
<div id="color1div"/>
<div id="color2div"/>
<div id="resultdiv"/>
</body>
</html>
When you click the color divs, it calls the javscript function to save the selected color in a variable. Now, you can just insert your color mixing formula and set the resulting color on the resultdiv.