- This topic is empty.
-
AuthorPosts
-
January 12, 2012 at 9:54 pm #36084Carlos56Member
Hello all,
I’m a novice when it comes to CSS/jQuery but trying my best to pick it up fast..
I am using a slider as my main content box. I have 3 sections, each of which is accessible with a hash URL.
I was then wondering if it’s at all possible to change the background of a random div (my logo), according to which hashURL (section) is selected?
Thank you
January 13, 2012 at 8:55 am #94525Carlos56MemberAnyone?
Would really appreciate some help on this!
Thanks
January 13, 2012 at 9:15 am #94526MottieMemberYes, it is possible, but it would make it easier for us to help you if you shared, or better yet provided a demo (using jsFiddle.net) with some example code.
January 13, 2012 at 9:26 am #94528jamygoldenMemberTry something like this.
function cssChangeBasedOnHash() {
switch ( window.location.hash ) {
case '#random-hash':
var backgroundColor = '#333'
break;
case '#another-hash':
var backgroundColor = '#222'
break;
case '#chicken':
var backgroundColor = '#f1f1f1'
break;
default: // fallback
var backgroundColor = '#fff'
break;
};
$('#something').css('backgroundColor', backgroundColor);
}; // cssChangeBasedOnHash()
$(document).ready(function() {
cssChangeBasedOnHash();
$(window).bind( 'hashchange', function(){
cssChangeBasedOnHash();
}); // window.bind.hashchange
}); // dom.readyThe switch/case detects the hash names. Change those to your desired hash names. I’ve set variables depending on what hash is detected. You can place any javascript in there. Functions, objects, whatever.
January 13, 2012 at 12:22 pm #94542Carlos56MemberThanks guys.
Jamy, really appreciate your help – however could I have some more information – Where would that code go? Where do I reference the background images?
Mottie, you’re right.
I’ve uploaded my progress so far to http://www.carlosrios.co.uk
Like I said before I’m a novice so apologies for what is probably a mess of a code.
As I explained before I would basically like to have the yellow circle change colour as the user scrolls through the navigation menu. I figure the best way to do this would probably be to make use of a sprite with 3 different coloured circles.
Thank you so much!
January 13, 2012 at 1:19 pm #94545sheepysheep60Participantjamy_sa has given you some javascript, so it would [usually] go inside the
tags of your page, inside their own script tags. Like this:
January 13, 2012 at 1:23 pm #94546Carlos56MemberI get that bit, but I don’t understand how I would link all of that code so that the picture I use for my logo changes between 3 different ones?
thanks!
January 13, 2012 at 2:02 pm #94552sheepysheep60Participanthere you are, have a look at this:
using a sprite like you mentioned and jquery
January 13, 2012 at 3:06 pm #94556jamygoldenMemberI updated that slightly to look more like the example I supplied previously:
January 13, 2012 at 3:46 pm #94558Carlos56MemberThank You so much. You guys are amazing will check out what you guys have posted when I get home. Thank you once again!
January 14, 2012 at 2:40 am #94577jamygoldenMember@Hompimpa why dont you create a separate thread for that and explain a little more with an example.
as for using :target – It isn’t well enough supported to use for something that is ‘required’ on a web page. Also the javascript works on hash change – so its not necessary to click on an anchor link to change the hash, you can type it in yourself into the url bar, hit enter and it will change correctly. You could link someone with a custom hash and it will load with that hash ‘enabled’.
January 14, 2012 at 11:21 am #94598Carlos56MemberHey guys.
Massive thanks to you both jamy_za and sheepysheep60, it’s worked!
edit: I think i was a bit premature in my celebrations.
I’ve uploaded my progress to http://www.carlosrios.co.uk once again.
if you type in the address bar, #contact and press enter, you’re taken to the contact page, but the logo div doesn’t change.
Can this be fixed?
One more little thing… (sorry :| )
I’m using ‘transify’ to fade in the bottom-borders below my navigation. Could a similar solution be applied to my logo div so it fades as it flicks through the different colours!?!?
Thanking you muchly!
January 15, 2012 at 11:24 am #94618Carlos56MemberI’ve tried it on chrome, safari and internet explorer.
If I have the ‘contact’ item selected in the menu. If I refresh the page, the content displayed will still be the ‘contact’ page but the logo flicks back to the first image used. I’ve changed the order of the images on the sprite and it keeps happening. Whatever the first image is, it’s what automatically gets selected if the page is refreshed, or a page is accessed through the hash link.
I understand you guys have already helped me loads, but would really like to get this fixed. Really appreciate your efforts.
Carlos
January 15, 2012 at 11:49 am #94620MottieMemberHi Carlos56!
Try this (demo):
$(document).ready(function() {
var updateLogo = function(id) {
var backgroundPosition = '0 0';
switch (id.substring(1)) {
case 'about':
backgroundPosition = '-80px -75px';
break;
case 'contact':
backgroundPosition = '160px -75px';
break;
}
$(".logo").css("backgroundPosition", backgroundPosition);
};
$(".menu-item").click(function(e) {
e.preventDefault(); // prevent default link behaviour
updateLogo(this.hash);
});
// update logo on page load
updateLogo(window.location.hash);
});January 15, 2012 at 12:13 pm #94621Carlos56MemberHi Mottie,
Thanks for your help.
That fixes the revert to the first image when refreshing the page. It doesn’t however update the logo when an item is accessed via a hash link. Is this not possible?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.