jquery - how to use <div id="SomeId"></div> for navigation purpose -
first of per requirement create slider found following link reference 1
that have implemented successfully, when started put asp.net code started create problem(s). able solve many of them 1 have trapped up. want guidance in this.
problem: want move "sub page content 2" once user has submitted form1 of sub page content 1 automatically. able jump tab page2 not able move contents of sub page content 1 left automatically using jquery.
in order solve have found many threads here, giving solution move jquery ui tab widget. want understand code structure written below too.
<div class="main_main_container"> <div id="linktopage1"> <div id="linktopage2"> <div id="linktopage3"> <div id="linktopage4"> <nav> <a href="#linktopage1">page1</a><a href="#linktopage2">page2</a><a href="#linktopage3">page3</a><a href="#linktopage4"></nav> <div class="pages"> <div class="page" id="subpage1"> sub page content 1 full flag asp.net form1 </div> <div class="page" id="subpage2"> sub page content 2 full flag asp.net form2 </div> <div class="page" id="subpage3"> sub page content 3 full flag asp.net form3 </div> <div class="page" id="subpage4"> sub page content 4 full flag asp.net form4 </div> </div> </div> </div> </div> </div> </div> this code identical code defined @ reference 1
in order understand code structure have taken of following page w3org_site, vanseocom, tympanus_web
at w3org site have found following gave me little understand above html code.
(as described on w3org)
destination anchors
<p> <a href="#section1"> history notes </a> <a href="#section2"> maths notes </a> <a href="#section3"> social science notes </a> </p> method 1:
<h2><a name="section1">history notes </a></h2> ...section 1... <h2><a name="section2">maths notes </a></h2> ...section 2... or
method 2:
we may achieve same effect making header elements anchors:
<h2 id="section1">history notes </a></h2> ...section 1... <h2 id="section2">maths notes </a></h2> ...section 2... now description made me confuse regarding code described on w3org because totally different code described @ reference 1 site.
why not using #character direct(send) user description of link history notes. , why in code on reference 1 author have written <div id="linktopage1"> , writing <a href="#linktopage1"> inside/nesting within <div id="linktopage4">
this special type of cssistry (chemistry) here not able grasp.
i hoping once able understand above cssistry going find answer of following question. has described above also.
author using css way direct user specified location. how can perform same using jquery. meant how ll able write equivalent code of #linktopage1:target .page(left:-100%); using jquery.
thanks!
the tabbed menu you're using designed it's not possible select tab js.
the menu works so, elements wrapped inside 3 wrappers, 1 of targeted clicking on link. pages given styling based on wrapper element targeted. problem can't target element using js, why can't select tab using js current code.
but don't worry, that's bad way css-only tabs anyway. if way shown in tutorial referred to, none of tabs appear selected before user clicks on 1 of tabs. also, requires lot of excess markup.
i suggest use radio buttons instead (if want tab menu navigation work purely css despite using js other things anyway). advantages of using radio buttons:
- you can use js select tab
element.checked=true; - you can have 1 of tabs pre-selected
checkedattribute - there's less markup cluttering html
- still pure css solution
i created function tab() can use select 1 of tabs. instance, tab(3) select third tab.
i tried go detail in comments of code below. understand requires quite knowledge of css selectors comprehend, ask if something's unclear.
/* following function can select tab displayed: tab(1) selects first tab instance. */ function tab(number){ var elems=document.getelementsbytagname("input"), navs=[]; for(var i=0;i<elems.length;i++) if(elems[i].getattribute("name")=="nav") navs.push(elems[i]); navs[number-1].checked=true; }body { overflow-x: hidden; font-family: sans-serif; text-align: center; } /* can select input elements name attribute "nav" using [attribute=value] selector select our radio buttons that'll become tabs: */ input[name=nav]{ width: calc(100% / 3); /* third of screen width */ height: 40px; position: fixed; top: 0; left: 0; margin: 0; z-index: 2; /* ::before pseudo elements on top of pages */ } /* give separate styling second , third tabs, can use same selector again target them specifically: */ input[value=i2]{ left:calc(100% / 3); } input[value=i3]{ left:calc(200% / 3); } /* radio buttons can't styled, trick create ::after pseudo element , place on top of radio button. when user clicks on pseudo element, activates parent selecting it. so, in nutshell, give ::after pseudo element styles radio button. */ input[name=nav]::after{ content: attr(data-title); /* display value of data-title attribute inside element. */ display: block; position: absolute; top: 0; left: 0; /* position on top of parent */ width: 100%; height: 100%; /* make size parent */ padding: 5px; background-color: #111; cursor: pointer; font: 2em/1 helvetica, arial; font-weight: bold; color: #aaa; text-align: center; box-sizing: border-box; -webkit-transition: background 1s; -moz-transition: background 1s; transition: background 1s; } input[name=nav]:hover::after{ /* styling when hovering */ background-color: #444; } input[name=nav]:checked::after{ /* styling when tab selected */ background-color: red; color: #fff; } /* ::after pseudo elements enough tabs work, if want have , forward buttons, should create these ::before pseudo elements also. work same idea. time however, position fixed can placed on top of pages. of course , forward buttons should appear tabs aren't selected, can use :not(:checked) selector: */ input[name=nav]:not(:checked)::before{ content: ''; display: block; position: fixed; top: 40px; left: 0; height: calc(100vh - 40px); width: 50vw; } input[value=i1]:not(:checked)::before{ width:100vw; } input[value=i1]:checked ~ input[value=i3]::before{ left:0; } input[value=i1]:checked ~ input[value=i2]::before{ left:50vw; } input[value=i2]:checked ~ input[value=i3]::before{ left:50vw; } .pages{ position: fixed; z-index:1; top: 40px; left: 0; height: calc(100% - 40px); width: 100%; -webkit-transition: left 0.8s; -moz-transition: left 0.8s; transition: left 0.8s; } .page{ position: absolute; top: 0; width: 100%; height: 100%; } .page#1 { background-color: #bbb; left: 0; } .page#i2 { background-color: #ccc; left: 100%; } .page#i3 { background-color: #ddd; left: 200%; } /* finally, use "after" ~ selector determine page show. idea here first match of radio buttons selected , .pages element follows it. reason shouldn't wrap navigation elements - need on same level in dom tree. so, instance if first tab selected, input[value=i1]:checked matched , can style .pages element ~ selector because comes after matched radio button in dom tree. */ input[value=i1]:checked ~ .pages { left: 0%; } input[value=i2]:checked ~ .pages { left: -100%; } input[value=i3]:checked ~ .pages { left: -200%; }<!-- navigation. needs on same level pages in dom tree ~ selector work, don't wrap it. put title want displayed in data-title attribute. --> <input type="radio" name="nav" value="i1" data-title="tab 1" checked> <input type="radio" name="nav" value="i2" data-title="tab 2"> <input type="radio" name="nav" value="i3" data-title="tab 3"> <!-- , here pages: --> <div class="pages"> <div id="i1" class="page"> <h1>slide 1</h1> </div> <div id="i2" class="page"> <h1>slide 2</h1> </div> <div id="i3" class="page"> <h1>slide 3</h1> </div> </div>
Comments
Post a Comment