help building a section nav menu with jquery - javascript

I could really use some help with what I have a feeling will be some pretty basic jquery, but I'm stuck all the same.
I have an unknown (dynamically generated) number of divs in my html each with a class of "page".
What I want to do is add an id to each div.page, and then fill a ul with an id of menu with li for each div.page containing an anchor with a href value of #page_n
(ie the id value of its corresponding div)
I want my output to look like this:
<div class="page" id="page_1">
...content...
</div>
<div class="page" id="page_2">
...content...
</div>
.....
<div class="page" id="page_n">
...content...
</div>
<ul #menu>
<li>Page 1</li>
<li>Page 2</li>
.....
<li>Page n</li>
</ul>
I'm adding the id's okay with:
$('li.page').each(function(index){$(this).attr("id", "page_" + (index+1));
});
But I'm struggling with the second part of my problem. I know this is probably kinda basic, but I'm just starting out....
Any help gratefully received... thanks in advance...

If your HTML initially looks like this:
<div class='page'>...</div>
<div class='page'>...</div>
<div class='page'>...</div>
<ul id='menu'></ul>
This jQuery code:
$(document).ready(function() {
$('div.page').each(function(i) {
var x = i+1;
var id = 'page_' + x;
$(this).attr('id', id);
var li = $('<li/>').append(
$('<a/>').attr('href', '#' + id).html('Page ' + x)
);
$('#menu').append(li);
});
});
Will make your HTML look like this:
<div class='page' id='page_1'>...</div>
<div class='page' id='page_2'>...</div>
<div class='page' id='page_3'>...</div>
<ul id='menu'>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>

Related

Chaining jquery append

I'm trying to figure out how I can chain multiple append into my markup. Basically after appending an element, I would like the next element to append it to the first appended element. I hope what I'm saying makes sense.
If you take a look at my code, I just appended the element <ul class="menu" /> into the element #footer .research-centers-menu .research.
Then on the next code I'm trying to insert/append the variable centers to the <ul class="menu" />
The current output right now doesn't insert the element but places it outside instead. Apologies for my bad english and explanation
var researchCenters = $('a[href$="/items"]').next().clone(),
centersList = $('li', researchCenters),
centers = centersList.slice(0);
var research = $('#footer .research-centers-menu .research').append('<ul class="menu" />');
$(research).append(centers);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<ul>
<li>item one</li>
<li>item two</li>
</ul>
</li>
</ul>
<div id="footer">
this is a footer
<div class="research-centers-menu">
<div class="research">
</div>
</div>
</div>
The cause of your appending issue is because append() returns the original element, not the appended element.
To make your code work you could invert the logic so that you create the new ul, then use appendTo(). This will retain the reference required to append the li. Try this:
var researchCenters = $('a[href$="/items"]').next().clone(),
centersList = $('li', researchCenters);
var $research = $('#footer .research-centers-menu .research');
var $ul = $('<ul class="menu" />').appendTo($research);
$ul.append(centersList);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<ul>
<li>item one</li>
<li>item two</li>
</ul>
</li>
</ul>
<div id="footer">
this is a footer
<div class="research-centers-menu">
<div class="research"></div>
</div>
</div>
try to append like this.
var researchCenters = $('a[href$="/items"]').next().clone(),
centersList = $('li', researchCenters),
centers = centersList.slice(0);
var research = $('#footer .research-centers-menu .research')
var ul =$('<ul class="menu" />').append(centers);
research.append(ul);

Javascript post filtering system not functioning

I'm trying to create a simple filtering systemt that would hide posts that do not have the same id as the li's under the navig class. To achieve this I am looping through all .article li's and checking what's their id.
Example:
click on li with id="health"
Article 2 disappears
Thank you!
HTML:
<ul class="navig">
<li id="health">Health</li>
<li id="ASD">ASD</li>
</ul>
<br>
<ul class="article">
<li id="health">Article 1</li> <br>
<li id="ASD">Article 2</li> <br>
<li id="health">Article 3</li>
</ul>
Javascript:
$('.navig li').onclick(function () {
$id = this.id;
$('.article li').each(function() {
if ($id != this.id) {
$('.article li').hide();
}
});
});
The fundamental problem is your HTML is invalid. You can't use the same id value on more than one element. Separately, you've used onclick where you would want to use click.
I'd probably use a data-article-id attribute on the navigation li instead, like this:
For example: Live copy (source)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset="utf-8">
<title>Testing</title>
</head>
<body>
<ul class="navig">
<li data-article-id="health">Health</li>
<li data-article-id="ASD">ASD</li>
</ul>
<br>
<ul class="article">
<li id="health">Health Article</li>
<li id="ASD">ASD Article</li>
</ul>
<script>
$('.navig li').click(function () {
var articleId = $(this).attr("data-article-id");
alert(articleId);
var articles = $(".article li");
articles.not("#" + articleId).hide();
$("#" + articleId).show();
});
</script>
</body>
</html>
You'll want to do something to hide the articles (or show a default one) when the page loads, etc.; I'll leave that as an exercise for you. :-)
Side note: br elements cannot be children of ul elements, I've removed the ones from the articles list.
$('.navig li').onclick(function () { <-- not valid jquery
There is no onclick method in jQuery...there is .click(function(){}) or on("click", function(){})
second porblem, ids need to be singular. They can not be repeated. Use a data attribute [and br's can not be children of ul]
<ul class="navig">
<li id="health">Health</li>
<li id="ASD">ASD</li>
</ul>
<br>
<ul class="article">
<li data-id="health">Article 1</li>
<li data-id="ASD">Article 2</li>
<li data-id="health">Article 3</li>
</ul>
and script
$('.navig li').on("click", function() {
var id = this.id;
$(".article li").hide().filter('[data-id="' + id + '"]').show();
});
JSFiddle: http://jsfiddle.net/q8SCF/

How to show specific div's from li-objects?

I' trying to create a <ul> with <li> objects to slide the UL away and show specific div's.
I have these div-tags:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
And this list:
<ul class="meny">
<li id="show1">Show 1</li>
<li id="show2">Show 2</li>
<li id="show3">Show 3</li>
</ul>
Why doesn't this JS work?
$(function() {
$("#show1").click(function() {
$(".meny" ).toggle("slide");
$("#1").click("show");
});
});
I've been trying all night long...
EDIT
I'm trying to get my project to have a CLICK-event fired when you press a specific list object. When that is done, the whole ul should slide away and show a specified div.
See: http://aatw.se/test/booking.html
it should work too-
$("#1").css("display","block");
$("#1").click("show");
should be:
$("#1").show();
Firstly your div's are empty .
Next
$("#1").click("show");
Supposed to be
$("#1").show();
You can write up a single event handler to all the li's by using HTML-5 data attributes
HTML
<div id="1">This is Div 1</div>
<div id="2">This is Div 2</div>
<div id="3">This is Div 3</div>
<ul class="meny">
<li data-id="1">Show 1</li>
<li data-id="2">Show 2</li>
<li data-id="3">Show 3</li>
</ul>
JS
$(function() {
$("li").click(function() {
$(".meny" ).toggle("slide");
$("#" + $(this).data('id')).show();
});
});
Check Fiddle
as mentioned, you need to call the show function. Your divs being empty is not an issue. But you should hide them on page load, or set them display to none in your css.
here is a fiddle - http://jsfiddle.net/D6qUe/2
here's your updated code
$("#show1").click(function() {
$(".meny" ).toggle("slide");
$("#1").show();
});
$('div').click(function(){
$('.meny').toggle('slide');
$(this).hide();
});
possible css
div{width:100px;height:100px;background-color:#afa;border:1px solid #0f0;display:none;}

How do you find a div with a variable class?

HTML:
<ul>
<li>This is Link 1</li>
<li>This is Link 2</li>
<li>This is Link 3</li>
</ul>
<div id="somediv">
</div>
<div class="a1">div 1</div>
<div class="a2">div 2</div>
<div class="a3">div 3</div>
JQUERY:
$('a').on('click', function(e) {
$('#somediv').html($('."this.id"').text());
e.preventDefault();
});
Basically what I want to do is, when I click one of the links in the list, it replaces the contents of "somediv" with the contents of a div that has the class that matches the id of the link.
In other words, when I click link id "a1", I want it to display class "a1" in "somediv". I just don't know the syntax for how to call that in the second line of the jquery.
Do this
$("#a1").click(function() {
var divClass = $(this).attr("id");
$("#somediv").empty().append($("."+divClass).html());
});
http://jsfiddle.net/vD4hA/
Only issue was with your concatination.
You don't need to use $(this).attr('id') since this inside the context is the DOM element and id or any attribute can be retrieved directly as object properties.
$('a').on('click', function(e) {
$('#somediv').html($('div.' + this.id).text()); // You probably dont need 'div.'
//but it is safe to use as you are not selecting based on id(unique) but a class which
//can be in multiple places.
});
$('a').click(function (e) {
$('#somediv').html($('.' + $(this).attr('id'))).text();
e.preventDefault();
});
jsFiddle example
I suggest you modify slightly your code to accept the new HTML5 specifications. More specifically, use the aria-owns which is exactly what you're doing here. See demo.
HTML
<ul>
<li>This is Link 1</li>
<li>This is Link 2</li>
<li>This is Link 3</li>
</ul>
<div id="somediv">
</div>
<div style="display:none;">
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
</div>
JS
$("a[aria-owns]").on("click", function(e) {
$("#somediv").empty()
.append($("#" + $(this).attr("aria-owns")).clone());
return e.preventDefault(), false;
});

Append string to child link URLs

What's the best way to append a string to the end of links in a list with Javascript?
From:
<div id="pagination">
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
to
<div id="pagination">
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
ExpressionEngine gives little control to how these pagination links are generated.
$('#pagination a').attr('href', function() {
return this.href + '?some=blah';
});
Look at it working here.
Edited as per elusive's input in the comments.
Quick and dirty:
$('#pagination li a').each(function() {
this.href += '?some=blah';
});
This should work for you:
$('#pagination a').each(function () {
this.href += '?some=blah';
});
Change #pagination a to whatever selector you need.

Categories

Resources