I have delays in place within my div gray. I don't want those delays or animation to start until the user would scroll to that specific div. What I have tried doing is not working. The delays and animation still work, but they begin once the page loads.
Does anyone see what I am doing wrong?
$(function() {
var oTop = $('.gray').offset().top - window.innerHeight;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
console.log( pTop + ' - ' + oTop );
if( pTop > oTop ){
textdelays();
}
});
});
$(function textdelays(){
$('#text').delay(1000).fadeIn(2200);
$('#text-button').delay(1000).fadeIn(2200);
$('#text-button').animate({'top': '60%'}, 1000);
});
.green {
background-color: green;
width: 100%;
height: 500px;
}
.yellow {
background-color: yellow;
width: 100%;
height: 500px;
}
.gray {
background-color: #CCC;
width: 100%;
height: 300px;
}
#text {
color: blue;
display: none;
text-align: center;
position: relative;
margin: 0 25%;
top: 35%;
font-size: 1.3em;
}
#text-button {
position: relative;
wdith: 100%;
text-align: center;
top: 70%;
display: none;
cursor: pointer;
}
.border-span {
border: 2px solid #FFF;
padding: 15px 10px;
color: #FFF;
font-weight: bold;
}
.border-span:hover {
background-color: #FFF;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="green"></div>
<div class="yellow"></div>
<div class="gray">
<div id="text">text.</div>
<div id="text-button"><span class="border-span">text animation</span></div>
</div>
Related
Hi guys I've been working on this project that saves the position of the drag and drop and i was wondering if there is away to save is position to a text or excel file giving you the time of the move.
i.e DIV 1 was moved to A at 09:00, DIV 1 was moved from A to B at 09:15 if that makes sense.
Couldn't figure it out.
<html>
<head>
<\head>
<style>
#draggable1 {
position: fixed;
bottom: 0;
margin: 1px 0;
padding: 0 20px;
height: 20px;
width: 50px;
line-height: 20px;
border-radius: 1px;
background: #136a8a;
background: -webkit-linear-gradient(to right, #267871, #136a8a);
background: linear-gradient(to right, #267871, #136a8a);
color: #fff;
list-style: none;
}
.draggable {
width: 90px;
height: 90px;
padding: 0.5em;
float: left;
margin: 0 10px 10px 0;
}
#draggable,
#draggable2 {
margin-bottom: 20px;
}
#draggable {
cursor: n-resize;
}
#draggable3 {
cursor: move;
}
#containment-wrapper {
width: 700px;
height: 500px;
border: 1px solid #000;
padding: 5px;
}
h3 {
clear: left;
}
#box {
position: absolute;
width: 100px;
height: 100px;
background-color: #ccc;
}
<\style>
<body>
<ul class="drag-sort-enable">
<li0 id="draggable1" class="draggable ui-widget-content" input type="text" >659451</li0>
</body>`
<script>
var sPositions = localStorage.positions || "{}",
positions = JSON.parse(sPositions);
$.each(positions, function(id, pos) {
$("#" + id).css(pos)
})
$("#draggable1").draggable({
containment: "#containment-wrapper",
scroll: false,
stop: function(event, ui) {
positions[this.id] = ui.position
localStorage.positions = JSON.stringify(positions)
}
});
<\script>
I've created a Back to Top function with jQuery.
The scroll back to top works but I can't seem to figure out how to hide it and only appear when say scrollTop() > 300. I created a function to take care of that but unfortunately no luck.
Here's a link to a jsfiddle https://jsfiddle.net/pvan_ren1/st3mdp6a/10/
//This is the function that's supposed to take care of the hide and reveal of toTop button.
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
You should edit your CSS to hide your "Back to Top" button by default, and then show it when the show class is added.
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
jQuery(document).ready(function() {
var btn = $('#toTop');
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: 0
}, 700);
});
});
.sectionA {
width: 100%;
height: 600px;
background-color: pink;
}
.sectionB {
width: 100%;
height: 600px;
background-color: green;
}
.sectionC {
width: 100%;
height: 600px;
background-color: purple;
}
.sectionD {
width: 100%;
height: 600px;
background-color: orange;
}
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
#toTop:hover {
cursor: pointer;
background-color: #333;
}
#toTop:active {
background-color: #555;
}
#toTop::after {
content: "\f077";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<p style="position:fixed">Scroll Down and use the toTop button</p>
<br>
<p style="position:fixed">
At the top, the "Back to Top" button does not show.
<b>It works!</b>
</p>
<section class="sectionA">
</section>
<section class="sectionB">
</section>
<section class="sectionC">
</section>
<section class="sectionD">
</section>
</body>
<a id="toTop"></a>
Before anything, set the style of the button to display: none then the code below should do it for you:
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('#toTop').css('display','inline-block');
} else {
$('#toTop').css('display','none');
}
});
I'm trying to make a text editor that can bold, italic and underline text using jQuery without using any HTML
The problem is that I can't make a selected text bold, the console log outputs "execCommand is not a function", am I doing something wrong? How can I achieve what I'm trying to do?
Here is my code:
(function ($) {
$.fn.text_editor = function(options) {
this.each(function() {
var buttons = {
buttons: ['bold', 'italic', 'underline']
};
var parametres = $.extend(buttons, options);
// generated html
$("body").html("<div class=\"container\">");
$("body").append("<h1 style=\"padding-left:55px;\">text editor</h1>");
$("body").append("<textarea rows=\"10\" cols=\"50\"></textarea>");
$("body").append("<br>");
$("body").append("<div class=\"buttons\"");
$("body").append("<button id=\"bold\">gras</button>");
$("body").append("<button id=\"italic\">italic</button>");
$("body").append("<button id=\"barre\">underline</button>");
// js
$("bold").execCommand("bold");
$("italic").execCommand("italic");
$("underline").execCommand("underline");
console.log($("bold"));
});
};
})(jQuery);
$(document).ready(function() {
$("textarea").text_editor()
});
After some searching, I came acrossthis article.
and this code pen. https://codepen.io/souporserious/pen/xBpEj
hope this helps.
$('.wysiwyg-controls a').on('click', function(e) {
e.preventDefault();
document.execCommand($(this).data('role'), false);
});
$controls-color: #ADB5B9;
$border-color: #C2CACF;
* {
box-sizing: border-box;
}
.wysiwyg-editor {
display: block;
width: 400px;
margin: 100px auto 0;
}
.wysiwyg-controls {
display: block;
width: 100%;
height: 35px;
border: 1px solid $border-color;
border-bottom: none;
border-radius: 3px 3px 0 0;
background: #fff;
a {
display: inline-block;
width: 35px;
height: 35px;
vertical-align: top;
line-height: 38px;
text-decoration: none;
text-align: center;
cursor: pointer;
color: $controls-color;
}
[data-role="bold"] {
font-weight: bold;
}
[data-role="italic"] {
font-style: italic;
}
[data-role="underline"] {
text-decoration: underline;
}
}
[class^="menu"] {
position: relative;
top: 48%;
display: block;
width: 65%;
height: 2px;
margin: 0 auto;
background: $controls-color;
&:before {
#extend [class^="menu"];
content: '';
top: -5px;
width: 80%;
}
&:after {
#extend [class^="menu"];
content: '';
top: 3px;
width: 80%;
}
}
.menu-left {
&:before, &:after {
margin-right: 4px;
}
}
.menu-right {
&:before, &:after {
margin-left: 4px;
}
}
.wysiwyg-content {
max-width: 100%;
width: 100%;
height: auto;
padding: 12px;
resize: both;
overflow: auto;
font-family: Helvetica, sans-serif;
font-size: 12px;
border: 1px solid $border-color;
border-radius: 0 0 3px 3px;
background: #F2F4F6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wysiwyg-editor">
<div class="wysiwyg-controls">
<a href='#' data-role='bold'>B</a>
<a href='#' data-role='italic'>I</a>
<a href='#' data-role='underline'>U</a>
</i>
</i>
</i>
</div>
<div class="wysiwyg-content" contenteditable>
<b>Let's make a statement!</b>
<br>
<i>This is an italicised sentence.</i>
<br>
<u>Very important information.</u>
</div>
</div>
NOTE: this is not my code.
execCommand is an experimental function, and its an function of document and not html elements. You can however call this function as below -
$("#bold").document.execCommand("bold");
$("#italic").document.execCommand("italic");
$("#underline").document.execCommand("underline");
I'm trying to fade an image as background an I want to fade out only background image not the text.
I want to text stay on the page.
This is what I use:
https://codepen.io/nickcil/pen/sfutl
Help me please.
$(window).scroll(function(){
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
});
/*win.scroll(function(){
scrollPosition = win.scrollTop();
scrollRatio = 1 - scrollPosition / 300;
$(".top").css("opacity", scrollRatio);
*/
/*$(window).scroll(function(){
var scrollVar = $(window).scrollTop();
$('.top').css("opacity", 1 - scrollVar/300);
})*/
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<div class="title">Fade Away</div>
</div>
opacity affects all content inside an element,you must use background-color instead of opacity, so:
Change:
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
To:
$(".top").css('background-color', 'rgba(170,170,170,' + (1 - ($(window).scrollTop() / 250)) + ')');
$(window).scroll(function(){
$(".top").css('background-color', 'rgba(170,170,170,' + (1 - ($(window).scrollTop() / 250)) + ')');
});
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top"><div class="title">Fade Away</div></div>
Note: I change color for .title to black,for you to see the result better.
You need to add another element inside .top and have that fade out instead of fading the outer container:
$(window).scroll(function(){
$(".top-inner").css("opacity", 1 - $(window).scrollTop() / 250);
});
body {
margin: 0;
height: 1000px;
}
.top-inner {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
}
.title {
position: absolute;
top: 60%;
left: 100px;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<div class="top-inner"></div>
<div class="title">Fade Away</div>
</div>
I'm trying to make an array of multiple background images and having the browser choose one at random to display.
I have attempted coding with some help but don't know where I'm going wrong.
Here is the code I am working with
<head>
<meta charset="utf-8">
<title>Christopher Tameji Foose</title>
<script src="chrisfoose.js">
var imgSrcArr = ["/background/000.jpg", "/background/001.jpg", "/background/003.jpg"]
window.onload = function() {
var randNum = Math.floor(Math.random() * 3);
console.log(randNum); document.getElementById("main").style.backgroundImage = "url('" + imgSrcArr[randNum] + "')";
}
</script>
<link rel="stylesheet" href="stylesheet.css">
;<script>
;</script>
A zip of my website is at https://www.sendspace.com/file/2la4he. Any feedback is appreciated.
You have a couple of issues here. First, document.getElementByTagName("div.main") is invalid since there is no function called "getElementByTagName" What you want is "getElementsByTagName" (notice the extra "s").
Second, your target div has an ID, so rather than looping through all the tags and selecting the one you want, just use getElementById() instead.
var imgSrcArr = ["/background/000.jpg", "/background/001.jpg", "/background/003.jpg"]
window.onload = function() {
var randNum = Math.floor(Math.random() * 3);
document.getElementById("main").style.backgroundImage = "url('" + imgSrcArr[randNum] + "')";
Here is a fiddle: http://jsfiddle.net/fvo6v0vL/
Your javascript has a syntax error. It's getElementsByTagName. You're missing the 's'.
Alternatively, I recommend you use getElementById, that way you only select the one main object:
var imgSrcArr = ["/background/000.jpg", "/background/001.jpg", "/background/003.jpg"]
window.onload = function() {
var randNum = Math.floor(Math.random() * 3);
document.getElementById("main").style.backgroundImage = "url('" + imgSrcArr[randNum] + "')"
}
You can run the snippet below to see the result:
var imgSrcArr = ["http://www.hdwallpapers.in/walls/running_horse-wide.jpg", "http://www.hdwallpapers.in/walls/colorful_background-wide.jpg", "http://www.hdwallpapers.in/walls/moonlight_cruise-wide.jpg"]
window.onload = function() {
var randNum = Math.floor(Math.random() * 3);
document.getElementById("main").style.backgroundImage = "url('" + imgSrcArr[randNum] + "')"
}
a {text-decoration: none;color: white}
.left {float: left;}
.right {float: right;}
.center {float: center;}
div.main {
margin: auto;
height: 500px;
width: 500px;
background-position: center;
backgroud-repeat: no-repeat border: 1px solid black;
}
body {background-color: black;}
#main {
width: 1000px;
margin: 0 auto;
}
#vid {
width: 1200px;
text-align: center;
}
#circle {position: fixed;z-index: 1;}
#buttonred {
width: 100px;
height: 100px;
border-radius: 100%;
background-color: red;
border-style: solid;
text-align: center;
}
#buttonblue {
width: 100px;
height: 100px;
border-radius: 100%;
background-color: blue;
border-style: solid;
text-align: center;
}
#buttongreen {
width: 100px;
height: 100px;
border-radius: 100%;
background-color: green;
border-style: solid;
text-align: center;
}
#buttonpink {
width: 100px;
height: 100px;
border-radius: 100%;
background-color: pink;
border-style: solid;
text-align: center;
}
#buttonorange {
width: 100px;
height: 100px;
border-radius: 100%;
background-color: orange;
border-style: solid;
text-align: center;
}
#buttonback {
witdth: 100px;
height 100px;
border-radius: 100%;
background-color: red;
border-style: solid;
text-align: center;
}
;
table.center {
background-color: white;
margin-left: auto;
margin-right: auto;
}
table.center {
width: 70%;
margin-left: 200px;
margin-top: 300px;
color: white;
}
p {
font-family: Arial, Terminal, Times New Roman;
margin-top: 30px;
font-color: white;
line-height: 100px;
margin: 0;
}
p.bio {
font-family: Terminal, Arial;
color: black;
}
td.bio {
background-color: white;
font-family: Courier, Terminal, Arial;
padding: 50px;
}
table.bio {
width: 70%;
margin-left: 300px;
margin-top: 150px;
}
table.video {
width: 85%;
margin-left: 150px;
margin-top: 200px;
}
table.graphics {
width: 85%;
margin-left: 50px;
margin-top: 150px;
background-color: black;
border: 1px border-color: white;
}
td.graphics {
border: 1px solid white;
align: center;
}
#videobanner {
width: 150px;
height: 50px;
background-color: grey;
text-align: center;
margin-top: 1px;
margin-bottom: 20px;
color: white;
}
p.video {
font-family: Arial;
font-size: large;
color: white;
text-align: center;
font-size: 18px;
margin-top: 5px;
}
<div id="main" class="main">
;
<table class="center" id="tablecenter">
<td>
<div id="buttonred">
<p>Who?
</p>
</div>
</td>
<td>
<div id="buttonblue">
<p>Resume / CV
</p>
</div>
</td>
<td>
<div id="buttongreen">
<p>Video
</p>
</div>
</td>
<td>
<div id="buttonpink">
<p>Graphics
</p>
</div>
</td>
<td>
<div id="buttonorange">
<p>Projects</p>
</div>
</td>
;</table>
</div>
I used getElementById instead and you can access the style object directly through it (no need to access the first position the array with [0] as w3schools explain).