I have the following code:
<script type='text/javascript'>
$(document).ready(function(){
<!-- /$('.mc_col_header tr:odd').css({'background':'#faf8f8'}); -->
<!-- /$('.mc_col_header tr:even').css({'background':'#f5f0f0'}); -->
<!-- /$('.mc_col_header tr:first').css({'background':'#fff'}); -->
<!-- /$('.mc_col_header td',$('.mc_col_header tr:first')).css({'background':'#fff'}); -->
<!-- /paginator -->
paginatorPosition = 'bottom';
separator = ' ';
paginatorStyle = 2;
enablePageOfOption = false;
enableSelectNoItems = false;
firstPageSymbol = "First";
nextPageSymbol = "Next »";
previousPageSymbol = "« Prev";
lastPageSymbol = "Last";
itemsPerPage = parseInt($('input.questions_per_page').attr('value'));
$('.questions').pagination();
});
</script>
And I would like to access the following using Watir:
nextPageSymbol = "Next »";
How do I implement it?
I solved the problem by finding the element using Firebug (thanks!), and created a link access using xpath:
#browser.link(:xpath, 'the_path_generated').click
Related
My form has a Master page, i.e., cannot use a popup Form.
I used the code below to create a popup menu associated with one of the lists, but the popup appears BELOW my list items (I can only see the last two items!) and it appears no matter which list I right click on.
Any help will be appreciated.
Here is my code (modified from a web site example):
<div id="contextMenu" class="context-menu"
style="display: none">
<ul>
<li>New</li>
<li>Edit</li>
<li>View</li>
<li><a href="#">Copy
<li>Refresh</li>
</ul>
</div>
<script type="text/javascript">
document.getElementById('# <% = lstContactsClerk.ClientID %>').oncontextmenu = rightClick;
function rightClick(clickEvent) {
clickEvent.preventDefault();
// return false;
}
</script>
<script>
document.onclick = hideMenu;
document.oncontextmenu = rightClick;
function hideMenu() {
document.getElementById("contextMenu")
.style.display = "none"
}
function rightClick(e) {
e.preventDefault();
if (document.getElementById("contextMenu")
.style.display == "block")
hideMenu();
else {
var menu = document.getElementById("contextMenu")
menu.style.display = 'block';
menu.style.left = e.pageX + "px";
menu.style.top = e.pageY + "px";
}
}
</script>
I want a standard layout having a top-app-bar (in red in the image), and a drawer (an open-close drawer at the left)
The issue is that the top app bar should be fixed, but the body-component (the one having some forms, just under the top-app-bar) is missing a padding on the top. In the image, there is a textInputField, but we just see the line...So it is not correct.
5 ago, I was kind of also suffuring to try to have theses two components working togezer with material design, without any bug (some low quality demo on the net, never satisfying all the combinations... when we know this pattern is the most used (an open-close drawer, and a top app bar).
I am looking for the 'good' code to implement a layout having a drawer (openable) and a top app bar, I had never understood the correct way to combine them, any help there ? Anyway, the solution to correct this padding error is also interesting me.
there is code (using svelte)
using https://sveltematerialui.com/demo/top-app-bar/
// ###
// ### GLOBAL CSS
// ###
import '../app.css';
// ###
// ### GLOBAL CSS
// ###
import TopAppBar, { Row, Section, Title } from '#smui/top-app-bar'; // AutoAdjust
import IconButton from '#smui/icon-button';
import Drawer, { AppContent, Content, Header, Subtitle } from '#smui/drawer';
import List, { Item, Text } from '#smui/list';
import { onMount } from 'svelte';
import { zoomLevel } from '$stores/S_StoreApp';
import { page } from '$app/stores';
import { goto } from '$app/navigation';
// import LoremIpsum from '$lib/LoremIpsum.svelte';
// import type { TopAppBarComponentDev } from '#smui/top-app-bar';
// let topAppBar: TopAppBarComponentDev;
// import Tab from '#smui/tab'; todo
// import TabBar from '#smui/tab-bar'; todo
// import Button from '#smui/button';
// import type { SnackbarComponentDev } from '#smui/snackbar';
// import Snackbar, { Label } from '#smui/snackbar';
// import Snackbar, { Actions, Label } from '#smui/snackbar';
// import Button from '#smui/button';
// let snackbarWithoutClose: SnackbarComponentDev; todo
// ---
// ---
// ---
const arr = [
'auth',
'contacts-tail',
'contacts-md',
'fps',
'liked',
// 'liked-vs',
'scripts',
'-------------------',
'dashboard--100$',
'dashboard-scrapper',
'profile-detail',
'classic-md',
'classic-tailwind',
'cartes groupée',
'CRM phone',
'MAP',
'CALENDAR',
'devis-facture',
'turisme'
];
// let active = '';
// --- drawer
let drawerActive = '';
let open = false;
// let active = 'Gray Kittens';
// --- page - url
let currentUrl: string = $page.url.pathname;
// ---
$: currentUrl = $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1);
// ---
onMount(() => {
// currentUrl = $page.url.pathname;
});
</script>
<!-- ### -->
<!-- ### layout -->
<!-- ### -->
<!-- ### NEST TOPAPP et DRAWER - https:///material-components/material-components-web/tree/master/packages/-drawer -->
<!-- _ -->
<!-- _ -->
<!-- <div class="drawer-container"> -->
<Drawer variant="dismissible" bind:open>
<!-- - -->
<Header>
<Title>Tinax</Title>
<Subtitle> 3.0</Subtitle>
</Header>
<!-- - -->
<Content>
<!-- * -->
<List>
{#each arr as item}
<Item
href="javascript:void(0)"
on:click={() => {
drawerActive = item;
goto(item);
}}
activated={drawerActive === item}
>
<Text>{item}</Text>
</Item>
{/each}
</List>
<!-- * -->
</Content>
<!-- - -->
</Drawer>
<!-- _ -->
<!-- _ -->
<!-- --- DRAWER >> content -->
<AppContent class="app-content">
<!-- - -->
<!-- TOP APP BAR-->
<!-- <TopAppBar bind:this={topAppBar} variant="fixed" dense> -->
<TopAppBar variant="fixed" dense>
<!-- * -->
<Row>
<Section on:click={() => (open = !open)}>
<IconButton class="material-icons">menu</IconButton>
<Title>{currentUrl}</Title>
</Section>
<Section align="end" toolbar>
<IconButton
class="material-icons"
aria-label="Download"
on:click={() => {
zoomLevel.update((n) => n - 1);
}}>zoom_out</IconButton
>
<IconButton
class="material-icons"
aria-label="Download"
on:click={() => {
zoomLevel.update((n) => n + 1);
}}>zoom_in</IconButton
>
</Section>
</Row>
<!-- * -->
</TopAppBar>
<!-- - -->
<!-- TOPAAPBAR >> content -->
<!-- {topAppBar} -->
<!-- <AutoAdjust> -->
<!-- * -->
<!-- todo -->
<!-- <TabBar tabs={arr} let:tab bind:active>
<Tab
{tab}
on:click={() => {
active = tab;
goto(active);
snackbarWithoutClose.open();
}}
>
<Label>{tab}</Label>
</Tab>
</TabBar> -->
<!-- * -->
<!-- ### MAIN -->
<main class="main-content">
<slot />
</main>
<!-- * -->
<!-- !! snackbarWithClose.open() -->
<!-- <Snackbar bind:this={snackbarWithoutClose}>
<Label>The current page is >> {active}</Label>
</Snackbar> -->
<!-- * -->
<!-- </AutoAdjust> -->
<!-- - -->
</AppContent>
I have this simple, but not very well formatted html page with all it's mistakes:
<HTML>
<head>
<title>Official game sheet</title>
</head>
<body class="sheet">
</BODY>
</HTML>
Tried to apply an xpath //title on the document parsed from this html.
const document = parse5.parse(xmlString);
const xhtml = xmlser.serializeToString(document);
const doc = new dom().parseFromString(xhtml);
const select = xpath.useNamespaces({
"x": "http://www.w3.org/1999/xhtml"
});
const nodes = select("//title", doc);
console.log(nodes);
Tried the solution from here without success. The returned nodes list is empty.
Here you can see the problem.
Here you go #neptune, you don't need parse5 nor xmlser all what is needed is xpath and xmldom.
var xpath = require('xpath');
var dom = require('xmldom').DOMParser;
var xmlString = `
<HTML>
<head>
<title>Official game sheet</title>
<custom>Here we are</custom>
<body class="sheet">
</BODY>
</HTML>`;
//const document = parse5.parse(xmlString);
//const xhtml = xmlser.serializeToString(document);
const doc = new dom().parseFromString(xmlString);
const nodes = xpath.select("//custom", doc);
//console.log(document);
console.log(nodes[0].localName + ": " + nodes[0].firstChild.data);
console.log("Node: " + nodes[0].toString());
please correct the lines to get title
const nodes = select("//x:title//text()", doc);
console.log(nodes[0].data)
I have a MathJax demo that can be viewed at Online Demo.
In this demo, I have some Tex markup within a div that gets rendered perfectly by MathJax.
But, if I programatically add some Tex markup to the above div by clicking Add Math Markup button followed by clicking Rerender Math Markup button, then it results in repeated rendering of previously rendered Math markup. This can be seen in following video: Math being rendered repeatedly
All I am doing when Rerender Math Markup button is clicked is calling the following method MathJax.Hub.Typset(divElement). The divElement is the div to which Tex markup was added programatically.
Demo code for my situation
<script>
function reRenderMath() {
var div = document.getElementById("mathMarkup");
//render Math for newly added Tex markup
MathJax.Hub.Typeset(div);
}
function addMath() {
var div = document.getElementById("mathMarkup");
div.innerHTML = div.innerHTML + "$$\sin^{-1}.6$$";
document.getElementById("btnRenderMath").disabled = false;
}
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<button type="button" onclick="addMath();return false;" id="btnAddMath" >Add Math Markup</button>
<button type="button" onclick="reRenderMath();return false;" id="btnRenderMath" disabled>Rerender Math Markup</button>
<div id="mathMarkup">
$$x^2 = x +2$$
</div>
Screen shot of repeated rendering
#Sunil thanks for the answer
Summarizing:
Required script:
var MathJaxUtils = (function () {
let obj = {};
let scripts = null;
obj.render = function (element) {
scripts = new Array();
$(element).find("script[id^='MathJax-Element']").each(function () {
scripts.push({
displayElement: $(this).prev("div")[0],
scriptElement: this
});
});
//remove all html within MathJax script tags so it doesn't get typset again when Typeset method is called
$(element).find("script[id^='MathJax-Element']").remove();
//render Math using original MathJax API and in callback re-insert the MathJax script elements in their original positions
MathJax.Hub.Queue(["Typeset", MathJax.Hub, element, typeSetDone]);
};
//callback for Typeset method
function typeSetDone() {
for (var i = 0; i < scripts.length; i++) {
$(scripts[i].displayElement).after(scripts[i].scriptElement);
}
//reset scripts variable
scripts = [];
};
return obj;
}());
Basic use:
let elem = document.getElementById("mathContainer");
MathJaxUtils.render(elem);
Demo:
math-jax-test
I need to add Facebook Pixel Code script in head section of every page.
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','//connect.facebook.net/en_US/fbevents.js');
fbq('init', 'xxx');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=xxx&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
How can get this?
I recently started working on orchard. I read about edit cshtml or edit the theme...
Thanks
There should be a Layout.cshtml file in your themes directory, where you can add the script like this:
#using ( Script.Head() )
{
<!-- Facebook Pixel Code -->
<script>
!function (f, b, e, v, n, t, s) {
if (f.fbq) return; n = f.fbq = function () {
n.callMethod ?
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
}; if (!f._fbq) f._fbq = n;
n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0;
t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s)
}(window,
document, 'script', '//connect.facebook.net/en_US/fbevents.js');
fbq('init', 'xxx');
fbq('track', "PageView");</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=xxx&ev=PageView&noscript=1" />
</noscript>
<!-- End Facebook Pixel Code -->
}
Alternatively, you could copy the Document.cshtml located in *Orchard.Web\Core\Shapes\Views* into your theme and insert the script directly in the head section.