[TYPO3-english] tt_news - the complete wrap

[Marc]

Hello Ron,

thank You for the quick reply! Selecting tags in Javascript works for now.

Below is a copy of my code in case someone needs a quick solution.

Unfortunately the structure of my List is very likely to change sooner or later. 

Now I doubt if this solution will be flexible enough to add easily new features like

- different or slightly altered news
- different numbers of news entries
- compatible with more browsers / mobile web / screen reader
- SEO

It seems this way I will have to change 3 parts with each new feature:

1. Typoscript
2. Javascript
3. CSS

Probably it is just my lame javascripting, but the Javascript itself tends to become more complex. I also need to perform certain initialization on some of the entries.. Selecting and iterating through the elements seems complicated, especially since there might be a couple of older Browsers among the visitors.

To keep things simple I would like to keep as much as possible control on the server. Is there really no way to wrap the whole enty?

Best Regards,
Marc




ts:

---

plugin.tt_news.displayList.content_stdWrap.wrap (
	<div class="fullArticle">|</div>
	|*|
	<div id="content1" class="newsEntry" style="cursor:pointer;" onmouseover="doSomething(this.id);" onmouseout="doSomethingElse(this.id);"">|</div>
	||
	<div id="content2" class="newsEntry" style="cursor:pointer;" onmouseover="doSomething(this.id);" onmouseout="doSomethingElse(this.id);">|</div>
	||
	<div id="content3" class="newsEntry" style="cursor:pointer;" onmouseover="doSomething(this.id);" onmouseout="doSomethingElse(this.id);">|</div>
	||
	<div id="content4" class="newsEntry" style="cursor:pointer;" onmouseover="doSomething(this.id);" onmouseout="doSomethingElse(this.id);"|</div>
)
	
---

js:

---

function doSomething(which) {
	var headline = getHeadline(which);
	headline.style.color = "#660000";
}

function doSomethingElse(which) {
	var headline = getHeadline(which);
	headline.style.color = "#000000";
}

function getHeadline(which) {
	var pId;
	if(which == "content1") {
		pId = 1;
	} else if(which == "content2") {
		pId = 2;
	} else if(which == "content3") {
		pId = 3;
	} else if(which == "content4") {
		pId = 4;
	} else  {
		return
	}
	var arr = getElementsByClass( "newsItem", document, "DIV" );
	return arr[pId]
}

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}

---







On Mar 1, 2011, at 2:37 AM, Ron Hall wrote:

> Hello Marc,
> 
>> But for my case I would like to enumerate the list independent from the news id. 
>> 
>> I need that id to manipulate the DOM from javascript. 
> 
> If you are simply manipulating it with JS, put a class on the divs, select them and target them by their position in the selection
> 
> 
> Thanks,
> Ron Hall
> 
> 
> 
> 
> 
> On Feb 28, 2011, at 4:21 PM, Marc wrote:
> 
>> Hey Robert!
>> 
>> Thank You for the hint! The marker NEWS_UID holds the current id of the news entry.
>> 
>> But for my case I would like to enumerate the list independent from the news id. 
>> 
>> I need that id to manipulate the DOM from javascript. 
>> 
>> That script is limited to the first 5 news entries so the enumeration should be always like
>> 
>> <div id="news_1">
>> 	<h1>Title</h1>
>> 	<p>Content</p>
>> </div>
>> 
>> <div id="news_2">
>> 	<h1>Title</h1>
>> 	<p>Content</p>
>> </div>
>> 
>> <div id="news_3">
>> 	<h1>Title</h1>
>> 	<p>Content</p>
>> </div>
>> 
>> <div id="news_4">
>> 	<h1>Title</h1>
>> 	<p>Content</p>
>> </div>
>> 
>> <div id="news_5">
>> 	<h1>Title</h1>
>> 	<p>Content</p>
>> </div>
>> 
>> Regards!
>> Marc
>> 
>> 
>> 
>> 
>> 
>> On Feb 28, 2011, at 10:55 PM, Rob De Vries wrote:
>> 
>>> There is a marker called : NEWS_UID
>>> 
>>> 
>>> <div id="###NEWS_UID
>>> ###">
>>> you content
>>> </div>
>>> 
>>> would add the news id.
>>> 
>>> Rob 
>>> -- 
>>> --------------------------
>>> Rob De Vries
>>> www.rob-ot.be
>>> 
>>> _______________________________________________
>>> TYPO3-english mailing list
>>> TYPO3-english at lists.typo3.org
>>> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english
>> 
>> _______________________________________________
>> TYPO3-english mailing list
>> TYPO3-english at lists.typo3.org
>> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english
>> 
> 
> _______________________________________________
> TYPO3-english mailing list
> TYPO3-english at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english