I am working on a clone of Google's search page. I want the page to show search results in Google when the user uses it. But instead of taking the user to a search result page, the program is instead just putting the link after my page's link. I think I must have messed some somewhere in the code but can't figure out where. I'm just starting to learn HTML. Please help me through this. Thanks!
Screenshot of error
Here is my index.html:
<html>
<head>
<title>Google Search</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="top-bar">
<div class="bar-right">
<div class="menu">
Image Search
Advanced Search
</div>
<a href="" class="profile-trigger">
<img src="images/profile.png">
</a>
</div>
</div>
<form action="www.google.com/search" id="search">
<div class="content">
<div class="search-wrapper">
<a href="" class="search-logo">
<img src="images/google-logo.png">
</a>
<div class="search-bar">
<div class="search-icon">
<i class="fa fa-search"></i>
</div>
<input type="text" name="q">
</div>
<div class="search-buttons">
<input type="submit" value="Google Search"></a>
I'm Feeling Lucky
</div>
</div>
</div>
</form>
</body>
</html>
In <form action="www.google.com/search" id="search">, the action links to a place within your directory. To link to outside URLs, you need to use the http prefix.
<form action="https://www.google.com/search" id="search"> fixes the issue.
Related
If in my HTML file, Font Awesome icons are showing up as blank squares in all browsers, even though I've linked the stylesheet correctly and I've tried to install the package using npm, but it throws a npm ERR! code E401. I've also checked the browser developer console for error messages, but there are no errors being displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Load icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<title>EVERYTHING CHEMISTRY</title>
</head>
<body>
<div class="Grid-container">
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<i class="fa-solid fa-bars"></i>
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3 id="Website name">EVERYTHING CHEMISTRY</h3>
<img id="Logo" src="icon.png" alt="Hydrogen atom">
<img id="Chemistry Lab" src="Chemistry.JPG" alt="Chemist Lab">
<!-- The form -->
<form class="example" action="action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="Page Title">
<h1 id="name">Periodic</h1>
<h1 id="subname">Table</h1>
</div>
<div class="Subheading">
<h2 id="Subheading 1">118 Elements</h2>
<h2 id="Subheading 2">7 Periods</h2>
</div class="Body text">
<p id="Translations">{Eng: Periodic Table; Arabic: الجدول الدوري; Afrikaans: Periodieke tabel; Mandarin: 周期表
(zhōuqī biǎo); Urdu: پیرودیک ٹیبل.}</p>
<p id="Definition">The periodic table is a tabular arrangement of the chemical elements, organized on the basis
of their atomic number, electron configurations, and chemical properties. Elements are presented in rows
(called periods) and columns (called groups or families) according to their increasing atomic number. The
elements in a group have similar chemical and physical properties, and those in a period show a progression
of properties as the atomic number increases. The table provides a useful summary of the properties of the
elements and their chemical reactivity. It is widely used in chemistry and other sciences to predict the
properties and behavior of elements and their compounds.</p>
Click Here to Smoothly Scroll Down
<i class="fa-solid fa-angle-down"></i>
<div id="down">
<h1>You are down!</h1>
</div>
</div>
</body>
</html>
The class names that you are using are for fontawesome v6 and you are including an older version v5 in your project, make sure you copy the icons classes for the version that you are using
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="Grid-container">
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<i class="fa-solid fa-bars"></i>
Link 1
</div>
</div>
</div>
<h3 id="Website name">EVERYTHING CHEMISTRY</h3>
<form class="example" action="action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<i class="fa-solid fa-angle-down"></i>
this is the link for v5 icons
https://fontawesome.com/v5/search?o=r&s=regular
I am trying to implement the dropdown search feature from the UiKit, but am having trouble displaying the search bar itself. I have added only the scripts I need this far in my application, maybe I am missing one? Can anyone see what it is I'm missing
Dropdown Search UIKit
Here's my codepen:
Codepen example
<nav class="uk-navbar uk-navbar-container uk-margin">
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
<ul class="uk-navbar-nav">
<li class="uk-active">Active</li>
<li>Item</li>
</ul>
</div>
<div class="uk-navbar-right">
<a class="uk-navbar-toggle" href="#modal-full" uk-search-icon uk-toggle></a>
</div>
</nav>
<div id="modal-full" class="uk-modal-full uk-modal" uk-modal>
<div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport>
<button class="uk-modal-close-full" type="button" uk-close></button>
<form class="uk-search uk-search-large">
<input class="uk-search-input uk-text-center" type="search" placeholder="Search..." autofocus>
</form>
</div>
</div>
I added these two your <head> tags and the search icon appeared + worked:
<head>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/js/uikit-icons.min.js"></script>
</head>
So like this overall:
<head>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/js/uikit-icons.min.js"></script>
</head>
<nav class="uk-navbar uk-navbar-container uk-margin">
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
<ul class="uk-navbar-nav">
<li class="uk-active">Active</li>
<li>Item</li>
</ul>
</div>
<div class="uk-navbar-right">
<a class="uk-navbar-toggle" href="#modal-full" uk-search-icon uk-toggle></a>
</div>
</nav>
<div id="modal-full" class="uk-modal-full uk-modal" uk-modal>
<div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport>
<button class="uk-modal-close-full" type="button" uk-close></button>
<form class="uk-search uk-search-large">
<input class="uk-search-input uk-text-center" type="search" placeholder="Search..." autofocus>
</form>
</div>
</div>
I just started playing around with materializecss framework. After going through the form page. I decided to try a simple example shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<link rel="shortcut icon" href="images/icon.png" type="image/png">
<title>form example</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<div class="navbar-fixed">
<nav class="blue darken-4" role="navigation">
<ul id="slide-out" class="side-nav">
<li><div class="userView">
<div class="background blue darken-3">
<!--<img src="images/background3.jpg">-->
</div>
</div>
</li>
</ul>
<i class="material-icons">menu</i>
<div class="nav-wrapper">
<a id="logo-container" href="index.php" class="brand-logo"><img src="images/icon.png">Form</a>
<ul class="right hide-on-med-and-down">
<li><div class="right"><a class="waves-effect waves-light btn red modal-trigger tooltipped" data-position="bottom" data-delay="50" data-tooltip="Click to login or register " href="login.php" >Login</a></div></li>
</ul>
</div>
</nav>
</div>
<form id="uploadimage" class="col s12" method="post" action="" enctype="multipart/form-data" >
<div class="form-container">
<div class="row">
<div class="file-field input-field col s12">
<div class="btn waves-effect waves-light blue darken-3">
<span>browse</span>
<input type="file" id="image" name="image" accept="image/x-png,image/jpeg, image/jpg">
</div>
<div class="file-path-wrapper">
<input id="imagef1" name="imagef1" class="file-path validate" placeholder="Image 1: Product Front View" type="text">
</div>
</div>
</div>
<center>
<input type="button" id="postform" onclick="return check(this.form, this.form.image);" class="btn waves-effect waves-light red" value="Post Product" name="postform" />
</center>
</div>
</form>
<div id="modal5" class="modal bottom-sheet">
<div class="modal-content">
<p align="center">You must provide all the requested details. Please try again</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#image").change(function(){
alert("file upload changed");
});
});
function check(form, image) {
//Check each field has a value
if (image.value == '' ) {
$('#modal5').openModal();
//alert('You must provide all the requested details. Please try again');
return false;
}
}
</script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
</body>
</html>
After clicking on the browse button, the jquery code on change does not execute. What am i doing wrong here?
I was able to fix the problem via help from #wackychocolatefactory from materializecss github page. The answer lies in the order of my JavaScript files. That is moving the script of jquery and materializecss above that of $(document).ready(function(){});
so I should put it in this order
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#image").change(function(){
alert("file upload changed");
});
});
function check(form, image) {
//Check each field has a value
if (image.value == '' ) {
$('#modal5').openModal();
//alert('You must provide all the requested details. Please try again');
return false;
}
}
</script>
I want to create a wordpress page which I can put the html code to do the following please
1) Google custom search box (which i can get the GCS code from google) but it has to be OVER an image. not above or below the image :). image will be hosted on my site media library
2) round icons buttons below the search box similar to the one i have attached which bounces when mouse over (images of these icons can be changed and destination urls assigned by me)
the attached example is the yahoo new tab extension for firefox
any help is appreciated.
i have attached the sample page image and the view source code of that page to help understand my context. the difference is that the search will be by google instead of yahoo
thank you friends!
view code below as its not letting me attached doc
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" type="text/css" href="newtab.css">
<link rel="stylesheet" type="text/css" href="brand.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body id="bg" class="flexContainer bgImage">
<div id="bookmarksAbsolute">
<div id="bookmarksFlex" class="uiBG"></div>
</div>
<div id="searchTrendingNowContainer"></div>
<div id="mainContainer">
<div id="uiBlur"></div>
<div id="uiContainer">
<form id="submitSearchNew">
<img id="magnifierNew" src="icons/mag3.svg">
<input type="text" id="searchBoxNew" autocomplete="off" name="p" tabindex="1">
</form>
<div id="searchSuggestContainerNew" class="searchSuggestContainerNew displayNone"></div>
</div>
<div id="urlHidden"><span id="urlContent"></span></div>
</div>
<div id="darkOverlay"></div>
<div id="pageFooter">
<div id="ownerContainer">
<a id="ownerName" class="credit"></a>
<a id="onFlickr" class="credit flickr"></a>
</div>
<div class="newTopSitesContainer" id="topSites"></div>
<div id="urlInfo"></div>
</div>
<div class="dropup" id="dropupMenu">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
</button>
<ul class="dropdown-menu options-list">
<li><a id="toggleViewText" class="toggleText unselectable"> </a></li>
<li class="divider"></li>
<li id="tnDiv" class="displayNone"><a id="toggleTN" class="unselectable"> </a></li>
<li id="tnDivider" class="divider displayNone"></li>
<li><a id="editButton" class="unselectable"> </a></li>
<li class="divider"></li>
<li><a id="feedBack" class="feedBackLink unselectable"> </a></li>
</ul>
</div>
</body>
<script src='newtab.js'></script>
</html>
I do not understand you, if you need show up input tag and image in other image?
If is it yes, use z-index CSS for image for example:
<div class="base"> <!-- z-index = 1 -->
<input type="search" class="search" /> <!-- z-index = 2 -->
<div class="buttons_footer"> <!-- z-index = 2 -->
<button></button>
<button></button>
<button></button>
.....
</div>
</div>
I hope to help
I am creating a button using semantic ui css framework this is my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="dist/semantic.min.css" />
<script type="text/javascript" src="dist/semantic.min.js"></script>
<link rel="stylesheet" href="dist/components/button.min.css" />
</head>
<body>
<form id="form1" runat="server">
<div class="ui labeled button" tabindex="0">
<div class="ui button">
<i class="heart icon"></i> Like
</div>
<a class="ui basic label">
2,048
</a>
</div>
</form>
</body>
</html>
result should be this:
but this is what i get
any help?
I guess that the problem is into the file paths.
Try to replace them with the CDN paths.