Href Navigation to Div Tag - javascript

In my html page there are few div tags and each of them is having <fieldset> and <legend>. Usually we use href for navigation from 1 page to other page
And I could like to navigate from one div tag to another div tage from using
href. Can any one help me how can I do it.


Clicking on Jump will take you to div#anchor1
Jump
<div id="anchor1">Your content goes here</div>
https://jsfiddle.net/1pwo1gqb/1/


All you have to use id and attach it to the a tag like this
.container{
height: 500px;
padding-top: 20px;
}
.nav{
position: fixed;
}
<div class="nav">
section 1
section 2
section 3
section 4
section 5
section 6
</div>
<div class="container" id="s1">
<h1>Section 1</h1>
</div>
<div class="container" id="s2">
<h1>Section 2</h1>
</div>
<div class="container" id="s3">
<h1>Section 3</h1>
</div>
<div class="container" id="s4">
<h1>Section 4</h1>
</div>
<div class="container" id="s5">
<h1>Section 5</h1>
</div>
<div class="container" id="s6">
<h1>Section 6</h1>
</div>


As #sandeep Nayak have explained,
<div id="div1"> some data Go to div 2 </div>
<div id="div2"> some data Go to div 1 </div>

Related

the final page 20% trance Y one page Pure JS One Page Scroll Plugin

i'm using https://github.com/peachananr/purejs-onepage-scroll
i want final page 20% transform
example http://www.jqueryscript.net/demo/Smooth-One-Page-Scroll-Plugin-For-jQuery-SONP/
<body>
<div class="wrapper">
<div class="main">
<section class="page1">
<div class="page_container">
</div>
</section>
<section class="page2">
<div class="page_container">
</div>
</section>
<section class="page3"><!-- i want 20% transform -->
<div class="page_container">
</div>
</div>
</section>

Page Transition not working (jQuery mobile)

I'm trying to learn jQuery mobile. I tried to use data-transition used for page transition, but it's showing the default fade transition only for other transistion, even if i using other transitions like pop, flip etc
I'm able to view all transitions displayed on jQuery docs
Here's my html body :
<div data-role="page" id="page1" data-title="Page 1">
<div data-role="header">
<h1>Heading 1</h1>
</div>
<div data-role="content">
<p>Hi! I'm the content in the page</p>
<!-- Have used `data-transistion` below -->
Page 2
<br/>
Pop Up
</div>
<div data-role="footer">
<h1>Footer 1</h1>
</div>
</div>
<div data-role="page" id="page2" data-theme="b" data-title="Page 2">
<div data-role="header">
<h1>Heading 2</h1>
</div>
<div data-role="content">
<p>Hi! I'm the content in the page 2</p>
Page 1
<a data-role="button" data-rel="back">Back</a>
</div>
<div data-role="footer">
<h1>Footer 2</h1>
</div>
</div>
<div id="popup" data-theme="b" data-title="Pop Up">
<div data-role="header">
<h1>Pop Up</h1>
</div>
<div data-role="content">
<p>Hi! I'm the content in the Pop Up</p>
Page 1
</div>
<div data-role="footer">
<h1>Pop Up</h1>
</div>
</div>
What am i doing wrong?

How to show hidden content according to clicked value jquery?

sorry for the midunderstanding. I meant index, not value. Sorry.
I am wondering if there is a way to use the value of the shown content ".wbox" of this jsfiddle example to coincide with the hidden value, that when clicked will show the hidden content?
For example, When Cont 1 is clicked, hidden box 1 shows. When Cont2 is clicked, hidden box 2 shows... and so forth.
Here is my fiddle: http://jsfiddle.net/kqbLtn8b/1/
HTML:
<div class="box">
<div class="content one">
<h1>Cont 1</h1>
</div>
<div class="content two">
<h1>Cont 2</h1>
</div>
<div class="content three">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-one">one</div>
<div class="hidden-box b-two">two</div>
<div class="hidden-box b-three">three</div>
</div>
jquery:
var boxVal = $('.box').val();
Thanks for any help!
What I am really trying to do is shorten the code from something like this:
$('.one').on('click', function(){
$('.b-one').show()
});
and so forth with the rest

Try this : use index of content div to show hidden-box
$(function(){
$('.content').click(function(){
var index = $(this).index();
$('.hidden-content .hidden-box:eq('+index+')').show();
});
});
And make change in your css, instead of hiding hidden-content div you need to hide hidden-box. So change your
.hidden-content{
display:none;
}
to
.hidden-box{
display:none;
}
Demo

If you want to stick to the current HTML you have, it is going to be cumbersome and dirty since there are 2 ways to handle that scenario.
Translate a string like "Cont 1" into "one", "Cont 2" into "two". It's all well and good till nine but what about 100 -> hundred? Or even thousand?
The other approach is instead of naming your hidden boxes as "b-one", "b-two", you can name them "b-1", "b-2", "b-3". That way you can just detect the clicked element and then wipe of the "Cont " part and then use the remainder of the string to get the hidden part's class.
Both the above cases will still give you a very very dirty code since you have to get the .html() of the clicked element and stip of h1 tags.
So my suggestion would be to follow the below method.
HTML:
<div class="box">
<div class="content one" rel="1">
<h1>Cont 1</h1>
</div>
<div class="content two" rel="2">
<h1>Cont 2</h1>
</div>
<div class="content three" rel="3">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-1">one</div>
<div class="hidden-box b-2">two</div>
<div class="hidden-box b-2">three</div>
</div>
JS:
$('.content').on('click', function(){
var divNum = this.rel;
$('.b-'+divNum).show();
});

I recommend restructuring your HTML in the following way:
<div class="box">
<div class="content" id= "c1">
<h1>Cont 1</h1>
</div>
<div class="content" id= "c2">
<h1>Cont 2</h1>
</div>
<div class="content" id= "c3">
<h1>Cont 3</h1>
</div>
<div class="hidden-content">
<div class="hidden-box" id= "h1">one</div>
<div class="hidden-box" id= "h2">two</div>
<div class="hidden-box" id= "h3">three</div>
then use this as your jquery code:
$('.content').click(function(){
var num = $(this).attr('id').split("c")[1];
$("#h"+num).show();
});
and by the way, change your css too:
.hidden-content{
/* display:none;*/
}
.hidden-box{
width:35px;
height:35px;
border:1px solid black;
display:none;
}

This is another way (although not so reliable, as it would break if you change your classes):
$(function () {
$('.content').on('click', function () {
var className = $(this).attr('class').replace('content', '').trim();
$('.hidden-box').hide();
$('.b-' + className).show();
});
});
.hidden-box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="content one">
<h1>Cont 1</h1>
</div>
<div class="content two">
<h1>Cont 2</h1>
</div>
<div class="content three">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-one">one</div>
<div class="hidden-box b-two">two</div>
<div class="hidden-box b-three">three</div>
</div>
UPDATE
Based on #Regent comment which I agree to, this would be a more reliable way because it will work even if you change your markup.
You just need to add a data attribute to your markup that will be used to match elements:
$(function () {
$('.content').on('click', function () {
var sel = $(this).data('rel');
$('.hidden-box').each(function () {
$(this).toggle($(this).data('rel') == sel);
});
});
});
.hidden-box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="box">
<div class="content one" data-rel="1">
<h1>Cont 1</h1>
</div>
<div class="content two" data-rel="2">
<h1>Cont 2</h1>
</div>
<div class="content three" data-rel="3">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-one" data-rel="1">one</div>
<div class="hidden-box b-two" data-rel="2">two</div>
<div class="hidden-box b-three" data-rel="3">three</div>
</div>

Waypoints.js horizontal and vertical in one page

I'm writing a parallax website with waypoints.js and skrollr.js
and ran into a problem:
slide1 should scroll normal (vertical) and slide-2 should scroll horizontal once it's triggered (width: 4000px). But I have no idea how to do that. I know the new waypoints.js has horizontal:true but I'm kinda stuck right now. Has anyone an idea?
<section id="slide-1">
<div data-anchor-target="#slide-1">
<div class="Container">
<div class="Content">
<h2>Scroll this vertically</h2>
</div>
</div>
</div>
</section>
<section id="slide-2">
<div data-anchor-target="#slide-2">
<div class="Container">
<div class="Content">
<h2>Scroll this horizontal</h2>
</div>
</div>
</div>
</section>
<section id="slide-3">
<div data-anchor-target="#slide-3">
<div class="Container">
<div class="Content">
<h2>Scroll this vertically again</h2>
</div>
</div>
</div>
</section>
Maybe something like:
$('#slide-2').waypoint(function() {
//toogle #slide-2 width:4000px scroll horizontal:true etc.
;});

How to obtain the "id" of the Page which is shown in jquery mobile

I have various pages in html like this
<body onload="init()">
<div data-role="page" id="home">
<div data-role="header">
<h1>Here is the index page.</h1>
</div>
<div data-role="content">
<p><center>Below you may transition to our other pages.</center></p>
About Me
</div>
</div>
<div data-role="page" id="about">
<div data-role="header">
<h1>About Us</h1>
</div>
<div data-role="content">
Back Home
</div>
</div>
</body>
Now i need to grab the id of the page which is shown currently... How to do that?

Have you tried: $.mobile.activePage.attr('id')

Any of these:
$('div:jqmData(role="page").ui-page-active').attr('id');
$('.ui-page-active').attr('id');
should also do.

Categories

Resources