Hi I am trying to create a jquery.terminal. I tried to follow this article, here it uses the body tag, I wish to use only a div for the terminal area not the whole body. Tried accessing the <div id="myterm"></div> like
<script>
$('#myterm').terminal({
hello: function (name) {
this.echo('Hello, ' + name + '. Welcome to MyTerm');
}
},
{
greetings: 'Checkout help !'
});
</script>
But didn't work !
Yes it does work.
Try hello world on the prompt
$('#myterm').terminal({
hello: function (name) {
this.echo('Hello, ' + name + '. Welcome to MyTerm');
}
},
{
greetings: 'Checkout help !'
});
#myterm {
height: 300px;
border: 1pxs solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.34.0/js/jquery.terminal.min.js" integrity="sha512-lfkU/Qku0yOVZEYANlw2mOv7fpHFdS1E62UT7vJ55k22OB+xgRNNa6Cdor4Lugl4jhDjX29lJAG12X/OHFe8JQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.34.0/css/jquery.terminal.css" integrity="sha512-lT1/Sb6Bu4LaJJoTsxNZnlvt7pjuntBoSqSMJY7MxG5Yl1XgxsXA6jcJinPU0lx5eEsnudBE1ubzHSYR/W8xTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="myterm"></div>
Related
I am trying to implement VWO into my website following the steps here and I have added the script tag inside of a NextJs Head tag like bellow:
<Head>
<script type='text/javascript' id='vwoCode'>
{`window._vwo_code=window._vwo_code || (function() {
var account_id= SOME_ID,
version=11,
settings_tolerance=1,
library_tolerance=1,
use_existing_jquery=false,
is_spa=1,
hide_element='body',
/* DO NOT EDIT BELOW THIS LINE */
f=false,d=document,code={use_existing_jquery:function(){return use_existing_jquery},library_tolerance:function(){return library_tolerance},finish:function(){if(!f){f = true;var e=d.getElementById('_vis_opt_path_hides');if(e)e.parentNode.code.init();return code;}());`}
</script>
</Head>
the issue is the quotes "'" are getting encoded by HTML into ' so for example the hide_element='body', is converted into hide_element='body', which is why I am facing an error.
how can I fix this issue? any suggestion?
You need to import "Script" module and use "window._vwo_code" wherever you have accessed "_vwo_code" directly. You can use the below code snippet and use your VWO account ID in the code for "var account_id".
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
<Script
id='vwoCode'
strategy="beforeInteractive">
{`window._vwo_code=window._vwo_code || (function() {
var account_id=YOUR_ACCOUNT_ID,
version=1.3,
settings_tolerance=2000,
library_tolerance=2500,
use_existing_jquery=false,
is_spa=1,
hide_element='body',
/* DO NOT EDIT BELOW THIS LINE */
f=false,d=document,code={use_existing_jquery:function(){return use_existing_jquery},library_tolerance:function(){return library_tolerance},finish:function(){if(!f){f=true;var e=d.getElementById('_vis_opt_path_hides');if(e)e.parentNode.removeChild(e)}},finished:function(){return f},load:function(e){var t=d.createElement('script');t.fetchPriority='high';t.src=e;t.type='text/javascript';t.innerText;t.onerror=function(){window._vwo_code.finish()};d.getElementsByTagName('head')[0].appendChild(t)},init:function(){window.settings_timer=setTimeout(function(){window._vwo_code.finish()},settings_tolerance);var e=d.createElement('style'),t=hide_element?hide_element+'{opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important;}':'',i=d.getElementsByTagName('head')[0];e.setAttribute('id','_vis_opt_path_hides');e.setAttribute('nonce',document.querySelector('#vwoCode').nonce);e.setAttribute('type','text/css');if(e.styleSheet)e.styleSheet.cssText=t;else e.appendChild(d.createTextNode(t));i.appendChild(e);this.load('https://dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(d.URL)+'&f='+ +is_spa+'&vn='+version);return settings_timer}};window._vwo_settings_timer = code.init();return code;}());
`}
</Script>
</body>
</Html>
)
}
would the use of dangerouslySetInnerHTML in the script tag solve this issue?
<Head>
<script type='text/javascript' id='vwoCode'
dangerouslySetInnerHTML={{
__html: `window._vwo_code=window._vwo_code || (function() {
var account_id= SOME_ID,
version=11,
settings_tolerance=1,
library_tolerance=1,
use_existing_jquery=false,
is_spa=1,
hide_element='body',
/* DO NOT EDIT BELOW THIS LINE */
f=false,d=document,code={use_existing_jquery:function(){return use_existing_jquery},library_tolerance:function(){return library_tolerance},finish:function(){if(!f){f = true;var e=d.getElementById('_vis_opt_path_hides');if(e)e.parentNode.code.init();return code;}());`}
`}}>
</script>
</Head>
I am using Jquery Data table to show my data, which cames from an ajax call and a json file.
I'm using two tables, the first one (#list1) shows data from sql, the second one (#list2) is filled when I click on one of the rows in the first table (a click event). I was strougeling with the reload data, I used clear() and draw() to reload the table, but after using this, the second table (#list2) stop displaying the info, only if you go and click on it will appear the data. I guess ist the way I'm reloading the tables but no other method has work for me.
Here is my jquery code:
$(document).ready(
function()
{
$('#list1').DataTable(
{
dom: 'lfrtipB', //elementos del DOM y orden
buttons: ['csv', 'excel', 'pdf', 'print']
});
$('#list2').DataTable(
{
responsive: true,
searching: false,
});
$("#list1 tr").click(
function ()
{
var cod = ($(this).find("td:first").text());
$.ajax({
url: 'https://www.urlblabla.php',
data: {
action: 'usuario',
idfiltro: cod
},
type :'post',
success: function(sql)
{
var t= $('#list2').DataTable().clear().draw();
$.each(JSON.parse(sql), function(idx, opt)
{
t.row.add([ opt.1, opt.2,opt.3,opt.4]).draw(); //this was my mistake I add the draw() method
});
}//endsuccess
}); //endajax
}//end function
);//end click
}
);//fin document ready
I tried to use the reload() function but the browser gives me a function not found error
And here is my html code (quite simple)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/jquery-ui-1.10.2.custom.min.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"/>
<link href="libreriasWS/dataTables.bootstrap5.min.css"rel="stylesheet" type="text/css"/>
<link href="libreriasWS/jquery.dataTables.min.css"rel="stylesheet" type="text/css"/>
<link href="libreriasWS/datatable_style.css"rel="stylesheet" type="text/css"/>
<link href="libreriasWS/buttons.dataTables.min.css"rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript" src="libreriasWS/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="libreriasWS/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="libreriasWS/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
</head>
<body>
<center>
<div id="content" class="container">
<div class="datatable-inner table-responsive ps ps--active-x">
<h4>Users</h4>
<table id="list1" class="table datatable-table hover">
<thead class="datatable-header">
<tr>
<th>ID</th>
<th>name</th>
<th>Line</th>
</tr>
</thead>
<tbody>
<?php
$cli = $soapClient->getData("","array_data","");
$result_array = json_decode($cli);
for ($i=0; $i < count($result_array); $i++)
{
print '<tr>';
print '<td>'.$data_array[$i]->{'Id'} .'</td>';
print '<td>'.$data_array[$i]->{'name'} .'</td>';
print '<td>'.$data_array[$i]->{'line'} .'</td>';
print '</tr>';
}//finfor
?>
</tbody>
</table>
</div>
<div class="datatable-inner table-responsive ps ps--active-x">
<h6>Users</h6>
<table id="list2" class="table datatable-table hover">
<thead class="datatable-header">
<tr>
<th>ID</th>
<th>Descripcion</th>
<th>MAC</th>
<th>Cliente</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<br/>
</div> <!--Fin Tab Content-->
</div> <!--Fin Tab Content contaniner-->
</center>
</body>
If you're trying to clear and repopulate the second DataTable when you click on a different row in the first table, you'll need 'destroy: true' in your initialisation. You can add an Ajax call in the DataTable initialisation as well.
It might be better to have the second table initialised in a separate function, then pass the variable from table 1 as a parameter e.g.
$(document).ready(function () {
$("#list1 tr").click( function () {
var cod = ($(this).find("td:first").text());
SecondTableInitialise(cod);
});
});
function SecondTableInitialise(cod) {
$("#table2").DataTable({
"ajax": {
"url": "methodURL" + cod,
"dataSrc": "tableSource"
},
"columns": [
{ "data": "Column1Data" },
{ "data": "Column2Data" },
{ "data": "Column3Data" }
],
"destroy": true
});
}
I want to integrating Google Sign-In into your google script, somebody help me how do i do ? step by step. I had file html home! tks homie.
To integrate Google Sign-in to your web you can follow the process mentioned in the bellow article:
https://developers.google.com/identity/sign-in/web/sign-in
Also If you need additional information about how to integrate HTML in your code you can read the following link:
https://developers.google.com/apps-script/guides/html/
Finally, here is an implementation example about how to do it (only clientID missing):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="google-signin-client_id" content="#clientId">
<title>Oauth2 web</title>
<!-- Google library -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Jquery library to print the information easier -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Bootstrap library for the button style-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="profileinfo">
</div>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
$("#profileinfo").append("<h2>Sup " + profile.getName() + ", welcome home my friend</h2>");
$("#profileinfo").append("<img style='width:250px;height:250px' src='" + profile.getImageUrl() + "'><br><br>");
$("#profileinfo").append("<p>Your email is: " + profile.getEmail() + "</p>");
}
</script>
<button type="button" class="btn btn-danger" onclick="signOut();">Sign out</button>
<script>
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
$("#profileinfo").empty();
$("#profileinfo").append("<h2>Goodbye old friend</h2>");
});
}
</script>
</body>
</html>
.load() only works on files coming from a server, so it will work later as I'm going to put this on a server
Edit: This code works on firefox but not on chrome
I've been trying to use ajax to load a webpage after selecting an option but the script doesn't even seem to load
here's the script + html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="DaVinciRace.css" />
<title> Da Vinci Race 2014-2015 </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
</head>
<body style="background:#f2f2f2;">
<div id="logo">
<img src="Resources\DVRLogo.png"/>
<!-- <p class="text">Da Vinci Race</p> -->
</div>
<div id="options" style="background:#0c0c0c; float:right;">
<div class="menu">
<div class="chronometre" ></div>
</div>
</div>
<div id="DVRChrono">
</div>
<script>
$(document).ready(function(){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
});
</script>
</body>
</html>
the document "Chronometre.html" is in the same folder as this html page
I feel like I'm missing something obvious but can't for the life of me figure out what it is
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script>
(function($){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
})(jQuery)
</script>
This isn't adding a click handler:
$("#options").on("click", ".chronometre", function() {
// code
});
Because it executes before the #options element exists on the page. The code is executing without error, the jQuery selector simply isn't finding anything. So there are no elements to which a handler can be attached.
You can fix this either by moving the code to the end of the page or by wrapping it in the document.ready handler:
$(function() {
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
});
});
Additionally, your script tags are broken. Each tag should have either a src or content, but not both. Separate them:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
// your code
</script>
I have implemented bxslider in our site where slider has been coming in dynamic way like in while loop. Here there is dynamic code in while loop like:
$html_img = '<div class="sch_rel_img">';
if(count($node_img)>1)
{
$html_img .='<link href="'.base_path().drupal_get_path('module','demonz').'/css/jquery.bxslider.css" type="text/css" rel="stylesheet" media="screen" charset="utf-8"/>';
$html_img .='<script src="'.base_path().'sites/default/themes/demonz/js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>';
$html_img .='<script src="'.base_path().drupal_get_path('module','pubclub').'/js/jquery.searchres_bxslider.min.js" type="text/javascript" charset="utf-8"></script>';
$html_img .='<script type="text/javascript" src="'.base_path().drupal_get_path('module','pubclub').'/js/search_carousel.js" charset="utf-8"></script>';
//$html_img .="<input type='hidden' name='nid' id='nid' value='".$nid."' />";
//$car = 1;
//$html_img .='<div class="schnext" id="schnext_'.$nid.'"></div><ul class="carousel_'.$nid.'">';
$html_img .='<div class="schnext" id="schnext"></div><ul class="carousel" id="carousel_'.$nid.'">';
foreach($node_img as $img)
{
$image = $img['filepath'];
$html_img .="<li>";
$html_img .="<img src='".$image."' width='98%' height='96%' />";
$html_img .="</li>";
}
/*$html_img .= "<li><img src='".base_path()."sites/default/files/images/events/17b9e1fb62623361831924370675857fe73225b8/big-event.jpg' width='98%' height='96%' /></li>";
$html_img .= "<li><img src='".base_path()."sites/default/files/images/events/17b9e1fb62623361831924370675857fe73225b8/innquizitive_thursday_screen_ad.jpg' width='98%' height='96%' /></li>";*/
//$html_img .='</ul><div class="schprev" id="schprev_'.$nid.'"></div>';
$html_img .='</ul><div class="schprev" id="schprev"></div>';
}
$html_img .='</div>';
And my bxslider script is
<script type="text/javascript">
var slider = $(".carousel").bxSlider({
mode:'horizontal',
auto:false,
pager:false,
moveSlides:1,
nextSelector: '#schnext',
prevSelector: '#schprev'
/*nextText: 'Onward →',
prevText: '← Go back'*/
});
</script>
how to implement this thing to get multiple carousel in one page. I can't understand how to build up the js file of bxslider in dynamic way as well as above php script's code.
I tried this thing with $('.carousel').each(function() { slidercode }); but not desired result.
If any one knows about this type of solution, please help me.
Thank you
As you have muiltiple DIVs with a unique carousel_* ID just use them for the selector.
$('#carousel_1').bxslider({ ... });
$('#carousel_2').bxslider({ ... });
...
Or if they all have the same options:
$('.carousel').each(function(index,item) {
$(item).bxslider({ ... });
});
Multiple slideshows are also explained in the docs from bxslider.