I tried to use jQuery so I can make the cursor a pointer but it doesn't work. Basically jQuery doesn't work and I don't know what to do because I really tried everything and checked twice.
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="ShowMeHowMainPageCSS.css"/>
</head>
<body>
<div class = "Parts" id = "part1">News Feed</div>
<div class = "Parts" id = "part2">Blog</div>
<div class = "Parts" id = "part3">Video</div>
<div class = "Parts" id = "part4">My Profile</div>
<div id = "menu">
<div id = "newsFeedMenu" class = "circle"></div>
<div id = "BlogMenu" class = "circle"></div>
<div id = "videoToturialsMenu" class = "circle"></div>
<div id = "MyProfileMenu" class = "circle"></div>
</div>
<script>
$(document).ready(function(){
$('.circle').hover(function(){
$(this).css('cursor','pointer');
$('#menu').css('opacity','1');
});
});
</script>
<script type ="text/javascript" src = "jQueryF.js"></script>
<script type ="text/javascript" src = "showMeHowJQUERY.js"></script>
</body>
</html>
you need to load the javascript file first before you define anything using them
put this as the top of your code inside the head tag
<script type ="text/javascript" src = "jQueryF.js"></script>
<script type ="text/javascript" src = "showMeHowJQUERY.js"></script>
Related
I want to assign a value to hidden input then grab that value from next section of javascript using input id. So it will alert the value as per hidden input value which assigned from the first section of javascript. However, it looks not useful this is important for my current task. I have to push value to HTML then get it back again in javascript variable. Let me know if you have any solution.
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>
</head>
<body>
<script>
var myVal = "some string";
$("#foo").val(myVal);
</script>
<input type="hidden" name="foo" id="foo" value="">
<script>
var doo = "";
doo = $(this).find("#foo").val();
if (doo != "") {
alert(doo);
}else{
alert("doo is null");
}
</script>
</body>
</html>
You can use $(document).ready() method which waits until all DOM elements are rendered. Then executes the JS code. You can read more about it here
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var myVal = "some string";
$("#foo").val(myVal);
});
</script>
<input type="hidden" name="foo" id="foo" value="">
<script>
$(document).ready(function(){
var doo = "";
doo = $(this).find("#foo").val();
if (doo != "") {
alert(doo);
}else{
alert("doo is null");
}
});
</script>
</body>
</html>
Using HTMLFormControlsCollection of the Web API allows us to reference any and all form elements very easily:
Example
/* Find the first form of a page without knowing it's .class or #id */
// HTMLFormControlsCollection // Common way
var form = document.forms[0]; var form = document.getElementsByTagName('form')[0];
Demo
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
</head>
<body>
<form id='A'>
<input id="X" name="X">
<output id='Y' name='Y'></output>
<input id='Z' name='Z' type='hidden'>
</form>
<script>
var F = document.forms.A;
F.oninput = function() {
var X = F.X.value;
var Y = F.Y;
var Z = F.Z;
Y.value = X;
Z.value = X;
}
</script>
</body>
</html>
I'm extremely new to ReactJS and am trying to use it to make a simple fitness web app. Currently, if I was to do this using JQuery, I would end up with a thousand lines in a single file, which isn't what I want, so I'm trying to get as much externalisation in as possible while keeping one html file. The premise is that when the user hits the page, the "Main" class will be rendered to the screen. When they press one of the video images, the DOM will unrender the main and replace it with the specific page linked to the video. As thing stand, I'm trying to create large classes full of html to render each time, and it's throwing a simple error that I don't understand enough to fix. Could you explain to me what I'm doing wrong.
Index.html
<!DOCTYPE html>
<html>
<head>
<title> Get Fit </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500' rel='stylesheet' type='text/css'>
<link href = "css/styles.css" rel = "stylesheet">
<script type = "text/javascript" src = "js/male.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("button").removeClass("active");
$(this).addClass("active");
});
});
</script>
</head>
<body>
</body>
</html>
Male.js
var Main = React.createClass({
render: function() {
return (
<div class = "header">
<img class = "img-responsive" src = "assets/header.png" alt = "header" />
</div>
<div class = "content">
<div class = "genderSelection">
<h1 class = "title"> YOUR WORKOUT PLAN </h1>
<button id = "male"> Male </button>
<button id = "female"> Female </button>
</div>
<div class = "dayContainer">
<h2 class = "workoutDay"> Monday </h2>
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-1" />
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-2" />
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-3" />
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-4" />
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-5" />
<img class = "video img-responsive" src = "assets/back.png" alt = "monday-6" />
</div>
</div>
<div class = "footer">
</div>
);
}
});
var MaleMonday1 = React.createClass({
render: function() {
return (
);
}
});
ReactDOM.render(
<Main />
);
Any links to helpful documentation is also much appreciated, the documentation I followed for this has seemed to lead me in to trouble so far.
Your current problem is two fold, first off standard HTML attributes aren't always used in React. For example, class is className, for is htmlFor. See here which attributes are supported.
Secondly, React needs to return a single DOM node which is why you're not seeing anything on screen and getting the error: Adjacent XJS elements must be wrapped in an enclosing tag.
If you wrap your entire HTML that you currently have in your render function within a div tag you'll have much more luck!
render: function() {
return (
<div>
<div className = "header">
</div>
<div className="content">
<div className= "genderSelection">
</div>
<div className = "dayContainer">
</div>
</div>
<div className="footer">
</div>
</div>
);
}
In addition to #limelights answer:
Thirdly, your <body> is empty. Try adding something like:
<body>
<div id="react-container"></div>
</body>
Fourth, your ReactDOM.render() needs a destination in the DOM to put your component. (documentation here) E.g:
ReactDOM.render(
<Main />,
document.getElementByID("react-container")
);
As for your question about general documentation, react's own tutorials (here) are a good place to start.
this is my code html:
<html>
<head>
</head>
<body>
<input class="search" placeholder="Search" />
<div id="users">
<ul class="list">
</div>
<script src="jquery-1.10.1.min.js" ></script>
<script src="list.min.js"></script>
<script src="code.js"></script>
</body>
</html>
and this is my code js:
var test = [{name:"Joo",born:1986,source:"impat.png"},
{name:"Jonas",born:1888,source:"impat.png"}];
var options = {
item: "<li><img src='source'/><h3 class='name'></h3><p class='born'></p></li>"
}
var listObj = new List('users', options,test);
I know it doesn't work but I hope someone offers me a good solution
Change your options to class like so and it will input the src:
var options = {
item: "<li><img class='source'/><h3 class='name'></h3><p class='born'></p></li>"
}
I am practicing Windows Phone development using WinJS and I have the following code which parses JSON received from a particular URL. And using the images to be bound to a list view in an HTML page,
JavaScript code:
WinJS.xhr({ url: urlToBeUsed }).then(
function (sportsResponse) {
var sportsJSON = JSON.parse(sportsResponse.responseText);
var listItems = sportsJSON.Videos.Data;
for (var i = 0; i < listItems.length; i++) {
var imageList = listItems[i].Items;
var count = imageList.length;
if (count > 0) {
listItems[i].Items[0].Images.forEach(imageIteration);
function imageIteration(value, index, array) {
var picture = value.Url;
var name = value.title;
sportsImageList.push({
title: name,
picture: picture
});
}
}
}
imageList.itemDataSource = sportsImageList.dataSource;
})
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- WinJS references -->
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
<script src="/js/navigator.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/home/home.css" rel="stylesheet" />
<script src="/pages/sports/sports.js"></script>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage" style="width:100%;height:100%;padding:10px">
<div class="myTemplate" data-win-control="WinJS.Binding.Template">
<div class="myItem">
<img data-win-bind="src:picture" style="width:100px;height:100px" />
</div>
</div>
<div id="imageList" data-win-control="WinJS.UI.ListView" data-win-bind="winControl.itemDataSource:sportsImageList.dataSource" data-win-options="{itemTemplate:select('.myTemplate')}"></div>
</div>
</body>
</html>
I have tried many ways to bind the URL to the Image, but on the screen I can only see the links but not the actual images.
Where am I wrong?
All help and suggestions appreciated.
Thank you!
I believe your error is in your assignment line, remember that itemDataSource is a property of the ListView control. As it is in your code you're assigning that property to the imageList element.
Change it to this:
imageList.winControl.itemDataSource = sportsImageList.dataSource;
Here is the HTML file I am using. I have no idea why the JS doesn't run. The console does not print any errors. Ideas?
<!doctype HTML>
<html>
<head>
<title>ProjectShare</title>
<!-- <script src = "socket.io/socket.io.js"></script> -->
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"/>
<script>
//Make sure DOM is ready before mucking around.
alert("Before jQuery.");
$(document).ready(function()
{
alert("Document is ready!");
$("documentList").remove();
alert("Removed the list.");
});
alert("After jQuery.");
</script>
<!-- <script type="text/javascript" src = "https://raw.github.com/jashkenas/coffee-script/master/extras/coffee-script.js"></script> -->
</head>
<body>
<ol>
<li>ProjectShare</li>
<li>Guidelines</li>
<li>Upload</li>
<li>
<form>
<input type = "search" placeholder = "enter class code"/>
<input type = "submit" value = "Go"/>
</form>
</li>
</ol>
<ol id = "documentList">
<li>document1</li>
<li>document2</li>
</ol>
</body>
</html>
Script tags are not self closing. You must do <script src='...'></script>.
Also, you have to use a valid selector:
$(document).ready(function()
{
alert("Document is ready!");
$("#documentList").remove();
alert("Removed the list.");
});