PDA

View Full Version : div content change by menu



kimikai
07-07-2013, 03:31 PM
I know there's a way to do this and I've done something similar before, but right now I just cant seem to get it right

what I'm trying to create is have a full working menu (so buttons have their own background and hover effect and all)
and by clicking on a menu button a div with the corresponding text appears with a fade in the text div.

I tried to base it on this one: http://jsfiddle.net/3mJ3z/
buuuut...in my magic world with even litterally copying the codes its not working :o

aaand really i have no idea what im doing wrong...

i implemented the html part into a wrapper div for the menu and i put the javascript part in <script type="text/javascript></script> brackets at the bottom of my html page right above </body>

Beverleyh
07-07-2013, 04:19 PM
Without seeing your actual page, its hard to say what is wrong exactly, although I will hazard a guess at it being to do with the <li>s data-item attribute, as used in the script - that's an HTML5 thing so if your page isnt using an HTML5 DOCTYPE (indicated by your use of type="text/javascript in the script tag, which isn't necessary in HTML5), I dont think it will work. (You've missed a " at the end of type="text/javascript BTW, but I don't know if that's just a typo in the forum - I believe that the omission in an actual web page can cause problems too)

Other reasons could be that the links to your jQuery library are incorrect OR that you have other conflicting jQuery scripts throwing a spanner in the works.

For more help, please provide a link to your actual page.

kimikai
07-07-2013, 05:11 PM
ye the " was a typo
the problem is atm there isnt much of an actual page yet, because im still screwing around with that part...which is the main part of the whole website...
the link is just a code i happened to find and tried to use... are there any options to acquire the same result w/o HTML5?

I'm new to JS but I'm willing to get a hand on it and figure it out but I havent found a way to get this done yet

aaand indeed no html5 doctype....any possibilities to change the html5 part in that code into something thats html compatible w/o losing the standard result?

Beverleyh
07-07-2013, 05:19 PM
Don't worry about using HTML5 - you can pretty much just switch in the new DOCTYPE and all your usual divs will still work the same. Its just that HTML5 introduces so new markup options that help search engines understand a web page structure more easily, and a few new features that make things like forms and embedded media easier to handle. Backwards compatibility isn't an issue either hen the html5shiv is included.
Here's a sample HTML5 page structure (with html5shiv included) to get you started: http://www.sitepoint.com/a-basic-html5-template/

kimikai
07-07-2013, 05:37 PM
so all i have to do is change the head part of my html page into html5? and then i guess i can style the <li> parts of that code with css3?
also...any examples maybe on how id have to name my css parts to give backgrounds to the <li>'s?

Beverleyh
07-07-2013, 06:09 PM
so all i have to do is change the head part of my html page into html5? and then i guess i can style the <li> parts of that code with css3? Yes, that's about it. Although I recommend using the new markup tags ("article", "header", "footer", "nav", etc) to give your web page structure more meaning for search engines.


also...any examples maybe on how id have to name my css parts to give backgrounds to the <li>'s?I'm not sure what you mean. You can give any class name you like to your <li> elements - but "button" would seem an obvious choice so when you look back at your CSS you'll immediately see what it affects.

kimikai
07-07-2013, 06:22 PM
for example for this line: <li class="change-item" data-item="1">Item 1</li> it is in a <ul>
but i have diff backgrounds for each <li> soo... i was wondering if theres a certain way id have to build up my CSS
like normally you'd use #ul li { background:blablabla; } but is there a way to use something like #ul li data-item="1" { background:blablabla;}

if that makes any sense... because right now ill need diff classes for each <li> to make the whole code work in general

PS. the rest i had problems with seems fixed =)

Beverleyh
07-07-2013, 06:36 PM
I believe so;
#ul li[data-item="1"] { background:red; }I haven't tested it though. To be honest, I'd just add an extra class for each button and style that instead;
#ul li.button1 { background:red; }
#ul li.button2 { background:yellow; }
<li class="change-item button1" data-item="1">Item 1</li>
<li class="change-item button2" data-item="1">Item 1</li>

kimikai
07-07-2013, 06:44 PM
mhm ye i guess the fiddle code aint bad but it could use some extra tweaking to get it more personizable
i guess 2 classes would be easiest to get the hover and stuff implemented

yup yup i guess that will fix my problems haha, guess i should stop thinking like website building is some kind of impossible equasion because im missing the simplest solutions atm :o

Beverleyh
07-07-2013, 07:09 PM
i guess 2 classes would be easiest to get the hover and stuff implementedThat's easy to do in CSS with the hover pseudo class instead of an actual second class in the markup ;)
#ul li.button1 { background:red; }
#ul li.button1:hover { background:blue; }
#ul li.button2 { background:yellow; }
#ul li.button2:hover { background:green; }And the markup stays the same;
<li class="change-item button1" data-item="1">Item 1</li>
<li class="change-item button2" data-item="1">Item 1</li>

kimikai
07-07-2013, 08:43 PM
yea i know about the hover pseudo
i just meant that by giving every menu div 2 classes you can still call the javascript upon every button (because they have one identical class) and call the css on the second class so you can have diff effects etc. on each button aswell

molendijk
07-08-2013, 10:42 AM
I know there's a way to do this and I've done something similar before, but right now I just cant seem to get it right
i implemented the html part into a wrapper div for the menu and i put the javascript part in <script type="text/javascript></script> brackets at the bottom of my html page right above </body>
Did you put the jquery.js on your page? This works:

<!doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<title></title>

</head>

<body>

<div class="item-1 content-item" style="background: red; width: 170px">
I am the content for item 1
</div>

<div class="item-2 content-item" style="display: none; background: yellow; width: 170px">
I am the content for item 2
</div>

<div class="item-3 content-item" style="display: none; background: blue; color: white; width: 170px">
I am the content for item 3
</div>

<ul>
<li class="change-item" data-item="1">Item 1</li>
<li class="change-item" data-item="2">Item 2</li>
<li class="change-item" data-item="3">Item 3</li>
</ul>


<script>
$('.change-item').click(function(){
var this_item = $(this).attr("data-item");
$('.content-item').hide();
$('.item-' + this_item).fadeIn();
});
</script>

</body>

</html>

kimikai
07-08-2013, 11:44 AM
ye i got it working now too :) tho...it doesnt matter if you add the new jquery.js from google or the 1.3 version right?

molendijk
07-08-2013, 11:59 AM
ye i got it working now too :) tho...it doesnt matter if you add the new jquery.js from google or the 1.3 version right?
It doesn't matter.