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.

Navigation Problem (Challenge)

View previous topic View next topic Go down

Solved Navigation Problem (Challenge)

Post by XDirect12345 on January 27th 2012, 9:21 pm

In response to: http://help.forumotion.com/t103628-navigation-bar-import?highlight=navigation

READ CAREFULLY

Sigh, I have tired so many ways so I might as well break this down. This is a tough challenge even for me.

The Problem:
I added this image to my default forum skin. This was created using "Add a customized menu" in the "headers and navigation" secton. I tried to add so many things including:

Code:
#i_icon_mini_contact_us{width:110px; height:50px; background:url(http://zeus.cooltext.com/rendered/cooltext633640344.png) no-repeat 0 0;}
#i_icon_mini_contact_us:hover{background:url(http://zeus.cooltext.com/rendered/cooltext633631723.png) no-repeat  0 0px;}

And this

Code:
td[align="center"] a[href="http://xdirect12345contactus.yolasite.com/"]:hover {
background-image: url("http://zeus.cooltext.com/rendered/cooltext633631723.png");
}

Yet nothing. Sad Anyway I need a normal effect and a hover effect without changing the default skin's "Contact Us" button image on my default forum skin, created using "Add a customized menu" in the "headers and navigation" secton. 'OR' If you have any ideas on how to get an image into the navigation bar without having a custom menu created from the "Add a customized menu" in the "headers and navigation" secton, that would be mostly appreciated.

Here is the image of the problem. I want the image with the blue border, to be replaced with a normal and hover image similar to the other navigations.


Last edited by XDirect12345 on February 10th 2012, 8:25 pm; edited 1 time in total

XDirect12345
Forumember

Male Posts : 361
Reputation : 3
Language : English

http://xdirect12345.forummotion.com

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by XDirect12345 on January 28th 2012, 5:49 pm

Bump

XDirect12345
Forumember

Male Posts : 361
Reputation : 3
Language : English

http://xdirect12345.forummotion.com

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by XDirect12345 on January 31st 2012, 8:39 pm

Bump, any help please

XDirect12345
Forumember

Male Posts : 361
Reputation : 3
Language : English

http://xdirect12345.forummotion.com

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by XDirect12345 on February 3rd 2012, 6:46 pm

bump

XDirect12345
Forumember

Male Posts : 361
Reputation : 3
Language : English

http://xdirect12345.forummotion.com

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by Sunborn on February 5th 2012, 1:58 am

This is a code i use on my website, but its HTML... You need to make some changes to work in CSS, but you can get an idea... Basically, you need 2 images, not one... and should be definitely a transparent PNG images, NOT JPG!!!

Code:
<td> <a href="http://xdirect12345contactus.yolasite.com/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','http://yoursite/yoursecondimage.jpg',1)"><img src="http://img710.imageshack.us/img710/6943/0vpqvy1324418550.jpg" name="Image2" width="110" height="50" border="0" id="Image2" /></a></td>

I hope that this helps you a little

Sunborn
New Member

Male Posts : 18
Reputation : 1
Language : Greek, English, Quenya
Location : Thessaloniki, Greece

http://utopicdemocracy.forumgreek.com

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by ankillien on February 5th 2012, 5:34 am

Hi,

If I'm getting it right, this code would work for you...

Code:
$(function(){

$('a.mainmenu:last').after('<a href="http://www.wix.com/andromedavadum/xdirect12345contactus" class="mainmenu contactuslink"><img hspace="0" border="0" title="Contact Us" alt="Contact Us" src="http://images-1.findicons.com/files/icons/1681/siena/48/label_new.png" /></a>');

$('a.contactuslink').mouseenter(function(){
$(this).children('img').attr('src' , 'http://images-4.findicons.com/files/icons/1014/ivista/48/padlock.png');
});

$('a.contactuslink').mouseleave(function(){
$(this).children('img').attr('src' , 'http://images-1.findicons.com/files/icons/1681/siena/48/label_new.png');
});

});

You don't need to add anything from ACP > Headers & Navigation. Just add the above code via ACP > Modules > JS code management. Add it for all pages and see if it works.

Hope that helps Smile

EDIT:

And oh! If the code works, give me URLs of both normal and hover images so I'll add them in the code and make it complete.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by XDirect12345 on February 6th 2012, 12:34 am

I'll run some tests. Will this work without effecting other skins navigations that i created?

XDirect12345
Forumember

Male Posts : 361
Reputation : 3
Language : English

http://xdirect12345.forummotion.com

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by ankillien on February 6th 2012, 3:29 am

Yes, it should work on other skins as well.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by XDirect12345 on February 6th 2012, 6:46 pm

I plan on creating multiple skins. I dont want to have the same "contact us" color or image for all skins, is there a way to create different colors or images on each different skin that I create?

Example: A different contact us button for a different skin that I choose for multiple skins.

Theme 1


Theme 2


Theme 3


Theme 4


There are 4 different buttons for 4 different themes. When a user selects "Theme 1" the button is Yellow. Then the user selects "Theme 3", the button is not yellow anymore but is green. Is there anyway to achieve this effect with css or javascript?

XDirect12345
Forumember

Male Posts : 361
Reputation : 3
Language : English

http://xdirect12345.forummotion.com

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by ankillien on February 7th 2012, 5:09 am

It is certainly possible but I need to know what method you use to change skins.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by XDirect12345 on February 7th 2012, 6:46 pm

I plan on using this:
http://help.forumotion.com/t71484-add-multi-themes-to-your-forum

Can you provide me the code so I can put it in bounce

XDirect12345
Forumember

Male Posts : 361
Reputation : 3
Language : English

http://xdirect12345.forummotion.com

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by ankillien on February 8th 2012, 7:25 am

I don't have any copy-paste codes for this right now. You can try adding background image with CSS for all different themes you use, this way you can apply different image for the contact-us link.

The above code will change to this...

Code:
$(function(){
$('a.mainmenu:last').after('<a href="http://www.wix.com/andromedavadum/xdirect12345contactus" class="mainmenu contactuslink"> </a>');       
});

You can apply background to class .contactuslink.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by XDirect12345 on February 9th 2012, 6:35 pm

ok, so can you give me example codes for normal and hover for the .contactuslink. I could figure where to put the images and stuff.

XDirect12345
Forumember

Male Posts : 361
Reputation : 3
Language : English

http://xdirect12345.forummotion.com

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by ankillien on February 10th 2012, 5:10 am

To add images you can use this CSS code...

Code:
.contactuslink {
display: inline-block;
width: 172px; height: 42px;
background: url(URL OF IMAGE AS PER THEME) no-repeat;
}

Add this code in the CSS of different themes you are using. Just don't forget to change the image URL in the code.

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by LGforum on February 10th 2012, 9:14 am

This code:

Code:

$(function(){

$('a.mainmenu:last').after('<a href="http://www.wix.com/andromedavadum/xdirect12345contactus" class="mainmenu contactuslink"><img hspace="0" border="0" title="Contact Us" alt="Contact Us" src="http://images-1.findicons.com/files/icons/1681/siena/48/label_new.png" /></a>');

$('a.contactuslink').mouseenter(function(){
$(this).children('img').attr('src' , 'http://images-4.findicons.com/files/icons/1014/ivista/48/padlock.png');
});

$('a.contactuslink').mouseleave(function(){
$(this).children('img').attr('src' , 'http://images-1.findicons.com/files/icons/1681/siena/48/label_new.png');
});

});

Is an extremely horrible way of doing this. Not to mention inefficient and longer than it needs to be.
Also if your manually inserting a new navbar link with jQuery, why give it a class name and access it childNodes? Why not just give said image an ID and it can be accessed instantly. And also why not include the mouse over events in the HTML string.

Instead of using all that jQuery rubbish just use
onmouseover="this.src='new source';"


Besides what's wrong with using CSS Sprites?

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by ankillien on February 10th 2012, 12:38 pm

LGforum, I revised my code and posted new code here : http://help.forumotion.com/t103797-navigation-problem-challenge#680028

Also, it doesn't make any considerable difference whether we apply a class name or directly apply ID to the image. While providing quick support, we have to skip some small things like that to save time and solve problems quickly.

The member wants different image for different themes thats why we have to add background image via CSS. And I know about CSS sprites but probably the thread author does not, thats why I didn't suggest to use them Wink

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by LGforum on February 10th 2012, 1:56 pm

@ankillien wrote:Also, it doesn't make any considerable difference whether we apply a class name or directly apply ID to the image.

On the contrary, it does.
ID's can be access much quicker, especially when using jQuery. Any browsers which don't support the native getElementsByClassName will require looping through all tagNames within the context element, and there are still plenty of browsers not supporting getElementsByClassName.
Not too mention using jQuery to work through the nodes to reach the image from the link. Thats just extra unneeded work (especially with jQuery) when the image can be accessed in one fell swoop with an ID. And also the ':last' selector requires jQuery to find all the elements with such className and choose the last one. Where as it can be access much quicker using native javascript.

I'd recommend changing this:
Code:

$(function(){
$('a.mainmenu:last').after('<a href="http://www.wix.com/andromedavadum/xdirect12345contactus" class="mainmenu contactuslink"> </a>');     
});

to this:

Code:

$(function(){
document.getElementById('page-header').getElementsByTagName('ul')[0].innerHTML+='<a href="http://www.wix.com/andromedavadum/xdirect12345contactus" class="mainmenu contactuslink"> </a>';     
});

And the code in my last post can be altered to just this:
Code:

$(function(){
document.getElementById('page-header').getElementsByTagName('ul')[0].innerHTML+='<a href="http://www.wix.com/andromedavadum/xdirect12345contactus" class="mainmenu"><img title="Contact Us" alt="Contact Us" src="http://images-1.findicons.com/files/icons/1681/siena/48/label_new.png" onmouseover="this.src= 'http://images-4.findicons.com/files/icons/1014/ivista/48/padlock.png';" onmouseout="this.src='http://images-1.findicons.com/files/icons/1681/siena/48/label_new.png';"/></a>';     
});
The mouseover and mouseout functions are just included in the HTML.

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by ankillien on February 10th 2012, 3:49 pm

Nice post, mate. But the latest browsers are smart and fast and they will do any calculations pretty quickly. I cannot spend my time thinking for the quickest possible solution to a problem, because it is just waste of time.

Your codes won't make the page load considerably faster. The difference would be minimal and won't even be noticeable. So, I'd choose to avoid wasting time and quickly provide codes that 'work fine'.

Now please avoid judging our codes and lets concentrate on helping members without wasting time finding 'better' solutions.

Thanks

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by LGforum on February 10th 2012, 4:06 pm

Time optimising is never time wasted Wink
And believe me, I didn't waste any time thinking of that code.

I'm not judging your codes, I'm offering improvements for educational purposes.
Something that greatly helped me learn what I know nowadays.

On forumotions shaky boards and system script it's becoming quite necessary.

Anyway to conclude, I hope somebody learnt something from my post above.
jQuery isn't often the best route.
There is a post on DionDesigns that explains why perfectly. I think I'll edit the link into this post later when I get the chance.

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by ankillien on February 10th 2012, 4:11 pm

I don't really care what DionDesign has to say about jQuery! All I know is that jQuery is perfect and quick and handy solutions for those who don't want to 'waste' their time learning hundreds of properties and methods of native javascript and knowing how quickly they work! Wink

Now no more discussion on this please!

ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

http://www.webartzforum.com/

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by XDirect12345 on February 10th 2012, 7:39 pm

@ankillien wrote:To add images you can use this CSS code...

Code:
.contactuslink {
display: inline-block;
width: 172px; height: 42px;
background: url(URL OF IMAGE AS PER THEME) no-repeat;
}

Add this code in the CSS of different themes you are using. Just don't forget to change the image URL in the code.

I'll go with this one for now Smile

XDirect12345
Forumember

Male Posts : 361
Reputation : 3
Language : English

http://xdirect12345.forummotion.com

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by XDirect12345 on February 10th 2012, 7:44 pm

It works, now I need the code for when you mouseover or hover

XDirect12345
Forumember

Male Posts : 361
Reputation : 3
Language : English

http://xdirect12345.forummotion.com

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by XDirect12345 on February 10th 2012, 8:21 pm

Thanks for the help Ankillien. It's working perfectly. sunny

XDirect12345
Forumember

Male Posts : 361
Reputation : 3
Language : English

http://xdirect12345.forummotion.com

Back to top Go down

Solved Re: Navigation Problem (Challenge)

Post by SLGray on February 11th 2012, 1:52 am

XDirect12345:

Please don't double/triple post. Your post need to be separated by 24 hours before bumping, replying or adding more information. Please use the edit button instead!


]Topic Solved & Locked




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


SLGray
Administrator
Administrator

Male Posts : 35622
Reputation : 2372
Language : English
Location : United States

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