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.

Staff Widget

View previous topic View next topic Go down

In progress Staff Widget

Post by Itami on April 7th 2015, 4:39 am

Greetings again!

I've been looking around, still quite new at this. I am trying to make a "Staff Widget" on my forum Fairy Tail Endless I'm trying to make it so the staff images are miniature and when you scroll the mouse over them, a larger image of the staff appears above them. I hope there is a simple solution for this Smile

Itami
Forumember

Posts : 31
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Ange Tuteur on April 7th 2015, 5:08 am

Hi @Itami,

Would this be what you're looking for ?
http://help.forumotion.com/t136908-hover-staff-list#924551

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Itami on April 7th 2015, 5:26 am

Yes, this is what I am looking for. It keeps things organized while looking professional.

Itami
Forumember

Posts : 31
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Itami on April 7th 2015, 6:12 am

This is the current widget, granted iw ill be changing the photos when my buddy makes the gfx.
Spoiler:

This is the code for it.

Code:
<center>
</font>
<//font><span></span><span></span><span><span></span></span>
<div id="staffList">
</div><span><span></span><span></span><span><span></span></span></span>
<div id="mainBlock">
</div><span><span></span><span></span><span></span><img src="[url=http://illiweb.com/bl/logo.png]http://illiweb.com/bl/logo.png[/url]" id="mainImage" /> <span></span><span></span><span></span><span></span><span></span><span></span></span>
<p>
</p><span><span></span><span></span><span style="FONT-FAMILY: Tahoma"></span>OWNER <span></span><span></span><span></span><span></span><span></span></span>
<p>
</p><span><span></span><span></span><a href="[url=http://fairytailendless.forumotion.com/u1"></a><img]http://fairytailendless.forumotion.com/u1"></a><img[/url] src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/a916f23c-957f-4e20-8463-7be83bec631f.png]http://i828.photobucket.com/albums/zz205/Sato_013/a916f23c-957f-4e20-8463-7be83bec631f.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png]http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png[/url]" /> <span></span><span></span><span></span><span></span><br /><span></span></span>
<p>
</p><span><span></span><span></span><span style="FONT-FAMILY: Tahoma"></span>ADMINISTRATORS <span></span><span></span><span></span><span></span><span></span></span>
<p>
</p><span><span></span><span></span><a href="[url=http://fairytailendless.forumotion.com/u2"></a><img]http://fairytailendless.forumotion.com/u2"></a><img[/url] src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/4b57ce73-f6ed-414c-a0e7-944ee80ceb58.png]http://i828.photobucket.com/albums/zz205/Sato_013/4b57ce73-f6ed-414c-a0e7-944ee80ceb58.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png[/url]" /> <span></span><span></span><span></span><span></span><span></span></span>
<!-- technical stuff --><script type="text/javascript"></script></span><//span>
</center>

A problem with this, is that when I scroll over the hover-images, the larger image at top does not appear. Also, if you notice in my screenshot- my forum categories' "words" are all jumbled up- I notice it only does this on my computer, as well as sometimes doesn't load the banner & images. Is there a way I could fix that?

Itami
Forumember

Posts : 31
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Ange Tuteur on April 7th 2015, 9:43 pm

Did you paste the code in WYSIWYG mode ? Because it looks like the script content is completely missing. When you paste the code, make sure that you're using source code mode. To do that, click the white sheet of paper Source Code and if it's highlighted in white you're using source code mode.

When you use WYSIWYG mode with HTML, CSS, and JavaScript it'll completely mess up the code. blackeye

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Itami on April 7th 2015, 10:52 pm

Sorry, I don't understand your explanation. I used the link of example you provided me & copy/pasted it just how I saw it into the Staff widget.

Itami
Forumember

Posts : 31
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Ange Tuteur on April 7th 2015, 10:55 pm

The code should look like this :
Code:
<!-- style of the widget -->
<style type="text/css">#mainBlock { height:150px } /* height of the main image block */
#staffList { text-align:center; }
#staffList a img {
  border-radius:100px;
  width:50px;
  height:50px;
}</style>

<!-- the staff list -->
<div id="staffList">
  <div id="mainBlock">
    <img id="mainImage" src="http://illiweb.com/bl/logo.png" /> 
 </div>
  <a href="/u1">
    <img src="http://i56.servimg.com/u/f56/18/45/41/65/rose_a10.png" alt="http://i59.servimg.com/u/f59/18/45/41/65/rose_210.png" />
  </a>
  <br />
  <a href="/u2">
    <img src="http://i56.servimg.com/u/f56/18/21/60/73/noavaf10.png" alt="http://illiweb.com/fa/admin/icones/help.png" />
  </a>
</div>
   
<!-- technical stuff -->
<script type="text/javascript">(function() {
var img = document.getElementById('staffList').getElementsByTagName('IMG'), main = document.getElementById('mainImage'), def = main.src,i;
for (i=0; i<img.length; i++) {
  if (!/mainImage/.test(img[i].id)) {
    img[i].onmouseover = function() { main.src = this.alt }
    img[i].onmouseout = function() { main.src = def }
  }
}
})();</script>

but the on you posted is missing the JavaScript which is necessary for switching the images. Try repasting the code, and make sure you're using source code mode.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Itami on April 7th 2015, 11:13 pm

Alright, so I go to paste that code & ensure the little page icon in the post is highlighted as white. I do that & look on the homepage, everything works fine- I go to put in my images & it messes up?

Itami
Forumember

Posts : 31
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Ange Tuteur on April 8th 2015, 11:46 pm

Are you pasting the images, or using the editor to insert them ? As long as you're using source code mode there should be no problems. blackeye

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Itami on April 9th 2015, 1:18 am

I am pasting the direct links to the images from Photoshop.

Itami
Forumember

Posts : 31
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Ange Tuteur on April 9th 2015, 9:02 am

So, you're including the images like this ?
Code:
  <a href="LINK">
    <img src="DEFAULT_IMAGE" alt="HOVER_IMAGE" />
  </a>

LINK : The URL of the page you want the image to link to.

DEFAULT_IMAGE : The link of the image shown by default.

HOVER_IMAGE : The link of the image shown at the top when you hover over it.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Itami on April 11th 2015, 6:37 am

I take the code you gave me & applied it to the staff widget & applied the images I have like this.
Code:
<!-- style of the widget -->
<style type="text/css">#mainBlock { height:150px } /* height of the main image block */
#staffList { text-align:center; }
#staffList a img {
  border-radius:100px;
  width:50px;
  height:50px;
}</style>

<!-- the staff list -->
<div id="staffList">
  <div id="mainBlock">
    <img id="mainImage" src="http://illiweb.com/bl/logo.png" /> 
 </div>
  <a href="/u1">
    <img src="http://i828.photobucket.com/albums/zz205/Sato_013/8eed94bd-b7a8-46f0-99d3-9b5466beea3f.png" alt="http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png" />
  </a>
  <br />
  <a href="/u2">
    <img src="http://i828.photobucket.com/albums/zz205/Sato_013/4b57ce73-f6ed-414c-a0e7-944ee80ceb58.png" alt="http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png" />
  </a>
</div>
   
<!-- technical stuff -->
<script type="text/javascript">(function() {
var img = document.getElementById('staffList').getElementsByTagName('IMG'), main = document.getElementById('mainImage'), def = main.src,i;
for (i=0; i<img.length; i++) {
  if (!/mainImage/.test(img[i].id)) {
    img[i].onmouseover = function() { main.src = this.alt }
    img[i].onmouseout = function() { main.src = def }
  }
}
})();</script>

However, when I save it- it finally showed up sort of correct, though the staff buttons(the Default images) overlap the Hover images. When I go back to the widget coding to look into it, the coding looks quite different.. like this.
Code:
<div id="staffList">
   <div id="mainBlock"><img src="http://illiweb.com/bl/logo.png" id="mainImage" />
   </div><a href="http://fairytailendless.forumotion.com/u1"><img src="http://i828.photobucket.com/albums/zz205/Sato_013/8eed94bd-b7a8-46f0-99d3-9b5466beea3f.png" alt="http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png" /> </a><br /><a href="http://fairytailendless.forumotion.com/u2"><img src="http://i828.photobucket.com/albums/zz205/Sato_013/4b57ce73-f6ed-414c-a0e7-944ee80ceb58.png" alt="http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png" /> </a>
</div>
<!--  technical stuff  --><script type="text/javascript"></script>

Itami
Forumember

Posts : 31
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Ange Tuteur on April 11th 2015, 11:50 pm

That's weird.. Try doing this and then edit the code. Go to Administration Panel > General > Messages > Configuration > Activate the WYSIWYG mode by default in the posts : NO

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Itami on April 12th 2015, 12:13 am

It already is set to No.

Itami
Forumember

Posts : 31
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by refresh102 on April 12th 2015, 2:41 am

I tried the code but it does not work when i hover it the image does not look bigger

refresh102
Forumember

Male Posts : 181
Reputation : 4
Language : English,Japanese

Back to top Go down

In progress Re: Staff Widget

Post by Ange Tuteur on April 12th 2015, 7:43 am

@Itami wrote:It already is set to No.
Then that is good. Wink

The only way the CSS and JavaScript will disappear is if you enter WYSIWYG mode. As long as you're using source there aren't any problems. Did you perhaps enable WYSIWYG to get a preview while you were editing the widget ? See below :

Creating :


Editing :



Everything is still intact. blackeye


@refresh102 wrote:I tried the code but it does not work when i hover it the image does not look bigger
Please start a new topic for your problems. Thanks Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Itami on April 14th 2015, 2:43 am

I have not enabled WYSIWYG mode. I have the little page icon highlighted in white when I paste the code you gave me & add my icon links to it. It looks exactly as follows when pasting it, but when I go to edit it, it looks like the super short version with all the java missing.

This is what the widget looks like when I press "save"

Spoiler:

Code:
<!-- style of the widget -->
<style type="text/css">#mainBlock { height:150px } /* height of the main image block */
#staffList { text-align:center; }
#staffList a img {
border-radius:100px;
width:50px;
height:50px;
}</style>
<!-- the staff list -->
<div id="staffList">
<div id="mainBlock">
<img id="mainImage" src="[url=http://orig15.deviantart.net/78e3/f/2015/102/9/b/cooltext116805282072215_by_dreamishlyme-d8pevi6.png]http://orig15.deviantart.net/78e3/f/2015/102/9/b/cooltext116805282072215_by_dreamishlyme-d8pevi6.png[/url]" />
</div>
<a href="/u1">
<img src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Itami staff.png]http://i828.photobucket.com/albums/zz205/Sato_013/Itami%20staff.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png]http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png[/url]" />
</a>
<br />
<a href="/u2">
<img src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi staff.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi%20staff.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png[/url]" />
</a>
</div>

<!-- technical stuff -->
<script type="text/javascript">(function() {
var img = document.getElementById('staffList').getElementsByTagName('IMG'), main = document.getElementById('mainImage'), def = main.src,i;
for (i=0; i<img.length; i++) {
if (!/mainImage/.test(img[i].id)) {
img[i].onmouseover = function() { main.src = this.alt }
img[i].onmouseout = function() { main.src = def }
}
}
})();</script>

Itami
Forumember

Posts : 31
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Ange Tuteur on April 14th 2015, 2:50 am

That is very weird, because it does not do that for me.. scratch

Now that I look at it, your image element's attribute values look like this :
Code:
<img src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi staff.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi%20staff.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png[/url]" />

You have bbcode in there, it should only be the direct links. Like this :
Code:
<img src="http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi staff.png" alt="http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png" />

The editor is probably attempting to correct it and causing an error in the process like usual.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Itami on April 14th 2015, 3:15 am

Doesn't matter. I've done it both ways in the past- I just corrected the bbc code and it still shortened it. It looks like this when I save it.

Code:
<!-- style of the widget -->
<style type="text/css">#mainBlock { height:150px } /* height of the main image block */
#staffList { text-align:center; }
#staffList a img {
border-radius:100px;
width:50px;
height:50px;
}</style>
<!-- the staff list -->
<div id="staffList">
<div id="mainBlock">
<img id="mainImage" src="[url=http://orig15.deviantart.net/78e3/f/2015/102/9/b/cooltext116805282072215_by_dreamishlyme-d8pevi6.png[/url]http://orig15.deviantart.net/78e3/f/2015/102/9/b/cooltext116805282072215_by_dreamishlyme-d8pevi6.png[/url[/url]]" />
</div>
<a href="/u1">
<img src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Itami staff.png]http://i828.photobucket.com/albums/zz205/Sato_013/Itami%20staff.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png]http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png[/url]" />
</a>
<br />
<a href="/u2">
<img src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi staff.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi%20staff.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png[/url]" />
</a>
</div>

<!-- technical stuff -->
<script type="text/javascript">(function() {
var img = document.getElementById('staffList').getElementsByTagName('IMG'), main = document.getElementById('mainImage'), def = main.src,i;
for (i=0; i<img.length; i++) {
if (!/mainImage/.test(img[i].id)) {
img[i].onmouseover = function() { main.src = this.alt }
img[i].onmouseout = function() { main.src = def }
}
}
})();</script>

Yet it turns out like this after its finished saving.

Code:
<div id="staffList">
<div id="mainBlock"><img src="[url=http://orig15.deviantart.net/78e3/f/2015/102/9/b/cooltext116805282072215_by_dreamishlyme-d8pevi6.png]http://orig15.deviantart.net/78e3/f/2015/102/9/b/cooltext116805282072215_by_dreamishlyme-d8pevi6.png[/url]" id="mainImage" />
</div><a href="[url=http://fairytailendless.forumotion.com/u1"><img]http://fairytailendless.forumotion.com/u1"><img[/url] src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Itami staff.png]http://i828.photobucket.com/albums/zz205/Sato_013/Itami%20staff.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png]http://i828.photobucket.com/albums/zz205/Sato_013/Itami.png[/url]" /> </a><br /><a href="[url=http://fairytailendless.forumotion.com/u2"><img]http://fairytailendless.forumotion.com/u2"><img[/url] src="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi staff.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi%20staff.png[/url]" alt="[url=http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png]http://i828.photobucket.com/albums/zz205/Sato_013/Yoshi.png[/url]" /> </a>
</div>
<!-- technical stuff --><script type="text/javascript"></script>

Itami
Forumember

Posts : 31
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Itami on April 14th 2015, 3:19 am

Alright. I know I corrected the bbc code. Yet when I pasted it here, it automatically added the bbc.

Itami
Forumember

Posts : 31
Reputation : 1
Language : English

http://fairytailendless.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