Touch stays on screen after changing the content in iOS - javascript

I have this simple snippet. Only thing it does is to refresh the content after the user touches one of the buttons:
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style-2.css">
<link rel="stylesheet" type="text/css" href="responsive.css">
<script>
function init() {
var content = "";
var rand;
for(var i=0; i<5; i++)
{
rand = Math.floor(Math.random() * 10);
content += "<a class=\"button\" id=\"" + rand + "\" onClick=\"init();\" href=\"#!\">" + rand + "</a>\n";
}
document.getElementById("choices").innerHTML = content;
}
function refreshcontent()
{
setTimeout(function(){ init()}, 900);
}
</script>
<meta charset="UTF-8">
</head>
<body>
<main>
<body onload = "init();"/>
<section id="services" class="white" >
<div id = "choices" >
</div>
</section>
</main>
</body>
</html>
In Android, PC, and Mac, it works fine. But in my iPhone, regardless of the browser I use, the button I touch stays "pressed" after the content reloads.
I tested it by touching to a button and then immeadiately touching some empty space on screen, then it works fine.
What am I missing?

Related

revealjs highlight newly revealed line of code

I want to incrementally reveal a code block with the following conditions:
Code not shown yet is hidden instead of greyed out
When new lines are revealed, they are highlighted with different background color
When transitioning between auto animated slides, new lines of code that are not hidden should also be highlighted
I've managed to do 1 by changing the opacity of .reveal .hljs.has-highlights tr:not(.highlight-line). For 2, I've tried to keep track of newly added lines with a script but it doesn't work since revealjs autogenerates a fragment for each transition. I guess the solution to 3, which I have not tried yet, would be similar to 2.
I'm new to JavaScript, so I'm not sure how to proceed, what's the best way to do this? Here's a MWE for my use case
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>reveal.js</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css">
<link rel="stylesheet" href="dist/custom.css">
<!-- Theme used for syntax highlighted code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-state="stats" data-auto-animate>
<pre data-id="code-animation" ><code data-line-numbers="1,2|1-6">
function $initHighlight(block, cls) {
try {
if (cls.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) +
` class="${cls}"`;
</code></pre>
</section>
<section data-state="stats" data-auto-animate>
<pre data-id="code-animation" ><code data-line-numbers="1-8|1-11|1-14">
function $initHighlight(block, cls) {
try {
if (cls.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) +
` class="${cls}"`;
} catch (e) {
/* handle exception */
}
for (var i = 0 / 2; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
console.log('undefined');
}
</code></pre>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
Reveal.initialize({
hash: true,
plugins: [ RevealHighlight ]
});
</script>
</body>
</html>

JavaScript - show/ hide function

I am new to JavaScript and I do not know how to approach this homework assignment -
"modify the page to hide all the images until the “start” button is clicked. Once clicked the start button should become the stop button and display the word “stop” and when clicked hide the images. Once hidden that same button should become the start button and display the word “start” and act again like the start button. Notice there is a single button that changes the text and what is does depending on whether the show is currently stopped or started."
I know i am supposed to use the show/hide effects, but I don't really know how to apply them to the code?
<!doctype html>
<html>
<head>
<title>Slide Show</title>
<!-- will remove the 404 error for favicon.ico from console -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- using jQuery -->
<link href="simpleImageV2.css" rel="stylesheet" type="text/css">
<script src="jquery-3.3.1.min.js"></script>
<script src="simpleImagesV2.js"></script>
</head>
<body bgcolor="black" onload="preLoadImages()">
<div id="setSize">
<img name="campus_pic" src="images/fall_1_480x640.png" width="480" height="640">
</div>
<br />
<br />
<button id="startShow">Start the Show</button>
<button id="stopShow">Stop the Show</button>
</body>
</html>
JavaScript -
/*global $ */
var i = 0, myTimer, campus;
function preLoadImages() {
"use strict";
if (document.images) {
campus = new Array(); // global variable
campus[0] = new Image();
campus[0][0] = "images/fall_1_480x640.png";
campus[0][1] = "480";
campus[0][2] = "640";
campus[1] = new Image();
campus[1][0] = "images/winter_1_640x480.png";
campus[1][1] = "640";
campus[1][2] = "480";
campus[2] = new Image();
campus[2][0] = "images/spring_1_640x480.png";
campus[2][1] = "640";
campus[2][2] = "480";
campus[3] = new Image();
campus[3][0] = "images/summer_1_480x640.png";
campus[3][1] = "480";
campus[3][2] = "640";
} else {
window.alert("This browser does not support images");
}
}
You can use jQuery for that like below :
/*global $ */
var i = 0, myTimer, campus;
function preLoadImages() {
"use strict";
if (document.images) {
campus = new Array(); // global variable
campus[0] = new Image();
campus[0][0] = "images/fall_1_480x640.png";
campus[0][1] = "480";
campus[0][2] = "640";
campus[1] = new Image();
campus[1][0] = "images/winter_1_640x480.png";
campus[1][1] = "640";
campus[1][2] = "480";
campus[2] = new Image();
campus[2][0] = "images/spring_1_640x480.png";
campus[2][1] = "640";
campus[2][2] = "480";
campus[3] = new Image();
campus[3][0] = "images/summer_1_480x640.png";
campus[3][1] = "480";
campus[3][2] = "640";
} else {
window.alert("This browser does not support images");
}
}
function init() {
$('#stopShow').hide();
}
$(document).ready(function () {
$("#startShow").click(function () {
var images = ['<div>'];
campus.forEach(function (img) {
images.push('<img src="' + img[0] +'" height="' + img[1] + '" width="' + img[2] + '" />');
});
images.push('</div>');
$("#images").html(images.join(''));
$('#startShow').hide();
$('#stopShow').show();
});
$("#stopShow").click(function () {
$("#images").html('');
$('#stopShow').hide();
$('#startShow').show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<title>Slide Show</title>
<!-- will remove the 404 error for favicon.ico from console -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- using jQuery -->
<link href="simpleImageV2.css" rel="stylesheet" type="text/css">
<script src="jquery-3.3.1.min.js"></script>
<script src="simpleImagesV2.js"></script>
</head>
<body bgcolor="black" onload="preLoadImages(); init();">
<div id="setSize">
<img name="campus_pic" src="images/fall_1_480x640.png" width="480" height="640">
</div>
<br />
<br />
<div id="images"></div>
<button id="startShow">Start the Show</button>
<button id="stopShow">Stop the Show</button>
</body>
</html>

Trying to change background color with variable

Trying to change color using a variable, console works but color not changing when I click on the square.
Color is the variable I want to use.
I have tried an actual string value and that does not work.
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>Test Your Reactions!</h1>
<p>Click on the shapes as fast as you can</p>
<div id="shapes">
</div>
<script>
function myFunction() {
var colour = '#'+((Math.random() * (1<<24)|0).toString(16).slice(-6));
document.getElementById("shapes").style.backgroundColour = colour;
console.log(colour);
}
</script>
</body>
</html>
its backgroundColor not Colour .. you have an extra u
You need to replace backgroundColour by backgroundColor without u :
document.getElementById("shapes").style.backgroundColour = colour;
______________________________________________________^
Must be :
document.getElementById("shapes").style.backgroundColor = colour;
NOTE 1: You need to trigger the function to see the effect and you must also give your target div shapes a width/height so you can see it.
NOTE 2: You must listen on DOMContentLoaded event to make sure all the elements are loaded to the DOM before calling your script.
Working sample:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css" />
<style>
#shapes {
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
</head>
<body>
<h1>Test Your Reactions!</h1>
<p>Click on the shapes as fast as you can</p>
<div id="shapes">
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var shapes = document.getElementById("shapes");
shapes.addEventListener('click', myFunction, false);
});
function myFunction() {
shapes.style.backgroundColor = "#" + (Math.random() * (1 << 24) | 0).toString(16).slice(-6);
}
</script>
</body>
</html>
Try this
const shapes = document.getElementById("shapes"); // You declare once, then you can reuse
function myFunction() {
var colour = '#'+((Math.random() *(1<<24)|0).toString(16).slice(-6));
shapes.style.backgroundColor = colour;
console.log(colour);
}
shapes.addEventListener('click', myFunction); // I guess you want to click somewhere
<h1>Test Your Reactions!</h1>
<p>Click on the shapes as fast as you can</p>
<div id="shapes">Shapes</div>
Below code gives the expected result. please take it.
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css"/>
<style>
#shapes {
width: 300px;
height: 300px;
background-color: coral;
color: white;
}
</style>
</head>
<body>
<h1>Test Your Reactions!</h1>
<p>Click on the shapes as fast as you can</p>
<div id="shapes" onClick="myFunction();">
test
</div>
<script>
function myFunction() {
var colour = '#'+((Math.random() * (1<<24)|0).toString(16).slice(-6));
document.getElementById("shapes").style.backgroundColor = colour;
console.log(colour);
}
</script>
</body>
</html>

Angular breaks jQuery slideshow

I'm working on this template and after including angular in application a lot of functionality is broken. A somehow managed to fix them a lot, but I can not get this slide show to work properly.
This is my HTML
<!doctype html>
<!--[if IE 9 ]><html class="ie9" lang="en"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
<link rel="icon" type="image/ico" href="images/fav.ico">
<!--stylesheet include-->
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="all" href="css/camera.css">
<link rel="stylesheet" type="text/css" media="all" href="css/owl.carousel.css">
<link rel="stylesheet" type="text/css" media="all" href="css/owl.transitions.css">
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.custom-scrollbar.css">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css">
<link rel="stylesheet" type="text/css" media="all" href="css/lightbox.css">
<!--font include-->
<link href="css/font-awesome.min.css" rel="stylesheet">
</head>
<body ng-app="app">
<!--slider-->
<div class="camera_wrap m_bottom_0" ng-controller="slideShowCtrl" ng-show="slideShow()">
<div data-src="images/slide_02.jpg" data-custom-thumb="images/slide_02.jpg">
<div class="camera_caption_1 fadeFromTop t_align_c d_xs_none">
<div class="f_size_large color_light tt_uppercase slider_title_3 m_bottom_5">Meet New Theme</div>
<hr class="slider_divider d_inline_b m_bottom_5">
<div class="color_light slider_title tt_uppercase t_align_c m_bottom_45 m_sm_bottom_20"><b>Attractive & Elegant<br>HTML Theme</b></div>
<div class="color_light slider_title_2 m_bottom_45">$<b>15.00</b></div>
Buy Now
</div>
</div>
<div data-src="images/slide_01.jpg" data-custom-thumb="images/slide_01.jpg">
<div class="camera_caption_2 fadeIn t_align_c d_xs_none">
<div class="f_size_large tt_uppercase slider_title_3 scheme_color">New arrivals</div>
<hr class="slider_divider type_2 m_bottom_5 d_inline_b">
<div class="color_light slider_title tt_uppercase t_align_c m_bottom_65 m_sm_bottom_20"><b><span class="scheme_color">Spring/Summer 2014</span><br><span class="color_dark">Ready-To-Wear</span></b></div>
View Collection
</div>
</div>
<div data-src="images/slide_03.jpg" data-custom-thumb="images/slide_03.jpg">
<div class="camera_caption_3 fadeFromTop t_align_c d_xs_none">
<img src="images/slider_layer_img.png" alt="" class="m_bottom_5">
<div class="color_light slider_title tt_uppercase t_align_c m_bottom_60 m_sm_bottom_20"><b class="color_dark">up to 70% off</b></div>
Shop Now
</div>
</div>
</div>
<div ng-view></div>
<!--scripts include-->
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/retina.js"></script>
<script src="js/camera.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.custom-scrollbar.js"></script>
<script src="js/scripts.js"></script>
<script src="js/lightbox.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-resource.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-ui.min.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/sortable.js"></script>
<script src="js/ng-file-upload.js"></script>
<script src="js/ng-file-upload-shim.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers.js"></script>
<script src="app/factory.js"></script>
<script src="app/filters.js"></script>
</body>
</html>
My controller
controllers.slideShowCtrl = function($scope, $location){
$scope.slideShow = function(){
if($location.url() == '/' || $location.url() == '/home'){
$scope.slideShowView = true;
return true;
}else{
$scope.slideShowView = false;
return false;
}
}
}
And this is jQuery for creating slideshow
// camera slideshow
(function(){
var cs = $('.camera_wrap');
if(cs.length){
cs.camera({
height: '41%',
navigation: true,
pagination: true,
playPause:false,
thumbnails: false,
time: 4000,
transPeriod : 1000,
navigationHover: false,
onLoaded: function() {
var image = $('.camera_wrap .camera_src > [data-src]'),
len = image.length,
bullet = $('.camera_wrap .camera_pag_ul > li');
if(bullet.find('.custom_thumb').length) return;
for(var i = 0; i < len; i++){
bullet.eq(i).append('<div class="custom_thumb tr_all_hover"><img src="' + image.eq(i).data('custom-thumb') + '" alt=""></div>');
}
bullet.on("mouseenter mouseleave",function(){
$(this).children('.custom_thumb').toggleClass("active");
});
}
});
cs.find('.camera_prev').append('<i class="fa fa-angle-left"></i>');
cs.find('.camera_next').append('<i class="fa fa-angle-right"></i>');
}
})();
The problem is here. On first load or reload (f5), slider looks ok and plays well.
After clicking trough page and again visiting home (#/home), slider sometimes break, sometimes don't, sometimes it fixes by him self.
And again after refreshing web page slider works ok and plays well.
If you guys need any additional chunk of code, let me know and I will provide.
Thank you
Theorically when you put a JQ slideshow in angular view. You need to init everytime you access the view. Because on view/route changes your slideshow will be discarded from DOM, therefore all the content and instance of your slideshow will be discarded too.
The problem is here. On first load or reload (f5), slider looks ok and plays well.
Yes it should work because slideshow got initial welly
After clicking trough page and again visiting home (#/home), slider sometimes break, sometimes don't, sometimes it fixes by him self.
The slide does not initial properly because it got discard from DOM when route/view changes
=> To make to work just simply re-init it again exactly after your view rendered.
// This is a dirty patch up, and only showing the fix in most basic way. So you could understand the concept of angular with other DOM manipulation like JQ.
// You should try to study more about DOM manipulation in angular. And for better solution, you can go with directive
controllers.slideShowCtrl = function($scope, $location, $timeout){
$scope.slideShow = function(){
if($location.url() == '/' || $location.url() == '/home'){
$scope.slideShowView = true;
return true;
}else{
$scope.slideShowView = false;
return false;
}
// I just putting slideshow initial right after $scope.slideShow() return true.
// To make sure slideshow got initial after the ng-show condition return true.
$scope.$watch(function () {
return $scope.slideShow();
}, function (isShow) {
// This $timeout to 100% sure slideshow initial only happen after view got all its base content rendered
$timeout(function () {
if(isShow){
var cs = $('.camera_wrap');
if(cs.length){
cs.camera({
height: '41%',
navigation: true,
pagination: true,
playPause:false,
thumbnails: false,
time: 4000,
transPeriod : 1000,
navigationHover: false,
onLoaded: function() {
var image = $('.camera_wrap .camera_src > [data-src]'),
len = image.length,
bullet = $('.camera_wrap .camera_pag_ul > li');
if(bullet.find('.custom_thumb').length) return;
for(var i = 0; i < len; i++){
bullet.eq(i).append('<div class="custom_thumb tr_all_hover"><img src="' + image.eq(i).data('custom-thumb') + '" alt=""></div>');
}
bullet.on("mouseenter mouseleave",function(){
$(this).children('.custom_thumb').toggleClass("active");
});
}
});
cs.find('.camera_prev').append('<i class="fa fa-angle-left"></i>');
cs.find('.camera_next').append('<i class="fa fa-angle-right"></i>');
}
}
}, 0)
})
}
}
P.S.
please aware that, since we do not have any fiddle/plunker so to make sure the solution work, I apply some tricks that will put the highest possiblity for my answer to providing a workding code. You can try to remove $timeout to see if it worked
I think creating a directive for slideshow can solve this problem.
I have faced this type of problem with swiper slider. After create directive solve my problem.
your directive
angular.module('app', [])
.directive('cameraSlider', function($timeout){
return {
restrict: 'AC',
templateUrl: function(element, attrs) {
return attrs.templateUrl | 'your_remplate_url.html';
}
link: function($scope, element, attrs){
$timeout(function(){
element.camera({
height: '41%',
navigation: true,
pagination: true,
playPause:false,
thumbnails: false,
time: 4000,
transPeriod : 1000,
navigationHover: false,
onLoaded: function() {
var image = $('.camera_wrap .camera_src > [data-src]'),
len = image.length,
bullet = $('.camera_wrap .camera_pag_ul > li');
if(bullet.find('.custom_thumb').length) return;
for(var i = 0; i < len; i++){
bullet.eq(i).append('<div class="custom_thumb tr_all_hover"><img src="' + image.eq(i).data('custom-thumb') + '" alt=""></div>');
}
bullet.on("mouseenter mouseleave",function(){
$(this).children('.custom_thumb').toggleClass("active");
});
}
});
element.find('.camera_prev').append('<i class="fa fa-angle-left"></i>');
element.find('.camera_next').append('<i class="fa fa-angle-right"></i>');
},200)
}
};
})
now you can use camera-slider class with camera-wrap class

var ball = document.getElementById("ball"); returns null object?

I've got 3 files
file 1: index.html
<!DOCTYPE html>
<html>
<head>
<LINK href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="bounce.js"></script>
<title>Bouncing ball</title>
</head>
<body>
<div id='ball'></div>
</body>
</html>
file 2: bounce.js
var ball = document.getElementById("ball");
var nx = 0;
var ny = 0;
setInterval(loop, 1000 / 30);
function loop() {
nx++;
ny++;
ball.style.left = nx;
ball.style.top = ny;
}
file 3: style.css
#ball {
position: absolute;
border-radius: 50px;
width: 50px;
height: 50px;
background: black;
}
i'm load the .css and the .js in the html file.
Now i'm trying to get te div "ball" and i want to do something with it. In this case, i want to let it bounce agains the borders of the browser. But the point is, i'm getting errors.
Uncaught TypeError: Cannot read property 'style' of null
The bonce.js can not get the elment ball. Why not? What am i doing wrong?
You are trying to get the element before it's loaded in the DOM. Do this:
<!DOCTYPE html>
<html>
<head>
<LINK href="style.css" rel="stylesheet" type="text/css">
<title>Bouncing ball</title>
</head>
<body>
<div id='ball'></div>
<script type="text/javascript" src="bounce.js"></script>
</body>
</html>
It's a good practice to include all your JavaScript at the bottom, so it doesn't block the page while downloading. And it will make sure you don't have any errors like this.
That's because your code is executed before the DOM is ready. There is no element with this id at this time.
Put your code inside a onload callback :
window.onload = function(){
var ball = document.getElementById("ball");
var nx = 0;
var ny = 0;
setInterval(loop, 1000 / 30);
function loop() {
nx++;
ny++;
ball.style.left = nx;
ball.style.top = ny;
}
};
Move your script to the end of the page or wrap it in an onload event. You're executing it before the element has loaded.
<!DOCTYPE html>
<html>
<head>
<LINK href="style.css" rel="stylesheet" type="text/css">
<title>Bouncing ball</title>
</head>
<body>
<div id='ball'></div>
<script type="text/javascript" src="bounce.js"></script>
</body>
</html>

Categories

Resources