Hi i have this html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="/style.css"/>
<link rel="icon" href="">
<title>Submit</title>
</head>
<body>
<script>
function show_alert() {
alert("Animes score is: ");
}
</script>
<div class=střed>
<form>
<div id="one"><input style="width: 500px" type="text" name="url" value="Enter myanimelist URL" onfocus="if (this.value=='Enter myanimelist URL') this.value='';"/></div>
<div id="two"><input type="image" onclick="show_alert();" name="submit" src="/Button1.png" border="0" alt="Submit" />
</div>
</form>
</div>
</body>
</html>
Now i want to get from user's url (for example: https://myanimelist.net/anime/5114/Fullmetal_Alchemist__Brotherhood) the anime's score from page's html (this part: <span itemprop="ratingValue">9.26</span> - so in this case it would be 9.26) and show it in alert box (doesn't need to be alert box thought, just somehow show it to user). Thanks for any help.
Related
I am not javascript html php expert but I would like to study I just wanted to ask for advice Is it possible to make the user can enter single or Multiple input of email in textbox separated by ; using javascript just like in outlook,yahoo,email?
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
email <input type="text" name="FirstName" value="Mickey"><br>
</form>
</body>
</html>
Just Enter the text and click in the text box emails are separated
<html lang="en">
<head>
<title>Jquery - input tags plugin example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>
</head>
<body style="background: #337AB7">
<div style="width: 500px; margin: 0px auto;">
<h2 style="font-family:cursive;">Jquery - input tags plugin example</h2>
<input name="tags" id="input-tags" style="width:500px !important" />
</div>
<script type="text/javascript">
$('#input-tags').tagsInput();
</script>
</body>
</html>
I am trying to make a Simple web app that can Search for books details using the Google Books API. The Code seems fine, but i dont understand what am I missing?
Here is the Code for Reference.:-
$(document).ready(function(){
$("#myform").submit(function(){
var search = $("#books").val();
if(search=='')
{
alert("Please enter something in the field");
}
else{
var url='';
var img='';
var title='';
var author='';
console.log("Search for "+search);
$.get("https://www.googleapis.com/books/v1/volumes?q="+search,function(response){
for(i=0;i<response.items.length;i++){
title=$('<h5>'+response.items[i].volumeInfo.title + '</h5>');
author=$('<h5>'+response.items[i].volumeInfo.authors + '</h5>');
img=$('<img><a href=' + response.items[i].volumeInfo.infoLink + '><button>Read More</button></a>');
url=response.items[i].volumeInfo.imageLinks.thumbnail;
img.attr('src',url);
title.appendTo("#result");
author.appendTo("#result");
img.appendTo("#result");
}
});
}
});
return false;
});
Here is the HTML Code for Reference:
<head>
<meta charset="UTF-8">
<title>Your Personal Library</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Antic'>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css">
</head>
<body bgcolor="#232733">
<div align="center">
<div class="login">
<h1>The School Bag</h1>
<form id="myform">
<input type="search" id="books" placeholder="Type the book name" required="required" />
<button class="btn btn-primary btn-block btn-large" >Submit</button>
</form>
</div>
<div id="result">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="myscript.js"></script>
<!--<script src="scripts/googlebooks.js"></script>-->
<script src='https://use.edgefonts.net/amaranth.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</body>
</html>
Everything is running fine, except I cannot log any response to the Console. I am not getting any response In fact. Please help. i am stuck.
The page reloads every time you submit your form, that's why you're not getting any results back.
$("#myform").submit(function(e){
e.preventDefault()
Stop it from reloading with preventDefault() and you should be good.
I have an Spring MCV 4 + HTML5 + Thymeleaf based application I can't seem to use javascript on pages.
The webapp structure is:
webapp
assets
css
img
js
i18n
messages.properties
WEB-INF
html
fragments
common.html
default.html
footer.html
header.html
login.html // exclusively for ../login.html
sidebar.html
home
welcomeSignedIn.html
client
home.html
create.html
In my login page, since it is a single page, with only a picture in the background, I have a piece of JS that works flawlessly:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/login :: loginFragment">
<meta charset="UTF-8" />
<title><th:text="#{app.name}"></label></th:text>
</head>
<body>
<div class="login-container animated fadeInDown">
<div class="loginbox bg-white">
<form th:action="#{/login}" method="post">
<div class="loginbox-title">SIGN IN</div>
<div class="loginbox-textbox">
<input type="text" id="ssoId" name="ssoId" class="form-control" placeholder="Username" />
</div>
<div class="loginbox-textbox">
<input type="password" id="password" name="password" class="form-control" placeholder="Password" />
</div>
<div class="loginbox-forgot">
Forgot Password?
</div>
<div class="loginbox-submit">
<input type="submit" class="btn btn-primary btn-block" value="Login"/>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#ssoId').focus();
});
</script>
</body>
</html>
Login page has its own fragment, because it's a single, no menus, no sidebar page. All other are.
For may default templating, I have a file called fragments/default.html reponsible for pages organization.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:include="fragments/common :: commonFragment">
<meta charset="UTF-8" />
<title th:text="#{app.name}"> </title>
</head>
<body>
<div th:id="defaultFragment" th:fragment="defaultFragment">
<div th:replace="fragments/header :: headerFragment"></div>
<div class="main-container container-fluid">
<div class="page-container">
<div th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div layout:fragment="content"></div>
</div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</body>
</html>
So that, for every page, I get included the following links and scripts from fragments/common.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:id="commonFragment" th:fragment="commonFragment">
<link rel="icon" th:href="#{/assets/img/favicon.png}" type="image/x-icon" />
<link rel="stylesheet" th:href="#{/assets/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="#{/assets/css/font-awesome.min.css}"/>
<link rel="stylesheet" th:href="#{/assets/css/beyond.min.css}"/>
<link rel="stylesheet" th:href="#{/assets/css/demo.min.css}" />
<link rel="stylesheet" th:href="#{/assets/css/animate.min.css}" />
<link rel="stylesheet" th:href="#{/assets/css/skins/darkred.min.css}" />
<link rel="stylesheet" th:href="#{http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300}" />
<!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
<script type="text/javascript" src="/assets/js/skins.min.js" th:src="#{/assets/js/skins.min.js}"></script>
<script type="text/javascript" src="/assets/js/jquery-2.0.3.min.js" th:src="#{/assets/js/jquery-2.0.3.min.js}"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js" th:src="#{/assets/js/bootstrap.min.js}"></script>
<script type="text/javascript" src="/assets/js/slimscroll/jquery.slimscroll.min.js" th:src="#{/assets/js/slimscroll/jquery.slimscroll.min.js}"></script>
<script type="text/javascript" src="/assets/js/beyond.js" th:src="#{/assets/js/beyond.js}"></script>
<script type="text/javascript" src="/assets/js/beyond.min.js" th:src="#{/assets/js/beyond.min.js}"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="container" />
</body>
</html>
My fragments/header.html is defined as:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/common :: commonFragment">
</head>
<body>
<div th:id="headerFragment" th:fragment="headerFragment">
// content
</div>
</body>
</html>
fragments/sidebar.html is very similar to `fragments/header.html, just different classes and content.
So, on every page I have on my application, I do something like this:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="fragments/default" xmlns:s="http://www.springframework.org/tags">
<head >
<title th:text="#{view.index.title}">Welcome!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div layout:fragment="content">
// content
</div>
</body
</html>
I'm sure it's something quite stupid, but I'm failing to see why can't I get javascript working on my pages, even for something quite as simple as:
<script type="javascript" >
$(function () {
alert('hello');
});
</script>
And, what's bothering (a lot!) is that if I on the browser something like:
localhost:8080/appName/assets/js/bootstrap.min.js
It will show the contents of the file.
What am I missing here?
Thanks for the input, guys! I got it working. What I did is placing the JavaScript section inside the <div layout:fragment="content">*HERE*</script> area, like on the example bellow.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="fragments/default" xmlns:s="http://www.springframework.org/tags">
<head >
<title th:text="#{view.index.title}">Welcome!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div layout:fragment="content">
<script type="text/javascript" >
*JavaScript area*
</script>
// content
</div>
</body
</html>
Hope this will save someone's precious time!
I think you have problems because there are 2 jquery files included to your fragments/common.html (check it via Firebug or something like that):
<head th:id="commonFragment" th:fragment="commonFragment">
...
<script type="text/javascript" src="/assets/js/jquery-2.0.3.min.js" th:src="#{/assets/js/jquery-2.0.3.min.js}"></script>
...
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
Try to remove one of the definitions.
$('[name="thumbnail"]').on('change', function() {
$('img.preview').prop('src', this.value);
});
<input name="thumbnail" placeholder="Post image URL here" />
<br />
<img src="http://webspace.webring.com/people/jv/vladilyich/preview.gif" class="preview" />
i'm looking for something to work like the js fiddle example.
but only i want it to work if a user were to enter img5.jpg for example, an image saved on desktop in the same directory as the index.html folder
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Image preview</title>
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#imgName').bind('input', function() {
$('#imageHolder').attr('src', $(this).val()); //concatinate path if required
});
});
</script>
</head>
<body>
<input type="text" name="" id="imgName" value="" placeholder="Input image name"><br><br>
<img name="imageHolder" id="imageHolder" src="http://i.imgur.com/zAyt4lX.jpg">
</body>
</html>
I've searched on google but didn't find answer.
Here is jsfiddle so you can see it yourself: http://jsfiddle.net/ohk6ho8a/
When you type text into the line and submit 1 div moves under another.
Any idea how to fix this?
HTML file: - other files at jsFiddle (it's pain to copy paste code here)
<!DOCTYPE html>
<html>
<head>
<title>Text Game</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="gameScript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<p id="help" style="display:none;">This is help</p>
<div id="divWrapper">
<div id="console">
<div id="placeholder"></div>
</div>
<div id="menu">
<div id="placeholder2"></div>
</div>
</div>
<form onsubmit="return false;" autocomplete="off">
<center><input type="text" id="command_line" autofocus="autofocus" size="50"></input><center>
<center><input type="submit" id="submit" size="50" ></input><center>
</form>
</body>
</html>
On your #console and #menu remove inline-block and change them both to float:left;
updated fiddle: http://jsfiddle.net/ohk6ho8a/1/
float:left;
instead of
display:inline-block;
You should float the two divs (float: left for both) and apply a clearfix style on the parent.