The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Staff Widget

3 posters

Go down

In progress Staff Widget

Post by Itami 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
avatar
Itami
Forumember

Posts : 39
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

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

Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Staff Widget

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

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

Posts : 39
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Itami 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://2img.net/i/bl/logo.png]http://2img.net/i/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?
avatar
Itami
Forumember

Posts : 39
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Itami 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.
avatar
Itami
Forumember

Posts : 39
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Ange Tuteur 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://2img.net/i/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://2img.net/i/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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Itami 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?
avatar
Itami
Forumember

Posts : 39
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Staff Widget

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

I am pasting the direct links to the images from Photoshop.
avatar
Itami
Forumember

Posts : 39
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Itami 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://2img.net/i/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://2img.net/i/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>
avatar
Itami
Forumember

Posts : 39
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Staff Widget

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

It already is set to No.
avatar
Itami
Forumember

Posts : 39
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by refresh102 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
avatar
refresh102
Forumember

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

Back to top Go down

In progress Re: Staff Widget

Post by Ange Tuteur 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 :
Staff Widget Captur24

Editing :
Staff Widget Captur25
Staff Widget Captur26

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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Itami 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>
avatar
Itami
Forumember

Posts : 39
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Itami 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>
avatar
Itami
Forumember

Posts : 39
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

In progress Re: Staff Widget

Post by Itami 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.
avatar
Itami
Forumember

Posts : 39
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

Back to top

- Similar topics

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