If I use the script tag or link the file the js does not Run if it is a problem with the js here is my code.
$("img").on("contextmenu", function (e) {
return false;
});
$("img").mousedown(function (e) {
e.preventDefault()
});
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
/* Toggle mobile menu */
function toggleMenu() {
if (menu.classList.contains("active")) {
menu.classList.remove("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
} else {
menu.classList.add("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
}
}
/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
for (let item of items) {
if (item.querySelector(".submenu")) {
item.addEventListener("click", toggleItem, false);
}
item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);
I have the disabled cache to and I have reloaded and Copied the exact file name to my script tag that links the javascript.
And my HTML. Because it might be a problem here.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- mobile metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- site metas -->
<title>Upright Code - Hire Me Coder</title>
<meta name="description" content="Hire Me, I am a Coder, Web and coding tutorials" />
<meta name="keywords"
content="HTML,CSS,JavaScript, Hire Coder, Hire, Code, Coder, Coding Lessons, Lessons on HTML, Lessons on CSS" />
<meta name="author" content="--------" />
<!-- Awsome Font -->
<script src="https://kit.fontawesome.com/82298f2f89.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Javascript js -->
<script src="js\Main_Javascript.js" defer></script>
<!-- style css -->
<link rel="stylesheet" href="css/style.css">
<!-- fevicon -->
<link rel="icon" href="images/logo.png" type="image/png" />
<!-- Tweaks for older IEs-->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css"
media="screen">
</head>
<body>
<!--
<script>
window.location.replace("https://uprightcode.com/comming-soon");
</script>
-->
<nav>
<ul class="menu">
<li class="logo">Upright Code</li>
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Plans</li>
<li class="item">Lessons
</li>
<li class="toggle"><i class="fas fa-bars"></i></li>
</ul>
</nav>
<section class="hero">
<div class="hero-content">
<h1 class="hero-title">
Discover the World
</h1>
<h2 class="hero-subtitle">
We offer the best adventure holidays and tailor-made trips!
</h2>
<button type="button" class="hero-button" onclick="location.href='tours.html'">
Search for tours »
</button>
</div>
</section>
<img src="images/garfield-movie.webp">
</body>
</html>
<script>
setTimeout(function () { console.clear(); }, 10000);
</script>
I put where the js is my full path to that is
/uprightcode/js/Main_Javascript.js
You need to load jquery. Add this in HTML
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
Related
and greetings. I'm trying to get converse to work in embedded mode, so there is a 'full screen' version that doesn't take up the entire page. I'm having issues, where the converse control box grows outside of the area I've assigned, but there is no scroll bar to view it.
I've tried a lot of things, setting dimensions, width and height, changing dimensions, and it doesn't fix the issue. I was wondering if someone could tell me what I'm doing wrong. The webpage code is listed below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- Custom fonts for this template-->
<link href="/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="/css/sb-admin-2.min.css" rel="stylesheet">
<link href="/css/PEC_global.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/9.0.0/dist/converse.css">
<script src="https://cdn.conversejs.org/9.0.0/dist/converse.js" charset="utf-8"></script>
<!--script src="/vendor/converse/dist/converse.js"></script-->
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="https://cdn.conversejs.org/3rdparty/libsignal-protocol.min.js"></script>
<style>
.converse-container {
height: 80vh;
}
</style>
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper" style="height:100vh;">
<!-- Sidebar -->
<?php require($_SERVER["DOCUMENT_ROOT"] . '/navBar.php'); ?>
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<div class="row">
<div class="col-9">
<div class="converse-container">
<converse-root></converse-root>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<!-- Bootstrap core JavaScript-->
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="/js/sb-admin-2.min.js"></script>
<!-- custom JS for PEC -->
<script src="/js/PEC.js"></script>
</body>
<script>
var tabulatorTable = null;
$(document).ready(function() {
converse.initialize({
default_domain: "XXXXXXX",
bosh_service_url: 'XXXXXXXXX',
view_mode: 'embedded',
message_archiving: 'always',
auto_login: true,
auto_reconnect: true,
credentials_url: 'XXXXXX',
clear_cache_on_logout: true,
notify_all_room_messages: true,
play_sounds: true,
allow_contact_removal: false,
//allow_logout: false,
allow_muc_invitations: false,
allow_registration: false,
allow_contact_requests: false,
send_chat_state_notifications: false,
//blacklisted_plugins: ['converse-fullscreen'],
});
});
</script>
Hey I'm having a problem with the prompt method in Javascript.
What I try to do is make the H1 equal to the user his answer.
The problem is that the function does not take the answer in it's function.
I tried to find something about it on youtube without succes.
Any tips or help would be appreciated
$(document).ready(function() {
console.log('Document loaded');
});
let answer = prompt('name of club?');
function changeDOM() {
$('.front').text(answer);
};
changeDOM();
<DOCTYPE html>
<html>
<head>
<link href="main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton|Pacifico|Maven+Pro" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="main.js" type="text/javascript"></script>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>HAL Tech</title>
</head>
<body>
<div class="parallax-group">
<h1 class="front">HAL Tech</h1>
<!--
<ul class="nav">
<li href="#">Tech club</li>
<li href="#">Te doen</li>
<li href="#">Projecten</li>
<li href="#">Dingen</li>
</ul>
-->
<img src="POEP.jpg" class="back" alt="">
</div>
</body>
</html>
'answer' in $('.front').text('answer'); should not be a string, it should reference your answer variable:
$('.front').text(answer);
'answer' is the literal string "answer", whereas answer refers to your variable.
$(document).ready(function() {
console.log('Document loaded');
let answer = prompt('name of club?');
function changeDOM() {
$('.front').text(answer);
};
changeDOM();
});
<DOCTYPE html>
<html>
<head>
<link href="main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton|Pacifico|Maven+Pro" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="main.js" type="text/javascript"></script>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>HAL Tech</title>
</head>
<body>
<div class="parallax-group">
<h1 class="front">HAL Tech</h1>
<!--
<ul class="nav">
<li href="#">Tech club</li>
<li href="#">Te doen</li>
<li href="#">Projecten</li>
<li href="#">Dingen</li>
</ul>
-->
<img src="POEP.jpg" class="back" alt="">
</div>
</body>
</html>
As further discussed in the comments, your JS is running before the DOM loads. You can either move it to the bottom of the body, or change your code to be within the $(document).ready function:
$(document).ready(function() {
console.log('Document loaded');
let answer = prompt('name of club?');
function changeDOM() {
$('.front').text(answer);
};
changeDOM();
});
Basically, I am creating a list item that generated by jQuery script. I would like to have each list item with an icon chosen from font awesome.
My JS script to create a list and my HTML markup are as below:
<script type="text/javascript">
jQuery(document).ready(function() {
var menuID = 0;
var itemCount = 1;
$('.add-new-id').click(function() {
menuID = $('.menu-id').val();
$('.menu-id, .add-new-id').attr('disabled', 'disabled');
return false;
});
$('#new-parent').submit(function() {
var newParent = $('input.new-parent').val();
$('ol.example:last').append('<li>' + newParent + '<button class="btn btn-default" role="iconpicker"></button></li>');
itemCount++;
$('input.new-parent').val('');
return false;
});
$('body').on('click', 'button[role="iconpicker"]', function() {
$(this).iconpicker();
});
});
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/ionicons-1.5.2/css/ionicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/map-icons-2.1.0/css/map-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/material-design-1.1.1/css/material-design-iconic-font.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/octicons-2.1.2/css/octicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/typicons-2.0.6/css/typicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/weather-icons-1.2.0/css/weather-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>
<title>Menu</title>
</head>
<body>
<div class="row">
<div class="container">
<div class="col-sm-12">
<form action="" id="new-parent">
<div class="input-group col-sm-4">
<input type="text" class="form-control new-parent" placeholder="Add parent menu">
<div class="input-group-btn">
<button class="btn btn-default add-new-parent" type="submit">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</form>
<h4>Available Forms:</h4>
<ol class="example">
</ol>
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/jquery-sortable-min.js"></script>
<!-- Icon picker script-->
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/iconset/iconset-all.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/bootstrap-iconpicker.js"></script>
<!-- end script-->
</body>
</html>
For each list item icon, I would like to use Bootstrap-Iconpicker from this site. However, it does not work fine for each generated list item as you can see from screen shot and on my site.
Popup Icon Picker
By clicking on left and right arrow, or typing in text box, it does not work at all.
Please kindly test it on my demo site:
I could not find to any way to figure it out.
Please kindly help, your suggestion and solution are very much appreciate, thanks.
I've been wanting to make an image fadeout after a period of time. I've looked through the same topics found here in Stackoverflow but mine doesn't want to work.
If anyone could take a quick peek at my code I would be very grateful please?
The image I would like to fade is:
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>ACC BIC - Business Industry Description</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div class="row">
<div class="twelve columns">
<!-- Bottom bar navigation -->
<div class="btn btn-two">
<span class="btn-two--link"></span>
<span class="btn-three--link"></span>
<span class="btn-four--link"></span>
<img id="myImage" class="email-sent-img" src="images/email-link-sent.png" alt="">
<script>
$(window).load(function(){
setTimeout(function(){ $('#myImage').fadeOut() }, 5000);
});
</script>
</div>
<!-- Background image -->
<img class="proto-img" src="images/cards-view-selected.png" alt="">
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
Have you given your page a link to the jQuery code. It doesn't look like you have, so the computer can't understand the
$(window).load() event or the $("#myImage").fadeOut() method. To fix this just add this line of code into the head section of your page-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
If you would prefer to use a later version of jQuery, you can look on the jQuery website for more information.
If this still doesn't work, try replacing the $("myImage").fadeOut() with $("#myImage").fadeTo("slow",0)
Hope this helps.
try
$(window).on('load', function () {
setTimeout(function () {
$("#image").fadeOut("slow", function () { // Instead of Slow you could add 5000 (5s)
// fade out complete if you need to run another event
});
}, 5000); // fade out starts after 5s
});
I am new to Phonegap (Cardova),I want to play a local mp3 file,it can play a file from url,but not a local file.My file is located in Assets --> www --> audio --> Ikhlas.mp3 , I using Jquery Mobile with multiple pages. and in each page I will have to play a different audio file with Oclick Play Button. when ever i click the button to play i got the following errors :
07-19 07:43:58.829: E/MediaPlayer(1081): Attempt to call getDuration without a valid mediaplayer,
07-19 07:43:58.838: E/MediaPlayer(1081): Attempt to perform seekTo in wrong state: mPlayer=0x0, mCurrentState=0
any help will be highly appreciated. Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="css/themes/default/my_style.css">
<link rel="stylesheet" media="screen" href="http://openfontlibrary.org/face/droid-arabic-naskh" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script>
var myaudio = new Audio('/android_asset/www/audio/Ikhlas.mp3');
function playStream() {
try {
//alert ("ffff");
myaudio.id = 'playerMyAdio';
myaudio.play();
} catch (e) {
alert('no audio support!');
}
}
function stopStream() {
try {
myaudio.pause();
} catch (e) {
alert('no audio support!');
}
}
</script>
<div data-role="page" id="Ikhlas">
<div data-role="header">
back
<a href="index.html" data-icon="home" class="ui-btn-right" class="ui-icon-nodisc"
data-iconshadow="false" data-iconpos="notext">Home</a>
</div>
<!-- /header -->
<body>
<div data-role="content">
<button onClick="playStream()">play</button><br />
<button onClick="stopStream()">stop</button><br />
</div>
<!-- /content -->
<div data-role="footer">Go Back</div>
</div>
</body>
</html>
Use Media instead of Audio
and put this line of code
var myaudio = new Media('/android_asset/www/audio/Ikhlas.mp3');
inside your function playStream()