PDA

View Full Version : build a menu from titles in html



nosarious
8 Aug 2010, 10:11 PM
I am trying to build a menu, but would like very much not to build the elements from an html page.

The structure of the elements in the html is:

<div id="c2">
<div id="c2-title" class = "main-wrapper">
<div class="article-title">
<h4>introduction</h4>
</div>
</div>
<div class="space-padding-75"> </div>
<div id="article-wrapper">
<div class="issue-container">

-- FANTASTIC content lives here

</div>
</div>
</div>

I am trying to keep this all in the html so that the content can be accessed by googlebots, and it is only one file that a person has to access to create their own document.

I can read the tags with a for-loop, but I don't know how to get the information from the title div into a menu list that I could use in Sencha... Any help with this would be appreciated... I just don't know the best way to proceed.

evant
8 Aug 2010, 10:16 PM
That's a bit vague. Will there be a list of divs? c1, c2, c3....?

What info do you want to extract from the DOM?

nosarious
14 Aug 2010, 7:53 PM
sorry. missed the response for this a while back.

I need to build a list from the entries of the article titles. Each article is in the html file in this format:



<div id="c2">
<div id="c2-title" class = "main-wrapper">
<div class="article-title">
- This is the title I need in the list
</div>
<div id="article-wrapper">
<div class="issue-container">
- a bunch of article content goes here
</div>
</div>
</div>
</div>


I'll probably be condensing the code used for this, but the idea in this case is to take anything with <div class="article-title"> and making it into a list within an overlay that I can use to navigate the publication.

evant
15 Aug 2010, 12:26 AM
Something like this:



Ext.select('.article-title').each(function(item){
var title = item.dom.innerHTML;
});

nosarious
15 Aug 2010, 12:56 PM
Well, aside from the obvious location, where would I place this?

I have an overlay already set up.


var mainmenu = new Ext.Panel({
floating: true,
modal: false,
centered: true,
width: 280,
height: 200,
styleHtmlContent: true,
dockedItems: mainmenuTb,
scroll: 'vertical',
items: {// the menu items from html
- the menu creation scheme goes here...
}
});

I've tried to build an array of the menu titles, but my brain must be on vacation, because I can't figure out if it is working or not.


//read all article titles into menutitle array

var menutitle = [];
var menuitems = document.getElementsByTagName('article-title');
for(i=0; i < menuitems.length; i++){
menutitle.push(menuitems.dom.innerHTML);
};

I'll eventually be creating links for all of these so one can go directly to articles instead of having to swipe through them. I'll pester you people for that later.

evant
15 Aug 2010, 4:19 PM
Think about what you're trying to do. You're trying to achieve the same effect as



items: [{
html: 'Foo'
},{
html: 'Bar'
}]


The only difference is you're pulling this info from the dom and creating it at runtime.

So:



var items = [];
Ext.select('.article-title').each(function(el){
items.push({
html: el.dom.innerHTML
});
});

var mainmenu = new Ext.Panel({
floating: true,
modal: false,
centered: true,
width: 280,
height: 200,
styleHtmlContent: true,
dockedItems: mainmenuTb,
scroll: 'vertical',
items: items
});

nosarious
15 Aug 2010, 5:00 PM
And this all has to live within the Ext.Setup.

I had mine reading outside of that, no wonder I was getting so frustrated. I'll try building the links now, and I have to alter my css a tad so it isn't all quite so large... results (so far) are here: http://straathof.acadnet.ca/beta3.1/

I'm not an ***** (not completely, anyways). Is there a book or reference I should looking at instead trying to muster my inadequate GoogleFu to get these answers?

evant
15 Aug 2010, 5:09 PM
You can't access the DOM outside the onReady block, that's what it's there for! ;)

nosarious
17 Aug 2010, 9:44 PM
Okay. I have everything in place. Css has been rearranged to have two states for the menu (one for the title above the article, another for the menu list in the overlay.

I didn't think this would be that easy...

I am using the method you showed me earlier to create the menu:


var items = [];
Ext.select('.article-title').each(function(el){
items.push({
html: '<div class="menu_text">' + el.dom.innerHTML + '</div>',
});
});

and the call to get it to work from within my overlay:

items: items

however, I can't figure out how to get the links to work, much like you showed me a long, long time ago (like a whole month ago...)


listeners: {
afterrender: function(c){
c.body.on('click', function(e, t){
if(Ext.fly(t).hasClass('last')){
c.setCard(2);
}else{
c.setCard(0);
}
}, c, {delegate: 'a.move'});
}
},

After that huge diatribe, could you show me how I could get a link to the 'setcard()' from within the html? Or pass a variable that let's me use an <a href="javascript:...> within the html to establish a link to move to a specific card?

I would like it in the html because not ever slide should be linked to directly (I leave 'empty' cards so when the background is changed, you can swipe the text out of the way to see the background image)

nosarious
18 Aug 2010, 5:08 PM
After two days of rummaging in some darker corners of the interweb, I found the answer, but not everything I need...

First, this is the html for the titles I am using:

<div id="c2-title" class = "main-wrapper">
<div class="start article-title">
<a href="#" onClick="javascript:change(1); return false;">What is <logo-inline>test</logo-inline> Magazine?</a>
</div>
</div>

This is the code for grabbing the titles from the html tag:

// read menu items from document
var items = [];
Ext.select('.article-title').each(function(el){
items.push({
html: '<div class="menu_text">' + el.dom.innerHTML + '</div>',
});
});

This is how the menu is populated in thhe overlay

// create a floating menu on double-click
var mainmenu = new Ext.Panel({
showAnimation:'pop',
style: 'opacity: 0.75',
floating: true,
modal: false,
centered: true,
width: 280,
height: 200,
dockedItems: mainmenuTb,
layout: 'auto',
scroll: 'vertical',
items: items
});

And this little bit is the way to read the click on the title in the menu bar to go to a specific card:

// get the value of any menu choice, goto card
window.change = function change_card (card_number){
publication.setCard(card_number,'slide','up');
//alert(card_number);
};
all of the javascript is within the Ext.setup.

What I need is to find out how to set the animation directions for the cards sliding in under the overlay. It doesn't make much sense to be at the last page and have the front cover slide in from the right... I haven't been able to figure out how to set up the anim items from the API...

nosarious
18 Aug 2010, 11:35 PM
I thought I had posted this earlier, but it may have gotten lost in the moderation system...
This is the html code from the article. Change the (1) to whatever card this html refers to (yes, you will be able to 'select' the card you are on but it doesn't appear to cause problems)

<div id="c2-title" class = "main-wrapper">
<div class="start article-title">
<a href="#" onClick="javascript:change(1); return false;">this is my title text</a>
</div>
</div>

This code reads the article titles,(including the javascript portions). There is a separate class for how this text looks within the menu overlay.

// read menu items from document
var items = [];
Ext.select('.article-title').each(function(el){
items.push({
html: '<div class="menu_text">' + el.dom.innerHTML + '</div>',
});
});

This code places them in the overlay:

// create a floating menu on double-click
var mainmenu = new Ext.Panel({
floating: true,
//draggable: true,
modal: false,
centered: true,
width: 280,
height: 200,
dockedItems: mainmenuTb,
layout: 'auto',
scroll: 'vertical',
items: items
});

The code for this system (an open-source publishing engine) will be on a Google Code project (github?) once I figure out how mercurial and/or svn work. I am working on an alternative menu system that does not rely on the visual nature of the overlay as well...