<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Test</h1>
<hr>
<div id="a1">
<div id="a2">
<div id="a3">
<div class="hello">
Google
</div>
</div>
</div>
</div>
</body>
</html>
The webpage is like above, and I cannot find any way to click it using AppleScript. I'm very new to AppleScript. I've searched Google, but none of them is working for above.
Try:
tell application "Safari"
tell current tab of window 1
do JavaScript "document.getElementsByClassName('hello')[0].firstElementChild.click()"
end tell
end tell
Related
I am using material design through CDN to create a filled input field, but I can't create an error message below when the user doesn't write correctly for example the email, I have tried several ways importing jquery also through CDN but it does not work properly. I have tried to see the API of material design and tried to implement it but It did not work either.
Anyhelp would be really appreciated!
Thanks
<html>
<head>
<title>Parcel Sandbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<link
href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css"
rel="stylesheet"
/>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form>
<label class="mdc-text-field mdc-text-field--filled">
<span class="mdc-text-field__ripple"></span>
<input
class="mdc-text-field__input mdc-text-field-helper-text--validation-msg"
type="email"
aria-controls="validation-msg"
required
/>
<span class="mdc-floating-label" id="my-label-id">My Label</span>
<span class="mdc-line-ripple"></span>
</label>
<p
class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"
role="alert"
>
Enter Valid Email
</p>
</form>
<script>
mdc.textField.MDCTextField.attachTo(
document.querySelector(".mdc-text-field")
);
</script>
</body>
</html>```
https://codesandbox.io/s/admiring-elion-kojst?file=/index.html
First off, jQuery wasn't needed. It didn't give any errors and it behaved the same, so I just removed it.
I found the manual here: https://material.io/develop/web/components/text-fields
If you look at the section titled:
Text field with helper text
Here you can seen the following example:
<label class="mdc-text-field mdc-text-field--filled">
<span class="mdc-text-field__ripple"></span>
<input class="mdc-text-field__input" type="text"
aria-labelledby="my-label-id"
aria-controls="my-helper-id"
aria-describedby="my-helper-id">
<span class="mdc-floating-label" id="my-label-id">My Label</span>
<span class="mdc-line-ripple"></span>
</label>
<div class="mdc-text-field-helper-line">
<div class="mdc-text-field-helper-text" id="my-helper-id" aria-hidden="true">helper text</div>
</div>
If you look carefully at the after the label, you will see some differences.
There is even more detailed information on how to use the helper text:
https://github.com/material-components/material-components-web/tree/v7.0.0/packages/mdc-textfield/helper-text/
In the API section there is a class called mdc-text-field-helper-text--persistent which you have included. This will make the helper text permanently visible, so you don't want that.
Here is the block you should have instead of the p element after the label:
<div class="mdc-text-field-helper-line">
<div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg">
Enter Valid Email
</div>
</div>
PS: would be great if you could include a link to the example you were following next time.
I would like to have a text box at the top of my website on every page that has the same text, but I don't want to edit the code individually for every webpage. How would I sync the text to all the webpages?
Include Common files using jQuery...
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="header"></div>
<div id="content">
Main Content
</div>
<script>
jQuery(document).ready(function(){
jQuery("#header").load("header.html");
});
</script>
</body>
</html>
I'm having issues getting my code: (http://codepen.io/hoschiCZ/pen/rOJmmr) to work.
<html>
<head>
<meta charset="utf-8">
<title>The title doesn't matter</title>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title"><center>MDL test</center></span>
</div>
</header>
<div class="mdl-grid" style="margin: 0px">
<div class="mdl-cell mdl-cell--hide-phone mdl-cell--1-col-tablet mdl-cell--3-col-desktop">
<!-- An empty block of space, maybe some ads here? -->
</div>
<div class="mdl-cell mdl-cell--4-col-phone mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
There is the main text/content located. This has to stay visible at all costs and screen sizes.
<br><small>Material Design Lite courtesy of Google, Inc.</small>
</div>
<div class="mdl-cell mdl-cell--hide-phone mdl-cell--1-col-tablet mdl-cell--3-col-desktop">
<!-- An empty block of space, maybe some ads here? -->
</div>
</div>
</div>
</body>
</html>
The intended columns layout & counts are as follows:
Desktop 3-6-3
Tablet 1-6-1
Phone 0-4-0
The outer numbers/cols are probably space for ads or just empty space, is just looks bad otherwise.
The problem is: it's not responsive, even after refreshing pages. I tried Chromium Linux mobile/tablet emulation and Nexus 5 Firefox & Chrome. Everywhere, the desktop version is used.
MDL requires you to include this in the header.
<meta name="viewport" content="width=device-width, initial-scale=1">
Btw I didn't see it written in the Getting Started guide, maybe add it there?
Working CodePen
Add
<meta name="viewport" content="width=device-width, initial-scale=1">
into
<head></head>
Your problem is that you haven't wrapped your .mdl-grid in a .mdl-layout__content
<div class="mdl-layout__content">
<div class="mdl-grid">row</div>
</div>
I made a jsfiddle example for you.
Just expand the window slider and you'll see what you are desiring.
I do have a small issue i can't solved despite reading on internet.
I'm learning node.js, express.js, ejs.
I create a small app that tries to display a dynamic webpage on my local server.
The code is working but not the display of the pictures! (the stylesheet works fine)
here is my index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<% include partials/head %>
</head>
<body class="container">
<header>
<% include partials/header %>
</header>
<main>
<h1><%= title %> </h1>
<img scr="/images/logo_small.jpg" alt="logo" />
<p> Welcome to <%= title %></p>
</main>
<footer>
<% include partials/footer %>
</footer>
</body>
</html>
In the main apps i wrote:
app.use(express.static(path.join(__dirname, 'public')));
And finally i put the images in ./public/images/logo_small.jpg.
The display shows "logo" instead of the pictures. When I go this URL
http://localhost:3000/images/logo_small.jpg
Firefox shows me the image. it is frustrating!
I miss something here, but i don't see what. Any idea ?
I have a web app were the entire layout remains constant except for one <div>. Currently, I'm just using routes to handle links and it seems like quite a waste to reload the rest of the layout.ejs file where the only thing I wish to change is my <div>.
What would I have to change in my layout.ejs file? Here is my current file:
<!DOCTYPE html>
<html lan="en">
<head>
<title><%= title %></title>
<link rel="stylesheet" href="/stylesheets/reset.css">
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="/nowjs/now.js"></script>
<script src="/javascripts/chat.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="chat">
<input type="text" id="text-input">
<input type="button" value="Send" id="send-button">
</div>
<div id="content">
<%- body %>
</div>
<div id="rooms">
</div>
<div id="footer">
<div id="footer_links">
Home | About | Contact
</div>
</div>
</div>
</body>
</html>
I was thinking about using AJAX to use this, but I've heard some good things about using partial views. I'm just not sure at all about how to set this up. Also, I've heard that it's possible to use WebSockets with partial views instead of AJAX. Is this a good idea, or even possible?
Sorry this may be straightforward. I'm having a difficult time with the documentation.
Thanks!
I just worked it out.
You can call `partial(filename)` in the view to load the partial. say we use EJS, and there is three files in `views/`:
1. layout.ejs
2. index.ejs
3. header.ejs
and the content of index.ejs is :
then, start the server, browser it, you will see `header.ejs` is loaded to `index.ejs`.
!!!　UPDATE
In the express version >=3.0, there is no partial() any more. But we can use <% include xxx.file %>, or just use another module: "express-partials". Please search it on Github.