Some problems with News Gadgets

Go down

Solved Some problems with News Gadgets

Post by th4nhc0n9 on October 19th 2014, 6:31 am

As we know we have news gadget which get inform from 1 box.
My problem:
- When the widget display, to view the page in detail, I click on the title but it is impossible. Currently, I only have to click the "comment" link to go detail. Could you help me to have "Full Read" link or add link to the title.

Other question:
- I want to customize the style for news widget? Is it possible and how?

Thank U so much.


Last edited by th4nhc0n9 on October 20th 2014, 7:18 pm; edited 1 time in total
avatar
th4nhc0n9
Forumember

Male Posts : 161
Reputation : 3
Language : Vietnam

http://vnbeauties.com

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by Ange Tuteur on October 19th 2014, 8:14 am

Hello th4nhc0n9,

To make the title a link, try this :
Administration Panel > Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : In all the pages
Code:
$(function(){$('.module.mod_news').each(function(){$(this).find('.h3').wrap('<a href="'+$(this).find('a[href^="/t"]').attr('href').replace('t','n')+'">')})});

It will link to "full reading" ^^


To style the news widgets you can use the selector .module.mod_news. Here is an exemple :
Code:
.module.mod_news {
  background:#333;
  border:1px solid #666;
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by th4nhc0n9 on October 19th 2014, 8:44 am

Thank Ange, I have 2 more questions.

1. Is it possible to resize the image that display in the new gadget?

For example:
- My news length: 100 character, there is a image also
- My gadget width is only 250 px, however the image is 500px, it can only display a part of image.
So, it is possible to auto resize the image (if have) in my widget display: E.g 100x100 px.
And when the new is opened it is displayed fully?

2. Now, when I click on News it redirects to the page with hidden comments.
Is is possible to open directly to the topic with full discussion/comment below.

THANKS
avatar
th4nhc0n9
Forumember

Male Posts : 161
Reputation : 3
Language : Vietnam

http://vnbeauties.com

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by Ange Tuteur on October 19th 2014, 9:00 am

For the topic itself, replace your script by :
Code:
$(function(){$('.module.mod_news').each(function(){$(this).find('.h3').wrap('<a href="'+$(this).find('a[href^="/t"]').attr('href')+'">')})});

To resize the images, add this to your stylesheet
Code:
.module.mod_news { width:100px; height:100px; }
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by th4nhc0n9 on October 19th 2014, 9:21 am

I mean to resize the image display inside my new gadget, not resize the widget news
Your code seems resizing the widget news.

Other question:
I have used:
Code:

/*Style for news*/
.module.mod_news {
font-size:11px;
font-weight:normal;
}

It does effect could u help me!
avatar
th4nhc0n9
Forumember

Male Posts : 161
Reputation : 3
Language : Vietnam

http://vnbeauties.com

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by Ange Tuteur on October 19th 2014, 9:23 am

Ooops sorry, I forgot to add the image tag. Try now ^^
Code:
.module.mod_news img { width:100px; height:100px; }
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by th4nhc0n9 on October 19th 2014, 9:30 am



It is really good now. I would like to remove color, size effect from the original.
So, I have tried:
Code:
/*Style for news*/
.module.mod_news {
font-size:11px;
font-weight:normal;
}
But it does not work. Could you help me to make it more perfect. THANKS
avatar
th4nhc0n9
Forumember

Male Posts : 161
Reputation : 3
Language : Vietnam

http://vnbeauties.com

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by Ange Tuteur on October 19th 2014, 9:42 am

See if this works for you :
Code:
.module.mod_news .content * {
  color:#F5F5F5;
  font-size:11px;
  font-weight:normal;
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by th4nhc0n9 on October 19th 2014, 9:48 am

It is really perfect now.
My last question, is it possible to have 2 - 3 widgets like News at once?
I want to display different news widget, each news from a different box.

Thanks.
avatar
th4nhc0n9
Forumember

Male Posts : 161
Reputation : 3
Language : Vietnam

http://vnbeauties.com

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by Ange Tuteur on October 19th 2014, 9:51 am

As far as I know you can only have one news widget at once, with news from a single forum.
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by th4nhc0n9 on October 19th 2014, 9:53 am

I know we can create a gadget with news from a box. But it is simply list the title of topic only.
Could we do similar but with the display style like News Widget?
avatar
th4nhc0n9
Forumember

Male Posts : 161
Reputation : 3
Language : Vietnam

http://vnbeauties.com

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by Ange Tuteur on October 19th 2014, 10:03 am

I could write something up using the RSS feed. I'll let you know when I have it done. Wink
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by th4nhc0n9 on October 19th 2014, 10:06 am

avatar
th4nhc0n9
Forumember

Male Posts : 161
Reputation : 3
Language : Vietnam

http://vnbeauties.com

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by Ange Tuteur on October 19th 2014, 12:00 pm

Okay, give this a try :
Administration Panel > Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : In all the pages
Paste the code below :
Code:
$(function() {
  newsWidget('left', 1, 3, 12);
  newsWidget('left', 2, 3, 413);
  
function newsWidget(column, forum, topics, special_id) {
  if (localStorage.getItem('newsMod-'+special_id) && localStorage.getItem('newsExp-'+special_id) > +new Date - 4*60*1000) {
    $('#'+column).append('<div id="news-'+special_id+'"><span class="hiddenItems" style="display:none"></span></div>');
    $('#news-'+special_id).html(localStorage.getItem('newsMod-'+special_id));
 return;
  }
  $('#'+column).append('<div id="news-'+special_id+'"><span class="hiddenItems" style="display:none"></span></div>');
  $('#news-'+special_id+' .hiddenItems').load('/feed/?f='+forum+' item:lt('+topics+')', function() {
    var it = 0;
    while (it < topics) {
      $('#news-'+special_id).append('<div class="module mod_news newsBox'+it+'"><div class="inner"><span class="corners-top"><span></span></span><div class="h3"></div><p class="dateAuthor"></p><span class="content"></span><p class="row3"></p><span class="corners-bottom"><span></span></span></div></div>');
      it += 1
    }
    $('#news-'+special_id+' .hiddenItems item').each(function(){
      var box = '.newsBox'+$(this).index();
      $('#news-'+special_id + ' ' + box + ' .h3').html($(this).find('title').text()).wrap('<a href="'+$(this).find('guid').text()+'">');
      $('#news-'+special_id + ' ' + box + ' .content').html($(this).find('description').text());
      $('#news-'+special_id + ' ' + box + ' .row3').html('<a href="'+$(this).find('comments').text()+'">View comments</a>');
      $('#news-'+special_id + ' ' + box + ' .dateAuthor').html($(this).find('pubdate').text() + ' by <strong>' + $(this).find('dc\\:creator').text() + '</strong>');
    });
    if (window.localStorage) {
      localStorage.setItem('newsMod-'+special_id, $('#news-'+special_id).html());
      localStorage.setItem('newsExp-'+special_id, +new Date)
    }
  });
}
});

To add new News widgets write : newsWidget(column, forum, topics, special_id)

Explained :

column : The column you want them to appear in ( left or right )

forum : The ID of the forum you want to load e.g. http://help.forumotion.com/f1-updates-and-new-features = f1 - f = 1

topics : The amount of topics you want to load (1, 2, 3, 4..)

special_id : It is important you use a UNIQUE ID for each news you add. It can be random numbers or letters, but make sure they are not identical.

You can modify the two I have in the script above already. To add more simply copy and paste them after. Example :
Code:
 newsWidget('left', 1, 3, 12);
  newsWidget('left', 2, 3, 41h3);
  newsWidget('left', 4, 3, 4123);
  newsWidget('left', 7, 3, 4113);

Note : The topics loaded are cached for 5 minutes to prevent multiple requests.
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by th4nhc0n9 on October 19th 2014, 8:57 pm

I don't know I have to change the value
Code:
 newsWidget('left', 1, 3, 12);
  newsWidget('left', 2, 3, 41h3);
  newsWidget('left', 4, 3, 4123);
  newsWidget('left', 7, 3, 4113);
in the js or in my widget?
I can create a widget and put it in left or right. Why i have to declare left or right?
Sorry, I have tried but it does not work.
avatar
th4nhc0n9
Forumember

Male Posts : 161
Reputation : 3
Language : Vietnam

http://vnbeauties.com

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by Ramdaman on October 19th 2014, 9:17 pm

@th4nhc0n9 wrote:I don't know I have to change the value
Code:
 newsWidget('left', 1, 3, 12);
  newsWidget('left', 2, 3, 41h3);
  newsWidget('left', 4, 3, 4123);
  newsWidget('left', 7, 3, 4113);
in the js or in my widget?
I can create a widget and put it in left or right. Why i have to declare left or right?
Sorry, I have tried but it does not work.

That goes in your JavaScript I believe.
avatar
Ramdaman
Active Poster

Male Posts : 1614
Reputation : 99
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by Ange Tuteur on October 20th 2014, 1:09 am

You add them within the script :
Code:
$(function() {
  // news widgets
  newsWidget('left', 1, 3, 12);
  newsWidget('left', 2, 3, 413);
 
function newsWidget(column, forum, topics, special_id) {
  if (localStorage.getItem('newsMod-'+special_id) && localStorage.getItem('newsExp-'+special_id) > +new Date - 4*60*1000) {
    $('#'+column).append('<div id="news-'+special_id+'"><span class="hiddenItems" style="display:none"></span></div>');
    $('#news-'+special_id).html(localStorage.getItem('newsMod-'+special_id));
 return;
  }
  $('#'+column).append('<div id="news-'+special_id+'"><span class="hiddenItems" style="display:none"></span></div>');
  $('#news-'+special_id+' .hiddenItems').load('/feed/?f='+forum+' item:lt('+topics+')', function() {
    var it = 0;
    while (it < topics) {
      $('#news-'+special_id).append('<div class="module mod_news newsBox'+it+'"><div class="inner"><span class="corners-top"><span></span></span><div class="h3"></div><p class="dateAuthor"></p><span class="content"></span><p class="row3"></p><span class="corners-bottom"><span></span></span></div></div>');
      it += 1
    }
    $('#news-'+special_id+' .hiddenItems item').each(function(){
      var box = '.newsBox'+$(this).index();
      $('#news-'+special_id + ' ' + box + ' .h3').html($(this).find('title').text()).wrap('<a href="'+$(this).find('guid').text()+'">');
      $('#news-'+special_id + ' ' + box + ' .content').html($(this).find('description').text());
      $('#news-'+special_id + ' ' + box + ' .row3').html('<a href="'+$(this).find('comments').text()+'">View comments</a>');
      $('#news-'+special_id + ' ' + box + ' .dateAuthor').html($(this).find('pubdate').text() + ' by <strong>' + $(this).find('dc\\:creator').text() + '</strong>');
    });
    if (window.localStorage) {
      localStorage.setItem('newsMod-'+special_id, $('#news-'+special_id).html());
      localStorage.setItem('newsExp-'+special_id, +new Date)
    }
  });
}
});

Where you see // news widgets you add them below that.
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by th4nhc0n9 on October 20th 2014, 7:15 pm

The js conflicts with my current js abit. So, I don't want to try it anymore. 
Thank again, your support is really good to me.
avatar
th4nhc0n9
Forumember

Male Posts : 161
Reputation : 3
Language : Vietnam

http://vnbeauties.com

Back to top Go down

Solved Re: Some problems with News Gadgets

Post by Ange Tuteur on October 21st 2014, 3:12 am

Okay, you're welcome. ^^

Topic archived
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum