I have implemented many onclick functionality. But it is not functioning here alone.
My HTML
<body style="background-color:#333333;">
<div id="wrapper_other" class="wrapper_other">
<div id="header" class="header">
<div id="header_title" class="header_title"></div>
<div id="home" class="home"><img src="img/home.png" onClick="home()"/></div>
</div>
My CSS
.wrapper_other
{
width:auto; margin:0auto; overflow: hidden;
}
.header
{
float:left; height:44px; line-height:44px; margin:0%; width:100%;
}
.header_title
{
height:100%; min-height:100%; font-size:22px; color: #FFFFFF; text-align:center; font-weight:bold; width:100%;
}
Myfunction
function home()
{
window.location.href="index.html";
}
EDIT
My file structure
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8">
function test()
{
window.location.href="index.html";
}
</script>
</head>
<body style="background-color:#333333;">
<div id="wrapper_other" class="wrapper_other">
<div id="header" class="header">
<div id="header_title" class="header_title"></div>
<div id="home" class="home"><img src="img/home.png" onClick="info()"/> </div>
</div>
<div id="images" class="images"><img name="slide" src="img/banner1.png" width=100% />
<div id="element_name_image" class="element_name_image"></div>
</div>
<div id="parameters" style="background-image:url(img/icons_bg.png);" class="parameters">
<div id="abc" class="abc"></div>
<div id="def" class="def"></div>
<div id="ghi" class="ghi"></div>
<div id="jkl" class="jkl"></div>
</div>
<div id="wrapper" class="wrapper">
<div id="scroller" class="scroller">
<ul>
<div id="description" class="description">
<div id="title" class="title">
<h1><strong><ul class="scroller ul"><li></li></ul></strong></h1>
</div>
<div id="desc" class="desc">
<p><ulclass="scroller ul"><li></li></ul></p>
</div>
</div>
</ul>
</div>
</div>
Please,help me identify my mistake.
<div id="home" class="home"><img src="img/home.png" onClick='window.location.href="index.html";'/></div>
Why don't you use the location.href inside the onClick()?
You have used "home" in id attribute and function name. When you use home() onclick, you might have faced not a function exception as Browser refer HTMLDivElement (due to an id attribute). Change the value in id attribute or function name and check
Here's the HTML for script.
<script type="text/javscript">
function home()
{
window.location.href="index.html";
}
</script>
Now, place the code either the following:
inside the <head> tag or
above the </body> tag
Though placing above the ending <body> tag is highly recommended.
Update
Given the directory structure is like this:
- index.html
- script.js <- assuming the function is in there
Here's the line of code
<script type="text/javascript" src="script.js"></script>
Then place the code either the following:
inside the <head> tag or
above the </body> tag
What is your error? Its working fine see the DEMO
<div id="wrapper_other" class="wrapper_other">
<div id="header" class="header">
<div id="header_title" class="header_title"></div>
<div id="home" class="home"><img src="img/home.png" onClick="test();"/> </div>
</div>
</div>
function test()
{
window.location.href="index.html";
}
EDIT
Found your problem
1) Function not defined (test should changed to ->info)
2) onclick (C was capital)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function info()
{
window.location.href="index.html";
}
</script>
</head>
<body>
<div id="wrapper_other" class="wrapper_other">
<div id="header" class="header">
<div id="header_title" class="header_title"></div>
<div id="home" class="home"><img src="img/home.png" alt="clickme" onclick="info()"/> </div>
</div>
<div id="images" class="images"><img name="slide" src="img/banner1.png" width=100% />
<div id="element_name_image" class="element_name_image"></div>
</div>
<div id="parameters" style="background-image:url(img/icons_bg.png);" class="parameters">
<div id="abc" class="abc"></div>
<div id="def" class="def"></div>
<div id="ghi" class="ghi"></div>
<div id="jkl" class="jkl"></div>
</div>
<div id="wrapper" class="wrapper">
<div id="scroller" class="scroller">
<ul>
<div id="description" class="description">
<div id="title" class="title">
<h1><strong><ul class="scroller ul"><li></li></ul></strong></h1>
</div>
<div id="desc" class="desc">
<p><ulclass="scroller ul"><li></li></ul></p>
</div>
</div>
</ul>
</div>
</div>
</body>
</html>
Wrong here I can find is
1- U have used home in as id attribute of div and function name.
<div id="home" class="home"> <img src="img/home.png" onClick="home()"/> </div>
2- Try to write onclick all in small and put [;] after function call
show write it like onclick="home();" there will be no error!
All browser accept it.
Try to debug using Chrome console or Internet Explorer(after un-checking - disable script debugging and disable all script debugging).
Here is Solution:
HTML CODE with Java Script: index.html
<!DOCTYPE html>
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="yourcss.css" />
<script type="text/javascript">
function navigator() {
alert("Test is called!");
window.location.href = "justchill.html";
}
</script>
</head>
<body style="background-color: lightyellow">
<div id="wrapper_other" class="wrapper_other">
<div id="header" class="header">
<div id="header_title" class="header_title">
<img src="Dream_home6.jpg"
alt="welcome" onclick="navigator();" />
</div>
</div>
</div>
</body>
</html>
Tested and verified on Chrome and Mozila Firefox.
Hope it will help.
Related
In bootstrap, I have divided my screen into two rows where 1 row has 62% and the other has remaining.
<style>
.full-image
{
height:62%;
}
</style>
<body
<div class="row full-image">
<div class="col-md-12">
<img src=".." style="overflow:hidden">
</div>
</div>
<div>
....
</div>
</body>
Now my image in row1 is getting overflow and hiding row2. Can someone help me out on this.
https://codepen.io/toastEater/pen/RxQEoj
<style>
.full-image{
height:62vh;
overflow: hidden;
}
</style>
<body>
<div class="row full-image">
<div class="col-md-12">
<img src="https://i.imgur.com/YWbnI93.jpg">
</div>
</div>
<div>
Anything here
</div>
</body>
Here is the jsfiddle
fiddle
code:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="col-xs-12">
<div class="col-xs-5" style="padding-right:0px;">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjI4NzA5OTg1OF5BMl5BanBnXkFtZTgwNzc0MjU5OTE#._V1_SY1000_CR0,0,675,1000_AL_.jpg" class="img-responsive"/></div>
<div class="col-xs-7" style="background-color:#CBD4C2; padding-left:0;">
<p>asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad</p>
kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn
</div>
</div>
</div>
You can use some css to fix this:
.wrap-text {
word-wrap: break-word;
}
And then:
<p class="wrap-text">asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad
kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn</p>
jsfiddle
add word-break:break-word to its container
see below snippet or fiddle > jsFiddle
.col-xs-7{
word-break:break-word;
}
<div class="container-fluid">
<div class="col-xs-12">
<div class="col-xs-5" style="padding-right:0px;">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjI4NzA5OTg1OF5BMl5BanBnXkFtZTgwNzc0MjU5OTE#._V1_SY1000_CR0,0,675,1000_AL_.jpg" class="img-responsive"/></div>
<div class="col-xs-7" style="background-color:#CBD4C2; padding-left:0;">
<p>asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad</p>
kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn
</div>
</div>
</div>
but i suggest you don't use plain text. instead wrap all the text inside a tag, for example a <p> like so :
<p>asjkfnaskjdnkasdnkasnsdkjasndkjansdkjnasjdbaskjsdnbjhbdskajad
kjadsbnjkasndkjasndkjasndkjasndkjasndkjnaskdjnaskjdnsakjdnaskjdnkjasdn</p>
( also use break-word )
How to center hgroup, I want "welcome to sweet spirals" and "happiness in every bite" centered. The problem occurs when you open the page to full size, it doesnt center please help. heres the http://jsfiddle.net/yotzincastrejon/huco2sek/
<!DOCTYPE html>
<html lang="en">
<head>
<meta chartset="utf-8">
<title>Sweet Spirals</title>
<link href="sweetstyle.css" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="row">
Sweet Spirals
<div class="header-right">
<nav class="header-nav">
Home
Shop
About Us
FAQ
Search
</nav>
<form method="get" accept-charset="UTF-8" action="/search" id="search" class="header-search">
<input type="search" name="q" placeholder="Search terms…">
</form>
</div>
</div>
</header>
<div class="content">
<div class="row">
<section class="main">
<hgroup class="heading home-heading" id="heading">
<h1 class="major" id="major">Welcome to Sweet Spirals</h1>
<h2 class="minor" id="minor">Happiness In Every Bite</h2>
</hgroup>
<aside class="aside">
<div class="subscribe">
Like
</div>
<figure class="crackers2">
<img src="https://farm6.staticflickr.com/5655/22900680453_242b39b6d6_k.jpg" alt="missing" height="100%" width="100%" />
<figcaption>Peppermint Thins</figcaption>
</figure>
<div id="pepthinsbutton">
<script src="https://gumroad.com/js/gumroad.js"></script>
<a class="gumroad-button" href="https://gum.co/Peppermintthins" target="_blank">Buy my product</a>
</div>
<figure class="crackers1">
<img src="https://farm1.staticflickr.com/773/22899649574_e49e0b6316_k.jpg" alt="missing" height="100%" width="100%" />
<figcaption>Chocolate Licorice</figcaption>
</figure>
<div id="licoricebutton">
<script src="https://gumroad.com/js/gumroad.js"></script>
<a class="gumroad-button" href="https://gum.co/Tlut" target="_blank">Buy my product</a>
</div>
</body>
</html>
look at the fiddle for the css
its centered in the demo i forked from you and linked below; a few things:
a) hgroup is deprecated, you shouldn't be using it because it'll surely screw up the document outline that a user requires for their at software to run correctly.
b) section.row was set to a wonky width, around 500px...so i changed that to 100% with an important to override whatever was conflicting with it:
.main{width:100% !important}
http://jsfiddle.net/jalbertbowdenii/bz82g8fe/7/
Look for this part in your css:
.main {
float: left; /* Remove this line */
width: 36.25em; /* Remove this line */
margin: 2em 0 2.5em
}
I'm trying to display a image as the background in my header, but nothing seems to happen.
This my css code where I set the specs of my image(500 * 2000):
header{
background-image: url(../images/banner2.png);
background-repeat: no-repeat;
margin: 0 auto;
max-height:100px;
width: 100%;
}
And this is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link rel="stylesheet" href="../css/main.css" />
</head>
<body id = "contact">
<header></header>
<div id="page">
<div id="logo">
<h1>Baby kleding online</h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Kleding</li>
<li><a class="inuse" href="../html/contact.html"id="contactnav">Contact</a> </li>
<li>Vragen</li>
</ul>
</div>
<div class="content">
<h2>Contact</h2>
</div>
<div class="Images">
<b target="_blank" href="kleding.htm">
<img src="../images/logo.PNG" alt="Boy1" width="300" height="140">
</b>
</div>
</div>
</body>
</html>
In order to fix your problem you have to assign a height to your header.
This can be done by using the height: [Amount of pixels]px;
Or you can add something in between the <header></header> tags that will make the header show.
I'm trying to figure out why my <div> element does not expand to cover everything it contains. I've seen this in Google Chrome's "Elements" view when I press Shift+Ctrl+J. I expected my "content" div to be sized to include <p>A</p> and <p>B</p>, but it doesn't.
PS-- I've read some comments that a footer is normally positioned absolute, but this is just to show the error.
Here is the simplified page:
<html>
<head>
<style type="text/css">
#footer{
background-color: lightblue;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="content" align="center">
<div style="width:50%;">
<p align="left">
Two divs:
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
</p>
</div>
</div>
<div id="footer" align="center">
<div style="width:90%;" align="center">
Here is my footer.
</div>
</div>
</body>
</html>
Add
<div style="clear:both"></div>
After
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
add this to the css:
#content { overflow: hidden; }