The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Some problems with News Gadgets

View previous topic View next topic 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

th4nhc0n9
Forumember

Male Posts : 157
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;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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

th4nhc0n9
Forumember

Male Posts : 157
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; }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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!

th4nhc0n9
Forumember

Male Posts : 157
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; }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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

th4nhc0n9
Forumember

Male Posts : 157
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;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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.

th4nhc0n9
Forumember

Male Posts : 157
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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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?

th4nhc0n9
Forumember

Male Posts : 157
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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Some problems with News Gadgets

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


th4nhc0n9
Forumember

Male Posts : 157
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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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.

th4nhc0n9
Forumember

Male Posts : 157
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.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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.

th4nhc0n9
Forumember

Male Posts : 157
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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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