I am looking on a way to jump in directly to one of the div which is working once I click.
I would like it to load automatically to the div and not by clicking anything.
<div id="Number">
<label>
<p style="font-size:16px; color: black; background-color: #ffff42">My Cases</p>
</label>
</div>
<iframe src="https://example.com/sr/" name="target-iframe"></iframe>
<a href="https://example.emc.com/sr/#Number" target="target-iframe" onclick="frames['target-iframe'].document.getElementById('Number')
.scrollIntoView();return false">Click</a>
Thanks in advance,
could you try focus on the DIV, that may or may not work:
give the Div a unique id (In your case Number)
<body onload="location.hash = 'Number';">
<div class="Number" id="Number">content</div>
</body>
if you want to automatically load the value present in div tag into iframe,just try to separate into two html file and put in the same directory.
for example,consider two html files one.html and ex.html.one.html
<html>
<body>
<div>
<label>
<p style="font-size:16px; color: black; background-color: #ffff42">My Cases</p>
</label>
</div>
</body>
</html>
ex.html is
<html>
<body>
<iframe src="one.html" name="target-iframe">
</iframe>
</body>
</html>
Related
I'm having trouble getting some images to show. The issue starts at C:\Users... and ends at .\august19\google2.0.0.jpg
I'm not very experienced with the ... thing in pathways
I've tried but it doesn't work. A large space appears but image doesn't show
<html lang="en">
<head>
<title>My First Webpage</title>
</head>
<body>
<p style="background-color: blue; color: white">
My First Paragraph <br>
My second sentence in this paragraph on another line
</p>
<p style="background-color: green; color: white"> My Second Paragraph >:3c</p>
C:\Users\sierr\OneDrive\Documents\html practice due tuesday\images\google2.0.0.jpg
https://www.google.com/images/google2.0.0.jpg
.\images\google2.0.0.jpg"
.\august19\google2.0.0.jpg"
<a href="https://www.apple.com">
<img src="images/23656.png" width=500 border=0 />
</a>
Home
August19
</body>
</html>
In order for the browser to render the image, you need to put it in an <img> tag.
<img src="C:\Users\sierr\OneDrive\Documents\html practice due tuesday\images\google2.0.0.jpg https://www.google.com/images/google2.0.0.jpg">
I have page in which I have set the background as completely transparent using:
body {
background:none transparent!important;
}
This works as intended I am displaying this page in a transparent iframe on a different website and I want to see the website background through the page.
However if I access the page directly the background shows as white (its got to be something right?)
Is this a hardcoded browser thing or is there a way I can set this to black?
Website code:
<div class="page-background ">
<div class="header">
<span>Website menu here</span>
<span>Book</span>
<span>About</span>
<span>Contact Us</span>
</div>
<iframe src="http://localhost:4500" allowtransparency="true"></iframe>
</div>
When you access directly, your body has its parent as html which has background as white. This is the reason you see the white background. If you want to see black, you need to set your html to black background
html {
background: #000;
margin: 0;
height: 100%;
}
body {
background: #fff;
height: 100%;
margin: 0;
}
<button onclick="document.body.style.background = 'transparent';">
Make Transparent
</button>
Just create these three files and provide the image link in background-image attribute then second file name should be test2.html and third file name shoud be test3.html. Then run the first file and click on book option.
<html>
<body style="background-image:url('wallpaper2you_462082.jpg');background-size:cover">
<div class="page-background ">
<div class="header">
<span>Website menu here</span>
<span>Book</span>
<span>About</span>
<span>Contact Us</span>
</div>
<iframe src="test3.html" allowtransparency="true" name="iframe"></iframe>
</div>
</body>
</html>
<html>
<body style='color:white'>
<p>Hi</p>
<p>How are you?</p>
</body>
</html>
<html>
<body style='color:red'>
<p>Hi</p>
<p>How are you?</p>
<p>Tell me about yourself.</p>
</body>
</html>
I'd like to have an html file that organizes certain files scattered throughout my hard drive. But after saving file, my text i.e "Indian" got underlined. My code is
<a href="file:///G:\work files\project\indian.html" target="_blank">
<div class="button-1">
Indian
</div>
</a>
My question: is there any rule or tag in css or html to remove that underscore?
I'd keep my <div> under <a>, so why text contained in <div> got underlined
Add you must use css to change the way your links look like. Use a selector ("a") and set the text-decoration property to none:
<html>
<head>
<title>TITLE</title>
<style>
div a {
text-decoration: none;
}
</style>
</head>
<body>
<h1>PAGE CONTENT</h1>
<div>
Link here
</div>
</body>
</html>
Im trying to design this webpage with multiple pages. For example, when you scroll to the about page, its a different background color than the contact page. However, so far I only got the title of each page color. My webpage is where you scroll down it lands onto another page. I tried
#name{background-color:#ffffff;}
#Portfolio{background-color:#d5f4e6;}
#about{background-color:#fefbd8;}
#ContactMe{background-color:#ffffff;}
in the css style page based on its id. Any clue on how to get the different background color on different pages
html code:
<body id="Portfolio"></body>
<body id="about"></body>
<body id="Contact Me"></body>
When you say "multiple pages" it means "separate pages in separate files!" like "aboutpage.html" or "contact.html". In this case you can work with "body" tag:
<body id="about">
but then you said "when you scroll to the about page" that means "a page with different section that you can use like this:
<p id="about"></p>
<p id="contact"></p>
or
<div id="about"></div >
<div id="contact"></div>
You should specify that the elements containing your targets are 100vh height. With your (original posted) code you can do it like that:
body > div {min-height:100vh;}
This css will catch the container-* div that you use in the code you provide. I recomand continue learning the basics. Start here https://developer.mozilla.org/he/docs/Web/HTML
Enjoy code!
If it's a same page scroller, you should add
#Portfolio,#about,#ContactMe {min-height:100vh;}
To your css.
If you can provide the exact code its much easier to help you.
simple code
$(document).ready(function(){
startFromtop=$(".start").position().top
aboutFromtop=$(".about").position().top
contactFromtop=$(".contact").position().top
endFromtop=$(".end").position().top-100
$(window).scroll(function(){
windowformtop=$(this).scrollTop();
if(windowformtop>=startFromtop && windowformtop<aboutFromtop){
$(document.body).css("background-color","white")
}
else if(windowformtop>=aboutFromtop && windowformtop<contactFromtop){
$(document.body).css("background-color","red")
}else if(windowformtop>=contactFromtop && windowformtop<endFromtop){
$(document.body).css("background-color","green")
}else if(windowformtop>=endFromtop){
$(document.body).css("background-color","blue")
}
})
})
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title></title>
<style type="text/css">
div{height:700px;border:2px solid red;}
</style>
</head>
<body>
<div class="start">Start</div>
<div class="about">ABOUT</div>
<div class="contact">CONTACT</div>
<div class="end">END PAGE</div>
</body>
</html>
Replace <body> with the <div> tag and add the appropriate css. The pages should have the same class but unique ids. You change the background color with CSS property background-color.
HTML:
<html>
<head></head>
<body>
<div class=“page”id=“portfolio”>
</div>
<div class=“page” id=“about”>
</div>
<div class=“page” id=“contactme”>
</div>
</body>
</html>
CSS:
.page{
position:relative;
width:100%;
height: auto;
margin:auto;
}
#portfolio{
background-color:white;
}
#about{
background-color:red;
}
#contactme{
background-color:blue;
}
Hope this works for you.
I'm trying to reduce the amount of html markup related to presentation in my front end code. In a form I'm currently working on, I want to have 2 column of form fields. One way that will definitely do what I want is this:
<html>
<head>
<style>
body {width:400px;}
.col {width:200px; height: 100px; float:left; display:block;}
label, input {display:block;}
</style>
</head>
<body>
<div class="col">
<label>Field1:</label>
<input>
</div>
<div class="col">
<label>Field2:</label>
<input>
</div>
</body>
</html>
I want to achieve the same results when rendered in browser WITHOUT the div tags in the mark up. So I did something like this:
<html>
<head>
<style>
body {width:400px;}
label,input {width:200px; height: 30px; float:left; display:block;}
</style>
</head>
<body>
<label>Field1:</label>
<label>Field2:</label>
<input>
<input>
</body>
</html>
This is close, but I want the <label> markup tag to appear before each <input> markup tag in the code like so:
<label>field1</label>
<input>
<label>field2</label>
<input>
But problem here is that I can't think of maintainable css code that will make the label appear on top of each input field. Is there a good way to make both the mark up and the rendered result appear the way I want to?
One solution is to put the input inside the label..
<label>Field1:<input></label>
<label>Field2:<input></label>
then example CSS..
label {width:200px; height: 30px; display:inline-block;}
input {display: block;}
or
label,input {width:200px; height: 30px; display:inline-block;}
Seem's hacky, but this works.
http://jsfiddle.net/pxfunc/VCaMe/1/
using class="col1" or class="col2"...
HTML:
<form>
<label for="i1" class="col1">Label 1</label>
<input id="i1" class="col1" type="text" value="Input 1" />
<label for="i2" class="col2">Label 2</label>
<input id="i2" class="col2" type="text" value="Input 2" />
</form>
CSS:
form {width:600px;background-color:#eee;overflow:hidden;}
.col1 {display:block;float:left;line-height:30px;width:301px;height:30px;background-color:#f00;border:0;}
.col2 {position:relative;top:-30px;display:block;float:right;line-height:30px;width:299px;height:30px;background-color:#ff0;border:0;}
That said I still agree with the first comment under the question, seems like over-thinking a solution that could use div's or some kind of <label> & <input> wrapper