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.

moving headers with some info inside

View previous topic View next topic Go down

Solved moving headers with some info inside

Post by moi_lolito on April 9th 2013, 3:24 am

Hi all!

http://paladins.foro-activo.es/ This is an old web my friend designed some years ago, I would like to know how is it possible to make this moving headers like it has on the top of the page?



The process of that web building was not finished, what I want to achieve is kinda similar to that moving headers, when I click on one and it opens, inside I would like to have some picture and when some user clicks that picture, that section would open in a popup window (I would design the picture by myself, right now as you can see if you click some name, for example Silexer, it opens and inside is nothing, just black space).

Could somebody provide me a solution please? Thank you very much! Smile

moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Solved Re: moving headers with some info inside

Post by SLGray on April 9th 2013, 3:36 am



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35641
Reputation : 2374
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: moving headers with some info inside

Post by moi_lolito on April 9th 2013, 5:12 am

SUPERB!!!

Thanks A LOT! I did it with no problems =P

Now the next question, please: is there a possibility of removing the numbers in the slides or at least change their appearance? They don't look very nice:



Also, how can I make a link? I mean, when the slides open, it just shows an image that is non-clickable, I would like the users to click on this image and go to the section that the image would represent, is that possible?

moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Solved Re: moving headers with some info inside

Post by E-Mark on April 9th 2013, 5:58 am

Add this to your CSS:
Code:
.dark li > h2 b {
display: none;
}

Hello

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: moving headers with some info inside

Post by moi_lolito on April 9th 2013, 6:11 am

mmmmmmm, I added that into my css but still nothing changed, the numbers appear the same, this is how my css looks like:

.accordion li > h2 {
color: black;
font-weight: normal;
margin: 0;
z-index: 2;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
-ms-transform: translateX(-100%) rotate(-90deg);
-ms-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; }
.accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%9; left: 10%; left: 5%9; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
.accordion li > h2:hover { cursor: pointer; }
.accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; }
.accordion noscript p { padding: 10px; margin: 0; background: white; }

/****************************************** Basic */
.basic li > h2 { background: #333; color: white; line-height: 1.8em; }
.basic li > div h3 { margin: 15px 10px; }
.basic li > div p { margin: 10px; font-size: 14px; }

/****************************************** Dark */
.dark { border: 9px solid #353535; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #030303; -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4); }
.dark li > h2 { background: #030303; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; }
.dark li > h2 span { background: #353535; color: white; }
.dark li > h2 b { background: #353535; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }
.dark h2.selected span, .dark h2.selected span:hover { background: #434343; background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #353535 0%, #555555 100%); }
.dark h2.selected b { background: #434343; }
.dark li > div { background: #030303; margin-left: 5px; }

/*************************************** Rounded */
.rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

/***************************************** Light */
/**************************************** Stitch */

#s1 {
background:url("http://url de l'image.jpg") no-repeat #030303;
}
#s2 {
background:url("http://url de l'image.jpg") no-repeat #030303;
}
#s3 {
background:url("http://url de l'image.jpg") no-repeat #030303;
}

#s4 {
background:url("http://url de l'image.jpg") no-repeat #030303;
}

#s5 {
background:url("http://url de l'image.jpg") no-repeat #030303;
}
.dark li > h2 b {
display: none;
}

Am I doing something wrong?

moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Solved Re: moving headers with some info inside

Post by E-Mark on April 9th 2013, 6:18 am

Try this one:
Code:
.dark li > h2 b {
display: none !important;
}

If still not working, find this in your CSS, then remove, then add the code i gave:
Code:
.dark li > h2 b { background: #353535; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: moving headers with some info inside

Post by aaronz on April 9th 2013, 6:20 am

or add this:

Code:

.dark h2.selected b {
    display: none !important;
}
.dark li > h2 b {
    display: none !important;
}

aaronz
Forumember

Male Posts : 394
Reputation : 7
Language : english
Location : Somewhere on earth

http://freshmeat.gameproforums.com/

Back to top Go down

Solved Re: moving headers with some info inside

Post by moi_lolito on April 9th 2013, 6:41 am

@E-Mark wrote:Try this one:
Code:
.dark li > h2 b {
display: none !important;
}

If still not working, find this in your CSS, then remove, then add the code i gave:
Code:
.dark li > h2 b { background: #353535; color: #030303; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; }

Thanks a lot, this helped!!! Smile

Now the last question, lol, sorry for bothering so much, really =/

How can I make the images as a direct link, so when the user opens let's suppose Slide 1 and he sees an image, he clicks on it and is being redirected to another subforum? For example, let's suppose Slide 1 is an image with spider-man, he opens slide one, sees the image, clicks on spider-man image and is being redirected to my forum section that provides information about spider-man? is it possible to do that?

moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Solved Re: moving headers with some info inside

Post by E-Mark on April 9th 2013, 6:49 am

Try this one, add a <a> tag outside the <div> tag.

Example:
Code:
<a href="#"><div id="s1"></div></a>

Now change the # to the link you want to the image to redirect with.

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: moving headers with some info inside

Post by moi_lolito on April 9th 2013, 6:56 am

where exactly to do this, also in css stylesheet?

moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Solved Re: moving headers with some info inside

Post by E-Mark on April 9th 2013, 6:57 am

Nope, on the HTML. This part:
Code:
<div id="one" class="accordion">
    <ol>
        <li>
            <h2><span>Slide One</span></h2>
            <div id="s1"></div>
        </li>
        <li>
            <h2><span>Slide Two</span></h2>
            <div id="s2"></div>
        </li>
        <li>
            <h2><span>Slide Three</span></h2>
            <div id="s3"></div>
        </li>
        <li>
            <h2><span>Slide Four</span></h2>
            <div id="s4"></div>
        </li>
        <li>
            <h2><span>Slide Five</span></h2>
            <div id="s5"></div>
        </li>
    </ol>
    <noscript>
        <p>Please enable JavaScript to get the full experience.</p>
    </noscript>
</div>

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: moving headers with some info inside

Post by moi_lolito on April 9th 2013, 7:13 am

modules -> html -> create new html?

moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Solved Re: moving headers with some info inside

Post by E-Mark on April 9th 2013, 7:18 am

No. Remember the code in this tutorial, the html part.
http://help.forumotion.com/t105962-index-in-accordion

Now go to the place where you put the html.
Then find all the <div id="s#"></div> (s1, s2, s3, etc.). Then place a href tag outside. So it will become like this:

<a href="#"><div id="s1"></div></a>

(Here's a full sample code of the HTML part with the image link)
Code:
<div id="one" class="accordion">
    <ol>
        <li>
            <h2><span>Slide One</span></h2>
            <a href="#"><div id="s1"></div></a>
        </li>
        <li>
            <h2><span>Slide Two</span></h2>
            <a href="#"><div id="s2"></div></a>
        </li>
        <li>
            <h2><span>Slide Three</span></h2>
            <a href="#"><div id="s3"></div></a>
        </li>
        <li>
            <h2><span>Slide Four</span></h2>
            <a href="#"><div id="s4"></div></a>
        </li>
        <li>
            <h2><span>Slide Five</span></h2>
            <a href="#"><div id="s5"></div></a>
        </li>
    </ol>
    <noscript>
        <p>Please enable JavaScript to get the full experience.</p>
    </noscript>
</div>

Note: Change the # to the link you want to the image to redirect with.

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: moving headers with some info inside

Post by moi_lolito on April 9th 2013, 7:30 am

<div id="one" class="accordion">
<ol>
<li>
<h2><span>Interview of the Month</span></h2>
<a href="http://testforfuture.motionforum.net/f7-the-fire-heroes"><div id="s1"></div></a>
</li>

This is what I entered (the link is random to one of the subforums of my forum) and now the image that was in Slide 1 as a sample just dissapeared, this is all that changed =/

Am I doing something wrong?


Edited: And now I removed that link source and the image got back there =/

moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Solved Re: moving headers with some info inside

Post by E-Mark on April 9th 2013, 7:32 am

OK. Remove it for a while.
Give me a minute Wink.

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: moving headers with some info inside

Post by moi_lolito on April 9th 2013, 7:35 am

ok, waiting, thanks ^^

moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Solved Re: moving headers with some info inside

Post by E-Mark on April 9th 2013, 7:49 am

Try this one: (Change the <div id="s1"></div> with this one)
Code:
<div onClick="window.open( 'LINKHERE','_top' ); return false;" style="cursor: pointer;" id="s1"></div>

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: moving headers with some info inside

Post by moi_lolito on April 9th 2013, 7:54 am

It works, perfect!

Thank you very much, I love you my friend! =P

moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Solved Re: moving headers with some info inside

Post by E-Mark on April 9th 2013, 7:56 am

Welcome Razz.
Just change the 'LINKHERE'.

Then if you want to add links to the other slides, just change the id="s1" to id="s2" or id="s3" and so on. Razz

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: moving headers with some info inside

Post by Jophy on April 9th 2013, 8:52 am

Since this thread appears to be solved...

Topic Solved & Locked

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

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