I'm struggling to get my "event" div to trigger the allocated radio button.
<section class="main">
<ul class="timeline">
<li class="event">
<input type="radio" name="tl-group"/>
<label></label>
<div class="thumb user-3">title</div>
<div class="content-perspective">
<div class="content">
<div class="content-inner">
<h3>Title</h3>
<p>TEXT</p>
</div>
</div>
</div>
</li>
<li class="event">
...
</li>
</ul>
I want <div class="thumb user-3">title</div> to work as a radio button as well. I want both to be clickable. I've tried different ideas but doesn't seems to work.
Many thanks.
You can set the checked attribute of radio to value "checked" when clicked the div.
<div class="thumb user-3" onclick="document.getElementsByName('tl-group').checked='checked';">title</div>
I have been searching for the same piece of code as well. It worked! Saved my day.
div class="thumb user-3" onclick="document.getElementsByName('tl-group')[0].checked='checked';"
For those who are looking into refining the existing code by clicking barely anywhere (radio button, img div or ...the content-inner to trigger event), this is the code that works for me:
div class="content-inner" onclick="document.getElementsByName('tl-group')[0].checked='checked';"
Increase the [0] to 1,2,3, etc for more contents array.
Related
I'm fairly basic when it comes to coding websites, but I wanted to incorporate anchor points in to my horizontal scrolling website. I've had a go but it isn't working.
Below is the code I've tried - I'm not sure if it's something to do with my navbar not being the standard <li> instead im using separate divs. I will include an image of how i'm designing the site so that you can understand the concept.
HTML:
<div id="navbar">
<div class="tab1" href="#home">
<div class="text1">Home</div>
</div>
<div class="tab2" href="#work">
<div class="text2">Work</div>
</div>
<div class="tab3" href="#about">
<div class="text3">About</div>
</div>
</div>
<div id="container">
<div id="fullscreen">
<div class="box home" id="home">
<div class="heading">
<h1>Hi,</h1>
<h2>I'm Nathan Wilson</h2>
<h3>a Graphic Designer based in Nottingham, U.K.</h3>
</div>
</div>
<div class="box work" id="work">
</div>
<div class="box about" id="about">
</div>
</div>
</div>
Image: https://imgur.com/fh6hq3O
I want to incorporate smooth scrolling eventually, but that's something I'll look in to once i've fixed this issue.
Anchor points work due to property binding the tag elements as follow
Where You Click!
<a name="anchor-point-1"></a>
So #anchor-point-1 is the property element that binds to the NAME of the anchor tag which you can place anywhere in your markup vertically or horizontally depending on how you are styling your app.
you can do multiple anchor tags as follows for a tabs like template
Where You Click!
<a name="anchor-point-tab-1"></a>
Where You Click!
<a name="anchor-point-tab-2"></a>
It doesn't matter what you name the tags as long as your original link and the anchor have the same binding element HREF = the same NAME property.
You can also bind the elements to divs, spans, and other tags for these types of visual and scrolling effects
For internal anchoring attributes
There are three anchor attributes you need to know to create functional hyperlinks. These attributes are href, target, and download.
These are considered anchors as well but do not bind one tag to another!
Anchor 1: mailto:
<a href="mailto:contact#anchor.com">
Anchor 2: tel:
make call (555)123-9876
Anchor 3: target="_blank"
<a href="https://test.com" target="_blank">
To learn about the dynamics and inner working of all the attributes of A href tags please go to the link below.
https://html.com/anchors-links/
hope this is sufficient!
Your doing it right, except that you have to use <a> balise instead of <div>
<a class="tab1" href="#home">
<div class="text1">Home</div>
</a>
You are close. Instead of wrapping your <div> within a <div class="tab1" href="#home"> you need to use the anchor tag Test. Try this.
<div id="navbar">
<div class="tab1">
Home
</div>
<div class="tab2">
Work
</div>
<div class="tab3">
About
</div>
</div>
<div id="container">
<div id="fullscreen">
<div class="box home" id="home">
<div class="heading">
<h1>Hi,</h1>
<h2>I'm Nathan Wilson</h2>
<h3>a Graphic Designer based in Nottingham, U.K.</h3>
</div>
</div>
<div class="box work" id="work">
Work Content
</div>
<div class="box about" id="about">
About Content
</div>
</div>
</div>
So, what I am trying to do, is put a div inside a div. The text editor reads the second div's end as the first one's.
This kind of stumped me, so I haven't really tried anything else
<div id="navbar">
</div>
<div id="else">
<div>
</div>
<div id="project1">
</div>
</div>
The last div should go with the first one.
<div id="navbar">
<div id="outer">
<div id="innerOne">
</div>
<div id="innerTwo">
</div>
</div>
</div>
Be sure to make good use of indenting and spacing if you want to make things easier on yourself!
If you notice in your code when you declare the first div you immediately close it again and start a new one, every other div wants to be nested inside it.
<div id="navbar">
A Div on it's own
</div>
<div id="else">
A new div on the same 'level' as the last
<div>
a Child of the else div
</div>
<div id="project1">
second Child of the else div
</div>
end of else
</div>
Figuring the nesting is easier when you:
Indent the code, and
Add comments to track the (matching) closing tags
<div id='navbar'> // open navbar
<div id='else'>
</div> //end else
<div id='project1'>
</div> //end project1
</div> //end navbar
(my code block thing is being buggy, but I hope you understand what I was saying...)
In HTML after most opening tag should come the content and then the closing tag
in your case ...
There are self-closing tags also, which don't need a closing one for example: <img src="">
Your code is wrong, because after the <div id="else"> you have another div opening tag, but there should be a closing tag before it, like this:
<div id="navbar">
</div>
<div id="else">
</div>
<div id="project1">
</div>
Nesting divs should look like this:
<div id="navbar></div>
<div id="else">
<div id="project1"></div>
</div>
I have the following code in html:
<nav class="box">
<div class="logo">
<button class="c-hamburger c-hamburger--htx linksbuendig">
<span>toggle menu</span>
</button>(...)
</div>
</nav>
<div class="relative box">
<div class="nav">
<ul>
<li>
Login
</li>
</ul>
</div>
and this in CSS:
.c-hamburger:focus ~ div.nav {
margin:0;}
so if the button is focused the div should change the margin. But it won't work, until i copy the code for the button 1 to 1 directly over the div with the class nav. Why does it so and what can I change? Just copy solves the problem until now, but then is the full page destroyed, because there're other elements in between etc.
JS or sth. like that is not allowed. Please only CSS resp HTML.
Beforehand: Thanks!
I wrapped all contents with <div> which height and width is both 100px. Contents inside this <div> contains index and content.
The problem is that clicking "a2" in the following code won't let me jump to the bottom contents in Google Chrome.
<div style="height:100px;width:100px;overflow:scroll;">
<ul>
<li>a1</li>
<li>a2</li>
</ul>
<h2 id="a1">a1</h2>
a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>
<h2 id="a1">a2</h2>
a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>
</div>
The working code can be seen from the following link.
http://jsfiddle.net/L7rQ6/
Is there some good solution to make "a2" jump to the proper contents?
You missing to update your 2nd <h2> element set id="a2" instead of id="a1"
Check demo jsfiddle
Update this small,
<h2 id="a2">a2</h2>
HTML (Updated)
<div style="height:100px;width:100px;overflow:scroll;">
<ul>
<li>a1</li>
<li>a2</li>
</ul>
<h2 id="a1">a1</h2>
a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>
<h2 id="a2">a2</h2>
a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>
</div>
You need to use:
<h2 id="a2">
instead of:
<h2 id="a1">
for your second h2 element. Current you've duplicated id which is invalid HTML as well.
Updated Fiddle
As Felix and user1153551 has said you have duplicated the Id for both of the tags try this.
<div style="height:100px;width:100px;overflow:scroll;">
<ul>
<li>a1</li>
<li>a2</li>
</ul>
<h2 id="a1">a1</h2>
a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>
<h2 id="a2">a2</h2>
a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>
</div>
I am trying to figure out how to do this... I have 4 divs that I am looking to show and hide one at a time. The link to the divs are in a separate nested div. Here's my code:
<div id="container">
<div class="roundbox">
<ul>
<li class="t">
Main
</li>
<li class="e">
News
</li>
<li class="t">
History
</li>
<li class="e">
Contact
</li>
</ul>
</div>
<div class="inceptioncontent">
<div class="content">
<div class="contentnest">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
</div>
</div>
</div>
</div>
I want the Main, News, Contact, and History links to show/hide the corresponding divs in the contentnest div. Any ideas? Thanks!
JQuery is great at doing his sort of thing. This looks like a good place to start: http://papermashup.com/simple-jquery-showhide-div/
It seems your looking for a drop down menu. You can achieve this:
Coding it in Javascript + css ( with a framework like jQuery it will be easier)
; With Css
; Downloading A plugin
I think the "Css only" is the best way, jQuery is cool and download a plugin it's the easiest way, but you need the js of the user's explorer to be on.
You can check how to do it only with css here:
https://www.grc.com/menudemo.htm