I'm trying to link the button to the heading of the different sections on the same page but I couldn't figure out how to use.i can use a link from one class to another but how to link on the same class with a specific word. what I have done is
<Button className="sec-btn"> Get Started </Button>
I want when users click Get started button then link that to the "Antsy service" title on the same page.
<h1 className="heading-1">Antsy services</h1>
What I understand from this question is you have a href anchor tag element that when clicked, you want to scroll down the page to a different element.
You can use IDs as a form of linking between elements on the same page.
Solution
Simply give the element you want to scroll to an ID and then in the anchor tag you can provide a link to it via href.
<a href="#test">
<button> click me </button>
</a>
<div class="space"></div>
<div id="test">
<p> hello </p>
</div>
Here is a codepen for it so it's easier to see the effect visibly.
https://codepen.io/shanecreedon/pen/poJGovK
What you are looking for is anchor links.
How to create and use them:
add id="example" to some element on the page
add Scroll me to example element on top of your page
click and see what will happen
You need to use the id selector syntax like this. Heading should have an id selector...
<h1 id="heading-1">Antsy services</h1>
Then you can link to the section of the page like this:
Get Started
I see you're trying to build a Single Page Site with sections. For this, you have to use ID to all the Headers that you are about to navigate to.
Try this,
<html>
<head>
<title>Example</title>
<style>
h1{
height : 100vh;
background: skyblue;
}
h2{
height: 100vh;
background: #c0c0c0;
}
h3{
height: 100vh;
background: #a0faf9;
}
</style>
</head>
<body>
Home
Services
Contact
<h1 id="home">Home Section</h1>
<h2 id="services">Services Section</h1>
<h3 id="contact">Contact Section</h1>
</body>
</html>
Related
I'm making a website where the starting page should act as a "gateway" to the rest of the site (it greets the user and a click anywhere links to the main website). This is the code for this:
<template>
<div onclick="window.location.href='#/ordering';" style="cursor:pointer; width:100%; height:100%;">
<div id="textpage"> <h2>XXX </h2>
<h3> {{ uiLabels.welcomeText }} </h3>
</div>
</div>
</template>
The website is constructed so it can be displayed in two languages, where uiLabels.thing fetches "thing" in either language. I now want a button that changes the language. I've done this:
<button v-on:click="switchLang()">{{ uiLabels.language }}</button>
where switchLang() is a method that switches the language variable, and thus will switch the displayed langue on my page. The only problem is that the link "overrides" the button, so when the button is pressed the user is linked to the main part of the website.
I want the button on the bottom left of the page.
If I place the button code in a div before the link div it gets
placed on top of the page, and it looks horrible.
If I place the button in the link div it gets placed right under the
welcome text, but can't be clicked.
If I place it in a div after the link div I get a fail message saying
that I can only have one root element.
One way around this is to place the button outside of the div that links, but if I do that that button can't be moved to where I want it.
The third option is one way to go.
Add a wrapping element around the two elements and make the language button position absolute. Something like this:
<template>
<div class="wrapper">
<div #click="window.location.href='#/ordering';" style="cursor:pointer; width:100%; height:100%;">
<div id="textpage"> <h2>XXX </h2>
<h3> {{ uiLabels.welcomeText }} </h3>
</div>
</div>
<button class="langPicker" #click="switchLang()">{{ uiLabels.language }}</button>
</div>
</template>
And with CSS something like:
.wrapper {
position: realtive;
}
.langPicker {
position: absolute;
bottom: 20px;
right: 20px
}
This is just to give you an idea, you have to adjust it to suit your needs.
I'm a beginner in web development and I'm try to build a portfolio but I'm encountering a little problem with my coding.
I want to link an href tag to a <div id> but in another <html>.
Another issue is that I would like it to be center to the window.
This is an example:
INDEX.html
<a class="thumbnail" href="features.html#Spread5">
<img src="i/Thumbnail_13.png" width="200"/>
<h5 class="slug">Departments</h5>
<p>Muscle Fitness Hers</p>
</a>
FEATURES.html
<div class="thumbnailspread" id="Spread5">
<img src="i/Spread_5.png" width="420"/>
<h5 class="slug">Departments</h5>
<p>Natural Health Magazine</p>
</div>
The reason i want it to be centered is because I have a navigation toolbar that sticks to the top when you scroll down a certain amount (using a script i found online).
So every time I click on the <href> the nav covers it on the next page.
Trying to make it work with multiple divs in 4 different htmls
So it cant be too specific like this example:
function goToAnchor() {
window.location = "#center";
}
so, maybe I should use:
window.location.href = "#"+anchor;
but I'm not sure if that is the right solution.
Any help would be appreciated!
Wrap your current HTML in a div and center the link.
<div class="container">
<a class="thumbnail" href="features.html#Spread5">...</a>
</div>
In your css file
.thumbnail {
display: block;
text-align: center;
}
Fiddle
If I have a page that inserts an unwanted div on every load, is there any way to hide it without using CSS? I don't have access to that div and it doesn't have an ID or a CLASS.
For example I don't want the browser to display the following div:
<div style="text-align: center; font-size: 14px; text-decoration: none;">Please click <a style="text-decoration: none !important;" target="_blank" href="http://www.website.com"><b>here</b></a></div>
I found a question and an answer for hiding a specific string of text, but it doesn't work with this.
You can try to select content inside the div by using attribute value. Href attribute inside your div is perfect to do this, and then just use jQuery .parent() method to select whole div.
$("a[href='http://www.website.com']").parent().css("display","none")
Here is the working example:
http://jsfiddle.net/waxtue0o/
There are some ways of identifying an element without it having an id or class. If you have jquery you can use more advanced selectors like mgibala said (although I would prefer to do it without scripting).
See http://www.w3schools.com/cssref/css_selectors.asp for information on selectors. Two examples below.
Fiddle: http://jsfiddle.net/o8oyd3e2/
HTML:
<body>
<div style="background-color='red';">
Spam spam spam
</div>
<div>
Some content
</div>
<div class="myContent">
Some content
</div>
<div style="background-color='red';">
Spam spam spam
</div>
</body>
CSS:
body div:first-child {
display:none;
}
body div.myContent + div {
display:none;
}
Or you can host your site somewhere else...
You can do
document.getElementsByTagName("div")[0].style.display = 'none';
First of all i'm new at scripting and need your help. I'm trying to achieve the following:
I have four projects i want to show on my website. These projects are visable by images. When people hover over the image a div called "info" will show the additional information of the project they hover on.
So to be clear, data which will be triggered by hovering goes to the same div "info":
Hover over image 1 -> load information of project 1 to -> div "info"
Hover over image 2 -> load information of project 2 to -> div "info"
etc.
A friend told me to use ajax and xml, is that a good combination?
Thanks for the help
You are right that a good way to load content dynamically on a page is to use Javascript and XML. A great way to get into using JavaScript is to load a library to help you operate on the contents of an HTML page. I definitely recommend JQuery.
I would highly recommend not loading the information from separate files, unless the content is a whole bunch of very large images.
Take look at this video: JQuery for Designers they do some really great videos that helped me understand JQuery when I was first starting. The page that I just linked to has some great techniques for switching content into the same place, and will give you some important UX (user experience) tips as well.
Ajax is the best choice to get the data....
But the variations comes at what type of Data...
if you need values from database JSON would be my choice
or
never mind any data can be smoothly framed
if you dont have too much hand on scripting
Just use Jquery Plugins to retrieve data using simple calls
Fancybox plugin CLICK HERE...
and the GUIDE to how to use
GUIDE TO USE FANCYBOX CLICK HERE.....
Thank you all for the response.
I solved the problem temporarily by using the technique given by Mark, using html and css. But, i think using javascript could make things easier and more organised. My knowledge about scripting is not good enough. I posted my html for others underneath.
I still have the question how to use the id of a image as a parameter for retrieving a specific part of information. For example: i have an image with id=img1 and a xml file containing with sub parameters. So when i hover over the image js gets the id of that image and then loads the specific part of the xml onto the "info"div and not the whole xml. (to answer the question of adam, the data type is just text)
enter code here
<!DOCTYPE html>
<html>
<head>
<style>
div.maincontent{
border: none;
margin:0px;
padding:0px;
}
div.leftcol, div.rightcol {
/*
* Note that the left column and the right column use position fixed
* to make placement of the elements on top easier.
*/
position:fixed;
top:0px;
width:200px;
height: 100%;
background-color: green;
color: white;
}
div.leftcol{
left:0px;
}
div.rightcol{
right:0px;
}
div.middlecontent{
/*
* Note the left and right margin to place the div.
* With this margin you can
*/
margin:0px 200px 0px 200px;
position: absolute;
top:0px;
left:0px;
}
div.square{
float:left;
margin:0px;
width:200px;
height:200px;
border:10px solid black;
background-color: blue;
}
div.left_content, .right_content {
/*
*Initially do not display the div.left_content
*and div.right_content.
*I still set the all the styles here the divs have in common.
*/
margin:0px;
position:fixed;
margin:0px;
top:0px;
width:200px;
height: 100%;
background-color: blue;
color:white;
display: none; /* do not display */
}
div.square:hover > div.left_content {
/*
*When you hover over a square take from the children
*those with div.left_content and display them.
*The left one is displayed on top of the left div.leftcol
*/
left:0px;
display:block;
}
div.square:hover > div.right_content {
/*
*When you hover over a square take from the children
*those with div.right_content and display them.
*The right one is displayed on top of the right div.rightcol
*/
right:0px;
display:block;
}
</style>
</head>
<body>
<div class="maincontent">
<div class="leftcol">
<p>
Hover over the blue divs in the middle
</p>
<p>
This trick uses the > to find children of an element.
The children are only displayed when hovering over the parent element.
Look at the CSS how that is done. for instance for the left div it is
div.square:hover > div.left_content
</p>
<p> something inside the left column</p>
</div>
<div class="rightcol">
<p>something inside the right column</p>
</div>
<div class="middlecontent">
<div class="square">
<!--
this div has two children
a div with class="left_content" and
a div with class="right_content"
-->
<div class="left_content">
<p> first div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> first div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> second div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> second div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> third div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> third div </p>
<p> something as right content </p>
</div>
</div>
</div>
</div>
</body>
</html>
I want to make a web app in which i have multiple pages i want that when i click on any link it should move to that page i got the code from site it works fine but i want that it does not show like the show Page1 Page but without onclick functions
without java script using ancchor tag
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="Page1">
Content of page 1
Show page 2
</div>
<div id="Page2" style="display:none">
Content of page 2
Show page 1
</div>
</body>
</html>
You can use CSS and checkboxes to get such a behaviour as written on this SITE.
The checkbox is the only HTML element which has two different states which can be exported/evaluated by CSS via the :checked property.
Cited from http://www.inserthtml.com/2012/04/css-click-states/:
HTML:
<form class="clickable">
<label for="the-checkbox">Click Me!</label>
<input type="checkbox" id="the-checkbox" />
<!-- This is the div we want to appear and disappear -->
<div class="appear">Some text to appear</div>
</form>
CSS:
.clickable .appear {
display: none;
}
.clickable input:checked ~ .appear {
display: block;
}
Check out the demo at the bottom of that page.
To select among more than two pages, you could maybe use radio buttons. Not tested, just as an idea ;)